* { margin: 0; padding: 0; font-family: var(--font-R); } 
html {scroll-behavior: smooth; font-size: 16px;}


/* 애니메이션 */
.fade_up {opacity: 0; transform: translateY(20px);  }
.fade_up.show {animation: fadeUp 0.5s ease-out forwards;}
@keyframes fadeUp {
    to {opacity: 1;transform: translateY(0);}
}

.slide_down {  opacity: 0; transform: translateY(-140px);}
.slide_down.show { animation: slideDown 0.5s ease-out forwards;}
@keyframes slideDown {
    to {opacity: 1;transform: translateY(0);}
}

.fade_in {opacity: 0;}
.fade_in.show {animation: fadeIn 1s ease-out forwards;}
@keyframes fadeIn {
    to {opacity: 1;}
}

.pop_in { opacity: 0;transform: scale(0.5);}
.pop_in.show {animation: popIn 0.6s ease-out forwards;}
@keyframes popIn {
    80% {opacity: 1;transform: scale(1.05);}
    100% {opacity: 1; transform: scale(1);}
}


.inner { width: 1300px; margin: 0 auto; padding: 120px 0; } 
.flex { display: flex; justify-content: center; align-items: center; } 
.title {text-align: center;margin: 0 0 90px 0;}
.title > span { color: var(--main-color); font-family: var(--font-SB); margin: 0 0 18px 0;  display: block; font-size: 1.2rem}
.title h3 { font-size: 2.3rem; font-family: 'pre_SB'; color: #222; margin:  0 0 20px 0;}
.title.left {text-align: left}
.title p {font-size: 1.3rem;}
.title p span {font-family: var(--font-SB)}

#header {position: fixed;top: 0;left: 0;width: 100%;z-index: 5;}
#header .inner { display: flex; justify-content: space-between; align-items: center; padding: 30px 0; }
#header .logo img { display: block; width: 139px; }
#header .menu { display: flex; gap: 40px; align-items: center; }
#header .menu ul { display: flex; gap: 40px; }
#header .menu .inqu {display: inline-block;background: var(--main-color);color: #fff;padding: 8px 20px;border-radius: 30px;font-size: 0.9rem;}
#header.fixed {position: fixed;  background: rgba(255, 255, 255, 0.8); backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px); border-bottom: 1px solid #e7e7e7; }
#header.fixed .inner {padding: 20px 0;}


#visual {background: linear-gradient(0deg,rgba(255, 255, 255, 1) 0%, rgba(221, 229, 247, 1) 30%, rgba(255, 255, 255, 1) 100%);position: relative;height: 940px;display: flex;align-items: center;justify-content: center;overflow: hidden;} 
#visual .text {display: flex;flex-direction: column;justify-content: center;align-items: center;position: relative;z-index: 2;} 
#visual .text img {width: 48px; margin: 0 0 20px 0;} 
#visual .text h2 {font-size: 3.1rem; line-height: 1.1; font-family: pre_B;} 
#visual .text h2.dark {color: #0E1855;} 
#visual .text h2.light {color: #586EFF;} 
#visual .text p {margin: 30px 0 0 0; text-align: center; font-size: 1.2rem; color: #0E1855;} 
#visual .text .btn_wrap {margin: 30px 0 0 0; display: flex; align-items: center; gap: 14px;} 
#visual .text .btn_wrap a {display: inline-flex; background: var(--main-color); color: #fff; padding: 12px 20px; border-radius: 10px;}
#visual .text .btn_wrap a:nth-of-type(1) {background-color: #fff; color: var(--main-color); font-family: 'pre_SB'; font-size: 1.2rem;}
#visual .image img {position: absolute;bottom: -90px;width: 580px;}
#visual .image img.img_1 { left: 0;}
#visual .image img.img_2 {right: 0;bottom: 0;width: 600px;}
#visual .image .wh_gra {
    position: absolute; bottom: 0px; left: 0; width: 100%; height: 270px;
    background: linear-gradient(0deg, rgba(255, 255, 255, 1) 40%, rgba(255, 255, 255, 0) 100%);
} 


/* #visual .image {display: flex;justify-content: center;gap: 20px;width: 100%;margin: 90px 0 0 0;}
#visual .image img {width: 20%;}
#visual .image .image_3 {  width: 59%;}
#visual .image .wh_gra {  position: absolute; bottom: 10px; left: 0;  width: 100%;  height: 240px;
    background: linear-gradient(0deg, rgba(255, 255, 255, 1) 60%, rgba(255, 255, 255, 0) 100%);
} */


