@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/pretendard.css');
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Mina&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100;300;400;500;700;900&display=swap');



* {
    font-family: pretendard, Arial, sans-serif;
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    margin: 0;
    /*padding: 60px 0 90px 0;*/
    /*padding-bottom: 80px;*/
    /*background-color: #f4f4f4;*/
    background-color: #eeeeee;
}

.container {
    width: 100%;
    max-width: 450px;
    margin: 0 auto;
    background-color: #FFFFFF;
}

/* 헤더 스타일 */
.header {
    position: fixed; /* 비디오 위에 배치 */
    top: 0;
    left: 50%; /* 수평 중앙 정렬 */
    transform: translateX(-50%);
    width: 100%;
    max-width: 450px;
    margin: 0 auto;
    height: 60px;
    background-color: transparent; /* 투명 배경 */
    /*box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);*/
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 10px 0 20px;
    z-index: 1000;
}

/* 스크롤 시 추가될 클래스 */
.header.scrolled {
    background: rgba(0, 0, 0, 0.3);
    backdrop-filter: blur(10px);
}

/* 로고 스타일 */
#logo, #logo2 {
    cursor: pointer;
}

.logo img {
    display: block; /* 블록 요소로 변경 */
    margin: 0; /* 추가 여백 제거 */
    width: 45px;
    object-fit: contain;
}

/* 햄버거 메뉴 스타일 */
.hamburger-menu {
    position: relative;
}

.menu-icon {
    /*color: #FFFFFF;*/
    margin: 0;
    /*background: none;*/
    /*border: none;*/
    /*font-size: 24px;*/
    /*cursor: pointer;*/
    padding: 10px;

    width: 40px;
    height: 38px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    cursor: pointer;
    transition: all 0.3s ease-in-out;
}

.menu-icon span {
    display: block;
    width: 100%;
    height: 2px;
    background-color: #FFFFFF;
    transition: all 0.3s ease-in-out;
    border-radius: 2px;
}

/* 활성화된 상태 */
.menu-icon.active span{
    background-color: #000000;
    z-index: 5000;
}

.menu-icon.active span:nth-child(1) {
    transform: translateY(8px) rotate(45deg);
}

.menu-icon.active span:nth-child(2) {
    opacity: 0;
}

.menu-icon.active span:nth-child(3) {
    transform: translateY(-8px) rotate(-45deg);
}

.menu-overlay {
    position: fixed;
    top: 0;
    /*right: 0;*/
    right: -100%; /* 초기 상태: 화면 밖 */
    width: 100%;
    height: 100vh;
    background-color: rgba(255, 255, 255, 1);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    /*display: none; !* 초기 상태: 숨김 *!*/
    visibility: hidden; /* 기본적으로 숨김 */
    opacity: 0;
    flex-direction: column;
    z-index: 1000;
    /*overflow-y: auto;*/
    transition: all 0.5s ease-in-out; /* 슬라이드 애니메이션 */
}

/* 활성화된 상태 */
.menu-overlay.active{
    right: 0; /* 화면 안으로 들어옴 */
    visibility: visible;
    opacity: 1;
}

.back-cover {
    position: fixed;
    top: 0;
    right: -100%; /* 초기 상태: 화면 밖 */
    width: 100%;
    height: 100vh;
    background-color: #eeeeee;
    z-index: 2000;
}

.content.out {
    right: -100%; /* 초기 상태: 화면 밖 */
    visibility: hidden;
    opacity: 0;
}

.header.scrolled .hamburger-menu .menu-overlay{
    background-color: rgba(255, 255, 255, 1);
    backdrop-filter: none;
}

.menu-header {
    height: 59px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 0 16px 20px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* 그림자 추가 */
}

.menu-logo {
    height: 29px;
}

.menu-content {
    padding: 40px 20px;
}

.consultation-btn {
    width: 100%;
    height: 56px;
    padding: 15px;
    background-color: #5959FC;
    color: white;
    font-size: 20px;
    font-weight: 600;
    letter-spacing: -1px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    margin-bottom: 20px;
}

.auth-buttons {
    display: flex;
    justify-content: space-between;
    margin-bottom: 20px;
}

.register-btn, .login-btn {
    width: 48%;
    height: 43px;
    padding: 10px;
    border: 1px solid #757575;
    background-color: #F8F8F8;
    color: #757575;
    cursor: pointer;
    border-radius: 5px;
    font-size: 13px;
    font-weight: 700;
}

.menu-items {
    display: flex;
    flex-direction: column;
}

.menu-item {
    position: relative; /* border 확장을 위해 필요 */
    display: flex;
    flex-direction: column;
    justify-content: flex-start; /* 수정: 기본으로 위쪽 정렬 */
    align-items: flex-start;
    padding: 19px 0;
    cursor: pointer;
}

.menu-item .top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%; /* 전체 너비를 채우도록 설정 */

    font-size: 20px;
    font-weight: 700;
}

/*.menu-item:not(:last-child)::after {*/
/*    content: '';*/
/*    position: absolute;*/
/*    bottom: 0; !* 아래쪽에 배치 *!*/
/*    left: 0; !* 시작점 설정 *!*/
/*    width: calc(100% + 2 * var(--parent-padding, 20px)); !* 부모 패딩을 고려한 전체 폭 설정 *!*/
/*    height: 1px; !* border 두께 *!*/
/*    background-color: #ddd; !* border 색상 *!*/
/*    transform: translateX(calc(-1 * var(--parent-padding, 20px))); !* 패딩을 무시하고 왼쪽으로 확장 *!*/
/*}*/

.menu-item::after {
    content: '';
    position: absolute;
    bottom: 0; /* 아래쪽에 배치 */
    left: 0; /* 시작점 설정 */
    width: calc(100% + 2 * var(--parent-padding, 20px)); /* 부모 패딩을 고려한 전체 폭 설정 */
    height: 1px; /* border 두께 */
    background-color: #ddd; /* border 색상 */
    transform: translateX(calc(-1 * var(--parent-padding, 20px))); /* 패딩을 무시하고 왼쪽으로 확장 */
}


.menu-item .menu-toggle {
    font-size: 12px;
    color: #999;
}
.menu-item .menu-toggle svg{
    color: #999;
}

.submenu {
    max-height: 0; /* 숨김 상태로 설정 */
    overflow: hidden; /* 서브 메뉴가 펼쳐질 때 넘치지 않도록 설정 */
    margin-top: 0;
    padding-top: 0;
    padding-bottom: 0;
    transition: all 0.5s linear; /* 부드러운 애니메이션 */
    /*display: none;*/
    /*margin-top: 10px;*/
    padding-left: 20px;
    font-size: 14px;
}

.submenu a {
    display: block;
    color: black;
    text-decoration: none;
    padding: 5px 0;
}

.submenu a:hover {
    background-color: #f0f0f0;
}

/* Active Menu Style */
.menu-item.active .submenu {
    /*display: block;*/
    max-height: 500px; /* 서브 메뉴가 펼쳐질 때 충분한 높이를 설정 */
    margin-top: 10px;
    padding-top: 10px; /* 서브 메뉴의 위쪽 패딩 */
    padding-bottom: 10px; /* 서브 메뉴의 아래쪽 패딩 */
}

.menu-item.active .menu-toggle {
    transform: rotate(180deg);
}

.hidden {
    display: none;
}

/* 기본 스타일 */
.video-box .item{
    /*display: flex;*/
    /*flex-direction: column;*/
    /*justify-content: center;*/
    /*align-items: flex-start;*/
    position: relative;
    overflow: hidden; /* 슬라이드 외의 비디오는 보이지 않도록 설정 */
    width: 100%;
    height: 100vh;
    top: 0;
    color: #FFFFFF;
    text-align: center;

    background-repeat: no-repeat;
}

.video-box .item.item1{
    background-image: url('../img/main1.jpg'); /* 반투명 이미지 경로 */
    background-size: auto 100%; /* 이미지 세로를 컨테이너 높이에 맞춤 */
    background-position: center top; /* 시작 위치 */
}

