* { 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: 1500px; 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.6rem; font-family: 'pre_SB'; color: #222; margin:  0 0 20px 0;}
.title.left {text-align: left}
.title p {font-size: 1.4rem;}
.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: 1.1rem;}
#header .menu li a {  font-size: 1.1rem; position: relative;}
#header .menu li.on a {color: var(--main-color);}
#header .menu li.on a::after {content: ''; display: block; width: 100%; height: 1px; background-color: var(--main-color); position: absolute; left: 0; bottom: -6px;}
#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: #E6E8FF;background: linear-gradient(90deg,rgba(230, 232, 255, 1) 0%, rgba(209, 211, 255, 1) 100%);position: relative;}
#visual .text { position: absolute; bottom: 140px; left: 50%; transform: translate(-750px, 30px); }
#visual .text img {width: 80px; margin: 0 0 20px 0;}
#visual .text h2 {font-size: 3.6rem; font-family: var(--font-B); line-height: 1;}
#visual .text h2.gradient {color: #586EFF;}
#visual .text p {font-size: 1.3rem;margin: 30px 0 60px;}
#visual .text .btn_wrap {display: flex; gap: 10px;}
#visual .text .btn_wrap a {background: #fff;padding: 16px 20px;border-radius: 9px;font-size: 1.2rem;width: 180px;text-align: center;color: var(--main-color);font-family: var(--font-SB);}
#visual .text .btn_wrap a:nth-of-type(2) {background: var(--main-color); color: #fff;}
#visual img.back {display: block; width: 100%;}
#visual img.back.tab {display: none;}
#visual img.back.tab2 {display: none;}
#visual img.back.mo {display: none;}

#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: 2.2rem; color: #fff; font-family: var(--font-SB); }
#solution .box .bubble { position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%); width: 85%}
#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; }


#business .title h3 .gradient { background: linear-gradient(90deg, #5f6bfe, #BE95F3); -webkit-background-clip: text; -webkit-text-fill-color: transparent; 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: 2.3rem; font-family: var(--font-SB); color: var(--main-color); 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 -54px; position: relative; z-index: 2; width: 20%; transform: translateY(40px); }
#business .box.left .img_3 { width: 33%; transform: translateY(70px); }
#business .box.right { background: linear-gradient(90deg, #7A73FF, #78A5FF); display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 90px; }
#business .box.right .title { font-size: 2.3rem; color: #fff; text-align: left; width: 100%; line-height: 1.2; margin: 0 0 20px 0; padding: 0 6%; }
#business .box.right .image { display: flex; gap: 10px; }
#business .box.right .text { width: 100%; padding: 0 6%; color: #fff; font-size: 1.4rem; font-family: var(--font-L); }
#business .box.right .text span { font-family: var(--font-SB); }
#business .box.right .img_1 { width: 100%; }



#management .box {background: linear-gradient(90deg, #E5EEFF, #BEBAFF);border-radius: 60px;display: flex;align-items: center;justify-content: space-between;padding: 80px 0;}
#management .box .image img {      width: 90%;}
#management .box .text .title { text-align: left;  font-size: 2.3rem;  font-family: var(--font-SB);  color: var(--main-color); margin: 0 0 20px 0;}
#management .box .text .text { font-size: 1.2rem;  font-family: var(--font-SB);  color: #222;}
#management .box .text img { width: 86%;  transform: translateX(-35px);}


#ars .box_wrap { display: flex; gap: 20px;}
#ars .box_wrap .box {  border-radius: 60px;  overflow: hidden;}
#ars .box_wrap .box:nth-of-type(2) {overflow: visible;}
#ars .box_wrap .box img {width: 100%;}


#case { background: var(--back-color); } 
#case .title { display: flex; justify-content: space-between; } 
#case .title .right { display: flex; gap: 40px; } 
#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;}

#package .main { background: var(--main-color); border-radius: 37px; padding: 50px; display: flex; align-items: center; flex-direction: column; } 
#package .main .bedge { display: inline-block; background: #ffffff3d; padding: 8px 18px; border-radius: 40px; color: #58FFDE; font-family: var(--font-SB); margin: 0 0 20px 0; } 
#package .main .name { color: #fff; 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: #fff; font-size: 1.2rem; font-family: var(--font-L); margin: 5px 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: 20px; 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: center; justify-content: flex-start; background: #ECEFFF; border-radius: 37px; padding: 50px 0; width: 100%; } 
#package .add .box img { margin: 35px 0; width: 34px; } 
#package .add .box .container .bedge { display: inline-block; background: #fff; padding: 8px 18px; border-radius: 40px; color: #7C7C7C; font-family: var(--font-SB); margin: 0 0 20px 0; font-size: 0.8rem; } 
#package .add .box .container .name { display: flex; align-items: center; font-size: 1.4rem; margin: 0 0 20px 0; } 
#package .add .box .container .name img { margin: 0 15px 0 0; width: auto; height: 25px; } 
#package .add .box .container .name p { font-family: var(--font-SB); color: var(--main-color); } 
#package .add .box .container .text { text-align: center; font-size: 1.2rem; font-family: var(--font-L); color: #45509A; } 
#package .add .box .container .text span { font-family: var(--font-SB); }


