@charset "utf-8";


/* m_txt */
.m_txt{}
.m_txt.flex{display: flex; align-items: flex-end; gap:50px;}
.m_txt h2{font-size: 54px; color:var(--heading-color); line-height: 1.3em;}
.m_txt h3, .m_txt h4{font-size: 24px; font-weight: 600; color:var(--heading-color); margin-bottom: 25px;}
.m_txt p{font-size: 19px; font-weight: 500; color:var(--text-color); line-height: 1.6em;}

@media all and (max-width:1280px) {
    .m_txt h2{font-size: 47px;}
    .m_txt h3, .m_txt h4{font-size: 22px; margin-bottom: 20px;}
    .m_txt p{font-size: 18px;}
    .m_txt.flex{gap:35px;}
}
@media all and (max-width:1024px) {
    .m_txt h2{font-size: 43px;}
    .m_txt h3, .m_txt h4{font-size: 21px;}
    .m_txt.flex{flex-direction: column; gap:25px; align-items: flex-start;}
}
@media all and (max-width:768px) {
    .m_txt h2{font-size: 38px;}
    .m_txt h3, .m_txt h4{font-size: 20px; margin-bottom: 15px;}
    .m_txt p{font-size: 17px;}
}
@media all and (max-width:500px) {
    .m_txt h2{font-size: 34px;}
    .m_txt h3, .m_txt h4{font-size: 19px;}
    .m_txt.flex{gap:20px;}
}

/* hero */
#hero{height: 100dvh; overflow: hidden;}
#hero .visual{height: 100%; position: relative;}
#hero .visual .video{position: relative; width: 100%; height: 100%;}
#hero .visual .video video{
    position: absolute; 
    top: 50%; 
    left: 50%; 
    transform: translate(-50%, -50%); 
    width: 100%; 
    height: 100%; 
    object-fit: cover; 
    opacity: 0.25;
    filter: grayscale(1) invert(1);
    transition: filter var(--transition-speed, 0.3s) ease;
}
[data-theme="dark"] #hero .visual .video video{
    filter: none;
}
#hero .visual .effect{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}#hero .visual .bg{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to bottom, transparent 50%, var(--bg-color) 100%);
    pointer-events: none;
    z-index: 2;
}
#hero .txt_wrap{position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; z-index: 3;}
#hero .txt_wrap .txt{}
#hero .txt_wrap .txt .icon {
    margin-bottom: 30px;
    display: inline-block;
    position: relative;
    padding: 1.5px;
    border-radius: 16px;
    background: linear-gradient(135deg, rgba(252, 247, 232, 0) 0%, rgba(252, 247, 232, 0) 100%);
    perspective: 1000px;
    opacity: 0;
    transform: translateY(20px) rotateX(15deg) rotateY(-15deg);
    transition: transform 1.2s cubic-bezier(0.25, 1, 0.5, 1), 
                opacity 1.2s ease, 
                background 1.5s ease, 
                box-shadow 1.5s ease;
}

#hero .txt_wrap .txt .icon img {
    display: block;
    width: 80px; 
    height: 80px;
    border-radius: 15px; 
    object-fit: cover;
}

#hero .txt_wrap .txt .icon.aos-animate {
    opacity: 1;
    transform: translateY(0) rotate(7deg) ;
    
    background: linear-gradient(135deg, 
        rgba(252, 247, 232, 0.8) 0%, 
        rgba(252, 247, 232, 0.05) 40%, 
        rgba(252, 247, 232, 0.05) 60%, 
        rgba(252, 247, 232, 0.8) 100%
    );
    
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.55), 
                0 0 25px rgba(252, 247, 232, 0.15);
}

[data-theme="dark"] #hero .txt_wrap .txt .icon.aos-animate {
    box-shadow: 0 15px 35px rgba(252, 247, 232, 0.15), 
                0 0 30px rgba(252, 247, 232, 0.15);
}

.float-card {
    position: absolute;
    will-change: transform;
    pointer-events: auto;
    transition: z-index 0.3s ease;
}

.float-card:hover {
    z-index: 10;
}

.float-card img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 20px;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.45);
    border: 1px solid rgba(255, 255, 255, 0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.float-card img:hover {
    transform: rotate(0deg) scale(1.08) !important;
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.6);
}

.card1 {
    top: 15%;
    left: 4%;
    width: 20rem;
    height: 20rem;
}
.card1 img {
    transform: rotate(-12deg) scale(0.5);
}

.card2 {
    top: 5%;
    left: 14%;
    width: 20rem;
    height: 20rem;
}
.card2 img {
    transform: rotate(10deg) scale(0.7);
}

