@charset "utf-8";
@import url('reset.css');
@import url('main.css');
@import url('https://fonts.googleapis.com/css?family=Noto+Serif+KR:200,300,400,500,600,700,900&display=swap');
@import url('https://fonts.googleapis.com/css?family=Monoton&display=swap');
@import url('https://fonts.googleapis.com/css?family=Nanum+Brush+Script&display=swap');

/* sticky footer: 콘텐츠가 짧은 페이지도 footer가 화면 하단에 붙도록 처리 */
/* body에 height:100%를 주면 overflow-x:hidden과 맞물려 body가 자체 스크롤
   컨테이너가 되어 window.scrollY가 갱신되지 않는 문제가 있어 min-height로 변경 */
html {
    height: 100%;
}
body {
    min-height: 100%;
}
#wrap {
    min-height: 100%;
    display: flex;
    flex-direction: column;
}
.sub_contents {
    flex: 1 0 auto;
}
/* top */

/* ==========================================================================
   sub_visual (서브 비주얼 영역) - 전체 통합 정리
   ========================================================================== */

/* 기본 스타일 */
.sub_visual {
    background-position: center;
    background-size: cover;
    height: 900px !important;
    position: relative;
    margin-top: 80px;
}
.sub_visual .container {
    height: 800px;
    display: table;
}
.sub_visual p.line {
    border-left: 2px solid var(--Public-FFFFFF, #FFF);
    padding-left: 10px;
    line-height: 22px;
    margin-top: 18px;
}

/* 페이지별 배경 이미지 */
.sub_visual.s1_1 {
    background-image: url('../images/sub/sub1_1.png') !important;
}
.sub_visual.s1_2 {
    background-image: url('../images/sub/sub1_2.png') !important;
}
.sub_visual.s2_1 {
    background-image: url('../images/sub/sub2_1.png') !important;
}
.sub_visual.s2_2 {
    background-image: url('../images/sub/sub2_2.png') !important;
}
.sub_visual.s2_3_1 {
    background-image: url('../images/sub/sub2_3.png') !important;
}
.sub_visual.s2_5 {
    background-image: url('../images/sub/sub2_5.png') !important;
}
.sub_visual.s2_6 {
    background-image: url('../images/sub/sub2_6.png') !important;
}

/* caption 공통 */
.sub_visual .caption {
    display: table-cell;
    vertical-align: middle;
    position: relative;
    z-index: 1;
    color: #fff !important;
}
.sub_visual .caption .bread {
    border-bottom: 1px solid white;
    width: fit-content;
    padding-bottom: 0px;
    font-size: 24px !important;
}
.sub_visual .caption .bread {
    border-bottom: 0px !important;
}
.sub_visual .caption p {
    font-size: 22px;
    font-weight: 600;
    line-height: 1.36;
}
.sub_visual .caption .subject {
    font-size: 36px;
    line-height: 60px;
    margin-top: 28px;
}
.sub_visual .caption .subject span {
    font-size: 72px;
    line-height: 1.2;
}
.sub_visual .caption .subject_mini {
    font-size: 22px;
}
.sub_visual .caption .subject_mini span {
    margin-top: 8px;
    display: block;
}

/* caption ver2 (s1_1 등) */
.sub_visual .caption.ver2 {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 100%;
    height: 100%;
    padding-top: 120px;
    max-height: 680px;
}
.sub_visual .caption.ver2.h740 {
    padding-top: 70px;
    max-height: 740px;
}
.sub_visual .caption.ver2.h800 {
    padding-top: 70px;
    max-height: 800px;
}
/* 검정 */
.black .bread span{
    color: var(--text-primary, #222);
}
.s2_1 .bread span.arrow{
    text-decoration: none;
}
.black .subject{
    color: var(--text-primary, #222);
}
.black .subject2{
    color: var(--text-primary, #222);
    font-size: var(--size-H7, 34px);
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: -0.72px;
}
/* s2_6 전용 caption */
.s2_6.sub_visual .caption {
    vertical-align: top;
    padding-top: 150px;
}

/* 반응형: ~1280px */
@media all and (max-width:1280px) {
    .sub_visual .caption.ver2{
        width: 90%;
    }
    .sub_visual.s1_3 {
        background-size: cover;
    }
    .container{
        width: 90%;
        margin: 0 auto;
    }
}

/* 반응형: ~1024px */
@media all and (max-width:1024px) {
    .sub_visual .caption .subject {
        line-height: 48px;
        font-size: 40px;
    }
    .sub_visual .caption .subject span {
        font-size: 60px;
        word-break: keep-all;
    }
    .sub_visual .caption.ver2 {
        padding-top: 30px;
        height: 90%;
    }
    .sub_visual .caption .subject {
        font-size: 40px;
    }

    .sub_visual .caption .bread{
        font-size: 22px !important;
    }
}

/* 반응형: ~767px */
@media all and (max-width:767px) {
    .sub_visual {
        height: 660px !important;
    }
    .sub_visual .container {
        height: 660px !important;
    }
    .sub_visual .caption .bread {
        font-size: 20px !important;
    }
    .sub_visual .caption .subject_small {
        font-size: 16px;
        margin-top: 10px;
    }
    .sub_visual .caption .subject {
        font-size: 34px;
    }
    .sub_visual .caption .subject span {
        font-size: 48px;
    }
    
}

/* 반응형: ~480px */
@media all and (max-width:480px) {
    .sub_visual {
        height: 660px !important;
    }
    .sub_visual .caption .subject {
        font-size: 20px;
        line-height: 26px;
        margin-bottom: 10px;
    }
    .sub_visual .caption .bread {
        font-size: 18px !important;
    }
    .sub_visual .caption .subject_mini {
        font-size: 16px;
    }
    .sub_visual .caption .subject_small {
        font-size: 14px;
        margin-top: 12px;
        line-height: 20px;
    }
    .sub_visual .caption .subject,
    .sub_visual .caption .subject .ccolor {
        font-size: 34px;
    }
    .sub_visual .caption .subject span {
        font-size: 40px;
    }
    .sub_visual .caption .subject2{
        font-size: 22px;
    }
    .s2_1.sub_visual .caption .subject .ccolor,
    .s2_2.sub_visual .caption .subject .ccolor{
        font-size: 40px;
    } 
}

/* ==========================================================================
   이하 원본 스타일
   ========================================================================== */

html,
body {
    overflow-x: hidden;
    min-width: 320px;
}

a,
a:link,
a:visited,
a:hover,
a:active {
    color: inherit;
    word-break: break-all;
    text-decoration: none;
}

b {
    font-weight: bolder;
}
.fwn{
    font-weight: normal !important;
}
.fwb {
    font-weight: 600 !important;
}
.fwb2 {
    font-weight: 700 !important;
}
.fwb3 {
    font-weight: 800 !important;
}

/* font size */
.t18 {
    font-size: 18px !important;
    line-height: 1.5 !important;
}
.t22{
    font-size: 22px !important;
}
.t24 {
    font-size: 24px !important;
}
.t28 {
    font-size: 28px !important;
}
.t32 {
    font-size: 32px !important;
}
.t44 {
    font-size: 44px !important;
}
@media all and (max-width:1024px) {
    .t22{
    font-size: 20px !important;
    }
    .t24 {
        font-size: 22px !important;
    }
    .t28 {
        font-size: 26px !important;
    }
    .t32 {
    font-size: 30px !important;
}
    .t44 {
        font-size: 42px !important;
    }
}
@media all and (max-width:767px) {
    .t18{
        font-size: 15px !important;
    }
    .t22{
    font-size: 18px !important;
    }
    .t24 {
        font-size: 18px !important;
    }
    .t28 {
        font-size: 24px !important;
    }
    .t32 {
    font-size: 28px !important;
}
    .t44 {
        font-size: 40px !important;
    }
    .mo_t15{
        font-size: 15px !important;
    }
}
.img_wrap .image{
    width: 100%;
    height: 100%;
    overflow: hidden;
}
.img_wrap .image img{
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
/* list */
#list_wrap{
    padding: 80px 0 150px;
    margin: 60px auto 0;
    max-width: 1180px;
    text-align: center;
    overflow: hidden;
}
#list_wrap .container{
    width: 100%;
}
#list_wrap .title{
    text-align: center;
    font-size: var(--size-H7, 36px);
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: -0.72px;
    padding-bottom: 40px;
    border-bottom: 2px solid var(--text-primary, #222);
}
#list_wrap .list_cont{
    margin-top: 80px;
    width: 100%;
    display: grid;
    row-gap: 60px;
    column-gap: 40px;
    align-self: stretch;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-auto-rows: min-content;
}
#list_wrap .vol_txt{
    color: var(--text-primary, #222);
    text-align: center;
    font-size: var(--size-B1, 18px);
    font-weight: 700;
    line-height: 2.33;
    letter-spacing: -0.54px;
}
#list_wrap .thumb .image{
    width: 100%;
}
#list_wrap .thumb .image img{
    width: 100%;
    object-fit: cover;
}
@media all and (max-width:1024px){
    #list_wrap{
        width: 90%;
    }
    #list_wrap .title{
        font-size: 34px;
    }
    #list_wrap .list_cont {
        margin-top: 60px; 
        row-gap: 40px;    
        column-gap: 30px;
        grid-template-columns: repeat(2, minmax(0, 1fr)); 
    }
}
@media screen and (max-width: 767px) {
    #list_wrap .title{
        font-size: 28px;
        padding-bottom: 20px;
    }

}
@media screen and (max-width: 580px) {
    #list_wrap .list_cont {
        grid-template-columns: repeat(1, minmax(0, 1fr)); 
    }
}
/* header */