#useto { background: var(--back-color); } 
#useto .box { border-radius: 60px; padding: 80px; } 
#useto .box.top { background: linear-gradient(90deg, #E5EEFF, #BEBAFF); 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: 2.3rem; font-family: var(--font-SB); } 
#useto .box.top .left .bottomtext p { font-size: 1.4rem; 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: #817FFF; display: flex; align-items: center; justify-content: center; padding: 40px 0; } 
#useto .box.bottom .center { text-align: center; color: #fff; } 
#useto .box.bottom .center .toptext { margin: 0 0 50px 0; } 
#useto .box.bottom .center .toptext p { font-size: 2.3rem; } 
#useto .box.bottom .center .bottomtext p { font-size: 1.4rem; font-family: var(--font-L); } 
#useto .box.bottom .center .bottomtext p span { font-family: var(--font-SB); } 
#useto .box.bottom img { width: 25%; }


#useto_m {display: none;}
#useto_m .box {width: 100%; max-width: 600px;}
#useto_m .box_1 { background: linear-gradient(90deg, #E5EEFF, #BEBAFF); }
#useto_m .box_2 { background: #817FFF;}


#application .box_wrap{ display: flex; gap: 30px;  justify-content: space-between;}
#application .box img{  width: 100%;}
#application .yt_wrap{ width: 100%; border-radius: 20px; overflow: hidden; aspect-ratio: 16 / 9;}
#application .yt_wrap iframe{ width: 100%; height: 100%;}


#last {position:relative;}
#last img {width:100%;}
#last img.mo {display: none;}
#last .text {position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:2;}
#last .text p {font-size:2.6rem;text-align:center;font-family:var(--font-L);color:#222;}
#last .text p.bold {font-family:var(--font-SB);}
#last .btn_wrap {display:flex;align-items:center;justify-content:center;gap:20px;margin:43px 0 0 0;}
#last .btn_wrap a {display:inline-flex;align-items:center;justify-content:center;padding:11px 23px;border-radius:50px;}
#last .btn_wrap a p {font-size:1.2rem;font-family:var(--font-M);}
#last .btn_wrap a img {width:20px;margin:0 14px 0 0;}
#last .btn_wrap a.btn_1 {background:#2C2C2C;border:3px solid #2c2c2c;}
#last .btn_wrap a.btn_1 p {color:#fff;}
#last .btn_wrap a.btn_2 {background:#fff;border:3px solid transparent;background:linear-gradient(#fff,#fff) padding-box,linear-gradient(90deg,#9273FF,#347EFF,#347EFF) border-box;}
#last .btn_wrap a.btn_2 p {color:var(--main-color);font-family:var(--font-SB);}




#footer { padding: 70px 0; }
#footer .inner {display: flex;align-items: start;justify-content: space-between;position: relative;padding: 40px 0;}
#footer .tell img {margin: 0 0 20px 0;width: 160px;}
#footer .tell .title {font-size: 1.4rem;margin: 0;}
#footer .tell .title span {font-size: 1.4rem;margin: 0 0 0 6px;font-family: var(--font-B);display: inline-block;color: #222;}
#footer .tell .number {font-size: 1.6rem;display: flex;align-items: center;font-family: 'pre_B';}
#footer .tell .number img {width: 21px;margin: 0 3px 0 0;}
#footer .tell .bedge {display: flex; gap: 10px; margin: 14px 0 0 0;}
#footer .tell .bedge span {display: flex; align-items: center; justify-content: center; width: 46px; height: 30px; background-color: #eff7ff; border-radius: 4px;}
#footer .menu { display: flex; gap: 0 50px; }
#footer .menu ul li { font-size: 15px; margin: 0 0 10px 0; }
#footer .menu ul li.first a {font-family: 'pre_SB';font-size: 1.2rem;}
#footer .menu ul li a {font-family: pre_L;font-size: 1rem;}
#footer .menu ul li a:hover {text-decoration: underline;}
#footer .btn_wrap a {display: flex;align-items: center;width: 150px;justify-content: end;background: red;height: 49px;margin: 0 0 10px 0;border-radius: 8px;padding: 0 12px;}
#footer .btn_wrap a p {margin: 0 20px;font-family: var(--font-SB);}
#footer .btn_wrap a.blog { background: #E9F6F1; }
#footer .btn_wrap a.blog:hover {background: #eff9f5;}
#footer .btn_wrap a.youtube { background: #FFE5E5; }
#footer .btn_wrap a.youtube:hover { background: #fff0f0; }
#footer .btn_wrap a.youtube p { margin: 0 20px 0 27px; }
#footer .btn_wrap a.tstory { background: #ffeddb; }
#footer .btn_wrap a.tstory:hover { background: #fff6ed; }
#footer .family { position: absolute; bottom: 0; right: 0; width: 142px; border: 1px solid #cdcdcd; height: 50px; display: flex; align-items: center; padding: 0 12px; border-radius: 4px; box-sizing: border-box; cursor: pointer; }
#footer .family p { display: flex; align-items: center; justify-content: space-between; width: 100%; }
#footer .family p img { width: 10px; }
#footer .family ul {position: absolute;bottom: 60px;left: 0;width: 100%;background: #fff;box-sizing: border-box;border-radius: 4px;cursor: pointer;border: 1px solid #ddd;z-index: 2;display: none;box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;}
#footer .family ul li { border-bottom: 1px solid #ddd; }
#footer .family ul li a {padding: 12px 10px; display: block;}
#footer .family ul li a:hover {background-color: #f6f6f6;}
#footer .family ul li:last-of-type { border-bottom: 0; }


#go_top {position: fixed; right: 50%; transform: translateX(850px); 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_m {display: none;}
.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;}