@charset "utf-8";.sub {  background-color: #fff; } 
@media (min-width: 768px){
 .sub { min-width: var(--hp-desktop-min-width); } 
 }
.sub-header { padding-top: clamp(85px, 5vw, 105px); margin-bottom: clamp(40px, 6vw, 70px); text-align: center; } 
.sub-header .cate { display: block; margin-bottom: 10px; font-size: 24px; font-weight: 600; letter-spacing: -0.48px; color: var(--hp-color-primary); display: none; } 
.sub-header .title h2 { display: block; font-size: clamp(32px, 6vw, 46px); font-weight: 700; letter-spacing: -0.46px; color: var(--hp-color-black); text-align: center; justify-content: center; } 
.sub-header .title p { font-size: clamp(16px, 2vw, 18px); font-weight: 500; color: var(--hp-color-gray-700); margin-top: 20px; line-height: 1.68; letter-spacing: -0.3px; } 
:is(#hp_main, .sub-header) .sub-tab { display: flex; justify-content: center; gap: clamp(10px, 3vw, 20px); margin-top: clamp(30px, 5vw, 40px); } 
:is(#hp_main, .sub-header) .sub-tab .btn { --hp-btn-width: clamp(150px, 15vw, 198px); --hp-btn-height: clamp(52px, 5vw, 58px); --hp-btn-border-color: var(--hp-color-gray-400); font-weight: 400; font-size: clamp(17px, 3vw, 20px); margin-inline: 1px; } 
:is(#hp_main, .sub-header) .sub-tab :is(.btn.on, .btn:hover) { --hp-btn-border-width: 2px; --hp-btn-border-color: var(--hp-color-primary); --hp-btn-text-color: var(--hp-color-primary); font-weight: 500; margin-inline: 1px; } 
@media (max-width: 575.98px){
 :is(#hp_main, .sub-header) .sub-tab .btn { --hp-btn-width: auto; flex: 1; } 
 }
.sub-header + .sub-content section:first-child { padding-top: 0; } 
.sub-content { position: relative; } 
.sub-content .container > .btn { margin-inline: auto; } 
.sub-content section { position: relative; min-height: 300px; padding-block: clamp(60px, 4.5vw, 100px); } 
:is(#hp_main, .sub-content) .sub-vat { position: absolute; right: 0; bottom: -26px; color: var(--hp-color-gray-500); font-size: 13px; } 
.sub-content .title-h3 { margin-bottom: clamp(40px, 3vw, 60px); } 
.sub-content .title-h3 h3 { text-align: center; font-size: clamp(26px, 3vw, 38px); font-weight: 600; color: var(--hp-color-gray-800); line-height: 1.4; } 
.sub-content .title-h4 { margin-bottom: 25px; } 
.sub-content .title-h4 h4 { font-size: clamp(22px, 3vw, 28px); font-weight: 600; color: var(--hp-color-gray-800); letter-spacing: -0.8px; } 
@media (max-width: 767.98px){
 .sub-content .title-h4 h4 { text-align: center; } 
 }
@media (max-width: 399.98px){
 .sub-header .title p br { display: none; } 
 }
.sub-content .title-h4 h4 span.color { color: var(--hp-color-primary); } 
.sub-content [class*="title"] p.point { margin-top: 10px; color: var(--hp-color-primary); font-size: 20px; font-weight: 600; letter-spacing: -0.3px; } 
.sub-content .title-h5 { margin-bottom: 20px; } 
.sub-content :not([class*="title"]) + .title-h5 { margin-top: 50px; } 
.sub-content .title-h5 h5 { font-size: 24px; font-weight: 600; color: var(--hp-color-gray-800); letter-spacing: -0.7px; } 
@media (max-width: 767.98px){
 .sub-banner { z-index: 1000; position: relative; justify-content: center; background-color: var(--hp-color-primary); padding: 15px 20px; } 
 .sub-banner.top { z-index: 3000; transition: 0.5s; position: fixed; left: 0; width: 100%; top: var(--hp-nav-height); } 
 .sub-banner h5 { color: #fff; text-align: center; font-size: clamp(15px, 3.5vw, 19px); } 
 }
.table-wrap { position: relative; } 
.table-wrap table { width: 100%; caption-side: bottom; border-collapse: collapse; border-radius: var(--hp-rounded-1); } 
.table-wrap table :where(th, td) { box-sizing: border-box; padding: clamp(13px, 1vw, 17px); text-align: center; vertical-align: middle; line-height: 1.4; letter-spacing: -0.3px; font-size: clamp(14px, 1vw, 16px); } 
.table-wrap thead { background-color: #2553cb; } 
.table-wrap thead th { color: #fff; font-weight: 600; font-size: clamp(15px, 1vw, 18px); border: 1px solid #5d88fa; border-top: none; } 
.table-wrap thead th small { display: inline-block; font-weight: 400; font-size: 15px; margin-top: 5px; } 
.table-wrap tbody tr td { border: 1px solid var(--hp-color-gray-300); } 
.table-wrap tbody th { background-color: var(--hp-color-gray-100); font-weight: 500; border-bottom: 1px solid var(--hp-color-gray-300); } 
.table-wrap tbody td small { font-size: clamp(13px, 0.8vw, 14px); color: var(--hp-color-gray-600); } 
.table-wrap :is(td, th):first-child { border-left: 0; } 
.table-wrap :is(td, th):last-child { border-right: 0; } 
.table-wrap caption.vat { caption-side: top; color: #777; font-size: 13px; font-weight: 400; text-align: right; padding-bottom: 10px; margin-top: -23px; } 
.table-wrap tfoot td { font-size: clamp(14px, 1vw, 16px); font-weight: 400; text-align: center; color: var(--hp-color-primary); padding-bottom: 0; padding-top: 22px; } 
@media (max-width: 767.98px){
 .responsive-box + .caption { justify-content: center; text-align: center; font-size: 16px; margin-top: 40px; } 
 }
.li-cir { display: flex; flex-direction: column; gap: 3px; } 
.li-cir li { position: relative; color: var(--hp-color-gray-600); font-size: clamp(14px, 2vw, 15px); line-height: 1.3; } 
.li-cir li:not(.no-mark) { padding-left: 0.7em; } 
.li-cir li:not(.no-mark)::before { content: ""; position: absolute; left: 0; top: 0.45em; display: block; width: 0.25em; aspect-ratio: 1; border-radius: 50%; background-color: #9e9e9e; } 
.li-cir a { font-weight: 600; color: var(--hp-color-primary); font-size: 1em; } 
.li-cir.imp{gap: 7px;}
.li-cir.imp li::before{top: 0.5em;}
.li-cir.imp li{ font-size: clamp(16px, 3vw, 18px); font-weight: 600; letter-spacing: -0.025em;}
.li-num { display: flex; flex-direction: column; gap: 3px; margin-left: 20px; } 
.li-num li { position: relative; color: var(--hp-color-gray-600); font-size: 15px; line-height: 1.5; list-style-type: decimal; } 
.list-wrap { display: flex; flex-direction: column; gap: 30px; } 
.list-wrap h5 { margin-bottom: 20px; font-size: clamp(18px, 3vw, 20px); font-weight: 600; } 
[role="tabpanel"]:not(.on) { display: none; opacity: 0; } 
.tab-type01 { display: flex; border-bottom: 1px solid var(--hp-color-gray-300); } 
.tab-type01 .tab { flex: 1; display: flex; justify-content: center; align-items: center; height: 60px; font-size: 18px; letter-spacing: -0.5px; color: #888; font-weight: 500; } 
.tab-type01 .tab.on { font-weight: 600; margin-bottom: -3px; padding-top: 3px; border-bottom: 3px solid var(--hp-color-primary); color: var(--hp-color-gray-800); } 
.hp-form-group { display: flex; align-items: center; gap: clamp(7px, 1vw, 10px); } 
.hp-select-form { position: relative; height: 40px; } 
.hp-select-form input { display: none; } 
.hp-search-form,
.hp-select-form .select-btn { cursor: pointer; width: 100%; height: 100%; border: 1px solid #d5d6da; border-radius: 3px; padding-inline: 13px 8px; display: flex; align-items: center; justify-content: space-between; gap: 7px; font-size: 14px; } 
.hp-search-form input,
.hp-select-form .select-btn p { font-size: inherit; color: var(--hp-color-gray-800); white-space: nowrap; } 
.hp-search-form:focus-within,
.hp-select-form .select-btn:focus,
.hp-select-form.on .select-btn { border-color: #9e9e9e; } 
.hp-select-form .select-option-list { --max-height-on: 120px; z-index: 50; transition: max-height 0.25s, opacity 0s; position: absolute; overflow: hidden; background-color: #fff; margin-top: 0; width: 100%; border: 1px solid #d5d6da; max-height: 0; opacity: 0; } 
.hp-select-form.on .select-option-list { display: block; border-radius: 3px; margin-top: 3px; box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1); opacity: 1; max-height: var(--max-height-on); } 
:is(#hp_main.price, #hp_price) .select-option-list { --max-height-on: 120px; } 
#hp_inquiry .select-option-list { --max-height-on: 460px; } 
.hp-select-form .select-option { cursor: pointer; width: 100%; font-size: 13px; color: #1e1e1e; display: block; padding: 4px 15px; line-height: clamp(25px, 3vw, 30px); text-align: left; } 
.hp-select-form .select-option:hover { background: #f4f4f6; } 
.hp-select-form input:checked + span { background-color: #f4f4f6; color: var(--hp-color-gray-800); } 
.hp-search-form { align-items: stretch; padding-inline: 13px 10px; } 
.hp-search-form input { flex: 1; width: auto; } 
@media (max-width: 767.98px){
 .hp-search-form input { width: 0; } 
 }
.hp-search-form input::placeholder { color: #9e9e9e; } 
.hp-search-form .hp-icon-search { flex: 0 1 auto; display: flex; justify-content: center; align-items: center; width: 24px; } 
.hp-search-form .hp-icon-search::after { width: 18px; height: 18px; background-position: -900px -400px; } 
@media (max-width: 767.98px){
 .hp-search-form { width: auto; flex: 1; } 
 }
.hp-check-form { display: flex; gap: 20px 45px; } 
.hp-check-form label input { display: none; } 
.hp-check-form label span { cursor: pointer; display: flex; align-items: center; color: var(--hp-color-gray-800); font-size: clamp(15px, 2vw, 16px); font-weight: 400; letter-spacing: -0.64px; line-height: 1; } 
.hp-check-form label input[type="radio"] + span::before { content: ""; box-sizing: border-box; display: block; transform: translateY(-1px); width: clamp(17px, 2vw, 22px); height: auto; aspect-ratio: 1; margin-right: 8px; border-radius: 9999px; border: 1px solid var(--hp-color-gray-400); } 
.hp-check-form label input[type="radio"]:checked + span::before { border: clamp(4px, 0.5vw, 6px) solid var(--hp-color-primary); } 
.hp-check-form label input[type="checkbox"] + span::before { content: ""; display: block; transform: translateY(-1px); width: 28px; height: 28px; margin-right: 10px; border-radius: var(--hp-rounded-1); border: 1px solid var(--hp-color-gray-400); } 
.hp-check-form label input[type="checkbox"]:checked + span::before { border-color: var(--hp-color-primary); background-color: var(--hp-color-primary); background-image: var(--hp-img-sprite); background-position: -993px -392px; } 
@media (max-width: 767.98px){
 .hp-check-form { flex-wrap: wrap; flex-direction: column; gap: 15px; } 
 }
#pagenation { display: flex; align-items: center; width: fit-content; margin: 83px auto 0; gap: 25px; } 
#pagenation .page-list { display: flex; gap: clamp(12px, 2vw, 18px); align-items: center; } 
#pagenation .page-list a { display: flex; line-height: 1; font-size: clamp(16px, 2vw, 20px); color: #9e9e9e; } 
#pagenation .page-list li { line-height: 1; } 
#pagenation .page-list li:not([class]) { display: none; } 
#pagenation .page-list li.on a { color: #222; font-weight: 600; } 
#pagenation .page-btn { font-size: 0; } 
#pagenation [rel="prev"]:hover span::after { background-position-x: -200px; } 
#pagenation [rel="next"]:hover span::after { background-position-x: -300px; } 
@media (max-width: 767.98px){
 #pagenation { margin-top: 30px; position: sticky; bottom: 85px; background-color: rgba(255, 255, 255, 0.97); backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px); padding: 5px 17px; border-radius: 4px; opacity: 1; translate: none; } 
 #pagenation :is(.num:first-child, .num:nth-child(2)) { margin-left: -12px; } 
 #pagenation .num_tag + .num { margin-right: -12px; } 
 }
[id*="hp_service"] section.visual { position: relative; overflow: hidden; display: flex; align-items: center; height: 690px; padding-block: 66px 61px; } 
[id*="hp_service"] section.banner { padding-block: 60px; background-color: #f7f7f7; position: relative; overflow: hidden; } 
[id*="hp_service"] section.area .title-h3 { margin-bottom: 40px; } 
[id*="hp_service"] section:is(.recommend, .method, .choice) { background-color: #f8f9fb; } 
#hp_service_university section.recommend,
[id*="hp_service"] section.choice { border-top: 1px solid var(--hp-color-gray-200); } 
[id*="hp_service"] section.composition { overflow: hidden; } 
[id*="hp_service"] section.composition .title-h3 { margin-bottom: 50px; } 
[id*="hp_service"] section.composition .btn { margin-top: clamp(24px, 1.5vw, 40px); } 
[id*="hp_service"] section.process { z-index: 100; padding-bottom: 80px; background-color: #deedfe; } 
[id*="hp_service"] section.process .title-h3 { margin-bottom: 75px; } 
[id*="hp_service"] section.process img { display: block; margin-inline: auto; } 
[id*="hp_service"] section.data .btn { margin-top: 50px; } 
[id*="hp_service"] section.reference { padding-bottom: 80px; background-color: #f7f7f7; } 
.visual-wrap { display: flex; gap: 50px; } 
.visual-wrap .col { flex: 1; } 
.visual-wrap .col.info { flex: 0 1 460px; align-self: center; } 
#hp_btn_tpl_top_portfolio { --hp-btn-width: 250px; --hp-btn-height: 70px; font-size: clamp(18px, 3vw, 20px); gap: 20px; box-shadow: 0 8px 20px #c8d0eb; padding-right: 25px; } 
#hp_btn_tpl_top_portfolio::before { content: ""; display: block; background-image: var(--hp-img-sprite); background-position: -600px -800px; width: 23px; height: 32px; } 
.visual-wrap .col.img-box img { display: block; margin-left: auto; } 
@media (min-width: 992px){
 #hp_service_customize .visual-wrap .img-box { margin-right: -360px; } 
 #hp_service_university .visual-wrap .img-box { margin-right: -60px; } 
 }
.visual-wrap .title { margin-bottom: 30px; } 
.visual-wrap .title span.cate { font-size: clamp(17px, 3vw, 22px); font-weight: 600; color: var(--hp-color-primary); letter-spacing: -0.8px; } 
.visual-wrap .title h2 { position: relative; width: fit-content; margin-top: 5px; margin-bottom: clamp(10px, 0.8vw, 20px); font-size: clamp(30px, 7vw, 52px); font-weight: 700; color: var(--hp-color-black); } 
.visual-wrap .title .badge { position: absolute; margin-left: 15px; top: 50%; transform: translateY(-50%); white-space: nowrap; padding: 12px 13px; border-radius: 9999px; background-color: #f7f7f7; font-size: 13px; color: #333; font-weight: 700; line-height: 1; letter-spacing: -0.04em; } 
.visual-wrap .title .badge.event { background-color: #fff734; } 
.visual-wrap .title .badge.event::after { content: ""; display: block; background: var(--hp-badge-flower) no-repeat center/cover; width: 19px; height: 20px; position: absolute; right: -14px; top: -9px; } 
.visual-wrap .title p { margin-bottom: clamp(35px, 2vw, 45px); font-size: clamp(16px, 1.2vw, 19px); font-weight: 400; color: #333; } 
@media (min-width: 992px){
 #hp_service_university .visual-wrap .title p { margin-right: -200px; } 
 }
.visual-wrap .total-box { position: relative; display: flex; justify-content: space-between; align-items: center; gap: 30px; padding: 19px 40px 23px; margin-bottom: 30px; border-radius: var(--hp-rounded-1); border: 1px solid var(--hp-color-gray-200); } 
.visual-wrap .total-box ul { color: #777; font-size: 15px; font-weight: 400; text-align: left; } 
.visual-wrap .inquiry-btn-wrap { position: relative; display: grid; grid-template-columns: repeat(2,1fr); gap: 9px; margin-top: 61px;} 
.visual-wrap .inquiry-btn-wrap a{width: 100%; min-height : 60px;}
.inquiry-btn-wrap #hp_btn_cst_top_inquiry{}

.visual-wrap .total-box ul li { font-size: clamp(13px, 1vw, 15px); } 
.visual-wrap .total-box ul li span.cost{ display: inline-block; margin-right: 5px;}
.visual-wrap .total-box ul li span.sale{ text-decoration: line-through;}
.visual-wrap .total-box ul li:nth-child(1) b {color: #444;}
.visual-wrap .total-box ul li:nth-child(2) b {color: var(--hp-color-primary); font-size: 110%;}
.visual-wrap .total { display: flex; align-items: flex-end; } 
.visual-wrap .total * { line-height: 1; } 
.visual-wrap .total .text { font-size: clamp(17px, 1vw, 20px); font-weight: 600; color: var(--hp-color-gray-800); margin: 0 10px 2px; } 
.visual-wrap .total .value { color: var(--hp-color-primary); vertical-align: baseline; } 
.visual-wrap .total .num { display: inline-block; font-size: clamp(34px, 5vw, 45px); font-weight: 700; transform: translateY(3px); } 
.visual-wrap .total .disc { font-size: clamp(20px, 1.5vw, 25px); font-weight: 700; } 
.visual-wrap .total .unit { font-size: clamp(18px, 2vw, 25px); font-weight: 700; } 
.visual-wrap .caption { color: var(--hp-color-gray-600); font-size: 15px; font-weight: 400; margin-bottom: 15px; } 
@media (max-width: 767.98px) { [id*="hp_service"] section.visual { height: auto; padding-top: 40px; } 
 .visual-wrap .col.img-box img { width: 90%; margin-inline: auto; } 
 .visual-wrap { flex-direction: column-reverse; align-items: center; text-align: center; } 
 .visual-wrap:has(.badge) { gap: 80px; } 
 .visual-wrap .col.info { flex: 0 1 350px; } 
 .visual-wrap .total-box { margin-bottom: 50px; } 
 .visual-wrap .btn { margin-inline: auto; min-width: 100%;} 
 .visual-wrap .title h2 { width: 100%; } 
 .visual-wrap .title .badge { position: absolute; display: block; width: fit-content; margin: 0; transform: translateX(-50%); top: -75px; left: 49%; } 
 }
@media (max-width: 575.98px){
 .visual-wrap .total-box { padding: 16px 16px 20px; gap: 15px; } 
 }
#hp_service_customize .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;}
#hp_service_customize .section.service .container{ display: flex; gap: clamp(50px, 7vw, 110px);}
#hp_service_customize .section.service .title { width: 370px; z-index: 100; padding-top: 0; margin-bottom: 150px;}
#hp_service_customize .section.service .title h2 { font-weight: 700; color: var(--hp-color-black);}
#hp_service_customize .section.service .title h4 { margin-block: 35px 20px; font-size: 22px; letter-spacing: -0.8px; line-height: 1.4;}
#hp_service_customize .section.service .title p { color: var(--hp-color-gray-600); letter-spacing: -0.3px; margin-top: 20px;}

#hp_service_customize .section.device .container{ align-self: stretch; display: flex; flex-direction: column;}
#hp_service_customize .dark :where(h1, h2, h3, h5, p, li){ color: var(--hp-color-white);}
#hp_service_customize .dark h3{ font-size: clamp(27px, 3vw, 38px); text-align: center;}
#hp_service_customize .section.device { background-color: #112d6e; text-align: center; z-index: 10; padding-bottom: 0; } 
#hp_service_customize .section.device > .fp-tableCell { padding-bottom: 0; } 
#hp_service_customize .section.device .container { align-self: stretch; display: flex; flex-direction: column; } 
#hp_service_customize .section.device .title { margin-block: 0px 25px; } 
#hp_service_customize .section.device .title h4 { margin-top: 5px; font-size: 18px; color: #fff; font-weight: 400; } 
#hp_service_customize .res-wrap .res-card h5{ color : #333}
#hp_service_customize .res-wrap .res-card p{ color : #666}
.banner-wrap { text-align: center; } 
.banner-wrap .title-h4 { margin-bottom: 30px; } 
.banner-wrap h4 { font-weight: 600; font-size: clamp(20px, 3vw, 28px); } 
.banner-wrap p { margin-top: 15px; font-weight: 400; color: #355ba5; font-size: clamp(14px, 1vw, 16px); } 
.area-wrap .area-view { padding: 70px 75px; background-color: #f8f9fb; } 
.area-wrap .tab-pane.on { display: flex; align-items: flex-start; gap: 60px; } 
.area-wrap .img-box { display: flex; border: 1px solid #eaeaea; box-shadow: 4px 4px 16px 0 rgba(0, 0, 0, 0.06); } 
.area-wrap .info { display: flex; flex-direction: column; padding-top: 7px; gap: 20px; } 
.area-wrap .item { counter-increment: itemNum; position: relative; padding-left: 32px; } 
.area-wrap .item:before { content: counter(itemNum, decimal); position: absolute; left: 0; top: 0; display: flex; justify-content: center; align-items: center; width: 22px; border-radius: 9999px; aspect-ratio: 1; font-size: 14px; font-weight: 700; color: #fff; background-color: #0085ff; } 
.area-wrap .item h5 { margin-bottom: 5px; font-size: 16px; } 
.area-wrap .item p { font-size: 15px; color: #666; } 
.area-wrap .caption { color: #1c54e4; font-size: 15px; font-weight: 400; } 
.recommend-wrap { display: flex; padding-top: 20px; } 
.recommend-wrap .col { flex: 1; text-align: center; padding-inline: 30px; } 
.recommend-wrap .col .icon-box { width: fit-content; margin-inline: auto; } 
.recommend-wrap .col p { margin-top: clamp(15px, 2vw, 35px); font-size: clamp(16px, 1.5vw, 19px); color: var(--hp-color-gray-800); letter-spacing: -0.5px; } 
@media (max-width: 767.98px){
 .recommend-wrap { flex-wrap: wrap; justify-content: center; gap: 50px 40px; } 
 .recommend-wrap .col { flex: 0 1 40%; padding: 0; } 
 .recommend-wrap .col img { transform: scale(0.8); } 
 .recommend-wrap br { display: none; } 
 }
@media (max-width: 575.98px){
 .recommend-wrap { flex-direction: column; gap: 36px; } 
 .recommend-wrap br { display: block; } 
 }
.method-wrap { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; } 
.method-wrap .col { display: flex; align-items: center; height: 190px; gap: 40px; padding: 30px 40px 30px 60px; background-color: #fff; box-shadow: 4px 4px 16px 0 rgba(0, 0, 0, 0.06); border-radius: var(--hp-rounded-1); } 
.method-wrap .info { flex: 1; } 
.method-wrap h5 { font-weight: 600; font-size: clamp(20px, 3vw, 24px); margin-bottom: 10px; letter-spacing: -0.5px; } 
.method-wrap p { color: var(--hp-color-gray-600); font-size: clamp(14px, 1.2vw, 16px); } 
@media (max-width: 767.98px){
 .method-wrap { display: flex; flex-direction: column; max-width: 550px; margin-inline: auto; } 
 .method-wrap .col { height: auto; } 
 }
@media (max-width: 575.98px){
 .method-wrap .col { flex-flow: column; align-items: center; padding: 26px 24px; gap: 20px; text-align: center; } 
 .method-wrap .col img { transform: scale(0.9); } 
 .method-wrap br { display: none; } 
 }
.sitemap-wrap .sitemap-tab { display: flex; justify-content: center; gap: 10px; margin-bottom: 50px; margin-top: -15px; } 
.sitemap-wrap .btn { width: 180px; color: #777; font-size: 16px; } 
.sitemap-wrap .btn:hover { color: var(--hp-color-primary); } 
.sitemap-wrap .btn.on { background-color: var(--hp-color-primary); border-color: var(--hp-color-primary); color: #fff; } 
.sitemap-wrap h5 { text-align: center; font-weight: 600; margin-bottom: 30px; color: var(--hp-color-primary); } 
.sitemap-box { display: flex; align-items: flex-start; gap: 20px; } 
.sitemap-box .item { flex: 0 1 20%; padding: 25px 20px; border: 1px solid var(--hp-color-gray-300); border-top-width: 2px; border-top-color: var(--hp-color-primary); border-radius: 0 0 var(--hp-rounded-1) var(--hp-rounded-1); } 
.sitemap-box h6 { color: var(--hp-color-gray-800); font-weight: 500; font-size: 18px; margin-bottom: 18px; padding-bottom: 22px; border-bottom: 1px solid var(--hp-color-gray-300); text-align: center; } 
.sitemap-box h6:only-child { margin-bottom: 0; padding-bottom: 0; border-bottom: 0; } 
.sitemap-box h6 small { font-size: 15px; } 
.sitemap-box .item > ul { margin-inline: auto; width: fit-content; text-align: center; } 
.sitemap-box .item > ul.text-left { text-align: left; } 
.sitemap-box .item li { font-size: 15px; color: #666; margin-top: 5px; } 
.sitemap-box .item ul.li-cir { margin-left: 5px; gap: 0; } 
.choice-wrap { display: grid; gap: 16px; } 
:where(#hp_service_template) .choice-wrap { grid-template-columns: repeat(6, minmax(0, 1fr)); } 
:where(#hp_service_customize) .choice-wrap { grid-template-columns: repeat(5, minmax(0, 1fr)); } 
@media (max-width: 767.98px){
 :is(.choice-wrap) { grid-template-columns: repeat(3, minmax(0, 1fr)); } 
 }
@media (max-width: 767.98px){
 :is(.choice-wrap) { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; } 
 }
.choice-wrap .col { background-color: #fff; display: flex; justify-content: center; align-items: center; height: clamp(70px, 5vw, 90px); gap: 15px; border-radius: var(--hp-rounded-1); box-shadow: 0 0 30px rgba(0, 0, 0, 0.02); } 
.choice-wrap .col p { font-size: clamp(15px, 3vw, 20px); font-weight: 500; color: var(--hp-color-gray-800); } 
.service-wrap { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 60px 30px; } 
@media (max-width: 767.98px){
 .service-wrap { grid-template-columns: repeat(4, minmax(0, 1fr)); } 
 }
@media (max-width: 767.98px){
 .service-wrap { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px 30px; } 
 }
@media (max-width: 575.98px){
 .service-wrap { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 25px 10px; } 
 }
.service-wrap .col { text-align: center; } 
.service-wrap h5 { color: var(--hp-color-gray-800); font-size: 20px; font-weight: 600; margin-top: clamp(0, 0.8vw, 10px); margin-bottom: clamp(8px, 0.8vw, 12px); letter-spacing: -0.5px; } 
.service-wrap p { font-size: clamp(13px, 1.2vw, 15px); font-weight: 400; color: #777; line-height: 1.5; } 
.refer-wrap { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(20px, 2vw, 30px); margin-bottom: clamp(30px, 5vw, 55px); } 
@media (max-width: 767.98px){
 .refer-wrap { grid-template-columns: repeat(2, minmax(0, 1fr)); } 
 .refer-wrap a { pointer-events: none; } 
 .responsive-box img { min-width: 1200px; padding-bottom: 20px; } 
 }
@media (max-width: 575.98px){
 .refer-wrap { grid-template-columns: repeat(1, minmax(0, 1fr)); } 
 }
.hp-category { margin-top: clamp(30px, 5vw, 50px); } 
.hp-category .item { display: flex; justify-content: center; flex-wrap: wrap; } 
.hp-category .item + .item { margin-top: 20px; } 
.hp-category label { padding-inline: 20px; } 
.hp-category label + label { border-left: 1px solid #d4d4d4; } 
.hp-category label input { display: none; } 
.hp-category label span { cursor: pointer; display: block; color: #333; font-size: clamp(15px, 2vw, 16px); font-weight: 400; letter-spacing: -0.64px; } 
.hp-category label input:checked + span { color: var(--hp-color-primary); font-weight: 600; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; } 
@media (max-width: 767.98px){
 .hp-category label { padding-inline: 0; } 
 .hp-category label + label { border-left: 0; } 
 .hp-category .item { gap: 13px 22px; } 
 .hp-category .item + .item { margin-top: 13px; } 
 }
[id^="hp_portfolio"] .hp-form-group { position: absolute; height: clamp(42px, 5vw, 46px); right: 15px; top: 10px; } 
@media (max-width: 767.98px) { [id^="hp_portfolio"] .hp-form-group { z-index: 1000; position: relative; right: 0; top: 0; margin-inline: auto; margin-top: 30px; } 
 }
 #hp_portfolio .gallery-wrap{ gap: 81px 58px;}
 #hp_portfolio .sub-header .title h2{ color : #000; font-weight: 700; font-size: clamp(32px, 6vw, 46px); line-height: 1; letter-spacing: 0.06em;}
 #hp_portfolio .gallery-wrap .thumb{ position: relative; border: 1px solid #e0e0e0; box-shadow: none;}
 #hp_portfolio .gallery-wrap .thumb::before{ transition: all 0.25s ease; opacity: 0; font-weight: 600; font-size: 45px; color: #fff; background: rgba(0,0,0,0.5); position: absolute; content: "\f3dd"; display: flex; align-items: center; justify-content: center; font-family: "Material Symbols Outlined"; left: 0; top: 0; width: 100%; height: 100%;}
 #hp_portfolio .gallery-wrap .thumb:hover::before{opacity: 1;}
 #hp_portfolio .gallery-wrap .detail-box{ display: none;}
 .modal-content{ max-width: 1200px; margin: 0 auto; position: relative; box-shadow: 6px 12px 40px 0 rgba(0, 0, 0, 0.20);}
 .modal-content .close-modal{ position: absolute; content: ""; right: 30px; top: 30px;}
 .modal-body .detail-top{ display: grid; grid-template-columns: 390px 1fr; gap : 50px; padding: 70px 70px 60px; background: #fff;}
 .modal-body .detail-top .detail-btn-wrap{ display: flex; justify-content: center; gap : 10px; margin-top: 25px;}
 .modal-body .detail-top .detail-btn-wrap a{ color: #fff; font-size: 16px; font-weight: 500; line-height: 1; letter-spacing: -0.02em; display: flex; gap: 10px; min-width: 165px; min-height: 54px; justify-content: center;}
 .modal-body .detail-top .detail-btn-wrap a:nth-child(2){ background: #222;}
 .modal-body .detail-top .detail-btn-wrap a span{ display: flex; width: 24px; aspect-ratio: 1; align-items: center; justify-content: center;}
 .detail-tit{ margin-bottom: 30px; margin-top: 20px;}
 .detail-tit h5{ color: #000; font-weight: 600; font-size: 34px; line-height: 1; letter-spacing: -0.03em; margin-bottom: 10px;}
 .detail-tit .portfolio-link{ display: flex; gap : 8px; align-items: center;}
 .detail-tit .portfolio-link img{}
 .detail-tit .portfolio-link a{ color: #777; font-size: 14px; line-height: 1.3; letter-spacing: 0;}
 .detail-point{ margin-bottom: 35px;}
 .detail-point ul{ display: grid; grid-template-columns: 0.8fr 1fr; gap: 7px 20px;}
 .detail-point ul li{display: flex; gap: 20px; align-items: center; font-size: 15px; font-weight: 400; line-height: 1.3; color: #333; letter-spacing: -0.03em;}
 .detail-point ul li span{font-weight: 700;  letter-spacing: -0.02em;}
 .detail-desc{}
 .detail-desc p{ color : #666; font-weight: 400; line-height: 1.7; letter-spacing: -0.02em;}
 .detail-design{background: #F4F4F4;}
 [id^="hp_portfolio"] .hp-form-group > div { height: 100%; } 
[id^="hp_portfolio"] .hp-form-group :is(.hp-select-form.select-btnp, .hp-search-forminput) { font-size: 15px; } 
.port-wrap .port-box { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(10px, 3vw, 70px) clamp(10px, 2vw, 40px); } 
:is(.port-wrap .thumb, .refer-wrap .col) { overflow: hidden; position: relative; aspect-ratio: 384/255; background: rgba(0, 0, 0, 0.3); border: 1px solid #e5e5e6; display: block; border-radius: 6px; transition: border-color 0.3s ease; } 
:is(.port-wrap .thumb, .refer-wrap .col) img { display: flex; 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); } 
:is(.port-wrap .thumb, .refer-wrap .col):hover { border-color: var(--hp-color-gray-700); } 
:is(.port-wrap .thumb, .refer-wrap .col):hover img { object-position: bottom; } 
:is(.port-wrap .thumb, .refer-wrap .col)::after { transition: 0.5s; content: "+"; z-index: 10; position: absolute; box-sizing: border-box; left: 0; top: 0; width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; color: #fff; font-weight: 150; opacity: 0; font-size: 100px; background-color: rgba(0, 0, 0, 0.6); line-height: 1; padding-bottom: 100px; } 
:is(.port-wrap .thumb, .refer-wrap .col):hover::after { transition: 1s 1s; opacity: 1; padding-bottom: 10px; } 
.landing-gallery-wrap .swiper-slide a.empty,
:is(.port-wrap .thumb, .refer-wrap .col) .empty { transition: 0.25s; border: 0 !important; } 
.landing-gallery-wrap .swiper-slide a.empty:hover,
:is(.port-wrap .thumb, .refer-wrap .col) .empty:hover { background-color: rgba(0, 0, 0, 0.35); } 
.landing-gallery-wrap .swiper-slide a.empty::before,
:is(.port-wrap .thumb, .refer-wrap .col) .empty::before { content: var(--hp-name); font-size: clamp(1.7rem, 1vw, 2.5rem); font-weight: 700; color: rgba(255, 255, 255, 0.3); text-align: center; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); } 
:is(.port-wrap.thumb, .refer-wrap .col) .empty::after { content: none; } 
.port-wrap .port-info { padding-block: 20px 25px; text-align: center; } 
.port-wrap .port-info p { margin-top: 4px; font-size: clamp(13px, 0.8vw, 15px); font-weight: 400; color: var(--hp-color-gray-500); } 
.port-wrap .port-btn-wrap { display: flex; gap: 10px; } 
.port-wrap .port-btn-wrap .btn { flex: 1; --hp-btn-width: auto; } 
@media (max-width: 767.98px){
 #hp_portfolio .gallery-wrap{gap: 115px;}
 .port-wrap .port-box { position: relative; overflow: hidden; grid-template-columns: repeat(2, minmax(0, 1fr)); } 
 .port-wrap .thumb { pointer-events: none; } 
 .port-wrap .port-btn-wrap { display: none; } 
 #hp_portfolio_template .sub-banner { margin-top: -50px; } 
 .gallery-wrap .caption { margin-top: 5px;}
 .gallery-wrap span.catogori { margin-top: 0;}
}
@media (max-width: 575.98px){
 .port-wrap .port-box { grid-template-columns: repeat(1, minmax(0, 1fr)); } 
 }
.no-content { z-index: 1000; position: relative; display: flex; justify-content: center; align-items: center; flex-direction: column; padding-block: 100px; grid-column: span 3; } 
.no-content h5 { font-size: clamp(22px, 3vw, 24px); margin-left: 10px; } 
.receipt-wrap { display: grid; grid-template-columns: minmax(0, auto) minmax(0, 430px); grid-template-areas: "view info"; align-items: flex-start; gap: 45px; margin-bottom: 100px; } 
.receipt-wrap .hp-check-form { gap: 20px; justify-content: flex-end; } 
@media (max-width: 767.98px){
 .receipt-wrap .hp-check-form { flex-direction: row; } 
 }
.receipt-view { transition: 0.5s; grid-area: view; position: relative; display: grid; grid-template-columns: minmax(0, 80px) minmax(0, 630px); gap: 15px; align-items: flex-start; } 
.receipt-view .receipt-sub-thumb { position: relative; } 
.receipt-view .receipt-sub-thumb .swiper-wrapper:not(:has(.swiper-slide)) { background-color: rgba(0, 0, 0, 0.3); border-radius: 4px; } 
.receipt-view .receipt-sub-thumb .swiper { height: 360px; padding-bottom: 10px; } 
.receipt-view .receipt-sub-thumb [role="button"] { position: static; width: 100%; height: auto; margin: 0; opacity: 0.6; } 
.receipt-view .receipt-sub-thumb [role="button"].swiper-button-prev { padding-bottom: 15px; margin-bottom: 5px; } 
.receipt-view .receipt-sub-thumb [role="button"].swiper-button-next { margin-top: 5px; padding-bottom: 15px; } 
.receipt-view .receipt-sub-thumb [role="button"]:hover { opacity: 1; } 
.receipt-view .receipt-sub-thumb [role="button"]::after { content: ""; display: block; width: 12px; height: 7px; background-image: var(--hp-img-sprite); } 
.receipt-view .receipt-sub-thumb [role="button"].swiper-button-prev::after { background-position: -700px -800px; } 
.receipt-view .receipt-sub-thumb [role="button"].swiper-button-next::after { background-position: -800px -800px; } 
.receipt-view .receipt-sub-thumb .swiper-slide { position: relative; cursor: pointer; width: auto; height: 100%; } 
.receipt-view .receipt-sub-thumb img { transition: 0.25s; width: 100%; height: 100%; object-fit: cover; object-position: top; filter: brightness(0.8); border-radius: 4px; border: 1px solid transparent; } 
.receipt-view .receipt-sub-thumb :is(.swiper-slide:hover, .swiper-slide-thumb-active) img { filter: brightness(1); border-color: #222; box-shadow: 0 4px 4px rgba(0, 0, 0, 0.25); } 
.receipt-view .receipt-main-thumb:not(:has(.swiper-slide)) { height: 100%; background-color: rgba(0, 0, 0, 0.3); } 
.receipt-view .receipt-main-thumb:not(:has(.swiper-slide))::after { content: "10PAGE"; font-size: 42px; font-weight: 700; color: rgba(255, 255, 255, 0.5); text-align: center; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); } 
.receipt-view .receipt-main-thumb .swiper { height: auto; width: 100%; margin-inline: auto; } 
.receipt-view .swiper-slide { background-size: cover; background-position: center; } 
.receipt-view .swiper-slide img { display: block; } 
.receipt-view .receipt-main-thumb { transition: 0.5s; position: relative; overflow: hidden; width: 100%; max-width: 100%; display: flex; border-radius: 6px; } 
.receipt-view .receipt-main-thumb .swiper-slide { transition-delay: 0.11s; opacity: 0 !important; padding-inline: 15px; } 
.receipt-view .receipt-main-thumb .swiper-slide-active { transition-delay: 0s; opacity: 1 !important; } 
.receipt-view .receipt-main-thumb img { background-color: #eee; border-radius: 6px; border: 1px solid transparent; box-shadow: 4px 4px 16px 0 rgba(0, 0, 0, 0.06); } 
.receipt-info { grid-area: info; align-self: flex-start; display: flex; align-items: flex-start; padding-block: 35px; flex-direction: column; align-items: stretch; border-radius: var(--hp-rounded-1); border: 1px solid var(--hp-color-gray-400); } 
.receipt-info .receipt-inner { z-index: 10; flex: 1; position: relative; display: flex; flex-direction: column; gap: 40px; } 
.receipt-info :is(.receipt-inner, .receipt-footer) { padding-inline: 35px; } 
.receipt-info .receipt-inner::-webkit-scrollbar { width: 2px; } 
.receipt-info .receipt-inner::-webkit-scrollbar-thumb { background-color: #aaa; } 
.receipt-info .receipt-inner::-webkit-scrollbar-track { background-color: var(--hp-color-gray-300); } 
.receipt-box h4 { padding-bottom: 10px; margin-bottom: 20px; font-size: 20px; font-weight: 600; line-height: 1; border-bottom: 1px solid var(--hp-color-gray-400); color: var(--hp-color-gray-800); } 
.receipt-box dl { display: flex; flex-direction: column; gap: 15px; } 
.receipt-box .item { display: grid; grid-template-columns: minmax(0, auto) minmax(0, auto); align-items: center; gap: 15px; } 
.receipt-box#hp_template_receipt_add .item { grid-template-columns: minmax(0, 3fr) minmax(0, 7fr); } 
.receipt-box :is(dt, dd) { line-height: 1; } 
.receipt-box dt { color: #858585; font-size: 14px; letter-spacing: -0.02em; font-weight: 500; } 
.receipt-box dd { font-size: 15px; text-align: right; letter-spacing: -0.02em; color: var(--hp-color-gray-800); } 
.receipt-box p { font-size: 16px; margin-left: auto; } 
.receipt-box .label { position: relative; display: inline-block; color: var(--hp-color-primary); background-color: #e2f0ff; font-size: 13px; font-weight: 600; padding: 5px 7px; margin-right: 13px; letter-spacing: -0.02em; border-radius: 4px; } 
.receipt-box .label::after { content: ""; display: block; position: absolute; transform: translateY(-50%); top: 50%; right: -9px; background-color: #e2f0ff; width: 10px; height: 10px; clip-path: polygon(100% 49%, 0 0, 0 100%); } 
.receipt-box .sale { display: inline-block; font-weight: 500; color: #888; font-size: 14px; text-decoration: line-through; margin-right: 5px; } 
.receipt-box #hp_host_option { min-height: 23px; } 
.receipt-box #hp_host_option .value { font-weight: 700; } 
.receipt-box .files { display: flex; justify-content: flex-end; gap: 5px; } 
.receipt-box .files a { display: flex; align-items: center; gap: 5px; padding: 6px 7px; border: 1px solid #d4d4d4; border-radius: 4px; font-weight: 600; font-size: 13px; line-height: 1; } 
.receipt-box .files .word a { color: #1857b9; } 
.receipt-box .files .ppt a { color: #d24a27; } 
.receipt-box .files a::after,
.receipt-box .files a::before { content: ""; display: block; background-image: var(--hp-img-sprite); } 
.receipt-box .files a::before { width: 16px; height: 16px; } 
.receipt-box .files .word a::before { background-position: -900px -800px; } 
.receipt-box .files .ppt a::before { background-position: -1100px -800px; } 
.receipt-box .files a::after { width: 10px; height: 12px; margin-left: 5px; } 
.receipt-box .files .word a::after { background-position: -1000px -800px; } 
.receipt-box .files .ppt a::after { background-position: 0 -900px; } 
.receipt-box .hp-select-form { width: fit-content; margin-left: auto; } 
.receipt-box#hp_template_receipt_add .sum-info .num { color: var(--hp-color-gray-800); margin-right: 2px; font-weight: 500; } 
.receipt-box#hp_template_receipt_add .text .num { color: var(--hp-color-primary); font-weight: 500; } 
.receipt-box .total { align-items: flex-end; } 
.receipt-box .total dt { font-size: 18px; font-weight: 600; color: var(--hp-color-gray-800); } 
.receipt-box .total .num { display: inline-block; font-size: 24px; font-weight: 700; transform: translateY(2px); color: var(--hp-color-primary); } 
.receipt-box .total .unit { font-weight: 700; } 
.receipt-footer { margin-top: 40px; } 
.receipt-info .submit-box { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } 
.receipt-info .submit-box .btn { --hp-btn-width: 100%; } 
.receipt-info .submit-box .btn-primary:first-child { grid-column: span 2; } 
.receipt-info .submit-box .btn-secondary { --hp-btn-height: 52px; font-size: 16px; } 
.caution-box { display: flex; flex-direction: column; align-items: center; gap: 25px; padding: 40px; margin-top: 40px; background-color: #fef9e8; } 
.caution-box h4 { display: inline-flex; align-items: center; font-size: 28px; gap: 6px; line-height: 1; } 
.caution-box h4::before { content: ""; display: block; width: 28px; height: 28px; background-image: var(--hp-img-sprite); background-position: -100px -900px; } 
#hp_portfolio_receipt .caution-box ul { gap: 5px; } 
#hp_portfolio_receipt .caution-box li { font-size: 16px; padding-left: 0.9em; color: #222; } 
#hp_portfolio_receipt .caution-box li::before { width: 0.32em; background-color: #333; } 
#hp_price section.compare { background-color: #f8f9fb; } 
#hp_price section.function { background-color: #24428e; } 
#hp_price section.function h3 { color: #fff; } 
#hp_price .se01 { padding-bottom: 120px; text-align: center; } 
#hp_price .se04 { padding-top: 80px; } 
#hp_price .se04 .title-h3 { margin-bottom: 40px; } 
#hp_price .se04 .title-h3 p { text-align: center; } 
.cost-wrap { position: relative; display: flex; width: fit-content; margin-inline: auto; gap: 40px; } 
.cost-wrap .hp-select-form { width: fit-content; border: 1px solid #d5d6da;border-radius: 3px;padding-inline: 15px 17px; display: flex;align-items: center;justify-content: space-between;gap: 7px;font-size: 14px; background-color: #f7f7f7;} 
.cost-wrap .hp-select-form p{    font-size: inherit; color: var(--hp-color-gray-800); white-space: nowrap;}
.cost-wrap .cost-title .inner{ text-align: left;}
.cost-wrap .cost-title h4 { font-size: clamp(26px, 4vw, 34px); font-weight: 600; color: var(--hp-color-gray-800); } 
.cost-wrap .cost-title p { font-size: clamp(16px, 3.5vw, 18px); font-weight: 400; color: #222; } 
.cost-wrap .cost-title .month p{padding: 5px 15px; border: 1px solid #eaeaea; border-radius: 9999px; font-size: 14px;}
.cost-wrap .cost-title span.label { display: inline-block; color: #de5000; background-color: #fffba5; font-size: clamp(12px, 3vw, 16px); font-weight: 600; padding: 7px 12px 5px; margin-top: 10px; letter-spacing: -0.02em; } 
@media (max-width: 575.98px){
 .cost-wrap .cost-title span.label { padding-block: 6px; } 
 }
.cost-wrap .col { width: 450px; min-height: 570px; display: flex; padding: clamp(30px, 5vw, 45px)  clamp(20px, 5vw, 45px) clamp(20px, 5vw, 40px) clamp(20px, 5vw, 45px); flex-direction: column; align-items: stretch; border-radius: 8px; border: 1px solid var(--hp-color-gray-400); background-color: #fff;  } 
.cost-wrap .col.template { --hp-cost-color-main: var(--hp-color-primary-light); --hp-cost-color-main-hover: var(--hp-color-primary-light-hover); } 
.cost-wrap .col.customize { --hp-cost-color-main: var(--hp-color-primary); --hp-cost-color-main-hover: var(--hp-color-primary-hover); } 
.cost-wrap .col.university { --hp-cost-color-main: var(--hp-color-primary); --hp-cost-color-main-hover: var(--hp-color-primary-hover); } 
@media (max-width: 767.98px){
 .cost-wrap .col.university { --hp-cost-color-main: #1143c2; --hp-cost-color-main-hover: #0b38a8; } 
 }
.cost-wrap .col > div { padding-block: clamp(20px, 5vw, 25px); } 
.cost-wrap .col > div + div { border-top: 1px solid var(--hp-color-gray-300); } 
.cost-wrap .col > div:first-child { padding-top: 0; } 
.cost-wrap .col > div:last-child { padding-bottom: 0; } 
.cost-body { display: flex;  align-items: flex-start; gap: 0 20px; justify-content: space-between;} 
.col.university .cost-body { flex: 1; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; } 
.col.university .cost-body h5 { font-size: clamp(28px, 3vw, 38px); font-weight: 700; color: var(--hp-cost-color-main); margin-bottom: 25px; } 
.cost-body .cost-detail { grid-row: 2; margin-top: 10px;} 
.cost-body .cost-detail .imp{color: var(--hp-color-primary);}
.cost-body .cost-detail small{font-size: 14px; color: #888; display: inline-block; margin-top: 5px;}
.cost-body .cost-detail dl { display: flex; flex-direction: column; gap: 7px; margin-top: 0px; } 
.cost-body .cost-detail dl > div { display: flex; gap: 5px; } 
.cost-body .cost-detail dt{ width: 80px; flex-shrink: 0; }
.cost-body .cost-detail :where(dt, dd) { font-size: clamp(14px, 3vw, 16px); line-height: 1; color: var(--hp-color-800); } 
.cost-body .cost-detail .sale { font-weight: 500; color: #888; text-decoration: line-through; margin-right: 5px; display: none; } 
.month12 .cost-body .cost-detail .sale { display: inline-block; } 
.cost-body .cost-detail .value { font-weight: 700; } 
.cost-body .cost-total { grid-row: span 2; text-align: left; width: fit-content; } 
.cost-body .cost-total h5 { font-size: clamp(18px, 3vw, 20px); font-weight: 600; color: var(--hp-color-gray-800); line-height: 1; margin-bottom: 3px; } 
.cost-body .cost-total .value { font-weight: 700; font-size: clamp(18px, 4vw, 28px); color: var(--hp-cost-color-main); line-height: 1; white-space: nowrap; } 
.cost-body .cost-total .num { display: inline-block; font-size: clamp(38px, 10vw, 64px); margin-right: 3px; transform: translateY(3px); line-height: 1;} 
.cost-offer { flex: 1; } 
.cost-offer dl { display: flex; flex-direction: column; gap: 14px; } 
.cost-offer :is(dt, dd) { line-height: 1; font-size: clamp(13px, 3vw, 15px); font-weight: 400; } 
.cost-offer dt { color: var(--hp-color-gray-500); } 
.cost-offer dd { color: var(--hp-color-gray-800); } 
.cost-offer dd a { color: inherit; font-size: inherit; line-height: 1;}
/* .cost-offer dd a:hover{text-decoration: underline;} */
.cost-offer div { display: flex; justify-content: space-between; gap: 30px; } 
.cost-btn-wrap { display: flex; gap: 10px; } 
.cost-btn-wrap .btn { --hp-btn-background-color: var(--hp-cost-color-main); --hp-btn-width: auto; --hp-btn-height: 60px; flex: 1 1 50%; } 
.cost-btn-wrap .btn-secondary { --hp-btn-height: 58px; } 
.cost-btn-wrap .btn:hover { --hp-btn-background-color: var(--hp-cost-color-main-hover); } 
@media (max-width: 767.98px){
 :is(#hp_main .price, #hp_price) .sub-tab { border-bottom: 1px solid var(--hp-color-gray-300); gap: 0; overflow-x: auto; justify-content: flex-start; } 
 :is(#hp_main .price, #hp_price) .sub-tab .tab { flex: 1; display: flex; justify-content: center; align-items: center; height: 50px; font-size: 16px; padding-inline: 15px; letter-spacing: -0.5px; color: #888; font-weight: 500; white-space: nowrap; } 
 :is(#hp_main .price, #hp_price) .sub-tab .tab.on { font-weight: 600; margin-bottom: -3px; padding-top: 3px; border-bottom: 3px solid var(--hp-color-primary); color: var(--hp-color-gray-800); } 
 .cost-tab .tab-pane { width: 100%; } 
 .cost-body .cost-total h5 { color: var(--hp-cost-color-main); } 
 .cost-wrap { width: auto; flex-direction: column; } 
 .cost-wrap .col { width: 100%; min-height:  0px; } 
 .cost-wrap .hp-select-form { grid-column: span 2; width: 100%; margin-bottom: 5px; } 
 .cost-body .cost-total { display: flex; align-items: flex-end; gap: 7px; } 
 .cost-btn-wrap .btn { --hp-btn-height: 50px; --hp-btn-width: auto; min-width: var(--hp-btn-width);}  
}
 .cost-wrap .col.customize .cost-title .discount{position: absolute; top: -17px;}
.cost-wrap .col.customize .cost-title{display: flex; align-items: flex-end; justify-content: space-between;}
 .cost-wrap .col.customize > div + div{border: 0; padding: 0; text-align:  left;  align-items: flex-start; margin-top: auto;}
  .cost-wrap .col.customize .cost-body{margin-bottom: 32px;}
 .cost-wrap .col.customize .cost-offer dl{padding: 20px; background-color: #f7f7f7; margin-bottom: 20px;}
.prod-table { --table-col: 430px; width: 100%; } 
.prod-table :is(thead, tbody) tr { display: grid; grid-template-columns: minmax(0, auto) repeat(2, minmax(0, var(--table-col))); position: relative; } 
.prod-table :is(th, td) { display: flex; justify-content: center; align-items: center; } 
.prod-table :is(thead th, tbody td) { text-align: center; } 
.prod-table thead { z-index: 5; position: sticky; top: calc(var(--hp-nav-height) + 10px); background-color: #f8f9fb; } 
.prod-table thead th { height: clamp(50px, 5vw, 60px); font-size: clamp(17px, 3vw, 22px); font-weight: 600; color: var(--hp-color-white); } 
.prod-table th.template { background-color: var(--hp-color-primary-light); } 
.prod-table th.customize { background-color: var(--hp-color-primary); } 
.prod-table tbody tr + tr { border-top: 1px solid var(--hp-color-gray-200); } 
.prod-table tbody th { justify-content: flex-start; text-align: left; padding-left: 30px; font-weight: 400; } 
.prod-table tbody td { background-color: var(--hp-color-white); height: clamp(50px, 3vw, 54px); } 
.prod-table tbody :is(th, td) { font-size: clamp(15px, 2vw, 16px); } 
.prod-table tbody tr:hover th { background-color: #e8f1fb; } 
.prod-table tbody tr:hover td { background-color: #eff7ff; } 
@media (max-width: 767.98px){
 .prod-table { --table-col: 200px; width: auto; min-width: 590px; } 
 .prod-table thead { position: static; top: 0; } 
 .prod-table tbody th { padding-left: 15px; } 
 }
.only-func-wrap { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; } 
.only-func-wrap .sub-vat { color: var(--hp-color-white); } 
.only-func-wrap + .btn { margin-top: 60px; } 
.only-func-wrap .col { display: flex; flex-direction: column; height: 370px; padding: 50px 33px 35px; background-color: #243264; border-radius: var(--hp-rounded-1); color: var(--hp-color-white); text-align: left; } 
.only-func-wrap h5 { margin-block: 28px 12px; font-size: 20px; font-weight: 600; color: var(--hp-color-white); } 
.only-func-wrap p { font-size: 15px; font-weight: 300; } 
.only-func-wrap span.value { margin-top: auto; font-weight: 600; font-size: 15px; letter-spacing: -0.9px; line-height: 1.5; } 
.only-func-wrap small{display: inline-block; margin-top: 10px; opacity: 0.8;}
@media (max-width: 767.98px){
 .only-func-wrap { grid-template-columns: repeat(3, minmax(0, 1fr)); } 
 .only-func-wrap .col { height: auto; } 
 .only-func-wrap { grid-template-columns: repeat(1, minmax(0, 1fr)); } 
 }
:where(.inquiry-wrap, .inquiry-wrap .inq-list) { display: flex; flex-direction: column; } 
.inquiry-wrap { gap: 80px; } 
.inquiry-wrap .btn { margin-inline: auto; } 
.inquiry-wrap .inq-list { gap: 35px; } 
.inquiry-wrap :is(h4, h5, h6) { font-weight: 600; color: var(--hp-color-gray-800); } 
.inquiry-wrap h4 { font-size: clamp(22px, 3vw, 28px); padding-bottom: 10px; margin-bottom: 35px; border-bottom: 1px solid var(--hp-color-gray-800); } 
.inquiry-wrap h5 { font-size: 20px; margin-bottom: 12px; } 
.inquiry-wrap h6 { font-size: 16px; margin-bottom: 8px; } 
.inquiry-wrap small.reqs { font-size: 13px; font-weight: 400; color: var(--hp-color-primary); } 
.inquiry-wrap small.reqs::before { content: "(필수)"; } 
.inquiry-wrap span.desc { display: inline-block; font-size: clamp(14px, 2vw, 15px); font-weight: 400; margin-left: 9px; } 
.inquiry-wrap h4 span.desc { color: var(--hp-color-gray-600); font-weight: 500; } 
.inquiry-wrap h5 span.desc { color: #777; } 
.inquiry-wrap :is(.hp-search-forminput, input, textarea, .select-btn) { width: 100%; height: 48px; padding: 10px 10px 10px 15px; border: 1px solid var(--hp-color-gray-400); border-radius: var(--hp-rounded-1); font-size: clamp(14px, 2vw, 15px); position: relative; z-index: 1; } 
.inquiry-wrap .hp-select-form .select-option { font-size: clamp(14px, 2vw, 15px); } 
.inquiry-wrap :is(.hp-search-forminput, input, textarea)::placeholder { user-select: none; color: #9e9e9e; font-weight: 400; line-height: 1.5; } 
.inquiry-wrap :is(.hp-search-forminput, input, textarea, .select-btn):is(:focus),
.inquiry-wrap :is(.hp-select-form .on, .hp-select-form .focus, .hp-select-form:hover) .select-btn { border-color: #9e9e9e; z-index: 2; } 
.inquiry-wrap .item :is(textarea) { resize: block; padding: clamp(15px, 2vw, 20px) 10px 10px clamp(15px, 2vw, 25px); min-height: 160px; max-height: 350px; font-family: inherit; } 
.inquiry-wrap .hp-select-form { height: auto; } 
.inquiry-wrap #hp_inq_option_etc { display: none; } 
.inquiry-wrap .item.row { display: flex; flex-wrap: wrap; gap: 20px 30px; } 
.inquiry-wrap .item.row .col { flex: 1 1 45%; } 
.inquiry-wrap .input-row { position: relative; display: flex; } 
.inquiry-wrap .input-row .hp-select-form { position: static; } 
.inquiry-wrap .input-row > * { flex: 1; } 
.inquiry-wrap .input-row > * + input { margin-left: -1px; border-top-left-radius: 0; border-bottom-left-radius: 0; } 
.inquiry-wrap .etc .input-row .select-btn { border-top-right-radius: 0; border-bottom-right-radius: 0; } 
@media (max-width: 767.98px){
 .inquiry-wrap span.desc { display: block; margin-left: 0; } 
 .inquiry-wrap .item.row { display: flex; flex-direction: column; } 
 .inquiry-wrap .etc .hp-select-form { flex: 0; } 
 .inquiry-wrap .agree .hp-check-form label span { justify-content: center; margin-right: 15px; } 
 }
.inquiry-wrap .upload-wrap { display: flex; align-items: center; padding: 10px 20px 10px 10px; background-color: #f7f7f7; border: 1px solid var(--hp-color-gray-400); gap: 15px; border-radius: var(--hp-rounded-1); } 
.inquiry-wrap .file-btn { padding: 12px 25px; font-size: 15px; font-weight: 500; color: var(--hp-color-gray-800); background-color: #fff; border: 1px solid var(--hp-color-gray-400); border-radius: var(--hp-rounded-1); } 
.inquiry-wrap .file-form { flex: 1; display: flex; align-items: center; justify-content: space-between; font-size: clamp(13px, 2vw, 16px); color: #777; font-weight: 400; line-height: 1.3; } 
@media (max-width: 767.98px){
 .inquiry-wrap .upload-wrap { padding: 5px; flex-direction: column; text-align: center; } 
 .inquiry-wrap .upload-wrap .file-btn { width: 100%; } 
 .inquiry-wrap .file-form { flex-direction: column; gap: 5px; padding-inline: 10px; padding-bottom: 10px; } 
 }
.inquiry-wrap .file-size { font-size: 0.8em; font-weight: 500; } 
.inquiry-wrap .file-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 15px; gap: 15px; } 
@media (max-width: 767.98px){
 .inquiry-wrap .file-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } 
 }
@media (max-width: 575.98px){
 .inquiry-wrap .file-list { grid-template-columns: repeat(1, minmax(0, 1fr)); } 
 }
.inquiry-wrap .file-list li { display: flex; align-items: center; gap: 8px; padding: 10px 10px 10px 12px; border-radius: var(--hp-rounded-1); border: 1px solid var(--hp-color-gray-300); } 
.inquiry-wrap .file-list li:hover { border-color: #bbb; } 
.inquiry-wrap .file-list .name { overflow: hidden; position: relative; font-size: 14px; white-space: nowrap; text-overflow: ellipsis; } 
.inquiry-wrap .file-list .size { font-size: 13px; color: #777; margin-left: auto; } 
.inquiry-wrap .file-list .delete { cursor: pointer; } 
.inquiry-wrap .file-list .delete::before { content: ""; display: block; width: 20px; height: 20px; background-image: var(--hp-img-sprite); filter: brightness(0.4); background-position: -198px -498px; scale: 0.7; } 
.inquiry-wrap .file-list .delete:hover::before { filter: brightness(0); } 
.inquiry-wrap .item.agree a { font-weight: 500; color: var(--hp-color-gray-800); } 
.inquiry-wrap .item.agree a:hover { text-decoration: underline; } 
#hp_inquiry_ok section { display: flex; text-align: center; justify-content: center; align-items: center; height: max(600px, calc(100vh - var(--hp-nav-height))); } 
#hp_inquiry_ok img { margin-inline: auto; width: clamp(300px, 50vw, 419px); } 
#hp_inquiry_ok p { font-size: clamp(22px, 3vw, 28px); font-weight: 700; margin-block: 30px; } 
#hp_inquiry_ok small { display: block; margin-top: 5px; font-size: 0.7em; opacity: 0.5; } 
@media (max-width: 767.98px){
 #hp_inquiry_ok .btn { margin-bottom: 50px; } 
 }
#hp_guide section.title { overflow: hidden; text-align: center; min-height: unset; margin-bottom: 0; padding-bottom: 0; } 
#hp_guide section.title .title-h4 { margin-bottom: 60px; } 
#hp_guide section.process { background-color: #deedfe; } 
#hp_guide section.ready .title-h3 { margin-bottom: 50px; } 
#hp_guide section.check { background-color: #f8f9fb; } 
#hp_guide section.check .title-h3 { margin-bottom: 20px; } 
.process-wrap { position: relative; display: grid; grid-template-columns: minmax(0, 100px) minmax(0, auto); max-width: 750px; margin-inline: auto; column-gap: 30px; } 
.process-wrap .progress-bar { transition: 1.25s ease; position: absolute; z-index: 1; left: 234px; width: 18px; height: 0; background: linear-gradient(to top, #1c54e5, #c8e0fe); border-radius: 0 0 9999px 9999px; } 
@supports selector(.process-wrap:has(.active)){
 .process-wrap:has(.c02.active) .progress-bar { height: 260px; } 
 .process-wrap:has(.c03.active) .progress-bar { height: 500px; } 
 .process-wrap:has(.c04.active) .progress-bar { height: 750px; } 
 .process-wrap:has(.c05.active) .progress-bar { height: 1000px; } 
 .process-wrap:has(.c06.active) .progress-bar { height: 1250px; } 
 .process-wrap:has(.c07.active) .progress-bar { height: 1500px; } 
 .process-wrap:has(.c08.active) .progress-bar { height: 1750px; } 
 .process-wrap:has(.c09.active) .progress-bar { height: 1980px; } 
 .process-wrap:has(.c10.active) .progress-bar { height: 2200px; } 
 }
@supports not (selector(.process-wrap:has(.active))){
 .process-wrap .ani { opacity: 1 !important; transform: unset !important; translate: unset !important; } 
 .process-wrap .week { height: 100% !important; } 
 .process-wrap .progress-bar { height: 100% !important; } 
 }
.process-wrap .week { position: relative; display: flex; justify-content: center; align-items: center; grid-column: 1; margin-block: 20px -17px; height: 0; } 
.process-wrap .week.ani.active { opacity: 0; } 
.process-wrap:has(.c03.active) .week.w01 { opacity: 1; height: 100%; } 
.process-wrap:has(.c06.active) .week.w02 { opacity: 1; height: 100%; } 
.process-wrap:has(.c09.active) .week.w03 { opacity: 1; height: 100%; } 
.process-wrap .week h5 { transition: 1s 0.5s; z-index: 5; font-size: 30px; font-weight: 900; background-color: #deedfe; line-height: 1; padding-block: 15px; color: #fff; } 
.process-wrap .week::before { content: ""; position: absolute; right: 0; top: 0; width: 30%; margin-right: 20%; height: 100%; border-radius: 15px 0 0 15px; border: 3px solid #fff; border-right: 0; } 
.process-wrap .week.w01 { grid-row: 1 / span 2; } 
.process-wrap .week.w02 { grid-row: 4 / span 2; } 
.process-wrap .week.w03 { grid-row: 7 / span 2; } 
.process-wrap .col { position: relative; counter-increment: itemNum; z-index: 5; grid-column: 2; display: grid; grid-template-columns: minmax(0, 70px) minmax(0, 45px) minmax(0, auto); align-items: flex-start; padding-bottom: 100px; gap: 20px; } 
.process-wrap .col.end { padding-bottom: 0 !important; } 
.process-wrap .col::before { transition: 1s 1s; content: ""; position: absolute; border: 1px solid #fff; border-left: 0; border-top: 0; width: 12px; height: 12px; rotate: 45deg; left: 107px; top: 54%; opacity: 0; } 
.process-wrap .col.active::before { opacity: 1; } 
.process-wrap span.target { display: flex; justify-content: center; align-items: center; width: 70px; height: 35px; border-radius: 9999px; background-color: var(--hp-color-primary); color: #fff; margin-top: 5px; font-size: 15px; } 
.process-wrap span.target.hidden { opacity: 0; } 
.process-wrap span.num { position: relative; display: flex; aspect-ratio: 1; justify-content: center; align-items: center; border-radius: 9999px; background-color: var(--hp-color-primary); color: #fff; font-size: 20px; font-weight: 600; box-shadow: 5px 5px 18px rgba(37, 92, 230, 0.25); } 
.process-wrap .tenpage span.num { box-shadow: 5px 5px 18px rgba(129, 167, 210, 0.25); } 
.process-wrap .end span.num { background-color: #1144c9; } 
.process-wrap .end span.num::after { transition: 1s 1s; z-index: 1; content: ""; display: block; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%) scale(0); width: 45px; height: 45px; border-radius: 9999px; border: 10px solid rgba(37, 92, 230, 0.25); } 
.process-wrap .end.ani.active span.num::after { transform: translate(-50%, -50%) scale(1); } 
.process-wrap span.num::before { z-index: 10; content: counter(itemNum, decimal) ""; } 
.process-wrap .info { padding-left: 20px; } 
.process-wrap .info h5 { font-size: 26px; margin-bottom: 25px; color: var(--hp-color-gray-800); font-weight: 600; letter-spacing: -0.8px; } 
.process-wrap .info p { color: var(--hp-color-gray-600); } 
.process-wrap .tenpage :is(span.target, span.num) { background-color: #fff; color: #9ba0b0; } 
.ready-wrap { display: flex; flex-direction: column; gap: 20px; } 
.ready-wrap .col { display: flex; align-items: center; gap: 40px; height: 115px; border: 1px solid var(--hp-color-gray-300); border-radius: var(--hp-rounded-1); overflow: hidden; } 
.ready-wrap .icon-box { flex-basis: 360px; align-self: stretch; display: flex; padding-left: 85px; align-items: center; gap: 30px; background-color: #f8f9fb; } 
.ready-wrap .info { flex: 1; } 
.ready-wrap h5 { font-size: 20px; font-weight: 600; } 
.ready-wrap p { color: var(--hp-color-gray-600); } 
.check-wrap { position: relative; overflow: hidden; display: flex; background-color: #fff; align-items: center; height: 140px; padding-block: 25px; border-radius: var(--hp-rounded-1); box-shadow: 4px 4px 16px rgba(0, 0, 0, 0.06); } 
.check-wrap .col { flex: 1; display: flex; align-self: stretch; justify-content: center; align-items: center; gap: 20px; padding-right: 10px; } 
.check-wrap .col + .col { border-left: 1px solid var(--hp-color-gray-200); } 
@media (max-width: 767.98px){
 #hp_guide { padding-top: 140px; } 
 }
#hp_maintenance section { padding-block: 0; } 
#hp_maintenance section:first-child{ padding-bottom: 0px; }
#hp_maintenance section:last-child { padding-bottom: 120px; } 
#hp_maintenance section + section { padding-top: 100px; } 
.step-wrap { overflow: hidden; display: flex; align-items: center; padding-block: 50px 50px; border: 1px solid var(--hp-color-gray-400); border-radius: var(--hp-rounded-1); } 
.step-wrap .arrow::before { content: ""; display: block; width: 24px; height: 42px; background-image: var(--hp-img-sprite); background-position: -1100px -700px; } 
@media (max-width: 767.98px){
 .step-wrap { flex-direction: column; padding: 40px; gap: 20px; } 
 .step-wrap .arrow::before { rotate: 90deg; scale: 0.8; } 
 #hp_maintenance .se02 { padding-bottom: 100px; } 
 }
.step-wrap .col { flex: 1; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; } 
.step-wrap span.step { font-weight: 700; font-size: 20px; color: #3069fe; } 
.step-wrap span[class*="hp-icon"] { display: flex; justify-content: center; align-items: center; margin-block: 18px 20px; width: 90px; height: 90px; border-radius: 9999px; background-color: #f7f7f7; } 
.step-wrap h5 { font-size: 24px; font-weight: 600; margin-bottom: 12px; letter-spacing: -0.7px; } 
.step-wrap p { color: var(--hp-color-gray-600); } 
.step-wrap + .btn { display: flex; margin: 40px auto 0; } 
.range-wrap { display: flex; gap: 20px; } 
.range-wrap .col { flex: 1; display: flex; flex-direction: column; border: 1px solid #d4d4d4; border-radius: var(--hp-rounded-1); overflow: hidden; } 
.range-wrap .icon { display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 17px; padding-top: 15px; height: 170px; } 
.range-wrap h5 { font-size: 22px; color: #222; font-weight: 600; } 
.range-wrap .info { flex: 1 1 130px; display: flex; flex-direction: column; padding: 30px; background-color: var(--hp-color-gray-100); } 
.range-wrap .info ul { height: 100%; flex: 1; display: flex; flex-direction: row; align-content: center; gap: 7px 20px; flex-wrap: wrap; } 
.range-wrap .info ul li { font-size: 15px; font-weight: 400; color: var(--hp-color-gray-600); letter-spacing: -0.3px; } 
.range-wrap .info small { font-size: 14px; color: #777; font-weight: 400; } 
.range-wrap + .caption { margin-top: 20px; font-size: 15px; color: #666; } 
@media (max-width: 767.98px){
 .range-wrap { flex-direction: column; } 
 .range-wrap + .caption p { text-align: center; font-size: 14px; } 
 .range-wrap .info small { margin-top: 5px; } 
 }
.explain-wrap { display: flex; align-items: center; justify-content: space-between; background-color: #f8f9fb; padding: 40px 50px; margin-bottom: 20px; border-radius: var(--hp-rounded-1); } 
.explain-wrap p { color: var(--hp-color-gray-600); font-weight: 400; } 
.explain-wrap .btn { padding-inline: 20px; } 
/* #hp_mtce_cost_list { display: none; }  */
#hp_mtce_cost_list .mtce-tab { margin-bottom: 30px; } 
#hp_mtce_cost_list p.caption{    caption-side: top; color: #777; font-size: 15px; font-weight: 400; text-align: right; padding-bottom: 10px; margin-top: 10px;}
#hp_maintenance_list { margin-bottom: 50px; } 
#hp_maintenance_list #pagenation { margin-top: 50px; } 
#hp_maintenance_list table p { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } 
#hp_maintenance_list thead th { font-size: 16px; border: none; } 
#hp_maintenance_list tbody td { border: none; border-bottom: 1px solid var(--hp-color-gray-300); font-size: 15px; } 
#hp_maintenance_list tbody :is(.num, .subject) { color: #222; } 
#hp_maintenance_list tbody :is(.company, .date) { color: #777; } 
#hp_maintenance_list .num p { width: 100px; } 
#hp_maintenance_list .subject p { width: 500px; } 
#hp_maintenance_list .company p { width: 200px; } 
#hp_maintenance_list .date p { width: 200px; } 
#hp_maintenance_list .badge { display: inline-flex; justify-content: center; align-items: center; width: 65px; height: 26px; font-size: 14px; font-weight: 600; color: #fff; background-color: #579dff; border-radius: var(--hp-rounded-1); } 
#hp_maintenance_list .badge.checking { background-color: #2553cb; } 
#hp_maintenance_list .badge.progress { background-color: #ff6955; } 
#hp_maintenance_list .badge.complete { background-color: #9e9e9e; } 
#hp_landing .btn { border-radius: 9999px; } 
#hp_landing section { overflow: hidden; position: relative; padding-bottom: clamp(90px, 10vw, 130px); background-position: center; background-repeat: no-repeat; background-size: cover; } 
#hp_landing section.se02 { display: flex; align-items: center; /* padding-top: clamp(30px,10vw,50px); */
 } 
@media (min-width: 768px) and (max-height: 750px){
 #hp_landing section.se02 { height: auto; padding-block: 100px 150px; } 
 }
@media (max-width: 767.98px){
 #hp_landing section.se02 { /* padding-top:70px; */
 height: auto; padding-block: 50px 70px; } 
 }
#hp_landing section.se02 { padding-top:clamp(70px, 13.1vw, 130px); background-image: var(--hp-landing-section02-bg); background-position: bottom; } 
#hp_landing section.se01 { padding-top: clamp(40px, 6.01vw, 60px); padding-bottom: clamp(100px, 16.1vw, 160px);  background-image: var(--hp-landing-section03-bg); background-position: top; background-size: contain; } 
#hp_landing .title { text-align: center; margin-bottom: clamp(30px, 3vw, 60px); } 
#hp_landing .title h1 { /*font-size: clamp(28px, 5vw, 54px);*/font-size: clamp(26px, 4.81vw, 48px); font-weight: 700; color: var(--hp-color-gray-900); letter-spacing: -0.03em;} 
#hp_landing .title h2 { font-weight: 700; font-size: clamp(28px, 4.81vw, 48px); color: var(--hp-color-gray-900);letter-spacing: -0.03em;line-height: 1.2;} 
#hp_landing .title > * + * { margin-top: clamp(5px, 2vw, 10px); } 
#hp_landing .title ul { display: flex; flex-wrap: wrap; justify-content: center; gap: 5px clamp(15px, 3vw, 30px); } 
#hp_landing .title ul li { color: #4891ff; font-size: clamp(15px, 3vw, 22px); font-weight: 600; } 
/* #hp_landing .se02 .btn { --hp-btn-width: clamp(200px, 20vw, 240px); --hp-btn-height: clamp(55px, 4vw, 70px); margin: clamp(35px, 5vw, 45px) auto 0px; box-shadow: 0 15px 20px rgba(28, 85, 228, 0.43); font-size: clamp(18px, 3vw, 20px); }  */
#hp_landing .se02 .title { margin-block: 0 clamp(60px, 10vw, 100px); } 
#hp_landing .se02 .title h4 { margin-top: 5px; font-size: clamp(20px, 3vw, 26px); letter-spacing: -0.035em; } 
#hp_landing .se01 .title h2 { font-size: clamp(24px, 4.61vw, 46px); letter-spacing: -0.04em;line-height: 1.35;} 
#hp_landing .se01 .title h2 span.color{display: block;font-size: clamp(32px, 5.41vw, 54px);}
.landing-gallery-wrap { --landing-swiper-margin-inline: clamp(60px, 4vw, 90px); position: relative; overflow: visible; margin-inline: -15px; } 
.landing-gallery-wrap .modal-info { display: none; } 
.landing-gallery-wrap .swiper { overflow: visible; margin-left: calc((var(--landing-swiper-margin-inline) * 2) * -1); } 
.landing-gallery-wrap.active .swiper-slide { transition: scale 0.75s, margin 0.75s; padding-inline: clamp(10px, 0.9vw, 30px); } 
.landing-gallery-wrap .swiper-slide-active { z-index: 100; scale: 1.3; transform-origin: center center; margin-inline: var(--landing-swiper-margin-inline); } 
/* .modal-disappear .landing-gallery-wrap .swiper-slide-active { transform-origin: center center !important; transition: none !important; scale: 1.5 !important; opacity: 1 !important; } */
.landing-gallery-wrap .swiper-slide:not(.swiper-slide-active, .swiper-slide-prev, .swiper-slide-next) a { opacity: 0.4; user-select: none; pointer-events: none; } 
.landing-gallery-wrap .swiper-indicators-wrap { display: flex; justify-content: center; align-items: center; margin-top: clamp(50px, 10vw, 65px); } 
.landing-gallery-wrap .swiper-pagination { width: fit-content; position: static; } 
.landing-gallery-wrap [class*="swiper-button"] { width: 250px; height: 100%; top: 0; } 
.landing-gallery-wrap .swiper-button-prev { left: -1px; } 
.landing-gallery-wrap .swiper-button-next { right: -1px; } 
.landing-gallery-wrap [class*="swiper-button"]::after { display: none; } 
.landing-gallery-wrap .swiper-pagination-bullet { background-color: #cccccc; opacity: 1; } 
.landing-gallery-wrap .swiper-pagination-bullet-active { background-color: #8f8f8f; } 
.landing-gallery-wrap .thumb { transition: 0.5s, scale 0.5s; display: flex; width: 100%; height: 100%; overflow: hidden; position: relative; aspect-ratio: 350/215; background: rgba(0, 0, 0, 0.3); border-radius: var(--hp-rounded-1); box-shadow: 6px 6px 22px rgba(0, 0, 0, 0.15); } 
.landing-gallery-wrap .swiper-slide-active .thumb { box-shadow: 6px 12px 40px rgba(0, 0, 0, 0.22); } 
.landing-gallery-wrap .thumb + .thumb { margin-top: 20px; } 
.landing-gallery-wrap .thumb img { width: 100%; height: 100%; object-fit: cover; object-position: top; transition: object-position 2s 0.35s cubic-bezier(0.38, 0.03, 0.39, 0.96); } 
/* [hover] PC 환경에서만 :hover 효과 적용 */
@media (hover: hover){
 .landing-gallery-wrap .thumb:hover { scale: 1.05; border-color: var(--hp-color-gray-700); } 
 .landing-gallery-wrap .thumb:hover { border-color: var(--hp-color-gray-700); } 
 /* .landing-gallery-wrap .thumb:hover img { object-position: bottom; }  */
 /* .landing-gallery-wrap .thumb:hover::after { transition: 1s 1.25s; opacity: 1; padding-bottom: 10px; }  */
 .landing-gallery-wrap .thumb:hover::after {opacity: 1;} 
}
.landing-gallery-wrap .thumb::after { content:"자세히 보기"; white-space: pre; z-index: 10; position: absolute; box-sizing: border-box; left: 0; top: 0; width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; color: #fff; font-weight: 600; opacity: 0; font-size: 22px; background-color: rgba(0, 0, 0, 0.6); line-height: 1; padding-bottom: 0px; } 
/* .landing-gallery-wrap .thumb::after { transition: 0.5s; content: var(--title); white-space: pre; z-index: 10; position: absolute; box-sizing: border-box; left: 0; top: 0; width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; color: #fff; font-weight: 600; opacity: 0; font-size: 22px; background-color: rgba(0, 0, 0, 0.6); line-height: 1; padding-bottom: 100px; }  */
@media (max-width: 1199.98px){
 .landing-gallery-wrap .thumb { /* pointer-events: none; */}
 .landing-gallery-wrap [class*="swiper-button"] { display: none; } 
 }
@media (max-width: 767.98px){
#hp_landing .se01 .title h2 span.color{display: block;}
#hp_landing .se02 .title { margin-bottom: 60px; margin-top: 20px; } 
 .landing-gallery-wrap {--landing-swiper-margin-inline: 50px; margin-inline: -120px; } 
 }
@media (max-width: 575.98px){
 .landing-gallery-wrap { --landing-swiper-margin-inline: 30px; margin-inline: -180px; } 
 }
.modal-open #landing_modal { display: flex; justify-content: center; align-items: center; } 
@media (max-height: 700px){
 .modal-open #landing_modal { align-items: flex-start; } 
 }
#landing_modal > .modal-dialog { transition: scale 0.5s; } 
.modal-open #landing_modal > .modal-dialog { max-width: 1230px; width: 100%; transform-origin: var(--dir-x) center; animation: landingModalIn 0.75s forwards; padding: 15px; } 
@keyframes landingModalIn { 
 0% { scale: 0.85; } 
 100% { scale: 1; } 
 }
#landing_modal .modal-content { overflow: hidden; background-color: #fff; max-width: 1200px; width: 100%; height: 680px; border-radius: var(--hp-rounded-2); box-shadow: 6px 12px 40px rgba(0, 0, 0, 0.2); } 
#landing_modal .modal-content .close { position: absolute; right: 30px; top: 30px; } 
#landing_modal .modal-inner { height: 100%; position: relative; } 
#landing_modal .modal-body { overflow: hidden; height: 100%; } 
#landing_modal .modal-info { display: flex; height: 100%; } 
#landing_modal .modal-info .img-box { overflow-y: auto; scrollbar-width: thin; max-width: 720px; width: 100%; height: 100%; flex-shrink: 0; } 
#landing_modal .modal-info .img-box img { width: 100%; user-select: none; pointer-events: none;} 
#landing_modal .modal-info .info { overflow: hidden; flex: 1; display: flex; flex-direction: column; justify-content: center; padding: 30px clamp(30px, 3vw, 90px); } 
#landing_modal .modal-info-title { font-size: clamp(28px, 3vw, 36px); font-weight: 600; margin-bottom: clamp(20px, 5vw, 30px); color: #000; } 
#landing_modal .modal-info-details { margin-bottom: clamp(30px, 5vw, 50px); } 
#landing_modal .modal-info-details li { display: flex; font-size: 14px; gap: 20px; color: #333; font-weight: 500; } 
#landing_modal .modal-info-details li + li { margin-top: 5px; } 
#landing_modal .modal-info-details li b { flex-shrink: 0; width: 65px; color: #999; font-weight: 400; } 
#landing_modal .modal-info-exp { margin-bottom: 50px; font-size: clamp(14px, 2vw, 16px); color: #555; } 
#landing_modal .modal-info-buttons { display: flex; gap: 10px; } 
#landing_modal .modal-info-buttons li { flex: 1; } 
#landing_modal .modal-info-buttons .btn { --hp-btn-width: 100%; font-size: clamp(14px,3vw,16px); gap: 10px; padding-inline: 20px 25px; border-radius: 4px; } 
/* [max-small / portrait phones] 모바일, 576px 미만 ▼ */
@media (max-width: 575.98px){
 #landing_modal .modal-info-buttons .btn { padding-inline: 5px 5px; } 
 }
#landing_modal .modal-info-buttons .btn-secondary:hover { --hp-btn-border-color: #666; --hp-btn-text-color: #000; } 
#landing_modal .modal-info-buttons .btn::before { content: ""; display: block; width: 24px; height: 24px; background-size: cover; background-repeat: no-repeat; background-position: center; } 
#landing_modal .modal-info-buttons li:first-child .btn::before { background-image: var(--hp-landing-site-icon); } 
#landing_modal .modal-info-buttons li:last-child .btn::before { background-image: var(--hp-landing-chat-icon); } 
/* [max-x-lager / labtop] 노트북, 1200px 미만 ▼ */
@media (max-width: 1199.98px){
 #landing_modal .modal-info .img-box { flex: 0 1 auto; width: 60%; } 
 }
@media (max-width: 991.98px){
 #landing_modal .modal-content .close { transform-origin: right top; right: 20px; top: 20px; padding: 20px; /* filter: invert(1); */
 scale: 0.4; border-radius: 9999px; /* mix-blend-mode: difference; */
 background-color: #fff; opacity: 0.7; } 
 #landing_modal .modal-content .close .hidden-md { display: none !important; } 
 #landing_modal .modal-content .close .visible-md { display: block !important; } 
 .modal-open #landing_modal > .modal-dialog { max-width: 900px; } 
 .modal-open #landing_modal { align-items: flex-start; /* padding: 30px; */}
 #landing_modal .modal-content { height: auto; } 
 #landing_modal .modal-info { flex-direction: column; } 
 #landing_modal .modal-info .img-box { width: auto; max-width: unset; /* height: 500px; */
 aspect-ratio: 5/3; } 
 #landing_modal .modal-info .info { padding: clamp(30px, 5vw, 50px); } 
 }
/* [max-small / portrait phones] 모바일, 576px 미만 ▼ */
@media (max-width: 575.98px){
 #landing_modal .modal-info .img-box { aspect-ratio: 5/4; } 
 #landing_modal .modal-content .close { scale: 0.37; right: 15px; top: 15px; opacity: 0.8; } 
 }
.landing-icon-wrap { display: flex; max-width: 1020px; width: 100%; margin-inline: auto; flex-wrap: wrap; gap: 30px; } 
.landing-icon-wrap .col { flex: 1 1 300px; text-align: center; padding: 58px 30px; aspect-ratio: 1; background-color: #fff; text-align: center; box-shadow: 0 0 30px 5px rgba(28, 72, 123, 0.1); border-radius: var(--hp-rounded-1); } 
.landing-icon-wrap .col .icon-box { width: fit-content; margin-inline: auto; margin-bottom: clamp(15px, 3vw, 40px); } 
.landing-icon-wrap .col h5 { font-size: clamp(18px, 1.5vw, 24px); font-weight: 600; letter-spacing: -0.03em; } 
.landing-icon-wrap .col p { margin-top: clamp(7px, 2vw, 15px); font-size: clamp(14px, 1.5vw, 16px); color: #777; letter-spacing: -0.5px; } 
@media (max-width: 767.98px){
 .landing-icon-wrap { flex-wrap: wrap; justify-content: center; gap: 20px; } 
 .landing-icon-wrap .col { flex: 0 1 40%; height: auto; aspect-ratio: unset; padding: 30px; } 
 .landing-icon-wrap .col img { transform: scale(0.8); } 
 .landing-icon-wrap br { display: none; } 
 }
@media (max-width: 575.98px){
 .landing-icon-wrap { flex-direction: column; gap: 20px; } 
 .landing-icon-wrap br { display: block; } 
 }
.landing-price-wrap { display: flex; max-width: 1160px; width: 100%; gap: 40px; margin-inline: auto; flex-wrap: wrap; } 
.landing-price-wrap .col { text-align: center; flex: 1; } 
.landing-price-wrap .col.price img { filter: drop-shadow(4px 4px 16px rgba(0, 0, 0, 0.08)); border: var(--hp-rounded-1); margin-inline: auto; } 
#hp_landing .btn { --hp-btn-width: 250px; --hp-btn-height: clamp(60px, 5vw, 70px); margin-top: clamp(20px, 5vw, 40px); margin-inline: auto; padding-inline: 20px 20px; justify-content: center; font-size: clamp(18px, 3vw, 20px); gap: 5px; } 


@media (max-width: 767.98px){
    #hp_landing section.se01{background-position: center -1%; background-size: 200%;}
    .landing-price-wrap{flex-direction: column; gap: 20px;}
}

/* 랜딩페이지 2412 */
#hp_landing .prc_buttons{display: flex;justify-content: center;gap: 10px;}
#hp_landing .prc_buttons .btn{margin-inline: 0;margin-top: 0;font-weight: 600;--hp-btn-background-color:#333;--hp-btn-text-color:#fff;--hp-btn-border-width: 2px;--hp-btn-border-color: #333;border: var(--hp-btn-border-width) var(--hp-btn-border-style) var(--hp-btn-border-color);--hp-btn-width: 190px;--hp-btn-height: clamp(35px, 6.1vw, 60px);border-radius: 100px;font-size: clamp(13px, 1.81vw, 18px);}
#hp_landing .prc_buttons #hp_event2412_portfolio{--hp-btn-text-color:#333;--hp-btn-background-color:#fff;}
#hp_landing .se01 .title{margin-bottom: clamp(20px, 3.1vw, 30px);}
#hp_landing .merit-tab .btn{font-size: clamp(13px, 2.21vw, 22px); border-radius: 0;border: 0;--hp-btn-background-color: #E6EDF4;--hp-btn-text-color:#6D849B;border-top-left-radius: 24px;border-top-right-radius: 24px;--hp-btn-width:25%;--hp-btn-height: clamp(45px, 5.3vw, 75px);margin-top: 0;font-weight: bold;letter-spacing: -0.04em; box-shadow: inset -2px -5px 10px rgb(204 214 223 / 84%);}
#hp_landing .merit-tab .btn.on{border: 0;--hp-btn-background-color: #2484F1;--hp-btn-text-color:#fff;box-shadow: none;}
#hp_landing .merit-tab .btn:hover{--hp-btn-background-color: #2484F1;--hp-btn-text-color:#fff; box-shadow: none;}
/* #hp_landing .merit-tab .btn:hover{--hp-btn-background-color: #2484F1;--hp-btn-text-color:#fff} */
.merit-wrap{max-width: 1100px;margin: 0 auto;margin-top: clamp(35px,7.1vw,70px);box-shadow: 2px 15px 30px 0 rgba(38, 78, 112, 0.1);border-bottom-left-radius: 20px;border-bottom-right-radius: 20px;}
.merit-wrap .merit-tab{display: flex; justify-content: center;}
.merit-view{}
.merit-wrap .tab-pane{padding: 50px 20px 50px 50px;}
.merit-box{display: grid;grid-template-columns: 490px 1fr; gap: 55px;align-items: center;}
.merit-box img{border-radius: 14.67px;}
.merit-box .item{color: #222;}
.merit-box .item h6{font-size: clamp(24px, 3vw, 42px);font-weight: 600; line-height: 1.3;letter-spacing: -0.025em;margin-bottom: 20px;}
.merit-box .item p{font-size: clamp(16px,2.1vw,21px);font-weight: 400;line-height: 1.55;letter-spacing: -0.03em;}
#hp_landing .se02 .title p{font-size: clamp(15px,2.1vw,20px);margin-top: clamp(10px,2.1vw,20px);letter-spacing: -0.03em;}
@media (max-width: 767.98px){
    .merit-wrap .tab-pane{padding: 40px;}
    .merit-box{grid-template-columns: 1fr;gap: 35px;}
    .merit-box img{margin: 0 auto;}
    #hp_landing .merit-tab .btn{padding: 5px 5px;}
}
@media (max-width: 575.98px){
    #hp_landing .prc_buttons .btn{--hp-btn-width: 130px;padding: 5px;}
    .merit-wrap .merit-tab{display: grid;grid-template-columns: repeat(2,1fr);}
    #hp_landing .merit-tab .btn{margin-top: 0;border-radius: 0;--hp-btn-width: 100%;}
    .merit-wrap .tab-pane{padding: 20px;}
}