#customer .inner {padding: 80px 0 120px 0}
#customer .logo-wrap { overflow: hidden; white-space: nowrap; width: 100%; }
#customer .logo-track { display: inline-block; animation: roll 30s linear infinite; }
#customer .logo-track img {display: inline-block;height: 53px;margin: 0 40px;}
@keyframes roll { from { transform: translateX(0); } to { transform: translateX(-50%); } }


#solution { background: #141A24; }
#solution .title h3 { color: #fff; }
#solution .title p { color: #dadada; }
#solution .box_wrap { display: flex; justify-content: space-between; gap: 20px; }
#solution .box { position: relative; }
#solution .box .title { position: absolute; top: 69px; left: 53px; font-size:1.8rem; color: #fff; font-family: var(--font-SB); }
#solution .box .bubble { position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%); width: 79%}
#solution .box .back { display: block; width: 100%; }
#solution .box img.back.mo {display: none;}
#solution .etc { color: #aaaaaa; margin: 20px 0 0; text-align: right; }


#ars .box_wrap {display: flex; gap: 20px; align-items: stretch;} 
#ars .box.time {display: flex; width: calc(100% - 320px); border-radius: 60px; overflow: hidden;} 
#ars .box.phone {width: 320px;} 
#ars .box.time .container {width: 50%; display: flex; flex-direction: column; align-items: center; position: relative; padding: 60px 0 0 0;} 
#ars .box.time .container.day {background: #FFE572;} 
#ars .box.time .container.night {background: #3B3B64;} 
#ars .box.time .container img {width: 36%;} 
#ars .box.time .container p {text-align: center; font-size: 1.3rem; line-height: 1.3; margin: 30px 0 0 0;} 
#ars .box.time .container.night p {color: #fff;} 
#ars .box.time .container .phone {position: absolute; bottom: 0; width: 70%;} 
#ars .box.time .container .phone img {width: 100%;}

#case { background: var(--back-color); } 
#case .title { display: flex; justify-content: space-between; margin: 0 0 60px 0; align-items: center;} 
#case .title h3 {margin: 0;}
#case .title .right { display: flex; gap: 40px; align-items: center;} 
#case .title .right p { text-align: left; } 
#case .title .right a { display: flex; align-items: center; width: 176px; background: var(--main-color); height: 50px; border-radius: 50px; justify-content: center; gap: 20px; } 
#case .title .right a p { color: #fff; font-size: 1.2rem; } 
#case .title .right a img { width: 20px; } 
#case .image_wrap { background: #fff; border-radius: 60px; padding: 100px 30px; }
#case .image_wrap img {width: 100%;}
#case .image_wrap img.mo {display: none;}


#business .title h3 .gradient { color: #777; display: block; font-family: var(--font-B)}
#business .box_wrap { display: flex; justify-content: space-between; gap: 20px; align-items: stretch; }
#business .box { width: 50%; border-radius: 56px; }
#business .box.left { background: #ECEFFF; }
#business .box.left .title {font-size: 1.9rem;font-family: var(--font-SB);color: #222;margin: 90px 0 40px 0;}
#business .box.left a { margin: 0 auto 60px; background: #fff; display: flex; align-items: center; justify-content: center; width: 180px; height: 50px; border-radius: 80px; color: var(--main-color); font-family: var(--font-B); }
#business .box.left a img { width: 20px; margin: 0 0 0 10px; }
#business .box.left .image { display: flex; justify-content: center; }
#business .box.left .img_1 {width: 33%;height: inherit;}
#business .box.left .img_2 {margin: 0 -44px;position: relative;z-index: 2;width: 21%;transform: translateY(40px);}
#business .box.left .img_3 { width: 33%; transform: translateY(70px); }
#business .box.right {background:#375185;position: relative;overflow: hidden;padding: 90px;}
#business .box.right .title {text-align: left;color: #fff;font-size: 2rem;line-height: 1.3;font-family: 'pre_SB';margin: 0 0 20px 0;}
#business .box.right .icon {   width: 29%;}
#business .box.right .text {color: #fff;position: absolute;bottom: 90px;font-size: 1.3rem;}
#business .box.right .man {  position: absolute;  bottom: 0;  right: 16px;  width: 55%; z-index: 2}
#business .box.right .back { position: absolute; bottom: -150px; right: -120px; width: 89%;}


#privacy { background: var(--back-color);} 
#privacy .box_wrap { display: flex; gap: 30px;} 
#privacy .box_wrap .box { border-radius: 50px; overflow: hidden;} 
#privacy .yt_wrap {width: 68%;position: relative;padding-bottom: 37.3%;height: 0;} 
#privacy .yt_wrap iframe { width: 100%; position: absolute; top: 0; left: 0; width: 100%;  height: 100%;} 
#privacy .box.right {width: 32%;background: #fff;padding: 60px;display: flex;flex-direction: column;gap: 53px;justify-content: center;} 
#privacy .box.right .container { display: flex; gap: 20px;} 
#privacy .box.right .container .num {display: flex;align-items: center;justify-content: center;background: #222;color: #fff;width: 24px;height: 24px;border-radius: 100%;transform: translateY(4px);} 
#privacy .box.right .container .text .title {margin: 0 0 10px 0;text-align: left;font-family: 'pre_SB';color: #222;font-size: 1.4rem;}


