* { margin: 0; padding: 0; font-family: var(--font-R); transition: 0.5s;} 
html {scroll-behavior: smooth;}

.inner { width: 1200px; margin: 0 auto; } 
.flex { display: flex; justify-content: center; align-items: center; } 
.sbold {font-family: var(--font-SB)}
.bold {font-family: var(--font-B);}
.shadow_1  {box-shadow: rgb(222, 233, 255) 0px 8px 24px;} 
.pd_100 {padding: 100px 0;}
.back_blue {background-color: var(--back-color)}
.gr_blue {background: linear-gradient(180deg,rgba(214, 228, 253, 1) 0%, rgba(255, 255, 255, 1) 50%);}
.ra_20 {border-radius:20px}
.imtxt {display: flex; align-items: center; justify-content: center;}
.imtxt > div {/* width: 50%; */}
.imtxt .text {display: flex; align-items: center; justify-content: center;}



.subtitle {text-align: center; margin: 0 0 60px 0;}
.subtitle span {color: var(--main-color); font-size: 20px;}
.subtitle h3 {font-size: 32px; line-height: 1.4;  font-family: var(--font-SB)}
.subtitle h3 span {color: var(--main-color);font-size: 32px; line-height: 1.4;  font-family: var(--font-SB)}
.subtitle h4 {color: var(--main-color);font-family: var(--font-SB);margin: 0 0 10px 0;font-size: 20px;}
.subtitle .mo {display: none;}

.subtitle_2 h3 { font-size: 32px; font-family: var(--font-B); line-height: 1.2;  margin: 0 0 30px 0;}
.subtitle_2 h4 { font-size: 26px; line-height: 1.4;}

/* 애니메이션 */
.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);}
}


/* 헤더 */
#header { position: fixed; top: 0; left: 0; right: 0; z-index: 1000; padding: 20px 40px; transition: all 0.3s ease; }
#header .logo img {width: 30px}
#header .nav_container {  position: relative;  display: flex;  align-items: center;  max-width: 1200px;  margin: 0 auto;   padding: 0 40px;  justify-content: space-between;    }
#header .nav_menu {position: absolute;left: 50%;transform: translateX(-50%);display: flex;list-style: none;gap: 3vw;top:10px;}
#header .nav_menu a {color: white;text-decoration: none;font-weight: 500;transition: color 0.3s ease;}
#header .nav_menu a:hover { opacity: 0.8; }
#header .download_btn { background: white; color: #194FAE; padding: 10px 24px; border-radius: 25px; text-decoration: none; font-family: 'pre_SB'}
#header .download_btn {
    border: 0 solid;
    box-shadow: inset 0 0 20px rgba(255, 255, 255, 0);
    outline: 1px solid;
    outline-color: rgba(255, 255, 255, .5);
    outline-offset: 0px;
    text-shadow: none;
    transition: all 1250ms cubic-bezier(0.19, 1, 0.22, 1);
} 

#header .download_btn:hover {
    border: 1px solid #fff;
    box-shadow: inset 0 0 20px rgba(255, 255, 255, .5), 0 0 20px rgba(255, 255, 255, .2);
    outline-color: rgba(255, 255, 255, 0);   outline-offset: 15px;
}

/* 헤더 스크롤시 스타일 */
#header.scrolled .logo img {width: 25px;}
#header.scrolled .nav_menu { top: 10px;}
#header.scrolled .nav_menu a { color: #333; }
#header.scrolled .download_btn {background-color: var(--main-color); color: #fff; font-size: 14px;}
#header.scrolled {background: rgba(255, 255, 255, 0.05);backdrop-filter: blur(12px);-webkit-backdrop-filter: blur(12px);border: 1px solid rgba(255, 255, 255, 0.3);box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.5), inset 0 -1px 0 rgba(255, 255, 255, 0.1), inset 0 0 14px 7px rgba(255, 255, 255, 0.7);padding: 10px 40px;}
#header.scrolled::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.8), transparent); }
#header.scrolled::after { content: ''; position: absolute; top: 0; left: 0; width: 1px; height: 100%; background: linear-gradient(180deg, rgba(255, 255, 255, 0.8), transparent, rgba(255, 255, 255, 0.3)); }
#header.scrolled .download_btn {
    border: 0 solid;
    box-shadow: inset 0 0 20px rgba(0,94,255, 0);
    outline: 1px solid;
    outline-color: rgba(0,94,255, .5);
    outline-offset: 0px;
    text-shadow: none;
    transition: all 1250ms cubic-bezier(0.19, 1, 0.22, 1);
} 
#header.scrolled .download_btn:hover {
    box-shadow: inset 0 0 20px rgba(0,94,255, .5), 0 0 20px rgba(0,94,255, .2);
    outline-color: rgba(0,94,255, 0);  outline-offset: 15px;
}

