@charset "utf-8";

@import url("font.css");

:root {
  --primary-color: #6988FF;
  --primary-black-color: #212222;
}

/* Animation */
@keyframes marquee {
  from {transform: translateX(0);}
  to {transform: translateX(-50%);}
}

@keyframes float {
  from {transform: translateY(0);}
  to {transform: translateY(-15px);}
}

* {margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent;}
html {scroll-behavior: smooth;}
html, body {width: 100%; height: 100%; font-family: 'Pretendard', sans-serif;}
body.isModalOpen {overflow: hidden;}
a {text-decoration: none;}
ul, ol {list-style: none;}

br:where(.tablet, .mobile) {display: none;}
br.pc {display: inline;}

.hidden {opacity: 0; pointer-events: none;}
.fadeUp {opacity: 0; transform: translateY(80px); visibility: hidden; transition: 0.6s; will-change: opacity, transform;}
.fadeIn {opacity: 0; visibility: hidden; transition: 0.6s; will-change: opacity;}
.swiper-slide-active .fadeUp {opacity: 1; transform: translateY(0); visibility: visible;}
.swiper-slide-active .fadeIn {opacity: 1; visibility: visible;}

/* 모달 공통 */
.modal {position: fixed; width: 100%; height: 100%; top: 0; left: 0; display: none; align-items: center; justify-content: center; z-index: 110;}
.modal.isOpen {display: flex;}
.modal_overlay {position: absolute; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.4);}
.modal_dialog {display: flex; flex-direction: column; width: 100%; max-width: 420px; background-color: #fff; box-shadow: 2px 5px 10px 0px rgba(0, 0, 0, 0.35); z-index: 1; max-height: 90vh; border-radius: 4px;}
.modal_close {all: unset; display: inline-block; width: 50px; height: 50px; min-width: 50px; min-height: 50px; background: url(../image/modal/close.svg) no-repeat center; cursor: pointer; margin-left: auto;}
.modal_content {display: flex; flex-direction: column; padding: 0 20px 20px; overflow-y: auto;}

/* LAYOUT 공통 */
.container {display: flex; flex-direction: column; padding-top: 80px;}
.container > main {display: flex; flex-direction: column;}
.container > main > section {display: flex; justify-content: center; overflow: hidden;}
.container > main > section .inner {display: flex; width: 100%; max-width: 1196px;}

/* header */
.header_wrap {display: flex; flex-direction: column; border-bottom: 1px solid #F0F1F4; background-color: #fff; position: fixed; top: 0; left: 0; width: 100%; z-index: 100;}
header {display: flex; justify-content: center; width: 100%; height: 80px;}
header > div {display: flex; align-items: center; width: 100%; height: 100%; max-width: 1196px;}
header > div > * {position: relative; top: 6px;}

header .gnb {display: flex; align-items: center; flex: 1; padding-left: 70px;}
header .gnb > li > a {display: flex; align-items: center; padding: 12px 30px; position: relative; font-size: 16px; font-weight: 500; color: var(--primary-black-color);}
header .gnb > li > a::before {content: ''; display: none; width: calc(100% - 48px); height: 1px; background-color: var(--primary-color); position: absolute; bottom: -12.5px; left: 50%; transform: translateX(-50%);}
header .gnb > li > a::after {content: ''; display: block; position: relative; width: 14px; height: 14px; min-width: 14px; background: url(../image/header/gnb_arrow.svg) no-repeat center; margin-left: 2px;}
header .gnb > li > a:hover {color: var(--primary-color);}
header .gnb > li > a:hover::before {display: block;}
header .gnb > li > a:hover::after {filter: brightness(0) saturate(100%) invert(62%) sepia(84%) saturate(4165%) hue-rotate(208deg) brightness(103%) contrast(100%);}

header .etc {display: flex; align-items: center;}
header .etc > li + li {margin-left: 8px;}
header .etc > li:nth-of-type(1) > a {display: flex; align-items: center; padding: 6px 12px; border-radius: 21px; background: linear-gradient(#fff, #fff) padding-box, linear-gradient(to right, #67CBFF, #8B71FF) border-box; color: var(--primary-color); font-size: 16px; font-weight: 500; border: 1px solid transparent; letter-spacing: -0.16px;}
header .etc > li:nth-of-type(1) > a > i {display: inline-block; width: 14px; height: 14px; min-width: 14px; background: url(../image/header/gnb_call.svg) no-repeat center / cover; margin-right: 3px;}
header .etc > li:nth-of-type(2) > a {display: flex; align-items: center; padding: 6px 24px; border-radius: 21px; background: linear-gradient(to right, #67CBFF, #8B71FF); color: #fff; font-size: 16px; font-weight: 600;}

header .mobile_menu {display: none;}
header .mobile_menu .menu_btn {width: 30px; height: 30px; min-width: 30px; background: url(../image/header/menu.svg) no-repeat center; border: none;}
header .mobile_menu .menu_close {width: 30px; height: 30px; min-width: 30px; background: url(../image/header/menu_close.svg) no-repeat center; border: none; display: none;}

/* header_menu */
.gnb_section_pc {display: none; flex-direction: column;}
.gnb_section_pc > section {display: none; justify-content: center;}
.gnb_section_pc > section > div {display: flex; width: 100%; max-width: 1196px; padding: 20px 4px 40px;}
.gnb_section_pc .lnb {display: flex; flex-direction: column; width: 240px; min-width: 240px;}
.gnb_section_pc .lnb > ul {display: flex; flex-direction: column;}
.gnb_section_pc .lnb > ul > li + li {margin-top: 2px;}
.gnb_section_pc .lnb > ul > li > a {display: flex; align-items: center; height: 36px; min-height: 36px; padding: 0 8px; border-radius: 5px; font-size: 16px; font-weight: 500; color: var(--primary-black-color);}
.gnb_section_pc .lnb > ul > li > a:hover {color: var(--primary-color); background-color: #f3f7ff;}
.gnb_section_pc .lnb > div {padding-top: 30px;}
.gnb_section_pc .lnb > div > a {display: flex; align-items: center; justify-content: center; max-width: 210px; height: 42px; min-height: 42px; color: #fff; font-size: 15px; font-weight: 500; background-image: linear-gradient(to right, #67CBFF, #8B71FF); border-radius: 6px;}
.gnb_section_pc .snb {display: flex; flex: 1; padding: 10px 0 10px 64px;}
.gnb_section_pc .snb > ul {display: flex; flex-direction: column;}
.gnb_section_pc .snb > ul > li {display: none; flex-direction: column;}
.gnb_section_pc .snb > ul > li > p {font-size: 14px; font-weight: 500; color: #838588; padding: 0 10px;}
.gnb_section_pc .snb > ul > li > ul {padding-top: 16px; display: flex; flex-wrap: wrap; gap: 6px 20px;}
.gnb_section_pc .snb > ul > li > ul > li {display: flex; min-width: 350px; max-width: 350px;}
.gnb_section_pc .snb > ul > li > ul > li > a {display: flex; align-items: center; padding: 10px; border-radius: 9px; width: 100%;}
.gnb_section_pc .snb > ul > li > ul > li > a:hover {background-color: #f3f7ff;}
.gnb_section_pc .snb > ul > li > ul > li > a > span {display: flex; align-items: center; justify-content: center; width: 46px; height: 46px; min-width: 46px; border-radius: 8px; border: 1px solid #EDEFF0;}
.gnb_section_pc .snb > ul > li > ul > li > a:hover > span {border-color: transparent;}
.gnb_section_pc .snb > ul > li > ul > li > a > span > i {display: inline-block; width: 30px; height: 30px;}
.gnb_section_pc .snb > ul > li > ul > li > a > span > i.mail {background: url(../image/header/mail.svg) no-repeat center / cover;} /* 메일 */
.gnb_section_pc .snb > ul > li > ul > li > a > span > i.mail_app {background: url(../image/header/mail_app.svg) no-repeat center / cover;} /* 메일 앱 */
.gnb_section_pc .snb > ul > li > ul > li > a > span > i.address {background: url(../image/header/address.svg) no-repeat center / cover;} /* 주소록 */
.gnb_section_pc .snb > ul > li > ul > li > a > span > i.calendar {background: url(../image/header/calendar.svg) no-repeat center / cover;} /* 캘린더 */
.gnb_section_pc .snb > ul > li > ul > li > a > span > i.board {background: url(../image/header/board.svg) no-repeat center / cover;} /* 게시판 */
.gnb_section_pc .snb > ul > li > ul > li > a > span > i.drive {background: url(../image/header/drive.svg) no-repeat center / cover;} /* 드라이브 */
.gnb_section_pc .snb > ul > li > ul > li > a > div {display: flex; flex-direction: column; padding-left: 10px;}
.gnb_section_pc .snb > ul > li > ul > li > a > div > p {font-size: 16px; font-weight: 500; color: var(--primary-black-color);}
.gnb_section_pc .snb > ul > li > ul > li > a:hover > div > p {color: var(--primary-color); font-weight: 600;}
.gnb_section_pc .snb > ul > li > ul > li > a > div > span {font-size: 14px; font-weight: 500; color: #71767a; letter-spacing: -0.42px;}
.gnb_section_pc .snb > ul > li > ul > li > a > div > p + span {margin-top: 6px;}
.gnb_section_pc > footer {background-color: #FAFBFD; border-top: 1px solid #EDF1F8; width: 100%; height: 42px; display: flex; align-items: center; justify-content: center;}
.gnb_section_pc > footer > ul {display: flex; align-items: center; width: 100%; max-width: 1196px;}
.gnb_section_pc > footer > ul > li {position: relative; display: flex; align-items: center;}
.gnb_section_pc > footer > ul > li::before {content: ''; display: none; position: relative; width: 1px; height: 11px; background-color: #E9EDF5; margin: 0 15px;}
.gnb_section_pc > footer > ul > li + li::before {display: block;}
.gnb_section_pc > footer > ul > li > a {font-size: 13px; font-weight: 400; color: #838588;}

.gnb_section_mobile {display: none; flex-direction: column; background-color: #fff; position: fixed; top: 81px; left: 0; width: 100%; height: calc(100% - 81px); overflow-y: auto;}
.gnb_section_mobile > ul {display: flex; flex-direction: column;}
.gnb_section_mobile > ul > li {margin: 0 20px; border-bottom: 1px solid #EDEEF0;}
.gnb_section_mobile > ul > li > a {display: flex; align-items: center; justify-content: space-between; height: 54px; min-height: 54px; font-size: 16px; font-weight: 700; color: var(--primary-black-color); white-space: nowrap; position: relative;}
.gnb_section_mobile > ul > li > a::after {content: ''; display: none; position: relative; width: 30px; height: 30px; min-width: 30px; background: url(../image/header/gnb_arrow_mobile.svg) no-repeat center;}
.gnb_section_mobile > ul > li > a.toggle::after {display: block;}
.gnb_section_mobile > ul > li > a.spread::after {transform: rotate(180deg);}
.gnb_section_mobile > ul > li > ul {display: none; flex-direction: column;}
.gnb_section_mobile > ul > li > ul > li {display: flex; flex-direction: column; padding-bottom: 12px;}
.gnb_section_mobile > ul > li > ul > li > p {font-size: 13px; color: #71767A; padding: 10px 0;}
.gnb_section_mobile > ul > li > ul > li > a {display: flex; align-items: center; height: 48px; min-height: 48px;}
.gnb_section_mobile > ul > li > ul > li > a > span {display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; min-width: 26px; border: 1px solid #EDEFF0; border-radius: 4px;}
.gnb_section_mobile > ul > li > ul > li > a > span > i {display: inline-block; width: 18px; height: 18px;}
.gnb_section_mobile > ul > li > ul > li > a > span > i.mail {background: url(../image/header/mail.svg) no-repeat center / cover;} /* 메일 */
.gnb_section_mobile > ul > li > ul > li > a > span > i.mail_app {background: url(../image/header/mail_app.svg) no-repeat center / cover;} /* 메일 앱 */
.gnb_section_mobile > ul > li > ul > li > a > span > i.address {background: url(../image/header/address.svg) no-repeat center / cover;} /* 주소록 */
.gnb_section_mobile > ul > li > ul > li > a > span > i.calendar {background: url(../image/header/calendar.svg) no-repeat center / cover;} /* 캘린더 */
.gnb_section_mobile > ul > li > ul > li > a > span > i.board {background: url(../image/header/board.svg) no-repeat center / cover;} /* 게시판 */
.gnb_section_mobile > ul > li > ul > li > a > span > i.drive {background: url(../image/header/drive.svg) no-repeat center / cover;} /* 드라이브 */
.gnb_section_mobile > ul > li > ul > li > a > p {font-size: 16px; color: var(--primary-black-color); font-weight: 400; padding-left: 10px;}
.gnb_section_mobile > div {display: flex; flex-direction: column; padding: 40px 20px;}
.gnb_section_mobile > div > a {display: flex; align-items: center; justify-content: center; flex: 1; height: 50px; min-height: 50px; border-radius: 6px; font-size: 16px; font-weight: 600;}
.gnb_section_mobile > div > a:nth-of-type(1) {background: linear-gradient(90deg, #67CBFF, #8B71FF); color: #fff;}
.gnb_section_mobile > div > a:nth-of-type(2) {background-color: #fff; border: 1px solid #71767a; color: var(--primary-black-color);}
.gnb_section_mobile > div > a + a {margin-top: 14px;}

/* footer */
footer {display: flex; justify-content: center; background-color: #27292C; width: 100%; position: relative;}
footer .break {display: none; flex-basis: 100%;}
footer > div {display: flex; flex-direction: column; width: 100%; max-width: 1196px; padding: 70px 0 120px;}
footer > div > div + div {border-top: 1px solid #4A4E53;}
.footer_info {display: flex; justify-content: space-between; align-items: flex-end; padding-bottom: 32px;}
.footer_info > div:nth-of-type(1) {display: flex; flex-direction: column;}
.footer_info > div:nth-of-type(1) > div {display: flex; flex-direction: column; padding-top: 38px;}
.footer_info > div:nth-of-type(1) > div > div {display: flex; align-items: center; flex-wrap: wrap; gap: 6px 0;}
.footer_info > div:nth-of-type(1) > div > div + div {padding-top: 6px;}
.footer_info > div:nth-of-type(1) > div > div > p {font-size: 14px; font-weight: 500; color: #B9BEC7; letter-spacing: -0.28px; position: relative; display: inline-flex; align-items: center;}
.footer_info > div:nth-of-type(1) > div > div > p::after {content: ''; display: block; position: relative; width: 1px; height: 16px; background-color: #4A4E53; margin: 0 12px;}
.footer_info > div:nth-of-type(1) > div > div > p:last-of-type::after {display: none;}
.footer_info > div:nth-of-type(2) {display: flex; align-items: center;}
.footer_info > div:nth-of-type(2) > div {display: flex; flex-direction: column; border-radius: 8px; background-color: #34373B; padding: 17px 20px 12px; min-width: 160px;}
.footer_info > div:nth-of-type(2) > div + div {margin-left: 12px;}
.footer_info > div:nth-of-type(2) > div > p {font-size: 14px; font-weight: 500; letter-spacing: -0.28px; color: #B9BEC7;}
.footer_info > div:nth-of-type(2) > div > span {font-size: 19px; font-weight: 500; letter-spacing: -0.38px; color: #869fff; padding-top: 6px;}
.footer_link {display: flex; align-items: flex-end; justify-content: space-between; padding-top: 25px;}
.footer_link > div {display: flex; align-items: center;}
.footer_link .copyright > p {font-size: 14px; font-weight: 500; color: #B9BEC7; letter-spacing: -0.28px; position: relative; display: inline-flex; align-items: center;}
.footer_link .sitemap > a {font-size: 14px; font-weight: 500; letter-spacing: -0.28px; color: #B9BEC7; margin-right: 20px;}
.footer_link .sitemap > a > b {font-weight: 600; color: #fff;}
.footer_link .channel > a {display: inline-block; width: 22px; height: 22px; min-width: 22px;}
.footer_link .channel > a + a {margin-left: 20px;}
.footer_link .channel > a.blog {background: url(../image/footer/blog.svg) no-repeat center / cover;}
.footer_link .channel > a.facebook {background: url(../image/footer/facebook.svg) no-repeat center / cover;}
.footer_link .channel > a.kakao {background: url(../image/footer/kakao.svg) no-repeat center / cover;}

footer .scroll_top {position: absolute; top: -94px; right: 64px; display: inline-flex; align-items: center; justify-content: center; width: 58px; height: 58px; z-index: 99; border-radius: 50%; border: 2px solid #fff; background-color: rgba(0, 0, 0, 0.6); cursor: pointer; box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2);}
footer .scroll_top::after {content: ''; display: block; position: relative; width: 32px; height: 32px; background: url(../image/footer/arrow_top.svg) no-repeat center / cover;}

/* MAIN_VISUAL */
.container > main .visual {background-color: #fff;}
.container > main .visual > .outer {display: flex; flex-direction: column; align-items: center; max-width: 1440px; width: 100%; padding: 65px 0 134px; position: relative; z-index: 9;}
.container > main .visual > .outer::before {content: ''; display: block; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); width: 100%; height: 100%; background: url(../image/main/visual_gradient.png) no-repeat center / cover; z-index: -2;}
.container > main .visual > .outer > .inner {flex-direction: column; z-index: 10;}
.container > main .visual > .outer > .inner > .eyebrow {font-size: 62px; font-weight: 600; letter-spacing: -1.86px; color: var(--primary-black-color); text-align: center; line-height: 68px; padding-top: 0;}
.container > main .visual > .outer > .inner > h1 {font-size: 58px; font-weight: 300; letter-spacing: -1.74px; color: var(--primary-black-color); text-align: center; line-height: 68px; padding-top: 6px;}
.container > main .visual > .outer > .inner > p {font-size: 24px; font-weight: 300; letter-spacing: -0.72px; line-height: 34px; color: var(--primary-black-color); text-align: center; padding-top: 15px;}
.container > main .visual > .outer > .inner > div {display: flex; align-items: center; justify-content: center; padding: 40px 0 54px;}
.container > main .visual > .outer > .inner > div > a {display: flex; align-items: center; justify-content: center; width: 168px; height: 48px; border: 1px solid var(--primary-black-color); border-radius: 6px; font-size: 18px; font-weight: 500;}
.container > main .visual > .outer > .inner > div > a:nth-of-type(1) {background-color: var(--primary-black-color); color: #fff;}
.container > main .visual > .outer > .inner > div > a:nth-of-type(2) {background-color: #fff; color: var(--primary-black-color);}
.container > main .visual > .outer > .inner > div > a + a {margin-left: 12px;}
.container > main .visual > .outer > .visual_wrap {position: relative; width: 100%; max-width: 1196px;}
.container > main .visual > .outer > .visual_wrap::after {content: ''; display: block; position: absolute; top: -200px; left: 50%; transform: translateX(-50%); width: 110%; height: 627px; background: url(../image/main/visual_object.svg) no-repeat center / contain; z-index: -1;}
.container > main .visual > .outer > .visual_wrap .swiper-slide {display: flex; justify-content: center;}
.container > main .visual > .outer > .visual_wrap img {pointer-events: none; user-select: none;}
.container > main .visual > .outer > .visual_wrap .visual_pc {display: inline-block; height: 610px;}
.container > main .visual > .outer > .visual_wrap .visual_mobile {display: inline-block; position: absolute; right: 50px; bottom: -10px; z-index: 10;}
.container > main .visual > .outer > .visual_wrap .visual_float {display: inline-block; position: absolute;}
.container > main .visual > .outer > .visual_wrap .visual_float.bot {left: 0; bottom: 100px; z-index: 11;}
.container > main .visual > .outer > .visual_wrap .visual_float.bot img {animation: float 1s linear infinite alternate; width: 11vw; max-width: 180px;}
.container > main .visual > .outer > .visual_wrap .visual_float.alarm1 {left: 680px; bottom: 270px; z-index: 11;}
.container > main .visual > .outer > .visual_wrap .visual_float.alarm2 {left: 680px; bottom: 175px; z-index: 11;}
.container > main .visual > .outer > .visual_wrap .visual_float.layer1 {top: 50%; left: 50%; transform: translate(-50%, -50%);}
.container > main .visual > .outer > .visual_wrap .visual_float.layer2 {right: 130px; bottom: 65px;}
.container > main .visual > .outer > .visual_wrap .visual_float.layer3 {top: 50%; left: calc(50% + 20px); transform: translate(-50%, -50%);}
.container > main .visual > .outer > .visual_wrap .visual_float.layer4 {right: 362px; top: 120px;}
.container > main .visual > .outer > .visual_wrap .swiper-slide-active .visual_float.alarm1 {transition-delay: 0.4s;}
.container > main .visual > .outer > .visual_wrap .swiper-slide-active .visual_float.alarm2 {transition-delay: 0.6s;}
.container > main .visual > .outer > .visual_wrap .swiper-slide-active .visual_float.layer1 {transition-delay: 0.4s;}
.container > main .visual > .outer > .visual_wrap .swiper-slide-active .visual_float.layer2 {transition-delay: 0.4s;}
.container > main .visual > .outer > .visual_wrap .swiper-slide-active .visual_float.layer3 {transition-delay: 0.4s;}
.container > main .visual > .outer > .visual_wrap .swiper-slide-active .visual_float.layer4 {transition-delay: 0.4s;}

/* MAIN_POINT */
.container > main .point {background-color: #F5F7FD; flex-direction: column; justify-content: flex-start; align-items: center; padding-bottom: 86px;}
.container > main .point > .inner {padding: 98px 0 60px; flex-direction: column;}
.container > main .point > .inner > p {font-size: 26px; font-weight: 500; letter-spacing: -0.78px; color: var(--primary-color); line-height: 30px;}
.container > main .point > .inner > h2 {font-size: 46px; font-weight: 500; letter-spacing: -1.38px; line-height: 62px; color: var(--primary-black-color); padding-top: 22px;}
.container > main .point > .inner > div {display: flex; align-items: center; justify-content: space-between; padding-top: 50px;}
.container > main .point > .inner > div > div {display: flex; align-items: center;}
.container > main .point > .inner > div > div > a {display: flex; align-items: center; padding: 0 38px; height: 46px; font-size: 22px; font-weight: 400; letter-spacing: -0.66px; color: #4F5050; border-radius: 23px;}
.container > main .point > .inner > div > div > a + a {margin-left: 36px;}
.container > main .point > .inner > div > div > a.on {background: linear-gradient(to right, #67CBFF, #8B71FF); color: #fff;}
.container > main .point .point_wrap {display: flex; align-items: center; justify-content: center; width: 100%; max-width: 1196px;}
.container > main .point .point_wrap .swiper {margin: 0; overflow: visible; width: 100%;}
.container > main .point .point_wrap .swiper-wrapper {display: flex; align-items: center;}
.container > main .point .point_wrap .swiper-slide {display: flex; align-items: flex-start; padding: 15px 44px; background-color: #fff; border-radius: 30px;}
.container > main .point .point_wrap .swiper-slide > div {display: flex; flex-direction: column;}
.container > main .point .point_wrap .swiper-slide > div:nth-of-type(1) {padding: 50px 0 0 20px;}
.container > main .point .point_wrap .swiper-slide > div:nth-of-type(2) {align-items: center;}
.container > main .point .point_wrap .swiper-slide > div + div {padding-left: 32px;}
.container > main .point .point_wrap .swiper-slide > div > span {font-size: 20px; font-weight: 500; letter-spacing: -0.6px; color: var(--primary-color); padding-bottom: 20px;}
.container > main .point .point_wrap .swiper-slide > div > h3 {font-size: 42px; font-weight: 500; letter-spacing: -1.32px; color: var(--primary-black-color); line-height: 55px; padding-bottom: 32px; word-break: keep-all;}
.container > main .point .point_wrap .swiper-slide > div > p {font-size: 20px; font-weight: 300; letter-spacing: -0.6px; color: var(--primary-black-color); line-height: 34px; padding-bottom: 32px; word-break: keep-all;}
.container > main .point .point_wrap .swiper-slide > div > a {display: inline-flex; align-items: center; font-size: 20px; font-weight: 300; letter-spacing: -0.6px; color: var(--primary-black-color); position: relative; width: fit-content;}
.container > main .point .point_wrap .swiper-slide > div > a::after {content: ''; display: block; position: relative; width: 26px; height: 20px; background: url(../image/main/common_link_arrow.svg) no-repeat center; margin-left: 12px;}
.container > main .point .point_wrap .swiper-slide > div > img {display: inline-block; height: 100%;}
.container > main .point .point_wrap .swiper-pagination {position: relative; bottom: auto; padding-top: 18px;}
.container > main .point .point_wrap .swiper-pagination .swiper-pagination-bullet {margin: 0 5px; background-color: var(--primary-black-color); opacity: 0.2;}
.container > main .point .point_wrap .swiper-pagination .swiper-pagination-bullet-active {opacity: 1;}

/* MAIN_PREVIEW */
.container > main .preview {background-color: #fff; scroll-margin-top: 80px;}
.container > main .preview > .inner {flex-direction: column; padding: 98px 0 90px;}
.container > main .preview > .inner > p {font-size: 26px; font-weight: 500; letter-spacing: -0.78px; color: var(--primary-color);}
.container > main .preview > .inner > h2 {font-size: 46px; font-weight: 500; letter-spacing: -1.38px; color: var(--primary-black-color); line-height: 62px; padding-top: 22px;}
.container > main .preview .preview_tabs {display: flex; align-items: center; padding-top: 50px;}
.container > main .preview .preview_tabs > a {display: inline-flex; align-items: center; font-size: 22px; font-weight: 400; letter-spacing: -0.66px; padding: 0 38px; height: 46px; border-radius: 23px; color: #4F5050;}
.container > main .preview .preview_tabs > a + a {margin-left: 28px;}
.container > main .preview .preview_tabs > a.on {background: linear-gradient(to right, #67CBFF, #8B71FF); color: #fff;}
.container > main .preview .preview_wrap {padding-top: 62px;}
.container > main .preview .preview_wrap .swiper {margin: 0; width: 100%;}
.container > main .preview .preview_wrap .swiper-wrapper {display: flex; align-items: center;}
.container > main .preview .preview_wrap .swiper-slide {display: grid; gap: 24px;}
.container > main .preview .preview_wrap .swiper-slide.convenience {grid-template-columns: 2fr 1fr 2fr;}
.container > main .preview .preview_wrap .swiper-slide.security {grid-template-columns: 1fr 1fr;}
.container > main .preview .preview_wrap .swiper-slide > li {display: flex; flex-direction: column; border-radius: 30px; height: 520px; overflow: hidden;}
.container > main .preview .preview_wrap .swiper-slide.convenience > li:nth-of-type(1) {background: linear-gradient(180deg, #636876, #BABABA); grid-column: 1 / span 2;}
.container > main .preview .preview_wrap .swiper-slide.convenience > li:nth-of-type(2) {background: linear-gradient(180deg, #93BDFF, #C3E8FF); grid-column: 3 / span 1;}
.container > main .preview .preview_wrap .swiper-slide.convenience > li:nth-of-type(3) {background: linear-gradient(180deg, #B79BFF, #FBD9FF); grid-column: 1 / span 1;}
.container > main .preview .preview_wrap .swiper-slide.convenience > li:nth-of-type(4) {background: linear-gradient(180deg, #8C96FD, #CEEEFF); grid-column: 2 / span 2;}
.container > main .preview .preview_wrap .swiper-slide.convenience > li > div:nth-of-type(1) {padding: 50px 0 60px 50px;}
.container > main .preview .preview_wrap .swiper-slide.convenience > li > div:nth-of-type(2) {position: relative; padding-top: 15px; flex: 1;}
.container > main .preview .preview_wrap .swiper-slide.convenience > li > div > h3 {font-size: 28px; font-weight: 500; letter-spacing: -0.84px; line-height: 40px; color: #fff;}
.container > main .preview .preview_wrap .swiper-slide.convenience > li > div > img {display: inline-block; position: absolute; transition: 0.3s;}
.container > main .preview .preview_wrap .swiper-slide.convenience > li:hover > div > img {transform: scale(1.1);}
.container > main .preview .preview_wrap .swiper-slide.convenience > li:nth-of-type(1) > div > img {right: -40%;}
.container > main .preview .preview_wrap .swiper-slide.convenience > li:nth-of-type(2) > div > img {right: -20%; top: 10%;}
.container > main .preview .preview_wrap .swiper-slide.convenience > li:nth-of-type(3) > div > img {right: -10%; top: 12%;}
.container > main .preview .preview_wrap .swiper-slide.convenience > li:nth-of-type(4) > div > img {right: -48%; top: 20%;}
.container > main .preview .preview_wrap .swiper-slide.security > li:nth-of-type(1) {background: linear-gradient(139deg, #C6E9FF, #DEFFF2 55%); grid-column: 1 / span 2; flex-direction: row; justify-content: space-between;}
.container > main .preview .preview_wrap .swiper-slide.security > li:nth-of-type(2) {background: linear-gradient(325deg, #EBF4FF, #D8D1FF); grid-column: 1 / span 1;}
.container > main .preview .preview_wrap .swiper-slide.security > li:nth-of-type(3) {background: linear-gradient(180deg, #FFEAE5, #EBDEFF); grid-column: 2 / span 1;}
.container > main .preview .preview_wrap .swiper-slide.security > li > div:nth-of-type(1) {padding: 50px; z-index: 1;}
.container > main .preview .preview_wrap .swiper-slide.security > li > div:nth-of-type(2) {position: relative; padding-top: 15px; flex: 1;}
.container > main .preview .preview_wrap .swiper-slide.security > li:nth-of-type(1) > div:nth-of-type(2) {padding-top: initial; display: flex; align-items: flex-end; margin-right: 50px;}
.container > main .preview .preview_wrap .swiper-slide.security > li > div > h3 {font-size: 28px; font-weight: 500; letter-spacing: -0.84px; line-height: 40px; color: var(--primary-black-color);}
.container > main .preview .preview_wrap .swiper-slide.security > li > div > p {font-size: 22px; font-weight: 300; letter-spacing: -0.66px; line-height: 34px; color: var(--primary-black-color); padding-top: 18px;}
.container > main .preview .preview_wrap .swiper-slide.security > li > div > span {font-size: 22px; font-weight: 300; letter-spacing: -0.66px; line-height: 34px; color: var(--primary-black-color); padding-top: 40px; display: inline-block;}
.container > main .preview .preview_wrap .swiper-slide.security > li > div > img {display: inline-block; position: absolute; transition: 0.3s;}
.container > main .preview .preview_wrap .swiper-slide.security > li:hover > div > img {transform: scale(1.1);}
.container > main .preview .preview_wrap .swiper-slide.security > li:nth-of-type(1) > div > img {width: 100%;}
.container > main .preview .preview_wrap .swiper-slide.security > li:nth-of-type(2) > div > img {right: -8%; top: 4%;}
.container > main .preview .preview_wrap .swiper-slide.security > li:nth-of-type(3) > div > img {right: -10%; top: 9%;}

/* MAIN_MERIT */
.container > main .merit {background-color: #fff; flex-direction: column; justify-content: flex-start; align-items: center; padding-bottom: 92px;}
.container > main .merit > .inner {display: flex; align-items: flex-end; justify-content: space-between; padding: 98px 0 60px;}
.container > main .merit > .inner > div {display: flex; flex-direction: column;}
.container > main .merit > .inner > div > p {font-size: 26px; font-weight: 500; letter-spacing: -0.78px; color: var(--primary-color);}
.container > main .merit > .inner > div > h2 {font-size: 46px; font-weight: 500; letter-spacing: -1.38px; line-height: 62px; color: var(--primary-black-color); padding-top: 22px;}
.container > main .merit > .inner > div > div {display: flex; align-items: center;}
.container > main .merit > .inner > div > div > button {display: inline-block; width: 44px; height: 44px; min-width: 44px; border-radius: 50%; cursor: pointer; transition: 0.3s; border: none;}
.container > main .merit > .inner > div > div > button + button {margin-left: 4px;}
.container > main .merit > .inner > div > div > button:disabled {pointer-events: none; opacity: 0.2;}
.container > main .merit > .inner > div > div > button.merit_prev {background: url(../image/main/slide_prev.svg) no-repeat center;}
.container > main .merit > .inner > div > div > button.merit_next {background: url(../image/main/slide_next.svg) no-repeat center;}
.container > main .merit .merit_wrap {display: flex; align-items: center; justify-content: center; width: 100%; max-width: 1196px;}
.container > main .merit .merit_wrap .swiper {margin: 0; overflow: visible; width: 100%;}
.container > main .merit .merit_wrap .swiper-wrapper {display: flex; align-items: center;}
.container > main .merit .merit_wrap .swiper-slide {display: flex; flex-direction: column; padding: 60px 60px 40px; border: 1px solid #d5d5d5; border-radius: 24px; background-color: #fff; box-shadow: 0 0 7px #AFBEFF89;}
.container > main .merit .merit_wrap .swiper-slide > p {font-size: 30px; font-weight: 500; letter-spacing: -0.9px; line-height: 40px; color: var(--primary-black-color);}
.container > main .merit .merit_wrap .swiper-slide > span {font-size: 24px; font-weight: 300; letter-spacing: -0.72px; line-height: 38px; color: var(--primary-black-color); margin-top: 20px;}
.container > main .merit .merit_wrap .swiper-slide > ul {display: flex; align-items: center; padding-top: 36px; margin-top: auto;}
.container > main .merit .merit_wrap .swiper-slide > ul > li {display: flex; flex-direction: column; flex: 1; align-items: center; background-color: #F2F4F8; border-radius: 17px; padding: 38px 24px 25px; height: 274px;}
.container > main .merit .merit_wrap .swiper-slide > ul > li:has(img + img) {flex-direction: row; justify-content: space-between; padding: 38px 50px 25px;}
.container > main .merit .merit_wrap .swiper-slide > ul > li + li {margin-left: 18px;}
.container > main .merit .merit_wrap .swiper-slide > ul > li > p {font-size: 23px; font-weight: 500; letter-spacing: -0.69px; color: var(--primary-black-color); padding-bottom: 20px; text-align: center;}
.container > main .merit .merit_wrap .swiper-slide > ul > li > img {display: inline-block; flex: 1; max-width: 100%;}
.container > main .merit .merit_wrap .swiper-slide > ul > li > img + img {margin-left: 80px;}
.container > main .merit .merit_wrap .swiper-pagination {position: relative; bottom: auto; padding-top: 18px;}
.container > main .merit .merit_wrap .swiper-pagination .swiper-pagination-bullet {margin: 0 5px; background-color: var(--primary-black-color); opacity: 0.2;}
.container > main .merit .merit_wrap .swiper-pagination .swiper-pagination-bullet-active {opacity: 1;}

/* MAIN_FEATURE */
.container > main .feature {background-color: rgba(224, 231, 255, 0.6); flex-direction: column; justify-content: flex-start; align-items: center; padding-bottom: 134px;}
.container > main .feature > .inner {display: flex; flex-direction: column; padding: 98px 0 60px;}
.container > main .feature > .inner > p {font-size: 26px; font-weight: 500; letter-spacing: -0.78px; color: var(--primary-color);}
.container > main .feature > .inner > h2 {font-size: 46px; font-weight: 500; letter-spacing: -1.38px; color: var(--primary-black-color); line-height: 62px; padding-top: 22px;}
.container > main .feature > .inner > div {display: flex; align-items: flex-end; justify-content: space-between; padding-top: 50px;}
.container > main .feature > .inner > div > div {display: flex; align-items: center; flex-wrap: wrap; gap: 10px;}
.container > main .feature > .inner > div > div > a {display: flex; align-items: center; padding: 0 26px; height: 44px; border: 1px solid var(--primary-color); color: var(--primary-color); border-radius: 23px; font-size: 20px; font-weight: 400; letter-spacing: -0.6px; white-space: nowrap;}
.container > main .feature > .inner > div > div > a.on {background-color: var(--primary-color); color: #fff;}
.container > main .feature .feature_wrap {display: flex; align-items: center; justify-content: center; width: 100%; max-width: 1196px;}
.container > main .feature .feature_wrap .swiper {padding: 2px; margin: 0; overflow: visible; width: 100%;}
.container > main .feature .feature_wrap .swiper-wrapper {display: flex; align-items: center;}
.container > main .feature .feature_wrap .swiper-slide {display: grid; padding: 2px; gap: 24px; grid-template-columns: repeat(4, 1fr);}
.container > main .feature .feature_wrap .swiper-slide > div {display: flex; flex-direction: column; padding: 34px 36px 30px; background-color: #fff; border-radius: 24px;}
.container > main .feature .feature_wrap .swiper-slide.swiper-slide-active > div {outline: 2px solid #afbeff; outline-offset: -2px; box-shadow: 0 0 7px #AFBEFF89; border: 1px solid #ECF0FF;}
.container > main .feature .feature_wrap .swiper-slide > div > div:first-of-type {display: flex; align-items: center; justify-content: center; width: 76px; height: 76px; min-width: 76px; border-radius: 6px; background-color: #ECF0FF; margin: 0 2px;}
.container > main .feature .feature_wrap .swiper-slide > div > div:last-of-type {display: flex; align-items: center; justify-content: flex-end; padding-top: 22px;}
.container > main .feature .feature_wrap .swiper-slide > div > div > i {display: inline-block; width: 44px; height: 44px;}
.container > main .feature .feature_wrap .swiper-slide > div > div > i.feature01 {background: url(../image/main/feature_icon1.svg) no-repeat center;}
.container > main .feature .feature_wrap .swiper-slide > div > div > i.feature02 {background: url(../image/main/feature_icon2.svg) no-repeat center;}
.container > main .feature .feature_wrap .swiper-slide > div > div > i.feature03 {background: url(../image/main/feature_icon3.svg) no-repeat center;}
.container > main .feature .feature_wrap .swiper-slide > div > div > i.feature04 {background: url(../image/main/feature_icon4.svg) no-repeat center;}
.container > main .feature .feature_wrap .swiper-slide > div > div > i.feature05 {background: url(../image/main/feature_icon5.svg) no-repeat center;}
.container > main .feature .feature_wrap .swiper-slide > div > div > i.feature06 {background: url(../image/main/feature_icon6.svg) no-repeat center;}
.container > main .feature .feature_wrap .swiper-slide > div > div > i.feature07 {background: url(../image/main/feature_icon7.svg) no-repeat center;}
.container > main .feature .feature_wrap .swiper-slide > div > div > i.feature08 {background: url(../image/main/feature_icon8.svg) no-repeat center;}
.container > main .feature .feature_wrap .swiper-slide > div > div > i.feature09 {background: url(../image/main/feature_icon9.svg) no-repeat center;}
.container > main .feature .feature_wrap .swiper-slide > div > div > i.feature10 {background: url(../image/main/feature_icon10.svg) no-repeat center;}
.container > main .feature .feature_wrap .swiper-slide > div > div > i.feature11 {background: url(../image/main/feature_icon11.svg) no-repeat center;}
.container > main .feature .feature_wrap .swiper-slide > div > div > i.feature12 {background: url(../image/main/feature_icon12.svg) no-repeat center;}
.container > main .feature .feature_wrap .swiper-slide > div > div > i.feature13 {background: url(../image/main/feature_icon13.svg) no-repeat center;}
.container > main .feature .feature_wrap .swiper-slide > div > div > i.feature14 {background: url(../image/main/feature_icon14.svg) no-repeat center;}
.container > main .feature .feature_wrap .swiper-slide > div > div > i.feature15 {background: url(../image/main/feature_icon15.svg) no-repeat center;}
.container > main .feature .feature_wrap .swiper-slide > div > div > i.feature16 {background: url(../image/main/feature_icon16.svg) no-repeat center;}
.container > main .feature .feature_wrap .swiper-slide > div > div > i.feature17 {background: url(../image/main/feature_icon17.svg) no-repeat center;}
.container > main .feature .feature_wrap .swiper-slide > div > div > i.feature18 {background: url(../image/main/feature_icon18.svg) no-repeat center;}
.container > main .feature .feature_wrap .swiper-slide > div > div > i.feature19 {background: url(../image/main/feature_icon19.svg) no-repeat center;}
.container > main .feature .feature_wrap .swiper-slide > div > div > i.feature20 {background: url(../image/main/feature_icon20.svg) no-repeat center;}
.container > main .feature .feature_wrap .swiper-slide > div > div > span {display: flex; align-items: center; height: 20px; padding: 0 12px; border-radius: 15px; background-color: #fff; color: var(--primary-color); font-size: 13px; font-weight: 500; white-space: nowrap; border: 1px solid var(--primary-color);}
.container > main .feature .feature_wrap .swiper-slide.swiper-slide-active > div > div > span {background-color: var(--primary-color); color: #fff;}
.container > main .feature .feature_wrap .swiper-slide > div > p {font-size: 23px; font-weight: 500; letter-spacing: -0.69px; color: var(--primary-black-color); padding-top: 28px;}
.container > main .feature .feature_wrap .swiper-slide > div > span {font-size: 17px; font-weight: 300; letter-spacing: -0.51px; color: var(--primary-black-color); line-height: 26px; margin-top: 16px; word-break: keep-all; flex: 1;}

/* MAIN_REPORT */
.container > main .report {background-image: linear-gradient(to bottom, rgba(250, 250, 252, 0.6) 60%, rgba(222, 237, 255, 0.6), rgba(218, 220, 253, 0.6)); flex-direction: column; justify-content: flex-start; align-items: center; padding-bottom: 92px; scroll-margin-top: 80px;}
.container > main .report > .inner {padding: 98px 0 60px; justify-content: space-between; align-items: flex-end;}
.container > main .report > .inner > div {display: flex; flex-direction: column;}
.container > main .report > .inner > div > p {font-size: 26px; font-weight: 500; letter-spacing: -0.78px; line-height: 30px; color: var(--primary-color);}
.container > main .report > .inner > div > h2 {font-size: 46px; font-weight: 500; letter-spacing: -1.38px; color: var(--primary-black-color); line-height: 62px; padding-top: 22px;}
.container > main .report > .inner > div > div {display: flex; align-items: center;}
.container > main .report > .inner > div > div > button {display: inline-block; width: 44px; height: 44px; min-width: 44px; border-radius: 50%; cursor: pointer; transition: 0.3s; border: none;}
.container > main .report > .inner > div > div > button + button {margin-left: 4px;}
.container > main .report > .inner > div > div > button:disabled {pointer-events: none; opacity: 0.2;}
.container > main .report > .inner > div > div > button.report_prev {background: url(../image/main/slide_prev.svg) no-repeat center;}
.container > main .report > .inner > div > div > button.report_next {background: url(../image/main/slide_next.svg) no-repeat center;}
.container > main .report .report_wrap {display: flex; align-items: center; justify-content: center; width: 100%; max-width: 1196px;}
.container > main .report .report_wrap .swiper {padding: 2px; margin: 0; overflow: visible; width: 100%;}
.container > main .report .report_wrap .swiper-wrapper {display: flex; align-items: center;}
.container > main .report .report_wrap .swiper-slide {display: flex; flex-direction: column; padding: 34px 34px 40px; border: 2px solid transparent; border-radius: 24px; background: linear-gradient(#FFF) padding-box, linear-gradient(to bottom, #A5E1FF, #AC99FC) border-box; box-shadow: 0 0 7px #AFBEFF89; overflow: hidden; outline: 1px solid #fff; outline-offset: -2px;}
/* .container > main .report .report_wrap .swiper-slide:hover {background: linear-gradient(#fff) padding-box, linear-gradient(to bottom, #67CBFF 0%, #8B71FF 100%) border-box; box-shadow: 0 0 7px #8199FF89; outline: none;} */
.container > main .report .report_wrap .swiper-slide.swiper-slide-active {background: linear-gradient(#fff) padding-box, linear-gradient(to bottom, #67CBFF 0%, #8B71FF 100%) border-box; box-shadow: 0 0 7px #8199FF89; outline: none;}
.container > main .report .report_wrap .swiper-slide > div {display: flex; flex-direction: column; align-items: flex-start; overflow: hidden;}
.container > main .report .report_wrap .swiper-slide > div:nth-of-type(1) {height: 120px; justify-content: center; padding: 20px 0;}
.container > main .report .report_wrap .swiper-slide > div > img {display: inline-block; max-width: 100%; max-height: 100%; height: 100%; object-fit: contain;}
.container > main .report .report_wrap .swiper-slide > div > div {display: flex; align-items: center; padding-top: 34px; width: 100%;}
/* .container > main .report .report_wrap .swiper-slide > div > div:nth-of-type(2) {justify-content: flex-end; padding-top: 30px;} */
.container > main .report .report_wrap .swiper-slide > div > div:nth-of-type(2) {display: none;}
.container > main .report .report_wrap .swiper-slide > div > div > p {font-size: 16px; font-weight: 400; letter-spacing: -0.48px; color: var(--primary-color); white-space: nowrap;}
.container > main .report .report_wrap .swiper-slide > div > div > span {font-size: 16px; font-weight: 400; letter-spacing: -0.48px; color: #838588; position: relative; padding-left: 20px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
.container > main .report .report_wrap .swiper-slide > div > div > span::before {content: ''; display: block; position: absolute; width: 4px; height: 4px; border-radius: 50%; background-color: #838588; left: 8px; top: 50%; transform: translateY(-50%);}
/* .container > main .report .report_wrap .swiper-slide > div > div > i {display: inline-block; width: 22px; height: 20px; min-width: 22px; background: url(../image/main/report_arrow.svg) no-repeat center / cover; opacity: 0; transition: 0.2s;} */
.container > main .report .report_wrap .swiper-slide > div > div > i {display: none;}
/* .container > main .report .report_wrap .swiper-slide:hover > div > div > i {opacity: 1;} */
.container > main .report .report_wrap .swiper-slide > div > h3 {padding-top: 26px; font-size: 22px; font-weight: 500; letter-spacing: -0.44px; color: var(--primary-black-color); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%;}
.container > main .report .report_wrap .swiper-slide > div > p {margin-top: 30px; font-size: 17px; font-weight: 300; letter-spacing: -0.51px; color: var(--primary-black-color); display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: initial; overflow: hidden; line-height: 28px; min-height: 84px;}

/* MAIN_CLIENT */
.container > main .client {background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.6), rgba(245, 246, 248, 0.6));}
.container > main .client > div {padding: 105px 0 142px; display: flex; flex-direction: column; width: 100%;}
.container > main .client > div > h2 {font-size: 46px; font-weight: 500; letter-spacing: -1.38px; color: var(--primary-black-color); text-align: center; line-height: 62px;}
.container > main .client > div > div:not(.marquee_wrap) {display: flex; align-items: center; justify-content: center; padding: 40px 0 56px;}
.container > main .client > div > div > a {font-size: 20px; font-weight: 300; letter-spacing: -0.6px; color: var(--primary-black-color); position: relative; display: flex; align-items: center;}
.container > main .client > div > div > a::after {content: ''; display: block; position: relative; width: 26px; height: 20px; background: url(../image/main/common_link_arrow.svg) no-repeat center; margin-left: 12px;}
.container > main .client .marquee_wrap {display: flex; flex-direction: column; width: 100%;}
.container > main .client .marquee {display: flex; align-items: center; width: 100%; overflow: hidden;}
.container > main .client .marquee + .marquee {margin-top: 32px;}
.container > main .client .marquee_track {display: flex; align-items: center; width: max-content; animation: marquee 130s linear infinite;}
.container > main .client .marquee.reverse .marquee_track {animation-direction: reverse;}
.container > main .client .marquee_track > div {display: inline-flex; align-items: center; height: 54px; padding: 0 20px; flex-shrink: 0;}
.container > main .client .marquee_track > div + div {margin-left: 24px;}
.container > main .client .marquee_track > div > img {display: inline-block; width: auto; height: 100%;}

/* MAIN_NOTIFICATION */
.container > main .notification {background-color: #fff;}
.container > main .notification > .inner {flex-direction: column; padding: 126px 0 114px;}
.container > main .notification > .inner > div {display: flex; align-items: flex-end; justify-content: space-between;}
.container > main .notification > .inner > div > h2 {font-size: 40px; font-weight: 500; letter-spacing: -1.2px; color: var(--primary-black-color);}
.container > main .notification > .inner > div > a {font-size: 20px; font-weight: 300; letter-spacing: -0.6px; color: var(--primary-black-color); position: relative; display: flex; align-items: center;}
.container > main .notification > .inner > div > a::after {content: ''; display: block; position: relative; width: 26px; height: 20px; background: url(../image/main/common_link_arrow.svg) no-repeat center; margin-left: 12px;}
.container > main .notification > .inner > ul {display: flex; flex-direction: column; width: 100%; padding-top: 50px;}
.container > main .notification > .inner > ul > li {display: flex; align-items: center; justify-content: space-between; width: 100%; overflow: hidden;}
.container > main .notification > .inner > ul > li + li {margin-top: 20px;}
.container > main .notification > .inner > ul > li > a {font-size: 20px; font-weight: 300; letter-spacing: -0.6px; color: var(--primary-black-color); overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
.container > main .notification > .inner > ul > li > a:hover {text-decoration: underline;}
.container > main .notification > .inner > ul > li > span {font-size: 20px; font-weight: 300; letter-spacing: -0.6px; color: #BCBDBE; white-space: nowrap; padding-left: 30px;}

/* MAIN_INTRODUCE */
.container > main .introduce {background: url(../image/main/introduce_bg.png) no-repeat center / cover fixed;}
.container > main .introduce > .inner {padding: 90px 0 92px; flex-direction: column;}
.container > main .introduce > .inner > h2 {font-size: 45px; font-weight: 500; letter-spacing: -1.38px; color: #fff; text-align: center; text-shadow: 0 3px 6px #00000042;}
.container > main .introduce > .inner > ul {display: grid; grid-template-columns: repeat(4, 1fr); margin-top: 66px; width: 100%; border-left: 1px solid #fff; border-right: 1px solid #fff;}
.container > main .introduce > .inner > ul > li {display: flex; flex-direction: column; flex: 1; height: 100%;}
.container > main .introduce > .inner > ul > li + li {border-left: 1px solid #fff;}
.container > main .introduce > .inner > ul > li > div {display: flex; flex-direction: column; align-items: center; flex: 1; position: relative;}
.container > main .introduce > .inner > ul > li > div::before {content: ''; display: none; position: absolute; top: 30px; left: 50%; transform: translateX(-50%); width: 30px; height: 1px; background-color: #fff;}
.container > main .introduce > .inner > ul > li > div + div {padding-top: 56px;}
.container > main .introduce > .inner > ul > li > div + div::before {display: block;}
.container > main .introduce > .inner > ul > li > div > i {display: inline-block; width: 140px; height: 100px; min-width: 140px;}
.container > main .introduce > .inner > ul > li > div > i.year {background: url(../image/main/introduce_icon1.svg) no-repeat center;}
.container > main .introduce > .inner > ul > li > div > i.rank {background: url(../image/main/introduce_icon2.svg) no-repeat center;}
.container > main .introduce > .inner > ul > li > div > i.research {background: url(../image/main/introduce_icon3.svg) no-repeat center;}
.container > main .introduce > .inner > ul > li > div > i.cs {background: url(../image/main/introduce_icon4.svg) no-repeat center;}
.container > main .introduce > .inner > ul > li > div > h3 {font-size: 46px; font-weight: 500; letter-spacing: -1.08px; color: #fff; text-shadow: 0 3px 6px #00000029; padding-top: 15px;}
.container > main .introduce > .inner > ul > li > div > p {font-size: 24px; font-weight: 600; letter-spacing: -0.48px; color: #fff; line-height: 30px; text-align: center; padding-bottom: 15px;}
.container > main .introduce > .inner > ul > li > div > span {font-size: 17px; font-weight: 400; letter-spacing: -0.34px; color: #fff; line-height: 26px; text-align: center;}

/* MAIN_HELP */
.container > main .help {background-color: #FFF;}
.container > main .help > .inner {padding: 82px 0 100px; flex-direction: column;}
.container > main .help > .inner > h2 {font-size: 46px; font-weight: 500; letter-spacing: -1.38px; color: #000;}
.container > main .help > .inner > ul {display: grid; padding-top: 62px; width: 100%; gap: 30px; grid-template-columns: repeat(4, 1fr);}
.container > main .help > .inner > ul > li > a {display: flex; flex-direction: column; border-radius: 20px; background-color: #fff; padding: 33px 38px 48px; box-shadow: 0 0 6px #6988FF70;}
.container > main .help > .inner > ul > li:nth-of-type(1) > a {border: 2px solid #7DDAE0;}
.container > main .help > .inner > ul > li:nth-of-type(2) > a {border: 2px solid #91CFFC;}
.container > main .help > .inner > ul > li:nth-of-type(3) > a {border: 2px solid #C7B5FF;}
.container > main .help > .inner > ul > li:nth-of-type(4) > a {border: 2px solid #A2B6FF;}
.container > main .help > .inner > ul > li > a > i {display: inline-block; width: 84px; height: 84px; min-width: 84px;}
.container > main .help > .inner > ul > li > a > i.consult {background: url(../image/main/help_consult.svg) no-repeat center / cover;}
.container > main .help > .inner > ul > li > a > i.support {background: url(../image/main/help_support.svg) no-repeat center / cover;}
.container > main .help > .inner > ul > li > a > i.product {background: url(../image/main/help_product.svg) no-repeat center / cover;}
.container > main .help > .inner > ul > li > a > i.case {background: url(../image/main/help_case.svg) no-repeat center / cover;}
.container > main .help > .inner > ul > li > a > div {display: flex; flex-direction: column; position: relative; padding-top: 50px;}
.container > main .help > .inner > ul > li > a > div::before {content: ''; display: block; position: absolute; top: 28px; left: 0; width: 18px; height: 2px; background-color: var(--primary-black-color);}
.container > main .help > .inner > ul > li > a > div > p {font-size: 20px; font-weight: 300; letter-spacing: -1px; color: var(--primary-black-color);}
.container > main .help > .inner > ul > li > a > div > span {padding-top: 8px; font-size: 24px; font-weight: 500; letter-spacing: -0.48px; color: #000;}

/* MAIN_INQUIRY */
.container > main .inquiry {background: linear-gradient(145deg, #5DBBFF, #91A7FF, #BB4DEB, #FF367B); position: relative; z-index: 0;}
.container > main .inquiry::before {content: ''; display: block; position: absolute; width: 47%; height: 100%; background: url(../image/main/inquiry_left.svg) no-repeat right center / cover; left: 0; z-index: -2;}
.container > main .inquiry::after {content: ''; display: block; position: absolute; width: 47%; height: 100%; background: url(../image/main/inquiry_right.svg) no-repeat left center / cover; right: 0; z-index: -2;}
.container > main .inquiry > .inner {padding: 132px 0 122px; flex-direction: column; position: relative; z-index: 1;}
.container > main .inquiry > .inner::before {content: ''; display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: url(../image/main/inquiry_center.svg) no-repeat bottom center / 95%; z-index: -1;}
.container > main .inquiry > .inner > h2 {font-size: 38px; font-weight: 300; color: #fff; line-height: 66px; letter-spacing: -0.76px; text-align: center;}
.container > main .inquiry > .inner > h2 > strong {font-size: 52px; font-weight: 500; color: #fff; line-height: 66px; letter-spacing: -1.04px;}
.container > main .inquiry > .inner > div {display: flex; align-items: center; justify-content: center; padding-top: 34px;}
.container > main .inquiry > .inner > div > a {display: flex; align-items: center; height: 50px; padding: 0 62px; border: 1px solid #fff; border-radius: 6px; background-color: #FFFFFF1A; font-size: 22px; font-weight: 500; color: #fff;}

/* INQUIRY */
.container.inquiry > main section > .inner {flex-direction: column; padding: 80px 0 120px; max-width: 1000px;}
.container.inquiry > main section > .inner > div {display: flex; flex-direction: column; align-items: center; padding-bottom: 70px;}
.container.inquiry > main section > .inner > div > h1 {font-size: 45px; font-weight: 700; color: #333;}
.container.inquiry > main section > .inner > div > p {padding: 50px 0; font-size: 19px; font-weight: 300; color: #333; text-align: center;}
.container.inquiry > main section > .inner > div > div {display: flex; align-items: center; padding: 20px 55px; border-radius: 40px; background-color: var(--primary-color);}
.container.inquiry > main section > .inner > div > div > i {display: inline-block; width: 22px; height: 22px; min-width: 22px; background: url(../image/inquiry/call.svg) no-repeat center / cover; margin-right: 16px;}
.container.inquiry > main section > .inner > div > div > p {font-size: 18px; color: #fff;}
.container.inquiry > main section > .inner > form {display: flex; flex-direction: column;}
.container.inquiry > main section > .inner > form > ul {display: grid; gap: 35px 60px; grid-template-columns: repeat(2, 1fr);}
.container.inquiry > main section > .inner > form > ul > li {display: flex; flex-direction: column;}
.container.inquiry > main section > .inner > form > ul > li:has(textarea) {grid-column: 1 / -1;}
.container.inquiry > main section > .inner > form > ul > li > label {font-size: 14px; color: #333; font-weight: 500; padding-bottom: 8px; position: relative;}
.container.inquiry > main section > .inner > form > ul > li:has([required]) > label::after {content: '*'; position: relative; margin-left: 4px; font-size: 14px; color: var(--primary-color);}
.container.inquiry > main section > .inner > form > ul > li > input {height: 50px; padding: 12px; border: 1px solid #d5d5d5; border-radius: 4px; outline: none; font-size: 14px; color: #333;}
.container.inquiry > main section > .inner > form > ul > li > input:where(:hover, :focus) {border-color: var(--primary-color);}
.container.inquiry > main section > .inner > form > ul > li > select {height: 50px; padding: 12px; border: 1px solid #d5d5d5; border-radius: 4px; outline: none; background: url(../image/inquiry/select_arrow.svg) no-repeat right 15px center; -webkit-appearance: none; appearance: none; font-size: 14px; color: #333;}
.container.inquiry > main section > .inner > form > ul > li > textarea {resize: none; border: 1px solid #d5d5d5; padding: 12px; height: 180px; outline: none; border-radius: 4px; font-size: 14px; color: #333;}
.container.inquiry > main section > .inner > form > ul > li > textarea:where(:hover, :focus) {border-color: var(--primary-color);}
.container.inquiry > main section > .inner > form > div {display: flex; flex-direction: column; padding-top: 20px;}
.container.inquiry > main section > .inner > form > div > ul {display: flex; flex-direction: column;}
.container.inquiry > main section > .inner > form > div > ul > li {display: flex; align-items: center; width: fit-content; flex-wrap: wrap; gap: 8px;}
.container.inquiry > main section > .inner > form > div > ul > li + li {padding-top: 12px;}
.container.inquiry > main section > .inner > form > div > ul > li > label {display: flex; align-items: center; cursor: pointer;}
.container.inquiry > main section > .inner > form > div > ul > li > label > input {display: inline-block; width: 24px; height: 24px; min-width: 24px; margin-right: 10px; cursor: pointer;}
.container.inquiry > main section > .inner > form > div > ul > li > label > p {font-size: 16px; color: #656c72; font-weight: 500;}
.container.inquiry > main section > .inner > form > div > ul > li > label > p > span {text-decoration: underline;}
.container.inquiry > main section > .inner > form > div > ul > li > button {display: inline-block; font-size: 16px; color: var(--primary-color); text-decoration: underline; border: none; background-color: transparent; font-weight: 500; cursor: pointer; position: relative;}
.container.inquiry > main section > .inner > form > div > ul > li:has([required]) > button {padding-left: 8px;}
.container.inquiry > main section > .inner > form > div > ul > li:has([required]) > button::before {content: '*'; position: absolute; top: 0; left: 0;}
.container.inquiry > main section > .inner > form > div > button {display: flex; align-items: center; justify-content: center; width: 100%; max-width: 376px; height: 64px; background-color: var(--primary-color); color: #fff; font-size: 22px; font-weight: 500; border-radius: 5px; border: none; outline: none; cursor: pointer; margin: 50px auto 0;}
.container.inquiry > main section > .inner > form .captcha {display: flex; flex-direction: column; padding-top: 20px;}
.container.inquiry > main section > .inner > form .captcha > p {font-size: 14px; color: #7b7d80; padding-bottom: 10px;}
.container.inquiry > main section > .inner > form .captcha > div {display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px;}
.container.inquiry > main section > .inner > form .captcha > div > div {display: flex; align-items: center; height: 50px; border: 1px solid #d5d5d5; border-radius: 4px; overflow: hidden;}
.container.inquiry > main section > .inner > form .captcha > div > div > img {display: inline-block; width: 200px; height: 100%; object-fit: fill;}
.container.inquiry > main section > .inner > form .captcha > div > div > button {display: flex; align-items: center; justify-content: center; width: 100px; height: 100%; font-size: 14px; font-weight: 500; color: #333; background-color: #f2f2f2; border: none; cursor: pointer;}
.container.inquiry > main section > .inner > form .captcha > div > input {display: inline-block; width: 200px; height: 50px; border: 1px solid #d5d5d5; padding: 12px; font-size: 14px; color: #333; outline: none; border-radius: 4px;}
.container.inquiry > main section > .inner > form .captcha > div > input:where(:hover, :focus) {border-color: var(--primary-color);}

/* 모달_inquiry */
.modal_inquiry .modal_content > h2 {font-size: 16px; color: var(--primary-color); font-weight: 500; padding-bottom: 15px; position: relative;}
.modal_inquiry .modal_content > h2::after {content: ''; display: block; position: absolute; left: 0; bottom: 0; width: 100%; height: 1px; background-color: #999;}
.modal_inquiry .modal_content > table {width: 100%; border-collapse: collapse; font-size: 14px; line-height: 18px; color: #7b7d80;}
.modal_inquiry .modal_content > table :where(th, td) {border: 1px solid #d9d9d9; font-weight: 400; padding: 5px 10px;}
.modal_inquiry .modal_content > table th {background-color: #eaeaea;}
.modal_inquiry .modal_content > table caption {text-align: left; margin-bottom: 5px;}
.modal_inquiry .modal_content > table b {font-weight: 600;}
.modal_inquiry .modal_content > div {display: flex; flex-direction: column;}
.modal_inquiry .modal_content > div h3 {font-size: 16px; color: #7b7d80; font-weight: 500; padding-bottom: 5px;}
.modal_inquiry .modal_content > div p {font-size: 14px; color: #7b7d80; font-weight: 400; line-height: 20px;}
.modal_inquiry .modal_content > * + * {margin-top: 20px;}