.card3 {
    bottom: 3%;
    left: 6%;
    width: 20rem;
    height: 20rem;
}
.card3 img {
    transform: rotate(-8deg) scale(0.7);
}

.card4 {
    top: 4%;
    right: 8%;
    width: 20rem;
    height: 20rem;
}
.card4 img {
    transform: rotate(12deg) scale(0.8);
}

.card5 {
    bottom: 8%;
    right: 10%;
    width: 20rem;
    height: 20rem;
}
.card5 img {
    transform: rotate(-10deg) scale(0.8);
}

#hero .txt_wrap .txt h2{color:var(--heading-color); font-size: 64px; margin-bottom: 20px;}
#hero .txt_wrap .txt p{font-size: 22px; font-weight: 500; color:var(--text-color); line-height: 1.6em;}
#hero .txt_wrap .txt .btn_box{margin-top: 50px;}
#hero .txt_wrap .counter{display: flex; justify-content: center; gap:100px; margin-top: 100px;}
#hero .txt_wrap .counter li{}
#hero .txt_wrap .counter li p{}
#hero .txt_wrap .counter li .num{display: flex; justify-content: center; align-items: flex-end;}
#hero .txt_wrap .counter li .num .count{font-size: 48px; color:var(--heading-color); font-weight: 700; line-height: 1em; margin-top: 7px;}
#hero .txt_wrap .counter li .num .count + span{color:var(--heading-color); font-size: 24px; font-weight: 700; margin-left: 5px;}
#hero .txt_wrap .counter li .num.num2 .count + span,
#hero .txt_wrap .counter li .num.num3 .count + span{font-size: 48px; font-weight: 700; line-height: 1em;}


@media all and (max-width:1280px) {
    #hero .txt_wrap .txt .icon{margin-bottom: 25px;}
    #hero .txt_wrap .txt .icon img{width: 74px; height: 74px; border-radius: 13px;}
    #hero .txt_wrap .txt h2{font-size: 56px;}
    #hero .txt_wrap .txt p{font-size: 20px;}
    #hero .txt_wrap .txt .btn_box{margin-top: 40px;}
    #hero .txt_wrap .counter{margin-top: 80px; gap: 80px;}
    #hero .txt_wrap .counter li .num .count{font-size: 42px;}
    #hero .txt_wrap .counter li .num.num2 .count + span, #hero .txt_wrap .counter li .num.num3 .count + span{font-size: 42px;}
    .card1, .card2, .card3, .card4, .card5 { width: 16rem; height: 16rem; }
    .card1 { left: 1%; }
    .card2 { left: 10%; }
    .card3 { left: 2%; }
    .card4 { right: 4%; }
    .card5 { right: 5%; }
}
@media all and (max-width:1024px) {
    #hero .txt_wrap .txt .icon img{width: 70px; height: 70px; border-radius: 12px;}
    #hero .txt_wrap .txt h2{font-size: 48px; margin-bottom: 15px;}
    #hero .txt_wrap .txt p{font-size: 19px;}
    #hero .txt_wrap .counter{margin-top: 70px; gap: 60px;}
    #hero .txt_wrap .counter li p{font-size: 15px;}
    #hero .txt_wrap .counter li .num .count{font-size: 40px;}
    #hero .txt_wrap .counter li .num.num2 .count + span, #hero .txt_wrap .counter li .num.num3 .count + span{font-size: 40px;}
    .card1, .card2, .card3, .card4, .card5 { width: 14rem; height: 14rem; }
    .card1 { left: -4%; }
    .card2 { left: 4%; }
    .card3 { left: -3%; }
    .card4 { right: -2%; }
    .card5 { right: -1%; }
}
@media all and (max-width:768px) {
    #hero .txt_wrap .txt .icon{margin-bottom: 20px;}
    #hero .txt_wrap .txt .icon img{width: 66px; height: 66px; border-radius: 12px;}
    #hero .txt_wrap .txt h2{font-size: 42px;}
    #hero .txt_wrap .txt p{font-size: 18px;}
    #hero .txt_wrap .txt .btn_box{margin-top: 30px;}
    #hero .txt_wrap .counter{margin-top: 60px; gap: 40px; display: grid; grid-template-columns: repeat(2, 1fr);}
    #hero .txt_wrap .counter li .num .count{font-size: 38px;}
    #hero .txt_wrap .counter li .num.num2 .count + span, #hero .txt_wrap .counter li .num.num3 .count + span{font-size: 38px;}
    .card1, .card2, .card3, .card4, .card5 { width: 12rem; height: 12rem; }
    .card1 { left: -8%; }
    .card2 { left: -2%; }
    .card3 { left: -6%; }
    .card4 { right: -6%; }
    .card5 { right: -4%; }
}
@media all and (max-width:500px) {
    #hero .txt_wrap .txt .icon img{width: 62px; height: 62px; border-radius: 11px;}
    #hero .txt_wrap .txt h2{font-size: 36px;}
    #hero .txt_wrap .txt p{font-size: 17px;}
    #hero .txt_wrap .counter{margin-top: 50px; gap: 30px;}
    #hero .txt_wrap .counter li .num .count{font-size: 34px;}
    #hero .txt_wrap .counter li .num.num2 .count + span, #hero .txt_wrap .counter li .num.num3 .count + span{font-size: 34px;}
    .card1, .card2, .card3, .card4, .card5 { width: 10rem; height: 10rem; }
    .card1 { left: -12%; }
    .card2 { left: -5%; }
    .card3 { left: -10%; }
    .card4 { right: -10%; }
    .card5 { right: -8%; }
}