/* 요금안내 섹션 진입시 헤더 스타일 밝게 변경 */
#header.scrolled.sec10 {box-shadow: none; background: rgba(255, 255, 255, 0.25);}
#header.scrolled.sec10 .nav_menu a {color: #fff;}
#header.scrolled.sec10 .download_btn {
    border: 0 solid;
    box-shadow: inset 0 0 20px rgba(255, 255, 255, 0);
    outline: 1px solid;
    outline-color: rgba(255, 255, 255, .5);
    outline-offset: 0px;
    text-shadow: none;
    transition: all 1250ms cubic-bezier(0.19, 1, 0.22, 1);
} 

#header.scrolled.sec10 .download_btn:hover {
    border: 1px solid #fff;
    box-shadow: inset 0 0 20px rgba(255, 255, 255, .5), 0 0 20px rgba(255, 255, 255, .2);
    outline-color: rgba(255, 255, 255, 0);   outline-offset: 15px;
}


/* 메인 비주얼 */
#main_visual {background: linear-gradient(180deg, rgba(88, 149, 255, 1) 0%, rgb(0 72 197) 80%);height: 80vh;display: flex;flex-direction: column;justify-content: center;align-items: center;text-align: center;color: white;position: relative;}
#main_visual .back { width: 100%;height: 110%;position: absolute;top: 0;left: 0;  background: url(../images/back_circle.png) center 76% / cover no-repeat; z-index: 2;}


#main_visual .icon {position: absolute; width: 2.4%;}
#main_visual .icon_1 {top: 30%;left: 33%;width: 4.8%; animation-delay: 0.6s;}
#main_visual .icon_2 {top: 50%;left: 28%;width: 1.8%; animation-delay: 0.8s}
#main_visual .icon_3 {bottom: 25%;left: 33%;width: 2%; animation-delay: 1s}
#main_visual .icon_4 {top: 73%;right: 36%;width: 3%; animation-delay: 1.2s}
#main_visual .icon_5 {top: 46%;right: 30.7%; animation-delay: 1.4s}
#main_visual .icon_6 {top: 28%;right: 37%;width: 2.1%; animation-delay: 1.5s}

#main_visual .text {position: relative; z-index: 3;}
#main_visual .text span { background: #ffffff38; display: inline-flex; padding: 10px 16px; border-radius: 40px; margin: 0 0 20px 0; }
#main_visual .text h2 { font-size: 59px; }
#main_visual .text h3 {font-size: 31px;font-family: pre_L;}
#main_visual .text .btn_wrap { display: flex; gap: 12px; justify-content: center; margin: 40px 0 0 0; }
#main_visual .text .btn_wrap a:hover {box-shadow: rgba(0, 0, 0, 0.3) 0px 7px 29px 0px;}


#main_visual .scroll_indicator {position: absolute;bottom: -50PX;left: 50%;transform: translateX(-50%);display: flex;flex-direction: column;align-items: center;gap: 10px;width: 231px;height: 160px;background-color: #0048c5;border-radius: 100%;padding: 74px 0 0 0;}
#main_visual .scroll_text { font-size: 14px; opacity: 0.8; }
#main_visual .scroll_arrow { width: 30px; height: 30px; border: 2px solid white; border-radius: 50%; display: flex; align-items: center; justify-content: center; animation: bounce 2s infinite; }
#main_visual .scroll_arrow::after { content: '↓'; font-size: 16px; }