#package {  background: #FAFCFF;}
#package .main {border-radius: 37px;padding: 50px;display: flex;align-items: center;flex-direction: column;background: linear-gradient(0deg,rgba(195, 215, 255, 1) 0%, rgba(234, 241, 255, 1) 100%);position: relative;} 
#package .main .back {  position: absolute;  top: 0;  left: 50%;  transform: translateX(-50%);  height: 100%;}
#package .main .bedge {display: inline-block;background: #fff;padding: 8px 18px;border-radius: 40px;color: #222;font-family: var(--font-SB);margin: 0 0 20px 0;} 
#package .main .name {color: #222;font-size: 1.9rem;font-family: var(--font-SB);margin: 0 0 20px 0;} 
#package .main .name span { margin: 0 20px; } 
#package .main .text {color: #222;font-size: 1.2rem;font-family: var(--font-L);margin: 3px 0px;} 
#package .main .text br {display: none;}
#package .main .text span { font-family: var(--font-SB); } 
#package .main .text img { display: inline-block; margin: 0 20px 0; } 
#package .add {display: flex;justify-content: space-between;gap: 37px;align-items: stretch;} 
#package .add .box {flex: 1;display: flex;flex-direction: column;align-items: center;} 
#package .add .box .container {flex: 1;display: flex;flex-direction: column;align-items: flex-start;justify-content: flex-start;background: #fff;border-radius: 37px;padding: 48px 48px 130px 48px;width: 100%;box-shadow: rgb(185 194 221 / 20%) 0px 7px 29px 0px;} 
#package .add .box .add_icon { margin: 35px 0; width: 34px; }
#package .add .box .container > span { display: flex; align-items: center;  justify-content: center;  font-size: 0.9rem; font-family: 'pre_SB'; background: #E0E6F2; color: #4b5e85;  padding: 6px 14px;  border-radius: 30px; margin: 0 0 23px 0;}
#package .add .box .container .name { font-size: 1.6rem;  font-family: 'pre_B';  margin: 0 0 20px 0;}
#package .add .box .container .text {  font-size: 1.1rem;}
#package .add .box .container .text span {  font-family: 'pre_SB';}
#package .add .box .container .box_img { position: absolute;  bottom: 45px; right: 45px;  width: 90px;}


#useto { background: var(--back-color); } 
#useto .box { border-radius: 60px; padding: 80px; } 
#useto .box.top {background: #fff;display: flex;align-items: stretch;justify-content: space-between;} 
#useto .box.top .left { display: flex; flex-direction: column; justify-content: space-between; padding: 20px 0; } 
#useto .box.top .left .toptext .number { color: var(--main-color); } 
#useto .box.top .left .toptext p {font-size: 2rem;font-family: var(--font-SB);} 
#useto .box.top .left .bottomtext p {font-size: 1.2rem;color: #222;} 
#useto .box.top .left .bottomtext p span { font-family: var(--font-SB); }
#useto .box.top .right img { width: 90%; } 
#useto .box.bottom {margin: 50px 0 0 0;background: #375185;display: flex;align-items: center;justify-content: center;padding: 40px 0;} 
#useto .box.bottom .center {text-align: center;color: #fff;margin: 0 50px;} 
#useto .box.bottom .center .toptext { margin: 0 0 50px 0; } 
#useto .box.bottom .center .toptext p {font-size: 2rem;} 
#useto .box.bottom .center .bottomtext p {font-size: 1.2rem;font-family: var(--font-L);color: #ffffffe0;} 
#useto .box.bottom .center .bottomtext p span {font-family: var(--font-SB);color: #ffffff;} 
#useto .box.bottom img {width: 20%;}