/* sec1 */
#sec1{padding: 160px 0 140px; position: relative;}
#sec1 .inner{position: absolute; left: 50%; transform: translateX(-50%); height: calc(100% - 280px);}
#sec1 .l_cont{position: sticky; top: 170px; left: 0; width: 32%;}
#sec1 .l_cont .m_txt{margin-bottom: 50px;}
#sec1 .l_cont .step_wrap{}
#sec1 .l_cont .step_wrap li{position: relative; padding: 30px 0 30px;}
#sec1 .l_cont .step_wrap li + li{border-top:1px solid var(--header-border);}
#sec1 .l_cont .step_wrap li.on{}
#sec1 .l_cont .step_wrap li .step{position: absolute; top: 31px; left: -100px; font-size: 15px; font-weight: 700; background: var(--heading-color); color: var(--bg-color); border-radius: 5px; padding: 4px 12px; white-space: nowrap; display: none;}
#sec1 .l_cont .step_wrap li .step::after{content: ''; position: absolute; top: 50%; right: -8px; transform: translateY(-50%); width: 0; height: 0; border-top: 5px solid transparent; border-bottom: 5px solid transparent; border-left: 8px solid var(--heading-color);}
#sec1 .l_cont .step_wrap li h3{font-size: 24px; font-weight: 600; color:var(--heading-color); opacity: 0.7;}
#sec1 .l_cont .step_wrap li p{display: none; color:var(--text-color); font-size: 19px; font-weight: 500; word-break: keep-all; line-height: 1.6em; padding-top: 20px;}
#sec1 .l_cont .step_wrap li.on .step{display: block;}
#sec1 .l_cont .step_wrap li.on h3{opacity: 1;}
#sec1 .l_cont .step_wrap li.on p{display: block;}
#sec1 .l_cont .step_wrap li .m_img { display: none; }

#sec1 .r_cont{text-align: right;}
#sec1 .r_cont .cont_wrap{}
#sec1 .r_cont .cont_wrap li + li{margin-top: 100px;}
#sec1 .r_cont .cont_wrap li img{
    border-top-left-radius: 20px; 
    border-bottom-left-radius: 20px; 
    overflow: hidden;
    transition: opacity 0.6s cubic-bezier(0.25, 1, 0.5, 1), transform 0.6s cubic-bezier(0.25, 1, 0.5, 1);
    opacity: 0.3;
    transform: scale(0.95);
    display: inline-block;
    width: 60vw;
    max-width: 1041px;
}
#sec1 .r_cont .cont_wrap li.on img{
    opacity: 1;
    transform: scale(1);
}