.video-box .item.item2{
    background-image: url('../img/main2.jpg'); /* 반투명 이미지 경로 */
    background-size: auto 100%; /* 이미지 세로를 컨테이너 높이에 맞춤 */
    background-position: 25% top; /* 시작 위치 */
}

.video-box .item.item3{
    background-image: url('../img/main3.jpg'); /* 반투명 이미지 경로 */
    background-size: auto 110%; /* 이미지 세로를 컨테이너 높이에 맞춤 */
    background-position: 90% 75%; /* 시작 위치 */
}

.video-box .animated-text {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: 16px;

    position: absolute;
    top: 43vh;
    left: 6%;

    line-height: 5px;
    text-align: left;
    text-underline-position: from-font;
    text-decoration-skip-ink: none;
    letter-spacing: -0.05em;
}

.video-box .animated-text span {
    font-size: 24px;
    font-weight: 600;
}

.video-box .animated-text h1 {
    font-size: 43px;
    font-weight: 700;
}

.video-box .animated-text .plus {
    position: absolute;
    font-size: 43px;
    top: 27px;
    right: -21px;
}

.video-text {
    margin-bottom: 10px;
}

/*.owl-carousel.video .item {*/
/*    !*position: relative;*!*/
/*    !*text-align: center;*!*/

/*    display: flex;*/
/*    flex-direction: column; !* 세로로 정렬 *!*/
/*    align-items: center; !* 수평 가운데 정렬 *!*/
/*    justify-content: center; !* 수직 가운데 정렬 *!*/
/*    text-align: center; !* 텍스트 가운데 정렬 *!*/
/*    gap: 35px; !* 비디오와 텍스트 사이의 간격 *!*/
/*}*/

.video-container {
    text-align: left;
    position: relative;
    width: 100%;
    /*height: 500px; !* 원하는 높이 설정 *!*/
    overflow: hidden;
}

.video-container .background-video {
    width: 100%;
}

.video-container .image-container {
    position: relative;
    height: 372px;
    overflow: hidden;
}

.video-container .image-container::before {
    content: ''; /* ::before 요소 생성 */
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /*background: radial-gradient(circle, rgba(0, 0, 0, 0) 30%, rgba(0, 0, 0, 0.5) 100%);*/
    background-color: rgba(0,0,0,0.5);
    opacity: 0.45;
    pointer-events: none; /* 클릭 이벤트가 이미지에 전달되도록 */
    z-index: 1; /* ::before를 이미지 위에 표시 */
}

.owl-carousel .video-container .image-container img {
    position: absolute;
    /*top: 50%;*/
    /*left: 50%;*/
    /*transform: translate(-50%, -50%); !* 이미지 크기를 약간 줄임 *!*/

    bottom: 0; /* 이미지가 컨테이너의 하단에 맞춰지도록 설정 */
    transform: translateX(-50px) translateY(50px);
    /*left: 50%;*/
    /*transform: translateX(-50%); !* 가로 중심 맞춤 *!*/
    width: auto; /* 비율 유지 (필요에 따라 수정 가능) */
    height: 116%; /* 이미지 높이를 컨테이너 높이에 맞춤 */
    object-fit: cover; /* 비율을 유지하며 컨테이너에 맞춤 */
}

.owl-carousel .video-container .image-container img.d-1 {
    transform: translateX(-80px) translateY(50px);
}

.owl-carousel .video-container .image-container img.d1 {
    transform: translateX(-157px) translateY(50px);
    height: 133%; /* 이미지 높이를 컨테이너 높이에 맞춤 */
}

.owl-carousel .video-container .image-container img.d2 {
    transform: translateX(-135px) translateY(34px) scaleX(-1);
    height: 117%;
}

.owl-carousel .video-container .image-container img.d3 {
    transform: translateX(-100px) translateY(33px);
    height: 109%;
}

.owl-carousel .video-container .image-container img.d4 {
    transform: translateX(-17px) translateY(1px);
    height: 101%;
}

.owl-carousel .video-container .image-container img.d5 {
    transform: translateX(-44px) translateY(1px);
    height: 101%;
}

.owl-carousel .video-container .image-container img.today {
    transform: translateX(-158px) translateY(0px);
    height: 118%;
}

/* 텍스트 설정 */
.sliding-text {
    position: absolute;
    bottom: -10px;
    left: 5%;
    width: 100%;
    transform: translateY(-50%);
    z-index: 500;
}

/*.animated-text {*/
/*    text-align: left;*/
/*    display: inline-block;*/
/*    position: relative;*/
/*    font-size: 26px;*/
/*    color: white;*/
/*    font-weight: 700;*/
/*    !*animation: slide-horizontal 4s infinite;*!*/

/*    opacity: 0; !* 기본 상태에서 보이지 않음 *!*/
/*    transform: translateX(-200%); !* 시작: 왼쪽 화면 밖 *!*/
/*    !*transition: all 0.3s ease-in-out; !* 부드러운 전환 *!*!*/
/*    transition: opacity 0.6s ease-in-out, transform 0.6s ease-in-out;*/
/*}*/

.animated-text .plus{
    position: absolute;
    top: -13px;
    right: 25px;
}

.animated-text.slide-animation {
    /*animation: slide-horizontal 3s;*/

    opacity: 1; /* 보이도록 설정 */
    /*animation: slide-horizontal 3s ease-in-out; !* 애니메이션 실행 *!*/
    transform: translateX(0);
    /*transition: opacity 0.5s ease-in-out, transform 0.9s ease-in-out;*/
}

.clear-div {
    display: flex; /* Flexbox 사용 */
    position: absolute;
    bottom: 33%;
    left: 5%;
    justify-content: center; /* 가로 중앙 정렬 */
    align-items: center; /* 세로 중앙 정렬 */
    gap: 8px; /* 텍스트와 아이콘 간의 간격 */
    width: 181px;
    height: 35px;
    background-color: transparent;
    /*font-family: 'Inter', sans-serif;*/
    border: 1px solid #FFFFFF;
    border-radius: 51px;
    color: #FFFFFF;
    font-weight: 600;
    font-size: 12px;
    line-height: 14px;
    text-align: center;
    letter-spacing: -1px;
}

.clear-div i {
    font-size: 9px;
    display: inline-block; /* 아이콘 정렬 */
    vertical-align: middle; /* 세로 정렬 */
}

/* 슬라이딩 애니메이션 */
/*@keyframes slide-horizontal {*/
/*    0% {*/
/*        transform: translateX(-100%); !* 시작: 왼쪽 화면 밖 *!*/
/*    }*/
/*    50% {*/
/*        transform: translateX(0); !* 중간: 화면 중앙 *!*/
/*    }*/
/*}*/
@keyframes slide-horizontal {
    0% {
        transform: translateX(-200%); /* 왼쪽 화면 밖 */
    }
    50% {
        transform: translateX(0); /* 화면 중앙 */
    }
    100% {
        transform: translateX(0); /* 화면 중앙에 멈춤 */
    }
}

.owl-carousel.video .item video {
    height: 453px;
    object-fit: cover; /* 비디오가 잘리지 않도록 */
}

/* 활성화된 슬라이드 스타일 */
.owl-carousel.video .owl-item.active {
    /*margin-top: 10px; !* 활성 슬라이드 아래로 이동 *!*/
    /*transition: transform 0.3s ease-in-out; !* 부드러운 애니메이션 *!*/
}

.owl-carousel.video .owl-item {
    transform: translateY(0); /* 기본 위치 */
    transition: transform 0.3s ease-in-out; /* 부드러운 애니메이션 */
}

/* 비디오 말풍선 */
.speech-bubble {
    width: 85%;
    /*height: 134px;*/
    position: relative;
    background: white;
    border-radius: 10px;
    padding: 25px 5px;
    margin: 5px;
    /*width: 90%;*/
    /*box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);*/
}