@keyframes bounce { 0%,20%,50%,80%,100% { transform: translateY(0); } 40% { transform: translateY(-10px); } 60% { transform:translateY(-5px); } }
@media (max-width: 768px) { .header { padding: 15px 20px; } .nav-menu { display: none; } .hero-title { font-size: 2.5rem; } .hero-subtitle { font-size: 1.2rem; } .content h2 { font-size: 2rem; } }


/* 지금, 이런 고민 있으신가요? */
#section_1 {padding: 50px 0;height: 670px;}
#section_1 .bubble_wrap {position: relative; width: 900px;margin: 0 auto;}
#section_1 .bubble {position: absolute;background-color: #fff;padding: 30px 50px;border-radius: 14px;position: absolute;box-shadow: rgba(183, 209, 255, 0.7) 0px 7px 29px 0px;display: inline-block;}
#section_1 .bubble:after {border-top: 40px solid #fff;border-left: 30px solid transparent;border-right: 10px solid transparent;border-bottom: 0px solid transparent;content: '';position: absolute;bottom: -28px;left: 60px;transform: rotate(-15deg);}
#section_1 .bubble p {font-family: 'pre_SB';font-size: 20px; display: flex; align-items: center; }
#section_1 .bubble p img {width: 30px; height: 30px; margin:0 10px 0 0;}
#section_1 .bubble p span{  color: var(--main-color); font-family: 'pre_SB';}
#section_1 .bubble_1 {top: 0; left: 0;}
#section_1 .bubble_2 {top:67px;right: 0;z-index: 3; animation-delay: 0.2s;}
#section_1 .bubble_3 {top: 160px;left: 112px;z-index: 2; animation-delay: 0.4s;}
#section_1 .bubble_2::after {  left: auto; right: 20px;
    border-top: 40px solid #fff;  border-left: 0px solid transparent;  border-right: 50px solid transparent;  border-bottom: 0px solid transparent;  transform: rotate(-5deg);
}


#section_2 .box_wrap { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 2vw; }
#section_2 .box_wrap .box { display: flex; align-items: center; justify-content: center; padding: 43px 30px; }
#section_2 .box_wrap .box img { height: 58px; }
#section_2 .box_wrap .box p {font-size: 22px;margin: 0 0 0 20px;}
#section_2 .box_wrap .box p span { font-family: var(--font-SB); }
#section_2 .box_wrap .box1 {background-color: #fff;}
#section_2 .box_wrap .box2 {background-color: #6799FF; animation-delay: 0.2s}
#section_2 .box_wrap .box3 {background-color: #3B3B3B; animation-delay: 0.4s}
#section_2 .box_wrap .box2 p,
#section_2 .box_wrap .box2 p span,
#section_2 .box_wrap .box3 p,
#section_2 .box_wrap .box3 p span {color: #fff}


#section_3 .box_wrap {display: flex;align-items: center;justify-content: center;}
#section_3 .box_wrap img:nth-of-type(1) { margin: 0 30px 0 0; }
#section_3 .box_wrap img:nth-of-type(3) { width: 210px; }
#section_3 .box_wrap img:nth-of-type(5) { margin: 0 0 0 30px; }

#section_3 .box_wrap img { opacity: 0; transform: translateY(20px);}
#section_3 .box_wrap img.show {animation: fadeInUp 1s ease forwards;}

#section_3 .box_wrap img:nth-child(1) { animation-delay: 0s; }
#section_3 .box_wrap img:nth-child(2) { animation-delay: 0.3s; }
#section_3 .box_wrap img:nth-child(3) { animation-delay: 0.6s; }
#section_3 .box_wrap img:nth-child(4) { animation-delay: 0.9s; }
#section_3 .box_wrap img:nth-child(5) { animation-delay: 1.2s; }

@keyframes fadeInUp {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}


#section_4 .box_wrap {display: grid;grid-template-columns: 1fr 1fr 1fr 1fr;gap: 2vw;}
#section_4 .box_wrap .box {background: #fff;display: block;padding: 30px 40px;display: flex;flex-direction: column;justify-content: center;align-items: center;}
#section_4 .box_wrap .box img {height: 80px;}
#section_4 .box_wrap .box p {font-size: 20px;text-align: center;margin: 20px 0 0 0;font-family: var(--font-SB);}
#section_4 .box_wrap .box:nth-child(1) { animation-delay: 0s; }
#section_4 .box_wrap .box:nth-child(2) { animation-delay: 0.2s; }
#section_4 .box_wrap .box:nth-child(3) { animation-delay: 0.4s; }
#section_4 .box_wrap .box:nth-child(4) { animation-delay: 0.6s; }