@media  all and (max-width:1280px) {
    #sec1{padding: 140px 0 120px;}
    #sec1 .l_cont{width: 35%;}
    #sec1 .l_cont .m_txt{margin-bottom: 40px;}
    #sec1 .l_cont .step_wrap li{padding: 20px 0;}
    #sec1 .r_cont .cont_wrap li + li{margin-top: 70px;}
    #sec1 .l_cont .step_wrap li h3{font-size: 22px;}
    #sec1 .l_cont .step_wrap li p{font-size: 18px; padding-top: 14px;}
}
@media  all and (max-width:1024px) {
    #sec1{padding: 130px 0 110px;}
    #sec1 .inner { position: static; transform: none; height: auto; width: 100%;}
    #sec1 .l_cont { position: static; width: 100%;}
    #sec1 .r_cont { display: none; }
    
    #sec1 .l_cont .m_txt {margin-bottom: 60px; padding: 0 3%;}
    #sec1 .l_cont .m_txt h2 br{display: none;}
    #sec1 .l_cont .step_wrap { display: flex; flex-direction: column; gap: 100px; }
    #sec1 .l_cont .step_wrap li { padding: 0; padding-left: 3%; border: none; }
    #sec1 .l_cont .step_wrap li + li { border-top: none; }
    
    #sec1 .l_cont .step_wrap li .step { position: static; display: inline-block; margin-bottom: 15px; font-size: 14px; padding: 3px 10px;}
    #sec1 .l_cont .step_wrap li h3 { opacity: 1; color: var(--heading-color); padding-right: 3%;}
    #sec1 .l_cont .step_wrap li p { display: block; line-height: 1.6em; padding-top: 12px; color: var(--text-color); padding-right: 3%;}
    
    #sec1 .l_cont .step_wrap li .m_img { display: block; margin-top: 25px; border-top-left-radius: 15px; border-bottom-left-radius: 15px; overflow: hidden; }
    #sec1 .l_cont .step_wrap li .m_img img { width: 100%; height: auto; object-fit: cover; display: block; border-radius: 0px; }
    #sec1 .l_cont .step_wrap li.on .step{display: inline-block;}
    #sec1 .l_cont .step_wrap li .step::after{display: none;}
}
@media  all and (max-width:768px) {
    #sec1{padding: 120px 0 100px;}
    #sec1 .l_cont .m_txt{text-align: center;}
    #sec1 .l_cont .step_wrap li h3 { font-size: 21px; }
    #sec1 .l_cont .step_wrap li p { font-size: 17px; padding-top: 10px; }
    #sec1 .l_cont .step_wrap li .m_img { margin-top: 20px; }
}
@media  all and (max-width:500px) {
    #sec1{padding:110px 0 90px;}
    #sec1 .l_cont .step_wrap { gap: 90px; }
    #sec1 .l_cont .step_wrap li .step{font-size: 13px; padding: 3px 8px; margin-bottom: 12px;}
}


/* sec2 */
#sec2{padding: 140px 0; background-color: #000;}
#sec2 .m_txt{margin-bottom: 80px;}
#sec2 .m_txt h2{color:#fff;}
#sec2 .btn_box{margin-top: 60px;}

#sec2 .btn_box .btn2{background-color: #fff; color:#000;}

#sec2 .design_wrap {
    width: 100%;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    gap: 12px;
    position: relative;
}

#sec2 .design_wrap .bg{
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 2;
    background: linear-gradient(to bottom, transparent 50%,  #000 100%);
}

#sec2 .design_wrap .box {
    display: flex;
    gap: 12px;
    width: max-content;
    will-change: transform;
}

#sec2 .design_wrap .box li {
    flex-shrink: 0;
    width: 390px;
    height: 260px;
    border-radius: 10px;
    overflow: hidden;
}

#sec2 .design_wrap .box li img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
#sec2 .btn_box{margin-top: 60px;}

@media all and (max-width:1280px) {
    #sec2{padding: 120px 0;}
    #sec2 .m_txt{margin-bottom: 70px;}
    #sec2 .design_wrap .box li{width: 350px; height: 233px;}
    #sec2 .btn_box{margin-top: 50px;}
}
@media all and (max-width:1024px) {
    #sec2{padding: 110px 0;}
    #sec2 .design_wrap .box li{width: 330px; height: 220px;}
}
@media all and (max-width:768px) {
    #sec2{padding: 100px 0;}
    #sec2 .m_txt{margin-bottom: 60px; text-align: center;}
    #sec2 .design_wrap .box li{width: 300px; height: 200px;}
    #sec2 .btn_box{margin-top: 40px;}
}
@media all and (max-width:500px) {
    #sec2{padding: 90px 0;}
    #sec2 .m_txt{margin-bottom: 50px;}
    #sec2 .design_wrap .box li{width: 270px; height: 180px;}
}

/* sec3 */
#sec3{padding-top: 140px;}
#sec3 .m_txt{margin-bottom: 50px;}
#sec3 .review_wrap{display: flex; gap:30px; position: relative; height: 70vh; overflow: hidden;}
#sec3 .review_wrap::after{content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(to bottom, var(--bg-color) 0%, transparent 30%, transparent 70%, var(--bg-color) 100%); z-index: 2;}
#sec3 .review_wrap .box{width: 100%;}
#sec3 .review_wrap .box.box1{}
#sec3 .review_wrap .box.box2{}
#sec3 .review_wrap .box.box3{}
#sec3 .review_wrap .box li{border: 1px solid var(--header-border2); padding: 30px; border-radius: 10px;}
#sec3 .review_wrap .box li + li{margin-top: 30px;}
#sec3 .review_wrap .box li .txt{font-size: 15px; color:var(--heading-color); line-height: 1.8em; font-weight: 300;}
#sec3 .review_wrap .box li .profile{display: flex; align-items: center; gap:10px; margin-top: 15px; padding-top: 15px; border-top: 1px solid var(--header-border2);}
#sec3 .review_wrap .box li .profile .icon{}
#sec3 .review_wrap .box li .profile .icon.flex{display: flex;}
#sec3 .review_wrap .box li .profile .icon img{}
#sec3 .review_wrap .box li .profile .icon img + img{margin-left: -23px;}
#sec3 .review_wrap .box li .profile .info{}
#sec3 .review_wrap .box li .profile .info h3{font-size: 16px; font-weight: 600; color:var(--heading-color);}
#sec3 .review_wrap .box li .profile .info p{font-size: 14px; color:var(--heading-color); opacity: 0.5; margin-top: 5px;}

