.s1{padding-top: 25px;padding-bottom: 140px;}
main{overflow-x: hidden;}

/* img */
.s1 .imgBx{
    display: flex; align-items: center; justify-content: center;
    overflow: hidden;
    width: 100%;
    margin-left: auto;
    will-change: width, height;
    max-width: 1440px;
    position: relative;
}
.s1 .imgBx::before{
    content: '';
    display: block;
    width: 100%;
    padding-bottom: calc(83/144*100%);
}
.s1 .imgBx img {
    position: absolute;
    top: 0;
    right: 0;
    width: 410px;
    height: 230px;
    object-fit: cover;
    border-radius: 9px;
}

/* txt */
.s1 .txtBx{padding-top: 100px;}
.s1 .txtBx > div{overflow: hidden;}
.s1 .txtBx p{
    font-size: clamp(42px, 54/1920*100vw, 54px);line-height: 1.4;
    display: inline-flex;flex-direction: column;
    font-weight: 700;
}
.s1 .txtBx p br.mob{display: none;}
.s1 .txtBx p span{
    display: inline-block;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent;
}
.s1 .txtBx p span small {
    font-size: calc(30/54*1em);
    display: inline-block;
}
.s1 .txtBx p span b{
    display: inline;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent;
}


.s1 .subTxt{display: flex;justify-content: space-between; padding: 0 80px; padding-top: 140px;}
.s1 .subTxt .left img{
    animation: float 3s ease-in-out infinite;
}
.s1 .subTxt .right > div{overflow: hidden;padding-bottom: 35px;}
.s1 .subTxt .right b{font-size: 27px;font-weight: 700;line-height: 1.5454;color: #333333;}
.s1 .subTxt .right p{font-size: 22px;font-weight: 500;line-height: 1.5454;color: #333333;}
.s1 .subTxt .right p em{color: #4754d2;}


@keyframes float {
    0% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-20px);
    }
    100% {
        transform: translateY(0);
    }
}

.s2{
    background: #f5f5f5;
    padding-top: 140px;padding-bottom: 160px;
    --fontsize: 52px;
    overflow: hidden;
}
/* .s2 .tit > div{overflow: hidden;} */
.s2 .tit {display: flex; justify-content: center; text-align: center;font-size: 24px;font-family: 'Dm Sans';font-weight: 500;letter-spacing: -0.025em;}
.s2 .tit h3 {position: relative;}
.s2 .tit h3::before {
    content: '';
    display: block;
    z-index: -1;
    width: 24px;
    height: 24px;
    background-color: #e2f157;
    border-radius: 50%;
    position: absolute;
    top: 0;
    left: 0;
    transform: translate(-50%,-50%);
    animation: ddot 2s ease-in-out infinite;
}
@keyframes ddot {
    0% {
        transform: translate(-50%,-50%);
    }
    50% {
        transform: translate(-50%,-60%);
    }
    100% {
        transform: translate(-50%,-50%);
    }
}

.s2 .flexBx{display: flex;padding-top: 140px;position: relative;}
.s2 .flexBx .dot{
    position: absolute;
    top: 0;
    left: 0;
    transform: translate(-50%, -50%);
    z-index: 1;
    box-sizing: border-box;
}

.s2 .flexBx .dot .n1{
    width: 36px;height: 36px;background-color: rgba(185, 192, 252, 0.9);border-radius: 50%;position: absolute;top: 50%;left: 50%;transform: translate(-50%,-50%);
    animation: scale forwards infinite 1s;
}
.s2 .flexBx .dot .n2{
    width: 36px;height: 36px;background-color: rgba(97, 112, 245, 0.7);border-radius: 50%;position: absolute;top: 50%;left: 50%;transform: translate(-50%,-50%);
    animation: scale2 forwards infinite 1s;
    /* animation-delay: 0.3s; */
}
.s2 .flexBx .dot .n3{
    width: 12px;height: 12px;background-color: #4754d2;border-radius: 50%;position: absolute;top: 50%;left: 50%;transform: translate(-50%,-50%);
}

@keyframes scale {
    0% {
        transform: translate(-50%,-50%) scale(0.3);
    }
    95% {
        transform: translate(-50%,-50%) scale(0.7);
    }
    100% {
        transform: translate(-50%,-50%) scale(0.3); opacity: 0;
    }
}

@keyframes scale2 {
    0% {
        transform: translate(-50%,-50%) scale(0.3);
    }
    95% {
        transform: translate(-50%,-50%) scale(1);
    }
    100% {
        transform: translate(-50%,-50%) scale(0.3); opacity: 0;
    }
}

.s2 .flexBx .barBx{
    width: 2px; height: 100%; background-color: #dddddd;position: absolute;
    left: 50%;
    transform: translateX(-50%);
    font-size: var(--fontsize);
    margin-top: calc(25/52*1em);
}
.s2 .flexBx .barBx .bar{
    width: 2px;
    height: 100%;
    background-color: #4754d2;
    position: absolute;
    top: 0;
    left: 0;
    transform-origin: center top;
    transform: scaleY(0);
}

/* top */
.s2 .contBx .top > div{overflow: hidden;}
.s2 .contBx .top p{
    font-size: var(--fontsize);
    padding-bottom: 15px;
    display: inline-flex;flex-direction: column;
    font-weight: 600;
    letter-spacing: -0.02em;

}
.s2 .contBx .top p span{
    display: inline-block;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent;
}
/* bottom */
.s2 .contBx{width: 100%;padding: 0 30px;box-sizing: border-box;}
.s2 .contBx .cont{margin-bottom: 220px;}
.s2 .contBx .cont:last-child{margin-bottom: 0;}
.s2 .contBx .bottom{display: flex; gap:calc(120/1920*100vw);}
.s2 .contBx .left{width: 100%;}
.s2 .contBx .left .imgBx{max-width: 620px;width: 100%}
.s2 .contBx .right{width: 100%;overflow: hidden;}
.s2 .contBx .right .txt > div{overflow: hidden;}
.s2 .contBx .right .txt > div{padding-bottom:30px;}
.s2 .contBx .right .txt > div:first-child{padding-bottom: 40px;}
.s2 .contBx .right .txt > div:last-child{padding-bottom: 0px;}

.s2 .contBx .right .txt h3{font-size: 40px;font-weight: 700;line-height: 1.3333;}
.s2 .contBx .right .txt p{font-size: 20px;font-weight: 500;line-height: 1.6;color: #333333;}
.s2 .contBx .right .txt p em{color: #4754d2;}

.s2 .marqueeBx{padding-top: 60px;}
.s2 .marqueeBx .marquee{gap: 30px;}
.s2 .marqueeBx .marquee p{font-size: 36px;font-weight: 600;font-family: 'Pretendard';}
.s2 .marqueeBx .marquee p em{margin-right: 10px;}

.s2 .bottomTxt{display: flex;flex-direction: column;align-items: center;text-align: center;margin-top: calc(200/72*1em);font-size: 72px;}
.s2 .bottomTxt span{font-size: inherit;font-weight: 600;font-family: 'Dm Sans';font-style: italic; color: #000; opacity: .2;}
.s2 .bottomTxt p{padding-top: calc(25/60*1em);font-size: calc(52/72*1em);font-weight: 700;font-family: 'Pretendard';letter-spacing: -0.025em;color: #000;}
.s2 .bottomTxt p br {display: none;}
.s2 .bottomTxt p b{
    display: inline-block;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent;
    background: linear-gradient(110deg, rgba(71, 84, 210,1) 0%, rgba(224, 224, 224,1) 0%);
}

.s3{
    background-color: #000;padding: 160px 0;
}
.s3 .txtBx .year > div{overflow: hidden;}
.s3 .txtBx .year p{font-size: clamp(100px, 150/1920*100vw, 150px);color:#2d2c2c;font-family: 'Dm Sans';font-weight: 600;font-style: italic;}
.s3 .txtBx .subTxt{padding-top: 30px;}
.s3 .txtBx .subTxt > div {overflow: hidden;}
.s3 .txtBx .subTxt p{
    font-size: clamp(32px, 40/1920*100vw, 40px);line-height: 1.4;
    display: inline-flex;flex-direction: column;
    font-weight: 700;

}
.s3 .txtBx .subTxt p span{
    display: inline-block;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent;
    background: linear-gradient(110deg, rgba(71, 84, 210,1) 0%, rgba(224, 224, 224,1) 0%);
}


.s3 .numBx{display: flex;align-items: flex-end;flex-direction: column;padding-top: 70px;}
.s3 .numBx .count{display: flex;align-items: flex-end;justify-content: flex-end;
    border-bottom: 1px solid #7c7c7c;padding-bottom: 20px;margin-bottom: 80px;
}
.s3 .numBx .count:last-child{margin-bottom: 0;padding-bottom: 30px;}
.s3 .numBx .count p{
    font-size: 26px;color: #7c7c7c;font-weight: 500;margin-right: 110px;
}
.s3 .numBx .count em{font-size: 150px;color: #fff;font-weight: 600;margin-left: 20px;}
.s3 .numBx .count .number, .s3 .numBx .count em{transform: translateY(10px);} 
.s3 .comma{ color: #fff; font-size: 120px; font-weight: 600; vertical-align: top; }
.s3 .digit-con{ overflow: hidden; height: 1em; vertical-align: top; display: inline-block;color: #fff;font-size: 120px;font-weight: 600;}
.s3 .digit-con > span{ display: block; position: relative;text-align: right;}


.s3 .review{padding-top: 150px;display: flex;flex-wrap: wrap;gap: 30px;}
.s3 .review .box {
    width: calc((100% - 60px) / 3);
    background-color: #fff;
    border-radius: 9px;
    padding-top: 30px;
    padding-left: 40px;
    padding-right: 20px;
    padding-bottom: 70px;
    box-sizing: border-box;
}
.s3 .review .box .logo{
    height: 50px;
    display: flex;
    align-items: center;
}
.s3 .review .box .logo img{
    max-height: 100%;
    width: auto;
    object-fit: contain;
}
.s3 .review .box .txt{padding-top: 30px;}
.s3 .review .box .txt p{font-size: 18px;font-weight: 500;line-height: 1.5555;}
.s3 .review .box .txt p em{color: #4754d2;}


.s4{padding-top:140px;padding-bottom: 190px;}
.s4 .txtBx{}
.s4 .txtBx > div{overflow: hidden;}
.s4 .txtBx p{
    font-size: 40px;line-height: 1.4;
    display: inline-flex;flex-direction: column;
    font-weight: 700;
}
.s4 .txtBx p span{
    display: inline-block;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent;
}

.s4 .marqueeArea{padding-top: 140px;}
.s4 ._marquee {width: 100%; position: relative; overflow: hidden;}
.s4 ._marquee + ._marquee {margin-top: 30px;}
.s4 ._marquee.n2{margin-top: 10px;}
.s4 ._marquee .absol { width: 100%; display: flex; align-items: center;}
.s4 ._marquee .absol .mar_ch {display: flex; align-items: center;}
.s4 ._marquee .absol .mar_ch img {flex-shrink: 0; padding-right: 40px; max-width: none;}


@media screen and (max-width: 1680px) {
    /* .s2 .tit{font-size: 38px;} */
    .s2 {--fontsize: 46px;}
    .s2 .contBx .top p {font-size: 46px;}
    .s2 .contBx .right .txt h3 {font-size: 36px;}
    .s2 .marqueeBx .marquee p{font-size: 32px;}
    .s3 .digit-con{font-size: clamp(80px, 120/1440*100vw, 120px);}
    .s3 .comma{font-size: clamp(80px, 100/1440*100vw, 120px);}
    .s3 .numBx .count em{font-size: clamp(80px, 150/1440*100vw, 120px);}
    .s3 .review .box .txt p{font-size: 17px;}
    .s4 .txtBx p{font-size: 36px;}
}
@media screen and (max-width: 1440px) {
    .s1 .subTxt {padding: 0px; padding-top: 140px; justify-content: flex-start;}
    .s1 .txtBx p{font-size: clamp(30px, 42/1440*100vw, 42px);}
    .s1 .subTxt .right {flex-shrink: 0;}
    .s1 .subTxt .right b {font-size: 24px;}
    .s1 .subTxt .right p {font-size: 20px;}

    .s2 {--fontsize: 40px;}
    .s2 .contBx .top p {font-size: 40px;}
    .s2 .contBx .right .txt h3 {font-size: 32px;}
    .s2 .contBx .right .txt p {font-size: 18px;}
    .s2 .contBx .bottom{gap: calc(80/1440*100vw);}
    .s2 .marqueeBx .marquee p{font-size: 28px;}
    .s3 .review br{display: none;}
    .s4 .txtBx p {font-size: 32px;}
}
@media screen and (max-width: 1280px) {
    .s1 .subTxt {
        gap: 40px;
        padding-top: 100px;
    }
    .s2 .contBx .cont{margin-bottom: 160px;}
    .s2 {--fontsize: 36px;}
    .s2 .contBx .top p {font-size: 32px;}

    .s2 .contBx .right .txt h3 {font-size: 26px;}
    .s2 .contBx .right .txt > div {padding-bottom: 20px;}
    .s2 .marqueeBx{padding-top: 40px;}
    .s2 .marqueeBx .marquee p{font-size: 24px;}
    .s2 .bottomTxt{font-size: 60px;}

    .s3 .review .box{padding: 30px;}
    
}

@media screen and (max-width: 1024px) {
    .s1{padding-bottom: 100px;}
    .s1 .imgBx img {
        position: absolute;
        top: 0;
        right: 0;
        width: 40%;
        height: 40%;
        object-fit: cover;
    }
    .s1 .txtBx p{font-size: 28px;}
    .s1 .subTxt .right b {font-size: 22px;}
    .s1 .subTxt .right p {font-size: 18px;}
    .s2 .contBx .bottom{flex-direction: column;}
    .s2 .contBx .left .imgBx{max-width: unset}
    .s2 .contBx .left .imgBx img{width: 100%;}
    .s2 .bottomTxt{font-size: 50px;}

    .s3 .txtBx .year p{font-size: clamp(60px, 90/1024*100vw, 90px);}
    .s3 .txtBx .subTxt p{font-size: 28px;}

    .s3 .review .box{width: calc((100% - 30px) / 2);}
    .s4 {padding-bottom: 160px}
    .s4 .txtBx p {font-size: 28px;}
}
@media screen and (max-width: 820px) {
    .s1 .txtBx p {font-size: 24px;}
    .s1 .txtBx p span small {font-size: calc(18/24*1em);}
    .s1 .txtBx p br.mob{display: block;}
    .s1 .subTxt .left img {width: 90%;}
    .s1 .subTxt .right b {font-size: 20px;}
    .s1 .subTxt .right p{font-size: 16px;}
    
    .s2 {padding-top: 100px;}
    .s2 .tit {font-size: 20px;}
    .s2 .flexBx {padding-top: 100px;}
    .s2 .flexBx .barBx {display: none;}
    .s2 .contBx .right .txt p {font-size: 16px;}
    .s2 .contBx .right .txt h3 {font-size: 24px}
    .s2 .bottomTxt{font-size: 40px;}
    .s2 .bottomTxt p {line-height: 1.3;}
    .s2 .bottomTxt p br {display: block;}
    
    .s3 .txtBx .subTxt p {font-size: 24px;}
    .s3 .numBx .count p {font-size: 22px;}

    .s3 .digit-con{font-size: clamp(50px, 80/820*100vw, 80px);}
    .s3 .comma{font-size: clamp(50px, 80/820*100vw, 80px);}
    .s3 .numBx .count em{font-size: clamp(50px, 80/820*100vw, 80px);}

    .s3 .review .box {width: 100%}
    .s3 .review .box .txt p {font-size: 16px;}
}
@media screen and (max-width: 500px) {
    .s1 .txtBx p {font-size: 22px}
    .s1 .subTxt {flex-direction: column; align-items: flex-start; padding-top: 50px;}
    .s1 .subTxt .left img {width: 30%;}

    /* .s2 .tit {font-size: 28px;} */
    .s2 .contBx br{display: none;}
    .s2 {--fontsize: 28px;}
    .s2 .contBx .top p {font-size: 28px}
    .s2 .contBx .right .txt h3 {font-size: 20px;}
    .s2 .marqueeBx .marquee p {font-size: 22px;}

    .s3 .txtBx .subTxt p{font-size: 22px;}
    .s3 .numBx .count p{margin-right: 40px;}
    .s3 .digit-con{font-size: clamp(20px, 60/500*100vw, 60px);}
    .s3 .comma{font-size: clamp(20px, 60/500*100vw, 60px);}
    .s3 .numBx .count em{font-size: clamp(20px, 60/500*100vw, 60px);}

    .s4{padding-top: 100px;}
    .s4 .txtBx p{font-size: 22px;}

    .s4 .marqueeArea {padding-top: 100px}
    .s4 ._marquee .absol .mar_ch img{width: 120px;}
}
@media screen and (max-width: 360px) {
    .s1 .txtBx p {font-size: 20px}
    .s1 .txtBx p span br:not(.no-none) {display: none;}
    .s1 .subTxt .right p br {display: none;}
    /* .s2 .tit {font-size: 24px} */
    .s2 {--fontsize: 24px;}
    .s2 .contBx .top p {font-size: 24px}
    .s2 .contBx .right .txt h3 {font-size: 18px;}
    .s2 .contBx .right .txt p{font-size: 14px;}
    .s2 .marqueeBx .marquee p{font-size: 20px;}
    .s2 .bottomTxt{font-size: 30px;}

    .s3 .txtBx .year p{font-size: 42px;}
    .s3 .txtBx .subTxt p {font-size: 20px;}
    .s3 .review .box .txt p {font-size: 14px;}

    .s4 .txtBx p {font-size: 20px;}
}


.double_btnWrap{display: flex; justify-content: center;align-items: center;gap: calc(10/18*1em);padding-top: calc(90/18*1em);font-size: 18px;}
.double_btnWrap .btn{transition: all .3s ease-in-out; display: flex; justify-content: center; align-items: center; min-width: calc(210/18*1em); padding: calc(22/18*1em) calc(35/18*1em); box-sizing: border-box; border-radius: calc(9/18*1em); border: 1px solid #000; background: #fff; color: #101010; letter-spacing: -0.025em; font-family: 'Pretendard';}
.double_btnWrap .btn.black {background: #000; color: #fff;}
@media screen and (min-width: 821px) {
    .double_btnWrap .btn:hover {
        background: #000;
        color: #fff;
    }
    .double_btnWrap .btn.black:hover {
        background: #fff;
        color: #000;
    }
}
@media screen and (max-width: 820px) {
    .double_btnWrap {font-size: 16px;}
}
@media screen and (max-width: 500px) {
    .double_btnWrap {flex-direction: column;}
    .double_btnWrap .btn {padding: calc(15/16*1em) calc(20/16*1em);}
}