/* 말풍선 꼬리 */
.speech-bubble::before {
    content: '';
    position: absolute;
    top: -20px; /* 꼬리가 위쪽에 위치 */
    left: 50%; /* 중앙 정렬 */
    transform: translateX(-50%); /* 정확히 가운데로 이동 */
    border-width: 10px;
    border-style: solid;
    border-color: transparent transparent white transparent;
    /*filter: drop-shadow(4px 0 6px rgba(0, 0, 0, 0.1)); !* 꼬리에 그림자 추가 *!*/
}

.bubble-header {
    font-family: 'Mina', sans-serif;
    position: absolute;
    top: -11px;
    left: 5px;
    width: 55px;
    letter-spacing: -0.02rem;
    background-color: #4C4CFB;
    color: #fff;
    font-size: 12px;
    line-height: 15px;
    font-weight: 600;
    text-align: center;
    padding: 6px 1px;
    border-radius: 10px;
    display: inline-block;
    margin-bottom: 10px;
}

.bubble-header:first-of-type {
    width: 65px;
}

.bubble-content {
    font-size: 18px;
    color: #000000;
    line-height: 1.6;
    letter-spacing: -1px;
    font-weight: 400;
}

.button-content b {
    font-weight: 600;
}

/* 비디오 좌우 버튼 */
.owl-nav {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    gap: 17px;
}

.owl-next {
    width: 0;
    height: 0;
    border-bottom: 4px solid transparent;
    border-top: 4px solid transparent;
    border-left: 5px solid gray; /* 삼각형의 색상 */
    border-right: 5px solid transparent;
    border-radius: 2px; /* 살짝 둥근 모서리 효과 */
    background: none; /* 배경 없음 */
    cursor: pointer;
    display: inline-block;
    box-shadow: none; /* 추가적인 그림자 제거 */
}

.dots {
    display: flex;
    align-items: flex-end;
    gap: 17px;
    list-style: none;
    padding: 0;
    margin: 0;
}

.dots li {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background-color: #D6D6D6;
    cursor: pointer;
}

.dots li.active-dot {
    width: 20px;
    height: 7px;
    border-radius: 71px;
    background-color: #6060F2; /* 활성화된 dot의 색상 */
}

/*!* 채팅창의 크기 줄이기 *!*/
/*.channel-plugin-dialog {*/
/*    width: 300px !important; !* 원하는 너비 *!*/
/*    height: 400px !important; !* 원하는 높이 *!*/
/*}*/

/*!* 채팅 런처 크기 조정 *!*/
/*.channel-plugin-launcher {*/
/*    width: 50px !important; !* 원하는 런처 크기 *!*/
/*    height: 50px !important;*/
/*    border-radius: 25px !important; !* 둥근 모서리 *!*/
/*}*/

.fixed-banner {
    display: flex;
    justify-content: center;
    gap: 4px;
    position: fixed;
    bottom: 0;
    width: 100%;
    max-width: 450px;
    left: 50%; /* 화면의 수평 중앙 */
    transform: translateX(-50%); /* 요소의 가로 중심으로 위치 보정 */
    text-align: center;
    padding: 12px 0 14px 0;
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
    z-index: 999;
    background-color: transparent;

    /*transition: transform 0.8s ease-in-out, opacity 0.3s ease-in-out;*/
    transition: transform 0.5s ease-out, opacity 0.5s ease-out; /* 부드러운 전환 효과 */
    opacity: 1; /* 기본적으로 보이는 상태 */
    visibility: visible;
}

.fixed-banner form{
    /*width: 287px;*/
    max-width: 287px;
    width: 70%;
    padding: 16px 10px;
    background-color: rgba(255, 255, 255, 0.75);
    border-radius: 5px;
}

