@charset "utf-8";

@font-face {
    font-family: 'KccChaSaem';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2302@1.0/KCCChassam.woff2') format('woff2');
    font-weight: normal;
    font-display: swap;
}

@font-face {
    font-family: 'BagelFat';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_JAMO@1.0/BagelFatOne-Regular.woff2') format('woff2');
    font-weight: normal;
    font-display: swap;
}

@font-face {
    font-family: 'NanumMyeongjo';
    src: url(../image/font/NanumMyeongjoExtraBold.ttf) format('woff2');
    font-weight: normal;
    font-display: swap;
}

@font-face {
    font-family: 'KCCMurukmuruk';
    src: url(../image/font/KCCMurukmuruk.woff) format('woff');
    font-weight: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Cafe24ShiningStar';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_twelve@1.1/Cafe24Shiningstar.woff') format('woff');
    font-weight: normal;
    font-display: swap;
}
@font-face {
    font-family: 'MaruBuri';
    src: url('https://fastly.jsdelivr.net/gh/projectnoonnu/noonfonts_20-10-21@1.0/MaruBuri-Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}
/* noto */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans:ital,wght@0,100..900;1,100..900&display=swap');

@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');



/***************************/
/****** 서브 비주얼영역 *****/
/***************************/
.sub_visual {
    height: 650px;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}

.s01_intro .sub_visual {
    background-image: url('../image/sub/subVisual_s01_intro.jpg');
}

.list .sub_visual {
    background-image: url('../image/sub/subVisual_list.jpg');
}

.s01_1 .sub_visual {
    background-image: url('../image/sub/subVisual_s01_1.png');
}

.s01_2 .sub_visual {
    background-image: url('../image/sub/subVisual_s01_2.png');
}

.s01_3 .sub_visual {
    background-image: url('../image/sub/subVisual_s01_3.png');
}

.s01_4 .sub_visual {
    background-image: url('../image/sub/subVisual_s01_4.png');
}

.s01_5 .sub_visual {
    background-image: url('../image/sub/subVisual_s01_5.png');
}

.s01_6 .sub_visual {
    background-image: url('../image/sub/subVisual_s01_6.png');
}

.s02_1 .sub_visual {
    background-image: url('../image/sub/subVisual_s02_1.png');
}

.s02_2 .sub_visual {
    background-image: url('../image/sub/subVisual_s02_2.png');
}

.s02_3 .sub_visual {
    background-image: url('../image/sub/subVisual_s02_3.png');
}

.s02_4 .sub_visual {
    background-image: url('../image/sub/subVisual_s02_4.png');
}

.s02_5 .sub_visual {
    background-image: url('../image/sub/subVisual_s02_5.png');
}

.s02_6 .sub_visual {
    background-image: url('../image/sub/subVisual_s02_6.png');
}

.s02_7 .sub_visual {
    background-image: url('../image/sub/subVisual_s02_7.jpg');
}

.s03_1 .sub_visual {
    background-image: url('../image/sub/subVisual_s03_1.png');
}

.s03_2 .sub_visual {
    background-image: url('../image/sub/subVisual_s03_2.png');
}

.s03_3 .sub_visual {
    background-image: url('../image/sub/subVisual_s03_3.png');
}

.s03_4 .sub_visual {
    background-image: url('../image/sub/subVisual_s03_4.png');
}

.s03_5 .sub_visual {
    background-image: url('../image/sub/subVisual_s03_5.png');
}

.s04_1 .sub_visual {
    background-image: url('../image/sub/subVisual_s04_1.png');
}

.s04_2 .sub_visual {
    background-image: url('../image/sub/subVisual_s04_2.png');
}

.s04_3 .sub_visual {
    background-image: url('../image/sub/subVisual_s04_3.png');
}

.s04_4 .sub_visual {
    background-image: url('../image/sub/subVisual_s04_4.png');
}

.s04_5 .sub_visual {
    background-image: url('../image/sub/subVisual_s04_5.jpg');
}

.quiz .sub_visual {
    background-image: url('../image/sub/subVisual_quiz.png');
}

.privarcy .sub_visual {
    background-image: url('../image/sub/subVisual_privarcy.jpg');
}

.sub_head {
    background-color: #f9f9f9;
    padding: 70px 0px;
}

.sub_head .category {
    position: relative;
    height: 40px;
    margin-bottom: 48px;
}

.sub_head .category:after {
    display: block;
    content: '';
    clear: both;
    width: 100%;
    height: 1px;
    background-color: #000;
    position: absolute;
    left: 0px;
    right: 0px;
    bottom: 0px;
    z-index: 2;
}

.sub_head .category .depth {
    position: absolute;
    left: 0px;
    bottom: -1px;
    background-color: #f9f9f9;
    font-size: 32px;
    font-weight: 800;
    padding-right: 10px;
    z-index: 3;
}

.sub_head .category .item {
    position: absolute;
    bottom: -1px;
    right: 0px;
    background-color: #f9f9f9;
    font-family: 'Montserrat', sans-serif;
    font-size: 24px;
    font-weight: 700;
    color: #7f1085;
    padding-left: 10px;
    z-index: 3;
}

.sub_head .caption {
    margin-bottom: 48px;
}
.sub_head .caption.news{
    margin-bottom: 0;
}
.sub_head .caption .mini {
    font-size: 24px;
    font-weight: 800;
}

.sub_head .caption .title {
    font-size: 50px;
    font-weight: 800;
    margin: 10px 0px;
}

.sub_head .desc {
    font-size: 18px;
    line-height: 32px;
}

.sub_head .writer {
    position: relative;
    font-size: 16px;
    padding-left: 30px;
    margin-top: 20px;
}

.sub_head .writer:after {
    display: block;
    content: '';
    clear: both;
    width: 22px;
    height: 23px;
    position: absolute;
    left: 0px;
    top: 50%;
    margin-top: -12px;
    background-image: url('../image/sub/writer_icon.png');
    background-size: 22px 23px;
    background-repeat: no-repeat;
    background-position: center;
}

.sub_head .writer strong {
    font-weight: 800;
}

/* interview Box */
.sub .interviewBox {
    background-color: #f9f9f9;
    padding: 40px;
    border-top: 3px solid #000;
}

.sub .interviewBox_tit {
    font-size: 22px;
    font-weight: 800;
    text-align: center;
}
.sub .mini_interview{
    display: inline-flex;
    align-items: center;
    gap: 28px;
}
.sub .mini_interview .image{
    width: 120px
}
.sub .mini_interview .interview{
    padding: 4px 14px;
    border: 1px solid var(--4-1-point1, #9B0283);
    width: fit-content;
    margin-bottom: 12px;
}
.sub .mini_interview .caption{
    width: fit-content;
    padding: 4px 14px;
    border-radius: 999px;
    background: var(--4-1-point1, #9B0283);
    color: var(--Public-FFFFFF, #FFF);
    font-size: 15px;
}
@media all and (max-width: 500px){
.sub .mini_interview{
    flex-direction: column;
    width: 100%;
    justify-content: center;
    gap: 0;
}
.sub .mini_interview .txt_wrap{
    text-align: center;
}
.sub .mini_interview .interview,
.sub .mini_interview .caption{
    margin-right: auto;
    margin-left: auto;
}
}
@media all and (max-width: 1280px) {
    .sub_visual {
        height: 550px
    }

    .sub_head .caption .title {
        font-size: 40px;
    }
}

@media all and (max-width: 1024px) {
    .sub_visual {
        height: 450px
    }

    .sub_head .category {
        margin-bottom: 80px;
    }

    .sub_head .caption .mini {
        font-size: 20px;
    }

    .sub_head .caption .title {
        font-size: 30px;
    }

}

@media all and (max-width: 767px) {
    .sub_visual {
        height: 400px
    }

    .sub_head .category {
        margin-bottom: 60px;
    }

    .sub_head .category .depth {
        font-size: 28px;
    }

    .sub_head .category .item {
        font-size: 20px;
    }
    .sub_head .caption {
    margin-bottom: 16px;
    }
    .sub_head .caption .mini {
        font-size: 18px;
    }

    .sub_head .caption .title {
        font-size: 22px;
        margin: 5px 0;
    }

    .sub_head .desc {
        font-size: 16px;
        line-height: 28px;
    }

    .sub_head .writer {
        font-size: 14px;
    }
}

@media all and (max-width: 460px) {
    .sub_visual {
        height: 300px
    }

    .sub_head .category {
        margin-bottom: 50px;
    }

    .sub_head .category .depth {
        font-size: 18px;
    }

    .sub_head .category .item {
        font-size: 18px;
    }

    .sub_head .caption .mini {
        font-size: 16px;
        line-height: 18px;
    }

    .sub_head .caption .title {
        font-size: 24px;
        line-height: 30px;
    }

    .sub_head .writer {
        font-size: 13px;
    }

    .sub_head .desc {
        font-size: 14px;
        line-height: 26px;
    }
}

/* dep */
.dep1 {
    text-indent: -1.8em;
    padding-left: 1.8em;
}


/*************************/
/****** 서브 공통영역 *****/
/*************************/
.txtL {
    text-align: left !important;
}

.txtC {
    text-align: center !important;
}

.txtR {
    text-align: right !important;
}

.mt0 {
    margin-top: 0px !important;
}

.mt5 {
    margin-top: 5px !important;
}

.mt8 {
    margin-top: 8px !important;
}

.mt10 {
    margin-top: 10px !important;
}
.mr6 {
    margin-right: 6px !important;
}
.mt12 {
    margin-top: 12px !important;
}

.mt14 {
    margin-top: 14px !important;
}

.mt20 {
    margin-top: 20px !important;
}

.mt28 {
    margin-top: 28px !important;
}

.mt30 {
    margin-top: 30px !important;
}

.mt40 {
    margin-top: 40px !important;
}

.mt80 {
    margin-top: 80px !important;
}

.mt100 {
    margin-top: 100px !important;
}

.mb0 {
    margin-bottom: 0px !important;
}

.mb10 {
    margin-bottom: 10px !important;
}
.mb12 {
    margin-bottom: 12px !important;
}

.mb14 {
    margin-bottom: 14px !important;
}

.mb18 {
    margin-bottom: 18px !important;
}
.mb20 {
    margin-bottom: 20px !important;
}

.mb28 {
    margin-bottom: 28px !important;
}

.mb30 {
    margin-bottom: 30px !important;
}

.mb40 {
    margin-bottom: 40px !important;
}

.mb60 {
    margin-bottom: 60px !important;
}

.sub_con {
    padding: 80px 0px;
}

.sub_con .contents .part {
    margin-bottom: 120px;
}
@media all and (max-width: 767px){
    .sub_con .contents .part {
    margin-bottom: 80px;
}
}
.sub_con .contents .part:last-child {
    margin-bottom: 0px;
}

.sub_con .contents .row {
    overflow: hidden;
}

.sub_con .contents .row .column {
    display: inline-block;
    float: left;
    padding-left: 28px;
}

.sub_con .contents .row .column:first-child {
    padding-left: 0;
}

.sub_con .contents .row.width5>.column:first-child {
    width: 5%;
}

.sub_con .contents .row.width5>.column {
    width: 95%;
}

.sub_con .contents .row.width8>.column:first-child {
    width: 8%;
}

.sub_con .contents .row.width8>.column {
    width: 92%;
}

.sub_con .contents .row.width10>.column:first-child {
    width: 10%;
}

.sub_con .contents .row.width10>.column {
    width: 90%;
}

.sub_con .contents .row.width15>.column:first-child {
    width: 15%;
}

.sub_con .contents .row.width15>.column {
    width: 85%;
}

.sub_con .contents .row.width20>.column:first-child {
    width: 20%;
}

.sub_con .contents .row.width20>.column {
    width: 80%;
}

.sub_con .contents .row.width25>.column:first-child {
    width: 25%;
}

.sub_con .contents .row.width25>.column {
    width: 75%;
}

.sub_con .contents .row.width30>.column:first-child {
    width: 30%;
}

.sub_con .contents .row.width30>.column {
    width: 70%;
}

.sub_con .contents .row.width35>.column:first-child {
    width: 35%;
}

.sub_con .contents .row.width35>.column {
    width: 65%;
}

.sub_con .contents .row.width40>.column:first-child {
    width: 40%;
}

.sub_con .contents .row.width40>.column {
    width: 60%;
}

.sub_con .contents .row.width45>.column:first-child {
    width: 45%;
}

.sub_con .contents .row.width45>.column {
    width: 55%;
}

.sub_con .contents .row.width50>.column:first-child {
    width: 50%;
}

.sub_con .contents .row.width50>.column {
    width: 50%;
}

.sub_con .contents .row.width55>.column:first-child {
    width: 55%;
}

.sub_con .contents .row.width55>.column {
    width: 45%;
}

.sub_con .contents .row.width60>.column {
    width: 60%;
}

.sub_con .contents .row.width60>.column+.column {
    width: 40%;
}

.sub_con .contents .row.width65>.column {
    width: 64.6667%;
}

.sub_con .contents .row.width65>.column+.column {
    width: 35.3333%;
}

.sub_con .contents .row.width70>.column {
    width: 70%;
}

.sub_con .contents .row.width70>.column+.column {
    width: 30%;
}

.sub_con .contents .row.width72>.column {
    width: 72%;
}

.sub_con .contents .row.width72>.column+.column {
    width: 28%;
}

.sub_con .contents .row.width75>.column {
    width: 75%;
}

.sub_con .contents .row.width75>.column+.column {
    width: 25%;
}

.sub_con .contents .row.width80>.column {
    width: 80%;
}
.sub_con .contents .row.width80>.column+.column {
    width: 20%;
}

.sub_con .contents .row.width87>.column:first-child {
    width: 87%;
}

.sub_con .contents .row.width87>.column {
    width: 13%;
}

.sub_con .contents .row.width90>.column:first-child {
    width: 90%;
}

.sub_con .contents .row.width90>.column {
    width: 10%;
}

.sub_con .contents .row.width100>.column {
    width: 100%;
    padding-left: 0px;
}

.sub_con .contents .row.width100>.column+.column {
    width: 100%;
    padding-left: 0px;
}

.txt_wrap {
    margin: 28px 0px;
}

.txt_wrap .title {
    margin-bottom: 18px;
    font-size: 22px;
    line-height: 1.6;
    letter-spacing: -0.025em;
    font-weight: bold;
}

.txt_wrap .stitle {
    color: var(--Public-222222, #222);
    font-family: NanumSquare;
    font-size: 20px;
    font-style: normal;
    line-height: 1.5;
    letter-spacing: -0.2px;
    margin-bottom: 12px;
}
.txt_wrap .btitle{
    color: var(--Public-222222, #222);
    font-size: 28px;
    line-height: 1.35;
    letter-spacing: -0.28px;
}
.txt_wrap .text {
    /* Sub/Body */
    font-size: 18px;
    font-style: normal;
    font-weight: 400;
    line-height: 34px;
    /* 188.889% */
    letter-spacing: -0.72px;
    word-break: break-all;
}

.txt_wrap .text sup {
    font-size: 10px !important;
}

.txt_wrap .sentence {
    margin: 2.5rem 0;
}

.txt_wrap .sentence>p {
    position: relative;
    margin: 0 auto;
    font-size: 20px;
    text-align: center;
    line-height: 35px;
    word-break: keep-all;
}

.txt_wrap .description {
    position: relative;
    margin-top: 20px;
}

.txt_box {
    background-color: #dee2f2;
    padding: 20px;
    border-radius: 20px;
}

.txt_box h4 {
    font-size: 18px;
}

.txt_box p {
    font-size: 16px;
}

.img_wrap {
    margin: 28px 0px;
    text-align: center;
}

.img_wrap:after {
    display: block;
    content: '';
    clear: both;
}

.img_wrap .image img {
    max-width: 100%;
}

.img_wrap.two .image {
    float: left;
    width: 49%;
    margin-right: 2%;
}

.img_wrap.two .image:nth-child(2) {
    margin-right: 0px !important;
}

.img_wrap.three .image {
    float: left;
    width: 32%;
    margin-right: 2%;
}

.img_wrap.three .image:nth-child(3) {
    margin-right: 0px !important;
}

.img_wrap.four .image {
    float: left;
    margin-right: 2%;
    object-fit: cover;
}

.img_wrap.four .image:nth-child(1) {
    width: 38%;
}

.img_wrap.four .image:nth-child(2) {
    margin-right: 0px !important;
    width: 60%;
}

.img_wrap.four .image img {
    min-height: 559px;
    object-fit: cover;
    max-height: 559px;
    width: 100%;
}

.img_wrap .caption {
    font-size: 14px;
    color: #666666;
    text-align: center;
    padding-top: 10px;
    clear: both;
}

.flexs {
    display: flex;
    justify-content: space-between;
    gap: 28px;
}

.flexs.two {
    max-width: 1000px !important;
    margin: 0 auto;
}

.flexs.two>div {
    width: 50% !important;
}

.flexs.two.width800 {
    max-width: 800px !important;
    margin: 0 auto;
}

.flexs.four>div {
    width: 25% !important;
}

.flexs.four {
    gap: 20px;
}

.flexs.end {
    align-items: flex-end;
}

.flexs.center {
    align-items: center;
}
.flexs.start{
    justify-content: flex-start;
}
.flex.wrap,
.flexs.wrap{
    flex-wrap: wrap;
}
.flexs.two.wrap>div {
    width: calc(50% - 14px) !important;
}
@media all and (max-width:1280px) {
    .img_wrap.four .image img {
        min-height: 459px;
        max-height: 459px;
    }

    .sub_con .contents .row>.column {
        width: 100% !important;
    }

    .sub_con .contents .row>.column:last-of-type {
        margin-top: 28px;
        padding-left: 0
    }

    .sub_con .contents .row.row_r {
        display: flex;
        flex-direction: column-reverse;
    }

    .sub_con .contents .row.row_r>.column {
        float: none;
    }

    .sub_con .contents .row.row_r>.column:last-of-type {
        margin-top: 0;
    }

    .sub_con .contents .row.row_r>.column:first-child {
        margin-top: 28px;
    }
}

@media all and (max-width:1024px) {

    .re-mt0 {
        margin-top: 0 !important
    }

    .txt_wrap .title {
        font-size: 18px;
    }
    .txt_wrap .stitle{
        font-size: 18px;
    }
    .txt_wrap .btitle{
        font-size: 26px;
    }
    .txt_wrap .text {
        font-size: 16px;
        line-height: 28px;
    }

    .img_wrap .image img {
        width: 100%;
    }

    .img_wrap.two .image {
        width: 100%;
        margin-bottom: 20px;
    }

    .img_wrap.two .image:last-child {
        margin-bottom: 0px;
    }

    .img_wrap.three .image {
        width: 100%;
        margin-bottom: 20px;
    }

    .img_wrap.three .image:last-child {
        margin-bottom: 0px;
    }

    .img_wrap.four .image {
        width: 100% !important;
        margin-bottom: 20px !important;
        object-fit: contain !important;
    }





    .flexs.three>:nth-child(2) {
        margin-right: 0px
    }
}
@media all and (max-width:767px){
    .txt_wrap .btitle{
        font-size: 24px;
    }
        .flexs {
        display: block
    }
        .flexs .mb{
        margin-bottom: 28px !important;
    }
        .flexs> :nth-child(1) {
        margin-right: 0px
    }

    .flexs.two>div,
    .flexs.two.wrap>div,
    .flexs.three>div {
        width: 100% !important;
    }
}
@media all and (max-width:460px) {}




/**************************/
/****** 페이지별DESIGN *****/
/**************************/

/* Sub01_1 */
.s01_1 .img_wrap {
    margin: 0;
}
.s01_1 .txt_wrap {
    margin: 0;
}
.s01_1 .width279{
    max-width: 279px;
}
.s01_1 .sub_head .flexs{
    align-items: center;
}

/* 나의 능력치 TOP 5 (cont1) */
.s01_1 .part.top5{
    padding: 60px;
    background: url(../image/sub/s01_1_img_bg_top.png) center / cover no-repeat; /* 임의 경로 */
}
.s01_1 .top5 .text{
    font-size: 20px;
    line-height: 1.6;
    word-break: keep-all;
}
.s01_1 .top5 .tp_head{
    margin-bottom: 40px;
}
.s01_1 .top5 .tp_sub{
    color: var(---point1, #244A65);
}
/* 가운데 텍스트 양옆 대쉬 선 */
.s01_1 .top5 .tp_line{
    display: flex;
    align-items: center;
}
.s01_1 .top5 .tp_line::before,
.s01_1 .top5 .tp_line::after{
    content: '';
    flex: 1 1 0;
    border-top: 1px dashed var(--Public-222222, #222);
}
.s01_1 .top5 .tp_line.dash{
    gap: 12px;
    margin: 80px 0 24px;
}
.s01_1 .top5 .tp_title{
    padding: 4px 20px;
    background: var(---point1, #244A65);
    color: var(--Public-FFFFFF, #FFF);
    font-size: 28px;
    line-height: 38px;
}
.s01_1 .top5 .tp_title .ccolor{
    color: var(---bg1, #FCD475);
}
/* TOP 1~5 */
.s01_1 .top5 .tp_rank{
    display: flex;
    align-items: stretch;
    gap: 40px;
}
.s01_1 .top5 .tp_first{
    display: flex;
    flex-direction: column;
    flex: 741 1 0;
    min-width: 0;
}
.s01_1 .top5 .tp_first > .tp_num{
    padding: 12px 0;
    border-radius: 12px 12px 0 0;
    background: var(---point1, #244A65);
    color: var(--Public-FFFFFF, #FFF);
}
.s01_1 .top5 .tp_first_body{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 20px;
    flex: 1 1 auto;
    padding: 40px 28px;
    border-radius: 0 0 12px 12px;
    background: var(--Public-FFFFFF, #FFF);
    text-align: center;
}
.s01_1 .top5 .tp_first_body img{
    display: block;
    width: 208px;
    height: 200px;
    aspect-ratio: 26 / 25;
    object-fit: contain;
}
.s01_1 .top5 .tp_list{
    display: flex;
    flex-direction: column;
    gap: 10px;
    flex: 819 1 0;
    min-width: 0;
}
.s01_1 .top5 .tp_box{
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 16px 28px;
    border-radius: 12px;
    background: var(--Public-FFFFFF, #FFF);
}
.s01_1 .top5 .tp_list .tp_box{
    flex: 1 1 0;
}
.s01_1 .top5 .tp_box .image{
    flex-shrink: 0;
}
.s01_1 .top5 .tp_box .image img{
    display: block;
    width: 70px;
    height: 70px;
    object-fit: contain;
}
.s01_1 .top5 .tp_num{
    color: var(--Public-222222, #222);
    text-align: center;
    font-family: NanumSquare;
    font-size: 28px;
    font-style: normal;
    font-weight: 800;
    line-height: 38px;
    letter-spacing: -0.28px;
}
.s01_1 .top5 .tp_box .tp_num{
    flex-shrink: 0;
    padding-right: 20px;
    border-right: 1px solid var(--Public-999999, #999);
}

/* 관심 스킬 */
.s01_1 .top5 .tp_skills{
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
}
@media all and (max-width:1024px) {
    .s01_1 .part.top5{
        padding: 48px 24px;
    }
    .s01_1 .top5 .tp_rank{
        flex-direction: column;
        gap: 10px;
    }
    .s01_1 .top5 .tp_first,
    .s01_1 .top5 .tp_list{
        flex: none;
    }
    .s01_1 .top5 .tp_line.dash{
        margin-top: 60px;
    }
    .s01_1 .top5 .tp_skills{
        grid-template-columns: repeat(2, 1fr);
    }
}

@media all and (max-width:767px) {
    .s01_1 .top5 .tp_title{
        font-size: 24px;
        line-height: 34px;
    }
    .s01_1 .top5 .tp_box{
        gap: 16px;
        padding: 16px 20px;
    }
    .s01_1 .top5 .tp_first_body img{
        width: 156px;
        height: 150px;
    }
}

@media all and (max-width:500px) {
    .s01_1 .part.top5{
        padding: 40px 16px;
    }
    .s01_1 .top5 .text{
        font-size: 18px;
    }
    .s01_1 .top5 .tp_num{
        font-size: 24px;
        line-height: 34px;
    }
    .s01_1 .top5 .tp_title{
        font-size: 20px;
        line-height: 30px;
    }
    .s01_1 .top5 .tp_box .tp_num{
        padding-right: 16px;
    }
    .s01_1 .top5 .tp_box .image img{
        width: 52px;
        height: 52px;
    }
    .s01_1 .top5 .tp_skills{
        grid-template-columns: 1fr;
    }
}

/* 연차별 레벨업 스킬 (cont4, cont5) */
.s01_1 .part.level{
    padding: 60px;
   background-image: url(../image/sub/s01_1_img_bg.png);
   background-size: cover;
}
.s01_1 .level .lv_head{
    margin-bottom: 12px;
    color: var(--Public-FFFFFF, #FFF);
}
.s01_1 .level .lv_year,
.s01_1 .level .lv_label{
    display: table;
    margin: 0 auto;
    padding: 0 8px;
    background: var(--Public-222222, #222);
}
.s01_1 .level .lv_year{
    margin-bottom: 6px;
    color: var(---bg1, #FCD475);
}
.s01_1 .cont5 .lv_year{
    color: var(---bg5, #ADDEF8);
}
.s01_1 .level .lv_label{
    color: var(--Public-FFFFFF, #FFF);
}
.s01_1 .level .lv_grid{
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 40px;
}
.s01_1 .level .lv_item{
    min-width: 0;
}
.s01_1 .level .lv_card{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 24px;
    padding: 40px 28px;
    background: var(--Public-FFFFFF, #FFF);
    text-align: center;
}
.s01_1 .level .lv_card .text{
    word-break: keep-all;
}
/* 이미지 칸: 행 높이를 늘리지 않고 하얀 박스와 같은 칸 크기를 차지 */
.s01_1 .level .lv_item.img_wrap{
    position: relative;
}
.s01_1 .level .lv_item.img_wrap .image{
    position: absolute;
    inset: 0;
    display: flex;
    justify-content: flex-end;
    align-items: flex-end;
}
.s01_1 .level .lv_item.img_wrap img{
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}
.s01_1 .level .lv_tags{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
}
.s01_1 .level .lv_tag{
    padding: 0 8px;
}
.s01_1 .level .lv_tag.yellow{
    background: var(---bg1, #FCD475);
}
.s01_1 .level .lv_tag.yellow2{
    background: #F7F7C6;
}
.s01_1 .level .lv_tag.blue{
    background: var(---bg5, #ADDEF8);
}
.s01_1 .level .lv_tag.blue2{
    background: #AFDCDE;
}
.s01_1 .level .lv_tag.green{
    background: var(---bg2, #D8E698);
}
.s01_1 .level .lv_tag.green2{
    background: #C0E1CA;
}
.s01_1 .level .lv_tag.pink{
    background: var(---bg4, #F9D1CB);
}
.s01_1 .level .lv_tag.purple{
    background: var(---bg3, #D2CCE6);
}
.s01_1 .level .lv_tag.beige{
    background: #DECAB2;
}
.s01_1 .level .lv_tag.gray{
    background: #D3D3D4;
}
.s01_1 .level .lv_tag.orange{
    background: #FBD8AC;
}
.s01_1 .level .lv_tag.orange2{
    background: #F7BB9E;
}
.s01_1 .level .lv_name{
    font-size: 15px;
}
.s01_1 .level .lv_name::before{
    content: '';
    display: block;
    width: 40px;
    height: 1px;
    margin: 0 auto 20px;
    background: var(--Public-222222, #222);
}
@media all and (max-width:1024px) {
    .s01_1 .part.level{
        padding: 48px 24px;
    }
    .s01_1 .level .lv_grid{
        gap: 28px;
    }
    .s01_1 .level .lv_card{
        padding: 32px 20px;
    }
}

@media all and (max-width:767px) {
    .s01_1 .level .lv_grid{
        grid-template-columns: 1fr;
        gap: 20px;
    }
    .s01_1 .level .lv_item.img_wrap .image{
        position: static;
    }
    .s01_1 .level .lv_item.img_wrap img{
        max-width: 70%;
    }
    /* 한 줄 배치일 때 그리드 맨 아래로 이동 */
    .s01_1 .level .lv_item.mo_last{
        order: 1;
    }
}

@media all and (max-width:500px) {
    .s01_1 .part.level{
        padding: 40px 16px;
    }
    .s01_1 .level .lv_card{
        gap: 20px;
        padding: 28px 16px;
    }
}

/* Sub01_2 */
.pc-only {
    display: block;
}
.mo-only{
    display: none;
}
.s01_2 .part{
    background-image: url(../image/sub/s01_2_img_bg.png);
    background-size: cover;
    padding: 60px;
}
.s01_2 .part.bg_none{
    background: none;
    padding: 0 !important;
}
/* 강조점이 들어갈 문자 공통 설정 */
  .dot-sm {
    position: relative;
    display: inline-block;
  }

  /* 글자 위에 작게 들어갈 점 (::before) */
  .dot-sm::before {
    content: '';
    position: absolute;
    top: -3px;               
    left: 50%;
    transform: translateX(-50%);
    width: 4px;            
    height: 4px;
    background-color: #EE7B36; 
    border-radius: 50%;       
  }

.s01_2 .stitle{
    text-decoration-line: underline;
text-decoration-style: solid;
text-decoration-skip-ink: auto;
text-decoration-thickness: auto;
text-underline-offset: auto;
text-underline-position: from-font;
}
.s01_2  .text.bg{
    padding: 4px 14px;
    background: var(---point1, #EE7B36);
    width: fit-content;
    color: #fff;
    margin-bottom: 12px;
    font-weight: 700;
}
.s01_2  .text.fsz15{
    font-size: 15px;
    line-height: 1.5;
}
.s01_2 .ccolor1 {
    color: var(---point1, #EE7B36);
}

/* last part */
.s01_2 .line_wrap{
    justify-content: center;
    align-items: center;
    gap: 12px;
}
.s01_2 .line_wrap .stitle{
    text-decoration: none;
    flex-shrink: 0;
    margin-bottom: 0;
}
.s01_2 .line_wrap .line{
    width: 100%;
    height: 1px;
    background: #222;
    flex-grow: 1;
}
.s01_2 .line_wrap .round{
    width: 4px;
    height: 4px;
    flex-shrink: 0;
    aspect-ratio: 1/1;
    background: #EE7B36;
    border-radius: 50%;
}
.s01_2 .t24{
    width: fit-content;
    margin: 0 auto;
    color: var(---point1, #EE7B36);
    text-align: center;
    font-size: 24px;
    font-weight: 800;
    line-height: 1.75;
    letter-spacing: -0.96px;
    position: relative;
    z-index: 2;
}
.s01_2 .t24::after{
    content: '';
    position: absolute;
    z-index: -1;
    left: -5px;top: 45%;
    transform: translateY(-50%);
    display: block;
    width: 25px;height: 25px;
    border-radius: 999px;
    background: #fff;
}
.s01_2 .box{
    width: calc(50% - 14px);
    padding: 60px 40px;
    background-image: url(../image/sub/s01_2_img_bg2.png);
    background-size: cover;
    background-position: center;
}
.s01_2 .box .check{
    padding: 20px 28px 0 28px;
    border-top: 0.5px solid var(--Public-222222, #222);
}
.s01_2 .box.b2{
    background-image: url(../image/sub/s01_2_img_bg3.png);
}
.s01_2 .box.b3{
    background-image: url(../image/sub/s01_2_img_bg4.png);
}
.s01_2 .box.b4{
    background-image: url(../image/sub/s01_2_img_bg5.png);
}
.s01_2 mark{
    background: #EAB17E;
}
.s01_2 mark.ver2{
    background: #EDBEB5;
}
.s01_2 mark.ver3{
    background: #DCE1AC;
}
.tm-none{
        display: block;
    }
@media all and (max-width:1240px){
    .tm-none2{
        display: none !important;
    }
}
@media all and (max-width:1024px) {
    .s01_2 .part{
        padding: 35px;
    }
    .tm-none{
        display: none !important;
    }
    .s01_1 .sub_head .flexs .width279{
        margin: 20px auto 0 !important;
    }
    .s01_2 .flexs{
        display: flex;
        flex-direction: row;
    }

}
@media all and (max-width:767px) {
    .pc-only {
        display: none;
    }
    .mo-only {
        display: block;
    }
    .s01_2 .part{
        padding: 25px;
    }
    .s01_2 .flexs{
        display: flex;
        flex-direction: column;
        gap: 0;
    }
    .s01_2 .box{
        width: 100%;
    }
    .s01_2 .line_wrap{
        flex-direction: row;
        gap: 6px;
    }

}

@media all and (max-width:540px) {
    .s01_2 .box{
        width: 100%;
        padding: 20px 15px;
    }
    .s01_2 .box .check{
        padding: 0;
        padding-top: 20px;
    }
}

@media all and (max-width:425px) {
    .s01_2 .part .inner .paper .icon,
    .s01_2 .part .inner .paper .icon2{
        display: none;
    }

}
/* Sub01_3 */
.mw944 {
    max-width: 944px;
    margin: 0 auto !important;
}
.s01_3 .ccolor1_3{
    color: var(--1-4-point1, #890C84);
}

.s01_3 .sub_head {
    padding: 80px 0;
}
.s01_3 .box{
    flex:  1 0 0;
}
.s01_3 .box .round{
    padding: 2px 12px 0;
    margin-bottom: 8px;
    width: fit-content;
    height: fit-content;
    color: var(--Public-FFFFFF, #FFF);
    font-size: 15px;
    font-weight: 700;
    border-radius: 999px;
background: var(--1-4-point1, #890C84);
}
.s01_3 .part.bg {
    background: url('../image/sub/s01_3_img_bg.png') no-repeat;
    background-size: cover;
    background-position: left top;
    padding: 60px;
}
.s01_3 .part.bg .tit_wrap.interview{
    width: fit-content;
    margin: 0 auto;
    padding: 17px 14px;
    background: var(---point1, #890C84);
    color: var(--Public-FFFFFF, #FFF); 
    margin-bottom: 40px;
}
.s01_3 .part.bg .tit_wrap.interview .title{
    padding-bottom: 4px;
    border-bottom: 0.5px solid var(--Public-FFFFFF, #FFF);
    margin-bottom: 6px;
}

.s01_3 .part.bg .flexs .q {
    min-width: 24px;
    margin-right: 6px;

}
.s01_3 .part.bg .flexs .text {
    margin-bottom: 28px;
    line-height: 32px;
}
.lh17{
    line-height: 1.77 !important;
}
.lh16{
 line-height: 1.6 !important;
}
.lh15{
 line-height: 1.55 !important;
}
.s01_3 .width304{
    min-width: 304px;
}
.s01_3 .width160{
    max-width: 160px;
}
.s01_3 .part.bg.last .txt_wrap,
.s01_3 .part.bg.last .img_wrap{
    margin: 0;
}
.s01_3 .part.bg.last .box2{
    display: flex;
    justify-content: center;
    gap: 20px;
    
}
.s01_3 .part.bg.last .box2.reverse{
    flex-direction: row-reverse;
}
.s01_3 .part.bg.last .flexs p.text{
    margin-bottom: 0px;
    padding-left: 10px ;
    text-indent: -10px;
    letter-spacing: -0.1em;
}
.s01_3 .part.bg.last .flexs p.text.ls5{
    letter-spacing: -0.1em !important;
    
}
.s01_3 .part .kcc{
    font-family: 'KccChaSaem';
}
.s01_3 .part.bg.last .caption{
    font-size: 15px;
    line-height: 1.4;
}
.s01_3 .part.bg.last .bg2{
    background: url('../image/sub/s01_3_img_bg2.png')center / cover no-repeat;
    padding: 40px 45px 60px 10px;
}
.s01_3 .part.bg.last .bg3{
    background: url('../image/sub/s01_3_img_bg3.png')center / cover no-repeat;
    padding: 107px 56px 60px 26px;
}
.s01_3 .part.bg.last .bg4{
    background: url('../image/sub/s01_3_img_bg4.png')left / cover no-repeat;
    padding: 48px 40px 60px 32px;
}
.s01_3 .part.bg.last .bg5{
    background: url('../image/sub/s01_3_img_bg5.png')center / cover no-repeat;
    padding: 50px 32px 60px 10px;
}
.s01_3 .part.bg.last .cont4.bg4{
    padding-left: 110px;
    background-size: contain;
    background-position: left !important;
}
.s01_3 .part.bg.last .cont8.bg2{
    padding: 60px;
    background-size: contain;
}
@media all and (max-width:1024px) {
    .s01_3 .flexs.txt_wrap{
        display: flex;
        flex-direction: row;
        
    }
    .s01_3 .flexs {
        display: flex;
        flex-direction: column;
    }

    .s01_3 .flexs .box {
        margin-bottom: 28px;
    }
    .s01_3 .part.bg .tit_wrap .text.big{
        font-size: 24px;
    }
    .s01_3 .part {
        margin-bottom: 80px !important;
    }

    .s01_3 .part.bg .flexs .person {
        display: none;
    }
    .s01_3 .part.bg.last .flex{
        gap: 28px;
    }
    .s01_3 .flexs.yel .img_wrap {
        margin-bottom: 20px;
    }
    .s01_3 .part.bg{
        padding: 40px 60px;
    }
    .s01_3 .part.bg.last .title.big{
        font-size: 24px;
    }
    .s01_3 .part.bg.last .bg2{
        background: url('../image/sub/s01_3_img_bg2.png')center / 80% no-repeat;
        padding: 40px 0 30px;
    }
    .s01_3 .part.bg.last .bg3{
        background: url('../image/sub/s01_3_img_bg3.png')center / 90% no-repeat;
        padding: 150px 0 56px;
    }
    .s01_3 .part.bg.last .bg4{
        background: url('../image/sub/s01_3_img_bg4.png')center / 100% no-repeat;
        padding: 48px 0 32px;
    }
    .s01_3 .part.bg.last .bg5{
        background: url('../image/sub/s01_3_img_bg5.png')center / 80% no-repeat;
        padding: 50px 0 ;
    }
    .s01_3 .part.bg.last .cont4.bg4{
        padding-left: 0;
        background-position: 0!important;
    }
    .s01_3 .part.bg.last .cont8.bg2{
    padding: 80px 0 80px;
    background-size: contain;
}
    .s01_3 .flexs.end{
        display: block;
    }
}

@media all and (max-width:767px) {

     .s01_3 .flexs.txt_wrap{
        display: flex;
        flex-direction: column;
        
    }
    .s01_3 .part.bg .tit_wrap .text.big{
        font-size: 22px;
    }
    .s01_3 .part.bg.last .title.big{
        font-size: 22px;
    }
   .s01_3 .part.bg{
        padding: 25px ;
    }

    .s01_3 .part.bg.last .cont4.bg4{
        padding-left: 0;
        background-position: 0 !important;
    }
}

@media all and (max-width:450px) {
    .s01_3 .part.bg.last .box2{
        flex-direction: column;
        gap: 6px;
        
    }

}

/* Sub01_3 키워드로 보는 강북지점 강점 */
.s01_3 .flexs.kw{
    display: flex;
    flex-direction: row;
    align-items: stretch;
    gap: 16px;
}
.s01_3 .kw .txt_wrap{
    margin: 0;
}
.s01_3 .kw_head{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    flex-shrink: 0;
}
.s01_3 .kw_head .title{
    margin-bottom: 12px;
    word-break: keep-all;
}
.s01_3 .kw_top5 img{
    display: block;
    max-width: 100%;
}
.s01_3 .kw_body{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 16px;
    flex: 1 1 0;
    min-width: 0;
}
.s01_3 .kw_body .text{
    line-height: 1.55;
}
.s01_3 .flexs.kw_list{
    display: flex;
    flex-direction: row;
    gap: 20px;
    padding-left: 40px;
}
.s01_3 .kw_item{
    flex: 1 1 0;
    min-width: 0;
}
.s01_3 .kw_item .text{
    word-break: keep-all;
}
.s01_3 .kw_key{
    margin-bottom: 8px;
    font-weight: 700;
    font-style: italic;
}
.s01_3 .kw_line img{
    display: block;
    width: 100%;
}
@media all and (max-width:1024px) {
    .s01_3 .flexs.kw_list{
        gap: 12px;
        padding-left: 20px;
    }
}

@media all and (max-width:767px) {
    .s01_3 .flexs.kw{
        flex-direction: column;
        gap: 24px;
    }
    /* 제목 + Top5 이미지 가로 배치 */
    .s01_3 .kw_head{
        flex-direction: row;
        align-items: center;
        gap: 16px;
        justify-content: center;
    }
    .s01_3 .kw_head .title{
        margin-bottom: 0;
    }
    .s01_3 .kw_top5{
        flex-shrink: 0;
    }
    .s01_3 .kw_top5 img{
        max-width: 110px;
    }
    /* 왼쪽 세로 라인 + 오른쪽 키워드 세로 나열 */
    .s01_3 .kw_body{
        flex-direction: row;
        align-items: stretch;
        justify-content: center;
        gap: 20px;
    }
    .s01_3 .kw_line{
        order: -1;
        position: relative;
        flex: 0 0 40px;
        overflow: hidden;
    }
    /* 시계 방향 90도 회전: 체크무늬 끝이 아래, 넘치는 부분은 위에서 잘림 */
    .s01_3 .kw_line img{
        position: absolute;
        top: 100%;
        right: 50%;
        width: auto;
        max-width: none;
        transform-origin: 100% 0;
        transform: rotate(90deg) translateY(-50%);
    }
    .s01_3 .flexs.kw_list{
        flex-direction: column;
        gap: 20px;
        padding-left: 0;
    }
    .s01_3 .kw_key{
        margin-bottom: 4px;
    }
}

/* Sub01_3 강북지점 타임라인 */
.s01_3 .last .image.title{
    max-width: 340px;
    margin: 0 auto;
}
.s01_3 .tl_wrap{
    position: relative;
    display: flex;
    gap: 120px; /* 라인 40px + 양옆 40px */
    margin: 40px 0 80px;
}
.s01_3 .tl_line{
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    width: 40px;
    transform: translateX(-50%);
    min-width: 56px;
}
.s01_3 .tl_line img{
    display: block;
    width: 100%;
    height: 100%;
    object-fit: fill;
}
.s01_3 .tl_col{
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 120px;
    flex: 1 1 0;
    min-width: 0;
}
.s01_3 .tl_col.left{
    margin-top: 40px;
}
.s01_3 .tl_col.right{
    margin-top: 160px;
    align-items: start;
}
.s01_3 .tl_deco{
    margin-bottom: 16px;
}
.s01_3 .tl_deco img{
    display: block;
    max-width: 160px;
}
.s01_3 .tl_body{
    display: flex;
    align-items: flex-end;
    gap: 16px;
}
.s01_3 .tl_txt{
    flex: 0 1 auto;
    min-width: 0;
}
.s01_3 .tl_tag{
    display: table;
    margin-bottom: 10px;
    padding: 2px 10px;
    background: var(--Public-FFFFFF, #FFF);
}
.s01_3 .tl_tag.purple{
    color: #890C84;
}
.s01_3 .tl_tag.gray{
    color: #525666;
}
.s01_3 .tl_tit{
    margin-bottom: 0;
    word-break: keep-all;
    font-weight: 800;
    line-height: 1.45;
}
.s01_3 .tl_tit.purple{
    color: #890C84;
}
.s01_3 .tl_tit.gray{
    color: #525666;
}
.s01_3 .tl_person{
    flex-shrink: 0;
}
.s01_3 .tl_person img{
    display: block;
    width: 150px;
}
.s01_3 .tl_person.width214 img{
    display: block;
    width: 214px;
}
.s01_3 .tl_hash{
    margin-top: 16px;
    font-size: 15px;
    line-height: 1.6;
    word-break: keep-all;
}
@media all and (max-width:1024px) {
    .s01_3 .tl_person img{
        width: 110px;
    }
    .s01_3 .tl_person.width214 img{
         max-width: 150px;
    }
}

@media all and (max-width:767px) {
    .s01_3 .flexs.end{
        display: block;
    }
    /* 가운데 라인을 배경으로 두고 한 줄로 나열 (위→아래 순서 유지) */
    .s01_3 .tl_wrap{
        flex-direction: column;
        gap: 60px;
        padding: 40px 0;
    }
    .s01_3 .tl_col{
        display: contents;
    }
    .s01_3 .tl_item{
        position: relative;
    }
    .s01_3 .tl_col.left .tl_item:nth-child(1){ order: 1; }
    .s01_3 .tl_col.right .tl_item:nth-child(1){ order: 2; }
    .s01_3 .tl_col.left .tl_item:nth-child(2){ order: 3; }
    .s01_3 .tl_col.right .tl_item:nth-child(2){ order: 4; }
    .s01_3 .tl_col.left .tl_item:nth-child(3){ order: 5; }
    .s01_3 .tl_col.right .tl_item:nth-child(3){ order: 6; }
    .s01_3 .tl_col.left .tl_item:nth-child(4){ order: 7; }
    .s01_3 .tl_col.right .tl_item:nth-child(4){ order: 8; }
    .s01_3 .tl_col.left .tl_item:nth-child(5){ order: 9; }
    .s01_3 .tl_body{
        justify-content: center;
    }
    .s01_3 .tl_deco img{
        margin: 0 auto;
    }
    .s01_3 .tl_hash{
        text-align: center;
    }
    .s01_3 .tl_line img{
        opacity: 0.4;
    }
}

@media all and (max-width:500px) {
    .s01_3 .tl_wrap{
        gap: 48px;
    }
    .s01_3 .tl_person img{
        width: 110px;
    }
}

/* Sub01_4 */
.s01_4 .ccolor1_4{
    color: var(--1-5-point1, #58A344);
}
.s01_4 .icon img {
    width: 19.2px;
}
.s01_4  .title.big{
    font-size: 28px;
    line-height: 1.3;
}
.s01_4  .width363{
    max-width: 363px;
    margin: 0 auto !important;
}
.s01_4  .width800{
    margin: 0 auto;
}
.s01_4 .icon b {
    margin-left: 7px;
}
.flex_t{
    display: flex;
align-items: flex-start;
gap: 4px;
}
.s01_4 .part {
    margin-bottom: 120px !important;
}
.tal{
    text-align: left;
}
.s01_4 .pt0 {
    padding-top: 0px;
}

.s01_4 .txt_wrap {
    margin: 0;
}

.s01_4 .img_wrap {
    margin: 0;
}

.s01_4 .flexs {
    gap: 40px;
}

.s01_4 .tit {
    font-size: 28px;
    font-weight: 800;
    line-height: 38px;
    letter-spacing: -0.28px;
    margin: 14px 0;
}

.s01_4 .box1 .tit {
    color: #58A344
}

.s01_4 .box2 .tit {
    color: #FFF
}

.s01_4 .num {
    font-size: 32px;
    font-weight: 800;
    line-height: 32px;
    letter-spacing: -0.48px;
}

.s01_4 .flexs.top .img_wrap img {
    max-width: 327px;
}

.s01_4 .round {
    width: 210px;
    height: 41px;
    background: #222;
    border-radius: 99%;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
}

.s01_4 .graph .img_wrap {
    position: relative;
    height: fit-content;
}

.s01_4 .graph img {
    max-width: 230px;
}

.s01_4 .graph .q {
    font-weight: bold;
    margin: 0 auto 6px auto;
    width: 24px;
    height: 24px;
    border-radius: 99px;
    background: #58A344;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
}

.s01_4 .graph .txt_wrap {
    font-weight: bold;
    position: absolute;
    top: 50%;
    left: 50%;
    text-align: center;
    transform: translate(-50%, -50%);
    width: 100%;
}
.fwb{
    font-weight: 700 !important;
}
.fwn{
    font-weight: 400 !important;
}
b{
    font-weight: 800;
}


.s01_4 .graph2_wrap {
    width: 100%;
}

.s01_4 .graph2_wrap .graph2 {
    padding-top: 12px;
    display: flex;
    justify-content: space-between;
    padding-bottom: 4px;
    border-bottom: 0.5px solid #999;
    font-weight: bold;
}

.s01_4 .graph2_wrap .mark {
    background: #C1E2B9;
    padding: 0 4px;
    font-weight: 700;
}

.s01_4 .graph2_wrap .mark2 {
    background: #C6DDEF;
    ;
    padding: 0 4px;
    font-weight: 700;
}
.s01_4 .graph2_wrap .mark3 {
    background: #fff;
    ;
    padding: 0 4px;
    font-weight: 700;
}

.s01_4 .graph2_wrap>:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.s01_4 .box2 .graph2_wrap .graph2 {
    border-color: rgba(255, 255, 255, 0.60);
}

.s01_4 .graph3 .text:first-child,
.s01_4 .box2 .graph3 .text:first-child {
    border: none;
    padding: 0;
}

.s01_4 .graph3 .text {
    min-width: 392px;
    line-height: 1.55;
    border-left: 6px solid #91C982;
    padding-left: 18px;
}

.s01_4 .graph3 .gray {
    color: #666;
}

.s01_4 .box1 {
    padding: 40px 60px;
    border: 1px solid #91C982;
}

.s01_4 .box2 {
    padding: 40px 60px;
    background: #91C982;
}

.s01_4 .box2 .graph3 .text {
    border-left: 6px solid #FFF;
}

.s01_4 .flexs.three {
    gap: 60px;
    align-items: flex-start;
    margin-top: 48px;
}

.s01_4 .box2 .graph .q {
    color: #91C982;
    background: #222;
}

.s01_4 .qusetion {
    font-weight: 700;
    line-height: 26px;
    /* 144.444% */
}

@media all and (max-width:1300px) {
    .s01_4 .flexs.three {
        gap: 40px
    }

    .s01_4 .graph3 {
        width: 100%;
    }

    .s01_4 .graph3 .text {
        min-width: auto;
    }

    .s01_4 .graph2 .text {
        white-space: nowrap !important;
    }

    .s01_4 .graph2_wrap .graph2 {
        gap: 20px;
    }
}

@media all and (max-width:1280px) {
    .s01_4 .flexs.three {
        display: flex;
        flex-wrap: wrap;
    }

    .s01_4 .graph2_wrap {
        width: calc(100% - 40px - 230px);
    }

    .s01_4 .flexs.three>:nth-child(3) {
        margin: 0 auto;
    }

    .s01_4 .flexs.three>:nth-child(3) img {
        max-width: 320px;
    }

    .s01_4 .flexs.top>:nth-child(1) img {
        max-width: 230px;
        min-width: auto;
    }
}

@media all and (max-width:1024px) {

    .s01_4 .box1,
    .s01_4 .box2 {
        padding: 40px 28px;
    }

    .s01_4 .part {
        margin-bottom: 80px !important;
    }

    .s01_4 .graph2_wrap .graph2 {
        gap: 10px;
    }

    .s01_4 .flexs.top {
        display: flex !important;
        flex-direction: column !important;
    }

    .s01_4 .box1 .flexs.top {
        flex-direction: column-reverse !important;
    }

    .s01_4 .flexs.top .img_wrap {
        text-align: left;
    }

    .s01_4 .flexs.top>:nth-child(1) {
        margin-bottom: 28px;
    }

    .s01_4 .graph2 .text {
        white-space: wrap !important;
        word-break: keep-all;
    }

    .s01_4 .flexs.top .img_wrap img {
        max-width: 230px !important;
    }

}

@media all and (max-width:767px) {
    .s01_4 .graph {
        width: fit-content;
    }
    .s01_4 .flexs.three{
        gap: 0;
    }
    .s01_4 .graph .img_wrap {
        width: fit-content;
        margin: 0 auto;
    }

    .s01_4 .graph2_wrap {
        margin: 28px auto;
    }

    .s01_4 .flexs.top>:nth-child(1) img {
        max-width: 240px;
        min-width: auto;
    }

    .s01_4 .flexs.three>:nth-child(3) img {
        max-width: 240px;
    }

    .s01_4 .num {
        font-size: 26px;
    }

    .s01_4 .graph3 .text br {
        display: none;
    }

    .s01_4 .graph3 .text .gray {
        display: block;
    }

    .s01_4 .tit {
        font-size: 24px;
        line-height: 32px;
    }
}

@media all and (max-width:425px) {
    .s01_4 .flexs.three {
        gap: 15px;
    }

    .s01_4 .graph2_wrap {
        margin: 0;
    }
}

.s01_4 .yl {
    color: #FABF13
}

.s01_4 .or {
    color: #F4A467;
}

.s01_4 .pk {
    color: #E78FB5;
}

.s01_4 .gr {
    color: #58A344;
}

.s01_4 .bl {
    color: #3B93CD;
}

.s01_4 .gy {
    color: #909090;
}

.s01_4 .or2 {
    color: #EA7D00;
}

.s01_4 .yl2 {
    color: #FFE93A;
}

.s01_4 .pk2 {
    color: #F9D2D4;
}

.s01_4 .gr2 {
    color: #DDF28F;
}

.s01_4 .bl2 {
    color: #ABE5F7;
}

.s01_4 .pr {
    color: #7B89D7;
}

.s01_4 .pr2 {
    color: #A4ABD6;
}

.s01_4 .bl3 {
    color: #728B8B;
}

.s01_4 .gy2 {
    color: #909090;
}

.s01_4 .gy3 {
    color: #FFF;
}

/* Sub01_5 */
.s01_5 .rain{
    background: linear-gradient(90deg, #E49F5E 15%, #66A8AB 50%, #485583 85%);
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}


.s01_5 .mm .row {
    margin-bottom: 40px;
}

.s01_5 .mm .title {
    margin-bottom: 36px;
}

.s01_5 .proimg {
    width: 110px;
}

.s01_5 .row.width50>.column:first-child {
    padding-left: 0;
}

.s01_5 .row.width50>.column {
    padding-left: 40px;
}

.s01_5 .ccolor1_5 {
    color: #A26E61;
}
.s01_5 .bl{
    color: var(---point2, #485583);
}
.s01_5 .gr{
color: var(---point3, #66A8AB);
}
.s01_5 .yl{
color: var(---point4, #E49F5E);
}
.s01_5 .ccolor1_5_1{
    color: #439498;
}
.s01_5 .ccolor1_5_2{
    color: #5768A4;
}
.s01_5 .bg {
    background: #B99187;
    color: #fff;
    padding: 32px 40px;
}
.s01_5 .bg.bg2{
    color: #222;
    border-bottom: 0.5px solid var(--Public-999999, #999);
    background: var(---bg2, #F2F2F3);
}
.gap12{
    gap: 12px !important;
}
.s01_5 .text.bg{
    color: #222;
    border-left: 10px solid var(---bg3, #C9CACA);
    background: var(---bg2, #F2F2F3);
    padding: 4px 0 4px 14px;
    margin-bottom: 10px !important;
}
.s01_5 .width936{
    min-width: 936px;
    max-width: 936px;
}
.s01_5 .icon{
    width: 24px;
    margin-right: 6px;
}
.s01_5 .box {
    flex: 1 0 0;
}
.s01_5 .box  .width300{
    max-width: 300px;
    margin-right: auto;
    margin-left: auto;
}
.s01_5 .width500{
    max-width: 500px;
    margin-right: auto;
    margin-left: auto;
}
.s01_5 .box .title2 {
    font-size: 20px;
    font-weight: 400;
    line-height: 1.6;
    letter-spacing: -0.8px;
    padding-top: 6px;
    border-top: 1px solid var(--1-6-point1, #A75A46);
    margin-bottom: 16px;
}
.s01_5 .highlight{
    background: #DCC2BC;
}
.s01_5 .box .title2.ccolor1_5_1{
    border-top: 1px solid #439498;
}
.s01_5 .box .title2.ccolor1_5_2{
    border-top: 1px solid #5768A4;
}
.s01_5 .flexs.gap80{
    gap: 80px !important;
}
.s01_5 .color_list img{
    max-width: 40px;
}
.s01_5 .box.ver2{
    display: flex;
    justify-content: start;
    gap: 20px;
    align-items: flex-start;
    padding-top: 12px;
    border-top: 1px solid var(--1-6-point1, #A75A46);
    margin-bottom: 60px;
}
.s01_5 .box.ver2 .title2{
    border: none;
    padding-top: 0;
}
.s01_5 .box.ver2 .width60{
    width: 60px;
    min-width: 0;
    flex-shrink: 0;
}
@media all and (max-width:1240px){
.s01_5 .box.ver2{
    margin-bottom: 30px;
}
}
@media all and (max-width:1024px) {
    
    .s01_5 .flexs {
        display: flex;
        justify-content: space-between;
        /* align-items: center; */
    }
    .s01_5 .flexs.first{
        flex-direction: column;
        align-items: center;
    }
    .s01_5 .width936{
        min-width: 0;
    }
    .s01_5 .flexs.gap80{
        gap: 40px !important;
        justify-content: space-between;
    }
    .s01_5 .bg.bg2{
        margin-top: 0;
        margin-bottom: 0;
    }
    .s01_5 .mm .row {
    margin-bottom: 28px;
}

}

@media all and (max-width:767px) {
    .s01_5 .bg{
        padding: 16px 20px;
    }
    .s01_5 .proimg {
        width: 80px;
    }
    .s01_5 .flexs{
        flex-direction: column;
        align-items: center;
    }
    .s01_5 .box.ver2{
        justify-content: flex-start;
    }
    .s01_5 .box .title2{
        font-size: 18px;
    }
    .s01_5 .icon{
        width: 22px;
    }
    /* 버크만 컬러: 2*2 */
    .s01_5 .flexs.color_list{
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
        justify-content: center;
        gap: 20px;
    }
    .s01_5 .flexs.color_list>.image{
        width: calc(50% - 10px);
        flex-direction: row;
        justify-content: center;
        gap: 12px;
    }
    .s01_5 .mm .title{
        margin-bottom: 20px;
    }
    .s01_5 .mm .row>.column:last-of-type{
        margin-top: 20px;
    }
}

@media all and (max-width:425px) {
    /* 버크만 컬러: 1개씩 */
    .s01_5 .flexs.color_list>.image{
        width: 100%;
    }
}

/* Sub01_6 */
.s01_6  .ccolor1_6{
    color: var(--1-3-point2, #DF7729);
}
.s01_6 .img_wrap {
    margin: 0 0 20px 0;
}
.s01_6 .part.bg{
    background: var(--1-3-bg1, #F5EBE0);
    padding: 80px;
     position: relative;
}
.s01_6 .inner.bg {
    background-image: url(../image/sub/s01_6bg.png);
    background-repeat: no-repeat;
    background-size: cover;
    padding: 60px;
}
.s01_6 .img_wrap.po{
    max-width: 464px;
    position: absolute;
    right: 2%; bottom: 2%;
}
.s01_6 .inner.bg .title{
    margin-bottom: 33px;
}
.s01_6 .inner.bg .title img{
    margin-right: 10px;
}
.s01_6 .title .under{
    text-decoration: underline;
    text-underline-offset: 10px;
    text-decoration-thickness: 4px;
    text-decoration-color: #E9AD78 ;
}
.s01_6 .part .flexs{
    justify-content: center;
    align-items: center;
    gap: 0;
}
.s01_6 .icon {
    width: 24px;
}

.s01_6 .inner .subt p .icon {
    margin-right: 10px;
}
.s01_6 .ks {
    font-family: 'KccChaSaem';
}

.s01_6 .inner .text .line {
    line-height: 38px;
    text-decoration: underline dashed #DF7729;
    text-decoration-thickness: 1px;
    text-underline-offset: 7px;
    margin: 40px 0;
}

.s01_6 .inner .text p {
    display: block;
    width: 100%;
    font-size: 18px;
    font-style: normal;
    font-weight: 400;
    line-height: 34px;
    letter-spacing: -0.72px;
    word-break: break-all;
}
.tac{
    text-align: center;
}
.tar{
    text-align: right;
}
.s01_6 .part.bg .sentance{
    font-size: 24px;
    line-height: 1.6;
    letter-spacing: -0.96px;
    margin-bottom: 10px;
}
.s01_6 .part.bg .sentance .ks{
    position: relative;
}
.s01_6 .part.bg .sentance .ks img{
    position: absolute;
}
.s01_6 .part.bg .sentance .ks img.defalut{
    left: -5%;
}
.s01_6 .part.bg .sentance .ks img.filp{
    transform: rotate(180deg);
    right: -15%;
}
.s01_6 .part.bg .sentance p{
    font-size: 15px;
}
.s01_6 .part.round{
    border-radius: 24px;
    padding: 60px 80px; 
}
.s01_6 .part.round .title.ver2{
    margin: 0 auto;
    width: fit-content;
    padding-bottom: 4px;
    border-bottom: 4px solid var(--1-3-bg2, #E9AD78);
    margin-bottom: 36px;
}
.s01_6 .part.round .title .small{
    color: var(--Public-222222, #222);
    font-size: 15px;
    font-weight: 400;
    line-height: 1.5;
    letter-spacing: -0.3px;
    margin-left: 10px;
}
.s01_6 .part.round .title{
    margin-bottom: 12px;
}
.s01_6 .part.round .q{
    color: var(--Public-FFFFFF, #FFF);
    font-size: 20px;
    font-weight: 700;
    line-height: 36px; /* 180% */
    letter-spacing: -0.2px;
    background: #DF7729;
    border-radius: 50%;
    width: 34px;
    display: inline-block;
    text-align: center;
    margin-right: 8px;
}
.s01_6 .flexs.gab0{
    gap: 0;
}
.s01_6 .flexs.gab0>div{
    flex: 1;
}
.s01_6 .box2{
    display: flex;
    flex-direction: column;
    gap: 12px;
    justify-content: flex-start;
}
.s01_6 .box2 .img_wrap{
    margin: 0;
    text-align: left;
}
.s01_6 .box2 .txt_wrap{
    margin: 0;
}
.s01_6 .box2 .img_wrap:nth-child(1){
    flex-shrink: 0;
    max-width: 70px;
    
}
.s01_6 .box2 .t20{
    font-size: 20px;
    margin-bottom: 12px;
    line-height: 1.8;
}
.s01_6 .box2 .t20 span{
    margin-left: 6px;
    border-radius: 999px;
    background: var(--1-3-point2, #DF7729);
    padding: 0 8px;
    color: var(--Public-FFFFFF, #FFF);
}
.s01_6 .box2 .defalut{
        display: block;
    }
    .s01_6 .box2 .filp{
        display: none;
    }
.s01_6 .tit>img {
    position: absolute;
    right: -2%;
    top: 50%;
    transform: translateY(-50%);
    width: 64px;
}

.s01_6 .part.line{
    border-radius: 24px;
    border: 2px dashed var(--1-3-bg2, #E9AD78);
    padding: 60px 80px;
}
.s01_6 .part.line .flexs.box_wrap{
    flex-wrap: wrap;
    gap: 0;
    justify-content: flex-start;
    margin: 16px 0;
}
.s01_6 .part.line .flexs.box_wrap>div{
    width: 33.333%;
}
.s01_6 .part.line .flexs.box_wrap .box{
    display: flex;
    padding: 20px 30px;
    align-items: flex-start;
    gap: 20px;
    border-right: 1px solid var(--1-3-bg2, #E9AD78);
    border-bottom: 1px solid var(--1-3-bg2, #E9AD78);
}
.s01_6 .part.line .flexs.box_wrap .box:nth-child(n+4){
    border-bottom: none;
}
.s01_6 .part.line .flexs.box_wrap .box:nth-child(3),
.s01_6 .part.line .flexs.box_wrap .box:nth-child(6){
    border-right: none;
}
.s01_6 .part.line .flexs.box_wrap .box:nth-child(1),
.s01_6 .part.line .flexs.box_wrap .box:nth-child(4){
    padding-left: 0;
}
.s01_6 .part.line .flexs.box_wrap .box .t20{
    font-size: 20px;
    font-weight: 700;
    line-height: 1.8;
    letter-spacing: -0.2px;
    margin-bottom: 6px;
}
@media all and (max-width:1024px){
    .s01_6 .part .flexs{
        display: flex;
        flex-direction: column;
        align-items: center;
        margin-bottom: 30px;
    }
    .s01_6 .flexs.gab0{
        display: flex;
    }
    .s01_6 .part.round,.s01_6 .part.line{
        padding: 40px 60px;
    }
    .s01_6 .part.line .flexs{
        display: flex;
    }
    .s01_6 .part.line .flexs.box_wrap{
        display: flex;
        
    }
    .s01_6 .part.line .flexs.box_wrap>div{
        width: 50%;
    }
    .s01_6 .part.line .flexs.box_wrap .box:nth-child(1){
        padding-left: 20px;
    }
    .s01_6 .part.line .flexs.box_wrap .box:nth-child(3){
        border-right: 1px solid var(--1-3-bg2, #E9AD78);
        
    }
    .s01_6 .part.line .flexs.box_wrap .box:nth-child(4){
    padding-left: 20px;
    border-bottom: 1px solid var(--1-3-bg2, #E9AD78);
    }
    .s01_6 .part.line .flexs.box_wrap .box:nth-child(2n){
        border-right: none;
    }
    .s01_6 .part .flexs.reverse{
        display: flex;
        flex-direction: column-reverse;
        align-items: center;
    }
}
@media all and (max-width:864px){
    .s01_6 .flexs.gab0{
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 100%;
    }
    .s01_6 .box2{
        flex-direction: row;
        height: 160px;

    }
    .s01_6 .box2 .img_wrap:nth-child(2){
        flex-shrink: 0;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .s01_6 .box2 .defalut{
        display: none;
    }
    .s01_6 .box2 .filp{
        display: block;
    }
    .s01_6 .box2 .t20{
        display: flex;
        flex-direction: column;
        font-size: 18px;
    }
    .s01_6 .box2 .t20 span{
        margin-left: 0;
        width: fit-content;
    }
    .s01_6 .box2 .txt_wrap{
        width: 200px;
    }
}
@media all and (max-width:767px) {
    .s01_6 .width80{
        max-width: 80%;
        margin: 0 auto;
    }
    .s01_6 .img_wrap.po{
        position: relative;
        max-width: 464px;
        margin: 0 auto;
    }
    .s01_6 .title.round span {
        padding: 10px 20px;
        word-break: keep-all;
    }

    .s01_6 .w250 {
        margin: 0 auto;
    }

    .s01_6 .inner.bg {
        padding: 48px 20px !important;
    }
    .s01_6 .part.line .flexs.tit_wrap{
        flex-direction: column;
        gap: 0px;
        
    }
    
    .s01_6 .part.line .flexs.tit_wrap .title{
        margin-bottom: 10px;
    }
    .s01_6 .sub_con .container .bg {
        padding: 20px;
    }
    .s01_6 .part.round,.s01_6 .part.line{
        padding: 28px 30px;
    
    }
    .s01_6 .part.line .flexs.box_wrap>div{
        width: 80%;
        margin: 0 auto;
    }
    .s01_6 .part.line .flexs.box_wrap .box{
        border-right: none;
        justify-content: center;
    }
    .s01_6 .part.line .flexs.box_wrap .box:nth-child(n+4){
        border-bottom: 1px solid var(--1-3-bg2, #E9AD78);
    }
    .s01_6 .part.line .flexs.box_wrap .box:nth-child(3){
        border-right: none;
    }
    .s01_6 .part.line .flexs.box_wrap .box .t20{
        font-size: 18px;
    }
    .caption{
        font-size: 14px;
    }
}
@media all and (max-width:550px){
    .s01_6 .part.bg .sentance .ks img.defalut,
    .s01_6 .part.bg .sentance .ks img.filp{
        display: none;
    }
}
@media all and (max-width:425px) {
    .s01_6 .width80{
        max-width: 100%;
    }
    .s01_6 .part.bg .sentance{
        margin-top: 40px;
    }
    .s01_6 .part.bg .sentance{
        font-size: 20px;
    }
    .s01_6 .part.round .title.ver2{
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    .s01_6 .part.line .flexs.box_wrap>div{
        width: 100%;
    }
}



/* Sub02_1 */
.s02_1 .txt_wrap {
    margin: 0;
}

.s02_1 .txt_wrap.mt120 {
    margin-top: 120px;
}

.s02_1 .line {
    padding-top: 8px;
    border-top: 1px solid #222;
}
.s02_1 .line2{
    padding-bottom: 4px;
    border-bottom: 1px solid var(--Public-222222, #222);
}

.s02_1 .width560 {
    max-width: 560px;
    width: 100%;
    margin: 0 auto;
}
.s02_1 .width900 {
    max-width: 900px;
    margin: 0 auto;
}
.s02_1 .part.bg{
    background: url(../image/sub/s02_1_img_bg.png) center / cover no-repeat;
    padding: 80px;
    
}
.s02_1 .mb120{
    margin-bottom: 120px;
}
.s02_1 .mt150{
    margin-top: 150px;
}

.s02_1 .box{
    padding-bottom: 18px;
}
.s02_1 .box:first-child{
    padding-top: 8px !important;
}
.s02_1 .box:nth-child(n+1){
    padding-top: 28px;
}
.s02_1 .box:last-child{
    border-bottom: none;
}
.s02_1 .box .round {
    white-space: nowrap;
    color: #fff;
    font-size: 15px;
    font-weight: 700;
    line-height: 23px;
    letter-spacing: -0.32px;
    display: flex;
    padding: 2px 16px;
    justify-content: center;
    align-items: center;
    gap: 10px;
    width: fit-content;
    height: fit-content;
    border-radius: 999px;
    background: #222;
    align-self: stretch;
    margin-bottom: 16px;
    
}
.s02_1 .width38{
    max-width: 38px;
    margin: 20px auto;
}
@media all and (max-width:1280px) {
    .s02_1 .tb_size {
        max-width: 500px;
        width: 100%;
        margin: 0 auto;
    }

}

@media all and (max-width:1024px) {
    .s02_1 .img_wrap.column.mt150{
        display: none;
    }
    .s02_1 .part.bg{
        padding: 60px;
    }
}
@media all and (max-width:767px){
    .s02_1 .part.bg{
        padding: 40px 24px;
    }
    .s02_1 .mb120{
        margin-bottom: 90px;
    }
}
@media all and (max-width:425px) {
    .s02_1 .box{
        flex-direction: column;
        align-items: center;
    }
    .s02_1 .box:nth-child(1){
        padding-top: 0;
    }
    .s02_1 .mb120{
        margin-bottom: 60px;
    }
    
}

/* Sub02_2 */
.s02_2 .ccolor2_2{
 color: var(---point1, #C6824E);
} 

.s02_2 .box {
    padding: 40px 60px 60px 60px;
    border: 1px solid #C6824E;
    background: #FFF5EE;
}

.s02_2 .box .img_wrap {
    margin: 0 !important;
}

.s02_2 .box .img_wrap.m40 {
    margin: 40px auto 0 auto !important;
}


.s02_2 .mt28 {
    margin-top: 28px;
}

.s02_2 .flex_box {
    display: flex;
    gap: 60px;
}

.s02_2 .flex_box.jcs {
    justify-content: space-between;
}

.s02_2 .flex_box.aic {
    align-items: center;
}

.s02_2 .small {
    font-size: 20px;
    font-weight: 700;
    line-height: 32px;
    letter-spacing: -0.8px;
    margin-bottom: 18px;
}
.s02_2 .big{
    font-size: 24px;
    font-weight: 800;
    line-height: 1.75;
    letter-spacing: -0.72px;
}
.s02_2 .ccolor2_2-1 {
    color: #C6824E
}
.s02_2 .mb24 {
    margin-bottom: 24px !important;
}

.s02_2 .mb16 {
    margin-bottom: 16px;
}

.s02_2 .flex_icon {
    display: flex;
    align-items: flex-start;
    gap: 10px;
}


.s02_2 .flex_icon .img_wrap {
    position: relative;
    z-index: 2;
}

.s02_2 .flex_icon .w1 {
    position: relative
}

.s02_2 .flex_icon .w1::after {
    z-index: 1;
    width: 1px;
    height: 150px;
    background: #999;
    content: '';
    position: absolute;
    bottom: -150px;
    left: 50%;
}
.s02_2 .flex_icon .w1.ver2::after {
    height: 170px;
    bottom: -170px;
}

.s02_2 .flex_icon .w1 img {
    max-width: 38px;
}

.s02_2 .flex_icon .w2 img {
    max-width: 34px;
}

.s02_2 .flex_icon .w3 img {
    max-width: 36px;
}

.s02_2 .box.ccolor2 {
    border-color: #F59124;
    background: #FFF9ED;

}

.s02_2 .ccolor2_2-2 {
    color: #F59124
}

.s02_2 .width800 img {
    max-width: 800px;
    width: 100%;
}
.s02_2 .width850 img {
    max-width: 850px;
    width: 100%;
}
.s02_2 .width827{
    max-width: 827px;
    width: 100%;
}
.s02_2 .flexs .img_wrap {
    flex-shrink: 0;
}
.s02_2 .mt60{
    margin-top: 60px;
}
.width800{
    max-width: 800px;
}

.s02_2 .width870 img {
    max-width: 870px;
    width: 100%;
}

.s02_2 .width350 img {
    min-width: 350px;
    width: 100%;
}
.aic{
    align-items: center;
}
@media all and (max-width:1024px) {
    .s02_2 .box {
        padding: 48px;
    }
    .s02_2 .big{
        font-size: 22px;
    }
    .s02_2 .flex_box {
        display: block;
    }
    .s02_2 .flexs{
        display: block;
    }
        .s02_2 .flexs.mt80{
        margin-top: 40px !important;
    }
    .s02_2 .mt60{
        margin-top: 30px;
    }
        .s02_2 .flexs .mb{
        margin-bottom: 28px !important;
    }
    .s02_2 .box .img_wrap.size img {
        max-width: 440px;
        width: 100%;
    }

    .s02_2 .box .img_wrap.mm40 {
        margin-top: 40px !important
    }

    .s02_2 .txt_wrap.mt80 {
        margin-top: 60px !important;
    }
    .s02_2 .flex_icon .w1::after
    {
        height: 130px;
        bottom: -130px;
    }
    .s02_2 .flex_icon .w1.ver2::after{
        height: 150px;
        bottom: -150px;
    }

}

@media all and (max-width:767px) {

        .s02_2 .big{
        font-size: 20px;
    }
    .s02_2 .small {
        font-size: 18px;
        line-height: 28px;
        margin-bottom: 8px;
    }

    .s02_2 .txt_wrap.mt80 {
        margin-top: 40px !important;
    }

    .s02_2 .flex_icon .w1::after {
        height: 130px;
        bottom: -130px
    }

    .s02_2 .box {
        padding: 24px;
    }

    .s02_2 .title .small {
        font-size: 16px;
    }
}


/* Sub02_3 */
.s02_3 .width928 {
    width: 100%;
    max-width: 928px;
    margin: 0 auto;
}
.s02_3 .ccolor2_3{
    color: var(--2-4-point1, #2575B1);
}
.s02_3 .width928 .ps {
    position: relative;
}

.s02_3 .width928 .ps .ps_img {
    position: absolute;
    margin: 0;
    width: 120px;
    bottom: -34px;
    right: -63px;
}

@media all and (max-width:1024px) {

    .s02_3 .flexs {
        display: flex;
    }

}
@media all and (max-width:1024px){
    .s02_3 .flexs {
        display: block;
    }
}


/* Sub02_4 */
.s02_4 .part.bg{
    background: var(---bg1, #A5C2C7);
    padding: 80px;
}
.s02_4 .width900 img {
    max-width: 900px;
    width: 100%;
}
.s02_4 .txtC.line{
    padding-bottom: 28px;
    border-bottom: 1px solid var(--Public-222222, #222);
    margin-bottom: 40px;
}
.s02_4 .round{
    max-width: 170px;
    height: 48px;
    border-radius: 99%;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
    background: #222;
    color: #fff;
    margin-bottom: 18px;
}
.s02_4 mark{
    background: #FDD108;
}
.s02_4 .mark2{
    background: #222;
    color: #fff;
}
.s02_4 .point_wrap {
    display: flex;
    max-width: 900px;
    margin: 0 auto;
    padding: 16px 24px;
    justify-content: center;
    align-items: center;
    gap: 20px;
    background: var(--Public-222222, #222);
}
.s02_4 .point{
    color: var(---bg2, #FDD108);
    text-align: center;
    font-size: 16px;
    font-weight: 700;
    line-height: 18px; 
    letter-spacing: -0.64px;
    text-transform: uppercase;
    border-right: 1px solid var(---bg1, #A5C2C7);
    padding-right: 28px;
    align-self: stretch;
    display: flex;
    align-items: center;
}
.s02_4 .text2 {
    font-family: 'KccChaSaem';
    color: var(--Public-F9F9F9, #F9F9F9);
    
}

.s02_4 .part.bg2{
    background: var(---bg1, #A5C2C7);
    padding: 80px;
}
.s02_4 .part.bg2.ver2{
    background: url(../image/sub/s02_4_img_bg.png) center/cover;
}
.s02_4 .title.line{
    margin: 0 auto;
    width: fit-content;
    border: 1px solid var(--Public-222222, #222);
    background: var(---bg2, #FDD108);
    padding: 2px 16px;
    margin-bottom: 36px;
}
.s02_4 .bg2 .flexs{
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 24px;
}
.s02_4 .bg2 .flexs.line{
    padding-bottom: 40px;
    border-bottom: 1px solid #222;
}
/* 원형 박스 */
.s02_4 .bg2 .box{
    position: relative;
    flex-shrink: 0;
    width: 260px;
    height: 260px;
    background: url(../image/sub/s02_4_img_bg2.png) center/cover no-repeat;
    display: flex;
    align-items: center;
    justify-content: center;
}
/* 앞 원과 겹치는 원 (겹침 24px) */
.s02_4 .bg2 .box.ov{
    margin-left: -48px;
}
.s02_4 .bg2 .box .text{
    font-size: 18px;
    line-height: 1.7;
    letter-spacing: -0.03em;
}
.s02_4 .bg2 .box .name{
    display: block;
    margin-top: 6px;
    font-size: 15px;
    font-weight: 700;
}
/* 원에 붙는 장식 이미지 (원 크기 기준 %) */
.s02_4 .bg2 .deco{
    position: absolute;
    z-index: 2;
}
.s02_4 .bg2 .deco img{
    display: block;
    width: 100%;
}
.s02_4 .bg2 .deco.heart{
    width: 26%;
    top: -3%;
    right: 11%;
}
.s02_4 .bg2 .deco.check{
    width: 23%;
    right: 1%;
    bottom: 6%;
}
.s02_4 .bg2 .deco.check.left{
    right: auto;
    left: 0;
    bottom: 0;
}
.s02_4 .bg2 .deco.thumb{
    width: 23%;
    left: -3%;
    bottom: 11%;
}
.s02_4 .bg2 .deco.search{
    width: 21%;
    left: 0;
    top: 3%;
}
.s02_4 .bg2 .deco.bulb{
    width: 25%;
    right: 9%;
    top: -4%;
}
/* 사람 이미지 */
.s02_4 .bg2 .people{
    flex-shrink: 0;
    width: 240px;
    margin-left: 16px;
}
.s02_4 .bg2 .people img{
    display: block;
    width: 100%;
}

@media all and (max-width:1529px) {
    .s02_4 .part.bg2{
        padding: 60px 40px;
    }
    .s02_4 .bg2 .box{
        width: 240px;
        height: 240px;
    }
    .s02_4 .bg2 .box.ov{
        margin-left: -44px;
    }
    .s02_4 .bg2 .box .text{
        font-size: 16px;
        line-height: 1.6;
    }
    .s02_4 .bg2 .box .name{
        font-size: 14px;
        margin-top: 4px;
    }
    .s02_4 .bg2 .people{
        width: 200px;
    }
}

@media all and (max-width:1280px) {
    .s02_4 .bg2 .flexs{
        gap: 20px;
    }
    .s02_4 .bg2 .box{
        width: 220px;
        height: 220px;
    }
    .s02_4 .bg2 .box.ov{
        margin-left: -40px;
    }

    .s02_4 .bg2 .people{
        width: 180px;
        margin-left: 0;
    }
}

/* 태블릿 이하: 겹침 해제 후 줄바꿈 (폭에 따라 2열 → 1열) */
@media all and (max-width:1024px) {
    .s02_4 .bg2 .flexs{
        flex-wrap: wrap;
        gap: 24px;
    }
    .s02_4 .bg2 .box{
        width: 240px;
        height: 240px;
    }
    .s02_4 .bg2 .box.ov{
        margin-left: 0;
    }

    .s02_4 .bg2 .people{
        width: 200px;
    }
    .s02_4 .point_wrap{
        padding: 16px;
        
    }
    .s02_4 .point{
        padding-right: 0;
        border-right: none;
    }
}

@media all and (max-width:767px) {
    .s02_4 .point_wrap {
        flex-direction: column;
        align-items: center;
    }
    .s02_4 .point{
        align-self: center;
    }
    .s02_4 .part.bg,
    .s02_4 .part.bg2{
        padding: 50px 20px;
    }
    .s02_4 .bg2 .flexs{
        gap: 16px;
    }
}



/* Sub02_5 */
.s02_5 .ccolor2_5{
    color: var(--2-5-point1, #EE781F);
}
.s02_5 .highlight{
    background: #FBD9BB;
}
.part .kcc{
    font-family: 'KccChaSaem';
}
.s02_5 .line{
    padding-top: 8px;
    border-top: 1px solid var(--CSR2-point1, #EE781F);
    width: 100%;
}
.s02_5 .width922{
    max-width: 922px !important;
}
.s02_5 .width1080{
    max-width: 1080px !important;
}

.s02_5 .gap60{
    gap: 60px !important;
}
.s02_5 .flexs .img_wrap{
    flex-shrink: 1;
}
.s02_5 .width116{
    max-width: 116px;
}
.s02_5 .width340{
    max-width: 340px;
}
.s02_5 .width440{
    max-width: 440px;
}
/* 좌우 column 내용 폭을 동일하게: 28px 간격을 양쪽에 14px씩 분배 */
.s02_5 .row.width50>.column{
    box-sizing: border-box;
    padding-left: 14px;
    padding-right: 0;
}
.s02_5 .row.width50>.column:first-child{
    padding-left: 0;
    padding-right: 14px;
}
.s02_5 .flexs.two .image img{
    width: 100%;
}
/* 768 이상: 2개씩 */
.s02_5 .flexs.wrap {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 28px;
}
.s02_5 .flexs.wrap .image {
    width: calc(50% - 14px);
    margin: 0;
}
.s02_5 .flexs.wrap .image img {
    width: 100%;
}
@media all and (max-width:1280px) {
    .s02_5 .row.width50>.column,
    .s02_5 .row.width50>.column:first-child{
        padding-left: 0;
        padding-right: 0;
    }
}
@media all and (max-width:1024px) {
    .s02_5 .flexs {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        margin: 0 auto;
        width: 100%;
    }
}
@media all and (max-width:767px){
    .s02_5 .bg{
        padding: 20px;
    }
    /* 767 이하: 1개씩 */
    .s02_5 .flexs.wrap {
        gap: 20px;
    }
    .s02_5 .flexs.wrap .image {
        width: 100%;
    }
}
/* Sub02_6 */
.s02_6 .ccolor2_6{
    color: var(--2-2-point1, #030946);
}
.s02_6 .ccolor2_6_1{
    color: var(--2-2-point2, #FDD35C);
}
.s02_6 .mb100{
    margin-bottom: 100px;
}
.s02_6 .mb80{
    margin-bottom: 80px;
}
.s02_6 .part.bg{
    padding: 80px;
    background: var(--2-2-point1, #030946); 
    color: var(--Public-F9F9F9, #F9F9F9);
    
}
.s02_6 .part .title.line{
    padding-top: 4px;
    border-top: 1px solid var(--2-2-point2, #FDD35C);
}
.s02_6 .part .title.line_b{
    text-decoration: underline;
    text-decoration-color: #fff;
    text-underline-offset: 10px;
}
.s02_6 .part .round{
    width: fit-content;
    font-size: 20px;
    line-height: 1.7;
    border-radius: 999px;
    background: var(--2-2-point2, #FDD35C);
    padding: 2px 16px;
    font-weight: 700;
    margin-bottom: 12px; 
}
.s02_6 .part .box{
    flex: 1 0 0;
    padding: 20px;
    border-radius: 24px;
    border: 1px solid var(--2-2-point2, #FDD35C);
    display: flex;
    justify-content: center;
    gap: 16px;
    align-items: center;
}
.s02_6 .part .box .text{
    word-break: keep-all;
}
.s02_6 .part .box .img_wrap{
    width: 70px;
    flex-shrink: 0;
}
.s02_6 .width560{
    max-width: 560px;
}
.s02_6 .part .box2{
    flex: 1 0 0;
}
.s02_6 .part .box2 .text{
    font-size: 20px;
    line-height: 1.5; 
    margin-bottom: 16px;
    font-weight: 700;
    
}
.s02_6 .part .box2 .img_wrap{
    margin: 0;
}
.s02_6 .part .bottom{
    align-self: flex-end;
    display: flex;
    align-items: flex-end;
    gap: 16px;
    font-size: 18px;
}
@media all and (max-width:1024px){
    .s02_6 .flexs{
        display: flex;
        flex-wrap: wrap;
    }
    .s02_6 .mb100{
        margin-bottom: 80px;
    }
    .s02_6 .part.bg{
        padding: 60px;
    }
    .s02_6 .part .box{
        flex: 0 0 calc(50% - 14px);
        box-sizing: border-box;
        justify-content: center;
    }
}
@media all and (max-width:767px){
    .s02_6 .flexs{
        flex-direction: column;
        align-items: center;
    }
    .s02_6 .part .box{
        width: 100%;
    }
    .s02_6 .part.bg{
        padding: 40px 24px;
    }
    .s02_6 .mb100{
        margin-bottom: 60px;
    }
}
@media all and (max-width:425px){
    .s02_6 .part .bottom {
        flex-direction: column;
        align-items: flex-start;
    }
}


/* Sub03_1 */
.s03_1 .sub_head .width372{
    flex-shrink: 0;
}

.s03_1 .txt_wrap {
    margin: 0;
}

.s03_1 .img_wrap {
    margin: 0;
}
.s03_1 .part.bg{
    padding: 60px;
    background: url('../image/sub/s03_1_img_bg1.png') center / cover no-repeat;
}
.s03_1 .ccolor3_1{
    color: var(---point1, #6F5429);
}
.s03_1 .ccolor3_1_1{
    color: var(--3-1-point1, #CB5245);
}
.s03_1 .ccolor3_1_2{
    color: var(--3-1-point2, #754B34);
}
.s03_1 .ccolor3_1_3{
    color: var(--3-1-point3, #595757);
}
.s03_1 .ccolor3_1_4{
    color: var(--3-1-point3, #9F9A4C);
}
.s03_1 .end img:nth-of-type(1){
    margin-top: 13px;
}
.s03_1 mark{
    background: #E3D7CC;
}
.s03_1 mark.ver2{
    background: #C9CACA;
}
.s03_1 mark.ver3{
    background: #E3E0C8;
}
.s03_1 .speak{
    flex: 1 0 0;
    text-align: center;
    padding: 20px 24px;
    border-radius: 12px;
    background: var(---bg1, #D9D5B5);
    position: relative;
}
.s03_1 .speak.v2,
.s03_1 .speak.v2:after{
    background: var(---bg2, #C7B09A);
}
.s03_1 .speak.v3,
.s03_1 .speak.v3:after{
    background: var(---bg3, #B5B5B6);
}
.s03_1 .speak:after{
    content: '';
    position: absolute;
    top: calc(100% - 1px);
    left: 50%;
    z-index: 1;
    width: 23px;
    height: 38px;
    background: var(---bg1, #D9D5B5);
    clip-path: polygon(0 0, 100% 0, 50% 100%);
    transform: translateX(-50%);
}
.width858{
    max-width: 858px;
    margin: 0 auto;
}
/* 독서 타입 사다리: PC는 마크업(.ladder_pc), 태블릿·모바일은 이미지(.ladder_mo) */
.s03_1 .ladder_mo{
    display: none;
}
.s03_1 .ladder_mo img{
    display: block;
    width: 100%;
    margin: 0 auto;
}

.s03_1 .part.bg2{
     background: url('../image/sub/s03_1_img_bg2.png') center / cover no-repeat;
}
.s03_1 .cate{
    padding-right: 16px;
    border-right: 1px solid #222;
    margin-right: 16px;
    flex-shrink: 0;
    height: fit-content;
}
.s03_1 .cate img{
    margin-right: 10px;
}
.flexs.gap0{
    gap: 0;
}

/* 북튜브·오디오북·전자책 박스 (cont1, cont2) */
.s03_1 .book_grid{
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 28px;
    margin-top: 28px;
}
.s03_1 .book_head{
    margin-top: 60px;
}
.s03_1 .book_grid .box {
    display: flex;
    padding: 16px 20px;
    align-items: flex-start;
    gap: 28px;
    border-left: 5px solid var(---point5, #9F9A4C);
    background: var(--Public-FFFFFF, #FFF);
}
.s03_1 .book_txt{
    flex: 1 1 0;
    min-width: 0;
}

.s03_1 .book_tit{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 10px;
    margin-bottom: 6px;
}
.s03_1 .book_sub{
    padding-left: 10px;
    border-left: 1px solid var(--Public-222222, #222);
    font-size: 15px;
    line-height: 1;
}
.s03_1 .book_tip{
    display: flex;
    gap: 10px;
    margin-top: 4px;
    font-size: 15px;
    line-height: 1.53;
}
.s03_1 .book_tip b{
    flex-shrink: 0;
}
.s03_1 .book_img{
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    align-self: stretch;
    gap: 12px;
    flex-shrink: 0;
}
.s03_1 .book_img .qr{
    display: block;
    width: 80px;
}
.s03_1 .book_img .logo{
    display: block;
    width: 48px;
    margin-top: auto;
}
.s03_1 .book_deco{
    display: flex;
    justify-content: center;
    align-items: flex-end;
}
.s03_1 .book_deco img{
    display: block;
    max-width: 100%;
}
/* 오디오북 (cont1): 설명은 전체 너비, 이용Tip + 로고는 한 줄 */
.s03_1 .book_grid.audio .box{
    flex-direction: column;
    align-items: stretch;
    gap: 16px;
}
.s03_1 .book_grid.audio .book_txt{
    flex: none;
}
.s03_1 .book_grid.audio .book_bottom{
    display: flex;
    align-items: flex-end;
    gap: 20px;
    margin-top: auto;
}
.s03_1 .book_grid.audio .book_tip{
    flex: 1 1 0;
    min-width: 0;
    margin-top: 0;
}
.s03_1 .book_grid.audio .book_img{
    align-self: auto;
}
.s03_1 .book_grid.audio .book_img .logo{
    margin-top: 0;
}
/* box.ver2 : 전자책·문 앞 도서 배송 (cont2) */
.s03_1 .book_grid.col3{
    grid-template-columns: repeat(3, 1fr);
}
.s03_1 .book_grid.col1{
    grid-template-columns: 1fr;
}
.s03_1 .book_grid .box.ver2{
    flex-direction: column;
    align-items: stretch;
    gap: 20px;
    border-left-color: var(--3-1-point2, #754B34);
}
.s03_1 .box.ver2 .book_txt{
    flex: none;
}
.s03_1 .box.ver2 .book_tip{
    flex-direction: column;
    gap: 2px;
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid #CCC;
}
.s03_1 .box.ver2 .book_img{
    align-self: stretch;
    margin-top: auto;
}
.s03_1 .box.ver2 .book_img .logo{
    width: auto;
    max-width: 100%;
    height: 50px;
}
/* 가로형 (우리집은도서관) */
.s03_1 .book_grid .box.ver2.wide{
    position: relative;
    flex-direction: row;
    padding-right: 300px;
}
.s03_1 .box.ver2.wide .book_tip{
    flex-direction: row;
    gap: 10px;
    margin-top: 4px;
    padding-top: 0;
    border-top: 0;
}
.s03_1 .book_deco2{
    position: absolute;
    right: 80px;
    bottom: -20px;
    width: 180px;
}
.s03_1 .book_deco2 img{
    display: block;
    width: 100%;
}
.s03_1 .box.ver2.wide .book_txt{
    flex: 1 1 0;
}
/* 책슐랭 지도 (cont3) */
.s03_1 .book_head.ver2 .cate{
    display: flex;
    align-items: center;
    margin: 0 0 10px;
    padding-right: 0;
    border-right: 0;
}
.s03_1 .map_grid{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 40px 32px;
    margin-top: 28px;
}
.s03_1 .map_img{
    display: flex;
    justify-content: center;
    align-items: center;
    grid-column: 3;
    grid-row: 1 / span 2;
}
.s03_1 .map_img img{
    display: block;
    max-width: 100%;
}
.s03_1 .map_item{
    min-width: 0;
}
/* 두 번째 줄(지역명 없는 수도권 항목): 위 row gap 제거 - PC 3열 배치에서만 */
@media all and (min-width:1025px) {
    .s03_1 .map_item.row2{
        margin-top: -40px;
    }
}
.s03_1 .txt_wrap .stitle.map_area{
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 14px;
    padding: 0;
    background: none;
    color: var(--Public-222222, #222);
}
.s03_1 .map_area::before{
    content: '';
    flex-shrink: 0;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #222;
}
.s03_1 .map_area.c1::before{ background: var(---point6, #4D7487); }
.s03_1 .map_area.c2::before{ background: #D4BF93; }
.s03_1 .map_area.c3::before{ background: #727171; }
.s03_1 .map_area.c4::before{ background: #754B34; }
.s03_1 .map_area.c5::before{ background: #DCA541; }
.s03_1 .map_area.c6::before{ background: #9F9A4C; }
.s03_1 .map_area.blank{
    visibility: hidden;
}
.s03_1 .map_box{
    padding-top: 14px;
    border-top: 0.5px solid var(--Public-222222, #222);
}
.s03_1 .map_box .text{
    word-break: keep-all;
}
.s03_1 .map_box .caption{
    display: flex;
    align-items: center;
    gap: 4px;
    margin-top: 4px;
    color: #333;
}
.s03_1 .map_box .caption img{
    flex-shrink: 0;
}


@media all and (max-width:1280px) {

}

@media all and (max-width:1024px) {

    .s03_1 .ladder_mo{
        display: block;
    }
    .s03_1 .flexs{
        display: flex;
        flex-direction: row;
        align-items: stretch;
    }
    .s03_1 .sub_head .flexs{
        align-items: center;
    }
    .s03_1 .book_grid{
        gap: 20px;
    }
    .s03_1 .book_grid .box{
        gap: 20px;
    }
    .s03_1 .book_img .qr{
        width: 64px;
    }
    .s03_1 .book_grid.col3{
        grid-template-columns: repeat(2, 1fr);
    }
    .s03_1 .book_grid .box.ver2.wide{
        padding-right: 200px;
    }
    .s03_1 .book_deco2{
        right: 20px;
        width: 150px;
    }
    .s03_1 .map_grid{
        grid-template-columns: repeat(2, 1fr);
    }
    .s03_1 .map_img{
        grid-column: 1 / -1;
        grid-row: auto;
    }
    .s03_1 .map_area.blank.tm-none{
        display: none !important;
    }
}

@media all and (max-width:767px) {
    .s03_1 .part.bg{
        padding: 25px;
    }
    .s03_1 .flexs{
        display: flex;
        flex-direction: column;
        align-items: stretch;
    }
    .s03_1 .cate{
        padding-right: 0;
        margin-right: 0;
        border-right: none;
        margin-bottom: 10px;
    }
    .s03_1 .txt_wrap.line .icon{
        display: none;
    }
    .s03_1 .book_grid{
        grid-template-columns: 1fr;
    }
    .s03_1 .book_head{
        margin-top: 48px;
    }
    .s03_1 .book_deco img{
        max-width: 200px;
    }
    .s03_1 .book_grid.col3{
        grid-template-columns: 1fr;
    }
    .s03_1 .book_grid .box.ver2.wide{
        padding-right: 20px;
        padding-bottom: 140px;
    }
    .s03_1 .book_deco2{
        right: 20px;
        bottom: 10px;
        width: 120px;
    }
    .s03_1 .map_grid{
        grid-template-columns: 1fr;
    }
    /* 새 지역이 시작되는 항목: 위 간격 40px → 60px */
    .s03_1 .map_item:has(.map_area:not(.blank)){
        margin-top: 20px;
    }
    .s03_1 .txt_wrap .stitle.map_area.blank{
        display: none;
    }


    .s03_1 .sub_head .flexs{
        flex-direction: column-reverse;
        text-align: center;
    }
    .s03_1 .sub_head .width372{
        flex-shrink: 1;
        width: 60%;
        max-width: 280px;
    }

}

@media all and (max-width:425px){
.s03_1 .book_grid .box{
    flex-direction: column;
}
}

/* Sub03_2 */
.s03_2 .flexs .img_wrap,
.s03_2 .flexs .txt_wrap{
    margin: 0;
}
.s03_2 .part{
    padding: 60px;
    background: var(--AI-bg1, #EAF5EB);
}
.s03_2 mark{
    background: #B2DAB8;
}

.s03_2 .box{
    display: flex; 
    padding: 16px 24px;
    justify-content: flex-start;
    align-items: center;
    gap: 20px;
    flex: 1 0 0;
    background: var(--3-2-bg2, #EBEBEC);
    text-align: left;
}
.s03_2 .box .img_wrap{
    flex-shrink: 0;
    text-align: right;
}
.s03_2 .icon{
    width: 20px;
    height: 20px;
}
/* 수상 목록 2열: 좌우 간격 40px (양쪽 20px씩 → 두 칸 내용 폭 동일) */
.s03_2 .row.width50>.column{
    box-sizing: border-box;
    padding-left: 20px;
    padding-right: 0;
}
.s03_2 .row.width50>.column:first-child{
    padding-left: 0;
    padding-right: 20px;
}
@media all and (max-width:1280px) {
    .s03_2 .row.width50>.column,
    .s03_2 .row.width50>.column:first-child{
        padding-left: 0;
        padding-right: 0;
    }
}
.s03_2 .line{
    padding-bottom: 2px;
    border-bottom: 0.5px solid var(--Public-222222, #222);
}
.s03_2 .caption{
    font-size: 15px;
    color: #333;
    margin-top: 10px;
}

@media all and (max-width:1024px) {
    .s03_2 .flexs{
        display: flex;
    }
    .s03_2 .box{
        flex-direction: column;
        justify-content: center;
        align-items: center;
        padding: 10px 16px;
    }
}

@media all and (max-width:767px) {
    .s03_2 .flexs{
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
    }
    .s03_2 .box{
        width: 80%;
    }
    .s03_2 .part{
        padding: 25px;
    }
}

@media all and (max-width:500px) {
    

}

/* Sub03_2 AI 툴 라인업 */
.s03_2 .flexs.tools{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: stretch;
    gap: 40px 60px;
    margin: 28px 0;
}
.s03_2 .flexs.tools .box{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: stretch;
    gap: 10px;
    flex: 1 1 calc((100% - 120px) / 3); /* 3열: 가로 gap 60px × 2 */
    min-width: 0;
    padding: 0;
    background: none;
    text-align: center;
}
.s03_2 .flexs.tools .box:nth-child(4){
    flex: 0 0 calc(38% - 30px); /* 2열: 가로 gap 60px을 반씩 */
}
.s03_2 .flexs.tools .box:nth-child(5){
    flex: 1 1 calc(62% - 30px);
}
.s03_2 .flexs.tools .icons{
    display: flex;
    justify-content: center;
    align-items: flex-start;
    gap: 20px;
}
.s03_2 .flexs.tools .img_wrap{
    flex-shrink: 0;
    margin: 0;
    text-align: center;
}
.s03_2 .flexs.tools .img_wrap .image img{
    display: block;
    width: 64px;
    margin: 0 auto;
}
.s03_2 .flexs.tools .img_wrap .text{
    margin-top: 6px;
    font-size: 16px;
    line-height: 1.4;
    letter-spacing: -0.64px;
    word-break: keep-all;
}
.s03_2 .flexs.tools .text.fwb{
    width: 100%;
    padding-top: 10px;
    border-top: 1px solid var(--AI-point2, #ACD7B2);
    font-size: 18px;
    line-height: 1.6;
    text-align: center;
    word-break: keep-all;
}
@media all and (max-width:1024px) {
    .s03_2 .flexs.tools{
        gap: 40px 60px;
    }
    .s03_2 .flexs.tools .box,
    .s03_2 .flexs.tools .box:nth-child(4){
        flex: 1 1 calc((100% - 60px) / 2);
    }
    .s03_2 .flexs.tools .box:nth-child(5){
        flex: 1 1 100%;
    }
    .s03_2 .flexs.tools .icons{
        flex-wrap: wrap;
        gap: 16px 20px;
    }
    .s03_2 .flexs.tools .img_wrap .image img{
        width: 56px;
    }
    .s03_2 .flexs.tools .img_wrap .text{
        font-size: 15px;
    }
    .s03_2 .flexs.tools .text.fwb{
        font-size: 17px;
    }
}

@media all and (max-width:767px) {
    .s03_2 .flexs.tools{
        flex-direction: row;
        gap: 40px;
    }
    .s03_2 .flexs.tools .box,
    .s03_2 .flexs.tools .box:nth-child(4),
    .s03_2 .flexs.tools .box:nth-child(5){
        flex: 1 1 100%;
        width: 100%;
    }
    .s03_2 .flexs.tools .text.fwb{
        font-size: 16px;
    }
    .s03_2 .mt80{
        margin-top: 40px !important;
    }
}

@media all and (max-width:500px) {
    .s03_2 .flexs.tools .icons{
        gap: 12px 16px;
    }
    .s03_2 .flexs.tools .img_wrap .image img{
        width: 48px;
    }
    .s03_2 .flexs.tools .img_wrap .text{
        font-size: 14px;
    }
}


/* Sub03_2 AI 에이전트 */
.s03_2 .agent .agent_label{
    display: inline-block;
    padding: 2px 12px;
    border-radius: 0 0 8px 8px;
    background: var(--AI-point1, #ACD7B2);
    font-size: 18px;
    font-weight: 700;
    line-height: 1.6;
}
.s03_2 .agent .agent_intro{
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 40px;
    margin-bottom: 60px;
}
.s03_2 .agent .agent_def{
    flex: 1 1 0;
    min-width: 0;
    border-top: 1px solid var(--AI-point1, #ACD7B2);
}
.s03_2 .agent .agent_def .agent_label{
    margin-bottom: 12px;
}

.s03_2 .agent .agent_qr{
    display: flex;
    align-items: flex-end;
    gap: 10px;
    margin-top: 36px;
}
.s03_2 .agent .agent_qr .image{
    flex-shrink: 0;
}
.s03_2 .agent .agent_qr .image img{
    display: block;
    width: 80px;
}
.s03_2 .agent .agent_qr .caption{
    flex: 1 1 0;
    padding: 0 0 2px;
    border-bottom: 1px solid var(--Public-222222, #222);
    color: #222;
    font-size: 14px;
    line-height: 1.6;
    text-align: left;
}
.s03_2 .agent .agent_feature{
    flex: 1 1 0;
    min-width: 0;
    padding: 24px 28px;
    background: var(--AI-point3, #F9C270);
}
.s03_2 .agent .agent_feature_tit{
    margin-bottom: 12px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--Public-222222, #222);
    font-size: 18px;
    font-weight: 700;
    line-height: 1.6;
    text-align: center;
}
.s03_2 .agent .agent_feature .text{
    margin-bottom: 6px;
    padding-left: 20px;
    text-indent: -20px;
}
.s03_2 .agent .agent_feature .text:last-child{
    margin-bottom: 0;
}

/* AI 툴 vs AI 에이전트 */
.s03_2 .agent .agent_compare{
    margin-bottom: 60px;
    padding: 40px 32px;
    background: #FFF;
}
.s03_2 .agent .agent_compare_tit{
    margin-bottom: 28px;
    font-weight: 700;
    text-align: center;
}
.s03_2 .agent .agent_cols{
    display: flex;
    align-items: stretch;
}
.s03_2 .agent .agent_col{
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 1 1 0;
    min-width: 0;
    padding: 0 20px;
    text-align: center;
}
.s03_2 .agent .agent_col + .agent_col{
    border-left: 1px dotted var(--Public-222222, #222);
}
.s03_2 .agent .agent_col_tit{
    margin-bottom: 12px;
    font-size: 20px;
    font-weight: 700;
    line-height: 1.5;
}
.s03_2 .agent .agent_col .image{
    margin-bottom: 20px;
}
.s03_2 .agent .agent_col .image img{
    display: block;
    max-width: 100%;
    height: 150px;
    margin: 0 auto;
    object-fit: contain;
}
.s03_2 .agent .agent_col .text{
    font-size: 18px;
    line-height: 1.8;
    word-break: keep-all;
}
.s03_2 .agent .agent_col .text.fwb{
    margin-bottom: 4px;
}
.s03_2 .agent .agent_example{
    margin: 24px 0;
    padding: 8px 28px;
    border-radius: 999px;
    background: var(--AI-point1, #B2DAB8);
    font-size: 18px;
    font-weight: 700;
    line-height: 1.6;
    text-align: center;
    word-break: keep-all;
}
.s03_2 .agent .agent_example_tag{
    display: inline-block;
    margin-right: 8px;
    padding: 0 12px;
    border-radius: 999px;
    background: #FFF;
    color: var(--AI-point2, #5FB171);
    font-size: 18px;
    font-weight: 700;
    vertical-align: 1px;
}
.s03_2 .agent .agent_steps{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
}
.s03_2 .agent .agent_steps .text{
    margin-bottom: 4px;
}
.s03_2 .agent .agent_steps .num{
    margin-right: 4px;
    color: var(--AI-point2, #ACD7B2);
}
.s03_2 .agent .agent_dots{
    width: 0;
    height: 60px;
    margin: 20px auto 0;
    border-left: 1px dotted var(--Public-222222, #222);
}

/* AI 플랫폼별 특장점 */
.s03_2 .agent .agent_platform .agent_label{
    margin-bottom: 28px;
}
.s03_2 .agent .agent_platform_list{
    display: flex;
    justify-content: space-between;
    gap: 28px;
}
.s03_2 .agent .agent_platform_item{
    flex: 1 1 0;
    min-width: 0;
    text-align: center;
}
.s03_2 .agent .agent_platform_item .image{
    margin-bottom: 16px;
}
.s03_2 .agent .agent_platform_item .image img{
    display: block;
    max-width: 100%;
    height: 150px;
    margin: 0 auto;
    object-fit: contain;
}
.s03_2 .agent .agent_platform_item .text{
    font-size: 18px;
    line-height: 1.8;
    word-break: keep-all;
}
.s03_2 .agent .agent_platform_item .text.fwb{
    margin-bottom: 8px;
    line-height: 1.6;
}
.s03_2 .agent .agent_point{
    display: inline-block;
    margin-right: 4px;
    padding: 0 10px;
    border-radius: 999px;
    background: var(--AI-point3, #F9C270);
    font-size: 15px;
    line-height: 1.5;
    font-weight: 700;
    vertical-align: 1px;
}
@media all and (max-width:1024px) {
    .s03_2 .agent .agent_intro{
        gap: 24px;
        margin-bottom: 48px;
    }
    .s03_2 .agent .agent_feature{
        padding: 20px 24px;
    }
    .s03_2 .agent .agent_compare{
        margin-bottom: 48px;
        padding: 32px 20px;
    }
    .s03_2 .agent .agent_col{
        padding: 0 16px;
    }
    .s03_2 .agent .agent_col .image img,
    .s03_2 .agent .agent_platform_item .image img{
        height: 120px;
    }
    .s03_2 .agent .agent_platform_list{
        gap: 20px;
    }
    .s03_2 .agent .agent_col .text,
    .s03_2 .agent .agent_platform_item .text{
        font-size: 15px;
    }
    .s03_2 .agent .agent_col_tit{
        font-size: 18px;
    }
}

@media all and (max-width:767px) {
    .s03_2 .agent .agent_intro{
        flex-direction: column;
        align-items: stretch;
    }
    .s03_2 .agent .agent_cols{
        flex-direction: column;
    }
    .s03_2 .agent .agent_col{
        padding: 0;
    }
    .s03_2 .agent .agent_col + .agent_col{
        margin-top: 28px;
        padding-top: 28px;
        border-left: 0;
        border-top: 1px dotted var(--Public-222222, #222);
    }
    .s03_2 .agent .agent_dots{
        display: none;
    }
    .s03_2 .agent .agent_example{
        font-size: 16px;
    }
    .s03_2 .agent .agent_platform_list{
        flex-direction: column;
        gap: 40px;
    }
}

@media all and (max-width:500px) {
    .s03_2 .agent .agent_feature{
        padding: 20px;
    }
    .s03_2 .agent .agent_compare{
        padding: 28px 16px;
    }
    .s03_2 .agent .agent_example{
        padding: 8px 20px;
        border-radius: 24px;
        font-size: 15px;
    }
    .s03_2 .agent .agent_example_tag{
        display: table;
        margin: 0 auto 4px;
    }

}

/* Sub03_3 */
 .s03_3 .part.bg{
        background: url(../image/sub/s03_3_img_bg.png) center / cover no-repeat;
        padding: 80px;
    }
 .s03_3 .ccolor3_3{
    color: var(--3-3-point1, #FCD475);
 }
  .s03_3 .people{
    border-radius: 999px;
    background: var(---bg1, #FCD475);
    display: flex;
    width: 140px;
    height: 140px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 4px;
    font-size: 16px;
    line-height: 1.5;
    text-align: center;
  }
   .s03_3 .line{
    border-bottom: 1px solid var(--Public-222222, #222);
    padding-bottom: 18px;
   }

   .s03_3 .tit .text.bg{
    position: relative;
    z-index: 1;
}

 .s03_3 .tit{
    position: relative;
}
 /* 하트 아이콘을 강조 단어(부모님/가족/아기/막둥이/딸) 뒤에 깔기 - 화면 폭과 무관하게 단어 기준 */
 .s03_3 .tit .heart_word{
   position: relative;
   display: inline-block;
 }
 .s03_3 .tit .icon{
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
   z-index: -1;
   width: 34px;
   height: 37.046px;
   max-width: none;
 }
 /* 개별 위치 미세 조정용 (left/top 값만 바꿔서 사용) */
 .s03_3 .tit .icon1{ left: 50%; }
 .s03_3 .tit .icon2{ left: 50%; }
 .s03_3 .tit .icon3{ left: 50%; }
 .s03_3 .tit .icon4{ left: 50%; }
 .s03_3 .tit .icon5{ left: 50%; }
  .s03_3 .width501{
    min-width: 501px;
    
  }
   .s03_3 .flexs.reverse{
    flex-direction: row-reverse ;
   }
   .s03_3 .t20{
    font-size: 20px;
    line-height: 1.6;
    text-decoration: underline;
    text-decoration-color: #FCD475;
   }
@media all and (max-width:1024px) {
    .s03_3 .part.bg{
        padding: 48px;
    }
    
   .s03_3 .flexs{
    display: flex;
    flex-direction: row;
    align-items: center;
   }
   .s03_3 .flexs.reverse{
    flex-direction: column;
    gap: 0;
   }
   .s03_3 .width501{
    min-width: 0;
    max-width: 501px;
    margin-top: 0;
   }
    .s03_3 .t20{
        font-size: 18px;
    }
}

@media all and (max-width:767px) {
    .s03_3 .part.bg{
        padding: 25px;
    }
    .s03_3 .t20{
        font-size: 16px;
    }
    .s03_3 mark{
        font-size: 14px;
    }
    .s03_3 .text img{
        display: none;
    }
}

@media all and (max-width:430px){
   .s03_3 .flexs{
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0px;
   }
   .s03_3 .flexs .title{
    text-align: center;
   }
}



/* Sub03_4 */
.s03_4 .ccolor3_4{
    color: var(--3-4-point1, #2E8359);
}
.s03_4 .part.bg{
    padding: 60px;
    background: var(---bg1, #C8E7F2);
}
.s03_4 .width552{
    max-width: 552px;
}

/* 자가진단 - 배경 라인 */
.s03_4 .check_wrap{
    --icon: 72px;
    position: relative;
    padding-bottom: 60px;
}
.s03_4 .check_wrap::before{
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    z-index: 0;
    width: 28px;
    transform: translateX(-50%);
    border-radius: 0 0 14px 14px;
    background: var(---point2, #A1D8E6);
}

/* 자가진단 - 상단 타이틀 (이미지 위 글자) */
.s03_4 .check_head{
    position: relative;
    z-index: 1;
    width: fit-content;
    margin: 0 auto;
}
.s03_4 .check_head .stitle{
    padding-bottom: 4px;
    border-bottom: 1px dashed var(---point1, #CB5245);
}
.s03_4 .check_head .img_wrap{
    margin: 0;
}
.s03_4 .check_head .txt_wrap{
    position: absolute;
    inset: 0;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin: 0;
    text-align: center;
}
.s03_4 .check_head .stitle{
    margin-bottom: 8px;
    color: var(---point1, #CB5245);
}
.s03_4 .check_head .btitle{
    margin-bottom: 8px;
    font-family: 'KCCMurukmuruk';
}
.s03_4 .check_head .caption{
    color: #727171;
    font-size: 13px;
    line-height: 1.5;
    letter-spacing: -0.26px;
}

/* 자가진단 - 타임라인 */
.s03_4 .timeline{
    position: relative;
    z-index: 1;
    padding-top: 60px;
}
.s03_4 .timeline .item{
    display: grid;
    grid-template-columns: 1fr var(--icon) 1fr;
    height: var(--icon);
}
.s03_4 .timeline .item + .item{
    margin-top: 160px;
}
.s03_4 .timeline .item:last-child{
    height: auto;
}
.s03_4 .timeline .icon{
    grid-column: 2;
    grid-row: 1;
    width: var(--icon);
    height: var(--icon);
}
.s03_4 .timeline .icon img{
    display: block;
    width: 100%;
}
.s03_4 .timeline .txt_wrap{
    grid-row: 1;
    margin: 0;
}
.s03_4 .timeline .item.left .txt_wrap{
    grid-column: 1;
    justify-self: end; /* 라인 시작점에 텍스트 맞춤 */
}
.s03_4 .timeline .item.right .txt_wrap{
    grid-column: 3;
}
.s03_4 .timeline .img_wrap.line{
    margin: calc(var(--icon) / 2) 0 24px;
    line-height: 0;
}
.s03_4 .timeline .img_wrap.line img{
    max-width: 100%;
    transform: translateY(-50%);
}
.s03_4 .timeline .item.left .img_wrap.line{
    text-align: right;
}
.s03_4 .timeline .item.right .img_wrap.line{
    text-align: left;
}
.s03_4 .timeline .t_wrap{
    padding: 0 24px;
}
.s03_4 .timeline .text.tit{
    font-weight: 700;
}
.s03_4 .timeline .text.c1{
    color: var(---point1, #CB5245);
}
.s03_4 .timeline .text.c2{
    color: #5F8AC1;
}
.s03_4 .timeline .text.c3{
    color: #4DB5A7;
}
.s03_4 .timeline .text.c4{
    color: #727171;
}
.s03_4 .text.t_flex{
    display: flex;
    align-items: flex-start;
    gap: 6px;
}
.s03_4 .timeline .text.t_flex span{
    flex-shrink: 0;
}

/* 평가결과 */
.s03_4 .result_wrap{
    position: relative;
}
.s03_4 .result_box{
    width: 100%;
    padding: 60px 320px 48px 40px; /* 오른쪽: 포스트잇 자리 비움 */
    background: url('../image/sub/s03_4_img_6.png') no-repeat center / 100% 100%;
}
.s03_4 .result_box .title{
    width: fit-content;
    margin-bottom: 24px;
    font-family: 'KCC-Chassam', 'KccChaSaem';
    font-size: 24px;
    font-weight: 400;
    padding-bottom: 4px;
    border-bottom: 1px dashed var(---point1, #CB5245);
}
.s03_4 .result_list{
    display: flex;
    justify-content: flex-start;
    gap: 40px;
    text-align: center;
    
}
.s03_4 .result_item .num{
    display: inline-block;
    box-sizing: border-box;
    margin-bottom: 12px;
    padding: 6px 20px;
    border-radius: 999px;
    width: 180px;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.5;
}
.s03_4 .result_item.r1 .num{
    background: #D4ECF3;
}
.s03_4 .result_item.r2 .num{
    background: #FFF5D7;
}
.s03_4 .result_item.r3 .num{
    background: #FCE3CD;
}
.s03_4 .result_item.r4 .num{
    background: #FCE5E8;
}
.s03_4 .result_item .text{
    font-size: 16px;
    line-height: 1.6;
    word-break: keep-all;
}
.s03_4 .result_wrap .postit{
    position: absolute;
    right: 0;
    bottom: -20px;
    z-index: 1;
    max-width: 282px;
    margin: 0;
}
.s03_4 .result_wrap .postit img{
    display: block;
    max-width: 100%;
}

/* 우리 집 면역 충전소 */
.s03_4 .part.bg.house{
    --px: 140px; /* 좌우 패딩 (라인이 이 값만큼 바깥으로 확장) */
    padding: 220px var(--px) 100px;
    background: var(---bg1, #C8E7F2) url('../image/sub/s03_4_img_bg.png') no-repeat center top / 90% 95%;
}
.s03_4 .house .txt_wrap{
    margin: 0;
}
.s03_4 .house_head{
    margin-bottom: 60px !important;
    text-align: center;
    max-width: 850px;
}
.s03_4 .house_head .title{
    margin-bottom: 8px;
    color: var(---point1, #CB5245);
    font-size: 28px;
    font-weight: 800;
}
.s03_4 .house_head .text{
    font-weight: 700;
}
.s03_4 .house .room_row{
    display: flex;
    justify-content: space-between;
    gap: 40px;
}
.s03_4 .house .room{
    flex: 1;
}
.s03_4 .house .room_tit{
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 8px;
}
.s03_4 .house .cate_box{
    display: flex;
    flex-shrink: 0;
    width: 48px;
    height: 48px;
}
.s03_4 .house .cate{
    display: flex;
    padding: 8px;
    justify-content: center;
    align-items: center;
    flex: 1 0 0;
    align-self: stretch;
    border-radius: 999px;
    background: var(---point1, #CB5245);
    color: #FFF;
    font-size: 15px;
    font-weight: 700;
}
.s03_4 .house .room_tit .title{
    margin-bottom: 0;
    color: var(---point1, #CB5245);
}
.s03_4 .house .text.stit{
    margin: 20px 0 8px;
}
.s03_4 .house .text.t_flex{
    align-items: flex-start;
    gap: 8px;
}
.s03_4 .house .text.t_flex img{
    flex-shrink: 0;
    margin-top: 5px;
}
.s03_4 .house .text.food{
    align-items: start;
    line-height: 1.56;
    margin-bottom: 8px;
}
.s03_4 .house .text.food img{
    width: 24px;
    margin: 0;
}
.s03_4 .house .text.food strong{
    flex-shrink: 0;
    font-weight: 700;
}
.s03_4 .house .text.food span{
    flex: 1;
    min-width: 0;
}
.s03_4 .house .qr_list{
    display: flex;
    gap: 40px;
    margin-top: 40px;
}
.s03_4 .house .qr img{
    display: block;
    width: 90px;
}
.s03_4 .caption{
    color: var(--Public-222222, #222) !important;
}
/* QR + 전등 이미지 */
.s03_4 .house .qr_lamp{
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
}
.s03_4 .house .qr_list.column{
    flex-direction: column;
    gap:18px;
}
.s03_4 .house .img_wrap.lamp{
    flex-shrink: 0;
    max-width: 200px;
    margin: 0;
}
.s03_4 .house .img_wrap.lamp img{
    display: block;
    max-width: 100%;
}
.s03_4 .house .qr_item .qr{
    margin-bottom: 12px;
}
.s03_4 .house .qr_item .text{
    font-size: 16px;
    line-height: 1.5;
}
.s03_4 .house .caption{
    color: #727171;
    font-size: 14px;
    line-height: 1.5;
    letter-spacing: -0.28px;
}

/* 옷 이미지 위 글자 */
.s03_4 .house .closet{
    position: relative;
    flex-shrink: 0;
    max-width: 489px;
    margin-top: -25px;
}
.s03_4 .house .closet .img_wrap{
    margin: 0;
    margin-left: 30px;
}
.s03_4 .house .closet .txt_wrap{
    position: absolute;
    inset: 0;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    text-align: center;
    padding-top: 80px;
}
.s03_4 .house .closet .txt_wrap .text{
    font-size: 16px;
    line-height: 1.6;
}
.s03_4 .house .closet .txt_wrap .text.fwb{
    margin-bottom: 8px;
}
.s03_4 .house .closet .qr{
    margin: 16px 0 8px;
}

/* 점선 라인 */
/* line2: part 전체 너비 (좌우 패딩만큼 음수 마진) */
.s03_4 .house .hline{
    height: 6px;
    margin: 0 calc(var(--px) * -1);
    background: url('../image/sub/s03_4_img_line2.png') repeat-x left center;
}
.s03_4 .house .room_row + .hline{
    margin-top: 60px;
}
/* 라인 바로 아래 행: 옷 이미지·세로 라인은 라인에 붙이고 텍스트만 띄움 */
.s03_4 .house .hline + .room_row .room{
    padding-top: 60px;
    padding-bottom: 40px;
}
.s03_4 .house .vline{
    flex-shrink: 0;
    width: 6px;
    background: url('../image/sub/s03_4_img_line3.png') repeat-y center top;
}
.s03_4 .part.line{
    padding-top: 20px;
    border-top: 4px solid var(--3-4-bg1, #FFE492);;
}
.s03_4 .box{
    padding: 32px;
    background: var(--3-4-bg2, #FFFBE8);
    min-width: 700px;
}
.s03_4 .box.ver2{
    background: var(--3-4-bg3, #F4F9F2);
}
.s03_4 .box .t20{
    font-size: 20px;
    font-weight: 700;
    line-height: 1.6;
    letter-spacing: -0.8px;
    margin-bottom: 20px;
}
.s03_4 .box .text img{
    margin-right: 10px;
}
.s03_4 .box .ccolor3_4_1{
    color: var(--3-4-point3, #CB9500);
    font-size: 15px;
    font-weight: 400;
    line-height: 1.5;
    letter-spacing: -0.3px;
    margin-left: 32px;
}
.s03_4 .line.bl{
    text-decoration: underline;
    text-decoration-color: #A1D8E6;
    text-decoration-thickness: 2px;
}
@media all and (max-width:1280px) {


}

@media all and (max-width:1024px) {
    /* 박스 크기에 맞춰 채움(비율 무시) */
    .s03_4 .result_box{
        background: url('../image/sub/s03_4_img_6_tm.png') no-repeat center top / cover;
    }
    .s03_4 .part.bg{
        padding: 48px;
    }
    .s03_4 .flexs{
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    .s03_4 .box{
        max-width: 700px;
        min-width: 0;
    }
    .s03_4 .timeline .item + .item{
        margin-top: 120px;
    }
    /* 태블릿 이하: 포스트잇을 박스 아래로 */
    .s03_4 .result_box{
        padding-right: 40px;
    }
    .s03_4 .result_list{
        flex-wrap: wrap;
        row-gap: 28px;
    }
    .s03_4 .result_item{
        width: calc(50% - 20px);
    }
    .s03_4 .result_wrap .postit{
        position: static;
        margin: -20px auto 0;
    }
    .s03_4 .house .hline + .room_row .room{
        padding-bottom: 20px;
    }
    .s03_4 .house .text.food{
        margin-top: 6px;
        margin-bottom: 0;
    }
}

@media all and (max-width:767px) {
    .s03_4 .part.bg{
        padding: 24px;
    }
    .s03_4 .check_wrap{
        --icon: 56px;
    }
    /* 모바일: 아이콘 아래 콘텐츠 */
    .s03_4 .timeline{
        padding-top: 40px;
    }
    .s03_4 .timeline .item,
    .s03_4 .timeline .item:last-child{
        display: flex;
        flex-direction: column;
        align-items: center;
        height: auto;
    }
    .s03_4 .timeline .item + .item{
        margin-top: 40px;
    }
    .s03_4 .timeline .txt_wrap{
        width: 100%;
        margin-top: 16px;
        padding: 20px;
        background: var(---bg1, #C8E7F2);
    }
    .s03_4 .timeline .img_wrap.line{
        display: none;
    }
    .s03_4 .timeline .t_wrap{
        padding: 0;
    }
    .s03_4 .timeline .text.tit{
        text-align: center;
    }
    .s03_4 .timeline .text{
        font-size: 16px;
        line-height: 1.7;
    }
    .s03_4 .timeline .t_flex{
        justify-content: center;
    }
    .s03_4 .result_box{
        padding: 48px 20px 32px;
    }
    .s03_4 .result_list{
        column-gap: 20px;
    }
    .s03_4 .result_item{
        width: calc(50% - 10px);
    }
    .s03_4 .result_item .text{
        font-size: 15px;
    }
    .s03_4 .box{
        padding: 24px;
    }
    .s03_4 .box .t20{
        font-size: 18px;
    }
}
@media all and (max-width:540px){
    .s03_4 .result_list{
        flex-direction: column;
        row-gap: 24px;
    }
    .s03_4 .result_item{
        width: 100%;
    }
    .s03_4 .house .closet{
        margin-top: 100px;
    }
}
/* 우리 집 면역 충전소 - 반응형 */
@media all and (max-width:1024px) {
    .s03_4 .part.bg.house{
        --px: 0px;  /* part 좌우 패딩 0 → hline 음수 마진도 0 (가로 넘침 방지) */
        --rx: 80px; /* room_row 좌우 패딩 (vline이 이 값만큼 바깥으로 확장) */
        padding: 240px 0 60px;
        /* 가로는 박스 너비에 맞추고 세로는 비율대로(늘어나지 않음) */
        background: var(---bg1, #C8E7F2) url('../image/sub/s03_4_img_bg.png') no-repeat center top / 100% auto;
    }
    .s03_4 .house .closet{
        margin-top: 20px;
    }
    .s03_4 .house .room_row{
        flex-direction: column;
        align-items: center;
        gap: 0;
        background: #FDF4E5;
        padding: 0 var(--rx) 20px;
    }
    .s03_4 .house .room{
        width: 100%;
    }
    .s03_4 .house .room_row.closet_row .room{
        padding-top: 60px;
    }
    /* 라인 위 간격: margin(투명 → 배경 비침) 대신 크림색 room_row의 padding으로 */
    .s03_4 .house .room_row + .hline{
        margin-top: 0;
        background-color: #FDF4E5; /* 점선 사이 투명 부분에 part 배경(하늘색) 비침 방지 */
    }
    .s03_4 .house .room_row.closet_row{
        padding-bottom: 80px; /* 20px + 라인 위 간격 60px */
    }
    /* 세로 라인 → 가로 라인 */
    .s03_4 .house .vline{
        align-self: stretch;
        width: auto;
        height: 6px;
        margin: 60px calc(var(--rx) * -1) 0; /* room_row 좌우 패딩만큼 확장 → 전체 너비 */
        background: url('../image/sub/s03_4_img_line2.png') repeat-x left center;
        background-color: #FDF4E5;
    }
    .s03_4 .house .vline + .room{
        padding-top: 60px;
    }
    .s03_4 .house .qr_list.column{
        flex-direction: row;
    }
}

@media all and (max-width:767px) {
    .s03_4 .part.bg.house{
        --rx: 24px;
    }
    .s03_4 .house_head{
        margin-bottom: 40px !important;
        padding: 0 var(--rx);
    }
    .s03_4 .house_head .title{
        font-size: 22px;
    }
    .s03_4 .house .vline{
        margin-top: 30px;
    }
    .s03_4 .house .room_row.closet_row{
        padding-bottom: 50px; /* 20px + 라인 위 간격 30px */
    }
    .s03_4 .house .hline + .room_row .room,
    .s03_4 .house .vline + .room{
        padding-top: 40px;
    }
    .s03_4 .house .cate_box{
        width: 40px;
        height: 40px;
    }
    .s03_4 .house .cate{
        font-size: 13px;
    }
    .s03_4 .house .text{
        font-size: 16px;
        line-height: 1.7;
    }
    .s03_4 .house .closet .txt_wrap .text{
        font-size: 14px;
    }
    .s03_4 .house .qr_list.column{
        flex-direction: column;
    }
    .s03_4 .house .qr_list{
        gap: 20px;
    }
    .s03_4 .house .qr img{
        width: 72px;
    }
}

@media all and (max-width:425px) {
    .s03_4 .box p.text{
        padding-left: 20px;
        text-indent: -20px;
    }
    .s03_4 .house .closet .txt_wrap{
        padding-top: 20px;
    }
}
@media all and (max-width:320px){
.s03_4 .house .closet .txt_wrap{
        padding-top: 0px;
    }
}
/* Sub03_5 */
.s03_5 .ccolor3_5{
    color: var(--3-5-point1, #2DA63C);
}
.s03_5 .ccolor3_5_1{
    color: var(--3-5-point2, #D45D31);
}
.s03_5 .ccolor3_5_2{
    color: var(--3-5-point3, #3279C0);
}
.s03_5 .txt_wrap, 
.s03_5 .img_wrap {
    margin: 0;
}
.s03_5 .flexs .img_wrap{
    flex-shrink: 0;
}
.s03_5 .bg1{
    padding: 60px;
    background: var(---bg2, #D7EBD9);
}
.s03_5 .bg2{
    padding: 60px;
    background: var(---bg2, #C7E1F5);
}

.s03_5 .big_t {
    color: var(--Public-222222, #222);
    font-size: 28px;
    font-style: normal;
    font-weight: 400;
    line-height: 38px; /* 135.714% */
    letter-spacing: -0.28px;
}
.s03_5 .caption.line{
    padding-bottom: 4px;
    border-bottom: 1px solid var(--Public-222222, #222);
    color: var(--Public-222222, #222) !important;
    text-align: right;
    line-height: 1.3;
}

@media all and (max-width:1024px) {
    .s03_5 .flexs{
        display: flex;
        flex-direction: row ;
    }

    .s03_5 .big_t{
        font-size: 26px;
    }

    .s03_5 .width270{
        max-width: 270px;
    }
    .s03_5 .width70{
        max-width: 70%;
        margin: 0 auto;
    }
    .s03_5 .flexs.jcc{
        gap: 28px;
    }
    .s03_5 .mt20_m{
        margin-top: 20px;
    }
    .s03_5 .bg1{
    padding: 40px;
    background: var(---bg2, #D7EBD9);
    }
    .s03_5 .bg2{
        padding: 40px;
        background: var(---bg2, #C7E1F5);
    }
}

@media all and (max-width:767px) {
    .s03_5 .flexs{
        display: flex;
        flex-direction: column;
        justify-content: start;
        align-items: start;
    }
    .s03_5 .flexs.start{
        flex-direction: row;
    }
    .s03_5 .big_t{
        font-size: 24px;
    }
    .s03_5 .flexs.jcc{
        gap: 20px;
    }
    .s03_5 .box{
        padding: 16px;
    }
    .s03_5 .txt_wrap.bg{
        padding: 20px;
    }
    .s03_5 .big_t_wrap .pb60{
        padding-bottom: 40px;
    }
}
@media all and (max-width:425px){
    .s03_5 .flexs.start{
        flex-direction: column;
    }
}

/* Sub03_5 칭다오 공장 연혁·KEY POINT·수치 */
.s03_5 .plant{
    margin-top: 60px;
}
.s03_5 .plant .plant_sec{
    margin-bottom: 60px;
}
.s03_5 .plant .plant_tit{
    margin-bottom: 28px;
    padding-top: 10px;
    border-top: 1px solid var(--Public-222222, #222);
}

/* 운영 연혁 */
.s03_5 .plant .plant_history{
    display: grid;
    grid-template-columns: 255fr 254fr 421fr 255fr 255fr;
}
.s03_5 .bg2 .plant .plant_history{
    display: grid;
    grid-template-columns: repeat(4, 1fr);
}
.s03_5 .bg2 .plant .plant_line img{
    width: 100%;
}
.s03_5 .plant .plant_year{
    min-width: 0;
}
.s03_5 .plant .plant_line{
    overflow: hidden;
    width: 100%;
    margin: 6px 0;
}
.s03_5 .plant .plant_line img{
    display: block;
    width: auto;
    max-width: none;
}
.s03_5 .plant .plant_year .text{
    padding-right: 20px;
    word-break: keep-all;
}

/* KEY POINT */
.s03_5 .plant .plant_point_tit{
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
}
.s03_5 .plant .plant_point_tit img{
    flex-shrink: 0;
    width: 30px;
}
.s03_5 .plant .plant_point .text{
    position: relative;
    margin-bottom: 8px;
    padding-left: 20px;
    word-break: keep-all;
}
.s03_5 .plant .plant_point .text::before{
    content: '';
    position: absolute;
    top: 15px;
    left: 0;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(---bg3, #B2DAB8);
}
.s03_5 .plant .plant_point .text .fwb{
    margin-right: 8px;
}

/* 수치 */
.s03_5 .plant .plant_stats{
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 36px;
}
.s03_5 .plant .plant_stat{
    min-width: 0;
}
.s03_5 .plant .plant_stat.stat1{
    flex: 198 1 0;
}
.s03_5 .plant .plant_stat.stat2{
    flex: 310 1 0;
}
.s03_5 .plant .plant_stat.stat3{
    flex: 272 1 0;
}
.s03_5 .plant .plant_stat.stat4{
    flex: 258 1 0;
}
.s03_5 .plant .plant_stat.stat5{
    flex: 260 1 0;
}
.s03_5 .plant .plant_stat img{
    display: block;
    width: 100%;
}
/* 섹션 구분선 */
.s03_5 .divider{
    display: block;
    width: 100%;
    height: 1px;
    background: #B2DAB8;
}
@media all and (max-width:1024px) {
    .s03_5 .plant{
        margin-top: 48px;
    }
    .s03_5 .plant .plant_sec{
        margin-bottom: 48px;
    }
    .s03_5 .plant .plant_stats{
        flex-wrap: wrap;
        gap: 40px 28px;
        justify-content: start;
    }
    .s03_5 .plant .plant_stat.stat1,
    .s03_5 .plant .plant_stat.stat2,
    .s03_5 .plant .plant_stat.stat3,
    .s03_5 .plant .plant_stat.stat4,
    .s03_5 .plant .plant_stat.stat5{
        flex: 0 1 calc((100% - 56px) / 3);
    }
    .s03_5 .bg2 .plant .plant_line img{
        width: auto;
    }
}

@media all and (max-width:600px) {
    /* 연혁: 연도 - 세로 라인 - 세부사항 */
    .s03_5 .plant .plant_history,
    .s03_5 .bg2 .plant .plant_history{
        grid-template-columns: 1fr;
        row-gap: 0;
    }
    .s03_5 .plant .plant_year{
        display: grid;
        grid-template-columns: 56px 24px 1fr;
        column-gap: 12px;
    }
    .s03_5 .plant .plant_year .text{
        padding-right: 0;
    }
    .s03_5 .plant .plant_year .text:last-child{
        padding-bottom: 24px;
    }
    .s03_5 .plant .plant_line{
        position: relative;
        width: 24px;
        margin: 0;
    }
    /* 이미지 사이 빈칸을 잇는 세로선 */
    .s03_5 .plant .plant_line::before{
        content: '';
        position: absolute;
        top: 0;
        bottom: 0;
        left: 50%;
        width: 3px;
        background: #FFF;
        transform: translateX(-50%);
    }
    .s03_5 .plant .plant_year:first-child .plant_line::before{
        top: 10px;
    }
    .s03_5 .plant .plant_line img,
    .s03_5 .bg2 .plant .plant_line img{
        position: absolute;
        z-index: 1;
        top: 10px;
        left: 50%;
        width: auto;
        max-width: none;
        transform: rotate(90deg) translateY(-50%);
        transform-origin: 0 0;
    }
    .s03_5 .plant .plant_stats{
        justify-content: center;
    }
    .s03_5 .plant .plant_stat.stat1,
    .s03_5 .plant .plant_stat.stat2,
    .s03_5 .plant .plant_stat.stat3,
    .s03_5 .plant .plant_stat.stat4,
    .s03_5 .plant .plant_stat.stat5{
        flex: 0 1 calc((100% - 28px) / 2);
    }
}

@media all and (max-width:500px) {
    .s03_5 .plant .plant_stat.stat1,
    .s03_5 .plant .plant_stat.stat2,
    .s03_5 .plant .plant_stat.stat3,
    .s03_5 .plant .plant_stat.stat4,
    .s03_5 .plant .plant_stat.stat5{
        flex: 0 1 100%;
        max-width: 300px;
    }
}

/* Sub04_1 */
.s04_1 .ccolor4_1 {
    color: #9B0283
}
.s04_1 .flex_end{
    justify-items: flex-end;
}
.s04_1 .box{
    padding: 20px 24px 28px 24px;
    border-left: 4px solid var(--4-1-point1, #9B0283);
    background: var(--Public-F3F3F3, #F3F3F3);
}
.s04_1 .box .box_wrap{
    display: flex;
    align-items: flex-start;
    justify-content: center;
    gap: 10px;
}
.s04_1 .box .box_wrap .image{
    width: 94px;
}
.s04_1 .box .box_wrap>div{
    flex: 1 0 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}
.s04_1 .box .box_wrap .ccolor4_1{
    text-decoration: underline;
}
.s04_1 .table_wrap{
    border-top: 1px solid #9B0283;
    border-bottom: 1px solid #9B0283;
    position: relative;
}
.s04_1 .table_wrap .img_wrap{
    position: absolute;
    bottom: 0; right: 5%;
}
.s04_1 .table_wrap td{
    padding: 8px 16px;
    font-size: 22px;
    line-height: 1.5;
}
.s04_1 .table_wrap tr{
     border-bottom: 0.5px solid #222;
}
.s04_1 .table_wrap tr:last-child{
    border: none;
}
.s04_1 .table_wrap td.bg{
    text-align: center;
    background: var(--Public-F1F1F1, #F1F1F1);
}
.s04_1 .table_wrap tr td:last-child{
    font-size: 18px;
}
.width240{
    max-width: 240px;
}
@media all and (max-width: 1280px){
.s04_1 .flex_end.tm-none{
    display: none;
}
}
@media all and (max-width: 1024px) {
.s04_1 .table_wrap td{
    font-size: 20px;
    padding: 8px 12px;
}
.s04_1 .box{
    padding: 20px 16px 40px;
}
.s04_1 .flex_end{
    display: none;
}
}

@media all and (max-width: 767px) {
.s04_1 .table_wrap td{
    font-size: 16px;
    padding: 6px 10px;
}
.s04_1 .table_wrap tr td:last-child{
    font-size: 16px;
}
.s04_1 .table_wrap .img_wrap{
    display: none;
}
.s04_1 .box .box_wrap{
    flex-direction: column;
    align-items: center;
}
.s04_1 .mo16{
    margin-bottom: 16px !important;
}
}

.t_flex{
    display: flex;
    gap: 8px;
}
.ls7{
    letter-spacing: -0.07em !important;
}
.gap10{
    gap: 10px;
}
.pt8{
    padding-top: 8px !important;
}
/* Sub04_2 */
 
.s04_2 .ccolor4_2{
    color: #9B0283;
}
.s04_2 .box{
padding: 20px 24px 24px;
    border-left: 4px solid var(--4-1-point1, #9B0283);
background: var(--Public-F3F3F3, #F3F3F3);
}
.s04_2 .box_wrap{
    display: flex;
    align-items: stretch;
    justify-content: center;
}
.s04_2 .box_wrap>div{
    flex: 1 0 0;
    padding: 0 28px;
    border-right: 1px solid #222 ;
}
.s04_2 .box_wrap>div:last-child{
    border-right: none;
}
.s04_2 .box_wrap .flex{
    display: flex;
    align-items: start;
    gap: 10px;
    justify-content: center;
}
.s04_2 .box_wrap .flex>img{
    align-self: center;
}
.s04_2 .border{
    border-top: 1px solid var(--4-2-point1, #9B0283);
}
.width428{
    max-width: 428px;
}
.s04_2 .round{
    width: fit-content;
    padding: 2px 14px;
    border-radius: 999px;
    background: var(--4-1-point1, #9B0283);
    color: var(--Public-FFFFFF, #FFF);
    font-weight: 700;
    font-size: 15px;
}

.s04_2 .width600{
    max-width: 600px;
    margin: 20px auto;
}
.s04_2 .award_wrap{
    display: flex;
    align-items: stretch;
    gap: 40px;
}
.s04_2 .award_wrap .award{
    flex: 1 0 0;
    display: flex;
    flex-direction: column;
    padding-top: 8px;
    border-top: 1px solid var(--4-2-point1, #9B0283);
}
.s04_2 .award_wrap .award_box{
    margin-top: auto;
    padding: 20px;
    background: var(--Public-F3F3F3, #F3F3F3);
}
.s04_2 .award_img{
    display: flex;
    gap: 10px;
    margin-bottom: 20px;
}
.s04_2 .award_img .image{
    flex: 1 0 0;
}
.s04_2 .award_img .image img{
    display: block;
    width: 100%;
}
.s04_2 .award_img:last-child{
    margin-bottom: 0;
}
@media all and (max-width: 1024px) {
    .s04_2 .box_wrap>div{
        padding: 0 14px;
    }
    .s04_2 .award_wrap{
        gap: 28px;
    }
    .s04_2 .award_wrap .award_box{
        padding: 14px;
    }
}
@media all and (max-width: 767px) {
    .s04_2 .award_wrap{
        flex-direction: column;
        gap: 40px;
    }
    .s04_2 .award_wrap .award{
        flex: none;
    }
    .s04_2 .award_img{
        margin-bottom: 14px;
    }
    .s04_2 .box_wrap{
        flex-direction: column;
    }
    .s04_2 .box_wrap>div{
        flex: none;
        padding: 14px 0;
        border-right: none;
        border-bottom: 1px solid #222;
    }
    .s04_2 .box_wrap>div:first-child{
        padding-top: 0;
    }
    .s04_2 .box_wrap>div:last-child{
        padding-bottom: 0;
        border-bottom: none;
    }
    .s04_2 .part.interview .flexs{
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        
    }
    .s04_2 .part.interview .round{
        margin: 0 auto;
    }
    .s04_2 .part.interview .talk{
        gap: 40px;
    }
    .s04_2 .part.interview .talk .q{
        padding: 15px 32px;
    }
    .s04_2 .part.interview .talk .a{
        padding: 18px 35px;
    }
}
@media all and (max-width: 425px){
    .s04_2 .award_img{
        flex-direction: column;
        gap: 10px;

    }
    .s04_2 .award_img .image{
        flex: none;
    }
}
/* Sub04_3 */
.s04_3 .ccolor4_3 {
    color: #9B0283
}
.width196{
    max-width: 196px;
    margin-right: auto ;
    margin-left: auto;
}


/* Sub04_4 */
.s04_4 .ccolor4_4 {
    color: #9B0283
}

.s04_4 .part {
    margin-bottom: 80px !important;
}

.s04_4 .part .txt_wrap .title {
    color: #9B0283;
}

.s04_4 .width920 {
    max-width: 920px;
    width: 100%;
    margin: 0 auto;
}

@media all and (max-width: 767px) {
.mo_jsc{
    justify-content: center;
}

}

/* Sub04_5 */
.s04_5 .box_wrap {
    align-items: stretch;
}

.s04_5 .box {
    flex: 1;
}

.s04_5 .s04_5 .tit_wrap {
    display: flex;
    gap: 10px;
    border-radius: 999px 600px 600px 999px;
    height: fit-content;
    color: #fff;
    align-items: center;
}


.s04_5 .tit_wrap.bg1 {
    background: linear-gradient(90deg, #8D0A84 0%, #8D0A84 50%, #DFF2FC 100%);
}

.s04_5 .tit_wrap.bg2 {
    background: linear-gradient(90deg, #3650A1 0%, #3650A1 50%, #DFF2FC 100%);
}

.s04_5 .tit_wrap.bg3 {
    background: linear-gradient(90deg, #6F4D9C 0%, #6F4D9C 50%, #DFF2FC 100%);
}


.s04_5 .tit {
    font-size: 20px;
    font-weight: 700;
    line-height: 32px;
    letter-spacing: -0.8px;
}

.s04_5 .icon {
    margin: 0;
    width: 58px;
    height: 58px;
    aspect-ratio: 1/1;
}


.s04_5 .line {
    align-self: stretch;
    width: 24px;
    background: url('../image/sub/s04_5_img_line.png') no-repeat;
    background-size: cover;
    height: auto;
}


.s04_5 .box_flex_wrap {
    display: flex;
    padding: 0 16px;
    flex: 1;
    align-items: stretch;
}

.s04_5 .box_flex {
    width: 100%;
    display: flex;
    gap: 12px;
    padding: 12px 16px;
    flex: 1;
    background: #F4F1F8;

}

.s04_5 .ccolor4_5 {
    color: #9B0283
}

.s04_5 .ccolor4_5-1 {
    color: #9B0283
}

.s04_5 .ccolor4_5-2 {
    color: #3650A1
}

.s04_5 .ccolor4_5-3 {
    color: #6F4D9C
}


.s04_5 .dot {
    position: relative;
    z-index: 1;
    align-self: flex-start;
}

.s04_5 .dot::before {
    content: '';
    z-index: -1;
    position: absolute;
    left: 50%;
    top: calc(34px / 2);
    bottom: calc(34px / 2);
    width: 1px;
}

.s04_5 .ccolor4_5-1.dot::before {
    background: #D3A8CD;
}

.s04_5 .ccolor4_5-2.dot::before {
    background: #B0B0D8;
}

.s04_5 .ccolor4_5-3.dot::before {
    background: #B0B0D8;
}

.s04_5 .box2 {
    flex: 1;
}

.s04_5 .small {
    color: #555;
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
    letter-spacing: -0.32px;
}

.s04_5 .box2 .tit {
    padding-top: 8px;
    text-align: center;
    color: #fff;
}

.s04_5 .box2.cl1 {
    background: #9369AA;
}

.s04_5 .box2.cl2 {
    background: #585A94;
}

.s04_5 .box2.cl3 {
    background: #75AF78;
}

.s04_5 .box2 .text {
    border: 1px solid #ddd;
    padding: 12px 16px;
    margin-right: 28px;
    position: relative;
    text-align: center;
    background: #fff;
}



.s04_5 .box2.cl1 .text::after {
    background: #9369AA;
}

.s04_5 .box {
    display: flex;
    flex-direction: column;
}

.s04_5 .box_flex_wrap {
    flex: 1;
}

.s04_5 .box_flex {
    flex: 1;
}

.s04_5 .line {
    align-self: stretch;
}

.s04_5 .box2.cl2 .text::after {
    background: #585A94;
}

.s04_5 .box2.cl3 .text::after {
    background: #75AF78;
}

@media all and (max-width:1300px) {
    .s04_5 .box_wrap {
        flex-direction: column;
    }

    .s04_5 .box {
        max-width: 400px;
    }


}


@media all and (max-width:1024px) {

    .s04_5 .box_wrap2,
    .s04_5 .box_wrap {
        flex-direction: column;
        display: flex;
        gap: 28px;
    }

    .s04_5 .box_wrap2 .box2 {
        max-width: 300px;
    }

}

@media all and (max-width:480px) {
    .s04_5 .box {
        max-width: none;
    }

    .s04_5 .box_wrap2 .box2 {
        max-width: none;
    }
}

@media all and (max-width:400px) {
    .s04_5 .tit {
        font-size: 18px;
    }

    .s04_5 .line {
        width: 20px;
    }

    .s04_5 .box_flex {
        gap: 8px;
        padding: 8px;
    }

    .s04_5 .box_flex .text {
        font-size: 14px;
    }

    .s04_5 .box_flex>:nth-child(1) {
        white-space: nowrap;
    }
}

/* Sub04_6 */
.s04_6 .txt_wrap {
    padding: 48px;
    background: #EFEFEF;
    margin: 40px auto;
}

.s04_6 .img_wrap {
    margin: 0 auto;
    max-width: 860px;
}

.s04_6 .title {
    margin: 40px 0 18px 0;
    /* text-align: center; */
    font-size: 28px;
    font-weight: 800;
    line-height: 38px;
    letter-spacing: -0.28px;
}

.s04_6 .part .title{
    text-align: center;
}
.s04_6 .width360 {
    max-width: 360px;
    width: 100%;
    margin: 0 auto;
}

@media all and (max-width: 1024px) {
    .s04_6 .title {
        font-size: 24px;
        line-height: 32px;
        margin-top: 28px;
    }

    .s04_6 .txt_wrap {
        padding: 48px 32px;
    }
}

@media all and (max-width: 767px) {
    .s04_6 .title {
        font-size: 20px;
        line-height: 28px;
        margin-top: 20px;
    }

    .s04_6 .txt_wrap {
        padding: 36px 16px;
    }
}


@media all and (max-width: 340px) {
    .s04_6 .title {
        word-break: keep-all;
    }

    .s04_6 .title .mo {
        display: none;
    }
}


/* Quiz */
.quiz-wrap {
    margin-top: 30px;
    background-color: #f9f9f9;
    padding: 36px;
    border: 1px solid #ddd;
}

.quiz-wrap .quiz__answer {
    text-align: center;
    padding-bottom: 30px;
    border-bottom: 1px solid #ddd;
    margin-bottom: 30px;
}

.quiz-wrap .quiz__answer .quiz__answer-case {
    text-align: center;
}

.quiz-wrap .quiz__answer.quiz__answer-case span {
    display: -webkit-flex;
    display: -ms-flex;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 26px;
    font-weight: bold;
}

.quiz-wrap .quiz__answer .quiz__answer-case .answer label {
    margin-right: 15px;
    font-size: 26px;
    font-weight: bold;
    cursor: pointer;
}

.quiz-wrap .quiz__answer .quiz__answer-case .answer .area {
    width: 600px;
    height: 40px;
    border: 1px solid #b8b8b8;
    padding-left: 10px;
}

.quiz-wrap .quiz__enter:after {
    display: block;
    content: '';
    clear: both;
}

.quiz__enter-row {
    display: -webkit-flex;
    display: -ms-flex;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.quiz__enter-row>.quiz__enter-col {
    width: 48.3050%;
}

/* .quiz__enter-row > .quiz__enter-col { width: 48.3050%; } .quiz__enter-row > .quiz__enter-col:first-child { padding-left: 0; } */
.quiz-wrap .quiz__enter .tit {
    float: left;
    width: 60px;
    font-size: 16px;
    line-height: 40px;
    margin-right: 10px;
}

.quiz-wrap .quiz__enter .input {
    float: left;
    width: calc(100% - 70px);
    width: -webkit-calc(100% - 70px);
    width: -moz-calc(100% - 70px);
    width: -o-calc(100% - 70px);
    width: -ms-calc(100% - 70px);
}

.quiz-wrap .quiz__enter .input input[type="text"] {
    width: 100%;
    height: 40px;
    font-size: 14px;
    line-height: 40px;
    padding: 0px 10px;
    border: 1px solid #DDDDDD;
    box-sizing: border-box;
}

.quiz-wrap .quiz__dbList .part.text {
    margin: 30px 0 36px 0;
}

.quiz-wrap .quiz__dbList .part.text .label {
    display: block;
    margin-bottom: 10px;
}

.quiz-wrap .quiz__dbList .part.text .box {
    width: 100%;
    padding: 30px;
    border: 1px solid #DDDDDD;
    background-color: #fff;
    font-size: 16px;
    box-sizing: border-box;
    margin-bottom: 36px;
}

.quiz-wrap .quiz__dbList .part.text .box li {
    margin-bottom: 20px;
    padding-left: 1em;
    text-indent: -1em;
}

.quiz-wrap .quiz__dbList .checkbox {
    text-align: center;
}

.quiz-wrap .quiz__dbList .checkbox .check {
    display: inline-block;
    margin: 0 20px;
}

.quiz-wrap__button {
    text-align: center;
}

.quiz-wrap__button button {
    display: inline-block;
    padding: 16px 100px;
    background-color: #FB8400;
    color: #fff;
    font-size: 22px;
    border-radius: 30px;
    font-family: inherit;
}

/* .quiz-wrap__button { display: inline-block; padding: 5px 100px; background-color: #f26c00; color: #fff; font-size: 22px; border-radius: 30px; } */


.quiz_name {
    background: #FBEFEA;
    padding: 50px 40px 60px 40px;
}

.quiz_name .title {
    font-size: 24px;
    background: #EB5113;
    width: fit-content;
    padding: 17px 34px;
    border-radius: 30px;
    margin: 0 auto;
    line-height: 24px;
    color: white;
    text-align: center;
}

.quiz_name .text {
    text-align: center;
    margin: 30px 0 40px 0;
    font-size: 18px;
    line-height: 32px;
}

.quiz_name .text span {
    color: #EB5113;
}

.quiz_name .sub_tit {
    border-top: 1px solid #cccccc;
    padding-top: 40px;
    margin-top: 40px;
    text-align: center;
    color: #EB5113;
    font-weight: bold;
    font-size: 22px;
    margin-bottom: 40px;
    word-break: keep-all;
}

.quiz_name .name_wrap {
    display: flex;
    justify-content: space-between;
    max-width: 860px;
    margin: 0 auto;
}

.quiz_name .name {
    font-size: 20px;
    line-height: 40px;
    margin: 0 !important;
}

@media all and (max-width:1056px) {
    .quiz_name .name_wrap {
        padding: 0 50px;
    }
}

@media all and (max-width:767px) {
    .quiz_name .title {
        font-size: 22px;
        padding: 10px 24px;
        word-break: keep-all;
    }

    .quiz_name .name_wrap {
        padding: 0px;
    }

    .quiz_name .text {
        font-size: 16px;
        margin: 20px 0 30px 0;
        word-break: keep-all;
        line-height: 28px;
    }

    .quiz_name .sub_tit {
        font-size: 20px;
        padding-top: 30px;
        margin: 30px 0;
    }
}

@media all and (max-width:480px) {
    .quiz_name {
        padding: 50px 30px 60px 30px;
    }

    .quiz_name .name_wrap .name {
        font-size: 16px;
    }
}

.listPages {
    padding: 50px 80px;
    background-color: #fff;
}

.listPages-area {
    margin-bottom: 100px;
}

.listPages__title {
    margin-bottom: 20px;
    font-size: 32px;
    font-weight: 900;
    text-align: center;
}

.listPages__list {
    display: -webkit-flex;
    display: -ms-flex;
    display: flex;
    align-items: center;
}

.listPages__item {
    display: -webkit-flex;
    display: -ms-flex;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 19.6078%;
    margin-right: 7.1896%;
}

.listPages__item:last-child {
    margin-right: 0;
}

.listPages__item-vol {
    margin-bottom: 10px;
    font-weight: bold;
    font-size: 18px;
}

.listPages__item-img {
    margin-bottom: 15px;
    box-shadow: 5px 5px #ddd;
    width: 200px;
}

.listPages__item-webzine {
    display: inline-block;
    margin-bottom: 10px;
    padding: 5px 30px;
    background-color: #f26c00;
    color: #fff;
    border-radius: 40px;
    font-weight: bold;
}

.listPages__item-view {
    display: -webkit-flex;
    display: -ms-flex;
    display: flex;
    justify-content: space-around;
    align-items: center;
    width: 100%;
}

.listPages__item-view a {
    display: inline-block;
    font-weight: bold;
    font-size: 16px;
    background-repeat: no-repeat;
    background-position: center left;
    background-size: 14px 16px;
    padding-left: 20px;
}

.listPages__item-view a:first-child {
    background-image: url('../image/list/ico-pdf.png');
}

.listPages__item-view a:last-child {
    background-image: url('../image/list/ico-ebook.png');
}

.list .box {
    background: #f2f2f2;
    padding: 40px;
    width: 70%;
    text-align: center;
    margin: 0 auto;

}

.list .box .button {
    margin-top: 20px;
    background: #000;
    padding: 10px 40px;
    display: inline-block;
    color: #fff
}




@media all and (max-width:1280px) {}

@media all and (max-width:1024px) {}

@media all and (max-width:767px) {

    .hotplace::before {
        width: 30%;
    }

    .hotplace::after {
        width: 30%;
    }

    .quiz-wrap {
        padding: 30px 15px;
    }

    .quiz-wrap .quiz__answer .quiz__answer-case .answer label {
        font-size: 20px;
    }

    .quiz-wrap .quiz__answer .quiz__answer-case .answer .area {
        width: calc(100% - 65px);
    }

    .quiz__enter-row {
        flex-wrap: wrap;
    }

    .quiz__enter-row>.quiz__enter-col {
        width: 100%;
        margin: 5px 0;
    }

    .quiz-wrap__button button {
        padding: 5px 30px;
        font-size: 16px;
    }

}

@media all and (max-width:460px) {}

.wbk {
    word-break: keep-all !important;
}

.ls5 {
    letter-spacing: -0.05em !important
}

.fwb {
    font-weight: bold;
}

.sub_quick {
    margin: 42px auto 0 auto
}

.sub_quick ul:after {
    display: block;
    content: '';
    clear: both;
}

.sub_quick li {
    float: left;
    width: calc(25% - 15px);
    margin-right: 20px;
}

.sub_quick li:last-child {
    margin-right: 0px;
}

.sub_quick li a {
    width: 100%;
    display: block;
    background-color: #000;
    font-size: 16px;
    color: #ffffff;
    text-align: center;
    line-height: 50px;
    height: 50px;
}

@media all and (max-width: 767px) {
    .sub_quick li {
        width: calc(50% - 10px);
    }

    .sub_quick li:nth-child(1) {
        margin-bottom: 20px;
    }

    .sub_quick li:nth-child(2) {
        margin-bottom: 20px;
    }

    .sub_quick li:nth-child(2n) {
        margin-right: 0px;
    }

    .sub_quick li a {
        line-height: 40px;
        height: 40px;
    }
}