#section_5 .text {width: 40%;}
#section_5 .image {width: 60%; }
#section_5 .swiper-slide img {width: 100%; display: block; box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px;}
#section_5 .phone {position: absolute;top: -13px;left: 211px;z-index: 5;width: 300px;}
#section_5 .swiper {padding: 40px 4px;}

#section_6 .image {position: relative;}
#section_6 .img2 {position: absolute;top: 12%;left: 47%;z-index: inherit; animation-delay: 0.3s;}

#section_7 .image {position: relative; display: flex; justify-content: center;}
#section_7 .image .animation {position: absolute;left: 26.8%;}
#section_7 .image .img2 {top: 15%; animation-delay: 0.3s;}
#section_7 .image .img3 {top: 66%; animation-delay: 0.6s;}

#section_8 .image {position: relative;  display: flex; justify-content: center;}
#section_8 .image .animation {position: absolute;left: 6.5%;}
#section_8 .image .img2 {top: 15%; animation-delay: 0.3s;}
#section_8 .image .img3 {top: 52.8%; animation-delay: 0.6s;}
#section_8 .image .img4 {top: 79%; animation-delay: 0.9s;}


#section_9 .box_wrap { display: flex; justify-content: space-between; align-items: center; }
#section_9 .box { background: #fff; padding: 35px 10px; width: 20%; height: 300px; display: flex; flex-direction: column; justify-content: start; text-align: center; position: relative; }
#section_9 .box span { display: inline-flex; width: 90px; background: var(--main-color); color: #fff; height: 31px; border-radius: 5px; align-items: center; justify-content: center; position: absolute; top: -10px; left: 50%; transform: translateX(-50%); }
#section_9 .box img { height: 70px; width: auto; margin: 20px auto; }
#section_9 .box .name { font-size: 20px; font-family: var(--font-B); margin: 0 0 14px 0; }
#section_9 .box a { color: var(--main-color); margin: 13px 0 0 0; font-size: 14px; font-family: var(--font-M); }
#section_9 .box_wrap .box:nth-of-type(3) {animation-delay: 0.2s}
#section_9 .box_wrap .box:nth-of-type(5) {animation-delay: 0.4s}
#section_9 .box_wrap .box:nth-of-type(7) {animation-delay: 0.6s}


#section_10 { background: #1d1d1d; position: relative; overflow-x: hidden}
#section_10 .inner { width: 640px; }
#section_10 .back { position: absolute; top: 0; left: 50%; transform: translateX(-50%); height: 100%; animation-delay: 0.4s;}
#section_10 .subtitle h4 { color: var(--point-color-1); }
#section_10 .subtitle h3 { color: #fff; }
#section_10 h5 { color: #fff; text-align: center; font-size: 28px; margin: -20px 0 0 0; }
#section_10 h5 span {color: var(--point-color-1);font-family: var(--font-B);}
#section_10 .box_wrap { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; margin: 60px 0 0 0; }
#section_10 .box { background: #fff; display: flex; flex-direction: column; justify-content: center; padding: 22px; align-items: center; }
#section_10 .box img { width: 80px; margin: 0 0 11px 0; }
#section_10 .box p {font-size: 20px;font-family: var(--font-SB);}


#section_11 .inner {  width: 800px;}
#section_11 .box { background: #fff;  padding: 25px 30px;  display: flex;  align-items: start;  margin: 20px 0;}
#section_11 .box img { width: 30px; margin: 0 20px 0 0;}
#section_11 .box p {font-size: 20px;}
#section_11 .box p span { font-family: var(--font-B);}