.container {
    width: 90%;
    max-width: 1100px;
    margin: 0 auto;
}

.pl0 {
    padding-left: 0 !important
}

.pd0 {
    padding: 0 !important
}

.m_auto {
    margin: auto !important;
}

.fs1 {
    font-size: 24px !important
}

.lh1 {
    line-height: 1.2
}

.fwn {
    font-weight: normal !important
}

.fwb {
    font-weight: bold
}

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

.wb2k {
    word-break: keep-all !important;
    word-spacing: -0.08rem
}

.tal {
    text-align: left;
}

.title{
    text-align: center;
    font-size: var(--size-H9, 32px);
    line-height: 1.5;
    letter-spacing: -0.64px;
}

.title sup {
    top: -0.6em;
    font-size: 50%;
    line-height: 0;
    position: relative;
    vertical-align: baseline;
}

.text sup {
    font-size: 75%;
    line-height: 0;
    position: relative;
    vertical-align: baseline;
    top: -0.5em;
}

.caption sup {
    font-size: 65%;
    line-height: 0;
    position: relative;
    vertical-align: baseline;
    top: -0.5em;
}

.description sup {
    font-size: 65%;
    line-height: 0;
    position: relative;
    vertical-align: baseline;
    top: -0.5em;
}

[class*="main_cont"] sup {
    font-size: 65%;
    line-height: 0;
    position: relative;
    vertical-align: baseline;
    top: -0.5em;
}
@media all and (max-width:1024px) {

    .title{
        font-size: 30px;
    }

    /* .sub_visual.s1_1 {
        background-image: url('../images/sub01_01-mo.jpg') !important;
    } */
}

@media all and (max-width:767px) {
    .wbk2 {
        word-break: break-all !important;
        word-spacing: normal !important;
    }
    .title{
        font-size: 28px;
    }
    .sub_contents .info i{
        font-size: 18px !important;
    }
}

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

.ls4 {
    letter-spacing: -0.04em !important
}

.tal {
    text-align: left !important;
}

* {
    -webkit-text-size-adjust: none;
    /*Chrome, Safari, newer versions of Opera*/
    -moz-text-size-adjust: none;
    /*Firefox*/
    -ms-text-size-adjust: none;
    /*Ie*/
    -o-text-size-adjust: none;
    /*old versions of Opera*/
}

#content {
    padding-top: 90px;
    padding-bottom: 0px !important;
}

.sub_contents {
    padding-bottom: 160px !important;
}





.mt60-m {
    margin-top: 0px !important
}

/*wrap할 경우 모바일에서 마진값 좁아보여서 일정하게 하기위한 클래스*/
@media all and (max-width:767px) {
    .sub_contents {
        padding-bottom: 80px !important;
    }

    .mt60-m {
        margin-top: 60px !important
    }
}

.mt10 {
    margin-top: 10px !important;
}

.mt6 {
    margin-top: 6px !important;
}

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

.mt16 {
    margin-top: 16px !important;
}

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

.mt5 {
    margin-top: 5px !important;
}
.mb0{
    margin-bottom: 0 !important;
}
.mb5 {
    margin-bottom: 5px !important;
}

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

.mb16 {
    margin-bottom: 16px !important;
}

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

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

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

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

.pb0 {
    padding-bottom: 0px !important;
}

.pt0 {
    padding-top: 0px !important;
}

.pt6 {
    padding-top: 6px !important;
}

.pt8 {
    padding-top: 8px !important;
}

.pr0 {
    padding-right: 0px !important;
}

.description {
    padding: 15px;
    border: 1px dashed #5f6463;
    line-height: 1.7em;
}

.description li {
    font-size: 14px;
    color: #222 !important;
    text-align: left;
}

@media all and (max-width:767px) {
    .m_mt20 {
        margin-top: 20px !important;
    }
    .sub_contents .info i{
        font-size: 20px;
    }
    .sub_contents .txt_wrap .text{
        font-size: 18px !important;
    }
}


.sub_contents .container .part .info .txt_wrap .text {
    text-align: center !important;
}

.sub_contents .part {
    margin-bottom: 120px;
}