.fixed-banner .right {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.fixed-banner .right div {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 6px;

    /*width: 94px;*/
    max-width: 94px;
    width: 100%;
    padding: 0.48rem 10px;
    background-color: rgba(255, 255, 255, 0.75);
    border-radius: 5px;

    font-size: 12px;
    font-weight: 700;
    letter-spacing: -0.06em;
    text-underline-position: from-font;
    text-decoration-skip-ink: none;
    color: #6060F2;
    cursor: pointer;
}

.fixed-banner .chat img{
    width: 16px;
}

.fixed-banner .call img{
    width: 13px;
}

.fixed-banner.hidden {
    transform: translateX(-50%) translateY(100%); /* 배너 높이만큼 완전히 숨김 */
    opacity: 0; /* 부드럽게 사라지는 효과 추가 */
    /*visibility: hidden;*/
    transition: transform 0.5s ease-out, opacity 0.5s ease-out; /* 부드러운 전환 효과 */
}

.fixed-banner .banner-text{
    margin-bottom: 5px;
    font-size: 21px;
    font-weight: 600;
    letter-spacing: -1px;
}

.fixed-banner .banner-text .sparkle-text{
    color: #4545FF;
    font-weight: 700;
    position: relative;
    overflow: hidden;
}

.fixed-banner .banner-text .sparkle-text::before {
    content: ''; /* 가상의 반짝이는 레이어 추가 */
    position: absolute;
    top: 0;
    left: -10%; /* 시작 위치를 텍스트 바깥으로 설정 */
    width: 74%; /* 텍스트 크기보다 크게 설정 */
    height: 100%;
    background: linear-gradient(120deg, transparent, rgba(255, 255, 255, 0.8), transparent); /* 반짝이는 효과 */
    animation: shine 2s infinite; /* 애니메이션 적용 */
}

.fixed-banner .banner-text .sparkle-text:hover::before {
    animation: none; /* 마우스를 올릴 때 애니메이션 멈춤 */
    z-index: -1;
}

@keyframes shine {
    0% {
        transform: translateX(0); /* 시작 지점 */
    }
    100% {
        transform: translateX(150%); /* 끝 지점 */
    }
}

.fixed-banner input{
    border-radius: 4px;
    border: 1px solid rgba(148, 148, 148, 0.75);
    padding: 6px;
}

.fixed-banner input::placeholder{
    font-weight: 500;
    font-size: 11px;
}

.fixed-banner input.tel{
    /*width: 163px;*/
    max-width: 163px;
    width: 59%;
    margin-right: 4px;
    color: #000000;
    font-size: 14px;
    font-weight: 500;
    line-height: 17px;
    letter-spacing: -0.02em;
}

.fixed-banner input.btn{
    color: white;
    background: linear-gradient(#5959FC, #4545FF);
    border: 1px solid #5959FC;
    padding: 7px 17px;
    cursor: pointer;
}

.fixed-banner.scrolled {
    background-color: #000000;
    /*backdrop-filter: blur(10px);*/
}

.fixed-banner.scrolled form {
    background: rgba(255, 255, 255, 0.9);
    color: white;
}

.fixed-banner.scrolled .right div {
    color: white;
    font-weight: 600;
    background: linear-gradient(#5959FC, #4545FF);
}

.chat img, .call img {
    transition: opacity 0.3s ease; /* 부드러운 전환 효과 */
}

.fixed-banner.scrolled .right .chat img {
    content: url("../img/icon_chat_white.png"); /* 새로운 이미지 경로 */
}

.fixed-banner.scrolled .right .call img {
    content: url("../img/icon_call_white.png"); /* 새로운 이미지 경로 */
}

.sinsin-plus {
    position: relative; /* 기준점을 설정 */
    text-align: center;
    padding: 47px 0;
    color: white;
    z-index: 1;
}

.ss-header {
    position: relative; /* 자식 요소의 위치 설정을 위한 기준 */
    width: 100%;
    text-align: center;
    padding: 40px 0;
    background-color: #FBFBFB;
}

.ss-header > img {
    width: 51px;
    margin-bottom: 22px; /* 로고와 버튼 간 간격 */
}

.blue-div {
    padding: 3px 5px; /* 버튼 크기 */
    font-size: 14px; /* 글씨 크기 */
    font-weight: 600; /* 글씨 굵기 */
    color: #fff; /* 글씨 색상 */
    background-color: #6060F2; /* 버튼 배경색 */
    border-radius: 3px; /* 둥근 버튼 */
    text-align: center; /* 텍스트 가운데 정렬 */
    width: fit-content; /* 텍스트 길이에 맞게 버튼 크기 조정 */
    margin: 0 auto 35px auto; /* 가운데 정렬 */
}

.ss-header p {
    position: relative; /* z-index가 적용되도록 설정 */
    z-index: 1; /* 텍스트가 이미지 위에 나타나도록 설정 */
    font-weight: 400;
    font-size: 17px;
    line-height: 34px;
    letter-spacing: -1px;
    color: #000000;
}

.ss-header p b {
    font-weight: 700;
}

.ss-header .main-image {
    position: relative; /* 이미지 위치 조정 */
    top: -64px; /* p 태그 위로 살짝 이동 */
    z-index: 0; /* 이미지가 텍스트 아래로 겹치도록 설정 */
}

.ss-header .main-image img {
    position: relative;
    left: -8px;
    max-width: 97%;
    height: auto; /* 이미지 비율 유지 */
}

.benefits p {
    font-size: 32px;
    font-weight: 800;
    line-height: 38px;
    margin: 26px 0 50px 0;
    color: #3E3E3E;
}

.benefits p span {
    background: linear-gradient(to left, #6487FF, #6060F2); /* 그라데이션 색상 */
    -webkit-background-clip: text; /* 텍스트 영역만 배경 색상 적용 */
    -webkit-text-fill-color: transparent; /* 텍스트를 투명하게 설정 */
    text-fill-color: transparent; /* 표준 속성 (브라우저 지원 여부 확인) */
}

.benefit-item {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    /*margin: 10px 20px;*/
}

.benefit-item .text {
    flex: 1;
    text-align: left;
    padding: 0 55px;
}

.benefit-item .text .small {
    display: block;
    font-size: 12px;
    font-weight: 400;
    line-height: 18px;
    letter-spacing: -0.5px;
    color: #939393;
}

.benefit-item .text div{
    position: relative;
}

.benefit-item .text .num{
    position: absolute;
    color: #000000;
    top: 1px;
    left: -25px;

    font-size: 14px;
    font-weight: 700;
    line-height: 16.8px;
    letter-spacing: -0.04em;
    text-align: left;
    text-underline-position: from-font;
    text-decoration-skip-ink: none;
}

.benefit-item p {
    font-size: 17px;
    font-weight: 700;
    line-height: 20px;
    letter-spacing: -0.5px;
    margin: 0;
    color: #000000;
}

.benefit-item p .color {
    color: #6060F2;
}

.benefit-item img {
    position: absolute;
    right: 15px;
    flex: 1;
    max-width: 60px;
}

.sinsin-plus .item-container {
    padding: 20px;
}

.line {
    position: relative;
    z-index: 50;
    height: 1px;
    background-color: #DCDCDC;
    margin: 20px auto;
}

.line2 {
    height: 1px;
    background-color: #D3D3D3;
    margin: 5px auto;
}

.event {
    display: flex;
    flex-direction: column;
    justify-content: center;
    /*margin: 20px 0;*/
    padding: 30px 20px;
    gap: 17px;
}

.event .title {
    margin-bottom: 10px;
}

.event .title, .best-container .title {
    font-weight: 700;
    font-size: 17px;
    line-height: 22px;
    color: #282828;
}

.custom-button {
    display: flex;
    justify-content: space-between;
    cursor: pointer; /* 클릭 가능한 커서 */
    border-radius: 10px; /* 버튼 모서리를 살짝 둥글게 */
    overflow: hidden; /* 이미지가 영역을 넘지 않도록 */
    transition: transform 0.3s ease, box-shadow 0.3s ease; /* 클릭 및 호버 시 효과 */
    color: #FFFFFF;
    /*padding: 23px 17px;*/
    /*padding: 40px 17px;*/
    padding: 0 18px;
    height: 153px;
    filter: drop-shadow(3px 5px 4px rgba(0, 0, 0, 0.25));
    animation: flapping 3s ease-in-out infinite; /* 애니메이션 반복 */
    transform-style: preserve-3d; /* 3D 효과 활성화 */
    margin-bottom: 20px;
}

.custom-button.cb2 {
    animation: flapping-reverse 3s ease-in-out infinite; /* 애니메이션 반복 */
}

.custom-button.cb3 {
    margin-bottom: 0;
}

.custom-button:hover {
    transform: scale(1.05); /* 살짝 확대 */
    box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.2); /* 그림자 강조 */
}

/* 팔랑팔랑 애니메이션 */
/*@keyframes flapping {*/
/*    0%, 100% {*/
/*        transform: rotateY(0deg); !* 기본 상태 *!*/
/*    }*/
/*    25% {*/
/*        transform: rotateY(10deg) translateX(-5px);*/
/*    }*/
/*    50% {*/
/*        transform: rotateY(0deg); !* 다시 기본 상태 *!*/
/*    }*/
/*    75% {*/
/*        transform: rotateY(-10deg) translateX(5px);*/
/*    }*/
/*}*/

@keyframes flapping {
    0%, 100% {
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in;
        -webkit-transform: rotateY(-2.5deg);
        -moz-transform: rotateY(-2.5deg);
        -ms-transform: rotateY(-2.5deg);
        transform: rotateY(-2.5deg);
    }
    25%, 75% {
        -webkit-animation-timing-function: ease-out;
        animation-timing-function: ease-out;
        -webkit-transform: rotateY(0deg);
        -moz-transform: rotateY(0deg);
        -ms-transform: rotateY(0deg);
        transform: rotateY(0deg);
    }
    50% {
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in;
        -webkit-transform: rotateY(2.5deg);
        -moz-transform: rotateY(2.5deg);
        -ms-transform: rotateY(2.5deg);
        transform: rotateY(2.5deg);
    }
}

/*@keyframes flapping-reverse {*/
/*    0%, 100% {*/
/*        transform: rotateY(0deg); !* 기본 상태 *!*/
/*    }*/
/*    25% {*/
/*        transform: rotateY(-10deg) translateX(5px); !* 살짝 앞으로 기울임 *!*/
/*    }*/
/*    50% {*/
/*        transform: rotateY(0deg); !* 다시 기본 상태 *!*/
/*    }*/
/*    75% {*/
/*        transform: rotateY(10deg) translateX(-5px); !* 살짝 뒤로 기울임 *!*/
/*    }*/
/*}*/

@keyframes flapping-reverse {
    0%, 100% {
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in;
        -webkit-transform: rotateY(2.5deg); /* 기존과 반대 */
        -moz-transform: rotateY(2.5deg);
        -ms-transform: rotateY(2.5deg);
        transform: rotateY(2.5deg);
    }
    25%, 75% {
        -webkit-animation-timing-function: ease-out;
        animation-timing-function: ease-out;
        -webkit-transform: rotateY(0deg); /* 동일한 중간값 */
        -moz-transform: rotateY(0deg);
        -ms-transform: rotateY(0deg);
        transform: rotateY(0deg);
    }
    50% {
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in;
        -webkit-transform: rotateY(-2.5deg); /* 기존과 반대 */
        -moz-transform: rotateY(-2.5deg);
        -ms-transform: rotateY(-2.5deg);
        transform: rotateY(-2.5deg);
    }
}

.custom-button img.icon {
    position: absolute;
}

.custom-button.cb1{
    background-color: #8C7AE5;
}

.custom-button.cb1 img {
    top: 16px;
    right: 2px;
}

.custom-button.cb2{
    background: linear-gradient(to left, #FFA1A1, #FF7C7C);
}

.custom-button.cb2 img {
    width: 140px;
    top: 13px;
    right: 7px;
}

.custom-button.cb3{
    background: linear-gradient(to left, #FFBC6D, #FF9E2D);
}

.custom-button.cb3 img {
    width: 164px;
    bottom: -0.75rem;
    right: 11px;
}

.custom-button:hover {
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2); /* 호버 시 그림자 효과 */
    transform: scale(1.05); /* 살짝 확대 효과 */
}

.custom-button:active {
    transform: scale(0.95); /* 클릭 시 축소 효과 */
}

.custom-button .button-content {
    display: flex;
    flex-direction: column;
}

.custom-button .button-content .h-div{
    position: absolute;
    top: 20px;
}

.custom-button .button-content .logo {
    max-width: 30px;
}

.custom-button .button-content h4 {
    font-weight: 300;
    font-size: 13px;
    letter-spacing: -1px;
    line-height: 15px;
    margin: 10px 0 8px 0;
}

/*.custom-button.cb3 .button-content h4 {*/
/*    font-size: 13px;*/
/*    margin-bottom: 3px;*/
/*}*/

.custom-button .button-content h1 {
    font-weight: 700;
    font-size: 25px;
    letter-spacing: -0.5px;
    line-height: 24px;
    margin: 0 0 18px 0;
}

/*.custom-button.cb3 .button-content h1 {*/
/*    font-size: 20px;*/
/*    margin: 0 0 5px 0;*/
/*}*/

.custom-button .button-content .inner-button {
    position: absolute;
    bottom: 15px;
    font-family: 'Inter', sans-serif;
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    width: 140px;
    padding: 7px;
    background-color: rgba(0, 0, 0, 0.23);
    color: #fff; /* 텍스트 색상 */
    font-size: 12px;
    font-weight: 700;
    line-height: 14px;
    letter-spacing: -0.5px;
    border: none;
    border-radius: 6px; /* 버튼 모서리를 둥글게 */
    cursor: pointer;
    text-align: center;
    gap: 10px; /* 텍스트와 화살표 간 간격 */
    transition: background-color 0.3s ease;
}

.custom-button .button-content .inner-button .arrow {
    font-size: 16px;
    font-weight: bold;
    margin-left: 5px; /* 화살표와 텍스트 사이 간격 */
}

/*.best-container {*/
/*    background-color: #F6F7F9;*/
/*    padding: 30px 20px;*/
/*}*/

/*.best-products {*/
/*    display: grid;*/
/*    grid-template-columns: repeat(4, 1fr);*/
/*    gap: 10px; !* 카드 사이 간격 *!*/
/*    margin: 20px;*/
/*}*/

.best-container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin-top: 20px;
    padding: 30px 20px 80px 20px;
    /*background: linear-gradient(to bottom, #FFFFFF, #F0E7FF);*/
    background-color: #FCFCFF;
    position: relative;
    width: 100%; /* 부모 요소 너비 */
    height: auto; /* 부모 요소 높이 */
    overflow: hidden; /* 넘친 부분 숨김 */
}

.best-container .sinsin-plus{
    /*display: flex;*/
    /*gap: 23px;*/
    /*transform: translateX(-240px); !* 위치 조정 *!*/
    font-size: 78px;
    font-weight: 900;
    line-height: 93px;
    background-color: transparent;
    padding: 0;
    margin: 15px 0;

    width: calc(240px + 100vw);
    height: auto; /* 부모 요소 높이 */
    /*overflow: hidden; !* 경계를 넘어간 부분 숨김 *!*/
}

.best-container .sinsin-plus .zoom-box {
    display: flex;
    gap: 23px;
    transform: translateX(-240px); /* 위치 조정 */
    /*overflow: hidden; !* 경계를 넘어간 부분 숨김 *!*/

    /*animation: zoomOut 10s ease-in-out infinite;*/
}

@keyframes zoomOut {
    0% {
        transform: translateX(-240px) scale(1); /* X축 이동 및 기본 크기 */
    }
    100% {
        /*transform: translateX(-350px) scale(0.8); !* X축 원위치 및 축소 *!*/
        transform: translateX(-240px) scale(0.8); /* X축 원위치 및 축소 */
    }
}

.best-container .sinsin-plus span{
    background-color: transparent;
    color: transparent;             /* 글자 내부를 투명하게 설정 */
    -webkit-text-stroke: 0.05rem white; /* 글자 테두리 두께와 색상 설정 */
}

.best-container .title {
    margin-bottom: 25px;
}

.section-title {
    font-size: 24px;
    font-weight: bold;
    margin-bottom: 20px;
    color: #333;
}

/* 제품 리스트 스타일 */
.best-products {
    display: flex;
    /*flex-direction: row;*/
    flex-direction: column;
    justify-content: center;
    gap: 20px;
}

.product-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    /*grid-template-columns: repeat(4, minmax(250px, 1fr));*/
    gap: 20px;
}

.product-item {
    width: calc(25vw - 30px); /* 각 상자의 너비 계산: 50%에서 간격(gap)을 뺌 */
    max-width: 195px;
    height: 206px;
    background-color: #fff;
    border-radius: 10px;
    /*box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);*/
    box-shadow: 0px 2.72px 7.25px 0px #0000003D;
    padding: 20px 0;
    text-align: center;
    transition: transform 0.3s ease, box-shadow 0.3s ease;

    flex: 0 0 calc(50vw - 30px); /* 각 상자의 너비 계산: 50%에서 간격(gap)을 뺌 */
}

.product-item a{
    text-decoration: none;
}

.product-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 15px rgba(0, 0, 0, 0.2);
}

.product-item .image-container {
    position: relative;
    width: 100%;
    height: 120px;
    margin-bottom: 10px;
}

.product-item img {
    max-width: 45vw;
    text-align: center;
}

.product-category {
    display: block;
    font-size: 13px;
    font-weight: 700;
    line-height: 15px;
    color: #6060F2;
    margin-bottom: 5px;
}

.product-title {
    font-size: 16px;
    font-weight: 700;
    line-height: 19px;
    color: #555555;
}

.graph {
    margin: 125px 0 70px 0;
}

.message-container {
    width: 100%;
    display: inline-block; /* 텍스트가 필요한 만큼의 너비를 가지도록 설정 */
    background-color: #fff; /* 말풍선 배경색 */
    color: #333; /* 텍스트 색상 */
    border-radius: 20px; /* 둥근 모서리 */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); /* 그림자 효과 */
    /*box-shadow: 0 3px 8px 0 #0000003D;*/
    padding: 8px 0; /* 안쪽 여백 */
    font-size: 17px; /* 텍스트 크기 */
    font-weight: 500; /* 텍스트 두께 */
    text-align: center; /* 텍스트 중앙 정렬 */
    position: relative; /* 삼각형 꼬리 배치를 위해 설정 */
    margin: 10px auto 20px auto; /* 상하 여백 */
    line-height: 18px; /* 텍스트 간격 */
    letter-spacing: -1px;
    z-index: 2; /* sinsin-plus 위로 올라오도록 설정 */
    top: -50px;
}

