/* max-width */
@media screen and (max-width:1600px) {
	.max-1600{display: block;}
	.min-1601{display: none;}
	.max-1600-none{display: none;}
}
@media screen and (max-width:1440px) {
	.max-1440{display: block;}
	.min-1441{display: none;}
	.max-1440-none{display: none;}
}
@media screen and (max-width:1280px) {
	.max-1280{display: block;}
	.min-1281{display: none;}
	.max-1280-none{display: none;}
}
@media screen and (max-width:1024px) {
	.max-1024{display: block;}
	.min-1025{display: none;}
	.max-1024-none{display: none;}
}
@media screen and (max-width:820px) {
	.max-820{display: block;}
	.min-821{display: none;}
	.max-820-none{display: none;}
}
@media screen and (max-width:500px) {
	.max-500{display: block;}
	.min-501{display: none;}
	.max-500-none{display: none;}

    /**/
    .sub.etl .sec_titBx p br.max-500-none{
        display: none;
    }
}
@media screen and (max-width:360px) {
	.max-360{display: block;}
	.min-361{display: none;}
	.max-360-none{display: none;}

    /**/
    .sub.dx .sec_titBx span br.max-360-none{
        display: none;
    }
}

@media screen and (max-width:320px) {
	.max-320{display: block;}
	.min-321{display: none;}
	.max-320-none{display: none;}
}


/* min-width */
@media screen and (min-width:1601px) {
	.min-1601{display: block;}
	.max-1600{display: none;}
	.min-1601-none{display: none;}
}
@media screen and (min-width:1441px) {
	.min-1441{display: block;}
	.max-1440{display: none;}
	.min-1441-none{display: none;}
}
@media screen and (min-width:1281px) {
	.min-1281{display: block;}
	.max-1280{display: none;}
	.min-1281-none{display: none;}
}
@media screen and (min-width:1025px) {
	.min-1025{display: block;}
	.max-1024{display: none;}
	.min-1025-none{display: none;}
}
@media screen and (min-width:821px) {
	.min-821{display: block;}
	.max-820{display: none;}
	.min-821-none{display: none;}
}
@media screen and (min-width:501px) {
	.min-501{display: block;}
	.max-500{display: none;}
	.min-501-none{display: none;}
}
@media screen and (min-width:321px) {
	.min-321{display: block;}
	.max-320{display: none;}
	.min-321-none{display: none;}
}


/* 서브페이지 공통 */
.sub .sec_titBx {
    font-family: 'Pretendard';
    font-weight: 700;
    font-size: 48px;
    line-height: calc(64/48*1em);
    letter-spacing: -0.03em;
    color: #222;
    text-align: center;
    padding-bottom: calc(70/48*1em);
    word-break: keep-all;
}

.sub .sec_titBx.left{ text-align: left; }

