@charset "utf-8";@media (min-width: 768px) { html.fp-enabled { overflow-x: auto !important; } 
 .main{ min-width: var(--hp-desktop-min-width); } 
 }
.main { background-color: #fff; } 
.main section { position: relative; overflow: hidden; padding-block: 120px;}
.main .dark :where(h1, h2, h3, h5, p, li) { color: var(--hp-color-white); } 
.main .dark h4 { color: var(--hp-color-primary-soft); } 
.main :where(h1) { font-size: clamp(34px, 6.5vw, 61px); } 
.main :where(h2) { font-size: 46px; } 
.main :where(h3) { font-size: clamp(27px, 3vw, 38px); text-align: center; line-height: 1.35; font-weight: 600; letter-spacing: -0.03em;} 
.main :where(.portfolio-h3) { font-size: clamp(25px, 2.2vw, 40px); text-align: center; letter-spacing: 0.06em; line-height: 1; font-weight: 700;} 
.main :where(h4) { color: var(--hp-color-primary); } 
:where(.main.section:not(.footer):where(p)) { font-size: 18px; } 
.main .btn { font-size: clamp(16px, 1vw, 18px); min-width: 220px; min-height: 60px; letter-spacing: -0.02em; line-height : 1} 
.main :where(.portfolio, .function) .btn { margin-inline: auto; } 
.main .title { margin-bottom: clamp(30px, 5vw, 50px); } 
.main .title h3 + :where(p, h4) { margin-top: 40px; } 
.main .title :where(h4 + p, p + h4) { margin-top: 30px; } 
.main .symbol { z-index: 1; position: absolute; right: 0; bottom: 0; user-select: none; scale: 0.8; transform-origin: right bottom;} 
.main .scroll { z-index: 1; position: absolute; bottom: -70px; left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; justify-content: flex-end; align-items: center; width: 180px; padding-bottom: 90px; aspect-ratio: 1; border-radius: 9999px; border: 1px solid var(--hp-color-gray-200); } 
.main .scroll p { font-size: 15px; font-weight: 500; color: var(--hp-color-gray-800); } 
.main .section.banner{ padding-block: 0; }
.main .section.banner .slide1 {background-color: #def1ff;}
.main .section.banner .slide2 {background-color: #1654f3;}
.main .section.banner .slide1 .btn{ margin-top: 60px; }
.main .section.banner .slide2 .btn{ margin-block: 20px 50px; border: 1px solid #fff; color: #fff; background-color: transparent; }
.main .section.banner .slide2 .btn:hover{background-color: #fff; color: var(--hp-color-primary);}
.main .section.banner .slide2 :is(img, .btn){margin-inline: auto;}
.main .section.banner > .container{ padding-inline: 0; width: 100%; max-width: 100%;}
.main .section.banner .swiper-bg{transition: 2s 0.5s; position: absolute; width: 100%; height: 100%; opacity: 0; scale: 1.2;}
.main .section.banner .swiper-bg img{width: 100%; height: 100%; object-fit: cover; object-position: center;}
.main .section.banner .swiper-slide{position: relative; overflow: hidden; display: flex; justify-content: center; align-items: center; height: 680px;}
.main .section.banner .swiper-indicators-wrap{position: absolute; bottom: 40px; left: 50%; transform: translateX(-50%); z-index: 1000; width: 120px; height: 35px; border-radius: 9999px; background-color: rgba(0, 0, 0, 0.25); display: flex; justify-content: center; align-items: center; gap: 5px; color: #fff; font-size: 14px;}
.main .section.banner .swiper-pagination{position: static; width: 50px; }
.main .section.banner :is(.swiper-button-next, .swiper-button-prev){all: unset; cursor: pointer;}
.main .section.banner :is(.swiper-button-next, .swiper-button-prev) span{scale: 0.6;}
.main .section.banner [class^="swiper-button"]::after{all: unset;}
.main .section.banner .swiper-slide h1{transition: 0.75s 0.5s; opacity: 0; transform: translateY(100px);}
.main .section.banner .swiper-slide-active h1{opacity: 1; ; transform: translateY(0px)}
.main .section.banner .swiper-slide .btn{transition: opacity 0.75s 0.7s; opacity: 0;}
.main .section.banner .swiper-slide-active .btn{opacity: 1; ;}
.main .section.banner .swiper-slide-active .swiper-bg{opacity: 1; scale: 1;}
@media (max-width: 767.98px) {
    .main section{padding-block: 100px !important;}
    .main .section.partners{padding: 30px 0 !important;}
    .main .section.banner{padding-block: var(--hp-nav-height) 0!important;}
    .main .section.banner .swiper-slide{height: auto; aspect-ratio: 385/514;}
    .main .section.banner .swiper-indicators-wrap{transform: translateX(-50%) scale(0.85); transform-origin: bottom; bottom: clamp(20px,5vw,40px)}
}
.main .section.device { background-color: #112d6e; text-align: center; z-index: 10; padding-bottom: 0; } 
.main .section.device > .fp-tableCell { padding-bottom: 0; } 
.main .section.device .container { align-self: stretch; display: flex; flex-direction: column; } 
.main .section.device .title { margin-block: 0px 25px; } 
.main .section.device .title h4 { margin-top: 5px; font-size: 18px; color: #fff; font-weight: 400; } 
.res-wrap { flex: 1; display: flex; flex-direction: column; align-items: center; text-align: left; justify-content: flex-end; } 
.res-wrap .res-tab { display: flex; width: fit-content; margin: 0 auto 50px; gap: 12px; } 
.res-wrap .res-btn { display: flex; flex-direction: column; width: 110px; aspect-ratio: 1; justify-content: center; align-items: center; align-self: stretch; gap: 10px; border-radius: var(--hp-rounded-3); border: 1px solid rgba(255, 255, 255, 0.4); } 
.res-wrap .res-btn img { height: 40px; object-fit: none; object-position: center; } 
.res-wrap .res-btn p { font-size: 16px; line-height: 1; } 
.res-wrap .res-btn:not(.on) { opacity: 0.5; } 
.res-wrap .res-btn.on { background-color: var(--hp-color-primary); border-color: var(--hp-color-primary); box-shadow: 5px 5px 20px rgba(0, 0, 0, 0.2); } 
.res-wrap .res-btn:hover { opacity: 1; } 
.res-wrap .res-caption { margin-block: 17px 40px; opacity: 0.8; } 
.res-wrap .res-caption p { font-size: 12px; letter-spacing: 0; } 
.res-wrap .res-view { --res-nav-height: 95px; --res-view-padding: 25px; user-select: none; container-type: inline-size; padding: var(--res-view-padding); flex: 1; padding-bottom: 0; transform: translateY(1px); transition: 0.75s ease-in-out; position: relative; z-index: 100; display: flex; justify-content: center; width: var(--res-view-width); border-radius: 12px 12px 0 0; background-color: #f3f3f3; border: 2px solid #bdbdbd; border-bottom: 0; box-shadow: 2px 2px 30px rgba(0, 0, 0, 0.05); flex: 500px; } 
@media (max-width: 1199.98px){
 .res-wrap .res-view { transform-origin: bottom; scale: 0.95; } 
 }
.res-wrap .res-view.desktop { --res-view-width: 1600px; --container-width: 1200px; } 
@media (max-width:1600px) {
    .res-wrap .res-view.desktop{--res-view-width: 100%;}
}
.res-wrap .res-view.labtop { --res-view-width: 1200px; --container-width: 1000px; } 
.res-wrap .res-view.tablet { --res-nav-height: 60px; --res-view-width: 800px; --container-width: 700px; } 
.res-wrap .res-view.mobile { --res-nav-height: 35px; --res-view-width: 310px; --container-width: 240px; --res-view-padding: 15px; border-radius: 25px 25px 0 0; } 
.res-wrap .res-body { overflow: hidden; position: relative; display: flex; width: 100%; flex-direction: column; background-color: #fff; } 
.res-wrap .res-container { transition: 0.5s; width: var(--container-width); margin-inline: auto; } 
.res-wrap .res-nav { transition: background 0.5s; position: absolute; z-index: 10; width: 100%; top: 0; left: 0; color: #fff; } 
.res-wrap .res-nav :is(h5, li) { color: inherit; } 
.res-wrap .res-nav > div { display: flex; align-items: center; justify-content: space-between; height: var(--res-nav-height); } 
.res-wrap .res-nav h5 { font-weight: 700; font-size: clamp(15px, 3cqw, 28px); white-space: nowrap; } 
.res-wrap .res-nav h5 span { color: #cf904c; } 
.res-wrap .res-nav ul { display: flex; align-items: center; gap: clamp(30px, 4cqw, 60px); } 
.res-wrap .res-nav li { font-size: clamp(15px, 2cqw, 18px); font-weight: 600; } 
.res-wrap .res-nav .hamberger { display: none; } 
.res-wrap .res-slide { transition: 0.5s; position: relative; overflow: hidden; flex: 1 0 calc(100% + 1px); margin-bottom: -1px; } 
.res-wrap .tablet .res-slide { flex: 0 1 280px; } 
.res-wrap .res-slide > img { position: absolute; z-index: 1; width: 100%; height: 100%; object-fit: cover; object-position: center; } 
.res-wrap .res-slide > div { position: relative; height: 100%; z-index: 2; display: flex; justify-content: center; align-items: center; padding-top: var(--res-nav-height); } 
.res-wrap .caption { text-align: center; margin-bottom: clamp(10px, 3cqw, 60px); } 
.res-wrap .caption h6 { font-size: clamp(20px, 4.7cqw, 55px); font-weight: 700; color: #fff; margin-bottom: clamp(10px, 2cqw, 20px); white-space: nowrap; } 
.res-wrap .caption p { font-size: clamp(11px, 2cqw, 18px); } 
.res-wrap .arrow { transition: 0.5s; position: absolute; top: 53%; transform: translateY(-50%); opacity: 0.3;} 
.res-wrap :is(.tablet, .mobile) .arrow { scale: 0.8; } 
.res-wrap .arrow.prev { left: 0; } 
.res-wrap .arrow.next { right: 0; } 
.res-wrap .indicators { position: absolute; bottom: clamp(20px, 3cqw, 40px); left: 50%; transform: translateX(-50%); display: flex; justify-content: center; gap: 6px; } 
.res-wrap .indicators li { border-radius: 9999px; border: 1px solid #fff; width: clamp(7px, 1cqw, 10px); height: clamp(7px, 1cqw, 10px); } 
.res-wrap .indicators li.on { background-color: #fff; } 
.res-wrap .res-card { transition: 0.5s; opacity: 0; flex-direction: column; flex: 1 0 0px; height: 0; padding-top: 22px; margin-top: 0; padding-bottom: 20px; transform: translateY(300px); } 
.res-wrap :is(.tablet, .mobile) .res-card { opacity: 1; transition: 0.5s 0.25s; transform: translateY(0); } 
.res-wrap .res-card > div { display: flex; gap: clamp(13px, 2cqw, 25px); height: 100%; } 
.res-wrap .res-card h5 { margin-block: 0 clamp(5px, 3cqw, 12px); color: #333; font-size: clamp(13px, 3cqw, 18px); font-weight: 600; line-height: 1; } 
.res-wrap .res-card p { white-space: nowrap; color: #666; font-size: clamp(13px, 2cqw, 14px); letter-spacing: -0.06em; font-weight: 400; } 
.res-wrap .res-card .col { gap: 18px; flex: 1; display: flex; } 
.res-wrap .res-card img { flex: 0 1 auto; width: 200px; height: 100%; user-select: none; max-width: 100%; object-fit: cover; object-position: center; background-color: #ccc; } 
.res-wrap .res-card .info { flex: 1; align-self: flex-end; } 
.res-wrap .res-footer { transition: 0.5s; height: 0; flex-direction: column; justify-content: center; align-items: center; text-align: center; background-color: #333; transform: translateY(100px); opacity: 0; } 
.res-wrap :is(.desktop, .labtop) .res-footer { margin-bottom: -63px; } 
.res-wrap :is(.mobile) .res-footer { transition: 0.5s 0.5s; display: flex; height: 63px; transform: translateY(0); padding-block: 5px; margin-bottom: 0; opacity: 1; } 
.res-wrap .res-footer h6 { font-size: 10px; margin-bottom: 3px; color: #fff; scale: 0.8; } 
.res-wrap .res-footer h6 span { color: #cf904c; } 
.res-wrap .res-footer p { color: #999; font-size: 10px; scale: 0.9; } 
.res-wrap .mobile .res-body { border-radius: 15px 15px 0 0; } 
.res-wrap .mobile .res-nav { background-color: #fff; color: #222; } 
.res-wrap .mobile .res-nav ul { display: none; } 
.res-wrap .mobile .hamberger { display: flex; flex-direction: column; gap: 4px; scale: 0.9; } 
.res-wrap .mobile .hamberger span { display: block; width: 20px; height: 2px; background-color: #000; } 
.res-wrap .mobile .res-slide { flex-basis: 50px; } 
.res-wrap .mobile .res-slide .arrow { opacity: 0; } 
.res-wrap .mobile .res-card > div { flex-direction: column; } 
.res-wrap .mobile .res-card img { flex: 1; } 
.res-wrap .mobile .res-card p { font-size: 10px; white-space: normal; } 
.res-wrap .mobile .res-card .col { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; overflow: hidden; } 
@supports not (container-type: inline-size){
 .res-wrap .tablet .res-nav h5 { font-size: 22px; } 
 .res-wrap .tablet .caption h6 { font-size: 35px; } 
 .res-wrap .tablet .res-nav ul { gap: 30px; } 
 .res-wrap .tablet .res-nav li { font-size: 15px; } 
 .res-wrap .tablet .caption p { font-size: 15px; } 
 .res-wrap .tablet .res-card h5 { font-size: 18px; } 
 .res-wrap .tablet .res-card p { font-size: 14px; } 
 .res-wrap .tablet .indicators li { width: 8px; height: 8px; } 
 .res-wrap .mobile .res-nav h5 { font-size: 15px; } 
 .res-wrap .mobile .caption h6 { font-size: 22px; } 
 .res-wrap .mobile .res-nav li { font-size: 15px; } 
 .res-wrap .mobile .caption p { font-size: 13px; } 
 .res-wrap .mobile .res-card h5 { font-size: 15px; } 
 .res-wrap .mobile .res-card p { font-size: 12px; } 
 .res-wrap .mobile .indicators li { width: 7px; height: 7px; } 
 }
@media (min-height: 992px){
 .res-wrap { flex: 0 1 auto; } 
 .res-wrap .res-view { flex-basis: 600px; } 
 .res-wrap .tablet .res-slide { flex-basis: 400px; } 
 .res-wrap .mobile .res-slide { flex-basis: 100px; } 
 .res-wrap .res-tab { margin-bottom: 100px; } 
 .main .section.device .title { margin-block: auto; } 
 }
/* .main .section.service::before { content: ""; z-index: 5; position: absolute; top: 0; left: 0; display: block; height: 100%; width: calc((100% / 2) - clamp(200px, 20vw, 330px)); backdrop-filter: blur(15px); background-color: rgba(0, 0, 0, 0.03); background-color: #f8f9fb; border-top-right-radius: 100px; } 
.main .section.service .container { display: flex; gap: clamp(50px, 7vw, 110px); } 
.main .section.service .title { width: 370px; z-index: 100; padding-top: 0; margin-bottom: 150px; } 
.main .section.service .title h2 { font-weight: 700; color: var(--hp-color-black); } 
.main .section.service .title h4 { margin-block: 35px 20px; font-size: 22px; letter-spacing: -0.8px; line-height: 1.4; } 
.main .section.service .title p { color: var(--hp-color-gray-600); letter-spacing: -0.3px; margin-top: 20px; }  */
.ser-tab { position: relative; margin-top: 70px; } 
.ser-btn { transition: color 0.5s; position: relative; z-index: 5; width: 390px; height: 80px; display: flex; padding-inline: 30px; justify-content: space-between; align-items: center; font-size: 24px; font-weight: 600; color: #9e9e9e; letter-spacing: -0.5px; } 
.ser-btn.on{color: #fff;}
.ser-btn-bg { transition: 0.25s; z-index: 1; position: absolute; left: 0; display: flex; justify-content: flex-end; align-items: center; width: 390px; height: 80px; padding-right: 30px; border-radius: 4px; background-color: #2453cc; } 
.ser-wrap { position: relative; flex: 1; } 
/* .ser-wrap .ser-view { z-index: 1; position: absolute; width: 100%; }  */
.ser-wrap .ser-view:not(.on) { z-index: -5; pointer-events: none; user-select: none; opacity: 0; } 
.ser-wrap .ser-view.on { transition: 1s; opacity: 1; } 
.ser-wrap .ser-header { display: grid; grid-template-columns: minmax(0, 120px) minmax(0, auto); padding-bottom: 30px; margin-bottom: 30px; gap: 17px 40px; border-bottom: 1px solid var(--hp-color-gray-300); } 
.ser-wrap .ser-header .img-box { user-select: none; grid-row: span 2; display: flex; justify-content: center; align-items: center; aspect-ratio: 1; box-shadow: 2px 2px 20px rgba(0, 0, 0, 0.1); border-radius: var(--hp-rounded-1); } 
.ser-wrap .ser-title { display: flex; align-items: flex-end; padding-top: 5px; } 
.ser-wrap .ser-title h3 { font-size: 44px; font-weight: 600; line-height: 1; text-align: left; } 
.ser-wrap .ser-title p {position: relative; margin-inline: 20px 15px; font-size: 30px; font-weight: 700; line-height: 1; color: var(--hp-color-gray-800); letter-spacing: -0.8px; } 
.ser-wrap .ser-title span.won { display: inline-block; font-size: 26px; transform: translateY(-0.05em); } 
.ser-wrap .ser-title small { opacity: 1; font-size: 14px; color: #888; } 
.ser-wrap .ser-title small.sale{    position: absolute;left: 0;top: -19px;text-decoration: line-through;font-size: 16px;font-weight: 500;margin-left: 3px;color: #999;
}
.ser-wrap .ser-title span.label { display: inline-block; color: #de5000; background-color: #fffba5; font-size: 16px; font-weight: 600; padding: 7px 12px 5px; margin-left: 15px; letter-spacing: -0.02em; } 
.ser-wrap .ser-info { grid-column: 2; grid-row: 2; display: flex; gap: 0 17px; color: #4b89de; font-weight: 400; } 
.ser-wrap .ser-info li { font-size: 16px; letter-spacing: -0.6px; white-space: nowrap; } 
.ser-wrap .ser-sub-title h4 { font-size: 26px; font-weight: 500; color: var(--hp-color-gray-800); line-height: 1.4; letter-spacing: -0.8px; } 
.ser-wrap .ser-sub-title span { color: var(--hp-color-primary); font-weight: 600; } 
.ser-wrap .ser-sub-title { margin-bottom: 45px; } 
.ser-wrap .ser-target { display: flex; flex-direction: column; } 
.ser-wrap .ser-message { display: flex; flex-direction: column; gap: 20px; padding-inline: clamp(30px, 6vw, 90px) clamp(50px, 8vw, 120px); margin-bottom: 55px; } 
.ser-wrap .ser-message .item { display: flex; align-items: center; gap: 25px; } 
.ser-wrap .ser-message .item:nth-child(even) { flex-direction: row-reverse; align-self: flex-end; } 
.ser-wrap .ser-message .item:last-child { margin-left: 20px; } 
.ser-wrap .ballon { position: relative; display: flex; width: fit-content; height: 60px; justify-content: center; align-items: center; padding-inline: 35px; border-radius: 9999px; } 
.ser-wrap .ballon::before { content: ""; width: 20px; height: 20px; -webkit-clip-path: polygon(50% 0, 0 100%, 100% 100%); clip-path: polygon(50% 0, 0 100%, 100% 100%); background-color: var(--hp-color-primary-pale); position: absolute; left: -12px; bottom: 4px; transform: rotate(240deg); } 
.ser-wrap .item:nth-child(even) .ballon::before { left: unset; right: -12px; bottom: 4px; transform: rotate(120deg); } 
.ser-wrap .item:nth-child(1) .ballon { background-color: #e6f3ff; } 
.ser-wrap .item:nth-child(2) .ballon,
.ser-wrap .item:nth-child(2) .ballon::before { background-color: #e6ebff; } 
.ser-wrap .item:nth-child(3) .ballon,
.ser-wrap .item:nth-child(3) .ballon::before { background-color: #dcf7fd; } 
.ser-wrap .business .item:nth-child(1) .ballon,
.ser-wrap .business .item:nth-child(1) .ballon::before { background-color: #fde8d2; } 
.ser-wrap .business .item:nth-child(2) .ballon,
.ser-wrap .business .item:nth-child(2) .ballon::before { background-color: #fdf2d1; } 
.ser-wrap .business .item:nth-child(3) .ballon,
.ser-wrap .business .item:nth-child(3) .ballon::before { background-color: #dbf8ea; } 
.ser-wrap .university .item:nth-child(1) .ballon,
.ser-wrap .university .item:nth-child(1) .ballon::before { background-color: #ede8fc; } 
.ser-wrap .university .item:nth-child(2) .ballon,
.ser-wrap .university .item:nth-child(2) .ballon::before { background-color: #eaf1f9; } 
.ser-wrap .university .item:nth-child(3) .ballon,
.ser-wrap .university .item:nth-child(3) .ballon::before { background-color: #daf1ff; } 
.ser-wrap .ballon p { color: #345c9f; font-weight: 500; text-align: center; font-size: 17px; letter-spacing: -0.3px; } 
.ser-wrap .item:nth-child(2) .ballon p { color: #5960a3; } 
.ser-wrap .item:nth-child(3) .ballon p { color: #3b768b; } 
.ser-wrap .business .item:nth-child(1) .ballon p { color: #9e5e3f; } 
.ser-wrap .business .item:nth-child(2) .ballon p { color: #796f47; } 
.ser-wrap .business .item:nth-child(3) .ballon p { color: #3e6b65; } 
.ser-wrap .university .item:nth-child(1) .ballon p { color: #805987; } 
.ser-wrap .university .item:nth-child(2) .ballon p { color: #5b638a; } 
.ser-wrap .university .item:nth-child(3) .ballon p { color: #3577aa; } 
.main .section.portfolio { text-align: center; } 
.main .section.portfolio .btn { margin-top: clamp(40px, 3vw, 50px); } 
.main .section.portfolio .title { margin-bottom: clamp(30px, 5vw, 60px); } 
.gallery-wrap { position: relative; display: grid; grid-template-columns: repeat(3,1fr); gap: 58px;} 
.gallery-wrap .swiper { margin-inline: 0; } 
.gallery-wrap .swiper-slide { padding-inline: clamp(5px, 1vw, 15px); } 
.gallery-wrap .swiper-slide a { transition: 0.5s; } 
.gallery-wrap .swiper-slide-active { z-index: 100; } 
.gallery-wrap .swiper-slide:not(.swiper-slide-active, .swiper-slide-prev, .swiper-slide-next) a { opacity: 0.4; user-select: none; pointer-events: none; } 
.gallery-wrap :is(.swiper-slide, .swiper-slide-duplicate) .thumb { transform-origin: right; } 
.gallery-wrap .swiper-slide-next + :is(.swiper-slide, .swiper-slide-duplicate) .thumb { transform-origin: left; } 
.gallery-wrap .swiper-indicators-wrap { display: flex; justify-content: center; align-items: center; margin-top: 30px; } 
.gallery-wrap .swiper-pagination { width: fit-content; position: static; } 
.gallery-wrap [class*="swiper-button"] { width: 230px; height: 100%; top: 0; } 
.gallery-wrap .swiper-button-prev { left: -1px; } 
.gallery-wrap .swiper-button-next { right: -1px; } 
.gallery-wrap [class*="swiper-button"]::after { display: none; } 
.gallery-wrap .swiper-pagination-bullet-active { background-color: var(--hp-color-primary); } 
.gallery-wrap .thumb { display: flex;width: 100%;aspect-ratio: 428 / 490;overflow: hidden;position: relative;box-shadow: 4px 4px 20px 0 rgba(0, 0, 0, 0.15);border-radius: var(--hp-rounded-1);}
.gallery-wrap .caption{ color: #222; text-align: center; font-size: 20px; font-weight: 600; line-height: 1.65; letter-spacing: -0.2px; margin-top: 20px;}
.gallery-wrap span.catogori{ display: block; text-align: center; margin-top: 4px; color: #777; font-size: 15px; line-height: 1.65; letter-spacing: -0.01em;} 
/* .gallery-wrap .thumb { display: flex; flex-direction: column; width: 100%; height: 100%; aspect-ratio: 5/3; overflow: hidden; position: relative; aspect-ratio: 384/255; background: rgba(0, 0, 0, 0.3); border: 1px solid #e5e5e6; border-radius: var(--hp-rounded-1); }  */
/* .gallery-wrap .thumb + .thumb { margin-top: 20px; }  */
.gallery-wrap .thumb img { width: 100%; height: 100%; object-fit: cover; object-position: top; transition: object-position 1.7s 50ms cubic-bezier(0.38, 0.03, 0.39, 0.96); } 
.gallery-wrap .thumb:hover { border-color: var(--hp-color-gray-700); } 
.gallery-wrap .thumb:hover img { object-position: bottom; } 
@media (max-width: 1199.98px){
 .gallery-wrap .thumb { pointer-events: none; } 
 .gallery-wrap [class*="swiper-button"] { display: none; } 
 }
@media (max-width: 767.98px){
 .gallery-wrap { margin-inline: 0; grid-template-columns: 1fr; } 
 }
@media (max-width: 575.98px){
 .gallery-wrap { margin-inline: 0; } 
 }
 /* 10PAGE 고객사 */
 .main section.client{background: var(--hp-section3-bg) center / cover no-repeat; padding-block: 115px 90px;}
 .main section.client .logo-tit{ display: flex; gap: 48px; margin-bottom: clamp(50px,6.5vw,125px); align-items: center;}
 .main section.client .logo-tit p{ font-size: clamp(14px,1vw,18px); letter-spacing: -0.03em; line-height: 1.5; color: #fff;}
 .count-wrap{ display: grid; grid-template-columns: repeat(4,1fr);}
 .count-wrap .count-item{ display: flex; align-items: center; justify-content: center; flex-direction: column; color: #fff; gap: 10px;}
 .count-wrap .count-item + .count-item{ border-left: 1px solid #FFFFFF26;}
 .count-wrap .count-item .count{ display: flex;}
 .count-wrap .count-item p{ font-weight: 700; font-size: clamp(22px,3.2vw,60px); line-height: 1; letter-spacing: 0;}
 .odometer-digit, .odometer .odometer-value, .odometer .odometer-ribbon, .odometer .odometer-ribbon-inner {font-kerning: none;  font-variant-numeric: tabular-nums;font-feature-settings: "tnum" 1, "lnum" 1; padding: 0 2px; margin: 0 -2px; width: 1ch; display: block; text-align: center;}
 .odometer .odometer-digit:has(span[data-value="1"]) {
    display:inline-block;
    width:1ch;             /* 다른 숫자와 폭 맞추기 */
    text-align:center;
  }
 .odometer03 .odometer-formatting-mark{ display: none;}
 .count-wrap .count-item .count-type{ font-weight: 500; font-size: 20px; line-height: 1.5; letter-spacing: -0.01em;}
 @media (max-width:767.98px) {
    .main section.client .logo-tit { flex-direction: column; gap: 20px; align-items: flex-start;}
    .count-wrap .count-item { gap: 5px;}
    .count-wrap .count-item .count-type{ font-size: clamp(9px, 3vw, 12px);}
    .main section.client .logo-tit img{ width: 220px;}
    
}
 /* 기능 제공 */
/* section6 */
.func-wrap { display: grid;gap: 20px;text-align: center;grid-template-columns: repeat(4, minmax(0, 1fr));} 
.main .func-wrap .title{ margin-bottom: clamp(30px, 5vw, 61px);}
.func-wrap h5 { font-size: clamp(15px, 3vw, 20px); font-weight: 600; color: var(--hp-color-gray-800); letter-spacing: -0.05em; line-height: 1; } 
.func-wrap .col { display: flex; height: 170px; flex-direction: column; align-items: center; text-align: left; justify-content: center; gap: clamp(10px, 1vw, 19px); background: #F6F8FB;} 
@media (width <= 767.98px){
 .func-wrap { grid-template-columns: repeat(2, minmax(0, 1fr)); } 
 }
@media (width <= 575.98px){
 .func-wrap { grid-template-columns: repeat(1, minmax(0, 1fr)); max-width: fit-content; margin-inline: auto; gap: 16px; } 
 .func-wrap .col { border-radius: 4px; padding: 10px 30px; width: 100%; background: #fafbfd; } 
 }
 .main .section.partners{padding: 40px 0 32px;}
.main .section.partners .fp-tableCell { background: var(--hp-img-main-symbol) no-repeat right bottom; } 
.main .section.partners .title { margin-bottom: clamp(30px, 5vw, -802px); } 
.part-wrap .swiper-marquee + .swiper-marquee { margin-top: clamp(20px, 3vw, 50px); } 
.part-wrap .swiper-slide { text-align: center; font-size: 33px; display: flex; justify-content: center; align-items: center; width: auto; position: relative; overflow: hidden; padding: 0 40px;} 
.part-wrap .swiper-slide img { height: clamp(40px, 5vw, 60px); } 
.part-wrap .swiper-container { width: 100%; height: 100%; position: relative; } 
.part-wrap .swiper-wrapper { -webkit-transition-timing-function: linear !important; transition-timing-function: linear !important; position: relative; } 
.main .footer .fp-tableCell { flex-direction: column; } 
@media (max-width:767.98px) {
    .part-wrap .swiper-slide{padding: 0 30px;}
}
@media (min-height: 800px){
 .fp-responsive :is(.fp-section) { height: auto !important; } 
 }
/* 유지보수 */
.main .section.maintenance{ padding-top: 20px;}
.maintenance-wrap{ display: grid; gap: 115px; grid-template-columns: 400px 1fr;}
.maintenance-wrap .title{ margin-bottom: 0;}
.maintenance-wrap .title h3{  text-align: left; margin-top: 25px;}
.maintenance-wrap .title p{ margin-top: 30px; font-size: 18px; color: #666; line-height: 1.5; letter-spacing: -0.03em; font-weight: 400;}
.maintenance-wrap .title .cursor-box{position: relative; width: fit-content;}
.maintenance-wrap .title .cursor-box a{ margin-top: 55px; width: 400px; height: 80px; font-size: 22px; font-weight: 700; line-height: 1; letter-spacing: -0.02em; box-shadow: 0 5px 8px 0 #749CF2; border-radius: 8px;}
.maintenance-wrap .title .cursor-box img{position: absolute; content: ""; right: 9px; bottom: -41px;}
.maintenance-wrap .maintenance-box{position: relative;}
.maintenance-wrap .maintenance-box::before{z-index: 3; position: absolute; content: ""; left: 0; bottom: 0; width: 100%; height: 70px; background: linear-gradient(180deg, rgba(255, 255, 255, 0.00) 0%, #FFF 70%);}
.maintenance-wrap .maintenance-box .maintenance-swiper{ height: 400px; overflow: hidden; position: relative;}
.maintenance-wrap .maintenance-box .maintenance-swiper .swiper-wrapper{ height: auto; transition-timing-function: ease-in-out;}
.maintenance-wrap .maintenance-box .maintenance-swiper .swiper-slide{ height: auto; display: flex; align-items: flex-start;}
.maintenance-wrap .maintenance-box .maintenance-list{ width: 100%; position: relative; list-style: none; padding: 0; margin: 0;}
.maintenance-wrap .maintenance-box .maintenance-item{ width: 100%; border-top: 1px solid #E0E0E0; display: grid; grid-template-columns: 80px 115px 1fr 110px 110px; padding: 23px 0; align-items: center; color: #222;}
.maintenance-wrap .maintenance-box .maintenance-item > span{ text-align: center; overflow: hidden;}
.maintenance-wrap .maintenance-box .badge{ margin: 0 auto; width: 85px; color: #fff; border-radius: 100px; display: flex; justify-content: center; align-items: center; padding: 9px 17px; font-size: 15px; font-weight: 700; letter-spacing: -0.3px; line-height: 1;}
.maintenance-wrap .maintenance-box .badge01{background-color: #1F4EC8;}
.maintenance-wrap .maintenance-box .badge02{background-color: #F3664D;}
.maintenance-wrap .maintenance-box .badge03{background-color: #737886;}
.maintenance-wrap .maintenance-box .subject{padding-left: 15px; text-align: left; font-size: 17px; font-weight: 500; letter-spacing: -0.04em;}
.maintenance-wrap .maintenance-box .subject span{text-align: left; display: block; width: 210px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;}
.maintenance-wrap .maintenance-box .company{ font-size: 14px; letter-spacing: -0.02em; color: #222; text-align: center;}
.maintenance-wrap .maintenance-box .data{ font-size: 14px; letter-spacing: -0.02em; color: #888; text-align: center;}
@media (max-width:767.98px) {
    .main .section.maintenance{padding-top: 20px !important;}
    .maintenance-wrap{ gap: 65px; grid-template-columns: 1fr;}
    .maintenance-wrap .title .cursor-box a{width: 220px; font-size: clamp(16px, 1vw, 18px); height: 50px; margin-top: 30px;}
    .maintenance-wrap .title .cursor-box img { right: -7px; bottom: -10px; width: 40px; aspect-ratio: 1;}
    .maintenance-wrap .maintenance-box .maintenance-item { grid-template-columns: 0.5fr 0.7fr 1fr 0.5fr 0.7fr; gap: 10px; padding: 15px 0;}
    .maintenance-wrap .maintenance-box .subject span{width: 100%; padding: 0; font-size: 14px;}
    .maintenance-wrap .maintenance-box .company{font-size: 12px;}
    .maintenance-wrap .maintenance-box .data{font-size: 11px;}
    .maintenance-wrap .maintenance-box .badge { width: 75px; padding: 7px 10px; font-size: 13px;}
    .maintenance-wrap .maintenance-box .num { font-size: 13px;}
    .maintenance-wrap .maintenance-box .maintenance-swiper{ height: 290px;}
}
@media (max-width:575.98px) {
    .maintenance-wrap .maintenance-box .badge{width: 100%; padding: 5px 5px;}
    .maintenance-wrap .maintenance-box .maintenance-item{ gap: 5px; grid-template-columns: 0.5fr 0.5fr 1fr 0.4fr 0.7fr;}
    .maintenance-wrap .maintenance-box .subject span{font-size: 12px;}
    .maintenance-wrap .maintenance-box .data, .maintenance-wrap .maintenance-box .company{ font-size: 9px;}
    .maintenance-wrap .maintenance-box .badge, .maintenance-wrap .maintenance-box .num{ font-size: 11px;}
}
@media (max-height: 799.98px) or (max-width: 767.98px){
 .fp-responsive :is(.fp-section, .fp-tableCell) { height: auto !important; } 
 .main .fp-tableCell { padding-block: 100px; width: 100%; } 
 .main .price .fp-tableCell{width: 100%; padding: 0;}
 .section.portfolio .fp-tableCell { padding-top: 200px; height: auto !important; } 
 .section.device .fp-tableCell { height: 900px !important; padding-block: 50px 0; } 
 .section.service .fp-tableCell { height: auto !important; padding-block: 100px 100px; } 
 .section.service .container { height: auto; } 
 .section.performance .fp-tableCell { height: auto !important; padding-block: 0; } 
 .section.performance :is(.con01, .con02) { padding-block: 100px; } 
 .section.performance :is(.con02) { padding-bottom: 150px; } 
 .section.partners .fp-tableCell { height: auto !important; padding-block: 0 100px; } 
 /* .section.portfolio .fp-tableCell { padding-top:170px } */
 .section.function .fp-tableCell { padding-bottom: 150px; } 
 .section.footer .fp-tableCell { padding-block: 0; } 
 }
@media (max-width: 767.98px){
 .fp-tableCell { align-items: flex-start; } 
 .main .scroll { display: none; } 
 .main .price { background-color: #f7fafc; } 
 .main .price .sub-tab { margin-bottom: 50px; } 
 .main .caption p { text-align: center; font-size: 16px; margin-top: 40px; } 
 }
@media (max-width: 575.98px){
     .section.portfolio .fp-tableCell { padding-top: 170px; height: auto !important; } 
 .main .section.performance :is(.con01, .con02) { padding-block: 60px; } 
 }