.message-container::after {
    content: ''; /* 말풍선 꼬리 */
    position: absolute;
    bottom: -11px; /* 말풍선 아래에 배치 */
    left: 50%;
    transform: translateX(-50%);
    width: 20px;
    height: 13px;
    background-color: #fff;
    /*box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); !* 꼬리 그림자 *!*/
    /*box-shadow: 0 3px 8px 0 #0000003D;*/
    filter: drop-shadow(0 3px 8px rgba(0, 0, 0, 0.24)); /* 그림자 */
    clip-path: polygon(50% 100%, 10% 0, 90% 0);
}

.graph .highlight {
    font-weight: 700; /* 강조된 텍스트 두껍게 */
    color: #F64230; /* 빨간색 강조 */
}

.underline-text {
    top: -40px;
    margin: 0;
    padding: 0;
    position: relative;
    font-weight: 500;
    font-size: 32px;
    line-height: 38px;
    letter-spacing: -1px;
    text-align: center;
}

.underline-text span {
    position: relative;
    display: inline-block;
}

.underline-text span::after {
    content: url('../img/under_line_purple.png'); /* 이미지 삽입 */
    position: absolute;
    left: -4px;
    bottom: -18px; /* 텍스트 바로 아래에 이미지 위치 */
    width: 100%; /* 이미지가 텍스트와 같은 너비를 가지도록 설정 */
    height: auto; /* 이미지 비율 유지 */
    transform: rotate(-1deg); /* 약간 기울임 */
}

.chart-container {
    /*width: 80%;*/
    margin: 28px auto;
    position: relative;
}