.sub .sec_titBx b {
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-image: linear-gradient(to right, #5caad8 0%, #74e2c5 100%);
}
.sub .sec_titBx span {
    display: inline-block;
    font-size: 22px;
    font-weight: 400;
    letter-spacing: -0.03em;
    color: #555;
    padding-top: calc(30/22*1em);
    line-height: calc(36/22*1em);
}


.sub.etl .sec_titBx,
.sub.dx .sec_titBx{ padding-bottom: 0; }
.sub.etl .sec_titBx b{ background-image: linear-gradient(to right, #98ddf0 0%, #c6a7ff 100%); }






@media screen and (max-width: 1400px) {
    .sub .sec_titBx {
        font-size: clamp(44px, 48 / 1440 * 100vw, 48px);
    }
}
@media screen and (max-width: 1280px) {
    .sub .sec_titBx {
        font-size: clamp(38px, 44 / 1280 * 100vw, 44px);
    }
    .sub .sec_titBx span {
        font-size: clamp(20px, 22 / 1280 * 100vw, 22px);
    }
}
@media screen and (max-width: 1024px) {
    .sub .sec_titBx {
        font-size: clamp(34px, 38 / 1024 * 100vw, 38px);
    }
    .sub .sec_titBx span {
        font-size: clamp(18px, 20 / 1024 * 100vw, 20px);
        max-width: 500px;
        word-break: keep-all;
    }
    .sub .sec_titBx span br {
        display: none;
    }


    .sub.dx .sec_titBx span br {
        display: block;
    }
    
}
@media screen and (max-width: 820px) {
    .sub .sec_titBx {
        font-size: clamp(34px, 38 / 820 * 100vw, 38px);
    }
}
@media screen and (max-width: 500px) {
    .sub .sec_titBx {
        font-size: clamp(28px, 34 / 500 * 100vw, 34px);
    }
    .sub .sec_titBx p br {
        display: none;
    }
    .sub .sec_titBx span {
        font-size: clamp(16px, 18 / 1024 * 100vw, 18px);
    }


    .sub.etl .sec_titBx p br{
        display: block;
    }
    .sub.dx .sec_titBx p br{
        display: block;
    }

    

}
@media screen and (max-width: 360px) {
    .sub .sec_titBx {
        font-size: clamp(20px, 28 / 360 * 100vw, 28px);
    }
}



.sub{overflow: hidden;}
.sub .s1 {
    overflow: hidden;
    height: 100vh;
    display: flex; flex-direction: column; align-items: center;
    position: relative;
}
.sub .s1 .bg {
    width: 100%; height: 100%;
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
}
.sub .s1 .dot_grid {
    width: 105%; height: 105%;
    position: absolute;
    top: 50%; left: 50%; transform: translate(-50%, -50%);
    z-index: 2;
}
.sub .s1 .dot_grid canvas {
    width: 100%; height: 100%;
    display: block;
    position: absolute;
    top: 0; left: 0;
}
.sub .s1 .gradient-bg {
    width: 100%; height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
}

.sub .s1 .gradient-bg .circle{
    width: 100%; height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 0;
}
.sub .s1 .gradient-bg .circle img{ width: 100%; height: 100%; object-fit: cover; }


.sub .s1 .gradient-bg canvas {
    width: 100%; height: 100%;
    display: block;
    position: absolute;
    top: 0;
    left: 0;
}
.sub .s1 .txt {
    width: 95%;
    flex-grow: 1;
    position: relative;
    display: flex; align-items: center; justify-content: center; flex-direction: column;
    z-index: 3;
    padding-top: 60px;
    box-sizing: border-box;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.9) 20%, rgba(255, 255, 255, 0) 70%);
    margin: 0 auto;
}
.sub .s1 .txt span {
    font-family: 'Pretendard';
    font-weight: 600;
    font-size: 24px;
    letter-spacing: -0.03em;
    color: #222222;
    opacity: 0;
    transform: translateY(40px);
    text-align: center;
    word-break: keep-all;
    line-height: 1.3;
}
.sub .s1 .txt b {
    text-align: center;
    line-height: 1.3;
    font-family: 'Poppins', 'Pretendard';
    font-weight: 600;
    font-size: 76px;
    letter-spacing: -0.045em;
    color: #222222;
    padding-top: calc(30/102*1em);
    padding-bottom: calc(25/102*1em);
    opacity: 0;
    transform: translateY(40px);
}
.sub .s1 .txt p > * {
    opacity: 0;
    transform: translateY(40px);
}
.sub .s1 .txt p {
    font-family: 'Pretendard';
    text-align: center;
    width: 100%;
    word-break: keep-all;
    font-weight: 400;
    font-size: 20px;
    line-height: calc(34/20*1em);
    letter-spacing: -0.03em;
    color: #666666;
    padding-bottom: calc(75/20*1em);
}
.sub .s1 .txt .tab {
    display: flex; align-items: center; justify-content: center;
    width: 100%;
    font-size: 22px;
}
.sub .s1 .txt .tab a {
    font-family: 'Pretendard';
    font-weight: 700;
    letter-spacing: -0.03em;
    color: #222222;
    /* transition: color 0.4s, background 0.4s; */
    padding: calc(16/22*1em) calc(33/22*1em);
    border-radius: calc(25/22*1em);
    opacity: 0;
    transform: translateY(40px);
}
.sub .s1 .txt .tab a.on {
    color: #fff;
    background: linear-gradient(to left, #c6a7ff 0%, #98ddf0 100%, #000 100%);
}
.sub .s1 .txt .tab a:not(.on):hover {
    color: #c6a7ff;
}
.sub .s1 .rect {
    width: 100%; height: 20vh;
    max-width: 1600px;
    background: #fbf8fe;
    border-radius: 70px 70px 0 0;
    position: relative;
    z-index: 2;
}
.sub .s1 .obj {
    position: absolute;
    right: 45px;
    bottom: 137px;
    width: 662px;
    z-index: 3;
}
.sub .s1 .obj svg {
    overflow: visible;
}
.sub .s1 .obj #cloud {
    animation: cloud 4s ease-in-out infinite;
}
.sub .s1 .obj #purple_cloud {
    opacity: .4;
    animation: purple_cloud 15s ease-in-out infinite;
}
.sub .s1 .obj #pink {
    transform-origin: center;
    animation: pink 3s ease-in-out infinite;
}
.sub .s1 .obj #gray_gear {
    transform-origin: center;
    animation: gray_gear 3s ease-in-out infinite;
}
.sub .s1 .obj #docu {
    opacity: .5;
    animation: docu 3s ease-in-out infinite;
}
.sub .s1 .obj #purple_arrow {
    animation: purple_arrow 3s ease-in-out infinite;
}
.sub .s1 .obj #blue_arrow {
    animation: blue_arrow 3s ease-in-out infinite;
}

