/* font family*/
@font-face {
    font-family: 'SUIT';
    font-weight: 100;
    src: url('/static/new_assets/font/suit-Thin.woff') format('woff2');
}
@font-face {
    font-family: 'SUIT';
    font-weight: 200;
    src: url('/static/new_assets/font/suit-ExtraLight.woff2') format('woff2');
}
@font-face {
    font-family: 'SUIT';
    font-weight: 300;
    src: url('/static/new_assets/font/suit-Light.woff2') format('woff2');
}
@font-face {
    font-family: 'SUIT';
    font-weight: 400;
    src: url('/static/new_assets/font/suit-Regular.woff2') format('woff2');
}
@font-face {
    font-family: 'SUIT';
    font-weight: 500;
    src: url('/static/new_assets/font/suit-Medium.woff2') format('woff2');
}
@font-face {
    font-family: 'SUIT';
    font-weight: 600;
    src: url('/static/new_assets/font/suit-SemiBold.woff2') format('woff2');
}
@font-face {
    font-family: 'SUIT';
    font-weight: 700;
    src: url('/static/new_assets/font/suit-Bold.woff2') format('woff2');
}
@font-face {
    font-family: 'SUIT';
    font-weight: 800;
    src: url('/static/new_assets/font/suit-ExtraBold.woff2') format('woff2');
}
@font-face {
    font-family: 'outfit-l';
    src: url('/static/new_assets/font/Outfit-Light.woff');
}
@font-face {
    font-family: 'outfit-m';
    src: url('/static/new_assets/font/Outfit-Medium.woff');
}
@font-face {
    font-family: 'outfit-r';
    src: url('/static/new_assets/font/Outfit-Regular.woff');
}

/* css set */
/*
#3ABAB8
배경색

#2F9291
서브 텍스트
*/

body.worker{background-color: rgba(63, 92, 254, 0.1);}
body.recruiter{background-color: rgba(28, 166, 115, 0.1);}
body.franchise{background-color: rgba(111, 48, 160, 0.1);}