.chart-container img {
    position: absolute;
    width: 85%;
    z-index: 29;
    top: 26%;
    left: 50%;
    transform: translate(-50%, -50%); /* 자신의 크기 기준으로 정확히 중앙 정렬 */
}

.chart {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    height: 200px; /* 그래프 높이 */
    position: relative;
    margin-bottom: 20px;
    padding: 0 20px;
}

.chart::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 2px; /* 선의 두께 */
    background: linear-gradient(to right, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) 50%, rgba(0, 0, 0, 0) 100%);
    z-index: 35;
}

.bar {
    position: relative;
    width: 50px;
    border-radius: 5px 5px 0 0;
    animation: grow 2s ease-in-out;
    animation-fill-mode: forwards;
    /*transform: scaleY(0); !* 초기 상태: 높이 0 *!*/
    transform-origin: bottom;
    height: 1px;
    z-index: 30;
}

.bar span.cost {
    position: absolute;
    top: -25px; /* 숫자 위치 */
    left: 50%;
    transform: translateX(-50%);
    font-size: 12px;
    font-weight: 600;
    color: #585858;
}

.bar span.cost.best {
    font-size: 16px;
}

.chart .text {
    /*display: flex;*/
    /*justify-content: space-between;*/
    font-size: 12px;
    font-weight: 600;
    margin-top: 10px;
    text-align: center;

    position: absolute;
    bottom: -25px; /* 숫자 위치 */
    left: 50%;
    transform: translateX(-50%);
}

.chart .text.minus {
    width: 70px;
    top: 15px;
}

.chart .text.dot {
    left: 70px;
}

.bar:nth-child(1) {
    border-radius: 0 0 5px 5px;
    align-self: flex-end; /* 그래프를 아래로 이동 */
    transform: translateY(20px); /* 아래로 추가 이동 */
    height: 1px;
    background-color: #D8D8D8;
}

.bar:nth-child(2) {
    animation-delay: 0.5s;
    height: 7px;
    background-color: #D2B7FF;
}

.bar:nth-child(3) {
    animation-delay: 1s;
    height: 10px;
    background-color: #A373F0;
}

.bar:nth-child(4) {
    animation-delay: 1.5s;
    height: 50px;
    background-color: #783CDA;
}

@keyframes grow {
    0% {
        transform: scaleY(0); /* 시작 시 높이 0 */
    }
    100% {
        /*transform: scaleY(calc(var(--height) / 100)); !* 각 막대의 높이 *!*/
        height: calc(var(--height));
    }
}

.graph .box-container {
    /*display: flex;*/
    /*justify-content: center;*/
    /*gap: 35px;*/
    /*margin-top: -5px;*/

    margin-top: -25px;
    content: url('../img/before_after.gif'); /* 이미지 삽입 */
    width: 100%; /* 이미지가 텍스트와 같은 너비를 가지도록 설정 */
    height: auto; /* 이미지 비율 유지 */
}

.box-container .left, .box-container .right {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 20px;

    font-weight: 600;
    font-size: 15px;
    line-height: 18px;
    letter-spacing: -0.07em;
}

.box-container .box{
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
}

.box-container .box div {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    width: 133px;
    height: 74px;
    border-radius: 4px;

    font-size: 12px;
    font-weight: 500;
    line-height: 15px;
    letter-spacing: -0.04em;
    text-align: center;
    text-underline-position: from-font;
    text-decoration-skip-ink: none;

    opacity: 0; /* 초기 상태: 투명 */
    transform: translateY(30px); /* 초기 상태: 아래쪽으로 이동 */
    transition: opacity 0.6s ease-out, transform 0.6s ease-out; /* 부드러운 전환 */
}

/* 애니메이션 활성화 시 */
.box-container .box div.show {
    opacity: 1; /* 보이도록 */
    transform: translateY(0); /* 원래 위치로 */
}

.box-container .left .box div {
    background-color: #D9D9D9;
    color: #000000;
}

.box-container .right .box div {
    background-color: #A373F0;
    color: #FCFCFF;
}

.settlement {
    display: flex;
    flex-direction: column;
    text-align: center;
    align-items: center;
    justify-content: center;
    gap: 22px;
    /*margin-top: 25px;*/
    margin-top: -40px;
}

.settlement .h-div {
    font-weight: 600;
    text-align: center;
    text-underline-position: from-font;
    text-decoration-skip-ink: none;
}

.settlement .h-div div {
    display: flex;
    justify-content: flex-end;
    /*width: 209px;*/
}

.settlement .h-div h1, .settlement .h-div div span{
    font-weight: 600;
    font-size: 49px;
}

.settlement .h-div > span {
    display: block;
    margin-bottom: -15px;
    font-size: 16px;
    color: #7E7E7E;
}

.settlement p.custom-text{
    font-size: 35px;
    font-weight: 800;
    line-height: 46px;
    letter-spacing: -1px;
}

.settlement p .big{
    font-size: 60px;
    font-weight: 900;
    line-height: 55px;
    /*background: linear-gradient(175deg, #FAB2FF, #1904E5); !* 그라데이션 색상 *!*/
    background: linear-gradient(135deg, #FAB2FF 0%, #1904E5 100%);
    -webkit-background-clip: text; /* 배경을 텍스트 클리핑 */
    -webkit-text-fill-color: transparent; /* 텍스트 색상을 투명하게 설정 */
}

.settlement .swiper-container {
    width: 80%;
    height: 440px;
    overflow: visible; /* 슬라이드가 컨테이너 밖으로 나가지 않도록 */
    margin-top: 15px;
}

.settlement .swiper-slide {
    position: relative;
    background: #000000; /* 슬라이드 배경 */
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    text-align: left;
    font-size: 24px;
    border-radius: 19px; /* 약간의 둥근 모서리 */
    transition: transform 0.3s ease; /* 부드러운 전환 효과 */
    overflow: hidden;
}

.settlement .swiper-slide .text{
    position: relative;
    top: 26px;
    left: 20px;
    letter-spacing: -0.5px;
    color: #FFFFFF;
}

.settlement .swiper-slide h1{
    font-weight: 700;
    font-size: 11px;
    line-height: 13px;
    margin-bottom: 12px;
}

.settlement .swiper-slide h2{
    font-family: 'Noto Sans JP', sans-serif;
    font-size: 14px;
    font-weight: 500;
    line-height: 22px;
    letter-spacing: -0.06em;
    text-align: left;
    text-underline-position: from-font;
    text-decoration-skip-ink: none;
}

.settlement .swiper-slide.sl1 h1{
    color: #FFA6A6;
}

.settlement .swiper-slide.sl2 h1{
    color: #F3FF96;
}

.settlement .swiper-slide.sl3 h1{
    color: #78FFF4;
}

.settlement .swiper-slide.sl4 h1{
    color: #FFF8B9;
}

.settlement .swiper-slide p{
    margin-top: 11px;

    font-size: 18px;
    font-weight: 600;
    line-height: 23px;
    letter-spacing: -0.06em;
    text-align: left;
    text-underline-position: from-font;
    text-decoration-skip-ink: none;
}

.settlement .swiper-slide p b{
    font-weight: 600;
    letter-spacing: 0;
}

.settlement .swiper-slide img{
    position: absolute;
    /*width: 100%;*/
    height: 82%;
    bottom: 0;
}

.settlement .swiper-slide.sl1 img {
    transform: translateX(-22%);
}

.settlement .swiper-slide.sl2 img{
    height: 83%;
    transform: translateX(-35%);
}

.settlement .swiper-slide.sl3 img{
    height: 85%;
    transform: translateX(-30%);
}

.settlement .swiper-slide.sl4 img{
    transform: translateX(-27%);
}

.settlement .swiper-slide-shadow {
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0)); /* 그림자 효과 */
}

.custom-text .highlighted {
    position: relative;
    z-index: 30;
}

.custom-text .highlighted::after {
    content: '';
    position: absolute;
    bottom: -3px; /* 텍스트 아래로 위치 조정 */
    left: 50%;
    transform: translateX(-50%);
    width: 112%; /* 라인의 너비 */
    height: 24px; /* 라인의 높이 */
    background-color: #E6D7FF; /* 연한 보라색 배경 */
    z-index: -1; /* 텍스트 아래로 배치 */
}