@keyframes cloud {
    0% {transform: translate(0px, 10px)}
    50% {transform: translate(0px, -10px)}
    100% {transform: translate(0px, 10px)}
}
@keyframes purple_cloud {
    0% {transform: translate(-15px, 15px)}
    50% {transform: translate(15px, -15px)}
    100% {transform: translate(-15px, 15px)}
}
@keyframes pink {
    0% {transform: scale(1) translate(0px, -10px)}
    50% {transform: scale(1.05) translate(10px, -15px)}
    100% {transform: scale(1) translate(0px, -10px)}
}
@keyframes gray_gear {
    0% {transform: scale(1) translate(0px, 10px)}
    50% {transform: scale(0.95) translate(-10px, 15px)}
    100% {transform: scale(1) translate(0px, 10px)}
}
@keyframes docu {
    0% {transform: translate(0px, 0px)}
    50% {transform: translate(0px, 10px)}
    100% {transform: translate(0px, 0px)}
}
@keyframes purple_arrow {
    0% {transform: translateY(0px);}
    50% {transform: translateY(-20px);}
    100% {transform: translateY(0px);}
}
@keyframes blue_arrow {
    0% {transform: translateY(0px);}
    50% {transform: translateY(20px);}
    100% {transform: translateY(0px);}
}

