.anime-target {
    opacity: 0;
    transform: translateY(50px);
    transition: opacity 0.6s ease, transform 0.6s ease;
    will-change: opacity, transform;
}
/* 애니메이션 완료 상태 */
.anime-target.animated {
    opacity: 1;
    transform: translateY(0);
}
/* 로딩 인디케이터 스타일 */
#loading-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #ffffff;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
}
.spinner {
    width: 50px;
    height: 50px;
    border: 3px solid #f3f3f3;
    border-top: 3px solid #3498db;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}
@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}
html {
    scroll-behavior: smooth !important;
}
.add_active {color:#A939ED !important;  position:relative;}
.add_active:after {border-bottom:3px solid #A939ED; content:""; position: absolute; bottom:30px; left:0; width:100%; display:inline;}
.left-section {
    display: flex;
    gap: 20px; /* 첫 번째와 두 번째 div 사이 간격 제거 */
}
.right-section {
    margin-left: auto; /* 마지막 div를 오른쪽 끝으로 이동 */
}.navbar>.container {
     display: flex;
     align-items: center;
 }
@media (max-width:768px) {
    .anime-target {
        opacity: 1 !important ;
        transition: opacity 0.6s ease-out, transform 0.6s ease-out !important;
    }
}
.gradient-text {
    font-size: 24px;
    font-weight: bold;
    background: linear-gradient(180deg, #7B39ED 0%, #C15BFF 100%);
    -webkit-background-clip: text;
    color: transparent;
}
.checkmark {
    color: #7B39ED;
    font-size: 24px;
    margin-right: 10px;
}



.circle-container {
    position: relative;
    width: 500px;
    margin:0 auto;
    height: 500px;
}/* 공통 애니메이션 설정 */
@keyframes fadeIn {
    0% {
        opacity: 0;
        transform: scale(0.5);
    }
    100% {
        opacity: 1;
        transform: scale(1);
    }
}

/* 각 서클의 애니메이션 설정 */
.circle1, .circle2, .circle3, .circle4, .circle5, .circle6 {
    position: absolute;
    left:50%;
    text-align:center;

    border-radius: 50%;
    border-style: solid;
    opacity: 0; /* 초기 상태에서 안 보이도록 설정 */
    animation: fadeIn 5s forwards; /* 1초 동안 애니메이션 실행 */
}

/* 각 서클 크기 */
.circle6 {
    width: 500px;
    height: 500px;

    bottom: 0;
    border-color: #CBB2F4;
    color: #CBB2F4;
    animation-delay: 2.5s;
}

.circle5 {
    width: 420px;
    height: 420px;
    bottom: 0;
    border-color: #9F72E7;
    color: #9F72E7;
    animation-delay: 2s;
}

.circle4 {
    width: 340px;
    height: 340px;
    bottom: 0;
    border-color: #925CD8;
    color: #925CD8;
    animation-delay: 1.5s;
}

.circle3 {
    width: 260px;
    height: 260px;
    bottom: 0;
    border-color: #7B39ED;
    color: #7B39ED;
    animation-delay: 1s;
}

.circle2 {
    width: 180px;
    height: 180px;
    bottom: 0;
    border-color: #9333F3;
    color: #9333F3;
    animation-delay: 0.5s;
}

.circle1 {
    width: 100px;
    height: 100px;
    border-color: #000;
    color: #9333F3;
    bottom: 30px;
    animation-delay: 0s;
}

.circle1 > .text {
    margin-top: 30%;
    color: #fff !important;
}

@keyframes circleAnimation {
    0% {
        opacity: 0;
        transform: translateX(-50%) scale(0.8);
    }
    50% {
        opacity: 1;
        transform: translateX(-50%) scale(1);
    }
    100% {
        opacity: 1;
        transform: translateX(-50%) scale(1);
    }

}

.personal_circle {    position: absolute;
    margin-top: -12px  !important;;
    background: #000;
    display: inline-block;
    opacity: 0;
    margin: 0 auto;
    left: 50%;
    top: 1.5%;
    transform: translate(-50%, 0%)  !important;
    line-height: 1;
    padding: 0 10px;
    animation: textFadeIn 1s ease forwards;
    font-weight: bold;
    font-size: 20px;}
.report_circle {    position: absolute;
    margin-top: -12px !important;
    background: #000;
    display: inline-block;
    opacity: 0;
    margin: 0 auto;
    left: 50%  !important;
    top: 0.5%  !important;;
    transform: translate(-50%, 0%)  !important;
    line-height: 1;
    padding: 0 10px;
    animation: textFadeIn 1s ease forwards;
    font-weight: bold;
    font-size: 20px;}
/* 서클 애니메이션 */
@keyframes fadeIn {
    0% {
        opacity: 0;
        transform: scale(1) translateX(-50%);
    }
    100% {
        opacity: 1;
        transform: scale(1) translateX(-50%);
    }
}

/* 텍스트 스타일 */
.text {
    margin-top:-30px;

    background:#000;
    display:inline-block;
    opacity: 0;
    line-height:1;
    padding:0 10px;


    animation: textFadeIn 1s ease forwards;
    font-weight: bold;
    font-size: 20px;
}

/* 텍스트 애니메이션 */
@keyframes textFadeIn {
    0% {
        opacity: 0;
        transform: translateY(10px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

/* 텍스트 애니메이션 순서 및 위치 */
.text:nth-child(7) {
    top: 0px; /* 중앙 정렬을 위한 값 수정 */
    background: #000;
    color:#CBB2F4;
    padding:16px;
    animation-delay: 3s;
}
.text:nth-child(8) {
    color:#9F72E7;
    top: 120px;
    background: #000;
    animation-delay: 2.5s;
}
.text:nth-child(9) {
    top: 190px;
    color:#925CD8;
    background: #000;
    animation-delay: 2s;
}
.text:nth-child(10) {
    top: 260px;
    background: #000;
    animation-delay: 1.5s;
}
.text:nth-child(11) {
    top: 330px;
    background: #000;
    animation-delay: 1s;
}
.text:nth-child(12) {
    top:435px;
    background: none;
    position:relative;
    padding:0;
    animation-delay: 0.5s;
    color:#fff;
}

.arrow-right {transform: rotate(0deg);}

.in_mobile {position:absolute; top:75px; left:50%; height:360px; overflow-y: scroll; width:75%; max-width:220px; transform: translateX(-50%);}
.in_mobile::-webkit-scrollbar {
    display: none;
}

.in_mobile .sent {text-align:left; line-height:1.2; padding-left:30px;}
.sent  .b{line-height:1.2 !important; background: #CECECE;
    color: #212121;
    border-radius: 8px;
    padding: 10px;
    max-width: 80%;
    line-height: 22px;
    font-size: 12px;
    flaot: left;
    display: inline-block; }
.received   .a{line-height:1.2 !important; font-size:12px;}
.in_mobile .sent > .message-image {text-align:left; margin:0; max-width:180px;}
.in_mobile .message {
    margin-bottom: 8px;
    width: 100%;
    display: inline-block;
    opacity: 1;
    transform: translateY(6px);
    transition: opacity 0.9s ease, transform 0.9s ease;
}
.in_mobile .sent:before {
    content: "";
    background: url(/barit/images/chat-avata.png);
    width: 24px;
    height: 24px;
    background-size: cover;
    border-radius: 50%;
    position: absolute;
    left: 0;
}
.chart-container-stick {
    position:relative;
    display: flex;
    justify-content: center;
    align-items: flex-end;
    height: 200px;
    width: 100%;
    margin: 0 auto;
}


.percents {position:absolute; left:50%; top:60%;   transform: translate(-50%, -50%);  opacity: 0; /* 초기 상태는 숨김 */
    animation: fade-in 1s ease-in-out 2s forwards; /* 3초 후에 나타남 */}
.bar {
    width: 100px;
    margin: 0 20px;
    position: relative;
    height: 100%; /* 바의 높이를 컨테이너 높이와 맞춤 */
    background-color: none;
    display: flex;
    justify-content: flex-end; /* 텍스트를 바닥에 맞추기 위해 flex 사용 */
    align-items: center;
    flex-direction: column;
}
.fill {
    position: absolute;
    bottom: 0;
    width: 100%;
    text-align: center;
    color: white;
    font-weight: bold;
    font-size: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    height: 0; /* 애니메이션 전 높이 */
    transition: height 3s ease-in-out; /* 부드러운 애니메이션 적용 */
}
/* 퍼센트 별 바 색과 높이 */
.bar-80 .fill {
    background: linear-gradient(180deg, #b065e0, #6e20cd);
}
.bar-10 .fill {
    background-color: #d1413d;
}
.bar-label {
    position: absolute;
    bottom: -25px;
    width: 100%;
    text-align: center;
    font-size: 14px;
    color: #f1f1f1;
}
/* 애니메이션을 적용하여 높이 변화를 구현 */
.bar-80 .fill {
    animation: fill-animation-80 3s ease-in-out forwards;
}
.bar-10 .fill {
    animation: fill-animation-10 3s ease-in-out forwards;
}

/* 애니메이션 keyframes */
@keyframes fill-animation-80 {
    0% { height: 0; }
    100% { height: 80%; }
}

@keyframes fill-animation-10 {
    0% { height: 0; }
    100% { height: 10%; }
}
@keyframes fade-in {
    0% { opacity: 0; }
    100% { opacity: 1; }
}


.imgcontainer {
    position: relative;
    width: 100%;
    height:360px;
    border:none;
    max-width:300px;
    margin:0 auto;
}
.imgcontainer .img {
    position: absolute;

    top: 0;
    left: -2px;
    width: 100%;
    height: 100%;
    background-size: 300px 100%;
}
.imgcontainer .background-img {
    background-image: url("/barit/images/af.png");

}
.imgcontainer .foreground-img {
    background-image: url("/barit/images/be.png");
    width: 50%;
}
.imgcontainer .slider {
    position: absolute;
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 100%;
    background: rgba(242, 242, 242, 0.01);
    outline: none;
    margin: 0;
    transition: all 0.2s;

    justify-content: center;
    align-items: center;
}
.imgcontainer .slider:hover {
    background:none;
    border:1px solid #000;
}
.imgcontainer .slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 1px;
    height:360px;
    background: white;
    cursor: pointer;
    border:1px solid #000;
}
.imgcontainer .slider::-moz-range-thumb {
    width: 1px;
    height:360px;
    background: white;
    cursor: pointer;
    border:1px solid #000;
}
.imgcontainer .slider-button {
    pointer-events: none;
    position: absolute;
    width: 50px;
    height: 30px;
    border-radius: 25px;
    background-color: white;
    left: calc(50% - 25px);
    background:rgba(0,0,0,0.5);
    top: calc(50% - 18px);


    justify-content: center;
    align-items: center;
}
.imgcontainer .slider-button:after {
    content: "";
    position:absolute;
    padding: 3px;
    display: inline-block;
    top:11px;
    right:12px;
    border: solid #fff;
    margin-left:10px;

    border-width: 0 1px 1px 0;
    transform: rotate(-45deg);

}

.imgcontainer .slider-button:before {
    content: "";
    padding: 3px;
    display: inline-block;
    border: solid #fff;
    position:absolute;
    top:11px;
    left:10px;
    border-width: 0 1px 1px 0;
    transform: rotate(135deg);
}


.imgcontainer-plastic {
    position: relative;
    width: 100%;
    height:680px;
    border-radius: 42px;
    overflow: hidden;
    border:none;
    max-width:360px;
    margin:0 auto;
}
.imgcontainer-plastic .img {
    position: absolute;
    top: 0;
    left: 0px;
    width: 100%;
    height: 100%;
    background-size: 360px 100%;
}
.imgcontainer-plastic .foreground-img {
    width: 50%;
}
.imgcontainer-plastic .foreground-img2 {
    width: 50%;
}
.imgcontainer-plastic .slider {
    position: absolute;
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 100%;
    border:none !important;
    background: rgba(242, 242, 242, 0.01);
    outline: none;
    margin: 0;
    transition: all 0.2s;
    justify-content: center;
    align-items: center;
}
.imgcontainer-plastic .slider:hover {
    background:none;
    border:1px solid #000;
}
.imgcontainer-plastic .slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 1px;
    height:680px;
    background: white;
    cursor: pointer;
    border:1px solid #000;
}
.imgcontainer-plastic .slider::-moz-range-thumb {
    width: 1px;
    height:360px;
    background: white;
    cursor: pointer;
    border:1px solid #000;
}


.imgcontainer-plastic .slider-button {
    pointer-events: none;
    position: absolute;
    width: 50px;
    height: 30px;
    border-radius: 25px;
    background-color: white;
    left: calc(50% - 25px);
    background:rgba(0,0,0,0.5);
    top: calc(50% - 18px);


    justify-content: center;
    align-items: center;
}
.imgcontainer-plastic .slider-button:after {
    content: "";
    position:absolute;
    padding: 3px;
    display: inline-block;
    top:11px;
    right:12px;
    border: solid #fff;
    margin-left:10px;

    border-width: 0 1px 1px 0;
    transform: rotate(-45deg);

}

.imgcontainer-plastic .slider-button:before {
    content: "";
    padding: 3px;
    display: inline-block;
    border: solid #fff;
    position:absolute;
    top:11px;
    left:10px;
    border-width: 0 1px 1px 0;
    transform: rotate(135deg);
}



.imgcontainer-plastic .slider-button2 {
    pointer-events: none;
    position: absolute;
    width: 50px;
    height: 30px;
    border-radius: 25px;
    background-color: white;
    z-index:8000!important;
    left: calc(50% - 25px);
    background:rgba(0,0,0,0.5);
    top: calc(50% - 18px);


    justify-content: center;
    align-items: center;
}
.imgcontainer-plastic .slider-button2:after {
    content: "";
    position:absolute;
    padding: 3px;
    display: inline-block;
    top:11px;
    right:12px;
    border: solid #fff;
    margin-left:10px;

    border-width: 0 1px 1px 0;
    transform: rotate(-45deg);

}

.imgcontainer-plastic .slider-button2:before {
    content: "";
    padding: 3px;
    display: inline-block;
    border: solid #fff;
    position:absolute;
    top:11px;
    left:10px;
    border-width: 0 1px 1px 0;
    transform: rotate(135deg);
}

.imgcontainer-plastic .intext{top:calc(46.5%) !important;}





.imgcontainer-pop {
    position: relative;
    width: 100%;
    height:360px;
    border-radius: 8px;
    overflow: hidden;
    border:none;
    max-width:260px;
    margin:0 auto;
}
.imgcontainer-pop .img {
    position: absolute;
    top: 0;
    left: 0px;
    width: 100%;
    height: 100%;
    background-size: 260px 100%;
}
.imgcontainer-pop .foreground-img {
    width: 50%;
}
.imgcontainer-pop .foreground-img3 {
    width: 50%;
}
.imgcontainer-pop .slider3 {
    position: absolute;
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 100%;
    border:none !important;
    background: rgba(242, 242, 242, 0.01);
    outline: none;
    margin: 0;
    transition: all 0.2s;
    justify-content: center;
    align-items: center;
}
.imgcontainer-pop .slider3:hover {
    background:none;
    border:1px solid #000;
}
.imgcontainer-pop .slider3::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 1px;
    height:360px;
    background: white;
    cursor: pointer;
    border:1px solid #000;
}
.imgcontainer-pop .slider3::-moz-range-thumb {
    width: 1px;
    height:360px;
    background: white;
    cursor: pointer;
    border:1px solid #000;
}


.imgcontainer-pop .slider-button3 {
    pointer-events: none;
    position: absolute;
    width: 50px;
    height: 30px;
    border-radius: 25px;
    background-color: white;
    left: calc(50% - 25px);
    background:rgba(0,0,0,0.5);
    top: calc(50% - 18px);


    justify-content: center;
    align-items: center;
}
.imgcontainer-pop .slider-button3:after {
    content: "";
    position:absolute;
    padding: 3px;
    display: inline-block;
    top:11px;
    right:12px;
    border: solid #fff;
    margin-left:10px;

    border-width: 0 1px 1px 0;
    transform: rotate(-45deg);

}

.imgcontainer-pop .slider-button3:before {
    content: "";
    padding: 3px;
    display: inline-block;
    border: solid #fff;
    position:absolute;
    top:11px;
    left:10px;
    border-width: 0 1px 1px 0;
    transform: rotate(135deg);
}



.imgcontainer-pop .slider-button3 {
    pointer-events: none;
    position: absolute;
    width: 50px;
    height: 30px;
    border-radius: 25px;
    background-color: white;
    left: calc(50% - 25px);
    background:rgba(0,0,0,0.5);
    top: calc(50% - 18px);


    justify-content: center;
    align-items: center;
}
.imgcontainer-pop .slider-button3:after {
    content: "";
    position:absolute;
    padding: 3px;
    display: inline-block;
    top:11px;
    right:12px;
    border: solid #fff;
    margin-left:10px;

    border-width: 0 1px 1px 0;
    transform: rotate(-45deg);

}

.imgcontainer-pop .slider-button2:before {
    content: "";
    padding: 3px;
    display: inline-block;
    border: solid #fff;
    position:absolute;
    top:11px;
    left:10px;
    border-width: 0 1px 1px 0;
    transform: rotate(135deg);
}

.imgcontainer-pop .intext{top:calc(46.5%) !important;}


#sliders {padding:0 !important; border:none; }
.sliders {padding:0 !important; border:none;}
.sliders3 {padding:0 !important; border:none;}
.sliders4 {padding:0 !important; border:none;}
input[type="range"] {
    -webkit-appearance: none; /* 기본 스타일 제거 (웹킷 브라우저) */
    width: 100%;
    margin: 0;
    padding: 0;
}

input[type="range"]:focus {
    outline: none; /* 포커스 시 나오는 기본 가이드선 제거 */
}
input[type="range"] {
    -webkit-appearance: none; /* 기본 스타일 제거 (웹킷 브라우저) */
    width: 100%;
    margin: 0;
    padding: 0;
    outline: none; /* 기본 아웃라인 제거 */
}

input[type="range"]:focus,
input[type="range"]:hover {
    outline: none; /* 포커스와 호버 시에도 기본 가이드선 제거 */
}



/* 보라색 네모 상자 */
.scan-box {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 300px;
    height: 330px;
    border:none;
    border-image: linear-gradient(90deg, #7e3ff2, #ae64e6);
    border-image-slice: 1;
    transform: translate(-50%, -55%);
}

/* 스캔 후 보라색 배경을 적용할 영역 */
/* 스캔 후 보라색 배경을 적용할 영역 */
.scan-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 0; /* 초기 상태에서 height 0 */
    background: rgba(126, 63, 242, 0.3); /* 보라색 투명 배경 */
    z-index: 2;
    border-radius: 15px;
    animation: bgGrow 3s linear infinite; /* height가 커지는 애니메이션 */
}
/* 스캔 라인 스타일 */
.scan-line {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 110%;
    transform: translate(-50%, -55%);
    height: 6px;
    border-radius: 2px;
    background: linear-gradient(90deg, rgba(126, 63, 242, 0.8), #7e3ff2, rgba(126, 63, 242, 0.8));
    box-shadow: 0px 0px 15px rgba(126, 63, 242, 0.7);
    animation: scanMove 3s linear infinite;
    z-index: 3;
}
/* 스캔 라인이 움직이는 애니메이션 */

/* 스캔 라인이 움직이는 애니메이션 */
@keyframes scanMove {
    0% {
        top: 0;
    }
    100% {
        top: 100%;
    }
}

/* 배경이 서서히 나타나는 애니메이션 */
@keyframes bgFade {
    0% {
        opacity: 0;
    }
    50% {
        opacity: 0.5;
    }
    100% {
        opacity: 1;
    }
}
/* 보라색 배경이 height 0에서 330px까지 커지는 애니메이션 */
@keyframes bgGrow {
    0% {
        height: 0;
    }
    100% {
        height: 330px; /* 최종 높이 설정 */
    }
}


/* 상단 텍스트 */
.scan-text {
    position: absolute;
    top: 60px;
    left: 50%;
    transform: translateX(-50%);
    color: #7e3ff2;
    font-size: 24px;
    font-weight: bold;
    z-index: 3;
}
/* 하단 텍스트 */
.bottom-text {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    color: #7e3ff2;
    font-size: 18px;
    font-weight: bold;
    z-index: 3;
}
/* 네모의 둥근 모서리 추가 */
.corner {
    position: absolute;
    width: 64px;
    height: 64px;
    border: 8px solid #7B39ED;
}
.scan-bar {width:110%;
    height:3px;
    border:8px solid #7B39ED;
    margin:0 auto;
    transform: translate(-50%, -55%);
    position:absolute; top: 50%;
    left: 50%;}

/* 각 코너의 위치 */
.corner.top-left {
    top: 0px;
    left: 0px;
    border-right: none;
    border-bottom: none;
    border-radius: 15px 0 0 0;
}

.corner.top-right {
    top: 0px;
    right: 0px;
    border-left: none;
    border-bottom: none;
    border-radius: 0 15px  0 0;
}

.corner.bottom-left {
    bottom: 0px;
    left: 0px;
    border-right: none;
    border-top: none;
    border-radius:0 0 0 15px ;
}

.corner.bottom-right {
    bottom: 0px;
    right: 0px;
    border-left: none;
    border-top: none;
    border-radius: 0 0  15px 0;
}

.business_box {padding:20px; border-radius: 8px; background: rgba(33, 33, 33, 1); margin-bottom:10px;}
.business_box p {line-height:1.3; margin-bottom:10px;}
.business_box li {margin-bottom:8px; position:relative }
.business_box li:before {content:""; width:6px; height:6px; border-radius: 3px; background:rgba(160, 160, 160, 1); position:absolute; left:-16px; top: 6px}

.circle-p {
    border:2px dashed rgba(147, 51, 243, 1);
    width:250px;
    height:250px;
    border-radius:50%;
    display:inline-block;
    position:relative;
    line-height:1.3;
    margin:0 auto;
    vertical-align: middle;

}


.circle-p2 {
     border:2px dashed rgba(147, 51, 243, 1);
     width:250px;
     height:250px;
    display:inline-block;
     border-radius:50%;
    line-height:1.3;
     position:relative;
     margin-left:-30px;
    vertical-align: middle;

 }


.circle-r {
    border:2px dashed rgba(229, 54, 54, 1);
    width:250px;
    height:250px;
    border-radius:50%;
    display:inline-block;
    position:relative;
    line-height:1.3;
    margin:0 auto;
    vertical-align: middle;

}
.bg-black {background:#000 !important}
.bg-black2 {background:#212121 !important}
.main_video   {position:absolute; top:0; left:0; height:100vh}
.chat-effect {box-shadow: inset 0px 200px 100px -100px rgba(0, 0, 0, 1),  inset 0px -200px 100px -100px rgba(0, 0, 0, 1) }
.blur_effect {background:rgba(0,0,0,0.2);filter: blur(25px); -webkit-filter: blur(25px);  height:110px;  z-index:7888; width:100%; position:fixed; top:0;left:0; z-index:0}
.blur_effect_ask {background:rgba(123, 57, 237, 0.7);filter: blur(20px); -webkit-filter: blur(20px);  height:100px; width:100px;  border-radius: 50%;  position:absolute; top:0;left:0; z-index:0}



/* Swiper 슬라이드 기본 스타일 */
.swiper-container {
    width: 100%;
    height: 100%;
}


.modal-set {max-width:600px; width:600px !important }
.popup_close {background: rgba(255, 255, 255, 0.3); border-radius: 50%; height:36px; width:36px; text-align:center}
.popup_design_button { background: rgba(255, 255, 255, 0.5); text-align:center; text-transform: none!important;  display:block!important; padding:16px 10px 16px 0 !important; margin-top:-50px !important  ;  backdrop-filter:blur(5px);}
.popup_bt_right {margin-top:-60px !important}
.add-blur {filter: blur(5px)}
.lang li {position:relative; font-size:12px;}
.lang li:hover {color:#000; font-weight:900; }
.incheck {opacity:0; width:16px; height:12px; background:url('/barit/images/icon/incheck.png');  background-size:contain;  position:absolute; right:16px; top:16px;}
.lang li:hover .incheck  {opacity:1}
.apexcharts-legend-series {margin :8px 15px !important;}
@media(max-width:768px){
    .chat-effect {box-shadow:  inset 12px 200px 46px -111px rgba(0, 0, 0, 1),  inset 0px -200px 100px -100px rgba(0, 0, 0, 1); width:100%; display:block; filter: blur(15px); -webkit-filter: blur(15px); }

    .blur_effect {
        background: rgba(0, 0, 0, 0.2);
        filter: blur(25px);
        -webkit-filter: blur(25px);
        height: 56px;

        z-index: 7888;
        width: 100%;
        position: fixed;
        top: 0;
        left: 0;
        z-index: 0;
    }


}

.chat-messages .sent {padding-left:65px;}
.chat-messages .sent:before {content:"";
    background:url('/barit/images/chat-avata.png');
    width:54px;
    height:54px;
    background-size:cover;

    border-radius: 50%;
position:absolute;
    left:0;

}
.chart-percent {
         top:45%;
         left:50%;
         transform: translate(-50%, -50%)  !important;
     }
.chart-percent_inner{
    top:55%;
    left:50%;
    transform: translate(-50%, -50%)  !important;
}
.chart-percent_inner_ul{
    top:70%;
    left:50%;
    transform: translate(-50%, -50%)  !important;
}
.chart-percent_inner_ul span {line-height:1.6 !important;}

.chart-percent  canvas {
    width: 180px !important;
    height: 180px !important;
    color:#fff;
}

/* Customized Service */

.left_section {width:100%; display:flex; justify-content: space-between}
.left_section .chat  {border-radius: 50%; margin:auto;}

.right_section {width:100%; display:flex; justify-content: space-between}


/*swiper custome*/


/* 재생 버튼 기본 스타일 */
.play-button {
    width: 50px;
    height: 50px;
    background-color: #4b296b;
    border-radius: 50%;
    border: none;
    position: relative;
    cursor: pointer;
    margin-right: 20px;
}

/* 재생 중 상태 (play 아이콘) */
.play-button.playing::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 0;
    height: 0;
    border-left: 12px solid white;
    border-top: 8px solid transparent;
    border-bottom: 8px solid transparent;
}

/* 정지 상태 (pause 아이콘) */
.play-button.paused::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 12px;
    height: 12px;
    background-color: white;
    clip-path: inset(0 0 0 0);
}

/* Swiper 페이지네이션 스타일 */
.swiper-pagination-bullet {
    background-color: #4b296b;
    opacity: 0.5;
}

.swiper-pagination-bullet-active {
    background-color: #b08fe6;
    opacity: 1;
}


.slider_bottom_navi {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 20px;
    gap: 20px;
}
.slider_bottom_navi .swiper-pagination {
    display: inline;
    max-width:150px;
    position:relative !important;
    justify-content: center;
    align-items: center;
    width:auto;
    margin-top: 10px;
    gap: 5px;
}


.slider_play_pause_btn {
    cursor: pointer;
    width: 32px;
    height: 32px;
    display: inline-block;
    align-items: center;
    justify-content: center;
    background: rgba(123, 57, 237, 0.3);
    border-radius: 50%;
    transition: all 0.3s ease;
}

.slider_play_pause_btn:hover {
    background: rgba(123, 57, 237, 0.3);

}
.slider_play_pause_btn i {
    color: #fff;
    font-size: 14px;
}
.swiper-pagenation {
    display: flex;
    gap: 8px;
}
.swiper-pagenation .swiper-pagination-bullet {
    width: 8px;
    height: 8px;
    background: rgba(123, 57, 237, 0.3);
    border-radius: 50%;
    cursor: pointer;
}
.swiper-pagenation .swiper-pagination-bullet-active {
    background: #fff;
}
.slider_play_pause_btn {
     cursor: pointer;
     width: 48px;
     height: 48px;
     display: flex;
     align-items: center;
     justify-content: center;
     background: rgba(123, 57, 237, 0.3);
     border-radius: 50%;
     transition: all 0.3s ease;
 }

.slider_play_pause_btn:hover {
    background: rgba(123, 57, 237, 0.8);
}

.slider_play_pause_btn i {
    color: #fff;
    font-size: 14px;
}
.slider_pagenation {
     display: flex;
     gap: 8px;
     justify-content: center;
 }

.swiper-pagination-bullet-active {
    background: #fff;
    transform: scale(1.2);    background: linear-gradient(90deg, #7B39ED 0%, #C15BFF 100%);
    opacity: 1;
    width: 32px;
    height: 8px;
    border-radius: 4px;
}

.stick-border {border-bottom:1px solid #7B39ED;}
.deco_vertical {margin:auto; position:relative; width:4px; height:100px; background: linear-gradient(0deg, #7B39ED 0%, #C15BFF 100%); opacity: 0.3}
.scan-setting {bottom:0; left:50%;  z-index:805;   transform: translate(-50%, -0%);}

.card-container {
    width: 280px;
    height: 450px;
    position: relative;
}

.card {
    position: absolute;
    width: 100%;
    background: rgba(56, 56, 56, 1);
    border-radius: 8px 8px  0 0 ;
    padding: 20px;
    box-sizing: border-box;
    color: white;
    transition: all 0.5s ease;
    opacity: 0;
    pointer-events: none;
}
.card.active {
    opacity: 1;
    pointer-events: auto;
}
.card-content {
    display: flex;
    flex-direction: column;
}
.score-info {
    background: rgba(56, 56, 56, 1);
    border-radius: 0 0 8px 8px;
    display:flex;
    padding:20px 25px;
    justify-content: space-between; /* 양쪽 끝으로 배치 */
}
.card-image {
    width: 100%;
    height: 450px;
    object-fit: cover;
    border-radius: 8px 8px  0 0 ;
    margin-bottom: 0px;
}
.score-date {
    color: #888;
    margin-bottom: 5px;
}
.score {}

.partner_box {
    margin-bottom: 40px;
    text-align: center;
    width: 100%;
    display: flex;  /* flexbox 사용 */
    justify-content: center;  /* 가로 중앙 정렬 */
    align-items: center;  /* 세로 중앙 정렬 */

    height: 117px !important;
}
.partner_box img {max-height:80px;}
.grayscale_img_3 {    filter: grayscale(100%); }
.card2 {
    border: none;
    padding:10px;
    border-radius: 10px;
    transition: transform 0.2s ease, border-radius 0.2s ease;
    overflow: hidden; /* 경계 바깥을 숨겨서 border-radius 효과를 유지 */
    transform-style: preserve-3d; /* 3D 렌더링 방식 유지 */
    will-change: transform; /* 요소가 transform될 것임을 미리 브라우저에 알림 */
    backface-visibility: hidden; /* 렌더링 문제 방지 */
}

.card2:hover {
    transform: scale(1.05);  /* hover 시 5% 확대 */
    border-radius: 10px;  /* hover 시에도 동일한 border-radius 유지 */
}


.card2 img {
    border-bottom: 1px solid #444;
    border-radius: 10px;
}
.card-body {
    padding: 15px;
}
.card-title {
    font-size: 1.1rem;
    font-weight: bold;
}
.card-text {
    font-size: 0.9rem;
    color: #ccc;
}
.card-date {
    font-size: 0.8rem;
    color: #888;
}
.card-link {
    color: #888;
    text-decoration: underline;
    font-size: 0.9rem;
}
.card-link:hover {
    text-decoration: underline;
}

.chart-container {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20px;
}
canvas {
    width: 400px !important;
    height: 300px !important;
}
.legend-container {
    display: flex;
    justify-content: center;
    margin-top: 10px;
    color: #fff;
}
.legend-item {
    margin: 0 10px;
    font-size: 14px;
}
.legend-color {
    width: 12px;
    height: 12px;
    display: inline-block;
    margin-right: 5px;
}
#beforeChartLegend,
#afterChartLegend {
    margin-top: 30px;
} .chart-container {
      display: flex;
      justify-content: center;
      align-items: center;
      padding: 20px;
  }
#beforeChart, #afterChart {
    width: 400px;
}
#chart-container {
    margin-top: 50px;
    border: 2px solid #B27CD5; /* 보라색 테두리 추가 */
    padding: 10px; /* 내부 여백 추가 */
    display: inline-block; /* 차트를 중앙에 맞추기 위해 사용 */

}


     .footer-logo {
         font-weight: bold;
         font-size: 24px;
         margin-bottom: 20px;
         color: #fff;

     }
     .footer-btn-group button {
         background-color: #fff;
         color: #000;
         border-radius: 20px;
         padding: 5px 15px;
         font-size: 14px;
         margin-right: 10px;
         border: none;
     }
     .footer-links {margin-top:50px !important; display: block}
     .footer-links a {
         color: #aaa;
         margin-right: 20px;
         text-decoration: underline;
         font-size: 14px;
         margin-top:40px;
     }
     .footer-links a:hover {
         color: #fff;
     }
     .footer-social-icons a {
         color: #aaa;
         margin-right: 10px;
         font-size: 1.4rem;
         display: inline-block;
         width: 40px;
         height: 40px;
         background-color: #444;
         border-radius: 50%;
         text-align: center;
         line-height: 36px;
     }
     .footer-social-icons a:hover {
         color: #fff;
     }
     .footer-social-icons {
         display: flex;
         align-items: center;
         margin-top:-120px;
     }
     .back-to-top {
         position:fixed;
         right:30px;
         bottom:30px;
         background-color: #555;
         color: #fff;
         width: 40px;
         height: 40px;
         border-radius: 50%;
         margin-top:80px;
         display: flex;
         align-items: center;
         justify-content: center;
         margin-left: 20px;
         cursor: pointer;
         font-size: 1.2rem;
     }

     .team-member {
         text-align: center;
         margin-bottom: 40px;
     }
     .team-member .profile-circle {
         background: rgba(123, 57, 237, 1);
         color: #fff;
         width: 200px;
         height: 200px;
         border-radius: 80px;
         display: flex;
         flex-direction: column;
         align-items: center;
         justify-content: center;
         font-size: 1.2rem;
         margin: 0 auto 10px;
     }

     .team-member .profile-border {

         border: 2px solid rgba(123, 57, 237, 1);
         width: 200px;
         height: 200px;
         border-radius: 80px;
         display: flex;
         flex-direction: column;
         align-items: center;
         justify-content: center;
         margin: 0 auto 10px;
     }
     .team-member .profile-border  h6{
         margin-bottom:0;
         padding-top:25px;
     }



     .linkedin-link {
         color: rgba(255,255,255,0.8);
         font-size: 12px;
         text-decoration: none;
     }
     .linkedin-link:hover {
         text-decoration: underline;
     }

     .header-btn {background:#fff!important; color:#000 !important;}



.header-icon .dropdown-menu {
    background: rgba(255, 255, 255, 1);
    min-width: 120px;
    padding: 0;
    right:85px !important;
    top:80px;
}

.header-icon .dropdown-item {
    color: #000;
    padding: 0rem 0rem;
    font-size: 12px;
    font-weight: 600;
}

.header-icon .dropdown-item:hover {
    background: rgba(255, 255, 255, 0.1);
}

.header-icon .dropdown-divider {
    border-color: rgba(255, 255, 255, 0.1);
    margin: 0.5rem 0;
}

.header-icon .language-select {
    padding: 0.0rem;
}

.header-icon .language-select li  {
    border-bottom:1px solid #d9d9d9;
    padding:0.5rem;
}

.header-icon .language-select li:last-child  {
    border:none !important;
}



.header-icon .language-select li a:hover  {
    color:#000;
    font-weight:900;
}


.header-icon .form-check {
    margin-bottom: 0.5rem;
}

.header-icon .form-check-label {
    color: #000;
    font-size: 12px;
}

.header-icon .form-check-input {
    background-color: transparent;
    border-color: rgba(255, 255, 255, 0.5);
}

.header-icon .form-check-input:checked {
    background-color: #fff;
    border-color: #fff;
}
/* 기본 드롭다운 화살표 제거 */
.custom-dropdown.dropdown-toggle::after {
    display: none;
}

/* 이미지 크기 조정 */
.global-icon {
    width: 20px;  /* 필요에 따라 크기 조정 */
    height: auto;
    margin:0 15px;
    vertical-align: middle;
}

/* 버튼 패딩 조정 */
.custom-dropdown {
    padding: 8px 12px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* 호버 효과 */
.custom-dropdown:hover {
    background-color: rgba(255, 255, 255, 0.1);
}

.mobile_height{}
@media(max-width:768px) {

    .modal-set {max-width:600px; width:100% !important }


    .mobile_height {
        height: 100vh;
    }



    .circle-container {
        position: relative;
        width: auto;
        margin:0 auto;
        height: 300px;
    }

    /* 각 서클의 애니메이션 설정 */
    .circle1, .circle2, .circle3, .circle4, .circle5, .circle6 {
        position: absolute;
        left:50%;
        text-align:center;
        transform: translateX(-50%);
        border-radius: 50%;
        border-style: solid;
        opacity: 0; /* 초기 상태에서 안 보이도록 설정 */
        animation: fadeIn 5s forwards; /* 1초 동안 애니메이션 실행 */
    }

    /* 각 서클 크기 */
    .circle6 {
        width: 280px;
        height: 280px;

        bottom: 0 !important;
        border-color: #CBB2F4;
        color: #CBB2F4;
        animation-delay: 2.5s;
    }

    .circle5 {
        width: 240px;
        height: 240px;
        bottom: 0;
        border-color: #9F72E7;
        color: #9F72E7;
        animation-delay: 2s;
    }

    .circle4 {
        width: 200px;
        height: 200px;
        bottom: 0;
        border-color: #925CD8;
        color: #925CD8;
        animation-delay: 1.5s;
    }

    .circle3 {
        width: 160px;
        height: 160px;
        bottom: 0;
        border-color: #7B39ED;
        color: #7B39ED;
        animation-delay: 1s;
    }

    .circle2 {
        width: 120px;
        height: 120px;
        bottom: 0;
        border-color: #9333F3;
        color: #9333F3;
        animation-delay: 0.5s;
    }

    .circle1 {
        width: 80px;
        height: 80px;
        border-color: none !important;
        color: #9333F3;
        bottom: 00px;
        animation-delay: 0s;
    }

    .circle1 > .text {
        margin-top: 00%;
        color: #fff !important;
    }

    @keyframes circleAnimation {
        0% {
            opacity: 0;
            transform: translateX(-50%) scale(0.8);
        }
        50% {
            opacity: 1;
            transform: translateX(-50%) scale(1);
        }
        100% {
            opacity: 1;
            transform: translateX(-50%) scale(1);
        }

    }

    /* 공통 애니메이션 설정 */
    @keyframes fadeIn {
        0% {
            opacity: 0;
            transform: scale(0.5);
        }
        100% {
            opacity: 1;
            transform: scale(1);
        }
    }

    /* 각 서클 크기 */




    .personal_circle {    position: absolute;
        margin-top: -12px  !important;;
        background: #000;
        display: inline-block;
        opacity: 0;
        margin: 0 auto;
        left: 50%;
        top: 1.5%;
        transform: translate(-50%, 0%)  !important;
        line-height: 1;
        padding: 0 10px;
        animation: textFadeIn 1s ease forwards;
        font-weight: bold;
        font-size: 20px;}
    .report_circle {    position: absolute;
        margin-top: -12px !important;
        background: #000;
        display: inline-block;
        opacity: 0;
        margin: 0 auto;
        left: 50%  !important;
        top: 0.5%  !important;;
        transform: translate(-50%, 0%)  !important;
        line-height: 1;
        padding: 0 10px;
        animation: textFadeIn 1s ease forwards;
        font-weight: bold;
        font-size: 20px;}
    /* 서클 애니메이션 */
    @keyframes fadeIn {
        0% {
            opacity: 0;
            transform: scale(1) translateX(-50%);
        }
        100% {
            opacity: 1;
            transform: scale(1) translateX(-50%);
        }
    }

    /* 텍스트 스타일 */
    .text {
        margin-top:-30px;

        background:#000;
        display:inline-block;
        opacity: 0;
        line-height:1;
        padding:0 10px;


        animation: textFadeIn 1s ease forwards;
        font-weight: bold;
        font-size: 20px;
    }

    /* 텍스트 애니메이션 */
    @keyframes textFadeIn {
        0% {
            opacity: 0;
            transform: translateY(10px);
        }
        100% {
            opacity: 1;
            transform: translateY(0);
        }
    }

    /* 텍스트 애니메이션 순서 및 위치 */
    .text:nth-child(7) {
        top: 0px; /* 중앙 정렬을 위한 값 수정 */
        background: #000;
        color:#CBB2F4;
        padding:16px;
        animation-delay: 3s;
    }
    .text:nth-child(8) {
        color:#9F72E7;
        top: 120px;
        background: #000;
        animation-delay: 2.5s;
    }
    .text:nth-child(9) {
        top: 190px;
        color:#925CD8;
        background: #000;
        animation-delay: 2s;
    }
    .text:nth-child(10) {
        top: 260px;
        background: #000;
        animation-delay: 1.5s;
    }
    .text:nth-child(11) {
        top: 330px;
        background: #000;
        animation-delay: 1s;
    }
    .text:nth-child(12) {
        top:435px;
        background: none;
        position:relative;
        padding:0;
        animation-delay: 0.5s;
        color:#fff;
    }

    .team-member {
        text-align: center;
        margin-bottom: 20px;
    }
    .team-member .profile-circle {
        background: rgba(123, 57, 237, 1);
        color: #fff;
        width: 120px;
        height: 120px;
        border-radius: 50px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        font-size: 1.2rem;
        margin: 0 auto 10px;
    }
    .team-member .profile-border {
        border: 2px solid rgba(123, 57, 237, 1);
        width: 120px;
        height: 120px;
        border-radius: 50px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        margin: 0 auto 0px;
    }
    .team-member .profile-border  h6{
        margin-bottom:0;
        padding-top:25px;
    }


    .team-member .profile-border  p{
        font-size:12px;
        line-height:14px;
    }
    .linkedin-link {
        color: rgba(255,255,255,0.8);
        font-size: 12px;
        text-decoration: none;
    }
    .linkedin-link:hover {
        text-decoration: underline;
    }


    .circle-p {
        border:2px dashed rgba(147, 51, 243, 1);
        width:160px;
        height:160px;
        border-radius:50%;
        display:inline-block;
        position:relative;
        line-height:1.3;
        margin:0 auto;
        vertical-align: middle;

    }
    .circle-p2 {
        border:2px dashed rgba(147, 51, 243, 1);
        width:160px;
        height:160px;
        display:inline-block;
        border-radius:50%;
        line-height:1.3;
        position:relative;
        margin-left:-30px;
        vertical-align: middle;

    }


    .circle-r {
        border:2px dashed rgba(229, 54, 54, 1);
        width:160px;
        height:160px;
        border-radius:50%;
        display:inline-block;
        position:relative;
        line-height:1.3;
        margin:0 auto;
        vertical-align: middle;

    }
    .fs-20 {font-size:14px !important}
    .circle-p p, .circle-r p, .circle-p2 p {font-size:12px !important}
    .circle-r p {padding-top:10px !important}

    .r-1 {margin-left:15px !important;}
    .r-2 {margin-left:-15px !important;}

    .r-3 {margin-left:15px !important; margin-top:-30px;}
    .r-4 {margin-left:-15px !important;  margin-top:-30px;}

    .r-3 h6 {margin-left:0px !important; margin-top:140px; position:absolute}
    .r-4 h6 {margin-left:-15px !important; right:0;  margin-top:140px; position:absolute}

    .r-3 p {margin-left:0px !important; margin-top:50px; }
    .r-4 p {margin-left:0 !important; right:0;  margin-top:40px;}

    /* 보라색 네모 상자 */
    .scan-box {
        position: absolute;
        top: 50%;
        left: 50%;
        width: 200px;
        height: 240px;
        border:none;
        border-image: linear-gradient(90deg, #7e3ff2, #ae64e6);
        border-image-slice: 1;
        transform: translate(-50%, -55%);
    }

    /* 스캔 후 보라색 배경을 적용할 영역 */
    /* 스캔 후 보라색 배경을 적용할 영역 */
    .scan-bg {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 0; /* 초기 상태에서 height 0 */
        background: rgba(126, 63, 242, 0.3); /* 보라색 투명 배경 */
        z-index: 2;
        border-radius: 15px;
        animation: bgGrow 3s linear infinite; /* height가 커지는 애니메이션 */
    }
    /* 스캔 라인 스타일 */
    .scan-line {
        position: absolute;
        top: 50%;
        left: 50%;
        width: 110%;
        transform: translate(-50%, -55%);
        height: 6px;
        border-radius: 2px;
        background: linear-gradient(90deg, rgba(126, 63, 242, 0.8), #7e3ff2, rgba(126, 63, 242, 0.8));
        box-shadow: 0px 0px 15px rgba(126, 63, 242, 0.7);
        animation: scanMove 3s linear infinite;
        z-index: 3;
    }
    /* 스캔 라인이 움직이는 애니메이션 */

    /* 스캔 라인이 움직이는 애니메이션 */
    @keyframes scanMove {
        0% {
            top: 0;
        }
        100% {
            top: 100%;
        }
    }

    /* 배경이 서서히 나타나는 애니메이션 */
    @keyframes bgFade {
        0% {
            opacity: 0;
        }
        50% {
            opacity: 0.5;
        }
        100% {
            opacity: 1;
        }
    }
    /* 보라색 배경이 height 0에서 330px까지 커지는 애니메이션 */
    @keyframes bgGrow {
        0% {
            height: 0;
        }
        100% {
            height: 240px; /* 최종 높이 설정 */
        }
    }


    /* 상단 텍스트 */
    .scan-text {
        position: absolute;
        top: 20px;
        left: 50%;
        transform: translateX(-50%);
        color: #7e3ff2;
        font-size: 16px;
        font-weight: bold;
        z-index: 3;
    }
    /* 하단 텍스트 */
    .bottom-text {
        position: absolute;
        bottom: 20px;
        left: 50%;
        transform: translateX(-50%);
        color: #7e3ff2;
        font-size: 18px;
        font-weight: bold;
        z-index: 3;
    }
    /* 네모의 둥근 모서리 추가 */
    .corner {
        position: absolute;
        width: 64px;
        height: 64px;
        border: 4px solid #7B39ED;
    }
    .scan-bar {width:110%;
        height:3px;
        border:4px solid #7B39ED;
        margin:0 auto;
        transform: translate(-50%, -55%);
        position:absolute; top: 50%;
        left: 50%;}

    /* 각 코너의 위치 */
    .corner.top-left {
        top: 0px;
        left: 0px;
        border-right: none;
        border-bottom: none;
        border-radius: 15px 0 0 0;
    }

    .corner.top-right {
        top: 0px;
        right: 0px;
        border-left: none;
        border-bottom: none;
        border-radius: 0 15px  0 0;
    }

    .corner.bottom-left {
        bottom: 0px;
        left: 0px;
        border-right: none;
        border-top: none;
        border-radius:0 0 0 15px ;
    }

    .corner.bottom-right {
        bottom: 0px;
        right: 0px;
        border-left: none;
        border-top: none;
        border-radius: 0 0  15px 0;
    }
    .scan-setting {bottom:0; left:50%;  z-index:805;  font-size:12px !important;  transform: translate(-50%, -0%); line-height:20px !important}
    .scan-setting h4 {margin-bottom:10px !important }


    .card-container {
        width: 100%;
        height: 250px;
        position: relative;
    }

    .card {
        position: absolute;
        width: 100%;
        background: rgba(56, 56, 56, 1);
        border-radius: 8px 8px  0 0 ;
        padding: 20px;
        box-sizing: border-box;
        color: white;
        transition: all 0.5s ease;
        opacity: 0;
        pointer-events: none;
    }
    .card.active {
        opacity: 1;
        pointer-events: auto;
    }
    .card-content {
        display: flex;
        flex-direction: column;
    }
    .score-info {
        background: rgba(56, 56, 56, 1);
        border-radius: 0 0 8px 8px;
        display:flex;
        padding:20px 25px 10px;
        justify-content: space-between; /* 양쪽 끝으로 배치 */
    }
    .card-image {
        width: 100%;
        height: 250px;
        object-fit: cover;
        border-radius: 8px 8px  0 0 ;
        margin-bottom: 0px;
    }
    .score-date {
        color: #888;
        margin-bottom: 5px;
    }
    .score {}

    .imgcontainer-plastic {
        position: relative;
        width: 280px;
        height:480px;
        border-radius: 42px;
        overflow: hidden;
        border:none;
        max-width:360px;
        margin:0 auto;
    }
    .imgcontainer-plastic .img {
        position: absolute;
        top: 0;
        left: 0px;
        width: 100%;
        height: 100%;
        background-size: 280px 100%;
    }
    .imgcontainer-plastic .foreground-img {
        width: 50%;
    }
    .imgcontainer-plastic .foreground-img2 {
        width: 50%;
    }
    .imgcontainer-plastic .slider {
        position: absolute;
        -webkit-appearance: none;
        appearance: none;
        width: 100%;
        height: 100%;
        border:none !important;
        background: rgba(242, 242, 242, 0.01);
        outline: none;
        margin: 0;
        transition: all 0.2s;
        justify-content: center;
        align-items: center;
    }
    .imgcontainer-plastic .slider:hover {
        background:none;
        border:1px solid #000;
    }
    .imgcontainer-plastic .slider::-webkit-slider-thumb {
        -webkit-appearance: none;
        appearance: none;
        width: 1px;
        height:680px;
        background: white;
        cursor: pointer;
        border:1px solid #000;
    }
    .imgcontainer-plastic .slider::-moz-range-thumb {
        width: 1px;
        height:360px;
        background: white;
        cursor: pointer;
        border:1px solid #000;
    }


    .imgcontainer-plastic .slider-button {
        pointer-events: none;
        position: absolute;
        width: 50px;
        height: 30px;
        border-radius: 25px;
        background-color: white;
        left: calc(50% - 25px);
        background:rgba(0,0,0,0.5);
        top: calc(50% - 18px);


        justify-content: center;
        align-items: center;
    }
    .imgcontainer-plastic .slider-button:after {
        content: "";
        position:absolute;
        padding: 3px;
        display: inline-block;
        top:11px;
        right:12px;
        border: solid #fff;
        margin-left:10px;

        border-width: 0 1px 1px 0;
        transform: rotate(-45deg);

    }

    .imgcontainer-plastic .slider-button:before {
        content: "";
        padding: 3px;
        display: inline-block;
        border: solid #fff;
        position:absolute;
        top:11px;
        left:10px;
        border-width: 0 1px 1px 0;
        transform: rotate(135deg);
    }



    .imgcontainer-plastic .slider-button2 {
        pointer-events: none;
        position: absolute;
        width: 50px;
        height: 30px;
        z-index:7878!important;
        border-radius: 25px;
        background-color: white;
        left: calc(50% - 25px);
        background:rgba(0,0,0,0.5);
        top: calc(50% - 18px);


        justify-content: center;
        align-items: center;
    }
    .imgcontainer-plastic .slider-button2:after {
        content: "";
        position:absolute;
        padding: 3px;
        display: inline-block;
        top:11px;
        right:12px;
        border: solid #fff;
        margin-left:10px;

        border-width: 0 1px 1px 0;
        transform: rotate(-45deg);

    }

    .imgcontainer-plastic .slider-button2:before {
        content: "";
        padding: 3px;
        display: inline-block;
        border: solid #fff;
        position:absolute;
        top:11px;
        left:10px;
        border-width: 0 1px 1px 0;
        transform: rotate(135deg);
    }




    .imgcontainer-plastic {
        position: relative;
        width: 280px;
        height:520px;
        border-radius: 42px;
        overflow: hidden;
        border:none;
        max-width:360px;
        margin:0 auto;
    }
    .imgcontainer-plastic .img {
        position: absolute;
        top: 0;
        left: 0px;
        width: 100%;
        height: 100%;
        background-size: 280px 100%;
    }
    .imgcontainer-plastic .foreground-img {
        width: 50%;
    }
    .imgcontainer-plastic .foreground-img2 {
        width: 50%;
    }
    .imgcontainer-plastic .slider {
        position: absolute;
        -webkit-appearance: none;
        appearance: none;
        width: 100%;
        height: 100%;
        border:none !important;
        background: rgba(242, 242, 242, 0.01);
        outline: none;
        margin: 0;
        transition: all 0.2s;
        justify-content: center;
        align-items: center;
    }
    .imgcontainer-plastic .slider:hover {
        background:none;
        border:1px solid #000;
    }
    .imgcontainer-plastic .slider::-webkit-slider-thumb {
        -webkit-appearance: none;
        appearance: none;
        width: 1px;
        height:520px;
        background: white;
        cursor: pointer;
        border:1px solid #000;
    }
    .imgcontainer-plastic .slider::-moz-range-thumb {
        width: 1px;
        height:360px;
        background: white;
        cursor: pointer;
        border:1px solid #000;
    }


    .imgcontainer-plastic .slider-button {
        pointer-events: none;
        position: absolute;
        width: 50px;
        height: 30px;
        border-radius: 25px;
        background-color: white;
        left: calc(50% - 25px);
        background:rgba(0,0,0,0.5);
        top: calc(50% - 18px);


        justify-content: center;
        align-items: center;
    }
    .imgcontainer-plastic .slider-button:after {
        content: "";
        position:absolute;
        padding: 3px;
        display: inline-block;
        top:11px;
        right:12px;
        border: solid #fff;
        margin-left:10px;

        border-width: 0 1px 1px 0;
        transform: rotate(-45deg);

    }

    .imgcontainer-plastic .slider-button:before {
        content: "";
        padding: 3px;
        display: inline-block;
        border: solid #fff;
        position:absolute;
        top:11px;
        left:10px;
        border-width: 0 1px 1px 0;
        transform: rotate(135deg);
    }



    .imgcontainer-plastic .slider-button2 {
        pointer-events: none;
        position: absolute;
        width: 50px;
        height: 30px;
        border-radius: 25px;
        background-color: white;
        left: calc(50% - 25px);
        background:rgba(0,0,0,0.5);
        top: calc(50% - 18px);


        justify-content: center;
        align-items: center;
    }
    .imgcontainer-plastic .slider-button2:after {
        content: "";
        position:absolute;
        padding: 3px;
        display: inline-block;
        top:11px;
        right:12px;
        border: solid #fff;
        margin-left:10px;

        border-width: 0 1px 1px 0;
        transform: rotate(-45deg);

    }

    .imgcontainer-plastic .slider-button2:before {
        content: "";
        padding: 3px;
        display: inline-block;
        border: solid #fff;
        position:absolute;
        top:11px;
        left:10px;
        border-width: 0 1px 1px 0;
        transform: rotate(135deg);
    }


    .imgcontainer-pop {
        position: relative;
        width: 260px;
        height:360px;
        border-radius: 8px;
        overflow: hidden;
        border:none;
        max-width:360px;
        margin:0 auto;
    }
    .imgcontainer-pop .img {
        position: absolute;
        top: 0;
        left: 0px;
        width: 100%;
        height: 100%;
        background-size: 260px 100%;
    }
    .imgcontainer-pop .foreground-img3 {
        width: 50%;
    }

    .imgcontainer-pop .slider {
        position: absolute;
        -webkit-appearance: none;
        appearance: none;
        width: 100%;
        height: 100%;
        border:none !important;
        background: rgba(242, 242, 242, 0.01);
        outline: none;
        margin: 0;
        transition: all 0.2s;
        justify-content: center;
        align-items: center;
    }
    .imgcontainer-pop .slider:hover {
        background:none;
        border:1px solid #000;
    }
    .imgcontainer-pop .slider::-webkit-slider-thumb {
        -webkit-appearance: none;
        appearance: none;
        width: 1px;
        height:360px;
        background: white;
        cursor: pointer;
        border:1px solid #000;
    }
    .imgcontainer-pop .slider::-moz-range-thumb {
        width: 1px;
        height:360px;
        background: white;
        cursor: pointer;
        border:1px solid #000;
    }


    .imgcontainer-pop .slider-button {
        pointer-events: none;
        position: absolute;
        width: 50px;
        height: 30px;
        border-radius: 25px;
        background-color: white;
        left: calc(50% - 25px);
        background:rgba(0,0,0,0.5);
        top: calc(50% - 18px);


        justify-content: center;
        align-items: center;
    }
    .imgcontainer-pop .slider-button:after {
        content: "";
        position:absolute;
        padding: 3px;
        display: inline-block;
        top:11px;
        right:12px;
        border: solid #fff;
        margin-left:10px;

        border-width: 0 1px 1px 0;
        transform: rotate(-45deg);

    }

    .imgcontainer-pop .slider-button:before {
        content: "";
        padding: 3px;
        display: inline-block;
        border: solid #fff;
        position:absolute;
        top:11px;
        left:10px;
        border-width: 0 1px 1px 0;
        transform: rotate(135deg);
    }



    .imgcontainer-pop .slider-button3 {
        pointer-events: none;
        position: absolute;
        width: 50px;
        height: 30px;
        border-radius: 25px;
        background-color: white;
        left: calc(50% - 25px);
        background:rgba(0,0,0,0.5);
        top: calc(50% - 18px);


        justify-content: center;
        align-items: center;
    }
    .imgcontainer-pop .slider-button3:after {
        content: "";
        position:absolute;
        padding: 3px;
        display: inline-block;
        top:11px;
        right:12px;
        border: solid #fff;
        margin-left:10px;

        border-width: 0 1px 1px 0;
        transform: rotate(-45deg);

    }

    .imgcontainer-pop .slider-button3:before {
        content: "";
        padding: 3px;
        display: inline-block;
        border: solid #fff;
        position:absolute;
        top:11px;
        left:10px;
        border-width: 0 1px 1px 0;
        transform: rotate(135deg);
    }


    #sliders {padding:0 !important; border:none; }
    #sliders4 {padding:0 !important; border:none; }
    .sliders {padding:0 !important; border:none;}
    input[type="range"] {
        -webkit-appearance: none; /* 기본 스타일 제거 (웹킷 브라우저) */
        width: 100%;
        margin: 0;
        padding: 0;
    }

    input[type="range"]:focus {
        outline: none; /* 포커스 시 나오는 기본 가이드선 제거 */
    }
    input[type="range"] {
        -webkit-appearance: none; /* 기본 스타일 제거 (웹킷 브라우저) */
        width: 100%;
        margin: 0;
        padding: 0;
        outline: none; /* 기본 아웃라인 제거 */
    }

    input[type="range"]:focus,
    input[type="range"]:hover {
        outline: none; /* 포커스와 호버 시에도 기본 가이드선 제거 */
    }


    .partner_box {
        margin-bottom: 15px;
        text-align: center;
        width: 100%;
        display: flex;  /* flexbox 사용 */
        justify-content: center;  /* 가로 중앙 정렬 */
        align-items: center;  /* 세로 중앙 정렬 */

        height: 78px !important;
    }
    .partner_box img {max-height:80px; max-width:80%;}

    header.sticky.sticky-active [data-header-hover=dark] {
        background: rgba(0, 0, 0, 0.6) !important;
        min-height: 56px;
        max-height:56px;
        z-index:20;
        -webkit-filter: blur(0px);
        filter: blur(0px);
    }


        header .navbar-brand {
            padding: 10px 0;
        }
        header .navbar-brand img {
            max-height: 16px;
        }
    header.sticky.sticky-active [data-header-hover=dark]:after {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 56px;
        -webkit-filter: blur(10px);
        filter: blur(10px);
    }
    header.sticky.sticky-active [data-header-hover=dark]:before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 56px;
        -webkit-filter: blur(10px);
        filter: blur(10px);
    }
    /* 버튼 패딩 조정 */
    .custom-dropdown {
        padding: 8px 0px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .navbar-collapse {
        position: absolute;
        top: 100%;
        left: 0!important;
        width: 100vw;
        height:calc(100vh - 56px);
        background: var(--white);
        overflow: hidden;
        box-shadow: 0 20px 15px 0 rgba(23, 23, 23, 0.05);
        max-height: calc(100vh - 56px);
    }
    .mega-m {text-align: left;         height:calc(100vh - 56px); }
    .mobile-mega {width:100%; position:absolute;  height:calc(100vh - 56px);  width:100vw;  right:0; background:rebeccapurple;}
    .mobile-in-nav {position:absolute; bottom:100px;width:100%; display:block;}

    .footer-logo {
        font-weight: bold;
        font-size: 24px;
        margin-bottom: 20px;
        display:block;
        text-align:left;
        color: #fff;

    }
    .footer-btn-group button {
        background-color: #fff;
        color: #000;
        border-radius: 20px;
        padding: 5px 25px;
        font-size: 14px;
        margin-right: 10px;
        border: none;
    }
    .footer-links a {
        color: #aaa;
        margin-right: 20px;
        text-decoration: underline;
        font-size: 0.9rem;
    }

    .footer-links a:hover {
        color: #fff;
    }
    .footer-links p {
        color: #aaa;
        margin-right: 20px;
        text-decoration: none;
        font-size: 12px;
    }

    .footer-social-icons a {
        color: #aaa;
        margin-right: 10px;
        font-size: 1.4rem;
        display: inline-block;
        width: 40px;
        height: 40px;
        background-color: #444;
        border-radius: 50%;
        text-align: center;
        line-height: 36px;
    }
    .footer-social-icons a:hover {
        color: #fff;
    }
    .footer-social-icons {
        display: flex;
        align-items: center;
        margin-top:0px;
        padding-bottom:120px;
    }
    .back-to-top {
        position:fixed;
        right:30px;
        bottom:30px;
        background-color: #555;
        color: #fff;
        width: 40px;
        height: 40px;
        border-radius: 50%;
        margin-top:80px;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-left: 20px;
        cursor: pointer;
        font-size: 1.2rem;
    }


    .in_mobile {position:absolute; top:75px; left:50%; height:360px; overflow-y: scroll; width:75%; transform: translateX(-50%);}
    .in_mobile::-webkit-scrollbar {
        display: none;
    }

    .in_mobile .sent {text-align:left; line-height:1.2; padding-left:30px;}
    .sent  .b{line-height:1.2 !important; background: #CECECE;
        color: #212121;
        border-radius: 8px;
        padding: 10px;
        max-width: 80%;
        line-height: 22px;
        font-size: 12px;
        flaot: left;
        display: inline-block; }
    .received   .a{line-height:1.2 !important; font-size:12px;}
    .in_mobile .sent > .message-image {text-align:left; margin:0; max-width:180px;}
    .in_mobile .message {
        margin-bottom: 8px;
        width: 100%;
        display: inline-block;
        opacity: 1;
        transform: translateY(6px);
        transition: opacity 0.9s ease, transform 0.9s ease;
    }
    .in_mobile .sent:before {
        content: "";
        background: url(/barit/images/chat-avata.png);
        width: 24px;
        height: 24px;
        background-size: cover;
        border-radius: 50%;
        position: absolute;
        left: 0;
    }

    .header-icon .dropdown-menu {
        background: rgba(255, 255, 255, 1);
        min-width: 120px;
        padding: 0;
        right: 40px !important;
        top: 45px;
    }
    .arrow-right {transform: rotate(90deg);}

}
@media (max-width: 991px) {
    header.sticky .navbar-brand {
        padding: 10px 0;
    }
    .navbar-expand-lg > .container-fluid {
        padding-right: 0;
        padding-left: 0;
        height: 56px;
    }
}

.footer-social-icons2 a {
    color: #aaa;
    margin-right: 10px;
    font-size: 1.4rem;
    display: inline-block;
    width: 40px;
    height: 40px;
    background-color: #444;
    border-radius: 50%;
    text-align: center;
    line-height: 36px;
}
.footer-social-icons2 a:hover {
    color: #fff;
}
.footer-social-icons2 {
    display: flex;
    align-items: center;
    margin-top:15px;
    margin-left:20px;
}



.location {text-transform: uppercase;}