._memory .cont {
    padding: 200px 0 0px;
}

._memory .tab {
    opacity: 0;
    transform: translateY(40px);
    display: flex;
    justify-content: center;
    font-size: 32px;
    letter-spacing: -0.03em;
    font-family: 'Pretendard';
    margin-bottom: calc(145/32*1em);
    gap: calc(50/32*1em);
}

._memory .tabItem {
    position: relative;
    padding: calc(20/32*1em) calc(30/32*1em);
    color: #999999;
    font-weight: 500;
    cursor: pointer;
    transition: color 0.3s ease-in-out, font-weight 0.3s ease-in-out;
}

._memory .tabItem.active {
    color: #0753a2;
    font-weight: 700;
}

._memory .tabItem::before {
    content: '';
    position: absolute;
    bottom: 0; left: 50%;
    transform: translateX(-50%);
    width: 0%; height: 2px;
    background: #0753a2;
    transition: width 0.3s ease-in-out;
}

._memory .tabItem.active::before {
    width: 100%;
}

._memory .tabItem .circle {
    position: absolute;
    top: 0; left: 0;
    width: calc(44/32*1em); height: calc(44/32*1em);
    background: #fff;
    border-radius: 50%;
    border: 5px solid #eeeeee;
    box-sizing: border-box;
    transition: border-color 0.3s ease-in-out;
}

._memory .tabItem.active .circle {
    border-color: #e2f0f8;
}

._memory .tabItem span {
    position: relative;
    z-index: 1;
}

@media screen and (max-width: 821px) {
    ._memory .tabItem:hover {
        color: #0753a2;
    }

    ._memory .tabItem:hover .circle {
        border-color: #e2f0f8;
    }
}


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

.rangeBox::before {
    content: '';
    padding-top: calc(800/1313*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(70/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(70/24*1em); height: calc(70/24*1em);
    background: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 5px solid #0753a2;
    box-sizing: border-box;
    color: #0753a2;
}

@media screen and (max-width: 1440px) {
    ._memory .cont {
        padding: 180px 0 0px;
    }
    
    ._memory .tab {
        font-size: 28px;
    }
}

@media screen and (max-width: 1280px) {
    ._memory .cont {
        padding: 160px 0 0px;
    }
    
    ._memory .tab {
        font-size: 26px;
        gap: calc(40/26*1em);
    }
}

@media screen and (max-width: 1024px) {
    ._memory .cont {
        padding: 140px 0 0px;
    }
    
    ._memory .tab {
        font-size: 24px;
        gap: calc(30/24*1em);
    }
}

@media screen and (max-width: 820px) {
    ._memory .cont {
        padding: 100px 0 0px;
    }
    
    ._memory .tab {
        font-size: 20px;
        gap: 10px;
        flex-wrap: wrap;
        justify-content: space-between;
        margin-bottom: calc(50/20*1em);
    }
    
    ._memory .tabItem {
        width: calc(100% / 2 - 5px);
        padding: calc(15/20*1em) calc(20/20*1em);
        box-sizing: border-box;
    }
    
    .range__image > div .txt {
        font-size: 16px;
        padding: calc(15/16*1em);
    }
    
    .range__button {
        font-size: 20px;
    }
}

@media screen and (max-width: 500px) {
    ._memory .cont {
        padding: 100px 0 0px;
    }
    
    ._memory .tab {
        font-size: 16px;;
    }
    
    ._memory .tabItem {
        padding: calc(10/16*1em) calc(15/16*1em);
    }
    
    .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) {
    ._memory .cont {
        padding: 80px 0 0px;
    }
    
    ._memory .tab {
        font-size: 14px;
        gap: calc(10/14*1em);
    }
    
    ._memory .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;
    }
}