@media screen and (max-width: 1680px){
    .sub .s1 .txt span{font-size: clamp(22px, 22 / 1440 * 100vw, 24px);}
    .sub .s1 .txt b{font-size: clamp(62px, 62 / 1440 * 100vw, 76px);}
    .sub .s1 .txt p{font-size: 19px;}
    .sub .s1 .obj{width: clamp(550px, 550 / 1440 * 100vw, 662px);}
}
@media screen and (max-width: 1440px){
    .sub .s1 .txt span{ font-size: clamp(20px, 20 / 1440 * 100vw, 22px); }
    .sub .s1 .txt b{font-size: clamp(60px, 60 / 1280 * 100vw, 70px);}
    .sub .s1 .obj{width: clamp(480px, 480 / 1280 * 100vw, 550px);}
    .sub .s1 .txt p{ font-size: 16px; }
}
@media screen and (max-width: 1280px){
    .sub .s1 .rect{ height: 10vh; }
    .sub .s1 .txt span{font-size: clamp(18px, 18 / 1024 * 100vw, 18px);}
    .sub .s1 .txt b{font-size: clamp(55px, 55 / 1024 * 100vw, 60px);}
    .sub .s1 .obj{width: clamp(420px, 420 / 1024 * 100vw, 480px);}
    .sub .s1 .txt .tab{font-size: clamp(18px, 18 / 1024 * 100vw, 20px);}

}
@media screen and (max-width: 1024px){
    .sub .s1 .txt b{font-size: clamp(52px, 52 / 820 * 100vw, 50px);}
    .sub .s1 .obj {
        right: 10px;
        bottom: 200px;
        width: clamp(380px, 380 / 820 * 100vw, 420px);
    }
    .sub .s1 .txt .tab {flex-wrap: wrap;}
}
@media screen and (max-width: 820px){
    .sub .s1 .txt{ width: 100%; padding: 0 5%; box-sizing: border-box; }
    .sub .s1 .txt span{font-size: clamp(16px, 16 / 500 * 100vw, 18px);}
    .sub .s1 .txt b{font-size: clamp(35px, 35 / 500 * 100vw, 45px);}
    .sub .s1 .obj{width: clamp(250px, 250 / 500 * 100vw, 350px);}
    .sub .s1 .txt .tab{font-size: clamp(16px, 16 / 500 * 100vw, 18px);}
    .sub .s1 .txt .tab a{ padding: 10px; }
}
@media screen and (max-width: 500px){
    .sub .s1 .txt span{font-size: clamp(16px, 16 / 360 * 100vw, 20px);}
    .sub .s1 .txt b{font-size: clamp(34px, 34 / 360 * 100vw, 42px);}
    .sub .s1 .txt p{font-size: clamp(14px, 14 / 360 * 100vw, 16px);}
    .sub .s1 .txt .tab{font-size: clamp(14px, 14 / 360 * 100vw, 16px); max-width: 280px;}
}
@media screen and (max-width: 360px){
    .sub .s1 .txt b{font-size: clamp(30px, 30 / 280 * 100vw, 34px);}
}