#sec3 .review_wrap .box {
    will-change: transform;
    animation-duration: 25s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}

#sec3 .review_wrap .box.box1,
#sec3 .review_wrap .box.box3 {
    animation-name: rollUp;
}

#sec3 .review_wrap .box.box2 {
    animation-name: rollDown;
}

@keyframes rollUp {
    0% {
        transform: translate3d(0, 0, 0);
    }
    100% {
        transform: translate3d(0, calc(-1 * var(--box-height, 1000px)), 0);
    }
}

@keyframes rollDown {
    0% {
        transform: translate3d(0, calc(-1 * var(--box-height, 1000px)), 0);
    }
    100% {
        transform: translate3d(0, 0, 0);
    }
}

#sec3 .bottom_txt {
    position: relative;
    z-index: 5;
    height: 80vh;
}

#sec3 .bottom_txt .bg {
    width: 100%;
    height: 100%;
    pointer-events: none;
    margin-top: -37vh;
    opacity: 0.5;
}
#sec3 .bottom_txt p{font-size: 36px; color:var(--heading-color); font-weight: 700; text-align: center; position: absolute; top: calc(70px + 37vh); width: 100%;}


@media all and (max-width:1280px) {
    #sec3{padding-top: 120px;}
    #sec3 .review_wrap{gap:25px;}
    #sec3 .review_wrap .box li{padding: 25px;}
    #sec3 .review_wrap .box li + li{margin-top: 25px;}
    #sec3 .review_wrap .box li .profile .icon img{width: 39px; height: 39px;}
    #sec3 .bottom_txt p{font-size: 32px;}
}
@media all and (max-width:1024px) {
    #sec3{padding-top: 110px;}
    #sec3 .m_txt p br{display: none;}
    #sec3 .review_wrap .box li .profile .info h3{font-size: 15px;}
    #sec3 .review_wrap .box.box3 { display: none; }
    #sec3 .bottom_txt p{font-size: 30px;}
}
@media all and (max-width:768px) {
    #sec3{padding-top: 100px;}
    #sec3 .m_txt{margin-bottom: 40px;}
    #sec3 .review_wrap .box.box2 { display: none; }
    #sec3 .bottom_txt p{font-size: 28px;}
}
@media all and (max-width:500px) {
    #sec3{padding-top: 90px;}
    #sec3 .bottom_txt p{font-size: 26px;}
}

/* sec4 */
#sec4{position: relative;}
#sec4 .inner{position: absolute; top: 50%; transform: translate(-50%, -50%); left: 50%;}
#sec4 .m_txt h2{margin-bottom: 60px;}

#sec4 .r_cont{position: relative; width: 57%; margin-left: auto; z-index: 99;}
#sec4 .r_cont .chat {
    position: absolute;
    bottom: 35px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 10;
    padding: 1px;
    border-radius: 90px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 560px;
}

#sec4 .r_cont .chat::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 250%;
    aspect-ratio: 1 / 1;
    background: conic-gradient(
        #1a65ff, 
        #ce5eff, 
        #fd5766, 
        #ffcb56, 
        #ff725e, 
        #1a65ff
    );
    transform: translate(-50%, -50%) rotate(0deg);
    transform-origin: center center;
    animation: borderRotate 4s linear infinite;
    z-index: 1;
}

#sec4 .r_cont .chat img {
    position: relative;
    z-index: 2;
    border-radius: 90px;
    display: block;
    width: 100%;
    height: 100%;
    background-color: var(--bg-color);
}

@keyframes borderRotate {
    0% {
        transform: translate(-50%, -50%) rotate(0deg);
    }
    100% {
        transform: translate(-50%, -50%) rotate(360deg);
    }
}
#sec4 .r_cont .cont {
    width: 100%;
    overflow: hidden;
    position: relative;
    z-index: 1;
}

#sec4 .marquee_wrap {
    display: flex;
    flex-direction: column;
    gap: 0px;
    width: 100%;
    overflow: hidden;
    position: relative;
}