.sub_contents .txt_wrap {
    margin: 30px 0px;
}
.txt_wrap .text {
    font-size: var(--size-H15, 20px);
    font-weight: 400;
    line-height: 2;
    letter-spacing: -0.6px;
    color: #222;
}
.sub_contents .info {
    border-top: 1px solid;
    border-bottom: 1px solid;
}
.sub_contents .info i{
    font-size: 20px;
    line-height: 1.8;
}
.subject_mini {
    line-height: 1.8rem;
    margin-top: 5px;
}
.caption{
    color: var(--Public-666666, #666);
    font-size: var(--size-B1, 16px);
    font-weight: 400;
    line-height: var(--line-height-B3, 30px); /* 166.667% */
    letter-spacing: -0.54px;
}
.caption2{
    color: var(--text-primary, #222);
    text-align: center;
    font-size: var(--size-S1, 16px);
    font-weight: 400;
    line-height: var(--line-height-S2, 24px); /* 150% */
    letter-spacing: -0.32px;
    margin-top: 12px;
}

.s1_1 .info {
    color: #24549C;
    border-color: #24549C
}

.s1_2 .info {
    border-color: #35388A;
    color: #35388A;
}

.s2_1 .info {
    border-color: #4C45BC;
    color: #4C45BC;
}

.s2_2 .info {
    border-color: #4B4B52;
    color: #4B4B52;
}
.s2_3_1 .info {
    border-color: #44844C;
    color: #44844C;
}
.s2_5 .info {
    border-color: #0F8293;
    color: #0F8293;
}
.s2_6 .info {
    border-color: #493F9D;
    color: #493F9D;
}


.img_wrap.line {
    border-top: 1px solid #222;
    width: fit-content;
    margin: 20px auto !important;
}

.img_wrap .caption {
    color: #222 !important;
    line-height: 20px !important;
    margin-top: 10px;
    font-size: 16px;

}
@media all and (max-width:767px) {
    .sub_contents .part{
        margin-bottom: 60px;
    }
    .caption2{
        font-size: 14px;
    }
}

.title2 {
    font-size: 24px;
    font-weight: 700;
    line-height: 28px;
    letter-spacing: -0.4px;
}

.title2 sup {
    top: -0.6em;
    font-size: 50%;
    line-height: 0;
    position: relative;
    vertical-align: baseline;
}
.highlight{
    font-weight: 600;
    background: #DEE6F1;
}
@media all and (max-width:767px) {
    .title2 {
        font-size: 20px;
        line-height: 26px;
    }
}


/* 타이틀 박스(회색 배경 + 라운드) 공용 컴포넌트 - sub_contents 안에서 .box_tit 하나로 통일 */
.sub_contents .box_tit{
    padding: 32px 40px;
    border-radius: 12px;
    background: var(--surface-gray_100, #F7F7F7);
    
}
.sub_contents .box_tit .title{
    font-size: 32px;
    font-weight: 700;
}
@media all and (max-width:1024px) {
    .sub_contents .box_tit{
        padding: 24px;
        margin-bottom: 20px !important;
    }
    .sub_contents .box_tit .title{
        font-size: 28px;
    }
}
@media all and (max-width:767px) {
    .sub_contents .box_tit{
        padding: 20px 16px;
    }
    .sub_contents .box_tit .title{
        font-size: 22px;
        line-height: 1.4;
    }
}



/* 개별 서브 */

/* s1_1 */
.s1_1 .txt_wrap,
.s1_1 .img_wrap{
    margin: 0;
}
.s1_1 .img_wrap .image img{
    overflow: hidden;
    border-radius: 12px;
}
.s1_1 .ccolor{
    color: var(--text-color, #FF782F);
    font-size: 48px !important;
}
.s1_1 .box_tit .title{
    font-weight: 600;
    color: #24549C;
    font-size: 28px;
    line-height: 1.5;
}
.s1_1 .title .q{
    color: var(--text-color, #FF782F);
    font-weight: 600;
    margin-bottom: 12px;
}
.s1_1 .flexs{
    gap: 30px;
    align-items: center;
    justify-content: center;
    
}
.s1_1 .box{
    padding: 20px 28px;
    background: var(--1-1-bg1, #ECF0F6);
    border-radius: var(--Radius-Radius-SS, 12px);
}
.s1_1 i.tar{
    margin-top: 10px;
    text-align: right !important;
    font-size: var(--size-H15, 20px);
    font-weight: 600;
    line-height: var(--size-H6, 40px); /* 200% */
    letter-spacing: -0.6px;
    color: var(--text-primary, #222);
    
}
.s1_1 .flexs .img_wrap{
    flex-shrink: 0;
    max-width: 33px;
}
.s1_1 .txt_wrap.line1{
    padding-bottom: 28px;
    border-bottom: 1px solid var(--border-default, #DCDCDC);
}
@media all and (max-width:1024px) {
    .s1_1 .ccolor{
        font-size: 40px !important;
    }
    .s1_1 .box_tit .title{
        font-size: 26px;
    }
    

}
@media all and (max-width:767px) {
    .s1_1 .box_tit .title{
        font-size: 24px;
    }
    .s1_1 .ccolor{
        font-size: 34px !important;
    }
    .s1_1 i.tar{
        font-size: 18px;
    }
    .s1_1 .box{
        padding: 14px 16px;
        line-height: 1.6 !important;
        margin-bottom: 16px !important;
    }
    .s1_1 .box .fwb{
        line-height: 1.4 !important;
    }
    .s1_1 .title .q{
        margin-bottom: 8px;
    }
    .s1_1 .box_tit .title{
        line-height: 1.4;
    }
}

/* s1-2  */
.s1_2 .caption .bread{
    color: #222;
    font-weight: 700;
}
.s1_2 .caption .subject span{
    color: var(--1-2-point2, #F51414);
}
.s1_2 .caption span.ccolor{
    color: var(--1-2-point1, #35388A);
    font-size: 46px !important;
}
.s1_2 .slideWrap .slide_viewport{
    border-radius: 12px;
}
@media all and (max-width:767px) {
.s1_2 .flexs, .s2_1 .flexs{
    display: flex;
    flex-direction: column;
    gap: 20px;
}
.s1_2 .caption span.ccolor{
    font-size: 34px !important;
}
}
/* s2-1 */
.s2_1 .ccolor{
    color: var(--2-1-point1, #4C45BC);
}

.s2_1 .box_wrap,
.s2_2 .box_wrap{
    display: flex;
    justify-content: center;
    justify-items: center;
}
.s2_1 .box_wrap>div,
.s2_2 .box_wrap>div{
    width: 50%;
    max-height: 427px;
}
.s2_1 .box_wrap .img_wrap .image,
.s2_2 .box_wrap .img_wrap .image{
    height: 100%;
    width: 100%;
    border-radius: var(--Radius-Radius-SS, 12px) 0 0 var(--Radius-Radius-SS, 12px);
    overflow: hidden;
}
.s2_1 .box_wrap .img_wrap.right .image{
    border-radius: 0 var(--Radius-Radius-SS, 12px) var(--Radius-Radius-SS, 12px) 0;
}
.s2_1 .box_wrap .image img,
.s2_2 .box_wrap .image img{
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.s2_1 .box_wrap .txt_wrap,
.s2_2 .box_wrap .txt_wrap{
    border-radius: 0 var(--Radius-Radius-SS, 12px) var(--Radius-Radius-SS, 12px) 0;
    background: var(--surface-gray_300, #F1F1F1);
    padding: 72px 56px 50px ;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.s2_1 .box_wrap .txt_wrap.purple{
    background: var(--2-1-bg1, #D2D1EA);
}

.s2_1 .box_wrap .txt_wrap .title,
.s2_2 .box_wrap .txt_wrap .title{
    text-align: right;
    font-size: 31px;
    font-weight: 700;
}
.s2_1 .box_wrap .text,
.s2_2 .box_wrap .text{
    line-height: 1.6;
}
.s2_1 .box_wrap .txt_wrap .title.indent{
    text-indent: -0.65em; padding-left: 0.65em;
}
.s2_1 .box_wrap .txt_wrap.right{
    border-radius: var(--Radius-Radius-SS, 12px) 0 0 var(--Radius-Radius-SS, 12px);
}
.s2_1 .box_wrap2{
    border-radius: 0 var(--Radius-Radius-SS, 12px) var(--Radius-Radius-SS, 12px) 0;
    background: var(--surface-gray_300, #F1F1F1);
    padding: var(--spacing-Button-H-SSS, 16px) var(--spacing-Button-H-S, 40px) var(--spacing-Button-H-L, 56px) var(--spacing-Button-H-S, 40px);
}
.s2_1 .box_wrap2 .tit_box{
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.s2_1 .box_wrap2 .tit_box .title{
    display: flex;
    justify-items: center;
    align-items: center;
    gap: 10px;
    border-radius: var(--Radius-Radius-SSS, 8px);
    background: var(--2-1-point1, #4C45BC);
    padding: 6px 20px;
    color: var(--text-inverse, #FFF);
    font-size: var(--size-H9, 32px);
    font-weight: 700;
    line-height: 1.5;
    letter-spacing: -0.64px;
    position: relative;
}
.s2_1 .box_wrap2 .tit_box .title:after{
    content: "";
    position: absolute;
    left: 239px; top: 50%;
    width: 295%;
    height: 2px;
    background: var(--2-1-point1, #4C45BC);
}
.s2_1 .box_wrap2 .tit_box .title img{
    width: 36px;
    height: 36px;
}
.s2_1 .box_wrap2 .tit_box .right{
    display: flex;
    justify-content: flex-end;
    align-items: flex-end;
    text-align: right;
    gap: 9px;
}
.s2_1 .box_wrap2 .inner{
    margin: 0;
    padding: 32px;
}

.s2_1 .box_wrap2 .txt_wrap{
    display: flex;
    gap: 10px;
    align-items: start;
}
.s2_1 .box_wrap2 .txt_wrap .num{
    width: 32px;
    height: 32px;
    flex-shrink: 0;
    padding: 0 6px;
    border-radius: 2px;
    background: var(--2-1-point1, #4C45BC);
    color: var(--text-inverse, #FFF);
    text-align: center;
    font-size: var(--size-H13, 24px);
    line-height: 1.3;
    font-weight: 600;
}
.s2_1 .box_wrap2 .txt_wrap p{
    font-size: var(--size-H13, 24px);
    font-weight: 700;
    line-height: var(--line-height-B2, 32px); /* 133.333% */
    letter-spacing: -0.48px;
    margin-bottom: 16px;
}
.s2_1 .box_wrap2 .txt_wrap.pl{
    padding-left: 40px;
}
@media all and (max-width:1024px){
    .s2_1 .box_wrap .txt_wrap .title,
    .s2_2 .box_wrap .txt_wrap .title{
        font-size: 29px;
        margin-bottom: 24px;
    }
    .s2_1 .box_wrap2{
        padding: 20px 28px 40px 28px;
    }
    .s2_1 .box_wrap2 .tit_box .title{
        font-size: 30px;
        padding: 6px 16px;
    }
    .s2_1 .box_wrap2 .tit_box .title:after{
        display: none;
    }
    .s2_1 .box_wrap2 .inner{
        padding: 24px;
    }
    .s2_1 .box_wrap2 .txt_wrap .num{
        font-size: 22px;
    }
    .s2_1 .box_wrap2 .txt_wrap p{
        font-size: 22px;
        line-height: 30px;
    }
}
@media all and (max-width:820px){
    .s2_1 .box_wrap,
    .s2_2 .box_wrap{
        flex-direction: column;
    }
    .s2_1 .box_wrap .img_wrap,
    .s2_1 .box_wrap .image,
    .s2_2 .box_wrap .img_wrap,
    .s2_2 .box_wrap .image{
        order: 1;
        width: 100%;
        min-width: 0;
        max-height: none;
        border-radius: 12px 12px 0 0 !important;
        object-fit: cover;
    }
    .s2_1 .box_wrap .img_wrap.right .image{
        border-radius: 12px 12px 0 0 !important;
    }
    .s2_1 .box_wrap .txt_wrap,
    .s2_2 .box_wrap .txt_wrap{
        order: 2;
        width: 100%;
        max-height: none;
        padding: 24px 20px;
        border-radius: 0 0 var(--Radius-Radius-SS, 12px) var(--Radius-Radius-SS, 12px);
    }
    .s2_1 .box_wrap .txt_wrap.right{
        border-radius: 0 0 12px 12px;
    }
    .s2_1 .box_wrap .txt_wrap .title,
    .s2_2 .box_wrap .txt_wrap .title{
        font-size: 27px;
        margin-bottom: 16px;
    }
}
@media all and (max-width:767px){
    .s2_1 .box_wrap2{
        padding: 20px 20px 28px 20px;
    }
    .s2_1 .box_wrap2 .tit_box{
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }
    .s2_1 .box_wrap2 .tit_box .title{
        font-size: 24px;
        padding: 6px 14px;
    }
    .s2_1 .box_wrap2 .tit_box .title img{
        width: 30px;
        height: 30px;
    }
    .s2_1 .box_wrap2 .tit_box .title:after{
        display: none;
    }
    .s2_1 .box_wrap2 .tit_box .right{
        align-self: flex-end;
        text-align: right;
    }
    .s2_1 .box_wrap2 .inner{
        padding: 16px;
    }
    .s2_1 .box_wrap2 .txt_wrap{
        gap: 8px;
    }
    .s2_1 .box_wrap2 .txt_wrap .num{
        font-size: 20px;
    }
    .s2_1 .box_wrap2 .txt_wrap p{
        font-size: 20px;
        line-height: 28px;
    }
    .s2_1 .box_wrap .txt_wrap .title,
    .s2_2 .box_wrap .txt_wrap .title{
        font-size: 24px;
    }
    .s2_1 .box_wrap .txt_wrap .title,
    .s2_2 .box_wrap .txt_wrap .title{
        font-size: 22px;
        line-height: 1.4;
    }
    .s2_1 .box_wrap .text, .s2_2 .box_wrap .text{
        font-size: 15px !important;
        line-height: 1.5;
    }
    .s2_1 .box_wrap2 .txt_wrap.pl{
    padding-left: 0px;
    }
}
/* s2-2 */
.s2_2 .ccolor{
    color: var(--2-2-primary, #DF4E35);
}
.s2_2 .box2{
    padding: 28px 40px;
    border: 1.5px solid var(--2-2-primary, #DF4E35);
    background: var(--surface-gray_100, #F7F7F7);
}
@media all and (max-width:1024px){
    .s2_2 .box2{
        padding: 24px;
    }
}
@media all and (max-width:767px){
    .s2_2 .box2{
        padding: 20px 16px;
    }
}
/* s2-3 */
.s2_3.sub_main .box .ccolor{
    color: var(--2-3-point1, #44844C);
}
.s2_3.sub_main .box:hover{
    background: var(--2-3-bg1, #ECF4ED);
}
/* s2-3_1 */
.s2_3_1 .ccolor{
    color: var(--2-3-point1, #44844C);
    
}
.s2_3_1 .box{
    padding: 20px 28px;
    border-radius: var(--Radius-Radius-SS, 12px);
    background: var(--2-3-bg1, #ECF4ED);
}
.s2_3_1 .box2{
    padding: 12px 16px;
    border-radius: var(--Radius-Radius-SS, 12px);
    background: var(--border-subtle, #EFEFEF);
}
.s2_3_1 .box2.ver2{
    border: 1.5px solid var(--2-3-point1, #44844C);
    background: var(--surface-gray_100, #F7F7F7);
    border-radius: 0;
}
.s2_3_1 .part .back{
    border: 1px solid var(--2-3-point1, #44844C);
    color: var(--2-3-point1, #44844C);
}
.s2_3_1 .part .back:hover{
    background: var(--2-3-bg1, #ECF4ED);
}
.s2_3_1 .part .back:active{
    background: #DDE9DE;
}
@media all and (max-width:1024px) {
    .s2_3_1 .box{
        padding: 18px 20px;
    }
}
/* s2-3-2 */
.s2_3_2 .ccolor{
    color: var(--2-3-point2, #C95748);
}
.s2_3_2 .ccolor2{
    color: var(--2-3-point3, #AF7D5B);
}
.s2_3_2 .ccolor3{
    color: var(--text-secondary, #4A4A4A);
}
.s2_3_2 .table_wrap .text .mark_row{
    display: flex;
    align-items: flex-start;
    gap: 6px;
}
.s2_3_2 .table_wrap .text .mark_row.col{
    flex-direction: column;
}
.s2_3_2 .table_wrap .text .mark_row.col > li{
    display: flex;
    align-items: flex-start;
    gap: 6px;
    list-style: none;
}
.s2_3_2 .table_wrap .text .mark_row .mark{
    flex-shrink: 0;
}
.s2_3_2 .table_wrap .text .mark_row .txt{
    flex: 1;
    min-width: 0;
}
.s2_3_2 .mark_row{
    display: flex;
    align-items: flex-start;
    gap: 6px;
}
.text .indent{
    padding-left: 1em;
    text-indent: -1em;
}
.text.lh16{
    line-height: 1.6;
}
.s2_3_2 .bg{
    background: var(--surface-gray_50, #F8F8F8);
    padding-top: 90px;
    padding-bottom: 160px;
}
.s2_3_2 .box_tit2{
    text-align: left !important;
}
.s2_3_2 .box_tit.ver2{
    background: var(--surface-background, #FFF);
}
.s2_3_2 .box_tit2 .title2{
    font-size: 72px;
    font-weight: 800;
    line-height: 1.25;
    letter-spacing: -3.6px;
}
.t36{
    font-size: 36px;
    line-height: 1.33;
}
.s2_3_2 .box_tit2 .t36{
    color: var(--text-secondary, #4A4A4A);
    margin-bottom: 14px;
}
.flexs.aib{
    align-items: flex-end;
    align-items: center;
}
.s2_3_2 .bg .flexs.aib .img_wrap{
    flex-shrink: 0;
    width: 50%;
}
.s2_3_2 .bg .flexs.aib .txt_wrap{
    flex: 1;
    min-width: 0;
}
.s2_3_2 .table_wrap .text{
    line-height: 1.4 !important;
}
.s2_3_2 .table_wrap th{
    background: var(--2-3-point3, #AF7D5B);
    padding: 20px 16px;
    vertical-align: middle;
}
.s2_3_2 thead tr:first-child th {
    border-bottom: 1px solid #FFF !important; 
}
.s2_3_2 .table_wrap td{
    padding: 20px 16px;
    border-left: 1px solid var(--text-999999, #999);
    border-right: 1px solid var(--text-999999, #999);
    border-bottom: 1px solid var(--text-999999, #999);
    background: var(--surface-background, #FFF);
}
.s2_3_2 .table_wrap {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}
.s2_3_2 .table_wrap.mw0 table{
    min-width: 0;
}
.s2_3_2 .table_wrap table {
    min-width: 665px;      
    width: 100%;          
    table-layout: fixed;   
    border-collapse: collapse;
}
.s2_3_2 .part .back{
    border: 1px solid var(--2-3-point3, #AF7D5B);
    color: var(--2-3-point3, #AF7D5B);
}
.s2_3_2 .part .back:hover{
    background: #F3E8E1;
}
.s2_3_2 .part .back:active{
    background: #E6D9D1;
}
@media all and (max-width:1024px){
    .s2_3_2 .box_tit2 .title2{
        font-size: 60px;
    }
    .t36{
        font-size: 34px;
    }
    .s2_3_2 .table_wrap th,
    .s2_3_2 .table_wrap td{
        padding: 10px 8px;
    }
    .s2_3_2 .bg{
        padding-top: 60px;
    }
}
@media all and (max-width:767px){
    .s2_3_2 .box_tit2 .title2{
        font-size: 48px;
    }
    .t36{
        font-size: 28px;
    }
    .s2_3_2 .bg{
        padding-top: 45px;
    }
    .s2_3_2 .bg .flexs.aib .img_wrap{
        flex-shrink: 0;
        width: 100%;
    }
    .s2_3_2 .table_wrap th,
    .s2_3_2 .table_wrap td{
        padding: 8px 10px;
        font-size: 14px;
    }
    .sub_main .box .text{
        overflow: hidden;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
    }

}


/* s2-4 */
.s2_4 .img_wrap,
.s2_4 .txt_wrap{
    margin: 0;
}
.sub_main .box{
    display: block;
    padding: 32px 40px;
    border-radius: 12px;
    background: var(--surface-gray_100, #F7F7F7);
    transition: all .4s;
}
.sub_main .box:hover{
    background: var(--2-5-bg1, #EAF1F2);
}
.sub_main .box .flexs{
    align-items: center;
    gap: 40px;
}
.sub_main .box .flexs>div{
    flex: 1;
}
.sub_main .box .ccolor{
    color: var(--2-5-point1, #0F8293);
    font-size: var(--size-H11, 28px);
    font-weight: 700;
    line-height: var(--line-height-H11, 38px); /* 135.714% */
    letter-spacing: -0.56px;
}

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

    .sub_main .box {
        padding: 24px 28px;
    }
    .sub_main .box .flexs {
        display: flex;
        gap: 28px;
    }
    .sub_main .box .ccolor {
        font-size: 26px;
    }
}
@media all and (max-width:767px) {
    .s2_4 .container {
        padding-top: 40px !important;
    }
    .sub_main .box {
        padding: 20px;
        padding-bottom: 28px;
    }
    .sub_main .box .flexs {
        flex-direction: column;
        gap: 20px;
    }
    .sub_main .box .flexs > div {
        width: 100%;
    }
    .sub_main .box .ccolor {
        font-size: 24px !important;
    }
}

/* s2-5 */
.s2_5 .ccolor{
    color: var(--2-5-point1, #0F8293);
}
.s2_5 .title2,
.s2_6 .title2{
    font-size: var(--size-H13, 24px);
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: -0.48px;
}
.table_wrap {
    width: 100%;
    display: block; 
}
.table_wrap .text{
    line-height: 1.8 !important;
}
.table_wrap table {
    width: 100%;
    table-layout: fixed; 
}
.table_wrap thead th{
    padding: 6px 20px;
    border-right: 1px solid var(--surface-background, #FFF);
    background: var(--2-5-point1, #0F8293);
    color: var(--text-inverse, #FFF);
    text-align: center;
    font-size: var(--size-H15, 20px);
    font-weight: 600;
    line-height: 1.4;
    letter-spacing: -0.4px;
}
table tbody td {
    vertical-align: top; 
    padding: 16px 20px; 
}
table tbody tr{
    border-bottom: 1px solid var(--border-default, #DCDCDC);
}
table tbody td p:first-child,
table tbody td div:first-child {
    margin-top: 0;       
}
.s2_5 .table_wrap .img_wrap{
    max-width: 190px;
}
.part .back{
    display: inline-block;
    border-radius: var(--Radius-Radius-Full, 999px);
    border: 1px solid var(--2-5-point1, #0F8293);
    background: var(--surface-background, #FFF);
    padding: 5px 28px;
    color: var(--2-5-point1, #0F8293);
    font-size: var(--size-S1, 16px);
    line-height: var(--line-height-S1, 26px); /* 162.5% */
    letter-spacing: -0.32px;
    transition: all .3s;
}
.part .back:hover{
    background: var(--2-4-bg1, #EAF1F2);
}
.part .back:active{
    background: #DAE8EA;
}
/* s2-6 */
.s2_6 .ccolor{
    color: var(--2-5-point1, #493F9D);
}
.s2_6 .table_wrap thead th{
    border: 1px solid var(--text-999999, #999);
    background: var(--2-6-point2, #F4D379);
    color: var(--text-primary, #222);

}
.s2_6 .table_wrap .bg{
    border-right: 1px solid var(--text-999999, #999);
    border-bottom: 1px solid var(--text-999999, #999);
    border-left: 1px solid var(--text-999999, #999);
    background: var(--2-6-point2, #F4D379);
}
.s2_6 .table_wrap .text{
    border-right: 1px solid var(--text-999999, #999);
    border-bottom: 1px solid var(--text-999999, #999);
    line-height: 1.4 !important;
}
.s2_6 .table_wrap thead th, table tbody td{
    padding: 10px 20px;
}

.s2_6 .w565{
    max-width: 565px;
    text-align: left !important;
    margin: 0;
}
.table_wrap td{
    vertical-align: middle !important;
}
.table_wrap td[rowspan] {
    vertical-align: middle !important;
}
.s2_6 .part .back{
    border: 1px solid var(--2-6-point1, #493F9D);
    color: var(--2-6-point1, #493F9D);
}
.s2_6 .part .back:hover{
    background: var(--2-6-bg2, #E8E7F6);
}
.s2_6 .part .back:active{
    background: var(--2-6-bg3, #CFCDE3);
}
@media all and (max-width:1024px) {
    .s2_5 .title2,
    .s2_6 .title2{
        font-size: 22px;
    }
}
@media all and (max-width:767px) {
    table tbody td{
        padding: 8px 10px;
    }
    .table_wrap thead th{
        padding: 8px;
    }

    /* s2-5 표: 구분/내용을 세로로 나열, 라벨은 배경색을 가진 셀로 표시 */
    .s2_5 .table_wrap table,
    .s2_5 .table_wrap thead,
    .s2_5 .table_wrap tbody,
    .s2_5 .table_wrap tr,
    .s2_5 .table_wrap th,
    .s2_5 .table_wrap td {
        display: block;
        width: 100%;
    }
    .s2_5 .table_wrap thead {
        display: none;
    }
    .s2_5 .table_wrap tbody tr {
        border: 1px solid var(--border-default, #DCDCDC);
        margin-bottom: 24px;
    }
    .s2_5 .table_wrap tbody tr:last-child {
        margin-bottom: 0;
    }
    .s2_5 .table_wrap tbody td {
        display: flex;
        align-items: stretch;
        padding: 0 !important;
        border: none !important;
    }
    .s2_5 .table_wrap tbody td::before {
        content: '구분';
        flex: 0 0 56px;
        display: flex;
        align-items: center;
        justify-content: center;
        text-align: center;
        background: var(--2-5-point1, #0F8293);
        color: #FFF;
        font-size: 15px;
        font-weight: 700;
        border-bottom: 1px solid var(--border-default, #DCDCDC);
        
    }
    .s2_5 .table_wrap tbody td:nth-child(2)::before {
        content: '내용';
    }
    .s2_5 .table_wrap tbody td > .img_wrap,
    .s2_5 .table_wrap tbody td > .cell_content {
        flex: 1;
        min-width: 0;
        padding: 16px 20px;
    }
    .s2_5 .table_wrap .img_wrap{
        max-width: 230px;
        margin: 0;
    }
}
/*s3-1 */
.s3_1 .container{
    padding-top: 80px !important;
}
.s3_1 .ccolor{ 
    color: var(--3-1-primary, #226FC2);
}
.s3_1 .title2{
    font-size: 24px;
    position: relative;
    line-height: 1.33;
}
.s3_1 .title2.ccolor:after{
    content: '';
    position: absolute;
    right: 0; top: 50%;
    width: 89%; height: 1px;
    background: #226FC2;
}
.s3_1 .flexs.wrap{
    justify-content: space-between;
    flex-wrap: wrap;
}
.s3_1 a.box{
    display: flex;
    flex-direction: column;
    width: calc(50% - 14px);
    box-sizing: border-box;
    padding: 24px 28px;
    border-radius: var(--Radius-Radius-SS, 12px);
    background: var(--surface-gray_100, #F7F7F7);
    transition: all 0.2s ease-out;
}
.s3_1 a.box.width100{width: 100%;}
.s3_1 a.box .category{
    padding: 4px 13px;
    border-radius: var(--Radius-Radius-Full, 999px);
    background: var(--3-1-bg, #E9F0F8);
    font-size: 16px;
    line-height: 1.6;
    width: fit-content;
    margin-bottom: 10px;
}
.s3_1 .box .title2,.s3_1 a.box .flexs img{
    transition: all .4s;
}
.s3_1 a.box .text{
    flex-grow: 1;
    margin-top: 10px;
    font-size: var(--size-B1, 18px);
    line-height: 1.5;
    letter-spacing: -0.54px;
}
.s3_1 a.box .caption2{
    color: var(--text-secondary, #4A4A4A);
}
.s3_1 a.box .flexs{
    margin-top: auto;
    justify-content: space-between;
    align-items: center;
    margin-top: 16px;
    gap: auto;
}
.s3_1 .box:hover .title2{
    color: var(--3-1-secondary, #295E98);
}
.s3_1 .box:hover .flexs img{
    filter: brightness(0.95);
}
.s3_1 .box:active{
    transform: scale(0.97);
}

@media all and (max-width: 1024px){
.s3_1 .title2{
    font-size: 22px;
}
.s3_1 .title2.ccolor:after{
    width: 83%;
}
.s3_1 a.box{
    padding: 20px;
}
.s3_1 a.box .caption2{
    display: flex;
    flex-direction: column;
    align-items: start;
    gap: 13px;
}
.s3_1 a.box .caption2 img{
    align-self: flex-end;
}
}
@media all and (max-width: 767px){
.s3_1 a.box{
    width: 100%;
    margin-bottom: 16px;
}
.s3_1 a.box .caption2{
    font-size: 14px;
}
.s3_1 .title2.ccolor:after{
    display: none;
}
}
/*s3-2 */
.s3_2 .ccolor{
    color: var(--3-2-secondary, #CCF7FF);
}
.s3_2 .ccolor2{
    color: var(--3-2-tertiary, #4B74A0);
}
.s3_2 .color_box{
    padding: var(--spacing-Button-H-L, 56px) 40px;
}
.color_box.bl{
    background: var(--3-2-primary, #5F86B5);
    color: var(--text-inverse, #FFF);
    gap: 56px;
    border-radius: var(--Radius-Radius-SS, 12px) 0 0 0;
}
.color_box.bl .text{
    color: var(--text-inverse, #FFF) !important;
    line-height: 1.6;
}
.color_box.bl .title{
    font-size: 48px;
    line-height: 1.33;
}
.color_box.bl .title b{
    font-size: 62px !important;
}
.s3_2 .color_flexs > .img_wrap{
    padding: 0;
    border-radius: 0 var(--Radius-Radius-SS, 12px) 0 0;
}
.s3_2 .color_flexs > .img_wrap .image{
    width: 100%;
    height: auto;
    border-radius: 0;
}
.s3_2 .color_flexs > .img_wrap .caption{
    padding: 0 10px;
}
.s3_2 .color_flexs > .img_wrap .text{
    padding: 0 40px;
}
.s3_2 .color_flexs > .img_wrap.pt56{
    padding-top: 56px;
}
.s3_2 .round .color_box.bl{
    border-radius: var(--Radius-Radius-SS, 12px) 0 0 var(--Radius-Radius-SS, 12px);
}
.s3_2 .round .color_flexs > .img_wrap{
    border-radius: 0 var(--Radius-Radius-SS, 12px) var(--Radius-Radius-SS, 12px) 0;
}
.s3_2 .round2 .color_box.bl{
    border-radius: var(--Radius-Radius-SS, 12px);
}
.s3_2 .round2 .color_box.bl .text{
    line-height: 2;
}
@media all and (max-width: 1024px){
    .color_box.bl .title{
        font-size: 40px;
    }
    .color_box.bl .title b{
        font-size: 54px !important;
    }
    .s3_2 .color_flexs > .img_wrap.pt56{
        padding-bottom: 56px;
    }
}
@media all and (max-width: 768px){
    .s3_2 .round .color_box.bl{
        border-radius: 12px 12px 0 0;
    }
        .s3_2 .round .color_flexs > .img_wrap,
    .s3_2 .color_flexs > .img_wrap{
        border-radius: 0 0 12px 12px;
    }
    .s3_2 .color_box{
        padding: 48px 24px;
        border-radius: 12px 12px 0 0;
    }
}
@media all and (max-width: 767px){
    

    .color_box.bl{
        gap: 28px;
    }
    .color_box.bl .title{
        font-size: 34px;
    }
    .color_box.bl .title b{
        font-size: 45px !important;
    }
    .s3_2 .color_flexs > .img_wrap .text{
        padding: 28px 24px;
    }
    .s3_2 .color_flexs > .img_wrap {
        align-items: center;
        
    }
}
/* s4-1 */
.sub_main.s4_1 .ccolor{
    color: var(--4-2-primary, #984EA6);
}
.s4_1 .flexs.wrap{
    flex-wrap: wrap;
}
.sub_main.s4_1 .box{
    width: calc(50% - 14px);
    padding: 32px 40px;
    border-radius: 12px;
    background: var(--surface-gray_100, #F7F7F7);
    display: flex;
    flex-direction: column;
    gap: 28px;
}
@media all and (max-width: 1024px){
.sub_main.s4_1 .box {
        padding: 24px 28px;
    }
}
@media all and (max-width: 767px){
.sub_main.s4_1 .box{
    width: 100%;
    padding: 20px;
}
}

/* s4_1_1,2 */
.flexs.gap0{
    gap: 0;
}
.color_box{
    padding: var(--spacing-section_gap, 120px) 40px;
    border-radius: var(--Radius-Radius-SS, 12px) 0 0 var(--Radius-Radius-SS, 12px);
    background: var(--4-2-secondary, #8E5499);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    color: var(--text-inverse, #FFF);
    flex: 1 0 0;
}
.color_box .text{
    color: var(--text-inverse, #FFF);
}
.s4_1_2 .color_box .text{
    color: var(--text-inverse, #222);
    
}
.color_box .title{
    font-size: var(--size-H1, 72px);
    font-weight: 400;
    line-height: 1.25;
    letter-spacing: -3.6px;
    text-align: left;
}
.color_box .t44{
    margin-bottom: 56px;
}
.color_flexs > .img_wrap{
    display: flex;
    padding: 40px;
    padding-bottom: 56px;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-Button-H-L, 56px);
    flex: 1 0 0;
    border-radius: 0 var(--Radius-Radius-SS, 12px) var(--Radius-Radius-SS, 12px) 0;
    background: var(--surface-gray_200, #F3F3F3);
}
.s4_1_1 .txt_wrap .text,
.s4_1_2 .txt_wrap .text{
    line-height: var(--line-height-B2, 32px);
    
}
.color_box.ver2{
    border-radius: 0 var(--Radius-Radius-SS, 12px) var(--Radius-Radius-SS, 12px) 0;
}
.color_box.ver2 .t44{
    line-height: 1.3;
}
.color_flexs > .img_wrap.ver2{
    border-radius: var(--Radius-Radius-SS, 12px) 0 0 var(--Radius-Radius-SS, 12px);;
}
.color_flexs > .img_wrap .image{
    border-radius: 12px;
    overflow: hidden;
    height: 256px;
}
.color_box.yel{
    background: var(--4-2-4-2-2, #EEC600);
    color: var(--text-primary, #222);
}
.s4_1_1 .part .back{
    border: 1px solid var(--4-2-primary, #984EA6);
    color: var(--4-2-primary, #984EA6);
}
.s4_1_1 .part .back:hover{
    background: var(--4-2-1_bg1, #F6EAF8);
}
.s4_1_1 .part .back:active{
    background: var(--4-2-1_bg2, #E8D5EC);
}
.s4_1_2 .part .back{
    border: 1px solid var(--text-primary, #222);
    color: var(--text-primary, #222);
}
.s4_1_2 .part .back:hover{
    background: var(--surface-gray_100, #F7F7F7);
}
.s4_1_2 .part .back:active{
    background: var(--surface-gray_300, #F1F1F1);
}
@media all and (max-width:1024px) {
    .color_box {
        padding: 80px 32px;
    }
    .color_box .title {
        font-size: 60px;
        letter-spacing: -3px;
    }
    .color_box .t44 {
        margin-bottom: 40px;
    }
    .color_flexs > .img_wrap {
        padding: 32px;
        padding-bottom: 40px;
        gap: 40px;
    }
}
@media all and (max-width:768px) {
    .color_flexs {
        flex-direction: column;
    }
    .color_box,
    .color_flexs > .img_wrap {
        /* 세로 스택 전환 시 flex-basis:0 + overflow:hidden 조합으로 높이가 0에 수렴해
           내용이 잘리는 것을 방지 (컨텐츠 높이만큼만 차지하도록 flex-grow 해제) */
        flex: none;
    }
    .color_box {
        padding: 48px 24px;
        border-radius: var(--Radius-Radius-SS, 12px) var(--Radius-Radius-SS, 12px) 0 0;
        gap: 28px;
    }
    .color_box.ver2 {
        border-radius: 0 0 var(--Radius-Radius-SS, 12px) var(--Radius-Radius-SS, 12px);
    }
    .color_box .title {
        font-size: 48px;
        letter-spacing: -2.4px;
    }

    .color_flexs > .img_wrap {
        padding: 24px;
        padding-bottom: 28px;
        gap: 28px;
        border-radius: 0 0 var(--Radius-Radius-SS, 12px) var(--Radius-Radius-SS, 12px);
    }
    .color_flexs > .img_wrap.ver2 {
        border-radius: var(--Radius-Radius-SS, 12px) var(--Radius-Radius-SS, 12px) 0 0;
    }
}


/* s4_1_3 */
.s4_1_3 .part.bg{
    /* background-size는 cover로 고정 — part의 실제 높이(패딩+콘텐츠)가
       반응형/컨텐츠 길이에 따라 달라져도 배경이 항상 전체를 덮도록 보장 */
    background: url(../images/sub/s4_1_3_bg.png) center / cover no-repeat;
    padding: 430px 100px 150px 100px;
}
.s4_1_3 .t24{
    color: #DC5A5D;
    font-weight: 700 !important;
    margin-bottom: 6px;
    line-height: 1.3;
}
.s4_1_3 .text{
    line-height: 32px !important;
}
.s4_1_3 .wrap{
    margin-bottom: 40px;
}
.s4_1_3 .wrap .text:nth-child(2){
    padding-left: 15px;
    text-indent: -5px;
}
.s4_1_3 .mid{
    color: #419652;
    text-align: center;
    font-size: var(--size-H11, 28px);
    font-weight: 700;
    line-height: var(--line-height-H11, 38px); /* 135.714% */
    letter-spacing: -0.56px;
    margin: 48px 0;
}
.s4_1_3 .mid .big{
    color: var(--4-2-4-2-3-1, #1C69CC);
    font-size: var(--size-H5, 44px);
    font-weight: 600;
    line-height: var(--line-height-H5, 58px); /* 131.818% */
    letter-spacing: -0.88px;
}
.s4_1_3 .part .back{
    border: 1px solid #DC5A5D;
    color: #DC5A5D;
}
.s4_1_3 .part .back:hover{
    background: var(--4-2-3_bg1, #FBEEEE);
}
.s4_1_3 .part .back:active{
    background: var(--4-2-3_bg2, #F3DEDE);
}
@media all and (max-width:1024px) {
    .s4_1_3 .part.bg{
        padding: 300px 60px 110px 60px;
    }
    .s4_1_3 .text{
        line-height: 28px !important;
    }
    .s4_1_3 .wrap{
        margin-bottom: 30px;
    }
    .s4_1_3 .mid{
        font-size: 24px;
        line-height: 32px;
        margin: 36px 0;
    }
    .s4_1_3 .mid .big{
        font-size: 36px;
        line-height: 46px;
    }
}
@media all and (max-width:767px) {
    .s4_1_3 .part.bg{
        padding: 300px 24px 70px 24px;
    }
    .s4_1_3 .text{
        line-height: 26px !important;
    }
    .s4_1_3 .wrap{
        margin-bottom: 24px;
    }
    .s4_1_3 .mid{
        font-size: 20px;
        line-height: 28px;
        margin: 28px 0;
    }
    .s4_1_3 .mid .big{
        font-size: 28px;
        line-height: 36px;
    }
    .s4_1_3 .wrap .text:nth-child(2){
    padding-left: 10px;
}
}
@media all and (max-width:520px) {
    .s4_1_3 .part.bg{
        /* 이미지 전체가 보이면서(비율 왜곡 감수) part 영역도 빈틈없이 덮도록
           가로/세로 각각 100%로 강제 — cover처럼 잘리지도, contain처럼 여백이 남지도 않음 */
        background-size: 150% 100%;
        padding: 350px 24px 70px 24px;
    }
}


/* s4_1_4 */
.s4_1_4 .ccolor{
    color: var(--4-2-primary, #984EA6);
}
.s4_1_4  .bg{
    padding: 50px 60px;
    border-radius: 24px;
    background: var(--surface-gray_100, #F7F7F7);
}
.s4_1_4 .t24{
    border-bottom: 1px solid var(--4-2-primary, #984EA6);
    margin-bottom: 20px;
}
.s4_1_4 table tbody tr{
    border-bottom: none;
}
.s4_1_4 table tbody td{
    padding: 5px 0;
}
.s4_1_4 .indent{
    padding-left: 0.625em;
    text-indent: -0.625em;
}
.s4_1_4 .part .back{
    color: var(--4-2-primary, #984EA6);
    border: 1px solid var(--4-2-primary, #984EA6) ;
}
.s4_1_4 .part .back:hover{
    background: var(--4-2-4_bg1, #EEE8F6);
}
.s4_1_4 .part .back:active{
    background: var(--4-2-4_bg2, #D7CBE8);
}
@media all and (max-width:1024px){
    .s4_1_4  .bg{
        padding: 25px 30px;
    }
    .s4_1_4  table colgroup col:nth-child(1) { width: 25% !important; } 
    .s4_1_4  table colgroup col:nth-child(2) { width: 15% !important; } 
    .s4_1_4  table colgroup col:nth-child(3) { width: 60% !important; } 
}
@media all and (max-width:767px){
    .s4_1_4  .bg{
        padding: 20px 25px;
    }
.s4_1_4 .table_wrap {
    max-width: 472px;
    width: 100%;           
    overflow-x: auto;      
    -webkit-overflow-scrolling: touch; 
}

.s4_1_4 .table_wrap table {
    min-width: 600px;     
    width: 100%;
    table-layout: fixed;   
}

/* 3. 🌟 텍스트 줄바꿈 방지 */
.s4_1_4 .table_wrap td {
    white-space: nowrap;   
}
}

/* s4_2 */
.color_box.brown{
    background: var(--4-1-primary, #C7A790);
    color: var(--text-primary, #222);
}
.s4_2 .ccolor{
    color: var(--4-1-secondary, #946848);
}
/* s4_2 img_wrap.ver2는 캡션 없는 사진 1장짜리 변형 — .color_flexs 공통 셸 위에 이 장만 채워지도록 보강 */
.s4_2 .img_wrap.ver2>div{
    flex: 1;
    align-self: stretch;
}
.s4_2 .img_wrap.ver2 .image{
    width: 100%;
    height: 100%;
    overflow: hidden;
}
.s4_2 .img_wrap.ver2 .image img{
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.s4_2 .color_box .img_wrap .image img{
    display: block;
    width: 100%;
    height: auto;
}
.s4_2 .width470{
    width: 100%;
    max-width: 470px;
    margin: 0 auto;
}
.s4_2 .width470 .image{
    width: 100%;
    height: auto;
}
.s4_2 .caption{
    font-size: 16px;
}
.s4_2 .color_flexs > .img_wrap.ver2 {
    padding: 0;
    background: none;
}
.s4_2 .color_flexs > .img_wrap.ver2 .image{
    border-radius: 12px 0 0 12px !important;
}

.s4_2 .box{
    padding: 20px 28px; 
    border-radius: var(--Radius-Radius-SS, 12px);
    background: var(--4-1-bg1, #F4ECE6);
    margin-top: 20px;
}
.s4_2 .table_wrap thead th{
    background: #B18E75;
    border-bottom: 1px solid var(--text-inverse, #FFF);
}
.s4_2 .table_wrap tbody td{
    border-right: 1px solid var(--text-999999, #999);
    border-right: 1px solid var(--text-999999, #999);
border-bottom: 1px solid var(--text-999999, #999);
line-height: 1.4 !important;
}
.s4_2 .table_wrap tbody td.bg{
    border-bottom: 1px solid var(--text-inverse, #FFF);
background: #B18E75;
color: var(--text-inverse, #FFF);
}
.s4_2 .box2{
    border: 1.5px solid var(--4-1-secondary, #946848);
    background: var(--surface-gray_100, #F7F7F7);
    padding: 28px 0;
}
@media all and (max-width:768px){
    .s4_2 .color_flexs > .img_wrap.ver2 .image{
    border-radius: 12px 12px 0 0 !important;
}
}
@media all and (max-width:767px){
    .s4_2 .box{
        padding: 10px 14px;
    }
}
/* s4_3 */
.sub_contents.s4_3 .box_tit{
    width: 100%;
}
.s4_3 .title{
    font-weight: 400;
}
.s4_3 .ccolor{
    color: var(--4-3-primary, #DA741B);
}
.s4_3 .txt_wrap.flexs{
    align-items: center;
    gap: 20px;
}
.s4_3 .t24{
    line-height: 1.33 !important;
}
.s4_3 span.line_4_3{
    display: inline-block;
    flex-grow: 1;
    background: #DA741B;
    height: 1px;
    vertical-align: middle;
}
/* 포스터 PPT 스타일 슬라이드 뷰어 (인라인) */
.poster_viewer {
    position: relative;
    display: flex;
    width: 100%;
    height: 1000px;
    background: #f7f7f7;
    border-radius: 12px;
    overflow: hidden;
}
.poster_viewer .viewer_thumb_panel {
    flex-shrink: 0;
    width: 140px;
    padding: 16px ;
    background: #f7f7f7;
    border-right: 1px solid var(--border-default_SB, #CCC);
    overflow-y: auto;
}
.poster_viewer .viewer_thumb_panel::-webkit-scrollbar {
    width: 3px;  
}
.poster_viewer .viewer_thumb_panel::-webkit-scrollbar-track {
    background: transparent;
}
.poster_viewer .viewer_thumb_panel::-webkit-scrollbar-thumb {
    background: #666;
    border-radius: 3px;
}
.poster_viewer .viewer_thumb_list {
    display: flex;
    flex-direction: column;
    gap: 14px;
    align-items: start;
}
.poster_viewer .viewer_thumb_item {
    cursor: pointer;
    display: flex;
    gap: 6px;
    flex-direction: row-reverse;
}
.poster_viewer .viewer_thumb_item .thumb_img_wrap {
    width: 80px;
    overflow: hidden;
    border-radius: 6px;
    border: 2px solid transparent;
    background: #f2f2f2;
}
.poster_viewer .viewer_thumb_item .thumb_img_wrap img {
    display: block;
    width: 100%;
    height: auto;
}
.poster_viewer .viewer_thumb_item .thumb_num {
    margin-top: 6px;
    text-align: center;
    font-size: 14px;
    color: #666;
}
.poster_viewer .viewer_thumb_item:hover .thumb_img_wrap {
    border-color: #E9B98C;
}
.poster_viewer .viewer_thumb_item.active .thumb_img_wrap {
    border-color: #DA741B;
    border-width: 3px;
}
.poster_viewer .viewer_thumb_item.active .thumb_num {
    color: #DA741B;
    font-weight: 700;
}
.poster_viewer .viewer_main {
    position: relative;
    flex: 1;
    min-width: 0;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px 100px;
}
.poster_viewer .viewer_img_wrap {
    max-width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: grab;
    touch-action: pan-y;
}
.poster_viewer .viewer_img_wrap.dragging {
    cursor: grabbing;
}
.poster_viewer .viewer_img {
    display: block;
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
    -webkit-user-drag: none;
    user-select: none;
}
.poster_viewer .viewer_arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 48px;
    height: 48px;
    padding: 0;
    border: none;
    background-color: transparent;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    cursor: pointer;
    flex-shrink: 0;
    transition: filter .4s;
}
.poster_viewer .viewer_arrow:hover {
    filter: saturate(1.5);
}
.poster_viewer .viewer_arrow:active {
    filter: brightness(0.9) saturate(2);
}

.poster_viewer .viewer_arrow.prev {
    left: 10%;
    background-image: url('../images/sub/slide_prev.png');
}
.poster_viewer.m_long .viewer_arrow.prev{
    left: 20%;
}
.poster_viewer.m_long .viewer_arrow.next{
    right: 20%;
}
.poster_viewer .viewer_arrow.next {
    right: 10%;
    background-image: url('../images/sub/slide_next.png');
}
.poster_viewer .viewer_pagination {
    display: none;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 8px;
    justify-content: center;
    z-index: 2;
}
.poster_viewer .viewer_page_text {
    display: inline-flex;
    align-items: center;
    color: #666;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: -0.2px;
}
@media all and (max-width:1024px) {
    .poster_viewer {
        height: 700px;
    }
    .poster_viewer .viewer_thumb_panel {
        width: 140px;
    }
    .poster_viewer .viewer_main {
        padding: 30px 60px;
    }
    .poster_viewer .viewer_arrow {
        width: 40px;
        height: 40px;
    }
    .poster_viewer .viewer_arrow.prev {
        left: 12px;
    }
    .poster_viewer .viewer_arrow.next {
        right: 12px;
    }
    .poster_viewer .viewer_thumb_item .thumb_num{
        font-size: 12px;
    }
}
@media all and (max-width:767px) {
    .s4_3 .t24{
        font-size: 22px !important;
        line-height: 1.4;
    }
    .s4_3 span.line_4_3{
        display: none;
    }
    .poster_viewer {
        flex-direction: column;
        height: auto;
        border-radius: 10px;
    }
    .poster_viewer .viewer_thumb_panel {
        width: 100%;
        height: 120px;
        flex-shrink: 0;
        order: 2;
        padding: 12px;
        border-right: none;
        border-top: 1px solid var(--border-default_SB, #CCC);
        overflow-x: auto;
        overflow-y: hidden;
    }
    .poster_viewer.m_long .viewer_thumb_panel{
        height: 160px;
    }
    .poster_viewer .viewer_thumb_panel::-webkit-scrollbar {
        height: 6px;
        width: auto;
    }
    .poster_viewer .viewer_thumb_list {
        flex-direction: row;
        height: 100%;
        gap: 10px;
    }
    .poster_viewer .viewer_thumb_item {
        flex-direction: column;
        flex-shrink: 0;
        width: 56px;
        gap: 0px;
    }
    .poster_viewer .viewer_thumb_item .thumb_img_wrap {
        width: 56px;
        flex-shrink: 0;
    }
    .poster_viewer .viewer_main {
        order: 1;
        padding: 20px 20px 32px;
    }
    .poster_viewer .viewer_img_wrap {
        height: auto;
    }
    .poster_viewer .viewer_img {
        width: 100%;
        height: auto;
        max-height: none;
    }
    .poster_viewer .viewer_arrow {
        display: none;
    }
    .poster_viewer .viewer_pagination {
        display: flex;
    }
}
/* 자체 제작 이미지 슬라이드 (.slideWrap) — Swiper 미사용, 드래그 + 페이지네이션 */
.slideWrap {
    position: relative;
    width: 100%;
    cursor: grab;
    user-select: none;
}

.slideWrap.dragging {
    cursor: grabbing;
}
.slideWrap .slide_viewport {
    overflow: hidden;
    width: 100%;
}
.slideWrap .slide_track {
    display: flex;
    align-items: flex-start;
    transition: transform 0.35s ease;
}
.slideWrap .slide_item {
    flex: 0 0 100%;
    width: 100%;
}
.slideWrap .slide_item img {
    display: block;
    width: 100%;
    -webkit-user-drag: none;
    user-select: none;
}
.slideWrap .slide_caption {
    color: #222 !important;
    line-height: 20px !important;
    margin-top: 10px;
    font-size: 16px;
    text-align: center !important;
}
.slideWrap .slide_pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    margin-top: 16px;
}
.slideWrap .slide_dot {
    width: 8px;
    height: 8px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: #D9D9D9;
    cursor: pointer;
    transition: background .2s, transform .2s;
}
.slideWrap .slide_dot.active {
    background: var(--main);
    transform: scale(1.2);
}

/* 지난호 보기 슬라이드 */
.related {
    padding: 80px 0;
    background: var(--surface-card, #F7F7F7);
}
.related .part{
    max-width: 1100px;
    margin: 0 auto;
}
.related_top {
    display: flex;
    width: 100%;
    justify-content: space-between !important;
    align-items: center;
    margin-bottom: 48px;
}

.related_arrow {
    width: 48px;
    height: 48px;
    border: none;
    background-color: transparent;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    cursor: pointer;
    padding: 0;
    flex-shrink: 0;
    flex-grow: 0;
}
.related_arrow.prev {
    background-image: url('../images/arrow_prev.png');
    background-size: cover;
    transition: all .3s;
}
.related_arrow.prev:hover{
     background-image: url('../images/arrow_prev_h.png');
}
.related_arrow.prev:active,
.related_arrow.next:active{
    filter: brightness(90%);
}
.related_arrow.next {
    background-image: url('../images/arrow_next.png');
    background-size: cover;
     transition: all .3s;
}
.related_arrow.next:hover{
    background-image: url('../images/arrow_next_h.png');
}
.related_title {
    color: #222;
    text-align: center;
    font-size: 32px;
    font-style: normal;
    font-weight: 600;
    line-height: 48px;
    letter-spacing: -0.8px;
}

.related .slide-item {
    display: block;
    position: relative;
}
.related .slide-item a {
    display: block;
    text-decoration: none;
    color: inherit;
}
.related .slide-item .img {
    width: 100%;
    aspect-ratio: 2 / 1;
    overflow: hidden;
    border-radius: 8px;
}
.related .slide-item .img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.4s ease;
}
.related .slide-item a:hover .img img {
    transform: scale(1.05);
}

.related_slide {
    width: 100%;
    overflow: hidden;
}

.related_arrow.swiper-button-disabled {
    opacity: .35;
    cursor: default;
    pointer-events: none;
}

.related_slide .slide-item .txt_wrap {
    margin-top: 20px;
    margin-bottom: 0;
}

.related_slide .slide-item .txt_wrap .r_date {
    color: #666;
    font-size: 16px;
    font-weight: 400;
    line-height: 26px;
    letter-spacing: -0.54px;
}

.related_slide .slide-item .txt_wrap .r_tit {
    font-size: 20px;
    font-weight: 500;
    line-height: 28px;
    letter-spacing: -0.8px;
    margin-top: 4px;
}

.related .visual__progress {
    width: 100%;
    height: 6px;
    background: #fff;
    border-radius: 999px;
    overflow: hidden;
    margin-top: 24px;
}

.related .visual__progress .bar {
    display: block;
    height: 100%;
    width: 0%;
    background: #666;
    border-radius: 999px;
    transition: width 0.5s cubic-bezier(0.25, 0.1, 0.25, 1);
}

.related .part.top_part {
    margin-bottom: 48px;
}

.related_three .related_top {
    justify-content: center;
}


@media all and (max-width: 1023px) {
    .related {
        padding: 46px 0;
    }

    .related .part.top_part {
        margin: 0 auto 22px auto;
        padding: 0 11px;
    }

    .related .part.bottom_part {
        margin: 0 auto;
        padding: 0 20px;
    }

    .related_title {
        font-size: 28px;
        line-height: 36px;
        letter-spacing: -0.56px;
    }

    .related_slide .slide-item .txt_wrap .r_date {
        font-weight: 400;
    }

    .related .visual__progress {
        margin-top: 20px;
    }

    .related_arrow {
        width: 48px;
        height: 48px;
        border: none;
        background-size: 30px
    }
}

@media all and (max-width: 767px) {
    .related {
        padding: 40px 0;
    }

    .related_title {
        font-size: 24px;
        line-height: 32px;
        letter-spacing: -0.48px;
    }

    .related_slide .slide-item .txt_wrap {
        margin-top: 12px !important;
    }

    .related_slide .slide-item .txt_wrap .r_date {
        font-size: 15px;
        font-weight: 600;
        line-height: 22px;
        letter-spacing: -0.3px;
    }

    .related_slide .slide-item .txt_wrap .r_tit {
        font-size: 18px;
        font-weight: 600;
        line-height: 26px;
        letter-spacing: -0.54px;
        margin-top: 2px;
    }

    .related_top {
        margin-bottom: 12px;
        gap: 6px;
        justify-content: space-between;
    }

    .related .part.top_part {
        margin: 0 auto 12px auto
    }
}

@media all and (max-width:1024px) {
.tb-none{
    display: none;
}
}
@media screen and (max-width:767px) {
    .pc-only{
        display: none;
    }
}

/*이미지*/
.img_wrap {
    overflow: hidden;
    width: 100%;
    text-align: center;
    margin: 40px auto;
}

@media screen and (max-width:767px) {
    .img_wrap {
        margin: 20px auto;
    }
    .caption {
        font-size: 15px;
        line-height: 20px;
        margin-top: 0;
    }

}

/**/


.cont_list {
    margin: 48px auto 0;
    font-size: 16px;
    line-height: 48px;
    border-radius: var(--Radius-Radius-Full, 999px);
    background: var(--surface-background, #FFF);
    box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.05);
    text-align: center;
    padding: 0 28px;
    width: fit-content;
    cursor: pointer;
    transition: ease-in-out 0.3s;
}

.btn:hover {
     color: var(--main);
    background: var(--button-hover, #DFE3E6);
}
.btn:active{
    background: var(--button-press, #CAD5DE);
}

#pre_cont_wrap .pre_cont {
    margin-top: 80px;
    width: 100%;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    row-gap: 60px;
    column-gap: 40px;
    align-self: stretch;
    grid-auto-rows: min-content;
}

#pre_cont_wrap .pre_cont .thumb .image {
    width: 100%;
}

#pre_cont_wrap .pre_cont .thumb .image img {
    width: 100%;
    object-fit: cover;
}

#pre_cont_wrap a:hover,
#pre_cont_wrap a:focus,
#pre_cont_wrap a:visited,
#pre_cont_wrap a:active {
    text-decoration: none;
    outline: none;
    box-shadow: none;
    color: #222;
}

#pre_cont_wrap .pre_cont .thumb .caption {
    margin-top: 12px;
    text-align: left ;
}

#pre_cont_wrap .pre_cont .thumb .caption .vol_txt {
    color: #222;
    font-size: var(--size-H15, 20px);
    font-weight: 600;
    line-height: 1.4;
    letter-spacing: -0.4px;
}
#pre_cont_wrap .pre_cont .thumb .caption .vol_txt p{
    color: var(--text-disabled, #666);
    font-size: var(--size-S1, 16px);
    font-weight: 400;
    line-height: 1.6;
    letter-spacing: -0.32px;
    margin-bottom: 6px;
}
@media (max-width: 1024px) {
    #pre_cont_wrap .pre_cont {
        row-gap: 40px;
        column-gap: 30px;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 580px) {
    #pre_cont_wrap .pre_cont {
        grid-template-columns: repeat(1, minmax(0, 1fr));
    }
}