#section_12 .inner { padding: 100px 0 400px 0; }
#section_12 .box_wrap { position: relative; }
#section_12 .box { display: inline-flex; padding: 30px 50px; position: absolute; background: #fff; }
#section_12 .box:nth-of-type(1) { top: 20px; left: 0; }
#section_12 .box:nth-of-type(2) { top: 70px; left: 50%; transform: translateX(-50%); z-index: 2;animation-delay: 0.4s }
#section_12 .box:nth-of-type(3) { top: -30px; right: 0;animation-delay: 0.2s }
#section_12 .box img { width: 100px; height: 100px; margin: 0 20px 0 0; }
#section_12 .box .text .title { font-size: 20px; margin: 0 0 10px 0; font-family: var(--font-B); }
#section_12 .box .text p { color: #333; }
#section_12 .box .text .name { margin: 20px 0 0 0; color: #777; font-family: var(--font-L); }
#section_12 .box .text .name span { color: #FF8000; margin: 0 5px 0 14px; }
#section_12 .box .text .name br {display: none;}



#section_13 .inner { width: 800px;}
#section_13 .faq_item {background: #fff;margin: 0 0 20px 0;border-radius: 10px;}
#section_13 .faq_question {width: 100%;background: none;border: none;text-align: left;padding: 20px 30px;cursor: pointer;display: flex;align-items: center;justify-content: space-between;}
#section_13 .faq_question img {
    width: 15px;
}
#section_13 .faq_question p {font-size: 20px;font-family: var(--font-M); transition: none; color: #000;}
#section_13 .faq_question span { font-family: var(--font-B); color: var(--main-color);  margin: 0 20px 0 0;  font-size: 22px;}
#section_13 .faq_answer {padding: 20px 20px 20px 64px;font-size: 18px;color: #444;display: none;border-top: 1px solid #ddd;}
#section_13 .faq_item.active .faq_answer { display: block; }
#section_13 .faq_item.active .faq_question p {color: var(--main-color); }
#section_13 .faq_item.active .faq_question img {transform: rotate(180deg)}



#section_14 { position: relative; display: flex; align-items: center; justify-content: center;  width: 100%; overflow-x: hidden;}
#section_14 img { width: 100%; display: block; }
#section_14 .inner { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: auto; text-align: center; }
#section_14 .inner p { color: #fff; font-size: 30px; line-height: 1.5; font-family: var(--font-SB); }
#section_14 .call { display: flex; background: #ffffff21; width: 220px; margin: 30px auto 0; border-radius: 90px; border: 1px solid #fff; padding: 20px 34px; justify-content: space-between; }
#section_14 .call img { width: 40px; }
#section_14 .call .text p { font-size: 20px; }


#footer {background: #F6F6F6;}
#footer .inner {padding: 50px 0 20px 0;}
#footer .logo {font-size: 24px;font-family: var(--font-SB);margin: 0 0 20px 0;}
#footer .wrap {display: flex;justify-content: space-between;}
#footer .left p {display: flex;font-family: var(--font-L);font-size: 14px;margin: 0 0 4px 0;}
#footer .left p span {font-family: var(--font-M);display: block;width: 150px;}
#footer .right {display: flex;flex-direction: column;align-items: flex-end;}
#footer .btn_wrap a {margin: 0 0 0 20px;font-family: var(--font-M);font-size: 15px;}
#footer .sns_wrap {display: flex;gap: 10px;margin: 20px 0 0 0;}
#footer .copyright {margin: 30px 0 0 0;border-top: 1px solid #ddd;padding: 20px 0 0 0;text-align: center;font-size: 14px;color: #82A1D6;}


.fixed_menu {position: fixed; bottom: 50px; right: 50px; z-index: 5}
.fixed_menu a {background-color: #345fe8; width: 70px; height: 70px; display: flex; align-items: center; justify-content: center; border-radius: 10px; box-shadow: rgba(149, 157, 165, 0.4) 0px 8px 24px;}
.fixed_menu a.top {background-color: #fff; margin: 0 0 14px 0;}
.fixed_menu * {transition: none;}
.fixed_menu .chat-fix,
.fixed_menu #chatButton,
.fixed_menu #consult-chat-floatting-plugin {position: inherit !important;  bottom: auto;  right: auto; width: 100%; height: 100%;}
.fixed_menu .chat-open,
.fixed_menu .chat-close {box-shadow: none;     width: 70px; height: 70px; border-radius: 10px; background-color: #345fe8;}
.fixed_menu .chat-close img {filter: brightness(10)}
.fixed_menu #consult-chat-iframe-plugin {bottom: 135px !important; right: 50px !important;}