#sec4 .marquee_wrap .vignette-left,
#sec4 .marquee_wrap .vignette-right {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 120px;
    z-index: 3;
    pointer-events: none;
}

#sec4 .marquee_wrap .vignette-left {
    left: 0;
    background: linear-gradient(to right, var(--bg-color) 0%, transparent 100%);
}

#sec4 .marquee_wrap .vignette-right {
    right: 0;
    background: linear-gradient(to left, var(--bg-color) 0%, transparent 100%);
}

#sec4 .marquee_track {
    display: flex;
    overflow: hidden;
    user-select: none;
    width: 100%;
}

#sec4 .marquee_content {
    flex-shrink: 0;
    display: flex;
    justify-content: space-around;
    min-width: 100%;
    animation: marquee_ani var(--speed, 30s) linear infinite;
}

#sec4 .marquee_track.reverse .marquee_content {
    animation-direction: reverse;
}

#sec4 .marquee_track.pause-hover:hover .marquee_content {
    animation-play-state: paused;
}

#sec4 .marquee_content .img_box {
    width: 320px;
    height: 320px;
    overflow: hidden;
    flex-shrink: 0;
}


#sec4 .marquee_content .img_box img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

@media (max-width: 1024px) {
    #sec4 .marquee_content .img_box {
        width: 240px;
        height: 240px;
    }
    #sec4 .inner{position: static; transform: translate(0); margin-bottom: 50px;}
    #sec4 .inner .m_txt h2{margin-bottom: 40px;}
    #sec4 .inner .m_txt h2 br{display: none;}
    #sec4 .r_cont{width: 100%;}
}

@media all and (max-width:768px) {
    #sec4 .inner .m_txt{text-align: center;}
    #sec4 .inner .m_txt h2{margin-bottom: 30px;}
    #sec4 .inner .m_txt h2 br{display: block;}
    #sec4 .marquee_content .img_box {
        width: 200px;
        height: 200px;
    }
    #sec4 .r_cont .chat {
        min-width: auto;
        width: 70vw;
        border-radius: 45px;
        bottom: 25px;
    }
    #sec4 .r_cont .chat img {
        border-radius: 45px;
    }
}

@media all and (max-width:500px) {
    #sec4 .inner{margin-bottom: 40px;}
    #sec4 .r_cont .chat {
        width: 85vw;
        border-radius: 30px;
    }
    #sec4 .r_cont .chat img {
        border-radius: 30px;
    }
    #sec4 .marquee_content .img_box {
        width: 180px;
        height: 180px;
    }
}

@keyframes marquee_ani {
    0% {
        transform: translate3d(0, 0, 0);
    }
    100% {
        transform: translate3d(calc(-100% - 15px), 0, 0);
    }
}



/* sec5 */
#sec5{padding: 250px 0 200px;}

/* sec5 Logo Grid styles */
#sec5 .cont {
    width: 100%;
    margin-top: 60px;
}

#sec5 .logo_grid {
    position: relative;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    border-top: 1px solid var(--header-border2);
    border-left: 1px solid var(--header-border2);
    width: 100%;
}

@media (min-width: 768px) {
    #sec5 .logo_grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

#sec5 .logo_card {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 32px 16px;
    background-color: var(--bg-color);
    border-right: 1px solid var(--header-border2);
    border-bottom: 1px solid var(--header-border2);
    height: 120px;
}

@media (min-width: 768px) {
    #sec5 .logo_card {
        padding: 40px;
        height: 160px;
    }
}

/* Checkerboard background pattern */
#sec5 .logo_card.bg-secondary {
    background-color: #f5f5f5;
}

[data-theme="dark"] #sec5 .logo_card.bg-secondary {
    background-color: #121212;
}

#sec5 .logo_card img {
    width: 100%;
    max-width: 229px;
    object-fit: contain;
    pointer-events: none;
    user-select: none;
    transition: filter var(--transition-speed, 0.3s) ease;
}


/* Dark mode theme logo inversion */
[data-theme="dark"] #sec5 .logo_card img {
    filter: brightness(0) invert(1);
    opacity: 0.85;
}

/* PlusIcon (+) intersection style */
#sec5 .logo_card .plus_icon {
    position: absolute;
    right: -12px;
    bottom: -12px;
    width: 24px;
    height: 24px;
    color: var(--text-color);
    opacity: 0.35;
    z-index: 10;
    pointer-events: none;
    transition: opacity var(--transition-speed, 0.3s) ease;
}

#sec5 .logo_card:hover .plus_icon {
    opacity: 0.8;
}