.round-div {
    display: flex; /* Flexbox 사용 */
    justify-content: center; /* 가로 중앙 정렬 */
    align-items: center; /* 세로 중앙 정렬 */
    width: 201px;
    height: 35px;
    background-color: #FFFFFF;
    /*font-family: 'Inter', sans-serif;*/
    border-radius: 20px;
    font-weight: 700;
    font-size: 17px;
    line-height: 20px;
    /*box-shadow: 0 5px 2px rgba(0, 0, 0, 0.1);*/
    text-align: center;
    /*padding: 5px 13px;*/
    box-shadow: 0px 3.2px 3.2px 0px #00000040;
}

.boon-plus {
    display: flex;
    flex-direction: column;
    text-align: center;
    align-items: center;
    justify-content: center;
    gap: 15px;
    padding: 0 0 58px 0;
}

.boon-plus .cost-container {
    width: 100%;
    padding: 0 20px;
}

.boon-plus .cost {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-weight: 600;
    font-size: 15px;
    line-height: 24px;
    letter-spacing: -1px;
    padding: 0 5px;
}

.boon-plus .cost .left{
    display: flex;
    align-items: center;
    gap: 9px;
}

.boon-plus .cost .left .grey{
    color: #AFAFAF;
    font-size: 12px;
    font-weight: 400;
    line-height: 21px;
    letter-spacing: -0.05em;
    text-align: left;
    text-underline-position: from-font;
    text-decoration-skip-ink: none;
}

.grey .krw{
    font-size: 8px;
    font-weight: 600;
    line-height: 14px;
    letter-spacing: -0.07em;
}

.boon-plus .cost .right {
    font-weight: 800;
}

.boon-plus .cost .amount {
    font-size: 28px;
    line-height: 47px;
    margin-right: 3px;
}

.boon-plus .big-btn {
    width: 100%;
    height: 61px;
    background-color: #5959FC;
    border-radius: 12px;
    color: #FFFFFF;
    font-size: 22.62px;
    font-weight: 700;
    line-height: 38.78px;
    letter-spacing: -0.05em;
    text-underline-position: from-font;
    text-decoration-skip-ink: none;

    margin-top: 23px;
    vertical-align: center;
    cursor: pointer;

    box-shadow: -3px -3px 6px 1px #FFFFFF80 inset, 3px 3px 6px 0px #CCDBE8 inset;
    /*box-shadow: -3px -3px 6px 1px #FFFFFF80 inset;*/

    /*box-shadow: 3px 3px 6px 0px #CCDBE8 inset;*/


    /*background-image: url('../img/block_blue.png'); !* 반투명 이미지 경로 *!*/
    /*background-size: 100% 100%; !* 이미지 세로를 컨테이너 높이에 맞춤 *!*/
    /*background-position: 0 center; !* 시작 위치 *!*/

    display: flex; /* Flexbox 사용 */
    align-items: center; /* 세로 중앙 정렬 */
    justify-content: center; /* 가로 중앙 정렬 */
    text-align: center; /* 텍스트 중앙 정렬 */
}

.boon-plus .title {
    font-weight: 700;
    font-size: 32px;
    line-height: 45px;
    left: 1.1vw;
    position: relative;
    margin-top: 20px;
}

.boon-plus .title span {
    position: relative;
    display: inline-block;
    top: -16px;
    left: -6px;
    color: #5959FC;
}

.boon-plus .text {
    font-weight: 400;
    font-size: 17px;
    line-height: 24px;
    letter-spacing: -1px;
    color: #000000;
    margin-bottom: 20px;
}

.round-info {
    display: flex;
    flex-direction: column;
}

.info-container {
    position: relative; /* 자식 요소의 기준점 설정 */
    display: flex;
    justify-content: space-between;
    overflow: hidden; /* 이미지가 영역을 넘지 않도록 */
    color: #FFFFFF;
    /*padding: 38px 26px;*/
    padding: 38px 30px;
}

.info-container.cb1{
    background-color: #AE8BFF;
}

.info-container.cb2{
    background-color: #6060F2;
}

.info-container.cb3{
    background-color: #2F2F2F;
}

.info-container img {
    width: 91px;
    position: absolute;
    right: 37px;
    bottom: 28px;
}

.info-container .info .top {
    font-weight: 300;
    font-size: 18px;
    line-height: 21px;
    letter-spacing: -1px;
}

.info-container .info .top b {
    font-weight: 700;
}

.info-container .info .bottom {
    font-weight: 400;
    font-size: 10px;
    line-height: 12px;
    margin-top: 10px;
}

.company {
    height: 630px;
    position: relative;
    background-image: url('../img/company_photo.png'); /* 반투명 이미지 경로 */
    background-size: auto 100%; /* 이미지 세로를 컨테이너 높이에 맞춤 */
    background-position: 0 center; /* 시작 위치 */
    background-repeat: repeat-x; /* 배경 이미지 가로 반복 */
    overflow: hidden;
    color: #FFFFFF;

    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    /*gap: 20px;*/

    font-weight: 500;
    font-size: 20px;
    line-height: 30px;
    letter-spacing: -0.5px;
    text-align: center;

    /* 애니메이션 추가 */
    animation: move-background 60s linear infinite alternate;
}

/* 배경 움직이는 애니메이션 */
@keyframes move-background {
    0% {
        background-position: 50% center; /* 가운데 시작 */
    }
    33% {
        background-position: 0 center; /* 왼쪽 시작 */
    }
    66% {
        background-position: 50% center; /* 가운데 시작 */
    }
    100% {
        background-position: 100% center; /* 오른쪽 끝 */
    }
}

.company::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5); /* 반투명 검정 배경 */
    z-index: 1;
}

.company .title {
    position: relative;
    z-index: 2;
    font-size: 38px;
    font-weight: 700;
    line-height: 45px;
    margin: -30px 0 80px 0;

    /*animation: reveal 1s cubic-bezier(0.77, 0, 0.175, 1) forwards;*/
    overflow: hidden;
}

.article.show {
    display: flex;
    flex-direction: column;
    width: 85%;
}

.article .letter {
    opacity: 0;
    transform: translateY(100%);
}

.article.show .letter {
    display: inline-block;
    opacity: 1;
    animation: reveal 1.5s cubic-bezier(0.77, 0, 0.175, 1) forwards;
}

.article.show p.letter {
    display: inline-block;
    opacity: 1;
    animation: reveal2 1.5s cubic-bezier(0.77, 0, 0.175, 1) forwards;
}

.company .article p {
    position: relative;
    z-index: 2;
    text-align: left;

    font-size: 17px;
    font-weight: 600;
    line-height: 30px;
    letter-spacing: -0.01em;
    text-underline-position: from-font;
    text-decoration-skip-ink: none;
}

@keyframes reveal {
    0% {
        transform: translateY(100%);
    }
    100% {
        transform: translateY(0);
    }
}

@keyframes reveal2 {
    0% {
        transform: translateY(30%);
    }
    100% {
        transform: translateY(0);
    }
}

.main-brand .logo-swiper {
    padding: 6px 0;
}
.swiper-horizontal {
    touch-action: pan-y;
}
.swiper {
    margin-left: auto;
    margin-right: auto;
    position: relative;
    overflow: hidden;
    list-style: none;
    padding: 0;
    z-index: 1;
    display: block;
}

.application-process {
    text-align: center;
    padding: 50px 20px 15px 20px;
}

.application-process .title {
    font-size: 38px;
    font-weight: 700;
    margin: 10px 0;
    position: relative;
    /*left: 0.5vw;*/
}

.application-process .title .dot {
    position: absolute;
    bottom: -6px;
    font-size: 51px;
    color: #5959FC;
}

.process-container {
    height: 600px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    position: relative;
    justify-content: space-around;
    padding: 0 14%;
}