#application img {margin: 0 auto; width: 80%;}
#application .container {position: relative;}
#application a {width: 11%;height: 40px; display: block;position: absolute;}
#application a.video_2 {  top: 30.4%;  left: 50%;  transform: translateX(-50%);}
#application a.video_3-1 {  top: 67.6%;  left: 21.5%;}
#application a.video_3-2 { top: 65.8%; right: 21.5%;}
#application a.video_4 { bottom: 2.3%;  right: 21.7%;}
#application .video_pop { position: fixed; inset: 0; z-index: 9999; display: none; place-items: center;
    padding: max(24px, env(safe-area-inset-top)) max(24px, env(safe-area-inset-right)) max(24px, env(safe-area-inset-bottom)) max(24px, env(safe-area-inset-left));
    background: rgba(0,0,0,.6);  backdrop-filter: blur(3px);
}
#application .video_pop.is-open { display: grid; }
#application .video_pop .video {
    width: min(92vw, 1000px);
    max-height: calc(100vh - 48px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
    aspect-ratio: 16 / 9;  background: #000; border-radius: 20px; overflow: hidden;
    box-shadow: 0 20px 60px rgba(0,0,0,.55), 0 0 0 1px rgba(255,255,255,.08) inset;
    animation: videoPopIn .28s ease both;
}
#application .video_pop .video iframe {  width: 100%;  height: 100%;  border: 0;  display: block;}



#last {background: linear-gradient(0deg,rgba(247, 250, 255, 1) 0%, rgba(221, 229, 247, 1) 100%);overflow: hidden}
#last .inner { position: relative;}
#last .text > p { font-size: 2rem; font-family: 'pre_B'; line-height: 1.4;}
#last .text .btn_wrap { display: flex; gap: 13px; margin: 60px 0 0 0;}
#last .text .btn_wrap a { display: inline-flex; align-items: center; gap: 12px; justify-content: center; background: #fff; border-radius: 50px; padding: 12px 22px;}
#last .text .btn_wrap a .icon { height: 18px;}
#last .text .btn_wrap a.bk { background: #222; color: #fff;}
#last .text .btn_wrap a.wh { color: var(--main-color); border: 3px solid transparent; background: linear-gradient(#fff,#fff) padding-box, linear-gradient(90deg,#9273FF,#347EFF,#347EFF) border-box;}
#last .text .btn_wrap a p { font-family: 'pre_SB';}
#last .back { position: absolute; bottom: -20px; right: 0; height: 96%;}



#footer { background: #2B3444; }
#footer .inner { padding: 70px 20px; }
#footer .top { display: flex; align-items: center; justify-content: space-between; margin: 0 0 50px 0; }
#footer .top .left { display: flex; align-items: center; gap: 26px; }
#footer .top .left .logo { margin: 0 31px 0 0; }
#footer .top .left .logo img { width: 118px; }
#footer .top .left a { color: #fff; }
#footer .top .right { display: flex; gap: 10px; }
#footer .bottom { display: flex; justify-content: space-between; align-items: flex-end; }
#footer .bottom .left { display: grid; grid-template-columns: 0.3fr 0.5fr 1fr; font-size: 0.8rem; gap: 10px 40px; }
#footer .bottom .left .box { display: flex; align-items: ; gap: 15px; color: #fff; width: max-content; }
#footer .bottom .left .box p { font-family: 'pre_L'; opacity: 0.8; }
#footer .bottom .right p { color: #fff; font-size: 0.7rem; opacity: 0.8; font-family: 'pre_L'; }


.new_quickmenu_m {display: none;}
#go_top {position: fixed; right:20px; z-index: 4; bottom: 50px; background-color: #fff; width: 80px; height: 80px; display: flex; align-items: center; justify-content: center; border-radius: 20px; box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px; display: none;}
#go_top img {width: 30px;}

.new_quickmenu {position: fixed; bottom:70px; right: -1px; z-index: 100; background-color: #fff; border: 1px solid #eee; padding: 20px 0 10px 0; display: block;
border-top-left-radius: 20px; border-bottom-left-radius: 20px; box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px; width: auto;}
.new_quickmenu .inner {display: block; width: max-content; padding: 0;}
.new_quickmenu * {box-sizing: border-box;}
.new_quickmenu a {position: relative; display: flex; align-items: center; justify-content: center; padding:10px; width: 90px; height: 90px; flex-direction: column;}
.new_quickmenu a:hover {text-decoration: none;}
.new_quickmenu a:hover p {text-decoration: none; }
.new_quickmenu a img.icon {height: 47px;}
.new_quickmenu a img.icon.kakao {height: 47px;}
.new_quickmenu a img.icon.top {height: 20px;}
.new_quickmenu a:nth-of-type(1)::before {display: none;}
.new_quickmenu a::before {display:block; width: 60%; height: 1px; background-color: #b3b3b3; position: absolute; top: 0;}
.new_quickmenu a p {font-size: 13px; text-align: center; margin: 5px 0 0 0; font-family: 'pre_B'}
.new_quickmenu #consult-chat-floatting-plugin,
.new_quickmenu #chatButton,
.new_quickmenu .chat-fix {position: inherit !important; bottom: inherit; right: inherit}
.new_quickmenu #consult-chat-iframe-plugin {right: 100px !important;}
.new_quickmenu .chat-open,
.new_quickmenu .chat-close {border-radius: 8px; width: 64px; height: 64px;}