@media  all and (max-width:1280px) {
    #sec5{padding: 220px 0 180px;}
    #sec5 .cont{margin-top: 50px;}
    #sec5 .logo_card { height: 140px; padding: 25px 30px; }
}
@media  all and (max-width:1024px) {
    #sec5{padding: 200px 0 160px;}
    #sec5 .logo_card { height: 130px; padding: 20px 25px; }
    #sec5 .logo_card img { max-width: 200px; }
}
@media  all and (max-width:768px) {
    #sec5{padding: 180px 0 140px;}
    #sec5 .m_txt{text-align: center;}
    #sec5 .cont{margin-top: 45px;}
    #sec5 .logo_card { height: 130px; padding: 10px 20px; }
    #sec5 .logo_card img { max-width: 190px; }
    #sec5 .logo_card:nth-child(n+9) { display: none; }
    #sec5 .logo_card .plus_icon { display: none; }
    
    /* 모바일 2열 격자 교차(체커보드) 배경 처리 */
    #sec5 .logo_card.bg-secondary,
    [data-theme="dark"] #sec5 .logo_card.bg-secondary {
        background-color: var(--bg-color); /* 기존 4열 기준 배경 초기화 */
    }
    #sec5 .logo_card:nth-child(4n+1),
    #sec5 .logo_card:nth-child(4n+4) {
        background-color: #f5f5f5;
    }
    [data-theme="dark"] #sec5 .logo_card:nth-child(4n+1),
    [data-theme="dark"] #sec5 .logo_card:nth-child(4n+4) {
        background-color: #121212;
    }
}
@media  all and (max-width:500px) {
    #sec5{padding: 160px 0 120px;}
    #sec5 .logo_card { height: 110px; padding: 8px 15px; }
    #sec5 .logo_card img { max-width: 150px; }
}


/* sec6 */
#sec6{padding-bottom: 140px; overflow-x: hidden}
#sec6 .inner{}
#sec6 .inner .top{margin-bottom: 70px; display: flex; align-items: center; justify-content: space-between;}
#sec6 .inner .arrow_wrap{display: flex; align-items: center; gap:20px;}
#sec6 .inner .arrow_wrap .arrow{width: 56px; aspect-ratio: 1/1; border: 1px solid var(--header-border2); border-radius: 50%; display: inline-flex; justify-content: center; align-items: center; cursor: pointer;}
#sec6 .inner .arrow_wrap .next{}
#sec6 .inner .arrow_wrap .prev{}
#sec6 .inner .cont{width: 130%;}
#sec6 .inner .cont .slide-item{}
#sec6 .inner .cont .slide-item + .slide-item{margin-left: 30px;}
#sec6 .inner .cont .slide-item a{}
#sec6 .inner .cont .slide-item a .img{max-width: 398px;}
#sec6 .inner .cont .slide-item a .img img{border-radius: 10px; overflow: hidden; width: 100%;}
#sec6 .inner .cont .slide-item a p{font-size: 20px; font-weight: 700; color:var(--heading-color); margin-top: 20px;}

@media  all and (max-width:1280px) {
    #sec6{padding-bottom: 120px;}
    #sec6 .inner .top{margin-bottom: 60px;}
    #sec6 .inner .arrow_wrap{gap:15px;}
    #sec6 .inner .arrow_wrap .arrow{width: 52px;}
    #sec6 .inner .cont .slide-item + .slide-item{margin-left: 25px;}
    #sec6 .inner .cont .slide-item a .img{max-width: 360px;}
    #sec6 .inner .cont .slide-item a p{margin-top: 15px; font-size: 19px;}
}
@media  all and (max-width:1024px) {
    #sec6{padding-bottom: 110px;}
    #sec6 .inner .cont .slide-item + .slide-item{margin-left: 20px;}
    #sec6 .inner .cont .slide-item a .img{max-width: 330px;}  
    #sec6 .inner .cont .slide-item a p{margin-top: 14px; font-size: 18px;}  
}
@media  all and (max-width:768px) {
    #sec6{padding-bottom: 100px;}
    #sec6 .inner .top{margin-bottom: 50px;  justify-content: center;}
    #sec6 .inner .top .m_txt{text-align: center;}
    #sec6 .inner .arrow_wrap{display: none;}
    #sec6 .inner .cont{width: 100%; position: relative;}
    #sec6 .inner .cont::before,
    #sec6 .inner .cont::after {
        content: '';
        position: absolute;
        top: 0;
        width: 50px;
        height: 100%;
        z-index: 10;
        pointer-events: none;
    }
    #sec6 .inner .cont::before {
        left: 0;
        background: linear-gradient(to right, var(--bg-color) 0%, transparent 100%);
    }
    #sec6 .inner .cont::after {
        right: 0;
        background: linear-gradient(to left, var(--bg-color) 0%, transparent 100%);
    }
    #sec6 .inner .cont .slide-item + .slide-item{margin-left: 0px;}
    #sec6 .inner .cont .slide-item{margin: 0 10px;}
    #sec6 .inner .cont .slide-item a .img{max-width: 60vw;}  
    #sec6 .inner .cont .slide-item a p{margin-top: 12px; font-size: 17px; text-align: center;} 
}
@media  all and (max-width:500px) {
    #sec6{padding-bottom: 90px;}    
}