strong{font-weight: 500;}
a{text-decoration: none;color: #000;}
*{box-sizing: border-box;margin: 0;padding: 0;font-family: 'SUIT'}
ul,ol,li{margin: 0;padding: 0;}
li{list-style: none;}
button{background-color: transparent;border: 0;display: flex;color: #000;font-family: 'SUIT';cursor: pointer;}

input,textarea,select{font-family: 'SUIT';font-size: 16px;}
input:focus,
select:focus,
textarea:focus{outline: none;border-color: #3F5CFE;}
body{font-family: 'SUIT';}

input,select{border-radius: 10px;height: 48px;border: 1px solid #d9d9d9;transition: 0.3s;padding: 0 10px;font-size: 16px;}
select{appearance: none;width: 100%;background-image: url('/img/chevron-down.png');background-repeat: no-repeat;background-size: 14px;background-position: calc(100% - 10px) center;cursor: pointer;color: #666;}

input:focus,select:focus, textarea:focus{border-color: #3F5CFE;}


textarea{border-radius: 10px;height: 150px;border: 1px solid #d9d9d9;transition: 0.3s;padding: 10px;font-size: 16px;width: 100%;resize: none;}
input[type=date]{appearance: none;}
input[type="date"]::-webkit-clear-button,
input[type="date"]::-webkit-inner-spin-button{display: none;}
input[type='date']::-webkit-calendar-picker-indicator {position:absolute;left: 0;top: 0;width: 100%;height: 100%;background: transparent;color: transparent;}
input[type='date']::placeholder{;}

input[type="time"]{appearance: none;}
input[type="time"]::-webkit-clear-button,
input[type="time"]::-webkit-inner-spin-button{display: none;}
input[type='time']::-webkit-calendar-picker-indicator {position:absolute;left: 0;top: 0;width: 100%;height: 100%;background: transparent;color: transparent;}
input[type='time']::placeholder{;}

.inner{max-width: 1264px;padding: 0 32px;margin: 0 auto;width: 100%;position: relative;z-index: 2;}
nav{position: fixed;top: 0;left: 0;height: 80px;transition: 0.3s;display: flex;align-items: center;width: 100%;background-color: rgba(255, 255, 255, 0.8);backdrop-filter: blur(5px);box-shadow: 1px 1px 64px rgba(70, 56, 175, 0.25);z-index: 5;}
nav.dark{background-color: transparent;box-shadow: 1px 1px 64px rgba(70, 56, 175, 0);}
nav::after{position: absolute;display: block;width: 100%;height: 100%;content: '';top: 0;left: 0;background: linear-gradient(to bottom, rgba(0, 0, 0, 0.5), transparent);opacity: 0;}
nav.dark::after{opacity: 1;}
nav:hover{background-color: #fff;}
nav:hover::after{opacity: 0;}
.header-wrap{display: flex;align-items: center;justify-content: space-between;width: 100%;position: relative;}
.logo{height: 40px;position: relative;width: 200px;}
.logo>img{position: absolute;left: 0;top: 50%;transform: translateY(-50%);transition: 0.3s;display: block;height: 100%;width: auto;}
.logo>img:last-of-type{opacity: 0;}
nav.dark .logo>img:last-of-type{opacity: 1;}
nav.dark .logo>img:first-of-type{opacity: 0;}

nav.dark:hover .logo>img:last-of-type{opacity: 0;}
nav.dark:hover .logo>img:first-of-type{opacity: 1;}

.menu{display: flex;gap: 32px;align-items: center;height: 100%;width: auto;position: absolute;left: 50%;top: 50%;transform: translate(-50%, -50%);}
.sub-menu{display: none;}
.menu>a{font-size: 20px;font-weight: 500;transition: 0.3s;}
nav.dark .menu>a{color: #fff;}
nav.dark:hover .menu>a{color: #000;}
.menu>a:hover{color: #4538af !important}

.lang-toggle{display: flex;align-items: center;padding: 4px;height: 32px;border-radius: 8px;background-color: rgba(255, 255, 255, 0.2);transition: 0.3s;border: 1px solid #d9d9d9;}
nav.dark .lang-toggle{border-color: transparent;}
.lang-toggle>button{display: flex;align-items: center;justify-content: center;width: 50px;height: 100%;border-radius: 6px;font-size: 16px;font-weight: 500;color: #333;transition: 0.3s;background-color: transparent;}
.lang-toggle>button.on{background-color: #4538af;color: #fff;}
nav.dark .lang-toggle>button{color: #fff;}
nav.dark .lang-toggle>button.on{background-color: #fff;color: #4538af;}

nav.dark:hover .lang-toggle{border-color: #d9d9d9;}
nav.dark:hover .lang-toggle>button{color: #333}
nav.dark:hover .lang-toggle>button.on{background-color: #4538af;color: #fff;}


.title-46{display: flex;flex-direction: column;gap: 5px;}
.title-46>p{font-size: 46px;font-weight: 600;}
.title-46>span{font-size: 24px;font-weight: 400;}

.title-36{display: flex;flex-direction: column;gap: 0px;}
.title-36>p{font-size: 36px;font-weight: 500;}
.title-36>span{font-size: 20px;font-weight: 400;}

.txt-20{font-size: 20px;color: #333;}

.title-bottom-32{margin-bottom: 32px;}
.title-bottom-64{margin-bottom: 64px;}

.main-banner{height: 100vh;width: 100%;}
.main-swiper{width: 100%;height: 100%;overflow: hidden;position: relative;}
.main-swiper .swiper-wrapper{width: 100%;height: 100%;}
.main-swiper .swiper-slide{width: 100%;height: 100%;position: relative;}
.ms-img{width: 100%;height: 100%;overflow: hidden;position: absolute;left: 0;top: 0;filter: brightness(0.8);}
.ms-img>img{display: block;width: 100%;height: 100%;object-fit: cover;}
.ms-img>video{display: block;width: 100%;height: 100%;object-fit: cover;}
.main-swiper .inner{position: relative;z-index: 2;height: 100%;}
.ms-txt{height: 100%;display: flex;flex-direction: column;justify-content: space-between;color: #fff;padding: 128px 0;}
.ms-sub .title{margin-bottom: 10px;}
.ms-sub>span{font-size: 18px;line-height: 140%;color: #f1f1f1;}
.main-swiper .title-46>span{color: #f1f1f1;}
.ms-img::after{position: absolute;left: 0;top: 0;height: 100%;width: 100%;display: block;content: '';background: linear-gradient(to right, rgba(0, 0, 0, 0.6), transparent);}
.ms-btn{position: absolute;left: 50%;transform: translateX(-50%);width: 100%;bottom: 128px;display: flex;align-items: center;justify-content: right;max-width: 1200px;z-index: 1;gap: 16px;}
.ms-btn .ms-btn-item{margin: 0 !important;padding: 0 !important;z-index: 3;display: flex;align-items: center;justify-content: center;width: 40px;height: 40px;border-radius: 100%;background-color: rgba(255, 255, 255, 0.6);transition: 0.3s;cursor: pointer;}
.ms-btn .ms-btn-item>svg{width: 24px;height: 24px;color: #000;transition: 0.3s;}
.ms-btn .ms-btn-item:hover{background-color: #fff;}
.ms-btn .ms-btn-item:hover>svg{color: #4538af;}
.ms-btn .ms-btn-item::after{display: none !important;}
.ms-btn .ms-btn-item::before{display: none !important;}

.main-benner-2{padding: 64px 0;}
.main-benner-2 .title-46>span{color: transparent;font-weight: 600;background: linear-gradient(to left, #4538af, #3F52CB, #8E6497, #EBB169);background-clip: text;}
.main-benner-2 .title-46{margin-bottom: 10px;}
.main-benner-2 .title-bottom-64{text-align: center;}

.mb-2-wrap{display: flex;flex-wrap: wrap;}
.mb-2-item{border-radius: 16px;border: 1px solid #d9d9d9;width: calc(50% - 16px);margin-right: 32px;margin-bottom: 32px;padding: 32px;cursor: pointer;transition: 0.3s;box-shadow: 1px 1px 32px rgba(153, 153, 153, 0.1);}
.mb-2-item:hover{background-color: #4538af;border-color: #4538af;box-shadow: 1px 1px 32px rgba(70, 56, 175, 0.25);}
.mb-2-item:nth-of-type(2):hover{background-color: #3F52CB;border-color: #3F52CB;box-shadow: 1px 1px 32px rgba(63, 82, 203, 0.25);}
.mb-2-item:nth-of-type(3):hover{background-color: #8E6497;border-color: #8E6497;box-shadow: 1px 1px 32px rgba(142, 100, 151, 0.25);}
.mb-2-item:nth-of-type(4):hover{background-color: #EBB169;border-color: #EBB169;box-shadow: 1px 1px 32px rgba(235, 177, 105, 0.25);}
.mb-2-item>svg{width: 64px;height: 64px;color: #4538af;margin-bottom: 16px;}
.mb-2-item:nth-of-type(2)>svg{color: #3F52CB;;}
.mb-2-item:nth-of-type(3)>svg{color: #8E6497;;}
.mb-2-item:nth-of-type(4)>svg{color: #EBB169;;}
.mb-2-item>p{color: #121212;font-size: 32px;font-weight: 500;margin-bottom: 5px;}
.mb-2-item:hover>p{color: #fff;}
.mb-2-item:hover>svg{color: #fff;}
.mb-2-item:hover .txt-20{color: #f1f1f1 !important;}
.mb-2-item:nth-of-type(2n){margin-right: 0;}
.mb-2-item:nth-of-type(3),
.mb-2-item:nth-of-type(4){margin-bottom: 0;}

.main-banner-3{padding: 64px 0;padding-bottom: calc(128px + 64px);}
.main-banner-3 .inner{position: inherit !important;}
.mb-3-inner{width: 100%;justify-content: space-between;display: flex;}
.mb-3-inner .title-46{position: sticky;top: 128px;left: 0;}
.mb-3-inner .title-46>span{font-weight: 600;color: #4538af;}
.mb-3-item{margin-bottom: calc(-50% + 80px);cursor: pointer;}
.mb-3-item:nth-of-type(odd){display: flex;flex-direction: column;align-items: flex-end;}
.mb-3-item:nth-of-type(2n){transform: translateX(calc(-100% - 64px))}
.mb-3-img{max-width: 420px;width: 100%;overflow: hidden;aspect-ratio: 4/3;border-radius: 16px;margin-bottom: 0px;padding: 32px;position: relative;display: flex;flex-direction: column;justify-content: space-between;box-shadow: 1px 1px 32px rgba(153, 153, 153, 0.25);}
.mb-3-img>img{display: block;width: 100%;height: 100%;object-fit: cover;position: absolute;left: 50%;top: 50%;transform: translate(-50%, -50%);transition: 0.5s;filter: brightness(0.8);}
.mb-3-img .title-36{position: relative;z-index: 2;text-align: left;color: #fff;}
.mb-3-img>span{position: relative;z-index: 2;text-align: left;font-size: 16px;line-height: 140%;font-weight: 400;color: #fff;transition: 0.5s;opacity: 0;}
.mb-3-item:hover .mb-3-img>img{filter: brightness(0.5);}
.mb-3-item:hover .mb-3-img>span{opacity: 1;}
.mb-3-item:hover .mb-3-img{box-shadow: 1px 1px 32px rgba(70, 56, 175, 0.25);}


.main-banner-4{padding: 64px 0;background-color: #f1f1f1;}
.main-banner-4 .title-46>span{font-weight: 600;color: #4538af;}

.news-wrap{display: flex;gap: 32px;margin-bottom: 64px;}
.news-item{width: 100%;border-radius: 16px;border: 1px solid #d9d9d9;transition: 0.3s;cursor: pointer;overflow: hidden;box-shadow: 1px 1px 32px rgba(153, 153, 153, 0.25);background-color: #fff;}
.news-item:hover{background-color: #4538af;border-color: #4538af;box-shadow: 1px 1px 32px rgba(70, 56, 175, 0.5);}
.news-img{width: 100%;aspect-ratio: 4/3;}
.news-img>img{display: block;width: 100%;height: 100%;object-fit: cover;}
.news-txt{padding: 16px;}
.news-txt>p{font-size: 20px;font-weight: 500;margin-bottom: 16px;transition: 0.3s;}
.news-date{display: flex;align-items: center;justify-content: space-between;}
.news-date>span{font-size: 16px;font-weight: 400;color: #666;transition: 0.3s;}
.news-date>p{font-size: 16px;font-weight: 500;color: #fff;transition: 0.3s;opacity: 0;}
.news-item:hover .news-txt>p{color: #fff;}
.news-item:hover .news-date>span{color: #f1f1f1;}
.news-item:hover .news-date>p{opacity: 1;}


.btn-wrap{display: flex;}
.btn-wrap>button{padding: 0 32px;border-radius: 100px;border: 1px solid #4538af;color: #4538af;height: 48px;display: flex;align-items: center;justify-content: center;transition: 0.3s;font-weight: 500;font-size: 16px;}
.btn-wrap>button:hover{background-color: #4538af;color: #fff;}

.btn-wrap>a{padding: 0 32px;border-radius: 100px;border: 1px solid #4538af;color: #4538af;height: 48px;display: flex;align-items: center;justify-content: center;transition: 0.3s;font-weight: 500;font-size: 16px;}
.btn-wrap>a:hover{background-color: #4538af;color: #fff;}

.main-banner-5{padding: 64px 0;position: relative;}
.main-banner-5 .title-46{text-align: center;}
.main-banner-5 .title-46>span{font-weight: 600;color: #4538af;}

.stat{display: flex;gap: 32px;margin-bottom: 64px;}
.stat-item{width: 100%;display: flex;align-items: center;flex-direction: column;justify-content: center;box-shadow: 0 32px 32px -32px rgba(70, 56, 175, 0.5);}
.stat-item:nth-of-type(2){box-shadow: 0 32px 32px -32px rgba(63, 82, 203, 0.5);}
.stat-item:nth-of-type(3){box-shadow: 0 32px 32px -32px rgba(70, 56, 175, 0.5);}
.stat-item:nth-of-type(4){box-shadow: 0 32px 32px -32px rgba(63, 82, 203, 0.5);}
.stat-item>span{font-size: 56px;font-weight: 600;color: #4538af;}
.stat-item:nth-of-type(1)>span{color: #4538af;}
.stat-item:nth-of-type(2)>span{color: #3F52CB;}
.stat-item:nth-of-type(3)>span{color: #4538af;}
.stat-item:nth-of-type(4)>span{color: #3F52CB;}

.logo-list{display: flex;flex-wrap: wrap;border-radius: 16px;border: 1px solid #d9d9d9;padding: 32px;background-color: #fff;box-shadow: 1px 1px 32px rgba(153, 153, 153, 0.25);}
.logo-item{width: calc(25% - 24px);margin-right: 32px;margin-bottom: 32px;display: flex;align-items: center;justify-content: center;height: 50px;padding: 5px;background-color: #f1f1f1;border-radius: 10px;}
.logo-item>img{display: block;width: 100%;max-height: 100%;object-fit: contain;}
.logo-item:nth-of-type(4n){margin-right: 0;}
.logo-item:nth-of-type(5),
.logo-item:nth-of-type(6),
.logo-item:nth-of-type(7),
.logo-item:nth-of-type(8){margin-bottom: 0;}


.play{position: absolute;left: 50%;top: 50%;transform: translate(-50%, -50%);z-index: 3;width: 64px;height: 64px;border-radius: 100%;background-color: rgba(255, 255, 255, 0.6);display: flex;align-items: center;justify-content: center;transition: 0.3s;}
.play:hover{background-color: #fff;}
.svg-box{width: 36px;height: 36px;overflow: hidden;position: relative;}
.svg-box>svg{width: 24px;height: 24px;position: absolute;left: 50%;top: 50%;transform: translate(-50%, -50%);transition: 0.3s;}
.svg-box>svg:first-of-type{color: #343434;}
.svg-box>svg:last-of-type{color: #4538af;opacity: 0;left: -50%;}
.play:hover .svg-box>svg:last-of-type{left: 50%;opacity: 1;}
.play:hover .svg-box>svg:first-of-type{left: 120%;opacity: 0;}
.play:hover .gre-shadow{opacity: 1;}


.video-popup{position: fixed;left: 0;bottom: 0;width: 100%;z-index: 6;height: calc(100% - 80px);background-color: rgba(0, 0, 0, 0.5);backdrop-filter: blur(5px);transition: 0.5s;opacity: 0;pointer-events: none;}
.vp-inner{width: calc(100% - 64px);height: calc(100% - 64px);position: absolute;left: 50%;top: 50%;transform: translate(-50%, -50%) scale(0.9);filter: blur(10px);opacity: 0;transition: 0.5s;}
.vp-inner>video{width: 100%;height: 100%;border-radius: 24px;background-color: rgba(0, 0, 0, 0.6);}
.vp-inner>button{padding: 0 16px;height: 36px;border-radius: 100px;background-color: rgba(0, 0, 0, 0.8);position: absolute;right: 16px;top: 16px;color: #fff;font-size: 18px;font-weight: 500;display: flex;align-items: center;justify-content: center;z-index: 2;transition: 0.3s;}
.vp-inner>button:hover{background-color: #fff;color: #E83F49;}

.video-popup.on{opacity: 1;pointer-events: inherit;}
.video-popup.on .vp-inner{filter: blur(0);transform: translate(-50%, -50%) scale(1);opacity: 1;}

footer{padding: 64px 0;}
.footer-inner{max-width: 1264px;padding: 0 32px;width: 100%;display: flex;align-items: flex-end;justify-content: space-between;margin: 0 auto;}
.time{display: flex;flex-direction: column;gap: 2.5px;margin-bottom: 32px;}
.time>span{font-size: 16px;color: #121212;font-weight: 600;}

.fi-wrap{display: flex;flex-direction: column;gap: 10px;font-size: 16px;font-weight: 400;color: #333;}

.footer-logo{height: 40px;}
.footer-logo>img{display: block;height: 100%;}

.nav-btn{display: flex;align-items: center;gap: 16px;}

/* 토글버튼 모듈 */
.toggle-button {
    display: none;
    width: 36px;
    height: 36px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    gap: 8px; /* 라인 사이의 간격을 8px로 조정 */
    position: relative;
}

.line {
    display: block;
    width: 24px;
    height: 2px;
    border-radius: 100px;
    background-color: #121212;
    transition: all 0.3s ease;
}
nav.dark .line{background-color: #fff;}
nav.dark:hover .line{background-color: #121212;}
/* 'X' 모양으로 변환 */
.toggle-button.active .line:nth-child(1) {
    transform: translateY(10px) rotate(45deg);
}

.toggle-button.active .line:nth-child(2) {
    opacity: 0;
}

.toggle-button.active .line:nth-child(3) {
    transform: translateY(-10px) rotate(-45deg);
}

.mnon{display: none;}

@media (max-width: 1264px) {
    .ms-btn{padding-right: 32px;}

    
    .title-46{gap: 5px;}
    .title-46>p{font-size: 42px;}
    .title-46>span{font-size: 20px;}
    .title-36{gap: 0px;}
    .title-36>p{font-size: 32px;}
    .title-36>span{font-size: 18px;}
    .txt-20{font-size: 18px;}
    .title-bottom-32{margin-bottom: 32px;}
    .title-bottom-64{margin-bottom: 64px;}

    .mb-2-item>p{font-size: 26px;}
    .mb-2-item>svg{width: 56px;height: 56px;}

    .mb-3-item:nth-of-type(2n) {
        transform: translateX(calc(-100% - 32px));
    }
    .mb-3-item {
        margin-bottom: calc(-50% + 64px);
    }
    .news-txt>p{font-size: 18px;}
    .stat-item>span{font-size: 52px;}
    .logo-item{height: 40px;}
}
@media (max-width: 993px) {
    .main-banner-3{padding-bottom: 64px;}
    .title-46{gap: 5px;}
    .title-46>p{font-size: 38px;}
    .title-46>span{font-size: 18px;}
    .title-36{gap: 0px;}
    .title-36>p{font-size: 30px;}
    .title-36>span{font-size: 16px;}
    .txt-20{font-size: 16px;}
    .title-bottom-32{margin-bottom: 32px;}
    .title-bottom-64{margin-bottom: 64px;}

    .ms-sub>span{font-size: 18px;}

    .ms-btn{bottom: 96px;}
    .ms-txt{padding: 96px 0;}
    .toggle-button{display: flex;}
    .menu{display: none;}
    nav{height: 60px;}
    .logo{height: 30px;}
    .video-popup{height: calc(100% - 60px);}

    .mb-2-item{margin-right: 16px;width: calc(50% - 8px);margin-bottom: 16px;padding: 32px 16px;}
    .mb-2-item>p{font-size: 24px;}
    .mb-2-item>svg{width: 52px;height: 52px;margin-bottom: 10px;}

    .mb-3-inner{flex-wrap: wrap;}
    .title-wrapper{width: 100%;}
    .mb-3-warp{width: 100%;display: flex;flex-wrap: wrap;margin-top: 64px;justify-content: center;}
    .mb-3-item:nth-of-type(2n){transform: translateX(0);margin-right: 0px;}
    .mb-3-item{margin-bottom: 32px;width: calc(50% - 16px);margin-right: 32px;margin-bottom: 32px;}
    .mb-3-img{aspect-ratio: 4/3;padding: 16px;max-width: 100%;aspect-ratio: 4/2;}
    .news-wrap{gap: 16px;}
    .news-wrap{margin-bottom: 32px;}
    .logo-item{margin-right: 16px;margin-bottom: 16px;width: calc(25% - 12px);height: 40px;}
    .footer-logo{height: 30px;}
}
@media (max-width: 840px) {
    
}
@media (max-width: 768px) {
    .logo-list{justify-content: space-around;}
    .logo-item{width: calc(50% - 16px);max-width: 200px;margin-right: 32px;margin-bottom: 32px !important;height: 30px;}
    .logo-item:nth-of-type(4n){margin-right: 32px;}
    .logo-item:nth-of-type(2n){margin-right: 0px;}
    .logo-list{padding-bottom: 0;}
    
    .stat{flex-wrap: wrap;gap: 0;}
    .stat-item{width: calc(50% - 8px);margin-right: 16px;margin-bottom: 32px;}
    .stat-item:nth-of-type(2n){margin-right: 0;}
    .main-banner-4 .inner{padding-right: 0;}
    .news-item{width: 280px;flex-shrink: 0;}
    .news-txt{padding: 16px;}
    .news-txt>p{white-space: wrap;margin-bottom: 10px;}
    .news-date>p{font-size: 14px;}
    .news-date>span{font-size: 14px;}
    .news-txt>p{font-size: 16px;}
    .news-wrap{white-space: nowrap;overflow-x: auto;}
    .btn-wrap>button{height: 42px;}
    .mb-3-img>span{margin-top: 16px;}
    .mb-3-img{aspect-ratio: inherit;}
    .mb-3-item{margin-bottom: 32px;width: 100%;margin-right: 0px !important;margin-bottom: 10px;}
    .mb-3-warp{margin-top: 32px;}
    .main-benner-1{padding: 32px 0;}
    .main-benner-2{padding: 32px 0;}
    .main-banner-3{padding: 32px 0;padding-bottom: 32px !important;}
    .main-banner-4{padding: 32px 0;}
    .main-banner-5{padding: 32px 0;}
    .main-banner-3 .title-wrapper{padding-left: 16px;}
    .mb-2-item>p{font-size: 24px;}
    .mb-2-item>svg{width: 46px;height: 46px;margin-bottom: 10px;}
    .mb-2-wrap{flex-wrap: wrap;}
    .mb-2-item{width: 100%;margin-right: 0;padding: 16px;margin-bottom: 10px !important;}
    .main-benner-2 .title-46{margin-bottom: 5px;}
    .title-46{gap: 2.5px;}
    .title-46>p{font-size: 36px;}
    .title-46>span{font-size: 18px;}
    .title-36{gap: 0px;}
    .title-36>p{font-size: 28px;}
    .title-36>span{font-size: 16px;}
    .txt-20{font-size: 16px;}
    .title-bottom-32{margin-bottom: 16px;}
    .title-bottom-64{margin-bottom: 32px;}
    .ms-btn{padding-right: 16px;}
    .ms-img::after{background: linear-gradient(to top, rgba(0, 0, 0, 0.6), transparent);}
    .stat{margin-bottom: 32px;}
    footer{padding: 32px 0;}
    .footer-inner{padding: 0 16px;}
    .fi-wrap{font-size: 14px;gap: 5px;}

}
@media (max-width: 640px) {
    .footer-inner{align-items: flex-start;}
}
@media (max-width: 540px) {
    .footer-inner{flex-wrap: wrap;}
    .footer-info{width: 100%;}
    .footer-logo{margin-top: 32px;}
    .ms-txt{padding: 96px 0;padding-bottom: 128px;}
    .ms-btn .ms-btn-item{width: 36px;height: 36px;}
    .ms-btn .ms-btn-item>svg{width: 20px;height: 20px;}

    .ms-btn{bottom: 64px;}
}
@media (max-width: 480px) {
    .logo-list{padding: 32px;}
    .logo-item{width: 100%;margin-bottom: 32px !important;margin-right: 0px !important;;max-width: 220px;margin: 0 auto !important;margin-bottom: 32px !important;}
    .logo-item:last-of-type{margin-bottom: 0 !important;}
    .mnon{display: inline;}
    .title-46{gap: 2.5px;}
    .title-46>p{font-size: 32px;}
    .title-46>span{font-size: 16px;}
    .title-36{gap: 0px;}
    .title-36>p{font-size: 26px;}
    .title-36>span{font-size: 16px;}
    .txt-20{font-size: 16px;}
    .ms-sub>span{font-size: 18px;font-weight: 400;}

    .mb-2-item>p{font-size: 24px;}
    .mb-2-item>svg{width: 42px;height: 42px;}
    .mb-3-img>span{font-size: 14px;}

    .stat-item>span{font-size: 42px;}
    .stat-item{margin-right: 0 !important;margin-bottom: 32px;width: 100%;;}
    .time{margin-bottom: 16px;}
}
@media (max-width: 375px) {
    .txt-20{font-size: 14px;}
    .main-banner-5 .title-46>p{font-size: 26px;}
}
@media (max-width: 360px) {
    .fi-wrap{font-size: 12px;}
}
@media (max-width: 359px) {
    .lang-toggle{display: none;}
}
@media (max-width: 280px) {
    
}












.logo-carousel-track {
    display: flex;
    white-space: nowrap; /* 이미지들이 한 줄에 배치되도록 */
    animation-timing-function: linear; /* 일정한 속도로 움직이도록 */
    animation-iteration-count: infinite; /* 무한 반복 */
}

.logo-carousel-track img {
    height: 40px; /* 로고 이미지 높이 */
    width: auto;
    margin: 0 32px; /* 로고 간 간격 */
    display: inline-block; /* flex-shrink 방지 */
    object-fit: contain; /* 이미지 비율 유지 */
    opacity: 0.6; /* 로고 투명도 (선택 사항) */
    transition: all 0.3s ease;
}

.logo-carousel-track img:hover {
    filter: grayscale(0%); /* 호버 시 원본 색상 (선택 사항) */
    opacity: 1; /* 호버 시 투명도 증가 (선택 사항) */
}

/* ============================ */
/* 애니메이션 정의 */
/* ============================ */

/* 첫 번째 줄: 왼쪽으로 움직임 */
@keyframes scroll-left {
    from {
        transform: translateX(0%);
    }
    to {
        /* 트랙을 정확히 반(50%)만 이동시켜 끊김 없이 연결합니다. */
        transform: translateX(-50%); 
    }
}

.left-move {
    animation-name: scroll-left;
    animation-duration: 40s;
    /* animation-delay: 0s; (기본값) */
}

/* 수정된 @keyframes for scroll-right */
@keyframes scroll-right {
    from {
        /* -50%에서 시작 */
        transform: translateX(-50%); 
    }
    to {
        /* 0%에서 끝남 */
        transform: translateX(0%);
    }
}

.right-move {
    animation-name: scroll-right;
    animation-duration: 40s;
    /* 딜레이를 사용하여 두 줄의 시작점을 다르게 하면 더 자연스럽습니다. */
    animation-delay: -20s; 
}



@media (max-width: 993px) {
    .inner{padding: 0 24px;}
}

@media (max-width: 768px) {
    .inner{padding: 0 16px;}
}





.gre-shadow{width: 100%;height: 100%;;position: absolute;left: 50%;top: 50%;transform: translate(-50%, -50%);transition: 0.3s;opacity: 0;z-index: -1;}
.gs{width: 100%;height: 100%;position: absolute;left: 50%;top: 50%;transform: translate(-50%, -50%);}
.play .gs{border-radius: 100%;}
.gre-shadow.on{opacity: 1;transition: 0.5s;}

.record-bg>.gre-shadow{z-index: 2 !important;}

.gs-1{
    opacity: 0;
    box-shadow: 
    -4px -4px 4px rgba(75, 30, 147, 0.25),
    -4px 4px 4px rgba(63, 82, 203, 0.25),
    4px -4px 4px rgba(142, 100, 151, 0.25),
    8px 8px 16px rgba(235, 177, 105, 1);
}
.gs-2{
    opacity: 0;
    box-shadow: 
    -4px -4px 16px rgba(75, 30, 147, 1),
    -4px 4px 4px rgba(63, 82, 203, 0.25),
    4px -4px 4px rgba(142, 100, 151, 0.25),
    4px 4px 4px rgba(235, 177, 105, 0.25);
}
.gs-3{
    opacity: 0;
    box-shadow: 
    -4px -4px 4px rgba(75, 30, 147, 0.25),
    -4px 4px 16px rgba(63, 82, 203, 1),
    4px -4px 4px rgba(142, 100, 151, 0.25),
    4px 4px 4px rgba(235, 177, 105, 0.25);
}
.gs-4{
    opacity: 0;
    box-shadow: 
    -4px -4px 4px rgba(75, 30, 147, 0.25),
    -4px 4px 4px rgba(63, 82, 203, 0.25),
    4px -4px 16px rgba(142, 100, 151, 1),
    4px 4px 4px rgba(235, 177, 105, 0.25);
}

.record-bg>.gre-shadow .gs-1{
    opacity: 0;
    box-shadow: 
    inset -4px -4px 4px rgba(75, 30, 147, 0.25),
    inset -4px 4px 4px rgba(63, 82, 203, 0.25),
    inset 4px -4px 4px rgba(142, 100, 151, 0.25),
    inset 8px 8px 16px rgba(235, 177, 105, 1);
}
.record-bg>.gre-shadow .gs-2{
    opacity: 0;
    box-shadow: 
    inset -4px -4px 32px rgba(75, 30, 147, 1),
    inset -4px 4px 4px rgba(63, 82, 203, 0.25),
    inset 4px -4px 4px rgba(142, 100, 151, 0.25),
    inset 4px 4px 4px rgba(235, 177, 105, 0.25);
}
.record-bg>.gre-shadow .gs-3{
    opacity: 0;
    box-shadow: 
    inset -4px -4px 4px rgba(75, 30, 147, 0.25),
    inset -4px 4px 32px rgba(63, 82, 203, 1),
    inset 4px -4px 4px rgba(142, 100, 151, 0.25),
    inset 4px 4px 4px rgba(235, 177, 105, 0.25);
}
.record-bg>.gre-shadow .gs-4{
    opacity: 0;
    box-shadow: 
    inset -4px -4px 4px rgba(75, 30, 147, 0.25),
    inset -4px 4px 4px rgba(63, 82, 203, 0.25),
    inset 4px -4px 32px rgba(142, 100, 151, 1),
    inset 4px 4px 4px rgba(235, 177, 105, 0.25);
}
.gre-shadow .gs-1{animation-name: gs-1;animation-duration: 2s;animation-iteration-count: infinite;animation-timing-function: ease;}
.gre-shadow .gs-2{animation-name: gs-2;animation-duration: 2s;animation-iteration-count: infinite;animation-timing-function: ease;}
.gre-shadow .gs-3{animation-name: gs-3;animation-duration: 2s;animation-iteration-count: infinite;animation-timing-function: ease;}
.gre-shadow .gs-4{animation-name: gs-4;animation-duration: 2s;animation-iteration-count: infinite;animation-timing-function: ease;}

@keyframes gs-1{
    0% {
        opacity: 0.75; /* 100%와 동일하게 시작 */
    }
    25% {
        opacity: 1; /* 중간에 잠깐 더 밝게 */
    }
    50% {
        opacity: 0.75;
    }
    75% {
        opacity: 0.5; /* 좀 더 부드러운 전환을 위해 추가 */
    }
    100% {
        opacity: 0.75;
    }
}
@keyframes gs-2{
    0% {
        opacity: 0.5; /* 100%와 동일하게 시작 */
    }
    33% {
        opacity: 1;
    }
    66% {
        opacity: 0.5;
    }
    100% {
        opacity: 0.5; /* 0%와 동일하게 맞춤 */
    }
}
@keyframes gs-3{
    0% {
        opacity: 0.5; /* 100%와 동일하게 시작 */
    }
    33% {
        opacity: 0.75; /* 좀 더 점진적인 변화 */
    }
    66% {
        opacity: 1;
    }
    100% {
        opacity: 0.5; /* 0%와 동일하게 맞춤 */
    }
}
@keyframes gs-4{
    0% {
        opacity: 1; /* 100%와 동일하게 시작 */
    }
    33% {
        opacity: 0.5; /* 좀 더 완만한 감소 */
    }
    66% {
        opacity: 0.75; /* 중간에 잠시 밝아짐 */
    }
    100% {
        opacity: 1; /* 0%와 동일하게 맞춤 */
    }
}

@keyframes gradient {
	0% {
		background-position: 0% 50%;
	}
	50% {
		background-position: 100% 50%;
	}
	100% {
		background-position: 0% 50%;
	}
}

.record-bg{position: fixed;display: flex;transition: 0.5s;align-items: center;justify-content: center;right: 0;top: 0;width: calc(100% - 260px);backdrop-filter: blur(2.5px);z-index: 5;height: 100%;background: linear-gradient(-45deg, rgba(75, 30, 147, 0.2), rgba(63, 82, 203, 0.2), rgba(142, 100, 151, 0.2), rgba(235, 177, 105, 0.2));background-size: 400% 400%;animation: gradient 3s ease infinite;opacity: 0;pointer-events: none;}
.main-banner-5{overflow: hidden;}
.main-banner-5 .record-bg{left: 50%;top: 50%;transform: translate(-50%, -50%);width: 100%;height: 100%;position: absolute;z-index: -1;}



4538AF