2025년 「기후위기 대응을 위한 탄소중립·녹색성장 기본법」 시행령 개정을 통해 금융위원회 산하기관에도 녹색인증평가 수행이 허용됐다. 신보는 2025년 9월 녹색인증평가기관으로 지정된 이후 평가위원회 운영 기준을 정비하고 내·외부 전문가 참여를 확대해 평가의 전문성과 객관성을 제고했다. 또한 지식재산평가센터를 중심으로 현장평가와 종합평가를 결합한 다층적 검증 체계를 구축했다.._s._timeline{ position: relative; width: 100%; overflow: hidden; }

._s._timeline .visual{ width: 100%; height: var(--vh100); overflow: hidden; position: relative; }
._s._timeline .visual .bg{ width: 100%; height: 100%; position: absolute; top: 0; left: 0; }
._s._timeline .visual .bg img{ width: 100%; height: 100%; object-fit: cover; z-index: 0; }
._s._timeline .visual .wrap{ position: relative; z-index: 1; color: #fff; height: 100%; display: flex; flex-direction: column; justify-content: center; }
._s._timeline .visual .wrap .subTitle span{ display: block; font-size: 18px; letter-spacing: -0.04em; color: rgba(255,255,255,0.7); }
._s._timeline .visual .wrap .subTitle h1{ display: block; font-size: 6.25vw; letter-spacing: -0.04em; font-weight: 600; margin-top: 30px; }
._s._timeline .visual .wrap .subTitle p{ font-size: 20px; letter-spacing: -0.04em; line-height: calc(32 / 20); margin-top: 25px; }



._s._timeline .scrollbx{ display: flex; align-items: flex-start; }
._s._timeline .scrollbx .lbx{ width: calc(450 / 1920 * 100%); background-color: #21584a; color: #fff; height: var(--vh100); padding: 0 58px; box-sizing: border-box; padding-top: 180px; padding-bottom: 40px; }
._s._timeline .scrollbx .lbx .wrap{ display: flex; flex-direction: column; justify-content: space-between; height: 100%; width: 100%; }
._s._timeline .scrollbx .lbx .logoimg{ width: calc(210 / 300 * 100%); margin-left: auto; }
._s._timeline .scrollbx .lbx .logoimg img{ width: 100%; opacity: 0.1; }
._s._timeline .scrollbx .lbx .yeargap li{ padding: 10px 0; cursor: pointer;}
._s._timeline .scrollbx .lbx .yeargap li b { font-size: 20px; letter-spacing: -0.03em; color: rgba(255,255,255,0.2);  transition-duration: 0.4s; }
._s._timeline .scrollbx .lbx .yeargap li.on b{ font-size: 2.6042vw; letter-spacing: -0.03em; font-weight: 600; color: #fff; }
._s._timeline .scrollbx .lbx .yeargap li p{line-height: 1.4; font-size: 14px; letter-spacing: -0.03em; color: rgba(255,255,255,0.2); margin-top: 10px; height: 0; overflow: hidden; transition-duration: 0.4s; }
._s._timeline .scrollbx .lbx .yeargap li.on p{ font-size: 16px; letter-spacing: -0.03em; color: #fff; height: auto; }

@media screen and (min-width: 821px){
    ._s._timeline .scrollbx .lbx .yeargap li:hover{ color: #fff; }
}

._s._timeline .scrollbx .contbx{ width: calc(1500 / 1920 * 100%);  }
._s._timeline .scrollbx .year{ width: 100%; position: relative; box-sizing: border-box; }
._s._timeline .scrollbx .year .intro_{ width: 100%; height: calc(var(--vh100) + 1px); position: relative; display: flex; align-items: flex-end; }
._s._timeline .scrollbx .year .intro_ .bg{ width: 100%; height: 100%; position: absolute; top: 0; left: 0; overflow: hidden; }
._s._timeline .scrollbx .year .intro_ .bg img{ width: 100%; height: 100%; object-fit: cover; z-index: 0; }
._s._timeline .scrollbx .year .intro_ dl{ position: relative; z-index: 1; width: 100%; padding: 85px 0; box-sizing: border-box; color: #fff; text-align: center; font-family: 'HsBombaram30'; font-weight: 100; }
._s._timeline .scrollbx .year .intro_ dl dt{  font-size: 1.875vw; letter-spacing: -0.03em; }
._s._timeline .scrollbx .year .intro_ dl dd{ font-size: 3.33vw; letter-spacing: -0.03em; margin-top: 18px; line-height: 1.3; }

/* ._s._timeline .scrollbx .year .conts{ padding: 160px 0; } */

._s._timeline section.year .conts .rbx{ width: 100%; padding: 140px 0; box-sizing: border-box; position: relative; padding-left: 120px; padding-right: 160px; }
._s._timeline section.year .conts .rbx .bar{ height: calc(100% - 280px); width: 2px; background-color: #eeeeee; position: absolute; left: 119px; top: 140px; z-index: 0; }
._s._timeline section.year .conts .rbx .bar span{ height: 0; width: 2px; background-color: #ef5b26; position: absolute; top: 0; left: calc(50% - 1px); display: block; }

._s._timeline section.year .conts .rbx .timelines{ width: 100%; position: relative; z-index: 1; }
._s._timeline section.year .conts .rbx .timelines li{ display: flex;  position: relative; justify-content: space-between; width: 100%; margin-bottom: 200px; box-sizing: border-box; }

._s._timeline section.year .conts .rbx .timelines li .txt{ width: 100%; box-sizing: border-box; padding: 0 35px; position: relative; display: flex;  }
._s._timeline section.year .conts .rbx .timelines li .txt::after{ content: ''; display: block; width: 10px; height: 10px; top: 0; left: 0; transform: translate(-50%, -50%); transform-origin: 50% 50%; border-radius: 50%; background-color: #eeeeee; position: absolute; transition-duration: 0.4s; }
._s._timeline section.year .conts .rbx .timelines li .txt strong{ display: block; font-size: 2.0833vw;font-weight: 600; letter-spacing: -0.03em; color: #eeeeee; min-width: calc(260 / 960 * 100%); margin-top: -10px; transition-duration: 0.4s; }
._s._timeline section.year .conts .rbx .timelines li .txt dl{ margin-top: -10px; width: 100%; padding-right: 170px; box-sizing: border-box;}
._s._timeline section.year .conts .rbx .timelines li .txt dl dt{ font-size: 20px; letter-spacing: -0.03em; line-height: calc(28 / 17); font-weight: 600; color: #000; transition-duration: 0.2s; }
._s._timeline section.year .conts .rbx .timelines li .txt dl dt line{ text-decoration: underline; }
._s._timeline section.year .conts .rbx .timelines li .txt dl dd{ font-size: 17px; letter-spacing: -0.03em; color: #444444; line-height: calc(28 / 17); margin-top: 15px; transition-duration: 0.2s; }
._s._timeline section.year .conts .rbx .timelines li .txt dl dd line{ text-decoration: underline; }

._s._timeline section.year .conts .rbx .timelines li .img{ position: absolute; right: 0; top: 50%; transform: translateY(-50%); max-width: 150px; width: calc(326 / 1213.75 * 100%); box-sizing: border-box; display: flex; flex-direction: column; align-items: flex-end; margin-top: -10px; }
._s._timeline section.year .conts .rbx .timelines li .img img{}
._s._timeline section.year .conts .rbx .timelines li .img span{ font-size: 13px; letter-spacing: -0.03em; color: #444444; line-height: 1.3; margin-top: 6px; text-align: right; }


._s._timeline section.year .conts .rbx .timelines li.on .txt::after{ background-color: #ef5b26; }
._s._timeline section.year .conts .rbx .timelines li.on .txt strong{ color: #ef5b26; }
._s._timeline section.year .conts .rbx.bot{ padding-bottom: 40vh; }
._s._timeline section.year .conts .rbx.bot .bar{ height: calc(100% - 140px - 40vh); }


@media screen and (min-width: 1921px){
    ._s._timeline .visual .wrap .subTitle h1{ font-size: 120px; }
    ._s._timeline .scrollbx .lbx .yeargap li.on{ font-size: 50px; }
    ._s._timeline .scrollbx .year .intro_ dl dt{ font-size: 36px; }
    ._s._timeline .scrollbx .year .intro_ dl dd{ font-size: 64px; }
    ._s._timeline section.year .conts .rbx .timelines li .txt strong{ font-size: 40px; }
}


@media screen and (max-width: 1440px){
    ._s._timeline .scrollbx .year .intro_ dl dd{ margin-top: 12px; }
    ._s._timeline section.year .conts .rbx{ padding-left: 80px; padding-right: 100px; }
    ._s._timeline section.year .conts .rbx .bar{ left: 79px; }
    ._s._timeline section.year .conts .rbx .timelines li .txt{ padding: 0 20px; }
    ._s._timeline section.year .conts .rbx .timelines li .txt dl dd{ font-size: 16px; }

}

@media screen and (max-width: 1280px){
    ._s._timeline .visual .wrap .subTitle span{ font-size: 16px; }
    ._s._timeline .visual .wrap .subTitle h1{ margin-top: 15px; }
    ._s._timeline .visual .wrap .subTitle p{ font-size: 18px; }

    ._s._timeline .scrollbx .lbx{ padding: 0 20px; padding-top: 100px; padding-bottom: 50px; width: 200px; flex-shrink: 0;}
    ._s._timeline .scrollbx .lbx .yeargap li.on{ font-size: 28px; }

    ._s._timeline .scrollbx .contbx{ width: 100%; }
    ._s._timeline section.year .conts .rbx{ padding-left: 40px; padding-right: 40px; }
    ._s._timeline section.year .conts .rbx .bar{ left: 39px; }
    ._s._timeline section.year .conts .rbx .timelines li .txt strong{ margin-top: -0.2em; }
    ._s._timeline section.year .conts .rbx .timelines li .txt dl{ margin-top: -0.5em; }
    /* ._s._timeline section.year .conts .rbx .timelines li .txt dl dt{ font-size: 18px; } */
    ._s._timeline section.year .conts .rbx .timelines li .txt dl dd{ font-size: 14px; }
    ._s._timeline section.year .conts .rbx .timelines li .img{ margin-top: -0.2em; }
}

@media screen and (max-width: 820px){
    ._s._timeline .visual .wrap .subTitle span{ font-size: 14px; }
    ._s._timeline .visual .wrap .subTitle h1{ font-size: 28px; }
    ._s._timeline .visual .wrap .subTitle p{ font-size: 16px; }

    ._s._timeline .scrollbx .lbx{ padding: 0 15px; padding-top: 90px; padding-bottom: 50px; width: 145px; }
    ._s._timeline .scrollbx .lbx .yeargap li { padding: 7px 0;}
    ._s._timeline .scrollbx .lbx .yeargap li b{ font-size: 14px; }
    ._s._timeline .scrollbx .lbx .yeargap li.on b{ font-size: 20px; }
    ._s._timeline .scrollbx .lbx .yeargap li p{ font-size: 12px; }
    ._s._timeline .scrollbx .lbx .yeargap li.on p{ font-size: 14px; }

    ._s._timeline .scrollbx .year .intro_ dl dt{ font-size: clamp(24px, 20/820*100vw, 20px); }
    ._s._timeline .scrollbx .year .intro_ dl dd{ font-size: clamp(32px, 28/820*100vw, 28px); }

    ._s._timeline section.year .conts .rbx{ padding: 100px 0; padding-left: 15px; padding-right: 15px; }
    ._s._timeline section.year .conts .rbx .timelines li{ flex-direction: column; }
    ._s._timeline section.year .conts .rbx .bar{ top: 100px; left: 14px; }
    ._s._timeline section.year .conts .rbx .timelines li .txt{ flex-direction: column; padding-right: 0; }
    ._s._timeline section.year .conts .rbx .timelines li .txt strong{ font-size: 20px; }
    ._s._timeline section.year .conts .rbx .timelines li .txt dl{ margin-top: 15px; }
    ._s._timeline section.year .conts .rbx .timelines li .txt dl dd{ margin-top: 10px; }
    ._s._timeline section.year .conts .rbx .timelines li .img{ width: 100%; margin-top: 20px; align-items: flex-start; padding-left: 20px; }
    ._s._timeline section.year .conts .rbx .timelines li .img span{ text-align: left; display: inline-block; width: 100%;}


}

@media screen and (max-width: 500px){
    ._s._timeline .scrollbx{ flex-direction: column; }
    ._s._timeline .scrollbx .lbx{display: none;}
    /* ._s._timeline .scrollbx .lbx{ width: 100%; z-index: 2; height: auto; padding: 70px 5%; padding-bottom: 10px;  }
    ._s._timeline .scrollbx .lbx::before{ content: ''; background-image: url(/asset/img/logo_white.svg); background-size: 40%; background-repeat: no-repeat; background-position: top right; width: 100%; height: 100%; position: absolute; left: 0; top: 0; z-index: 0; opacity: 0.1; }
    ._s._timeline .scrollbx .lbx .yeargap{ display: flex; flex-wrap: wrap; position: relative; z-index: 2; }
    ._s._timeline .scrollbx .lbx .yeargap li{ width: 50%; color: rgba(255,255,255,0.3); }
    ._s._timeline .scrollbx .lbx .yeargap li.on{ font-size: 14px; }
    ._s._timeline .scrollbx .lbx .yeargap li p {height: auto;}
    ._s._timeline .scrollbx .lbx .yeargap li.on p {font-size: 12px;}
    ._s._timeline .scrollbx .lbx .logoimg{ display: none; } */
    ._s._timeline .scrollbx .contbx{ width: 100%; }
    ._s._timeline section.year .conts .rbx .timelines li .txt dl {padding-right: 0;}
    ._s._timeline section.year .conts .rbx .timelines li .img {position: relative; top: auto; transform: translateY(0); max-width: 80%;}
    ._s._timeline section.year .conts .rbx .timelines li .img img {max-width: 150px;}
}



/* 어제와 오늘, 인포그래픽 */
._s._timeline .todays{ padding-top: 125px; box-sizing: border-box; overflow: hidden; }

._s._timeline h2{ font-size: 50px; letter-spacing: -0.04em; line-height: calc(76 / 50); font-weight: 600; }
._s._timeline h2 span{ color: #ef5b26; }


._s._timeline .todays .tab {
    opacity: 0;
    transform: translateY(40px);
    display: flex;
    justify-content: center;
    font-size: 30px;
    letter-spacing: -0.04em;
    margin-bottom: calc(55/30*1em);
    margin-top: 125px;
}

._s._timeline .todays .tabItem {
    position: relative;
    color: #c2c2c2;
    font-weight: 500;
    cursor: pointer;
    padding: 0 calc(33/30 * 1em);
    transition: color 0.3s ease-in-out, font-weight 0.3s ease-in-out;
}

._s._timeline .todays .tabItem::after{
    content: 'l';
    display: block;
    color: #c2c2c2 !important;
    position: absolute; right: -1px; top: 50%; transform: translateY(-50%);
}

._s._timeline .todays .tabItem:last-of-type:after{ display: none; }

._s._timeline .todays .tabItem.active {
    color: #21584a;
}

._s._timeline .todays .tabItem.active::after{
    color: #c2c2c2;
}

._s._timeline .todays .tabItem span{
    position: relative;
    display: block;
    padding: calc(10/30*1em) 0;
}

._s._timeline .todays .tabItem span::before {
    content: '';
    position: absolute;
    bottom: 0; left: 50%;
    transform: translateX(-50%);
    width: 0%; height: 2px;
    background: #21584a;
    transition: width 0.3s ease-in-out;
}

._s._timeline .todays .tabItem.active span::before {
    width: 100%;
}

._s._timeline .todays .tabItem span {
    position: relative;
    z-index: 1;
}

@media screen and (min-width: 821px) {
    ._s._timeline .todays .tabItem:hover {
        color: #21584a;
    }
}


.rangeBox {
    position: relative;
    width: 100%;
    overflow: hidden;
    margin-bottom: 30px;
}

.rangeBox::before {
    content: '';
    padding-top: calc(700/1440*100%);
    display: block;
}

.range {
    position: absolute;
    top: 0; left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    user-select: none;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out;
}
.range.active {
    opacity: 1;
    visibility: visible;
}

.range .bx{ width: 100%; position: relative; width: 100%; height: 100%;  }

.range__image {
    position: relative;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.range__image > div .txt {
    position: absolute;
    bottom: 0; left: 0;
    width: 100%;
    padding: calc(20/24*1em);
    color: #fff;
    display: flex; flex-direction: column;
    align-items: flex-start; justify-content: flex-end;
    box-sizing: border-box;
    font-size: 24px;
    letter-spacing: -0.03em;
    line-height: calc(36/24*1em);
}

.range__image > div .txt span:first-child {
    font-weight: 700;
    font-family: 'Mulish';
}
.range__image > div .txt span:last-child {
    font-weight: 500;
    font-family: 'Pretendard';
}

.range__image-before,
.range__image-after {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    object-fit: cover;
}

.range__image-after {
    clip-path: polygon(50% 0, 100% 0, 100% 100%, 50% 100%);
}

.range__image .range__image-after .txt {
    align-items: flex-end;
    text-align: right;
}



.range__button {
    position: absolute;
    top: 0; left: 50%;
    transform: translateX(-50%);
    font-size: 24px;
    width: calc(103/24*1em); height: 100%;
    cursor: ew-resize;
    z-index: 10;
}

.range__button span {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: calc(103/24*1em); height: calc(46/24*1em);
    background: #21584a;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid #fff;
    box-sizing: border-box;
    color: #fff;
}

@media screen and (max-width: 1440px) {
    ._s._timeline .todays .tab {
        font-size: 28px;
        margin-top: 100px;
    }
}

@media screen and (max-width: 1280px) {
    ._s._timeline .todays{ padding-top: 100px; }
    ._s._timeline h2{ font-size: 40px; }

    ._s._timeline .todays .tab {
        font-size: 26px;
        margin-top: 80px;
    }
}

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

    ._s._timeline .todays .tab {
        font-size: 24px;
        margin-top: 40px;
    }
}

@media screen and (max-width: 820px) {
    ._s._timeline .todays{ padding-top: 70px; }

    ._s._timeline .todays .tab {
        font-size: 16px;
        overflow-x: auto;
        margin-bottom: calc(50/20*1em);
    }

    ._s._timeline .todays .tabItem span{ white-space: nowrap; }

    ._s._timeline h2{ font-size: 30px; }

    .range__image > div .txt {
        font-size: 16px;
        padding: calc(15/16*1em);
    }

    .range__button {
        font-size: 20px;
    }

}

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

    ._s._timeline h2{ font-size: 24px; }

    ._s._timeline .todays .tab {
        font-size: 14px;
        justify-content: flex-start;
    }

    ._s .tabItem {
        padding: calc(10/16*1em) calc(15/16*1em);
    }

    ._s._timeline .todays .tabItem:first-of-type{ padding-left: 0; }

    .range__image > div .txt {
        font-size: 14px;
        padding: calc(10/14*1em);
    }

    .range__button span {
        width: calc(40/16*1em);
        height: calc(40/16*1em);
        font-size: 16px;
    }
}

@media screen and (max-width: 360px) {

    ._s._timeline .todays .tab {
        font-size: 14px;
    }

    ._s .tabItem {
        padding: calc(8/14*1em) calc(12/14*1em);
    }

    .range__image > div .txt {
        font-size: 12px;
        padding: calc(8/12*1em);
    }

    .range__button span {
        width: calc(35/14*1em);
        height: calc(35/14*1em);
        font-size: 14px;
    }
}


._s ._marquee{ margin-top: 140px; margin-bottom: -20px; }
._s ._marquee .con{ padding-right: 0.7em; font-size: 7.8125vw; letter-spacing: -0.03em; color: rgba(0,0,0,0.05); font-weight: 600; }

@media screen and (min-width: 1921px){
    ._s ._marquee .con{ font-size: 150px; }
}

@media screen and (max-width: 1280px){
    ._s ._marquee{ margin-top: 70px; }
}

@media screen and (max-width: 820px){
    ._s ._marquee{ margin-top: 50px; margin-bottom: -10px; }
}

@media screen and (max-width: 500px){
    ._s ._marquee{ margin-top: 30px; }
}




/* 인포그래픽 */
._s .infographic{ background-color: #fffeef; padding: 150px 0 180px; }
._s .infographic .top {display: flex; justify-content: space-between; align-items: flex-end;}
._s .infographic .top .navi{ display: flex; gap: calc(20/30*1em); font-size: 30px; }
._s .infographic .top .navi button{ font-size: inherit; color: #000; font-weight: bold; background: transparent; border: none; outline: none; cursor: pointer; transition: .3s; }
._s .infographic .top .navi button:hover{ color: #21584a; }
._s .infographic .countsw{ margin-top: 90px; overflow: visible; }
._s .infographic .countsw .swiper-wrapper{ align-items: stretch;}
._s .infographic .countsw .swiper-slide{ width: calc(560/1440*100%); height: auto; overflow: visible; display: flex; align-items: center ;}
._s .infographic .countsw .item{ position: relative; width: 100%; height: 100%; color: #000; cursor: pointer; display: flex; flex-direction: column; align-items: center;}
._s .infographic .countsw .item .img{ position: relative; width: 100%;}
._s .infographic .countsw .item .img::after {content: ''; display: block; padding-top: calc(310/560*100%);}
._s .infographic .countsw .item .img img{ position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 100%; height: 100%; object-fit: contain; }

._s .infographic .countsw .txt{flex-grow: 1; width: 100%; display: flex; flex-direction: column; align-items: center; text-align: center; position: relative; z-index: 1; }
._s .infographic .countsw .txt .count{ position: relative; z-index: 1; display: flex; justify-content: center; align-items: flex-end; color: #ef5b26;}
._s .infographic .countsw .txt .count > div{ font-size: clamp(50px, 70/1440*100vw, 70px); font-weight: 600; letter-spacing: -0.03em; }
._s .infographic .countsw .txt .count > span{ font-size: clamp(20px, 30/1440*100vw, 30px); letter-spacing: -0.04em; font-weight: 600; margin-bottom: calc(7/30*1em); margin-left: calc(10/30*1em); }

._s .infographic .countsw .txt b{ font-size: clamp(20px, 30/1440*100vw, 30px); letter-spacing: -0.04em; font-weight: 600; margin-bottom: calc(30/30*1em); margin-top: calc(30/30*1em); }
._s .infographic .countsw .txt .gray{flex-grow: 1; width: 100%; background: #f2efec; font-size: clamp(14px, 18/1500*100vw, 18px); letter-spacing: -0.04em; line-height: calc(32/18*1em); font-weight: 400; display: flex; align-items: center; justify-content: center; padding: calc(30/18*1em); box-sizing: border-box; }
._s .infographic .countsw .txt .gray p{ font-size: inherit; opacity: .8; }

._s .infographic .countsw .txt .desc{ width: 100%; text-align: center; position: absolute; top: 100%; left: 0; z-index: 1; font-size: 14px; opacity: .8; line-height: calc(24/14*1em); padding-top: calc(15/14*1em); }


@media screen and (max-width: 1280px){
    ._s .infographic .countsw .swiper-slide {width: clamp(450px, 450/1024*100vw, 500px);}
}

@media screen and (max-width: 820px){
    ._s .infographic{ padding: 100px 0 150px; }
    ._s .infographic .countsw{ margin-top: 30px; }
    ._s .infographic .countsw .swiper-slide {width: clamp(450px, 500/820*100vw, 500px);}
    ._s .infographic .countsw .txt .gray {font-size: clamp(14px, 16/820*100vw, 16px);}
}

@media screen and (max-width: 500px){
    ._s .infographic {padding: 80px 0 150px;}
    ._s .infographic .top {flex-direction: column; align-items: center; text-align: center;}
    ._s .infographic .top .navi { margin-top: calc(20/20*1em); font-size: 20px;}
    ._s .infographic .top .navi button {padding: 0;}
    ._s .infographic .countsw .swiper-slide {width: 100%;}
    ._s .infographic .countsw .txt .gray br {display: none;}
    ._s .infographic .countsw .txt .desc {font-size: clamp(12px, 14/500*100vw, 14px);}
}


/* 50주년 역사관 */
._s._timeline .todays.history h2 {
    margin-bottom: calc(40/50*1em);
    width: calc(350/50*1em);
    text-align: center;
    margin-left: auto;
    margin-right: auto;
}
._s._timeline .todays.history .history_desc {
    font-family: 'Pretendard';
    text-align: center;
    font-size: clamp(16px, 18/1440*100vw, 18px);
    line-height: 1.5;
    margin-bottom: calc(50/18*1em);
}
._s._timeline .todays.history .img {
    position: relative;
    display: flex;
    align-items: center;
    gap: 20px;
}
._s._timeline .todays.history .img .arr {
    width: calc(40/50*1em);
    height: calc(40/50*1em);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: clamp(16px, 50/1440*100vw, 50px);
    color: #21584a;
}
._s._timeline .todays.history .img .swiper {
    position: relative;
    width: 100%;
    z-index: 1;
}
._s._timeline .todays.history .img .swiper-slide {
    position: relative;
}
._s._timeline .todays.history .img .swiper-slide::after {
    content: '';
    display: block;
    padding-top: calc(700/1440*100%);
}
._s._timeline .todays.history .img .swiper-slide img {
    position: absolute;
    left: 50%; top: 50%; transform: translate(-50%, -50%);
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.history_popup {
    position: fixed;
    top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.8);
    z-index: 9999;
    display: none;
}
.history_popup .close {
    position: absolute;
    top: 20px; right: 20px; width: 40px; height: 40px; background-color: #fff; border-radius: 50%; display: flex; align-items: center; justify-content: center; cursor: pointer;
    z-index: 9999;
}
.history_popup .close i {
    font-size: 20px; color: #000;
}
.history_popup .inner {
    width: 100%; max-width: 1700px;
    position: absolute;
    left: 50%; top: 50%; transform: translate(-50%, -50%);
}
.history_popup .inner::after {
    content: '';
    display: block;
    padding-top: calc(980/1920*100%);
}
.history_popup .inner .img {
    position: absolute;
    left: 50%; top: 50%; transform: translate(-50%, -50%); width: 100%; height: 100%;
}
.history_popup .inner .img img {
    width: 100%; height: 100%; object-fit: cover;
}
@media screen and (max-width: 820px) {
    ._s._timeline .todays.history .history_desc {
        font-size: clamp(14px, 16/500*100vw, 18px);
    }
    ._s._timeline .todays.history .history_desc br {
        display: none;
    }
}

.todays_re {
    width: 100%;
    overflow: hidden;
}
.todays_re .tab {
    border-top: 1px solid #ddd;
    border-bottom: 1px solid #ddd;
}
.todays_re .tab .inner {
    display: flex;
}
.todays_re .tab .inner .tabItem {
    cursor: pointer;
    font-size: 18px;
    font-weight: 700;
    padding: calc(25/18*1em) 0;
    width: calc(150/18*1em);
    color: rgba(0, 0, 0, 0.3);
    position: relative;
    text-align: center;
    transition: .3s;
}
@media screen and (min-width: 821px) {
    .todays_re .tab .inner .tabItem:hover {
        color: #21584a;
    }
}
.todays_re .tab .inner .tabItem::after {
    content: '';
    position: absolute;
    bottom: 0; left: 50%; transform: translateX(-50%);
    width: 0%; height: 2px;
    background: #21584a;
    transition: all 0.3s ease-in-out;
}
.todays_re .tab .inner .tabItem.active {
    color: #21584a;
}
.todays_re .tab .inner .tabItem.active::after {
    width: 100%;
}
@media screen and (max-width: 820px) {
    .todays_re .tab .inner .tabItem {
        font-size: 14px;
        padding: calc(20/14*1em) 0;
    }
}
@media screen and (max-width: 500px) {
    .todays_re .tab .inner .tabItem {
        font-size: 13px;
        padding: calc(15/12*1em) 0;
        width: auto;
        flex: 1;
    }
}
@media screen and (max-width: 360px) {
    .todays_re .tab .inner .tabItem {
        font-size: 12px;
    }
}

.todays_re .article {
    padding-top: 120px;
}
.todays_re ._marquee {
    margin-top: 40px;
}
@media screen and (max-width: 820px) {
    .todays_re .article {
        padding-top: 80px;
    }
}
@media screen and (max-width: 500px) {
    .todays_re .article {
        padding-top: 60px;
    }
}

.swiperWrap{ box-sizing: border-box; width: 100%; position: relative; overflow: visible; }
.swiperWrap .list{ width: 100%; overflow: visible; cursor: pointer; } 
.swiperWrap .list .swiper-wrapper{ transition-timing-function: linear !important; }
.swiperWrap .list .swiper-slide{ width: auto !important; box-sizing: border-box;}
.swiperWrap .list .swiper-slide:first-of-type{ padding-left: 100px; }
.swiperWrap .list .swiper-slide:last-of-type{ padding-right: 100px; }
.swiperWrap .list .swiper-slide:nth-of-type(3n){ padding-top: 50px; }
.swiperWrap .list .swiper-slide:nth-of-type(3n-1){ padding-top: 260px; }
.swiperWrap .list .swiper-slide:nth-of-type(3n-2){ padding-top: 135px; }
.swiperWrap .list .swiper-slide ._inn{ position: relative; display: flex; flex-direction: column; justify-content: center; width: auto;  }
.swiperWrap .list .swiper-slide ._inn .img_{ border: 1px solid #dddddd; box-sizing: border-box; width: auto; }
.swiperWrap .list .swiper-slide ._inn .img_ img{ width: 100%;  object-fit: cover; display: block; max-width: unset; height: 100%; }
.swiperWrap .list .swiper-slide ._inn strong{ font-size: 30px; font-weight: 600; letter-spacing: -0.04em; color: #000; display: block; }
.swiperWrap .list .swiper-slide ._inn strong span {display: inline-block; margin-top: calc(20/30*1em); margin-bottom: calc(10/30*1em);}
.swiperWrap .list .swiper-slide ._inn p{ display: block; font-size: 20px; letter-spacing: -0.04em; color: #000; line-height: 1.3; }
.swiperWrap .list .swiper-slide ._inn p small { display: block; font-size: 14px; letter-spacing: -0.04em; color: #555; line-height: 1.3; padding-top: 10px;}

@media screen and (max-width: 1280px) {
    .swiperWrap .list .swiper-slide{ min-height: 0; }
    .swiperWrap .list .swiper-slide ._inn .img_ { height: 370px; min-height: 370px; }
    .swiperWrap .list .swiper-slide ._inn strong {font-size: 25px;}
    .swiperWrap .list .swiper-slide ._inn p {font-size: 18px;}
}
@media screen and (max-width: 820px) {
    .swiperWrap .list .swiper-slide{ min-height: 0; max-width: 70vw; }
    .swiperWrap .list .swiper-slide ._inn .img_{ height: auto; min-height: auto; }
    .swiperWrap .list .swiper-slide ._inn .img_ img{ height: auto; object-fit: unset;  }
    .swiperWrap .list .swiper-slide:first-of-type{ padding-left: 50px; }
    .swiperWrap .list .swiper-slide:last-of-type{ padding-right: 50px; }
    .swiperWrap .list .swiper-slide ._inn strong {font-size: 20px;}
    .swiperWrap .list .swiper-slide ._inn p {font-size: 16px;}
    .swiperWrap .list .swiper-slide ._inn p small {font-size: 12px;}
    .swiperWrap .list .swiper-slide:nth-of-type(3n-1){ padding-top: 70px; }
}
@media screen and (max-width: 500px) {
    .swiperWrap .list .swiper-slide ._inn strong {font-size: 18px;}
    .swiperWrap .list .swiper-slide ._inn p {font-size: 14px;}
}