/* sec7 */
#sec7{background-color: #060407; padding-top: 140px; overflow-x: hidden;}
#sec7 .m_txt{text-align: center; position: relative; z-index: 3;}
#sec7 .m_txt h2{color:#fff;}
#sec7 .m_txt .btn_box{margin-top: 60px;}
#sec7 .m_txt .btn_box .btn1{background-color: #212121; color:#fff;}
#sec7 .m_txt .btn_box .btn2{background-color: #ffffff; color:#000;}
#sec7 .m_txt .btn_box .btn2 span{background-color: #000000; color:#fff;}
#sec7 .video{text-align: center; margin-top: -100px;}
#sec7 .video video{width: 100%; max-width: 1280px; height: 100%; object-fit: cover; margin: 0 auto;}

@media all and (max-width:1280px) {
    #sec7{padding-top: 120px;}
    #sec7 .video{margin-top: -80px;}
    #sec7 .m_txt .btn_box{margin-top: 50px;}
}
@media all and (max-width:1024px) {
    #sec7{padding-top: 110px;}
    #sec7 .video{margin-top: -70px;}
}
@media all and (max-width:768px) {
    #sec7{padding-top: 100px;}
    #sec7 .video{margin-top: -60px;}
    #sec7 .video video{width: 200%; height: 200%; transform: translateX(-25%);}
    #sec7 .m_txt{text-align: center;}
    #sec7 .m_txt .btn_box{margin-top: 40px;}
}
@media all and (max-width:500px) {
    #sec7{padding-top: 90px;}
    #sec7 .video{margin-top: -50px;}
}


/* sec8 */
#sec8{padding-bottom: 140px;}
#sec8 .inner{}
#sec8 .inner .m_txt{margin-bottom: 30px;}
#sec8 .inner #faq{}
#sec8 .inner #faq dt{color:var(--heading-color); font-size: 24px; font-weight: 600; padding: 25px 60px 25px 25px; position: relative; cursor: pointer; word-break: keep-all; line-height: 1.5em;}
#sec8 .inner #faq dt::after{content: '↓'; font-family: 'SUIT', sans-serif; position: absolute; right: 25px; top: 50%; transform: translateY(-50%); transition: transform 0.3s ease;}
#sec8 .inner #faq dt.on::after{transform: translateY(-50%) rotate(180deg);}
#sec8 .inner #faq dt + dd{display: none; font-size: 18px; color:var(--text-color); line-height: 1.7em; padding: 0 25px; padding-bottom: 25px;}
#sec8 .inner #faq dt.on + dd{}
#sec8 .inner #faq dd + dt{border-top: 1px solid var(--header-border2);}

@media  all and (max-width:1280px) {
    #sec8{padding-bottom: 120px;}
    #sec8 .inner #faq dt{font-size: 23px; padding: 22px 55px 22px 20px;}
    #sec8 .inner #faq dt::after{right: 20px;}
    #sec8 .inner #faq dt + dd{font-size: 18px; padding: 0 20px 22px;}
}
@media  all and (max-width:1024px) {
    #sec8{padding-bottom: 110px;}
    #sec8 .inner #faq dt{font-size: 22px; padding: 20px 50px 20px 15px;}
    #sec8 .inner #faq dt::after{right: 15px;}
    #sec8 .inner #faq dt + dd{font-size: 17px; padding: 0 15px 20px;}
}
@media  all and (max-width:768px) {
    #sec8{padding-bottom: 100px;}
    #sec8 .inner .m_txt{text-align: center;}
    #sec8 .inner #faq dt{font-size: 20px; padding: 18px 45px 18px 10px;}
    #sec8 .inner #faq dt::after{right: 10px;}
    #sec8 .inner #faq dt + dd{font-size: 16px; padding: 0 10px 18px;}
}
@media  all and (max-width:500px) {
    #sec8{padding-bottom: 90px;}
    #sec8 .inner #faq dt{font-size: 18px; padding: 15px 40px 15px 5px;}
    #sec8 .inner #faq dt::after{right: 5px;}
    #sec8 .inner #faq dt + dd{ padding: 0 5px 15px;}
}