.etl .wrap{ width: 95%; padding: 0; margin: 0 auto; }
.etl .vertswiper .flx .txtWrap .title p b {
    background-image: linear-gradient(to right, #f3cbff 0%, #968ef3 100%);
}
.vertswiper .flx .itemWrap .swiper .swiper-slide .item .txt .num {
    background: #f5eefc;
    color: #7860df;
}

@media screen and (max-width: 820px){
    .etl .wrap{ width: 90%; }
}

.etl .s2 .vertswiper {
    background: #fbf8fe;
}


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

}
@media screen and (max-width: 1024px){
    
}
@media screen and (max-width: 820px){
}
@media screen and (max-width: 500px){
    
    .etl.archive .s2 .flx .itemWrap{ pointer-events: none; }
    
}
@media screen and (max-width: 360px){
}




.etl .s3_spacing {
    height: 300vh;
}
.etl .s3 {
    background: #fff;
    height: 100vh;
    overflow: hidden;
    --s3_pd: 70px;
    word-break: keep-all;
}
.etl .s3 .wrap {
    height: 100%;
}
.etl .s3 .box {
    height: 100%;
    display: flex; align-items: center; justify-content: space-between;
}
.etl .s3 .box .itemWrap {
    display: flex; flex-direction: column;
    position: relative;
}
.etl .s3 .box .itemWrap .item {
    width: calc(300/20*1em); /*height: calc(200/20*1em);*/
    height: calc(160/20*1em);
    font-size: 20px;
    position: relative;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    background: linear-gradient(to right, #f3f3f3 0%, #f3f3f3 100%);
    border-radius: calc(22/20*1em);
    transition: background .8s;
}
.etl .s3 .box .itemWrap .item.on b {
    color: #fff;
}
.etl .s3 .box .itemWrap .item.on p {
    color: #fff;
}
.etl .s3 .box .itemWrap .item{ margin-top: calc(20/20*1em);}
/* .etl .s3 .box .itemWrap .item + .item {
    margin-top: calc(20/20*1em);
} */
.etl .s3 .box .itemWrap .item b {
    font-family: 'Pretendard';
    font-weight: 600;
    letter-spacing: -0.03em;
    color: #222;
    line-height: calc(32/20*1em);
    transition: .4s;
    text-align: center;
}
.etl .s3 .box .itemWrap .item p {
    font-family: 'Pretendard';
    font-weight: 400;
    font-size: 16px;
    letter-spacing: -0.045em;
    color: #000;
    opacity: .7;
    transition: .4s;
    padding-top: calc(7/16*1em);
    line-height: calc(24/16*1em);
    text-align: center;
}
.etl .s3 .box .itemWrap .label {
    border-radius: 22px;
    background: linear-gradient(-90deg, #c6a8ff, #98ddf0);
    display: flex; align-items: center; justify-content: center;
    color: #fff;

    font-family: 'Pretendard';
    font-weight: 600;
    font-size: 20px;
    letter-spacing: -0.03em;
    /* color: #222; */
    /* padding-top: calc(20/18*1em); */
    padding: 23px 0;
    line-height: calc(32/20*1em);
    height: 3.2em;
    text-align: center;
    /* position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%); */
    width: 100%;
}
.etl .s3 .box .txt {
    width: 100%;
    text-align: center;
    font-family: 'Pretendard';
    font-weight: 700;
    font-size: 70px;
    line-height: calc(107/80*1em);
    letter-spacing: -0.045em;
    color: #222;
}

.etl.archive .s3 .box .txt{ font-size: 4.6875vw; }

.etl .s3 .box .txt b {
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-image: linear-gradient(to right, #98ddf0 0%, #c6a7ff 100%);
}


.etl .s3 .flexbx{
    display: flex;
    align-items: center;
    justify-items: center;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
}
.etl .s3 .flexbx .inbox{
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    width: 100%;
    z-index: 10;
    box-sizing: border-box;
}

.etl .s3 .flexbx .lbx{
    width: 50%;
    padding-right: 65px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.etl .s3 .flexbx .lbx .txt{
    font-family: 'Pretendard';
    font-weight: 700;
    font-size: 70px;
    line-height: calc(107 / 80 * 1em);
    letter-spacing: -0.045em;
    color: #222;
}

.etl .s3 .flexbx .lbx .txt b{
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-image: linear-gradient(to right, #98ddf0 0%, #c6a7ff 100%);
}

.etl .s3 .flexbx .lbx .objbx{
    max-height: 88%;
    padding-top: 60px;
    display: flex;
    align-items: flex-end;
}
.etl .s3 .flexbx .lbx .objbx img{
    object-position: bottom;
}

.etl .s3 .flexbx .rbx{
    width: 50%;
    padding-left: 65px;
    box-sizing: border-box;
    max-width: 700px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.etl .s3 .flexbx .rbx > ul{
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 30px;
    height: 100%;
}

.etl .s3 .flexbx .rbx > ul li{
    width: 100%;
    box-sizing: border-box;
    border-radius: 22px;
    overflow: hidden;
    position: relative;
    background-color: #f3f3f3;
    max-height: 30%;
}


.etl .s3 .flexbx .rbx > ul li::after{
    content: '';
    display: block;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background: linear-gradient(to right, #c6a7ff 0%, #98ddf0 100%);
    opacity: 0;
    transition: .4s;
    z-index: 0;
}

.etl .s3 .flexbx .rbx > ul li .inn{
    width: 100%;
    position: relative;
    z-index: 1;
    color: #222222;
    padding: 63px 20px;
    box-sizing: border-box;
    text-align: center;
}

.etl .s3 .flexbx .rbx > ul li .inn strong{
    font-size: 32px;
    letter-spacing: -0.045em;
    color: #555555;
    line-height: calc(42 / 34);
    font-weight: 700;
}

.etl .s3 .flexbx .rbx > ul li .inn span{
    position: absolute;
    left: 25px;
    top: 20px;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 20px;
    font-weight: 700;
    letter-spacing: -0.045em;
    color: #aaa;
    background-color: #fff;
}


.etl .s3 .flexbx .rbx > ul li.on .inn strong{
    color: #fff;
}

.etl .s3 .flexbx .rbx > ul li.on::after{
    opacity: 1;
}



@media screen and (max-width: 1680px){
    .etl .s3 .box .txt{font-size: clamp(68px, 68 / 1440 * 100vw, 70px);}
}
@media screen and (max-width: 1440px){
    .etl .s3 .box .txt{font-size: clamp(58px, 58 / 1280 * 100vw, 64px);}
    .etl .s3 .flexbx .lbx .txt{ font-size: 55px; }
    .etl .s3 .flexbx .rbx > ul li .inn strong{ font-size: 24px; }
}
@media screen and (max-width: 1280px){
    .etl .s3 .box .txt{font-size: clamp(52px, 52 / 1024 * 100vw, 58px);}
    .etl .s3 .box .itemWrap .label{font-size: clamp(16px, 16 / 1024 * 100vw, 18px);}
    .etl .s3 .box .itemWrap .item{font-size: clamp(18px, 18 / 1024 * 100vw, 20px);}
    .etl .s3 .box .itemWrap .item p{font-size: 16px;}

    .etl .s3 .flexbx .inbox{ padding: 5vh 15px; }
    .etl .s3 .flexbx .lbx{ padding-right: 15px; }
    .etl .s3 .flexbx .lbx .txt{ font-size: clamp(38px, 44 / 1280 * 100vw, 44px); }
    .etl .s3 .flexbx .rbx{ padding-left: 15px; }
    .etl .s3 .flexbx .rbx > ul li{ border-radius: 15px; }
    .etl .s3 .flexbx .rbx > ul li .inn{ padding: 40px 15px; }
    .etl .s3 .flexbx .rbx > ul li .inn strong{ font-size: 20px; }
    .etl .s3 .flexbx .rbx > ul li .inn span{ width: 30px; height: 30px; font-size: 16px; left: 15px; top: 10px; }
}
@media screen and (max-width: 1024px){
    .etl .s3 .box .itemWrap .item{
        width: calc(250 / 20 * 1em);
    }
    .etl .s3 .box .txt{font-size: clamp(34px, 34 / 820 * 100vw, 52px);}
    .etl .s3 .box .itemWrap .item b{font-size: clamp(16px, 16 / 820 * 100vw, 18px);}
    .etl .s3 .box .itemWrap .item p{font-size: clamp(14px, 14 / 820 * 100vw, 16px);}
}
@media screen and (max-width: 820px){
    .etl .s3 .box{gap: 2em;}
    .etl .s3 .box .txt{
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        transform-origin: center center;
        z-index: -1;
        font-size: clamp(30px, 30 / 500 * 100vw, 34px);
    }
    .etl .s3 .box .itemWrap{width: 100%;}
    .etl .s3 .box .itemWrap .item{width: 100%;}
    
    .etl .s3 .box .itemWrap.a .label{ border-radius: 22px; }
    .etl .s3 .box .itemWrap .label{font-size: clamp(14px, 14 / 500 * 100vw, 16px);
        min-height: 90px;box-sizing: border-box;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .etl .s3 .flexbx .rbx{ padding-left: 5px; }
    .etl .s3 .flexbx .lbx{ padding-right: 5px; }
    .etl .s3 .flexbx .lbx .txt{ font-size: clamp(30px, 34 / 820 * 100vw, 34px); }
    .etl .s3 .flexbx .lbx .objbx{ padding-top: 35px; }
    .etl .s3 .flexbx .rbx > ul li .inn{ padding: 45px 10px; }
    .etl .s3 .flexbx .rbx > ul li .inn strong{ font-size: 16px; }
}
@media screen and (max-width: 500px){
    .etl .s3 .wrap{width: 95%;}
    .etl .s3 .box{gap: 1em;}
    .etl .s3 .box .txt{font-size: clamp(22px, 22 / 360 * 100vw, 30px);}
    .etl .s3 .box .itemWrap .label {
        min-height: 100px;
    }
    .etl .s3 .box .itemWrap .item b{}
    .etl .s3 .box .itemWrap {
        display: flex;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }
    .etl .s3 .flexbx .inbox{ flex-direction: column; }
    .etl .s3 .flexbx .lbx{ width: 100%; padding: 0; }
    .etl .s3 .flexbx .rbx{ width: 100%; padding: 0; margin-top: 15px; }
    .etl .s3 .flexbx .lbx .txt{ font-size: clamp(28px, 34 / 500 * 100vw, 34px); }
    .etl .s3 .flexbx .lbx .objbx{ padding-top: 15px; }
    .etl .s3 .flexbx .rbx > ul{ gap: 10px; }
    .etl .s3 .flexbx .rbx > ul li .inn{ padding: 10px; display: flex; align-items: center; }
    .etl .s3 .flexbx .rbx > ul li .inn span{ position: static; flex-shrink: 0; }
    .etl .s3 .flexbx .rbx > ul li .inn strong{ font-size: 14px; text-align: left; padding-left: 10px; }
    .etl .s3 .flexbx .rbx > ul li .inn strong br{ display: none; }
}
@media screen and (max-width: 360px){
    .etl .s3 .box .txt{font-size: clamp(18px, 18 / 280 * 100vw, 22px);}
}



.etl .s4 {
    position: relative;
    padding-bottom: 150px;
    word-break: keep-all;
}
.etl .s4 .bg {
    width: 100%; height: 100%;
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    filter: blur(150px);
}
.etl .s4 .bg .obj {
    width: 50vw; height: 50vw;
    max-width: 500px;
    max-height: 500px;
    position: absolute;
    border-radius: 50%;
    overflow: hidden;
}
.etl .s4 .bg .obj._1 {
    top: 7%; left: -5%;
}
.etl .s4 .bg .obj._2 {
    top: 45%; right: -3%;
}
.etl .s4 .bg .obj canvas {
    width: 100%; height: 100%;
    display: block;
}

.etl .s4 .secTit {
    font-size: 28px;
    margin-top: calc(260/28*1em);
    display: flex; flex-direction: column; align-items: center;
    text-align: center;
}
.etl .s4 .secTit.left {
    align-items: flex-start;
    text-align: left;
}
.etl .s4 .secTit span {
    font-family: 'Pretendard';
    font-weight: 500;
    letter-spacing: -0.045em;
    color: #222;
}
.etl .s4 .secTit b {
    font-family: 'Pretendard';
    font-weight: 700;
    letter-spacing: -0.045em;
    font-size: calc(66/28*1em);
    padding-top: calc(25/66*1em);
    padding-bottom: calc(160/66*1em);
    color: #222;
}


.etl .s4 .wrap > .txt {
    width: 100%;
    text-align: center;
    font-family: 'Pretendard';
    font-weight: 700;
    font-size: 48px;
    line-height: calc(64/48*1em);
    letter-spacing: -0.03em;
    color: #222;
}
.etl .s4 .wrap > .txt b {
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-image: linear-gradient(to right, #98ddf0 0%, #c6a7ff 100%);
}
.etl .s4 .wrap > .txt.left{ text-align: left; }




.etl .s4 .itemWrap .item {
    display: flex; align-items: center; justify-content: space-between; margin-top: 160px;
}

.etl .s4 .itemWrap{
    padding-bottom: 250px;
}

.etl .s4 .itemWrap .item .img {
    box-sizing: border-box;
    width: 50%;
}
.etl .s4 .itemWrap .item._1 .img{ text-align: right; }
.etl .s4 .itemWrap .item .img img {
    max-width: 100%;
}
.etl .s4 .itemWrap .item .txt {
    font-size: 36px;
    width: 50%;
    max-width: 700px;
}

.etl .s4 .itemWrap .item .txt > em{ display: block; font-size: 48px; font-weight: 700; letter-spacing: -0.03em; color: #222222; line-height: calc(64 / 48); }

.etl .s4 .itemWrap .item .txt > strong{
    display: block;
    font-size: 30px;
    letter-spacing: -0.045em;
    margin-top: 50px;
    font-weight: 700;
    color: #222222;
}
.etl .s4 .itemWrap .item._2 .txt{
    padding-left: 30px; box-sizing: border-box;
}
.etl .s4 .itemWrap .item .txt b {
    font-family: 'Pretendard';
    font-weight: 700;
    letter-spacing: -0.045em;
    color: #222;
    display: inline-block;
    line-height: 1.3;
}
.etl .s4 .itemWrap .item .txt ul {
    font-family: 'Pretendard';
    font-weight: 500;
    font-size: 20px;
    letter-spacing: -0.045em;
    color: #555;
    padding-top: calc(20/20*1em);
}


.etl .s4 .itemWrap .item .txt ul li {
    display: flex; align-items: flex-start; line-height: calc(28/20*1em);
}
.etl .s4 .itemWrap .item .txt ul li .dot {
    border-radius: 50%;
}
.etl .s4 .itemWrap .item .txt ul li .dot::before {
    content: '‣';
    margin-right: calc(10/20*1em);
}
.etl .s4 .itemWrap .item .txt ul li + li {
    padding-top: calc(5/20*1em);
} 
.etl .s4 .logoWrap {
    display: flex;
    /* gap: 30px; */
}
.etl .s4 .logoWrap + .logoWrap {
    margin-top: 30px;
}
.etl .s4 .logoWrap .item {
    display: flex; flex-direction: column; align-items: flex-start;
    border: 1px solid #d4d4d4;
    border-radius: 25px;
    padding: calc(45/30*1em);
    font-size: 30px;
    position: relative;
    overflow: hidden;
    min-width: 430px;
    box-sizing: border-box;
}
.et1 .s4 .logoWrap._a .item{
   /* width: calc((100% - 30px) / 2); */
}
.etl .s4 .logoWrap .item .logos_fl{display: flex; flex-direction: column; gap: 30px;}
.etl .s4 .logoWrap.flex1 .item {
    flex: 1;
}
.etl .s4 .logoWrap .item::before {
    content: '';
    display: block;
    width: 100%; height: 100%;
    position: absolute;
    top: 0; left: 0;
    background: linear-gradient(to right, #98ddf0 0%, #c6a7ff 100%);
    opacity: 0;
    transition: .4s;
    z-index: -1;
}
/* @media screen and (min-width: 821px) {
    .etl .s4 .logoWrap .item:hover::before {
        opacity: 1;
    }
    .etl .s4 .logoWrap .item:hover b {
        color: #fff;
    }
    .etl .s4 .logoWrap .item:hover .logos .logo img.hover {
        opacity: 1;
    }
    .etl .s4 .logoWrap .item:hover .logos .logo img.default {
        opacity: 0;
    }
} */
.etl .s4 .logoWrap .item + .item {
    margin-left: calc(30/30*1em);
}
.etl .s4 .logoWrap .item b {
    font-family: 'Pretendard';
    letter-spacing: -0.045em;
    color: #fff;
    text-align: center;
    font-size: 30px;
    font-weight: 700;
    display: inline-block;
    color: #9c95f3;
    box-sizing: border-box;
    transition: .4s;
}
.etl .s4 .logoWrap .item .logos {
    display: flex; align-items: center; justify-content: center;
    flex-wrap: wrap; 
    gap: 20px;
    margin-top: 30px;
}
.etl .s4 .logoWrap .item .logos .logo{
    width: calc((100% - (20px * 3)) / 4);
    display: flex;
    align-items: center;
    justify-content: center;
}
.etl .s4 .logoWrap._b .item .logos._a .logo{
    width: calc((100% - (20px * 2)) / 3);
}
.etl .s4 .logoWrap .item .logos+.logos{
    margin-top: 30px;
}
.etl .s4 .logoWrap .item .logos._wrap{
    flex-wrap: wrap;
    width: 100%;
}
/* .etl .s4 .logoWrap .item .logos._wrap .logo{
    width: calc((100% - 45px) / 2);
}
.etl .s4 .logoWrap .item .logos._wrap._a .logo{
    width: calc((100% - 60px*2) / 3);
} */
.etl .s4 .logoWrap .item .logos._wrap._a .logo._w{width: 100%;}
.etl .s4 .logoWrap.flex1 .item .logos{
    /* gap: 70px; */
}
.etl .s4 .logoWrap .item .logos .logo {
    position: relative;
}
.etl .s4 .logoWrap .item .logos .logo img {
    transition: .4s;
    max-width: 90px;
}
.etl .s4 .logoWrap .item .logos .logo img.hover {
    opacity: 0;
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    /* width: 100%; height: 100%; */
    object-fit: contain;
}


.etl .s4 .itemWrap .subTitle dl{ color: #222222; line-height: 1.4; }
.etl .s4 .itemWrap .subTitle dl dt{ font-size: 28px; letter-spacing: -0.045em; font-weight: 500; }
.etl .s4 .itemWrap .subTitle dl dd{ font-size: 60px; letter-spacing: -0.045em; font-weight: 700; margin-top: 10px; }
.etl .s4 .itemWrap .item._2 .img .sidebx{
    width: 100%;
}
.etl .s4 .itemWrap .item._2 .img .sidebx > ul{
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    justify-content: space-between;
    max-width: 620px;
}

.etl .s4 .itemWrap .item._2 .img .sidebx > ul li{
    width: calc(50% - 10px);
    border-radius: 22px;
    overflow: hidden;
    background-color: #f3f3f3;
    padding: 5px 25px;
    box-sizing: border-box;
    height: 200px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.etl .s4 .itemWrap .item._2 .img .sidebx > ul li:nth-of-type(1){
    align-items: flex-start;
    justify-content: space-between;
    padding: 15px 25px;
}

.etl .s4 .itemWrap .item._2 .img .sidebx > ul li:nth-of-type(1) p{
    font-size: 44px;
    font-weight: 700;
    color: #222222;
    margin-top: 20px;
}

.etl .s4 .itemWrap .item._2 .img .sidebx > ul li:nth-of-type(2) p{
    font-size: 60px;
    font-weight: 700;
    color: #222222;
}

.etl .s4 .itemWrap .item._2 .img .sidebx > ul li p{
    display: flex;
    align-items: center;
}

.odometer.odometer-auto-theme, .odometer.odometer-theme-default{
    font-family: 'Pretendard' !important;
    letter-spacing: -0.045em !important;
}


.odometer.odometer-auto-theme .odometer-digit, .odometer.odometer-theme-default .odometer-digit{
    padding-right: 3px;
    margin-left: -4px;
    display: block;
}

.etl .s4 .logoWrap .item .logos.mob{
    display: none;
}

.etl .s4 .logoMoveWrap{ margin-top: 75px; }



@media screen and (max-width: 1440px){
    .etl .s4 .secTit{ margin-top: 100px; }
    .etl .s4 .secTit span{font-size: clamp(18px, 18 / 1280 * 100vw, 20px);}

    .etl .s4 .itemWrap .item .txt{font-size: unset;}
    .etl .s4 .itemWrap .item .txt b{font-size: clamp(28px, 28 / 1280 * 100vw, 38px);}
    .etl .s4 .itemWrap .item .txt ul{font-size: clamp(16px, 16 / 1280 * 100vw, 18px);}
    
    .etl .s4 .secTit b{font-size: clamp(38px, 38 / 1280 * 100vw, 48px);}
    
    .etl .s4 .logoWrap .item{min-width: 330px;padding: 25px;}
    .etl .s4 .itemWrap .item._1 .img img{width: clamp(550px, 550 / 1280 * 100vw, 645px);}

    .etl .s4 .itemWrap .item .txt > strong{ font-size: 24px; margin-top: 30px; }
    .etl .s4 .itemWrap .item._2 .img .sidebx > ul li:nth-of-type(2) p{ font-size: 44px; }
    .etl .s4 .itemWrap .item._2 .img .sidebx > ul li{ height: 160px; }

}
@media screen and (max-width: 1280px){
    .etl .s4 .secTit{ margin-top: 70px; }
    .etl .s4 .logoWrap .item b{ margin-bottom: 20px; display: block; font-size: 24px; }
    .etl .s4 .logoWrap .item .logos{display: none;}
    .etl .s4 .logoWrap .item .logos.mob{display: flex;flex-wrap: nowrap;gap: 20px;  justify-content: center; width: 100%;}
    .etl .s4 .logoWrap .item .logos+.logos{margin-top: 0;}
    .etl .s4 .logoWrap .item {
        padding: calc(35 / 30 * 1em);
    }

    .etl .s4 .secTit b{font-size: clamp(30px, 30 / 1024 * 100vw, 38px);}
    
    .etl .s4 .itemWrap{ padding-bottom: 150px; }
    .etl .s4 .itemWrap .item{ margin-top: 100px; }
    .etl .s4 .itemWrap .item._1 .img img{width: clamp(480px, 480 / 1024 * 100vw, 550px);}
    .etl .s4 .itemWrap .item._2 .img{max-width: clamp(550px, 550 / 1024 * 100vw, 700px);}
    .etl .s4 .itemWrap .item._2 .txt{padding-right: 5vw;}
    .etl .s4 .itemWrap .item .txt > em{ font-size: 32px; }

    .etl .s4 .logoWrap{flex-direction: column;gap: 1em;}
    .etl .s4 .logoWrap .item + .item{margin-left: unset;}

    .etl .s4 .itemWrap .item._2 .img .sidebx > ul{ gap: 15px; }
    .etl .s4 .itemWrap .item._2 .img .sidebx > ul li{ height: 190px; }

    .etl .s4 .wrap > .txt{ font-size: 42px; }

}
@media screen and (max-width: 1024px){
    .etl .s4 .itemWrap .item._1 .img img{width: clamp(350px, 350 / 820 * 100vw, 480px);}
    .etl .s4 .itemWrap .item._2 .img{max-width: clamp(480px, 480 / 820 * 100vw, 550px);}

    .etl .s4 .logoWrap .item .logos.mob {
        flex-wrap: wrap;
    }
    .etl .s4 .logoWrap .item .logos._c .logo{
        width: calc((100% - (20px * 2)) / 3);
    }

}
@media screen and (max-width: 820px){
    .etl .s4 .secTit{ margin-top: 70px; }
    .etl .s4{ padding-bottom: 100px; }
    
    
    .etl .s4 .logoWrap .item .logos.mob{justify-content: center; gap: 10px;}
    .etl .s4 .logoWrap .item{min-width: unset; padding: 20px 15px;}
    .etl .s4 .itemWrap{ padding-bottom: 100px; }
    .etl .s4 .itemWrap .item {
        align-items: flex-start;
        gap: 40px;
        flex-direction: column;
    }
    .etl .s4 .logoWrap .item .logos .logo img{max-width: 80px;}
    .etl .s4 .itemWrap .item._1,
    .etl .s4 .itemWrap .item._3
    {flex-direction: column-reverse; padding-top: 0; }
    .etl .s4 .itemWrap .item .img{ width: 100%; max-width: 500px; margin: 0 auto; }
    .etl .s4 .itemWrap .item._1 .img{ text-align: center; }
    .etl .s4 .itemWrap .item .txt{ width: 100%; max-width: 500px; margin: 0 auto; padding: 0; }
    .etl .s4 .itemWrap .item._2 .txt{ padding: 0; }
    .etl .s4 .secTit b{padding-bottom: 4em;font-size: clamp(24px, 24 / 500 * 100vw, 38px);}
    .etl .s4 .itemWrap .item .txt > em{ font-size: clamp(34px, 38 / 820 * 100vw, 38px); }
    .etl .s4 .itemWrap .item._2 .img{ max-width: 500px; margin: 0 auto; width: 100%; }

    .etl .s4 .itemWrap .item .txt b{font-size: clamp(20px, 20 / 500 * 100vw, 28px);}
    .etl .s4 .itemWrap .item .txt ul{font-size: clamp(14px, 14 / 500 * 100vw, 16px);}

    .etl .s4 .logoWrap .item b{font-size: clamp(24px, 24 / 500 * 100vw, 28px);}

    .etl .s4 .itemWrap .item .txt > strong{ font-size: 18px; }
    .etl .s4 .itemWrap .item._2 .txt.full{ padding-left: 0; }

    .etl .s4 .itemWrap .item._2 .img .sidebx > ul{ gap: 10px; }
    .etl .s4 .itemWrap .item._2 .img .sidebx > ul li{ height: 150px; }
    .etl .s4 .itemWrap .item._2 .img .sidebx > ul li:nth-of-type(3) img{ width: 80px; }
    .etl .s4 .itemWrap .item._2 .img .sidebx > ul li:nth-of-type(1) p{ font-size: 30px; }
    .etl .s4 .itemWrap .item._2 .img .sidebx > ul li:nth-of-type(2) p{ font-size: 30px; }

    .etl .s4 .wrap > .txt{ font-size: 35px; }
}

@media screen and (max-width: 500px){
    .etl .s4{ padding-bottom: 70px; }
   
    .etl .s4 .secTit b{padding-bottom: 4em;font-size: clamp(22px, 22 / 360 * 100vw, 24px);padding-bottom: 2em; }
    .etl .s4 .secTit span{font-size: clamp(16px, 16 / 360 * 100vw, 18px);}
    .etl .s4 .itemWrap .item .txt b{font-size: clamp(18px, 18 / 360 * 100vw, 20px);}
    .etl .s4 .logoWrap .item b{font-size: clamp(20px, 20 / 360 * 100vw, 24px);}

    .etl .s4 .logoWrap .item .logos .logo img {
        max-width: clamp(60px, 60 / 360 * 100vw, 80px);
    }

    .etl .s4 .itemWrap .item._1 .img{ padding: 0; }
    .etl .s4 .itemWrap .item._2 .img .sidebx > ul{  }
    .etl .s4 .itemWrap .item._2 .img .sidebx > ul li{ padding: 5px 10px; border-radius: 10px; width: calc(50% - 5px); height: 110px; }
    .etl .s4 .itemWrap .item._2 .img .sidebx > ul li:nth-of-type(1){ padding: 5px 10px; }
    .etl .s4 .itemWrap .item._2 .img .sidebx > ul li:nth-of-type(1) p{ font-size: 25px; margin-top: 10px; }
    .etl .s4 .itemWrap .item._2 .img .sidebx > ul li:nth-of-type(2) p{ font-size: 9vw; }
    .etl .s4 .itemWrap .item .txt > strong{ margin-top: 15px; font-size: 18px; }
    .etl .s4 .itemWrap .item .txt > em{ font-size: 19px; }

    .etl .s4 .wrap > .txt{ font-size: 24px; }

}
@media screen and (max-width: 360px){
    .etl .s4 .secTit b{font-size: clamp(20px, 20 / 280 * 100vw, 22px);}
    .etl .s4 .logoWrap .item .logos.mob{}
    .etl .s4 .logoWrap .item .logos .logo {
        width: calc((100% - (20px * 2)) / 3);
    }
    /* .etl .s4 .secTit{font-size: clamp(13px, 13 / 280 * 100vw, 14px);}
    .etl .s4 .itemWrap .item .txt{font-size: clamp(24px, 24 / 280 * 100vw, 26px);} */
}

/* box x 70% - 70%  여기부터 하기*/


/* 로고묶음 재작업 */
.etl .s4 .logobx{ margin-top: 70px; }
.etl .s4 .logobx .row{ display: flex; gap: 30px; margin-bottom: 30px; }
.etl .s4 .logobx .row:last-of-type{ margin-bottom: 0; }
.etl .s4 .logobx .row .item{ border-radius: 22px; border: 1px solid #dddddd; box-sizing: border-box; padding: 30px; background-color: #fff; }
.etl .s4 .logobx .row .item b{
    font-family: 'Pretendard';
    letter-spacing: -0.045em;
    color: #fff;
    padding: 15px 30px;
    border-radius: 25px;
    text-align: center;
    font-size: 22px;
    font-weight: 700;
    display: inline-block;
    background: linear-gradient(90deg, #c6a7ff 0%, #98ddf0 100%);
    box-sizing: border-box;
    transition: .4s;display: inline-block; margin-bottom: 30px;
}

.etl .s4 .logobx .row._a .item:nth-of-type(1){ width: calc(59% - 15px); }
.etl .s4 .logobx .row._a .item:nth-of-type(2){ width: calc(41% - 15px); }
.etl .s4 .logobx .row._b .item:nth-of-type(1){ width: calc(49% - 15px); }
.etl .s4 .logobx .row._b .item:nth-of-type(2){ width: calc(51% - 15px); }
.etl .s4 .logobx .row._c .item{ width: 100%; max-width: 850px; }


.etl .s4 .logobx .row .item .list{ display: flex; align-items: center; justify-content: center; margin-bottom: 20px; gap: 35px; }
.etl .s4 .logobx .row .item .list.mob{ display: none; }
.etl .s4 .logobx .row .item .list:last-of-type{ margin-bottom: 0; }
.etl .s4 .logobx .row .item .list li{ text-align: center; }
.etl .s4 .logobx .row .item .list li span{ display: block; font-size: 14px; letter-spacing: -0.03em; color: #555555; margin-top: 13px; line-height: 1.2; }


@media screen and (max-width: 1280px){
    .etl .s4 .logobx{ margin-top: 50px; }
    .etl .s4 .logobx .row{ gap: 15px; margin-bottom: 15px; }
    .etl .s4 .logobx .row._a .item:nth-of-type(1){ width: calc(59% - 8px); }
    .etl .s4 .logobx .row._a .item:nth-of-type(2){ width: calc(41% - 8px); }
    .etl .s4 .logobx .row._b .item:nth-of-type(1){ width: calc(49% - 8px); }
    .etl .s4 .logobx .row._b .item:nth-of-type(2){ width: calc(51% - 8px); }

    .etl .s4 .logobx .row .item{ padding: 20px; }
    .etl .s4 .logobx .row .item b{ font-size: 18px; margin-bottom: 20px; padding: 10px 20px; }

    .etl .s4 .logobx .row .item .list{ gap: 20px; }
}

@media screen and (max-width: 820px){
    .etl .s4 .logobx .row{ gap: 0; flex-direction: column; margin-bottom: 0; }
    .etl .s4 .logobx .row._a .item:nth-of-type(1){ width: 100%; }
    .etl .s4 .logobx .row._a .item:nth-of-type(2){ width: 100%; }
    .etl .s4 .logobx .row._b .item:nth-of-type(1){ width: 100%; }
    .etl .s4 .logobx .row._b .item:nth-of-type(2){ width: 100%; }
    
    .etl .s4 .logobx .row .item{ margin-bottom: 20px; }
    .etl .s4 .logobx .row .item b{ margin-bottom: 10px; }
    .etl .s4 .logobx .row .item .list{ gap: 10px; }
    .etl .s4 .logobx .row .item .list li img{ height: 36px; max-width: unset; }
    .etl .s4 .logobx .row .item .list li span{ font-size: 13px; }
}

@media screen and (max-width: 500px){
    .etl .s4 .logobx .row .item{ padding: 15px 10px; }
    .etl .s4 .logobx .row .item .list{ display: none; }
    .etl .s4 .logobx .row .item .list.mob{ display: flex; flex-wrap: wrap; gap: 15px; }
}



/* ez solution */
.etl.ez .s2{ height: 100vh; position: relative; box-sizing: border-box; background-color: #fbf8fe; display: flex; align-items: center; margin-top: -1px; word-break: keep-all; }
.etl.ez .s2 .absol{ position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: calc(800 / 1440 * 100%); z-index: 0; }
.etl.ez .s2 .absol::after{ content: ''; display: block; padding-bottom: 100%; }
.etl.ez .s2 .absol .big{ width: 100%; height: 100%; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); animation: rot 12s infinite linear; }
.etl.ez .s2 .absol .big .cir{ width: 100%; height: 100%; border-radius: 50%; border: 1px solid rgba(0,0,0,0.05); box-sizing: border-box; }

.etl.ez .s2 .absol .dot{ width: 32px; height: 32px; border-radius: 50%; background: linear-gradient(0deg, #c6a7ff, #98ddf0); position: absolute; left: 50%; top: 0; transform: translate(-50%, -50%); }

.etl.ez .s2 .absol .small{ width: calc(630 / 800 * 100%); height: calc(630 / 800 * 100%); position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); animation: rot 8s infinite linear; animation-direction: reverse; }
.etl.ez .s2 .absol .small .cir{ width: 100%; height: 100%; border-radius: 50%; border: 1px solid rgba(0,0,0,0.1); box-sizing: border-box; }


@keyframes rot {
    0%{ transform: translate(-50%, -50%) rotate(0deg); }
    100%{ transform: translate(-50%, -50%) rotate(360deg); }
}


.etl.ez .s2 .absol .white{ width: calc(290 / 800 * 100%); height: calc(290 / 800 * 100%); background-color: #fff; border: 1px solid #f3f3f3; border-radius: 50%; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); }

.etl.ez .s2 .absol .title{ position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 48px; letter-spacing: -0.03em; line-height: calc(74 / 48); font-weight: 700; text-align: center; width: 100%; }
.etl.ez .s2 .absol .title b{
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-image: linear-gradient(to right, #98ddf0 0%, #c6a7ff 100%);
}

.etl.ez .s2 .bxlist{ position: relative; z-index: 1; display: flex; justify-content: space-between; height: 100%; align-items: center; }
.etl.ez .s2 .bxlist > ul{ width: 50%; max-width: 610px; box-sizing: border-box; padding: 0 40px; display: flex; flex-direction: column; gap: 100px; }
.etl.ez .s2 .bxlist > ul li{ width: 80%; max-width: 320px; border-radius: 22px; box-sizing: border-box; background: linear-gradient(0deg, #c6a7ff, #98ddf0); padding: 1px; }
.etl.ez .s2 .bxlist > ul._l li:nth-of-type(2n-1){ margin-left: auto; } 
.etl.ez .s2 .bxlist > ul._r li:nth-of-type(2n){ margin-left: auto; }
.etl.ez .s2 .bxlist > ul li .inn{ width: 100%; background-color: #fff; border-radius: 21px; font-size: 24px; font-weight: 700; letter-spacing: -0.03em; color: #000; line-height: calc(32 / 24); height: 160px; display: flex; align-items: center; justify-content: center; padding: 0 10px; box-sizing: border-box; text-align: center; transition-duration: 0.2s; }
.etl.ez .s2 .bxlist > ul li.on .inn{ color: #fff; background-color: rgba(255,255,255,0); }


.etl.ez .s4{ padding-bottom: 0; }



@media screen and (max-width: 1280px){
    .etl.ez .s2 .absol .title{ font-size: 3.75vw; }
    .etl.ez .s2 .absol .dot{ width: 25px; height: 25px; }
    .etl.ez .s2 .bxlist > ul{ padding: 0; gap: 40px; }
    .etl.ez .s2 .bxlist > ul._l{ padding-right: 10%; }
    .etl.ez .s2 .bxlist > ul._r{ padding-left: 10%; }
    .etl.ez .s2 .bxlist > ul li{ max-width: 250px; }
    .etl.ez .s2 .bxlist > ul li .inn{ font-size: 20px; height: 120px; }

}

@media screen and (max-width: 820px){
    .etl.ez .s2{ height: unset; padding: 70px 0; box-sizing: border-box; }
    .etl.ez .s2 .absol{ position: relative; transform: unset; left: 0; top: 0; margin: 0 auto; width: 90%; max-width: 500px; }
    .etl.ez .s2 .absol .title{ font-size: 5.75vw; }

    .etl.ez .s2 .bxlist{ gap: 20px; margin-top: 30px; }
    .etl.ez .s2 .bxlist > ul{ gap: 20px; }
    .etl.ez .s2 .bxlist > ul li{ margin: 0 auto; width: 100%; }
    .etl.ez .s2 .bxlist > ul li .inn{ font-size: 16px; height: 100px; }
    .etl.ez .s2 .bxlist > ul._l,
    .etl.ez .s2 .bxlist > ul._r{ padding: 0; }
}

@media screen and (max-width: 500px){
    .etl.ez .s2 .absol .dot{ width: 20px; height: 20px; }
    .etl.ez .s2{ padding: 50px 0; }
    .etl.ez .s2 .bxlist{ gap: 10px; }
    .etl.ez .s2 .bxlist > ul li{ border-radius: 16px; }
    .etl.ez .s2 .bxlist > ul li .inn{ font-size: 14px; border-radius: 15px; }
    .etl.ez .s2 .bxlist > ul li .inn br{ display: none; }
}