/* qsa tab menu */
.sub .tabWrap {
    display: flex; justify-content: center;
    gap: 20px;
    position: relative; 
    z-index: 1;
}
.sub .tabWrap .tab {
    position: relative;
    width: calc(280/22*1em); height: calc(80/22*1em);
    display: flex; align-items: center; justify-content: center;
    border-radius: calc(20.5/22*1em);
    background-image: linear-gradient(to right, #5caad8 0%, #74e2c5 100%);
    font-family: 'Pretendard';
    font-size: 22px;
    font-weight: 600;
    letter-spacing: -0.03em;
    transition: .4s;
    cursor: pointer;
    padding: 1px;
}
.sub .tabWrap .tab .tab_inner {
    display: block;
    width: 100%; height: 100%;
    background: #fff;
    color: #aaa;
    border-radius: calc(18.5/22*1em);
    transition: .4s;
    display: flex; align-items: center; justify-content: center;
    text-align: center;
    position: relative;
}
.sub .tabWrap .tab.act .tab_inner {
    color: #fff;
    background: transparent;
}
.sub .tabWrap .tab .tab_inner span {
    position: absolute;
    z-index: 1;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
}
@media screen and (min-width: 821px) {
    .sub .tabWrap .tab:hover .tab_inner {
        color: #fff;
        background: transparent;
    }
}
@media screen and (max-width: 1280px) {
    .sub .tabWrap .tab {
        font-size: clamp(18px, 22 / 1280 * 100vw, 22px);
    }
}
@media screen and (max-width: 1024px) {
    .sub .tabWrap .tab {
        font-size: clamp(16px, 20 / 1024 * 100vw, 20px);
    }
}
@media screen and (max-width: 820px) {
    .sub .tabWrap {
        gap: 10px;
    }
    .sub .tabWrap .tab {
        font-size: clamp(14px, 18 / 820 * 100vw, 18px);
    }
}
@media screen and (max-width: 500px) {
    .sub .tabWrap {
        flex-wrap: wrap;
    }
    .sub .tabWrap .tab {
        width: calc(100% / 2 - 10px);
        text-align: center;
    }
}
@media screen and (max-width: 360px) {
    .sub .tabWrap .tab {
        width: 100%;
        font-size: 13px;
    }
}

.vertswiper .tabViewer {
    opacity: 0;
    visibility: hidden;
    transition: .4s;
}
.vertswiper .tabViewer.act {
    opacity: 1;
    visibility: visible;
}
.vertswiper .tabViewer:not(._1) {
    position: absolute;
    top: 0; left: 50%;
    transform: translateX(-50%);
    width: 100%;
}

.vertswiper {
    padding-top: 45px;
    position: relative;
}
.vertswiper::before {
    content: '';
    display: block;
    width: 100%; height: 3px;
    background: inherit;
    position: absolute;
    top: 0; left: 0;
    transform: translateY(-50%);
    z-index: 1;
}
.vertswiper .flx {
    display: flex; align-items: center; justify-content: space-between;
    box-sizing: border-box;
}
.vertswiper .wrap[max='1600'] .flx {
    padding-left: 4.1845%;
}
.vertswiper .flx .txtWrap {
    display: flex; align-items: center;
    position: relative;
    font-size: 60px;
}
.vertswiper.smallTitle .flx .txtWrap {
    font-size: 48px;
}
.vertswiper .flx .txtWrap .icon {
    width: calc(210/60*1em); height: calc(410/60*1em);
    position: absolute; top: 50%; left: -15%;
    transform: translateY(-30%);
}
.vertswiper .flx .txtWrap .icon img {
    width: 100%; height: 100%;
    object-fit: contain;
}
.vertswiper .flx .txtWrap .title {
    display: flex; flex-direction: column;
}
.vertswiper .flx .txtWrap:has(.icon) .title {
    padding-left: calc(180/60*1em);
}
.vertswiper .flx .txtWrap .title p {
    font-family: 'Pretendard';
    font-size: inherit;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: -0.045em;
    color: #222;
    padding-bottom: calc(15/60*1em);
}
.vertswiper.smallTitle .flx .txtWrap .title p {
    letter-spacing: -0.03em;
}
.vertswiper .flx .txtWrap .title p b {
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-image: linear-gradient(to right, #74e2c5 0%, #5caad8 100%);
}
.vertswiper .flx .txtWrap .title span {
    font-family: 'Pretendard';
    font-size: 20px;
    line-height: 1.4;
    letter-spacing: -0.045em;
    color: #555;
    word-break: keep-all;
}
.vertswiper .flx .itemWrap {
    width: 50%;
    padding-left: calc(60/1440*100%);
    box-sizing: border-box;
    overflow: hidden;
}
.vertswiper .wrap[max='1600'] .flx .itemWrap {
    padding-right: 4.1845%;
}
.vertswiper .flx .itemWrap .swiper {
    overflow: visible;
    height: 90vh;
    max-height: 630px;
}
.vertswiper .flx .itemWrap .swiper .swiper-wrapper {
    display: grid !important;
    grid-auto-rows: 1fr;
    justify-items: flex-end;
}
.vertswiper .flx .itemWrap .swiper .swiper-slide {
    width: 90%;
    transition: width .4s;
}
.vertswiper .flx .itemWrap .swiper .swiper-slide.swiper-slide-active {
    width: 100%;
}
.vertswiper .flx .itemWrap .swiper .swiper-slide .item {
    background: transparent;
    border-radius: 20px;
    overflow: hidden;
    font-size: 28px;
    height: 100%;
    box-shadow: 0px 10px 30px 0px rgba(0, 0, 0, 0.00);
    transition: .4s;
    word-break: keep-all;
}
.vertswiper .flx .itemWrap .swiper .swiper-slide.swiper-slide-active .item {
    background: #fff;
    box-shadow: 0px 10px 30px 0px rgba(0, 0, 0, 0.05);
}
.vertswiper .flx .itemWrap .swiper .swiper-slide .item .txt {
    display: flex; align-items: center; justify-content: flex-start;
    padding: calc(00/28*1em) calc(60/28*1em);
    height: 100%;
    box-sizing: border-box;
}
.vertswiper .flx .itemWrap .swiper .swiper-slide .item .txt .num {
    font-family: 'Pretendard';
    font-weight: 500;
    font-size: 16px;
    letter-spacing: -0.03em;
    color: #5caad8;
    width: calc(80/16*1em); height: calc(80/16*1em);
    display: flex; align-items: center; justify-content: center;
    border-radius: 50%;
    background: #baf0e2;
    margin-right: calc(30/16*1em);
    flex-shrink: 0;
}
.vertswiper .flx .itemWrap .swiper .swiper-slide .item .txt .bx {
    display: flex; flex-direction: column;
    font-size: inherit;
    transition: .4s;
    transform-origin: left center;
    transform: scale(0.9);
}
.vertswiper .flx .itemWrap .swiper .swiper-slide.swiper-slide-active .item .txt .bx {
    transform: scale(1);
}
.vertswiper .flx .itemWrap .swiper .swiper-slide .item .txt .bx p {
    font-family: 'Pretendard';
    font-weight: 700;
    font-size: inherit;
    letter-spacing: -0.03em;
    line-height: calc(42/28*1em);
    color: #222;
    padding-bottom: calc(10/28*1em);
}
.vertswiper .flx .itemWrap .swiper .swiper-slide .item .txt .bx ol {
    display: flex; flex-direction: column;
}
.vertswiper .flx .itemWrap .swiper .swiper-slide .item .txt .bx ol li {
    font-family: 'Pretendard';
    font-weight: 400;
    font-size: 20px;
    line-height: calc(32/20*1em);
    letter-spacing: -0.045em;
    color: #222;
    transition: .4s;
}
@media screen and (max-width: 1600px) {
    .vertswiper .flx .itemWrap .swiper .swiper-slide .item {
        font-size: clamp(24px, 28 / 1600 * 100vw, 28px);
    }
    .vertswiper .flx .itemWrap .swiper .swiper-slide .item .txt .bx ol li {
        font-size: clamp(18px, 20 / 1600 * 100vw, 20px);
    }
}
@media screen and (max-width: 1440px) {
    .vertswiper .flx .txtWrap {
        font-size: clamp(50px, 60 / 1440 * 100vw, 60px);
    }
    .vertswiper.smallTitle .flx .txtWrap {
        font-size: clamp(40px, 48 / 1440 * 100vw, 48px);
    }
    .vertswiper .flx .itemWrap {
        width: 60%;
    }
}
@media screen and (max-width: 1280px) {
    .vertswiper .flx .txtWrap {
        font-size: clamp(42px, 50 / 1280 * 100vw, 50px);
    }
    .vertswiper.smallTitle .flx .txtWrap {
        font-size: clamp(36px, 42 / 1280 * 100vw, 42px);
    }
    .vertswiper .flx .txtWrap .title span {
        font-size: clamp(18px, 20 / 1280 * 100vw, 20px);
    }
    .vertswiper .flx .itemWrap {
        width: 60%;
    }
    .vertswiper .flx .itemWrap .swiper .swiper-slide .item .txt {
        padding: 0 calc(40/28*1em);
    }
    .vertswiper .flx .itemWrap .swiper .swiper-slide .item .txt .num {
        width: calc(60/16*1em); height: calc(60/16*1em);
    }
}
@media screen and (max-width: 1024px) {
    .vertswiper .flx {
        flex-direction: column;
        align-items: flex-start;
    }
    .vertswiper .wrap[max='1600'] .flx {
        padding-left: 0;
    }
    .vertswiper .flx .txtWrap {
        margin-top: calc(30 / 42*1em);
        margin-bottom: calc(30 / 42*1em);
    }
    .vertswiper .flx .txtWrap .icon {
        position: absolute;
        left: 0;
        font-size: calc(50/60*1em);
    }
    .vertswiper .flx .txtWrap:has(.icon) .title {
        padding-left: calc(200/60*1em);
    }
    .vertswiper .flx .itemWrap {
        align-self: flex-end;
        width: 100%;
        max-width: 600px;
        padding-left: 0;
    }
    .vertswiper .wrap[max='1600'] .flx .itemWrap {
        padding-right: 0;
    }
    .vertswiper .flx .itemWrap .swiper {
        height: 550px;
        max-height: none;
        pointer-events: none;
    }
    .vertswiper .flx .itemWrap .swiper .swiper-slide .item .txt {
        padding: 0 calc(60/24*1em);
    }
}
@media screen and (max-width: 820px) {
    
    
    .vertswiper.smallTitle {
        padding-top: 0;
    }
    .vertswiper .flx .txtWrap {
        font-size: clamp(36px, 48 / 820 * 100vw, 48px);
    }
    .vertswiper.smallTitle .flx .txtWrap {
        font-size: clamp(32px, 36 / 820 * 100vw, 36px);
    }
    .vertswiper .flx .itemWrap .swiper .swiper-slide .item {
        font-size: clamp(20px, 24 / 820 * 100vw, 24px);
    }
    .vertswiper .flx .itemWrap .swiper .swiper-slide .item .txt {
        padding: 0 calc(40/20*1em);
    }
    .vertswiper .flx .itemWrap .swiper .swiper-slide .item .txt .bx ol li {
        font-size: clamp(16px, 18 / 820 * 100vw, 18px);
    }

    /* 컨텐츠에 따른 슬라이드높이 */
    .etl .vertswiper .flx .itemWrap .swiper{ height: 410px; }
    .etl.archive .vertswiper .flx .itemWrap .swiper{ height: 580px; }
    .qsa .vertswiper .flx .itemWrap .swiper{ height: 560px; }
    .dx .vertswiper .flx .itemWrap .swiper{ height: 560px; }

}
@media screen and (max-width: 500px) {
    .vertswiper .flx {
        align-items: center;
    }
    .vertswiper.smallTitle .flx {
        align-items: flex-start;
    }
    .vertswiper .flx .txtWrap {
        margin-bottom: calc(50/28*1em);
        font-size: clamp(26px, 32 / 500 * 100vw, 32px);
    }
    .vertswiper.smallTitle .flx .txtWrap {
        font-size: clamp(24px, 32 / 500 * 100vw, 32px);
    }
    .vertswiper .flx .txtWrap .title span {
        font-size: clamp(14px, 16 / 500 * 100vw, 16px);
    }
    .vertswiper .flx .itemWrap .swiper {
        height: 650px;
    }
    .vertswiper .flx .itemWrap .swiper .swiper-slide {
        width: 100%;
    }
    .vertswiper .flx .itemWrap .swiper .swiper-slide .item {
        font-size: clamp(18px, 20 / 500 * 100vw, 20px);
    }
    .vertswiper .flx .itemWrap .swiper .swiper-slide .item {
        background: #fff;
    }
    .vertswiper .flx .itemWrap .swiper .swiper-slide .item .txt {
        padding: calc(20/18*1em);
        flex-direction: column;
        align-items: flex-start;
        justify-content: center;
    }
    .vertswiper .flx .itemWrap .swiper .swiper-slide .item .txt .num {
        font-size: 14px;
        margin-right: 0;
        margin-bottom: calc(10/14*1em);
        width: calc(50 / 16 * 1em);
        height: calc(50 / 16 * 1em);
    }
    .vertswiper .flx .itemWrap .swiper .swiper-slide .item .txt .bx ol li {
        font-size: clamp(14px, 16 / 500 * 100vw, 16px);
    }
}