.process-container::before {
    content: '';
    position: absolute;
    width: 12px;
    background-color: #EDEDED;
    height: 90%;
    top: 5%;
    /*left: 50%;*/
    right: 10%;
    transform: translateX(-50%);
    border-radius: 15px;
    z-index: 0;
}

/* 진행 바 */
.progress-bar {
    position: absolute;
    width: 12px;
    height: 90%;
    background-color: #EDEDED;
    /*left: 50%;*/
    right: 10%;
    transform: translateX(-50%);
    border-radius: 15px;
    z-index: 3;
    /*overflow: hidden;*/
}

/* 게이지 */
.progress-gauge {
    position: absolute;
    border-radius: 15px;
    width: 100%;
    height: 0;
    background-color: #5959FC;
    top: 0; /* 시작 위치를 위로 변경 */
    transition: height 0.3s linear;
    z-index: 1; /* 곰돌이보다 아래로 위치 */
}

/* 곰돌이 아이콘 */
.bear-icon {
    position: absolute;
    width: 81px;
    top: 0; /* 아이콘이 게이지 상단에서 시작 */
    transform: translate(-72%, 50%);
    transition: transform 0.3s ease-in-out;
    z-index: 55; /* 곰돌이가 게이지 위로 표시되도록 설정 */
}

.process-step {
    position: relative;
    display: flex;
    flex-direction: column;
    margin: 20px 0;
    z-index: 0;
}

/* 짝수 항목(02, 04)은 우측 정렬 */
/*.process-step:nth-child(odd) {*/
/*    text-align: right;*/
/*    margin-left: auto;*/
/*    align-items: flex-start;*/
/*}*/

.process-step .step-number {
    color: #5959FC;
    text-align: center;
}

.process-step .step-title {
    text-align: left;
    font-size: 25px;
    font-weight: 700;
    line-height: 30px;
    margin-bottom: 14px;
}

.process-step .step-description {
    font-size: 12px;
    font-weight: 500;
    line-height: 14px;
    text-align: left;
    color: #323232;
}

.inquiry-form {
    background-color: #F7F7F7;
    padding: 60px 20px 55px 20px;
    width: 100%;
    text-align: center;
}

.form-title {
    font-size: 14px;
    font-weight: 600;
    color: #5959FC;
    margin-bottom: 20px;
    letter-spacing: -1px;
}

.form-subtitle {
    font-size: 24px;
    font-weight: 700;
    margin-bottom: 30px;
}

.form-container {
    display: flex;
    flex-direction: column;
    gap: 23px;
}

.form-group {
    position: relative;
    text-align: left;
}

.form-group label {
    display: block;
    font-size: 16px;
    font-weight: 400;
    margin-bottom: 5px;
}

.form-group .required {
    color: #ff0000;
}

.form-group .optional {
    color: #8C8C8C;
    font-size: 14px;
    font-weight: 400;
    margin-left: 1px;
}

.form-group input {
    width: 100%;
    padding: 10px;
    font-size: 14px;
    border: 1px solid #ddd;
    border-radius: 5px;
    box-sizing: border-box;
}

.form-group input::placeholder {
    color: #8C8C8C;
}

.form-group input:focus {
    outline: none;
    border-color: #4a90e2;
    box-shadow: 0 0 4px rgba(74, 144, 226, 0.5);
}

.submit-button {
    background-color: #5959FC;
    color: #fff;
    border: none;
    padding: 12px;
    font-size: 15px;
    font-weight: 600;
    border-radius: 5px;
    letter-spacing: -1px;
    cursor: pointer;
}

.submit-button:hover {
    background-color: #4d4dfd;
}

.inquiry-form p {
    font-weight: 400;
    font-size: 16px;
    line-height: 30px;
    margin-top: 35px;
}

.brand-slide {
    overflow: hidden; /* 넘치는 부분 숨기기 */
    position: relative;
    height: 180px; /* 슬라이드 높이 설정 */
    width: 100%; /* 슬라이드 너비 설정 */
    background-color: #FFFFFF; /* 배경색 추가 (선택 사항) */
    margin: 35px 0 13px 0;
}

.img_area {
    display: flex;
    position: absolute;
    width: auto;
    animation-timing-function: linear; /* 부드러운 이동 */
    animation-iteration-count: infinite; /* 무한 반복 */
    will-change: transform; /* GPU 가속 */
}

.detail_img_area {
    width: 100%;
    margin-top: 60px;
}

.detail_img_area img {
    width: 100%;
    display: block; /* 줄바꿈 없이 블록 요소로 변경 */
    margin: 0;
    padding: 0;
}

.detail_img_area .btn-conatiner {
    position: relative;
}

.detail_img_area .btn-conatiner .btn {
    position: absolute;
    width: 165px;
    height: 46px;
    bottom: 42px;
    cursor: pointer;
}

.detail_img_area .btn-conatiner .btn.android {
    left: 38px;
}

.detail_img_area .btn-conatiner .btn.ios {
    right: 38px;
    bottom: 41px;
    height: 46px;
    /*background-color: blue;*/
}

.group.img_scroll_right {
    animation: scroll-right 50s linear infinite; /* 오른쪽으로 스크롤 */
}

.group.img_scroll_left {
    position: relative;
    top: 90px;
    animation: scroll-left 50s linear infinite; /* 왼쪽으로 스크롤 */
}

/* 오른쪽으로 스크롤 애니메이션 */
@keyframes scroll-right {
    0% {
        transform: translateX(-50%); /* 시작 위치 */
    }
    100% {
        transform: translateX(0%); /* 끝 위치 */
    }
}

/* 왼쪽으로 스크롤 애니메이션 */
@keyframes scroll-left {
    0% {
        transform: translateX(0%); /* 시작 위치 */
    }
    100% {
        transform: translateX(-50%); /* 끝 위치 */
    }
}

.img_area img {
    height: 100%; /* 이미지 크기 조정 */
    margin-right: 30px; /* 이미지 간 간격 */
    flex-shrink: 0; /* 이미지를 줄이지 않도록 설정 */
}

.group {
    display: flex;
    padding-right: 30px;
}

.footer {
    height: 300px;
    padding-top: 25px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 20px;
    text-align: center;
    color: #666666;
    font-weight: 400;
    font-size: 13px;
    line-height: 19px;
    letter-spacing: -0.1px;
    background-color: transparent;
    position: relative;
    overflow: hidden; /* ::after가 넘치지 않도록 설정 */
}

.footer::before {
    content: ''; /* 반드시 content를 설정해야 ::after가 렌더링 됨 */
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;

    opacity: 0.12; /* 투명도 설정 (0.0 ~ 1.0) */
    z-index: 0; /* 배경 이미지가 텍스트 아래로 배치되도록 설정 */
    pointer-events: none; /* 이미지가 클릭 이벤트를 막지 않도록 설정 */

    background-image: url('../img/company_photo2.png'); /* 반투명 이미지 경로 */
    background-size: 100% auto; /* 이미지 가로를 컨테이너 높이에 맞춤 */
    /*background-position: center top; !* 시작 위치 *!*/
    background-position: center -8px; /* 시작 위치 */
    background-repeat: no-repeat;
}

.footer img {
    width: 60px;
}

.footer span {
    color: #888888;
}

@media (max-width: 768px) {
    /*.product-list {*/
    /*    grid-template-columns: repeat(2, 1fr);*/
    /*}*/
    .best-products {
        flex-direction: column;
    }
    .product-item {
        flex: 0 0 calc(50vw - 30px); /* 각 상자의 너비 계산: 50%에서 간격(gap)을 뺌 */
    }
}

@media (min-width: 420px) {
    .speech-bubble {
        width: 80%;
        padding: 25px 10px;
    }

    .video-container img {
        height: 500px;
    }

    .settlement .swiper-container {
        height: 480px;
    }

    @keyframes zoomOut {
        0% {
            transform: translateX(-240px) scale(1); /* X축 이동 및 기본 크기 */
        }
        100% {
            transform: translateX(-350px) scale(0.8); /* X축 원위치 및 축소 */
        }
    }
}

@media (max-width: 399px) {
    .speech-bubble {
        width: 93%;
        padding: 25px 10px;
    }
}