html{scroll-behavior:smooth;}
#wrap{position: relative; overflow:clip;}
.w_custom{position:relative;width:calc(100% - var(--row-gap60));max-width:1500px;margin-inline:auto;}
.ft-jp{font-family: var(--font-type04);}
main{padding-block: var(--row-gap100) var(--row-gap160);}
main:has(.full-sec){width: 100%; max-width: 100%;}
main:has(.pt-dn){padding-top: 0;}
main:has(.pb-dn){padding-bottom: 0;}
.link{position: absolute; inset: 0; z-index: 3;}
.ft-en{font-family: var(--font-type02);}
@media (max-width:1500px){
br.for_pc{display: none;}
}
@media (max-width:1024px){
br.for_pct{display: none;}
}
@media (max-width:860px) {
.w_custom{width: calc(100% - 30px);}
}
@media (max-width:479px) {
br.for_pcm{display:none;}
}
/*───────────────────────────────────────────────────────
Header
───────────────────────────────────────────────────────*/
#header{position:fixed; top:0; left:0; width:100%; height:var(--header-h); z-index:100; display:flex; align-items:center; transition:all 0.4s; }
#header.hid{opacity: 0; pointer-events: none;}
#header .w_custom{max-width: 1800px;display:flex;align-items:center;justify-content:space-between;gap:var(--col-gap30);height: 100%;}
#header .logo{position: relative; height:100%;}
#header .logo a{display: flex;align-items: center;height: 100%;padding-block: 13px;max-width: clamp(150px, 21vw, 192px);}
#header .logo .wh{position: absolute;inset:0;filter: var(--filter-white);clip-path: inset(0 0 0 24%); transition: all 0.4s;}
#header .gnb{position:absolute;left:50%;top:50%;transform:translate(-50%, -50%);height: 100%; display:flex;gap: clamp(30px, 3.91vw, 75px);height: 100%;}
#header .gnb > li{position:relative;height: 100%;}
#header .gnb > li > a{display:flex;align-items:center;height: 100%;font-size: clamp(16px, 1vw, 19px);font-weight:600;color:var(var(--black-color02));transition:.25s;}
#header .gnb .dep02{position:absolute; top:100%; left:50%; transform:translate(-50%,10px); min-width:150px; padding:14px 0; background:var(--point-white); border-radius:var(--radius-10); box-shadow:0 12px 30px rgba(0,0,0,.12); opacity:0; visibility:hidden; transition:.25s;}
#header .gnb .dep02 > li > a{display:block; padding:9px 24px; font-size:var(--text-17); color:var(--black-color05); transition:all 0.4s;}
#header .btn-toggle{display: none;}
#header .header__util{display:flex; align-items:center; gap:10px; flex-shrink:0;}
#header .header__toggle{display:flex; width:clamp(40px,3.4vw,48px); height:clamp(40px,3.4vw,48px); border-radius:50%; border:1px solid var(--border-color02); flex-direction:column; justify-content:center; align-items:center; gap:5px; background:transparent; transition:all 0.4s;}
#header .header__toggle span{display:block; width:18px; height:2px; background:var(--black-color02); transition:.3s;}
#header .header__quick{display:flex; align-items:center; gap:10px;}
#header.on{background: var(--point-white); box-shadow: 0 4px 20px rgb(0 0 0 / 6%);}
#header.on .logo .wh{opacity: 0;}
#header:not(.on) .gnb > li > a{filter: var(--filter-white);}
#header:not(.on) .header__toggle{filter: var(--filter-white); border-color: rgb(0 0 0 / 55%);}
@media (hover:hover) and (pointer: fine) {
#header .gnb > li:hover .dep02{opacity:1; visibility:visible; transform:translate(-50%,0);}
#header .gnb .dep02 > li:hover > a{color:var(--brand-blue); background:var(--brand-sky-1);}
}
@media (max-width:1300px) {
#header .gnb{display: none;}
}
@media (max-width:1024px) {
#header .header__quick{display: none;}
}
.btn-top{display:inline-flex; align-items:center; height:clamp(40px,3.4vw,48px); padding-inline:clamp(16px,1.6vw,24px); border-radius:100px; font-size:var(--text-16); font-weight:700; transition:.25s; white-space:nowrap;}
.btn-top--blue{background:var(--brand-blue-d); color:var(--point-white);}
.btn-top--fill{background:var(--brand-blue); color:var(--point-white);}
.btn-top--line{background:var(--brand-navy); color:var(--point-white);}
.btn-top__caret{width:7px; height:7px; border-right:2px solid currentColor; border-bottom:2px solid currentColor; transform:rotate(45deg); margin:-3px 0 0 8px; transition:.25s;}
.btn-top-wrap{position:relative;}
.btn-top-wrap.is-open .btn-top__caret{transform:rotate(225deg); margin-top:2px;}
.btn-top__drop{position:absolute; top:calc(100% + 14px); right:0; min-width:236px; padding:8px; background:var(--point-white); border-radius:var(--radius-14); box-shadow:0 18px 44px rgba(0,0,0,.16); opacity:0; visibility:hidden; transform:translateY(8px); transition:.25s; z-index:5;}
.btn-top__drop::before{content:""; position:absolute; bottom:100%; left:0; right:0; height:16px;}
.btn-top-wrap.is-open .btn-top__drop{opacity:1; visibility:visible; transform:translateY(0);}
.btn-top__drop a{display:block; padding:12px 16px; border-radius:var(--radius-10); transition:.2s;}
.btn-top__drop a + a{margin-top:2px;}
.btn-top__drop strong{display:block; font-size:var(--text-16); font-weight:700; color:var(--black-color01); transition:.2s;}
.btn-top__drop span{display:block; margin-top:3px; font-size:var(--text-16); color:var(--black-color07);}
@media (hover:hover) and (pointer: fine) {
.btn-top--blue:hover{filter:brightness(1.08);}
.btn-top--fill:hover{filter:brightness(1.08);}
.btn-top--line:hover{filter:brightness(1.15);}
.btn-top-wrap:hover .btn-top__caret{transform:rotate(225deg); margin-top:2px;}
.btn-top-wrap:hover .btn-top__drop{opacity:1; visibility:visible; transform:translateY(0);}
.btn-top__drop a:hover{background:var(--brand-sky-1);}
.btn-top__drop a:hover strong{color:var(--brand-blue);}
}
/*───────────────────────────────────────────────────────
Aside
───────────────────────────────────────────────────────*/
#aside{position:fixed; inset:0; z-index:200; background:var(--point-white); overflow-y:auto; display:flex; flex-direction:column; transform:translateY(-100%); opacity:0; visibility:hidden; transition:all 0.4s;}
#aside.on{transform:translateY(0); opacity:1; visibility:visible;}
body:has(#aside.on){overflow: clip;}
#aside .allmenu__bar{height:var(--header-h); flex-shrink:0; display:flex; align-items:center; border-bottom:1px solid var(--border-color03);}
#aside .allmenu__bar .w_custom{display: flex;align-items: center;justify-content: space-between;max-width: 1800px;height: 100%;}
#aside .logo{height: 100%;}
#aside .logo a{display: flex;align-items: center;height: 100%;padding-block: 13px;max-width: clamp(150px, 21vw, 192px);}
#aside .allmenu__close{position:relative; width:clamp(40px,3.4vw,48px); height:clamp(40px,3.4vw,48px);
border-radius:50%; border:1px solid var(--border-color02); background:transparent; transition:.25s;}
#aside .allmenu__close{&::before, &::after{position:absolute; content: ''; top:50%; left:50%; width:18px; height:2px; background:var(--black-color02); transition:.25s;translate: -50% -50%; rotate: 45deg;}}
#aside .allmenu__close::after{rotate: -45deg;}
#aside .allmenu__inner{flex:1 0 auto;display:flex;flex-direction:column;justify-content:center;padding-block:clamp(40px,6vw,90px);}
#aside .btn-toggle{position: relative;display:none;width: 44px;aspect-ratio: auto 1;flex-shrink: 0;margin-left: auto;}
#aside .btn-toggle{&::before, &::after{content:""; position:absolute; top:50%; left:50%;
width:16px; height:2px; background:var(--black-color01); translate: -50% -50%; transition: all 0.4s;}}
#aside .btn-toggle::after{rotate: 90deg;}
#aside li.on > a .btn-toggle::after{rotate: 0deg;background: var(--brand-blue);}
#aside .gnb{display:grid;grid: auto / repeat(4, 1fr);gap:var(--col-gap40) var(--col-gap30);}
#aside .gnb > li{position: relative;counter-reset: aside;}
#aside .gnb > li > a{display:block;font-size:var(--text-30);font-weight:700;color:var(--black-color01);transition:all 0.25s;padding-bottom: var(--row-gap25);margin-bottom: var(--row-gap25);border-bottom: 2px solid var(--black-color01);}
#aside .gnb > li > a::before{content: counter(aside, decimal-leading-zero);counter-increment: aside;display: block;margin-bottom: 10px;font-family: var(--font-type02);font-size: var(--text-16);font-weight: 700;letter-spacing: .06em;color: var(--brand-blue);transition: color .25s;}
#aside .gnb .dep02{position: relative;display: grid;gap: 14px;}
#aside .gnb .dep02 > li{position: relative;font-size: var(--text-18);color: var(--black-color06);transition: .2s;}
#aside .gnb .dep02 > li > a{position: relative;display: flex;align-items: baseline;gap: 10px;transition: all 0.4s;}
#aside .gnb .dep02 > li > a::before{display:inline-flex;content:'';width: 6px;aspect-ratio: auto 1;border-radius: 100%;background: var(--border-color02);flex-shrink: 0;translate: 0 -4px;transition: inherit;}
@media (hover:hover) and (pointer: fine) {
#aside .allmenu__close:hover{border-color:var(--brand-blue);}
#aside .allmenu__close:hover span{background:var(--brand-blue);}
#aside .gnb .dep02 > li:hover > a{color: var(--brand-blue); transform: translateX(3px);}
#aside .gnb .dep02 > li:hover > a::before{background: var(--brand-blue);}
}
@media (max-width:1024px) {
#aside .allmenu__inner{justify-content:flex-start;}
#aside .gnb{grid: auto / repeat(1, 1fr); gap: 0;}
#aside .gnb > li{display: flex;align-items: center;border-bottom: 1px solid var(--border-color03);flex-wrap: wrap;width: 100%;}
#aside .gnb > li > a{display: flex;align-items: center;gap: 12px;padding-block: var(--row-gap25);border: 0;margin: 0;width: 100%;}
#aside .gnb > li > a::before{margin:0;flex-shrink: 0;}
#aside .gnb > li.on > a{color: var(var(--brand-blue));}
#aside .gnb .dep02{display: none; width: 100%;padding-bottom:var(--row-gap25);}
#aside .gnb .dep02 > li{padding-left: 34px;}
#aside .gnb .dep02 > li + li{margin-top: 14px;}
#aside li:has(> ul) > a .btn-toggle{display: block;}
}
/*───────────────────────────────────────────────────────
Main
───────────────────────────────────────────────────────*/
/* 비주얼 */
.visual{position:relative; padding:0;
--visual-bottom:clamp(40px,5vw,70px);
--dot-h:clamp(7px,1.8vw,10px);
--icon-w:clamp(17px,4.2vw,24px);}
.visual__swiper{height:100vh; min-height:560px;}
.visual__slide{position:relative; display:flex; align-items:center; overflow:hidden;}
.visual__bg{position:absolute; inset:0; z-index:0; overflow: hidden; transform:scale(1.12); transition:transform 0s linear .95s; will-change:transform;}
.swiper-slide-active .visual__bg{transform:scale(1); transition:transform 5.5s cubic-bezier(.15,.6,.25,1);}
.swiper-slide-active .visual__bg img{width:100%; height:100%; object-fit:cover;}
@media (prefers-reduced-motion:reduce){
.visual__bg, .swiper-slide-active .visual__bg{transform:none; transition:none;}
}
.visual__slide::before{content:""; position:absolute; inset:0; z-index:1; background:linear-gradient(100deg, rgba(0,0,0,.42) 0%, rgba(0,0,0,.22) 32%, rgba(0,0,0,0) 62%),rgba(0,0,0,.4);pointer-events: none;}
.visual__slide::after{content:""; position:absolute; inset:0; z-index:2;background:radial-gradient(60% 60% at 85% 15%, rgba(143,221,255,.22), transparent 60%),radial-gradient(50% 50% at 10% 95%, rgba(255,255,255,.10), transparent 60%);pointer-events: none;}
.visual__inner{position:relative; z-index:3; color:var(--point-white);}
.visual__eyebrow{font-family:var(--font-type01); font-weight:500; font-size:var(--text-20); color:var(--point-white); margin-bottom:var(--row-gap30); opacity:0; transform:translateY(30px);}
.visual__title{font-size:var(--text-70); font-weight:600; line-height:1.2; opacity:0; transform:translateY(30px);}
.visual__desc{margin-top:var(--row-gap45); font-size:var(--text-20); line-height:1.7; color:rgba(255,255,255,.85); opacity:0; transform:translateY(30px);}
.swiper-slide-active .visual__eyebrow, .swiper-slide-active .visual__title, .swiper-slide-active .visual__desc{opacity:1; transform:translateY(0); transition:1s cubic-bezier(.2,.7,.2,1);}
.swiper-slide-active .visual__title{transition-delay:.15s;}
.swiper-slide-active .visual__desc{transition-delay:.3s;}
.visual__nav{position:absolute; left:max(calc(var(--row-gap60) / 2), calc((100% - 1500px) / 2)); bottom:var(--visual-bottom); z-index:5; display:flex; align-items:center; pointer-events:none;}
.visual__nav > *{pointer-events:auto;}
.visual__pagination{display:flex; align-items:center; gap:12px; width:auto!important; left:auto!important;}
.visual__pagination .swiper-pagination-bullet{display:block; width:var(--dot-h); height:var(--dot-h); border-radius:calc(var(--dot-h) / 2); background:rgba(255,255,255,.5); opacity:1; margin:0!important; cursor:pointer; flex-shrink:0; transition:width .3s, background .3s;}
.visual__pagination .swiper-pagination-bullet-active{width:clamp(20px,5.5vw,30px); background:var(--point-white);}
.visual__scroll{position:absolute; right:max(calc(var(--row-gap60) / 2), calc((100% - 1500px) / 2)); bottom:60px; z-index:5; display:flex; align-items:center; gap:16px;}
.scroll-txt{color:var(--point-white); font-size:16px; font-weight:600; line-height:1.4; white-space:nowrap;}
.scroll-icon{position:relative; width:var(--icon-w); height:calc(var(--icon-w) * 1.5); border-radius:999px; background:rgba(255,255,255,.3); backdrop-filter:blur(15px); flex-shrink:0;}
.scroll-dot{position:absolute; left:calc((var(--icon-w) - 4px) / 2); top:6px; width:4px; height:4px; border-radius:999px; background:var(--point-white); animation:scrollDotMove 1.6s ease-in-out infinite;}
@keyframes scrollDotMove{0%{top:6px; opacity:1;} 55%{top:22px; opacity:0;} 56%{top:6px; opacity:0;} 100%{top:6px; opacity:1;}}
@media (max-width:1280px){
.visual__scroll{bottom:50px;}
}
/* 공통 타이틀 */
.main-cont section{padding-block:var(--row-gap160);}
.main_tit_wrap--center{text-align:center;}
.main_tit_wrap--center .main_tit_desc{margin-inline:auto;}
.main_tit_tag{display:inline-block; font-family:var(--font-type01); font-weight:700; font-size:var(--text-18); line-height:1.4; color:var(--brand-blue); margin-bottom:var(--row-gap30);}
.main_tit{font-size:var(--text-50); font-weight:700; line-height:1.28; color:var(--black-color01);}
.main_tit_desc{margin-top:var(--row-gap25); font-size:var(--text-20); line-height:1.6; color:var(--black-color06);}
.main_tit_desc p + p{margin-top:.7em;}
.main_tit_desc strong{display:block; font-size:var(--text-24); font-weight:500; line-height:1.5; color:var(--black-color01);}
.main_tit_desc strong + p{margin-top:var(--row-gap15);}
/* 공통 버튼 */
.btn-util{display:inline-flex; align-items:center; justify-content:center; height:clamp(38px,3.3vw,46px); padding-inline:clamp(16px,1.6vw,24px); border-radius:100px; font-size:var(--text-16); font-weight:700; transition:.25s;}
.btn-util--line{border:1px solid var(--brand-sky-2); color:var(--brand-blue-d);}
.btn-util--line:hover{background:var(--brand-sky-1); border-color:var(--brand-blue);}
.btn-util--fill{background:var(--brand-grad); color:var(--point-white); box-shadow:0 6px 18px rgba(10,92,184,.28);}
@media (hover:hover) and (pointer: fine) {
.btn-util--fill:hover{filter:brightness(1.08);}
}
.btn-cta{display:inline-flex; align-items:center; gap:10px; height:clamp(48px,4vw,58px); padding-inline:clamp(24px,2.4vw,36px); border-radius:100px; background:var(--brand-grad); color:var(--point-white); font-size:var(--text-19); font-weight:700; transition:.25s;}
.btn-cta::after{content:""; width:18px; height:18px; background:currentColor; -webkit-mask:url("data:image/svg+xml;utf8,") center/contain no-repeat; mask:url("data:image/svg+xml;utf8,") center/contain no-repeat; transition:.25s;}
.btn-cta--line{background:transparent; color:var(--brand-blue-d); border:1px solid var(--brand-blue);}
@media (hover:hover) and (pointer: fine) {
.btn-cta:hover{filter:brightness(1.08); box-shadow:0 10px 24px rgba(10,92,184,.3);}
.btn-cta:hover::after{transform:translateX(4px);}
.btn-cta--line:hover{background:var(--brand-blue); color:var(--point-white);}
}
.btn-more{display:inline-flex; align-items:center; justify-content:flex-start; gap:12px; min-width:140px; height:32px; flex-shrink:0; white-space:nowrap; font-family:var(--font-type01); font-size:var(--text-18); font-weight:500; color:var(--black-color01);}
.btn-more__dot{position:relative; display:block; width:8px; height:8px; flex-shrink:0; border-radius:999px; background:var(--brand-grad); transition:all 0.25s;}
.btn-more__dot::after{content:""; position:absolute; inset:0; opacity:0; background:var(--point-white); transition:opacity .25s ease;
-webkit-mask:url("data:image/svg+xml;utf8,") center/14px no-repeat;
mask:url("data:image/svg+xml;utf8,") center/14px no-repeat;}
@media (hover:hover) and (pointer: fine) {
.btn-more:hover .btn-more__dot{width:32px; height:32px;}
.btn-more:hover .btn-more__dot::after{opacity:1;}
}
/* about */
.about{background:var(--point-white); padding-bottom:0;}
.about__container{position:relative; overflow:clip;}
.about__grid{--about-bottom:var(--row-gap180); display:grid; grid-template-columns:45.5% 54.5%; align-items:start;}
.about__lead{position:sticky; top:calc(var(--header-h) + var(--row-gap40)); padding-right:var(--col-gap40); padding-bottom:var(--about-bottom);}
.about .main_tit_desc{margin-top:var(--row-gap40); font-size:var(--text-19); line-height:1.85; color:var(--black-color05);}
.about__lead .btn-more{margin-top:var(--row-gap40);}
.ci-list{--ci-icon:clamp(150px,17.5vw,265px);
display:flex; flex-direction:column; gap:var(--row-gap35);
padding:0 0 var(--about-bottom) var(--col-gap40);}
.ci-box{position:relative; display:flex; align-items:stretch; min-height:var(--ci-icon); overflow:hidden; border-radius:var(--radius-16); background:var(--gray-bg01);}
.ci-box::before{content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
background:var(--brand-grad); opacity:0; transition:opacity .5s cubic-bezier(.2,.7,.2,1);}
.ci-box.is-view::before{opacity:1;}
.ci-box__icon, .ci-box__body{position:relative; z-index:1;}
.ci-box__icon{flex-shrink:0; width:var(--ci-icon); display:flex; align-items:center; justify-content:center; color:var(--brand-blue-d); transition:color .5s ease;}
.ci-box__icon::after{content:""; position:absolute; top:50%; right:0; transform:translateY(-50%);
width:1px; height:60%; background:var(--border-color01); transition:background .5s ease;}
.ci-box__icon svg{width:58%; height:58%; max-width:108px; overflow:visible;}
.ci-box__body{flex:1; min-width:0; display:flex; flex-direction:column; justify-content:center;
padding:var(--col-gap40); text-align:left;}
.ci-box__title{display:flex; flex-direction:column; align-items:flex-start; gap:8px; margin-bottom:var(--row-gap20);
transition:color .5s ease;
font-size:var(--text-32); font-weight:700; color:var(--black-color01);}
.ci-box__en{font-family:var(--font-type01); font-size:var(--text-16); font-weight:700; letter-spacing:.04em; color:var(--brand-blue); transition:color .5s ease;}
.ci-box__text{font-size:var(--text-19); line-height:1.6; color:var(--black-color06); transition:color .5s ease .08s;}
.ci-box.is-view .ci-box__icon{color:var(--point-white);}
.ci-box.is-view .ci-box__icon::after{background:rgba(255,255,255,.4);}
.ci-box.is-view .ci-box__title{color:var(--point-white);}
.ci-box.is-view .ci-box__en{color:var(--brand-sky);}
.ci-box.is-view .ci-box__text{color:rgba(255,255,255,.88);}
.ci-heart,.ci-roof,.ci-pillars,.ci-person{transform-box:fill-box; transform-origin:center;}
.ci-pillars,.ci-person{transform-origin:center bottom;}
.ci-box.is-view .ci-heart{animation:ciBeat 1.1s ease-in-out infinite;}
@keyframes ciBeat{0%,100%{transform:translateY(0) scale(1);}50%{transform:translateY(-7px) scale(1.16);}}
.ci-box.is-view .ci-roof{animation:ciLift 1.3s ease-in-out infinite;}
@keyframes ciLift{0%,100%{transform:translateY(0);}50%{transform:translateY(-6px);}}
.ci-box.is-view .ci-pillars{animation:ciProp 1.3s ease-in-out infinite;}
@keyframes ciProp{0%,100%{transform:scaleY(1);}50%{transform:scaleY(1.16);}}
.ci-box.is-view .ci-person{animation:ciCheer 1.1s ease-in-out infinite;}
.ci-box.is-view .ci-person--2{animation-delay:.14s;}
.ci-box.is-view .ci-person--3{animation-delay:.28s;}
@keyframes ciCheer{0%,100%{transform:translateY(0);}50%{transform:translateY(-10px);}}
@media (max-width:1024px) {
.about__grid{grid-template-columns:1fr; gap:var(--row-gap45);}
.about__lead{position:static; padding-right:0; padding-bottom:0;}
.ci-list{padding:0;}
}
@media (max-width:640px) {
.ci-list{--ci-icon:clamp(88px,26vw,120px);}
.ci-box__title{font-size:var(--text-24);}
}
/* 서비스 */
.service{position:relative; background:var(--brand-navy); overflow:hidden;}
.service__bg{position:absolute; inset:0; z-index:0;}
.service__bg-layer{position:absolute; inset:0; opacity:0; transform:scale(1.04); transition:opacity .7s ease, transform 6s ease;}
.service__bg-layer.is-active{opacity:1; transform:scale(1);}
.service__bg-layer img{width: 100%; height: 100%; object-fit: cover;}
.service::before{content:""; position:absolute; inset:0; z-index:1; background:
radial-gradient(60% 80% at 90% 0%, rgba(10,92,184,.25), transparent 60%),
radial-gradient(50% 70% at 0% 100%, rgba(143,221,255,.08), transparent 60%),
rgba(0,0,0,.45);}
.service .w_custom{position:relative; z-index:2;}
.service .main_tit_wrap{margin-bottom:var(--row-gap60);}
.service .main_tit_tag{color:var(--brand-sky);}
.service .main_tit{color:var(--point-white);}
.service .main_tit_desc{color:rgba(255,255,255,.78);}
.service__list{display:grid; grid-template-columns:var(--grid-array03); gap:var(--col-gap24); align-items:stretch;}
.service__card{position:relative; aspect-ratio:1/1; min-height:max-content; padding:var(--col-gap50); border-radius:var(--radius-20);
background:rgba(255,255,255,.13); border:1px solid rgba(255,255,255,.24);
backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px);
overflow:hidden; cursor:pointer;
transition:background .5s ease, border-color .5s ease, box-shadow .5s ease;}
.service__card.is-active{background:var(--point-white); border-color:var(--point-white); box-shadow:0 26px 60px rgba(0,0,0,.32);}
.service__face{position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px;
padding:var(--col-gap40); text-align:center;
transition:opacity .35s ease, transform .55s cubic-bezier(.2,.7,.2,1);}
.service__face .service__name{font-size:var(--text-35); color:var(--point-white);}
.service__face .service__en{color:rgba(255,255,255,.72);}
.service__card.is-active .service__face{opacity:0; transition-duration:.3s;}
.service__panel{position:relative; z-index:1; display:flex; flex-direction:column; justify-content:space-between; height:100%; pointer-events:none;}
.service__card.is-active .service__panel{pointer-events:auto;}
.service__mask{overflow:hidden;}
.service__mask > *{display:block; transform:translateY(115%); opacity:0; transition:transform .55s cubic-bezier(.2,.7,.2,1), opacity .4s ease;}
.service__card.is-active .service__mask > *{transform:translateY(0); opacity:1;}
.service__card.is-active .service__panel-head .service__mask:nth-child(1) > *{transition-delay:.10s;}
.service__card.is-active .service__panel-head .service__mask:nth-child(2) > *{transition-delay:.18s;}
.service__card.is-active .service__panel > .service__mask > *{transition-delay:.26s;}
.service__tit .service__en{margin-top:6px;}
.service__panel-head .service__mask + .service__mask{margin-top:var(--row-gap25);}
.service__panel .service__name{font-size:var(--text-35); color:var(--black-color01);}
.service__panel .service__en{color:var(--brand-blue);}
.service__panel .btn-more{display:inline-flex;}
.service__panel .service__text{font-size:var(--text-18); line-height:1.7; color:var(--black-color06);}
.service__name{font-weight:700; line-height:1.6;}
.service__en{font-family:var(--font-type01); font-size:var(--text-19); font-weight:500; line-height:1.4;}
@media (max-width:1024px) {
.service__list{grid-template-columns:var(--grid-array02); grid-auto-rows:1fr;}
.service__card{aspect-ratio:auto;}
.service__panel > .service__mask{margin-top:var(--row-gap35);}
}
@media (max-width:767px){
.service__list{grid-template-columns:1fr;}
}
/* news */
.news{background:var(--point-white);}
.news__head{display:flex; align-items:flex-end; justify-content:space-between; margin-bottom:var(--row-gap55); gap:20px;}
.news__head .btn-more{width:140px; justify-content:flex-end;}
.news__list{display:grid; grid-template-columns:var(--grid-array04); gap:var(--col-gap20) var(--col-gap20);}
.news__item{position:relative; display:flex; flex-direction:column; padding:var(--row-gap40); border:1px solid var(--border-color01); border-radius:var(--radius-16); background:var(--point-white); transition:.3s;}
.news__item::after{content:""; position:absolute; inset:-1px; border-radius:inherit; pointer-events:none;
padding:2px; opacity:0; transition:opacity .5s cubic-bezier(.2,.7,.2,1); background:var(--brand-grad);
-webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite:xor;
mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite:exclude;}
.news__cat{display:inline-block; align-self:flex-start; padding:5px 14px; border-radius:100px; background:var(--brand-sky-1); color:var(--brand-blue-d); font-size:var(--text-17); font-weight:700; margin-bottom:var(--row-gap30);}
.news__title{font-size:var(--text-24); font-weight:600; line-height:1.45; color:var(--black-color01); margin-bottom:var(--row-gap20); display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;}
.news__text{font-size:var(--text-18); line-height:1.65; color:var(--black-color06); margin-bottom:var(--row-gap55); display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; flex:1;}
.news__date{font-family:var(--font-type01); font-size:var(--text-16); color:var(--black-color08);}
@media (hover:hover) and (pointer: fine) {
.news__item:hover{border-color:transparent; box-shadow:0 22px 40px -18px rgba(17,42,90,.32); transform:translateY(-8px);}
.news__item:hover::after{opacity:1;}
}
@media (max-width:767px){
.news__head{flex-direction:column; align-items:flex-start;}
.news__head .btn-more{width:auto; justify-content:flex-start;}
}
/* cta-banner */
.cta-banner{position:relative; padding:0 !important; overflow:hidden;}
.cta-banner .bg{position: absolute; inset: 0; overflow: hidden;}
.cta-banner .bg::before{content:""; position:absolute; inset:0; background:rgba(0,0,0,.63);}
.cta-banner .bg img{width: 100%; height: 100%; object-fit: cover;}
.cta-banner__inner{position:relative; z-index:1; display:flex; flex-direction:column; align-items:center;
text-align:center; gap:var(--row-gap40); padding-block:var(--row-gap120);}
.cta-banner .main_tit_tag{color:var(--brand-sky);}
.cta-banner .main_tit{font-size:var(--text-50); color:var(--point-white);}
.cta-banner__btns{display:flex; align-items:center; gap:12px; flex-shrink:0;}
.btn-cta--ghost{background:transparent; color:var(--point-white); border:1px solid rgba(255,255,255,.55);}
@media (hover:hover) and (pointer: fine) {
.btn-cta--ghost:hover{background:rgba(255,255,255,.14); border-color:var(--point-white); color:var(--point-white);}
}
@media (max-width:767px){
.cta-banner__btns{width:100%;}
.cta-banner__btns .btn-cta{flex:1; justify-content:center;}
}
/*───────────────────────────────────────────────────────
Footer
───────────────────────────────────────────────────────*/
#footer{position:relative; background:var(--point-white); padding-block:var(--row-gap60) var(--row-gap40); box-shadow: inset 0 1px var(--border-color01);}
.footer__top{display:flex; align-items:flex-end; justify-content:space-between;
gap:var(--row-gap30) var(--col-gap40); flex-wrap:wrap;}
.footer__brand{max-width: clamp(150px, 21vw, 192px);}
.footer__family{display:flex; flex-wrap:wrap; gap:10px;}
.fam-drop{position:relative; width:196px; --fam-h:clamp(46px,3.9vw,54px);}
.fam-drop__btn{position:relative; box-sizing:border-box; display:block; width:100%; height:var(--fam-h);
padding:0 52px 0 24px; text-align:left; cursor:pointer;
border:1px solid var(--border-color01); border-radius:100px; background:var(--point-white);
font-family:var(--font-type02); font-size:var(--text-16); font-weight:500; color:var(--black-color08);}
.fam-drop__btn::before, .fam-drop__btn::after{content:""; position:absolute; top:50%; right:24px;
width:11px; height:1.6px; border-radius:1px; background:currentColor;
transform:translateY(-50%); transition:transform .25s;}
.fam-drop__btn::after{transform:translateY(-50%) rotate(90deg);}
.fam-drop.is-open .fam-drop__btn{border-top-color:var(--trans-color); border-radius:0 0 24px 24px; color:var(--black-color01);}
.fam-drop.is-open .fam-drop__btn::after{transform:translateY(-50%) rotate(0);}
.fam-drop__box{display:none; box-sizing:border-box; position:absolute; left:0; bottom:var(--fam-h); width:100%;
padding:20px 24px; background:var(--point-white);
border:1px solid var(--border-color01); border-bottom:0; border-radius:24px 24px 0 0;}
.fam-drop.is-open .fam-drop__box{display:block;}
.fam-drop__box::after{content:""; position:absolute; left:50%; bottom:0; transform:translateX(-50%);
width:calc(100% - 40px); height:1px; background:var(--border-color01);}
.fam-drop__box a{display:block; font-size:var(--text-16); line-height:1.3; color:var(--black-color01); transition:color .2s;}
.fam-drop__box a + a{margin-top:12px;}
.footer__bottom{margin-top:var(--row-gap30); padding-top:var(--row-gap30); border-top:1px solid var(--border-color01);}
.footer__address{display:flex; align-items:center; flex-wrap:wrap; gap:8px 0;}
.footer__address + .footer__address{margin-top:8px;}
.footer__badge{box-sizing:border-box; flex-shrink:0; min-width:112px; margin-right:20px; padding:8px 18px; border-radius:100px;
background:var(--brand-blue); color:var(--point-white);
font-size:var(--text-16); font-weight:700; line-height:1.35; text-align:center; white-space:nowrap;}
.footer__badge--navy{background:var(--brand-navy);}
.footer__address dd{font-size:var(--text-17); color:var(--black-color03);}
.footer__address dd + dd::before{content:""; display:inline-block; width:1px; height:11px; margin:0 16px; background:var(--border-color01); vertical-align:-1px;}
.footer__address dd a{color:inherit; transition:color .2s;}
.footer__legal{display:flex; align-items:center; justify-content:space-between;
gap:10px var(--col-gap40); flex-wrap:wrap; margin-top:var(--row-gap40);}
.footer__copyright{display:flex; align-items:center; flex-wrap:wrap; gap:4px 12px;}
.footer__copy{font-family:var(--font-type01); font-size:var(--text-15);
letter-spacing:.02em; color:var(--black-color09);}
.footer__credit{font-family:var(--font-type01); font-size:var(--text-15); color:var(--black-color09); transition:color .2s;}
.footer__menu{display:flex; align-items:center; gap:32px;}
.footer__menu a{font-size:var(--text-17); font-weight:500; color:var(--black-color01); transition:.2s;}
.top-btn{position:fixed; right:clamp(16px,2vw,32px); bottom:clamp(16px,2vw,32px); width:clamp(46px,4vw,56px); height:clamp(46px,4vw,56px); border-radius:50%; background:var(--brand-grad); box-shadow:0 8px 20px rgba(10,92,184,.35); z-index:90; display:flex; align-items:center; justify-content:center; opacity:0; visibility:hidden; transform:translateY(14px); transition:.3s;}
body:has(#header.on:not(.end)) .top-btn{opacity:1; visibility:visible; transform:translateY(0);}
.top-btn__arrow{display:block; width:11px; height:11px; border-top:2px solid #fff; border-right:2px solid #fff; transform:rotate(-45deg); margin-top:3px; transition:.25s;}
@media (hover:hover) and (pointer: fine) {
.fam-drop__box a:hover{color:var(--brand-blue);}
.footer__credit:hover{color:var(--brand-blue);}
.footer__menu a:hover{color:var(--brand-blue);}
.top-btn.is-show:hover{filter:brightness(1.1);}
.top-btn:hover .top-btn__arrow{margin-top:0;}
.footer__address dd a:hover{color:var(--brand-blue);}
}
@media (max-width:1024px){
.footer__top{flex-direction:column; align-items:flex-start;}
.footer__family{width:100%;}
}
@media (max-width:767px){
.footer__family{flex-wrap:nowrap;}
.fam-drop{flex:1 1 0; width:auto; min-width:0;}
.footer__badge{min-width:0; font-size:var(--text-14);}
.footer__address{gap:4px 14px;}
.footer__address dd{font-size:var(--text-15); line-height:1.55;}
.footer__address dd + dd::before{display:none;}
.footer__legal{flex-direction:column; align-items:flex-start;}
}
/*───────────────────────────────────────────────────────
Sub
───────────────────────────────────────────────────────*/
/* 인풋 */
:where([type="text"], [type="password"], [type="tel"], [type="email"], [type="number"], textarea, select){position: relative;width: 100%;padding-inline: clamp(15px, 2.4vw, 24px);height: clamp(46px, 6.5vw, 60px);background: var(--point-white);border: 1px solid var(--border-color01);color: var(--black-color03);font-size: max(16px, var(--text-18));border-radius: var(--radius-10);overflow: hidden;text-overflow:ellipsis;white-space:nowrap;}
:where([type="text"], [type="password"], [type="tel"], [type="email"], [type="number"], textarea)::placeholder{color: var(--black-color08);}
textarea{width: 100%;height: clamp(125px, 16vw, 150px);padding-block: clamp(15px, 2vw, 20px);overflow: visible;text-overflow:unset;white-space:unset;resize: none;line-height: 1.6;}
textarea{ scrollbar-gutter: stable;}
textarea::-webkit-scrollbar {width: clamp(3px, 0.6vw, 4px);}
textarea::-webkit-scrollbar-track {box-shadow:-10px 0 0 var(--border-color01); margin: 10px;}
textarea::-webkit-scrollbar-thumb {box-shadow:-10px 0 0 var(--black-color02);}
select{appearance: none;background: var(--point-white) url('/images/sel-arw.svg') no-repeat calc(100% - clamp(15px, 2.4vw, 24px)) 50% / clamp(8px, 1.2vw, 10px) auto;padding-right: 45px;}
label:has([type="checkbox"], [type="radio"]){display:inline-flex;align-items:center;gap: clamp(10px, 1.2vw, 12px);font-size: var(--text-18);font-weight: 500;line-height: clamp(20px, 2.6vw, 24px);color: var(--black-color01);cursor:pointer;width: fit-content;}
[type="checkbox"], [type="radio"]{width: clamp(20px, 2.6vw, 24px);height: clamp(20px, 2.6vw, 24px);flex-shrink:0;accent-color: var(--point-color01);appearance:auto;cursor:pointer;border-radius: var(--radius-04);}
[type="checkbox"]{appearance: none;background: var(--point-white);border: 1px solid var(--border-color01);display: flex;align-items: center;justify-content: center;}
[type="checkbox"]::before{display: inline-flex;content: '';mask:url('/images/chk-i.svg') no-repeat center / 100% auto;background: var(--black-color10);width: clamp(10px, 1.4vw, 12px);aspect-ratio: auto 1.33;}
[type="checkbox"]:checked{background: var(--point-color01);border-color: var(--point-color01);}
[type="checkbox"]:checked::before{background: var(--point-white);}
label:has([type="checkbox"], [type="radio"]) em{font-weight: 600;color: var(--point-color01);display: contents;}
/* 검색 */
.search-from{display: flex;align-items: center;justify-content: center;flex-wrap: wrap;gap: 15px;margin-bottom: var(--row-gap60);}
.search-from .keywords-box{width: 100%;display: flex;justify-content: center;align-items: center;gap: 10px;}
.search-from .inp-box{position: relative;width: min(600px, 100%);}
.search-from [type="text"]{width: 100%;border-color: var(--black-color03);padding-right: clamp(50px, 6.5vw, 65px);height: clamp(50px, 7.5vw, 70px);}
.search-from button{position: absolute;top: 0;right: clamp(15px, 2.4vw, 24px);width: clamp(18px, 2.5vw, 23px);height: 100%;mask: url('/images/search-i.svg') no-repeat right center / 100% auto;font-size: 0;background: var(--black-color02);border-radius: var(--radius-10);}
/* 일반 게시판 */
.board-count{position: relative;margin-bottom: clamp(15px, 2vw, 20px);font-size: var(--text-17);color: var(--black-color05);}
.board-count strong{font-family: var(--font-type02);font-weight: 600;color: var(--point-color01);}
.list-table{width: 100%;border-top: 1px solid var(--black-color01);table-layout: fixed;}
.list-table.cen{text-align: center;}
.list-table :where(th, td){font-size: var(--text-20);font-weight: 600;color: var(--black-color01);padding: clamp(20px, 2.6vw, 26px) 10px;border-bottom: 1px solid var(--border-color01);text-align: center;}
.list-table .noti-tr{background: var(--gray-bg01);}
.list-table tr{transition: all 0.4s;}
.list-table td{font-size: var(--text-17);font-weight: 400;color: var(--black-color08);font-family: var(--font-type02);}
.list-table .title{text-align: left;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;word-break: break-all;font-size: var(--text-20);font-weight: 500;color: var(--black-color03);font-family: var(--font-type01);transition: all 0.4s;}
.list-table .add{color: var(--black-color03);}
.list-table .noti-tr{background: var(--gray-bg01);}
.list-table .field-name{display: none;}
.no-data{text-align: center; font-size: var(--text-16); color: var(--black-color09); padding-block: var(--row-gap50);}
@media (hover:hover) and (pointer: fine) {
.list-table tbody tr:hover{background: var(--gray-bg01);}
.list-table tbody tr:hover .title{color: var(--point-color01);}
}
@media (max-width:1024px) {
.list-table{display: block;}
.list-table :where(tbody, tr, th, td){display: block; width: 100%;}
.list-table thead{display: none;}
.list-table tr{display: flex;flex-wrap: wrap;gap: var(--row-gap10) 15px;padding-block: clamp(20px, 2.5vw, 25px);border-bottom: 1px solid var(--border-color01);}
.list-table :where(th, td){padding: 0;text-align: left;border: 0;}
.list-table .no{display: none;}
.list-table .field-name{display:inline-block;}
}
/* gallery-list */
.gallery-list {position: relative;display: grid;grid: auto / repeat(3, 1fr);gap: var(--row-gap60) clamp(15px, 2.1vw, 36px);}
.gallery-list > li {position: relative;display: flex;flex-direction: column;gap: clamp(15px, 1.8vw, 18px);}
.gallery-list .thumb {position: relative;aspect-ratio: 16 / 9;overflow: hidden;width: 100%;flex-shrink: 0; border-radius: var(--radius-10);}
.gallery-list .thumb img { width: 100%; height: 100%; object-fit: cover; transition: 0.4s; }
.gallery-list .cont { display: grid; gap: var(--row-gap30); }
.gallery-list .desc {display: grid;gap: 8px;}
.gallery-list .desc :where(dt, dd) { line-height: 1.6; white-space: normal; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.gallery-list .desc dt {font-size: var(--text-22);font-weight: 600;color: var(--black-color01);-webkit-line-clamp: 1;word-break: break-all;}
.gallery-list .desc dt em { display: inline-flex; align-items: center; justify-content: center; text-align: center; font-size: var(--text-18); font-weight: 400; color: var(--point-white); padding: 2px 5px; min-width: clamp(45px, 6.5vw, 55px); background: var(--black-color10); border-radius: var(--radius-04); vertical-align: middle; margin-right: clamp(10px, 1.2vw, 12px); translate: 0px -1px; }
.gallery-list .desc dt em.on { background: var(--point-color03); }
.gallery-list .desc dd {font-size: var(--text-16);color: var(--black-color08);line-height: 1.5;}
.gallery-list .regdate { font-size: var(--text-18); color: var(--black-color08); display: none; }
.swiper-arw{position: absolute;inset: auto;width: clamp(25px, 4vw, 40px);height: auto;aspect-ratio: auto 1;top: 50%;left: clamp(10px, 2vw, 20px);translate: 0 -50%;transition: all 0.4s;}
.swiper-arw::before{position: absolute;content:'';width: 50%;aspect-ratio: auto 1;border: 2px solid var(--black-color10);clip-path: var(--clip-poly02);top: 50%;left: 40%;translate: -50% -50%;rotate: 135deg;border-radius: 2px;transition: inherit;}
.swiper-arw.next{left: auto;right: clamp(10px, 2vw, 20px);scale: -1 1;}
@media (hover:hover) and (pointer: fine) {
.gallery-list > li:hover .thumb img{scale: 1.08;}
.gallery-list > li:hover .desc dt{color: var(--point-color01);}
.swiper-arw:hover::before{border-color: var(--point-color01);}
}
@media (max-width:860px) {
.gallery-list{grid: auto / repeat(1, 1fr);}
}
/* FAQ */
.faq-list { position: relative; border-top: 1px solid var(--black-color00); }
.faq-list > li {position: relative;border-bottom: 1px solid var(--border-color02);}
.faq-list .desc { position: relative; display: grid; grid-template-rows: auto 0fr; transition: 0.4s; align-content: start; }
.faq-list .desc.on { grid-template-rows: auto 1fr; }
.faq-list .desc :where(dt, dd) {display: flex;align-items: baseline;gap: 10px clamp(12px, 2vw, 20px);padding: clamp(20px, 3vw, 30px) clamp(15px, 4vw, 40px);transition: inherit;}
.faq-list .desc :where(dt, dd)::before {display: inline-flex;content: "Q";align-items: center;justify-content: center;text-align: center;min-width: clamp(28px, 4.2vw, 40px);min-height: clamp(28px, 4.2vw, 40px);background: var(--point-color01);font-size: var(--text-20);font-weight: 400;color: var(--point-white);padding: 3px;line-height: 1.2;border-radius: 100%;}
.faq-list .desc dd::before {content: "A";background: var(--point-color04);}
.faq-list .desc dt {position: relative;font-size: var(--text-20);color: var(--black-color00);line-height: 1.6;padding-right: clamp(45px, 8.2vw, 80px);cursor: pointer;}
.faq-list .desc dt::after {position: absolute;content: "";inline-size: clamp(10px, 1.6vw, 14px);aspect-ratio: auto 1 / 1;clip-path: var(--clip-poly02);border: 2px solid var(--black-color05);top: 45%;right: clamp(15px, 4vw, 40px);translate: 0px -50%;rotate: 45deg;border-radius: 2px;overflow: hidden;transition: 0.4s;}
.faq-list .desc.on dt::after {scale: -1;top: 52%;border-color: var(--point-color01);}
.faq-list .desc dt em { display: flex; align-items: baseline; gap: 10px; }
.faq-list .desc dd {font-size: var(--text-18);color: var(--black-color03);line-height: 1.8;overflow: hidden;background: var(--gray-bg01);margin-bottom: clamp(15px, 2vw, 20px);border-radius: var(--radius-10);}
.faq-list .desc:not(.on) dd {margin-block: 0;padding-block: 0;}
.faq-list .desc .prefix {font-size: var(--text-15);color: var(--point-white);background: var(--point-color02);line-height: 1.2;font-weight: 400;padding: 5px 8px;translate: 0px clamp(-4px, -0.6vw, -2px);flex-shrink: 0;}
/* 페이징 */
.pagination{display: flex;align-items: center;justify-content: center;text-align: center;flex-wrap: wrap;margin-top: var(--row-gap60);gap: var(--row-gap10);}
.pagination li{font-size: var(--text-16);font-weight: 500;color: var(--black-color05);font-family: var(--font-type02);}
.pagination a{display: flex;align-items: center;justify-content: center;min-width: clamp(30px, 4.6vw, 44px);min-height: clamp(30px, 4.6vw, 44px);padding: 4px;}
.pagination a.arw{font-size: 0;background: url('/images/pagination-last.svg') no-repeat center / auto clamp(8px, 1.2vw, 10px);padding: 0;}
.pagination a:is(.prev, .next){background-image: url('/images/pagination-prev.svg');}
.pagination a.prev{margin-right: clamp(5px, 1vw, 10px);}
.pagination a.next{margin-left: clamp(5px, 1vw, 10px);}
.pagination a.first{margin-right:-5px;}
.pagination a.last{margin-left:-5px;}
.pagination a.disabled{display: none;}
.pagination a.on{font-weight: 500;color: var(--point-white);background: var(--point-color01);}
.pagination a.scale{scale: -1 -1;}
/* 문의 */
.write-form{position: relative;display: flex;flex-wrap: wrap;gap: clamp(20px, 3vw, 30px) clamp(30px, 2.1vw, 40px);}
.write-form .desc{display:flex;flex-direction: column;gap:clamp(10px, 1.7vw, 17px);width: calc(100% / 2 - clamp(30px, 2.1vw, 40px) / 2);}
.write-form .desc:has(textarea, [name="captcha_answer"], #attachment, [type="radio"], [type="checkbox"]){width:100%;}
.write-form .desc dt{font-size: var(--text-20);font-weight: 500;color: var(--black-color03);}
.write-form .desc dt label{cursor: pointer;}
.write-form .desc dt em{color: var(--point-color12);}
.write-form .desc dd{position: relative;display: flex; align-items: center; gap: 5px;flex-wrap: wrap;color: var(--black-color08);font-size: var(--text-18); width: 100%;}
.write-form .desc dd:has(.noti-txt){column-gap: clamp(15px, 2vw, 20px);}
.write-form :where([type="text"], [type="password"], [type="tel"], [type="email"], [type="number"], textarea, select){width: 100%;}
.write-form select{width: min(260px, 100%);}
.bf-file-wrap{position: relative;display: flex;align-items: center;width: min(480px, 100%);padding-left: clamp(15px, 2vw, 20px);height: clamp(45px, 5.7vw, 52px);background: var(--point-white);box-shadow: inset 0 0 0 1px var(--border-color01);border-radius: var(--radius-06);color: var(--black-color01);font-size: var(--text-18);gap: 20px;}
.bf-file-enhanced{display: none;}
.bf-file-btn{display: flex;align-items: center;justify-content: center;min-width: clamp(90px, 12vw, 110px);height: 100%;text-align: center;background: var(--point-white);font-size: var(--text-18);font-weight: 400;color: var(--black-color00);border: 1px solid var(--black-color00);padding: 10px 20px;cursor: pointer;order: 1;flex-shrink: 0;border-radius: var(--radius-06);}
.bf-file-name{font-size: var(--text-18);font-weight: 400;color: var(--black-color05);overflow: hidden;text-overflow: ellipsis;white-space: nowrap;width: 100%;}
.inp-list{display: flex;flex-wrap: wrap;gap: clamp(15px, 2vw ,20px) clamp(30px, 4vw, 40px);width: min(1100px, 100%);}
.inp-list > li{position: relative; display: flex; align-items: center; flex-wrap: wrap; gap: 10px;}
.inp-list [type="text"]{width: 280px;}
.captcha-box{display: flex;align-items: center;gap: 10px;width: 100%;}
.captcha-box .controller{display: flex;flex-shrink: 0;gap: 10px;box-shadow: inset 0 0 0 1px var(--border-color01);padding: 10px;border-radius: var(--radius-10);}
.captcha-box .controller img{border: 1px solid var(--border-color01);border-radius: var(--radius-06);}
.captcha-box .controller button{position: relative;width: 38px;aspect-ratio: auto 1;border: 1px solid var(--border-color01);display: flex;align-items: center;justify-content: center;border-radius: var(--radius-06);color: var(--black-color01);}
.captcha-box .controller svg{width: 18px;height: auto;transition: all 0.4s;}
.captcha-box [type="text"]{width: min(323px, 100%);}
.agree-desc{margin-top: var(--row-gap50);display: grid;gap: var(--row-gap30);}
.agree-desc dt{position: relative;}
.agree-desc textarea{font-size: var(--text-15);color: var(--black-color08);}
.agree-list > li{display: flex;flex-direction: column;gap: clamp(15px, 2vw, 20px);}
.agree-list .detail-view{position: relative;font-size: var(--text-17);font-weight: 400;color: var(--black-color03);display: flex;align-items: center;gap: 5px;}
.agree-list .detail-view::before{position:absolute;content:'';width: 100%;height: 1px;background: currentColor;left: 0;bottom: 0;}
.agree-list .detail-view::after{display: inline-flex;content:'';inline-size: clamp(9px, 1.4vw, 12px);aspect-ratio: auto 1;clip-path: var(--clip-poly02);border: 2px solid currentColor;rotate: -45deg;border-radius: 2px;translate: 0 clamp(-1px, -0.2vw , 0px);}
@media (min-width:1025px) {
.write-form:has(#categories[class*="hidden"]) .desc:has(#inquiry-type){margin-right: 1px;}
}
@media (max-width:1024px) {
.write-form .desc{width:100%;}
}
@media (max-width:640px) {
.write-form .desc{flex-wrap: wrap;}
.write-form .desc dt{width: 100%; flex-shrink: unset;}
}
@media (max-width:479px) {
.captcha-box{flex-wrap: wrap;}
.captcha-box [type="text"]{width:100%;}
}
/* 상세 */
.board-view .detail-hd{border-bottom: 1px solid var(--black-color00);padding-bottom: clamp(20px, 4vw, 40px);display: grid;gap: var(--row-gap20);text-align: center;}
.board-view .detail-hd .desc{display: grid;gap: var(--row-gap10);}
.board-view .detail-hd .desc dt{font-size: var(--text-40);font-weight: 600;color: var(--black-color03);line-height: 1.6;display: grid;gap: var(--row-gap10);}
.board-view .detail-hd .desc dt em{display: flex;align-items: center;justify-content: center;text-align: center;width: fit-content;font-size: var(--text-18);font-weight: 400;color: var(--point-white);padding: 2px 12px;min-width: clamp(45px, 6.5vw, 55px);background: var(--point-color01);margin-inline: auto;}
.board-view .detail-hd .desc dt em.on{background: var(--point-color03);}
.board-view .detail-hd .desc dd{font-size: var(--text-22);color: var(--black-color06);}
.board-view .detail-hd .exp{font-size: var(--text-20);color: var(--black-color08);display: flex;justify-content: center;align-items: center;flex-wrap: wrap;gap: 10px clamp(30px, 4vw, 40px);font-family: var(--font-type02);}
.board-view .detail-hd .exp span{display:flex;align-items: baseline;gap: 12px;}
.board-view .detail-hd .exp em{font-weight: 500;color: var(--black-color06);display: none;}
.board-view .detail-cont{padding-block: var(--row-gap60);border-bottom: 1px solid var(--border-color01);font-size: var(--text-20);font-weight: 400;color: var(--black-color03);line-height: 1.6;min-height: clamp(300px, 40vw, 400px);display: flex;flex-direction: column;justify-content: space-between;gap: clamp(20px, 3vw, 30px);}
.board-view .db-user-content{font-size: inherit;font-weight: inherit;color: inherit;line-height: inherit;}
.board-view .file-desc{display: flex;align-items: center;background: var(--gray-bg01);padding: clamp(18px, 2.1vw, 21px) clamp(20px, 4vw, 40px);border-radius: var(--radius-10);margin-top: clamp(20px, 5.8vw, 58px);}
.board-view .file-desc dt{position: relative;font-size: var(--text-18);font-weight: 500;color: var(--black-color03);display: flex;align-items: center;justify-content: center;flex-shrink: 0;}
.board-view .file-desc dt::after{display: inline-flex;content:'';width: 1px;height: clamp(10px, 1.4vw, 12px);background: var(--border-color01);margin-inline: clamp(20px, 4vw, 40px);}
.board-view .file-desc dd{width: 100%;font-size: var(--text-17);color: var(--black-color08);}
.board-view .item-desc{display: flex; align-items: baseline; gap: 4px;}
.board-view .item-desc dt{flex-shrink: 0;color: var(--black-color01);}
.board-view .item-desc dd{width: 100%;color: var(--black-color06);}
.bullet-list{display: flex;flex-direction: column;gap:6px;}
.bullet-list > li{position: relative;display: flex;align-items: baseline;gap: var(--row-gap10);font-size: var(--text-18);font-weight:400;color:var(--black-color05);}
.bullet-list > li::before{display: inline-flex;content:'';width: clamp(3px, 0.5vw, 4px);aspect-ratio: auto 1;flex-shrink: 0;background: var(--black-color08);translate: 0 clamp(-5px, -0.3vw, -3px);border-radius:100%;}
.bullet-list > li em{font-weight: 700; color: var(--point-color04);}
.bullet-list > li > em{display: contents;}
/* btn-box */
.btn-box{position: relative;display: flex;justify-content: center; margin-top: var(--row-gap80);}
.btn-box.left{justify-content:flex-start;}
.btn-box.right{justify-content:flex-end;}
.btn-box :where(button, a){position: relative;display: flex;align-items: center;justify-content: center;text-align: center;min-width: clamp(120px, 19vw, 180px);min-height: clamp(46px, 6.5vw, 60px);background: var(--point-white);border: 1px solid var(--black-color03);font-size: var(--text-18);font-weight: 600;padding: 10px clamp(20px, 3vw, 30px);border-radius: var(--radius-10);transition: all 0.4s;}
@media (hover:hover) and (pointer:fine) {
.btn-box :where(button, a):hover{background: var(--point-color01);border-color: var(--point-color01);color: var(--point-white);}
}
/* sub-visual */
body:has(.sub-visual) #header{position: sticky;background: var(--point-white);}
body:has(.sub-visual) #header .logo .wh{opacity: 0;}
body:has(.sub-visual) #header .gnb > li > a{filter: none;}
.sub-visual{position: relative;min-height: clamp(230px, 39vw, 390px);display: flex;flex-direction: column;justify-content: center;padding-block: var(--row-gap100);}
.sub-visual .thumb{position: absolute;inset: 0;overflow: hidden;}
.sub-visual .thumb img{width: 100%;height: 100%;object-fit: cover;}
.sub-visual .title{position: relative;text-align: center;filter: var(--filter-white);}
.sub-visual .title h2{font-size: var(--text-60);font-weight: 700;}
/* sec-cate */
.sec-cate{box-shadow: inset 0 -1px var(--border-color01);}
.sec-cate .item-list{display: flex;text-align: center;justify-content: center;gap: var(--col-gap40);width: 100%;}
.sec-cate .item-list > li{position: relative;display: flex;align-items: center;justify-content: center;font-size: var(--text-20);color: var(--black-color08);min-width: clamp(90px, 12.2vw, 233px);min-height: clamp(56px, 7.2vw, 70px);font-family: var(--font-type02); transition: all 0.4s;}
.sec-cate .item-list > li.on{box-shadow: inset 0 -2px var(--point-color02);color: var(--point-color02);-webkit-text-stroke: clamp(0.2px, 0.6vw, 0.4px);}
.sec-cate .item-list > li > a{display: flex;align-items: center;justify-content: center;width: 100%;height: 100%;padding: 10px 15px;}
@media (hover:hover) and (pointer: fine) {
.sec-cate .item-list > li:not(.on):hover{color: var(--point-color01);}
}
@media (max-width:1024px) {
.sec-cate .item-list{justify-content: flex-start;overflow: hidden;overflow-x: auto;}
.sec-cate .item-list > li{flex-shrink:0;}
}
/* page-title */
.page-title{position: relative;text-align: center;display: flex;flex-direction: column;gap: var(--row-gap30);}
.page-title.hd{margin-bottom: var(--row-gap60);}
.page-title.hd-m{margin-bottom: var(--row-gap50);}
.page-title h3{font-size: var(--text-18);font-weight: 700;}
.page-title h3 em{font-family: var(--font-type02);color: var(--point-color01);}
.page-title h4{font-size: var(--text-50);font-weight: 700;color: var(--black-color01);}
.page-title h4 + .add-desc{margin-top: var(--row-gap10);}
.page-title h5{font-size: var(--text-22);font-weight: 400;color: var(--black-color03);line-height: 1.7;}
.page-title .add-desc{display: grid;gap: var(--row-gap10);}
.page-title .add-desc dt{font-size: var(--text-24);font-weight: 500;color: var(--black-color01);line-height: 1.6;}
.page-title .add-desc dd{font-size: var(--text-20);font-weight: 400;color: var(--black-color03);line-height: 1.8;}
/* greeting-meta */
.greeting-meta{display: flex;align-items: flex-start;gap: clamp(50px, 4.2vw, 80px);}
.greeting-meta .thumb{position: sticky;top: 150px;width: 40%;flex-shrink: 0;border-radius: var(--radius-20);overflow: hidden;}
.greeting-meta .thumb img{position: relative;}
.greeting-meta .title{position: relative;width: 100%;display: flex;flex-direction: column;gap: clamp(12px, 2.4vw, 24px);}
.greeting-meta .title h5{font-size: var(--text-30);font-weight: 600;color: var(--black-color03);line-height: 1.6;}
.greeting-meta .title h5 em{color: var(--point-color01);}
.greeting-meta .title h5 + p{margin-top: clamp(3px, 0.6vw, 6px);}
.greeting-meta .title p{font-size: var(--text-19);font-weight: 400;color: var(--black-color05);line-height: 1.8;}
.greeting-meta .title p strong{color: var(--black-color03);font-weight: 500;}
@media (max-width:1024px) {
.greeting-meta{flex-wrap:wrap;width: min(600px, 100%);margin-inline: auto;}
.greeting-meta .thumb{position:relative;inset: auto;width: auto;flex-shrink: unset;}
}
/* ci-bg */
.ci-bg{position: relative;height: clamp(210px, 40vw, 400px);background: var(--point-white);border-radius: var(--radius-20);display: flex;align-items: center;justify-content: center;padding: 40px;}
.ci-bg::before{position:absolute;content:'';inset: 0;background: repeating-linear-gradient(to right,rgba(221,221,221,.4) 0 1px,transparent 1px 14px),repeating-linear-gradient(to bottom,rgba(221,221,221,.4) 0 1px,transparent 1px 14px);opacity: 0.4;}
.ci-bg img{position: relative;}
.ci-title{position: relative;background: var(--point-white);border-radius: var(--radius-20);padding: var(--row-gap40);text-align: center;display: grid;gap: var(--row-gap20);}
.ci-title h6{font-size: var(--text-20);font-weight: 400;color: var(--black-color03);line-height: 1.6;}
.ci-title h6 strong{font-weight: 700;}
.ci-title p{font-size: var(--text-18);font-weight: 400;color: var(--black-color03);line-height: 1.6;}
.ci-title p strong{font-weight: 700;}
/* com-tab */
.com-tab{position: relative;background: var(--gray-bg02);border-radius: var(--radius-40);width: fit-content;margin-inline: auto;display: flex;justify-content: center;text-align: center; margin-bottom: var(--row-gap60);}
.com-tab > li{position: relative;display: flex;align-items: center;justify-content: center;min-width: clamp(180px, 11vw, 200px);min-height: clamp(45px, 6.2vw, 60px);border-radius: 60px;font-size: var(--text-20);font-weight: 500;color: var(--black-color08);transition: all 0.4s;}
.com-tab > li.on{background: var(--point-white);box-shadow: inset 0 0 0 2px var(--point-color02), var(--shadow-01);color: var(--point-color02);-webkit-text-stroke: clamp(0.2px, 0.6vw, 0.4px);}
.com-tab > li > a{display: flex;align-items: center;justify-content: center;width: 100%;height: 100%;padding: 10px 15px;}
.sticky-tab{position: sticky; top:15px; z-index: 5;}
.tab-cont{position: relative;}
.tab-cont > .items{transition: all 0.4s;}
.tab-cont > .items:not(.on){height: 0; opacity: 0; overflow: hidden;}
@media (hover:hover) and (pointer: fine) {
.com-tab > li:not(.on):hover{color: var(--point-color02);}
}
@media (max-width:1024px) {
.com-tab{width: 100%;overflow: hidden;overflow-x: auto;justify-content: flex-start;}
.com-tab > li{flex-shrink: 0;min-width: clamp(120px, 18vw, 180px);}
}
/* bullet-list */
.bullet-list{position: relative;display: flex;flex-direction: column;gap: var(--row-gap10);text-align: left;width: 100%;}
.bullet-list > li{position: relative;font-size: var(--text-18);color: var(--black-color03);line-height: 1.6;display: flex;align-items: baseline;gap: var(--row-gap10);}
.bullet-list > li::before{display: inline-flex;content:'';width: clamp(3px, 0.6vw, 4px);aspect-ratio: auto 1;border-radius: 100%;background: var(--point-color02);flex-shrink: 0;translate: 0 clamp(-5px, -0.7vw, -4px);}
.bullet-list.type02 > li{color: var(--black-color06);}
.bullet-list.type02 > li::before{background: currentColor;}
/* history-meta */
.history-meta{display:grid;gap: var(--row-gap80);}
.history-meta article{display:flex;align-items: flex-start;gap: var(--row-gap30) var(--row-gap40);padding-top: var(--row-gap60);}
.history-meta .sticky-title{position: sticky;top: 150px;width: clamp(300px, 420px, 28%);flex-shrink: 0;}
.history-meta .sticky-title h3{font-size: var(--text-50);font-weight: 700;}
.history-meta .sticky-title h3 em{display: inline-block;color: var(--trans-color);background: var(--point-grad01);background-clip: text;font-family: var(--font-type02);}
.history-meta .info-list{width: 100%;display: flex;flex-direction: column;gap: clamp(25px, 3vw, 60px);}
.history-meta .info-list > li{position: relative;padding-top: clamp(25px, 3vw, 60px);border-top: 1px solid var(--black-color03);}
.history-meta .info-list > li + li{border-color: var(--border-color01);}
.history-meta .info-desc{display: flex;align-items: flex-start;gap: 10px clamp(15px, 2vw, 20px);}
.history-meta .info-desc dt{position: relative;width: clamp(150px, 15vw, 280px);flex-shrink: 0;font-size: var(--text-40);font-weight: 600;color: var(--black-color01);font-family: var(--font-type02);}
.history-meta .info-desc dd{width: 100%;font-size: var(--text-18);color: var(--black-color03);line-height: 1.6;}
@media (max-width:1024px) {
.history-meta article{flex-wrap: wrap;}
.history-meta .sticky-title{position: relative; width: 100%; inset: auto; flex-shrink: unset;}
.history-meta .info-desc dt{width: clamp(85px, 16vw, 160px);}
}
@media (max-width:360px) {
.history-meta .info-desc{flex-wrap:wrap;}
.history-meta .info-desc dt{width:100%;flex-shrink: unset;}
}
/* organ-meta */
.organ-meta{position: relative;}
.organ-meta::before{position:absolute;content:'';width: 1px;height: 100%;background: var(--border-color01);left: 50%;clip-path: inset(20px 0 0);}
.organ-meta .circle-box{position: relative;inline-size: min(clamp(160px, 24vw, 240px), 100%);aspect-ratio: auto 1;margin: 0 auto var(--row-gap60);border-radius: 100%;background: var(--point-color08);display: flex;align-items: center;justify-content: center;}
.organ-meta .circle-title{position: relative;width: calc(100% - clamp(30px, 4vw, 40px));height: calc(100% - clamp(30px, 4vw, 40px));border-radius: inherit;display: flex;flex-direction: column;align-items: center;justify-content: center;background: var(--point-grad01);padding: 15px;}
.organ-meta .circle-title h5{font-size: var(--text-32);font-weight: 600;color: var(--point-white);}
.organ-meta .chart-items{position: relative;display: flex;justify-content: center;--organ-gap: clamp(40px, 13vw, 240px);gap: var(--organ-gap);}
.organ-meta .chart-items > li{position: relative;width: 280px;text-align: center;}
.organ-meta .chart-items > li::before{position:absolute;content:'';width: var(--organ-gap);height: 1px;background: var(--border-color01);top: 50%;left: 100%;}
.organ-meta .chart-items > li:last-child::before{display:none;}
.organ-meta .chart-items span{display: flex;align-items: center;justify-content: center;width: 100%;min-height: clamp(55px, 8.5vw, 80px);padding: 10px clamp(5px, 1.5vw,15px);font-size: var(--text-22);font-weight: 600;color: var(--point-white);background: var(--point-color04);border-radius: var(--radius-10);}
.organ-meta .chart-items .dep02{position: relative;display: grid;gap: 8px;}
.organ-meta .chart-items .dep02 > li{position: relative;}
.organ-meta .chart-items .dep02 > li > span{background: var(--point-white);border: 1px solid var(--border-color01);font-size: var(--text-18);font-weight: 500;color: var(--black-color04);min-height: clamp(46px, 7vw, 65px);}
.organ-meta .chart-items.type02{padding-top: var(--row-gap80);display: grid;grid: auto / repeat(3, 1fr);--organ-gap: clamp(15px, 7.9vw, 150px);}
.organ-meta .chart-items.type02 > li{margin-top: var(--row-gap40);padding: clamp(10px, 2vw, 20px);background: var(--gray-bg01);border-radius: var(--radius-20);display: grid;gap: 10px;width: 100%;}
.organ-meta .chart-items.type02 > li::before{position: absolute;width: 1px;height: var(--row-gap40);inset: auto;left: 50%;bottom: 100%;display: block;}
.organ-meta .chart-items.type02 > li::after{position: absolute;content: '';width: calc(100% + var(--organ-gap) + 1px);height: 1px;bottom: calc(100% + var(--row-gap40));left: 50%;background: var(--border-color01);}
.organ-meta .chart-items.type02 > li:last-child::after{display:none;}
.organ-meta .chart-items.type02 > li > span{font-size: var(--text-20);background: var(--point-color01);min-height: clamp(50px, 7.3vw, 68px);}
@media (max-width:479px) {
.organ-meta .chart-items.type02{--organ-gap: 15px;}
}
@media (max-width:360px) {
.organ-meta .chart-items.type02{grid: auto / repeat(1, 1fr);}
.organ-meta .chart-items.type02 > li{margin-top: 0;}
.organ-meta .chart-items.type02 > li::before{height: 15px;}
.organ-meta .chart-items.type02 > li::after{display: none;}
}
/* net-badge */
.net-badge{display: flex;align-items: center;justify-content: center;font-size: var(--text-20);font-weight: 600;color: var(--point-white);background: var(--point-grad02);width: fit-content;padding: 13px 30px;border-radius: 100px;}
/* sec-title */
.sec-title{position: relative;}
.sec-title.hd{margin-bottom: clamp(15px, 2.4vw, 24px);}
.sec-title.hd-l{margin-bottom: clamp(15px, 4vw, 40px);}
.sec-title h5{font-size: var(--text-32);font-weight: 700;color: var(--black-color01);}
.sec-title h5.bullet{display: flex;align-items: baseline;gap: clamp(10px, 1.4vw, 14px);}
.sec-title h5.bullet::before{display: inline-flex;content:'';width: clamp(3px, 0.7vw, 5px);height: clamp(16px, 2.6vw, 26px);background: var(--point-color01);border-radius: 10px;flex-shrink: 0;translate: 0 1px;}
/* cardnet-list */
.cardnet-list{display: grid;grid: auto / repeat(3, 1fr);gap: clamp(15px, 1.6vw, 24px);}
.cardnet-list > li{position: relative;background: var(--point-white);padding: clamp(20px, 3vw, 30px);border-radius: var(--radius-16);}
.cardnet-list .desc{display: grid;gap: 10px;}
.cardnet-list .desc dt{font-size: var(--text-22);font-weight: 700;color: var(--black-color01);line-height: 1.5;display: grid;gap: 4px;}
.cardnet-list .desc dt small{font-size: var(--text-16);color: var(--black-color10);}
.cardnet-list .desc dd{font-size: var(--text-18);color: var(--black-color05);line-height: 1.7;}
@media (max-width:1024px) {
.cardnet-list{grid: auto / repeat(2, 1fr);}
}
@media (max-width:640px) {
.cardnet-list{grid: auto / repeat(1, 1fr);}
}
/* com-bnr */
.com-bnr{position: relative;border-radius: var(--radius-20);overflow: hidden;}
.com-bnr img{min-height: 180px; object-fit: cover;}
/* chk-items */
.chk-items{display: grid;grid: auto / repeat(2, 1fr);gap: clamp(15px, 1.6vw, 24px);}
.chk-items > li{position: relative;border: 1px solid var(--border-color01);border-radius: var(--radius-20);background: var(--point-white);padding: var(--row-gap40);}
.chk-items .desc{display: grid;gap: clamp(15px, 2.4vw, 24px);}
.chk-items .desc dt{font-size: var(--text-24);font-weight: 700;color: var(--black-color01);line-height: 1.5;display: flex;align-items: center;gap: clamp(10px, 1.4vw, 14px);}
.chk-items .desc dt::before{display: inline-flex;content:'';width: clamp(20px, 3.4vw, 32px);aspect-ratio: auto 1;border-radius: 100%;background: var(--point-color01) url('/images/chk-i.svg') no-repeat center / clamp(10px, 1.5vw, 13px) auto;flex-shrink: 0;}
.chk-items .desc dt + dd{padding-top: clamp(15px, 2.4vw, 24px);border-top: 1px solid var(--border-color01);}
.chk-items .desc dd{font-size: var(--text-18);color: var(--black-color05);line-height: 1.8;}
@media (max-width:1024px) {
.chk-items{grid: auto / repeat(1, 1fr);}
}
/* vec-items */
.vec-items{display: grid;grid: auto / repeat(3, 1fr);gap: clamp(15px, 1.6vw, 24px);}
.vec-items > li{position: relative;border: 1px solid var(--border-color01);border-radius: var(--radius-20);background: var(--point-white);padding: var(--row-gap40);text-align: center;display: flex;flex-direction: column;gap: clamp(15px, 2vw, 20px);}
.vec-items .icon{display: flex;align-items: center;justify-content: center;inline-size: clamp(60px, 10.2vw, 100px);aspect-ratio: auto 1;border-radius: 100%;background: var(--gray-bg01);margin-inline: auto;padding: 15px;overflow: hidden;}
.vec-items .desc{display: grid;gap: var(--row-gap15);width: 100%;}
.vec-items .desc dt{font-size: var(--text-24);font-weight: 600;color: var(--black-color01);line-height: 1.5;}
.vec-items .desc dd{font-size: var(--text-18);color: var(--black-color06);line-height: 1.8; width: 100%;}
.vec-items .desc dd + dd{margin-top: clamp(-5px, -0.5vw, -2px);}
.vec-items.type02{grid: auto / repeat(2, 1fr);}
.vec-items.type02 > li{flex-direction: row;align-items: flex-start;text-align: left;column-gap: clamp(20px, 3vw, 30px);}
.vec-items.type02 .icon{flex-shrink:0;margin-inline: 0;}
.vec-items.array02{grid: auto / repeat(2, 1fr);}
@media (max-width:1024px) {
.vec-items{grid: auto / repeat(2, 1fr);}
.vec-items.type02{grid: auto / repeat(1, 1fr);}
}
@media (max-width:479px) {
.vec-items{grid: auto / repeat(1, 1fr);}
.vec-items.array02{grid: auto / repeat(1, 1fr);}
}
@media (max-width:360px) {
.vec-items.type02 > li{flex-direction: column;text-align: center;align-items: center;}
}
/* 지점정보 */
.br-main{display: flex;gap: var(--col-gap40);}
.br-side{position: relative;width: 100%;display: flex;flex-direction: column;gap: var(--col-gap20);}
.br-search{position: relative;background: var(--point-white);padding: clamp(15px, 2vw, 20px);border-radius: var(--radius-20);border: 1px solid var(--border-color01);display: grid;gap: 10px;}
.br-search-row--region{position: relative;display: flex;border-radius: var(--radius-10);}
.br-search-row--region::before{position:absolute;content:'';inset: 0;border: 1px solid var(--border-color01);border-radius: inherit;z-index: 1;pointer-events: none;}
.br-search-row--keyword{display: flex;gap: 10px;}
.br-input{width:100%;}
.br-search-row--keyword button{flex-shrink: 0;display: flex;align-items: center;justify-content: center;text-align: center;min-width: clamp(70px, 9vw, 80px);min-height: clamp(45px, 6.5vw, 60px);padding: 10px 15px 9px;background: var(--gray-bg01);border: 1px solid var(--border-color01);border-radius: var(--radius-10);font-size: var(--text-18);font-weight: 600;color: var(--black-color03);}
.br-search-row--keyword .br-btn--search{background: var(--point-color09);border-color: var(--point-color09);color: var(--point-white);}
.br-select{position: relative;width: 100%;}
.br-select::after{position:absolute;content:'';width: 1px;height: clamp(12px, 1.6vw, 14px);background: var(--border-color01);top: 50%;right: 0;translate: 0 -50%;}
.br-select:last-child::after{display:none;}
.br-select select{width: 100%;border: 0;}
#branchList{display: grid;gap: var(--col-gap20);height: 549px;overflow: hidden;overflow-y: auto;padding-right: 20px;align-content: start;}
#branchList{ scrollbar-gutter: stable;}
#branchList::-webkit-scrollbar {width: clamp(3px, 0.6vw, 4px); border-radius:10px;}
#branchList::-webkit-scrollbar-track {background:var(--border-color01); border-radius:10px;}
#branchList::-webkit-scrollbar-thumb {background:var(--black-color06); border-radius:10px;}
#branchList > li{position: relative;box-shadow: inset 0 0 0 1px var(--border-color01);border-radius: var(--radius-20);padding: clamp(20px, 3vw, 30px) clamp(15px, 2vw, 20px);background: var(--point-white);display: flex;align-items: flex-start;gap: 10px;cursor: pointer;}
#branchList > li::before{display: inline-flex;content:'';mask: url('/images/map-i.svg') no-repeat center / clamp(14px, 2.4vw, 22px) auto;background: var(--point-color01);width: clamp(22px, 4vw, 38px);aspect-ratio: auto 1;flex-shrink: 0;}
#branchList > li::after{position: absolute;content:'';inset: 0;border: 2px solid var(--point-color09);border-radius: inherit;opacity: 0;pointer-events: none;transition: all 0.4s;}
#branchList > li.is-active::after{opacity: 1;}
#branchList .desc{display: flex;flex-direction: column;width: 100%;gap: 4px;}
#branchList .desc dt{font-size: var(--text-24);font-weight: 600;color: var(--black-color03);}
#branchList .desc dt + dd{margin-top: clamp(4px, 0.8vw, 6px);}
#branchList .desc dd{font-size: var(--text-18);color: var(--black-color06);line-height: 1.6;}
#branchList .desc dd a{font-weight: 600;}
.br-map-wrap{position: relative;width: min(900px, 60%);min-height: 740px;flex-shrink: 0;border-radius: var(--radius-30);overflow: hidden;}
#branchMap{position: relative;width: 100%;height: 100%;}
.br-infowrap{border: 2px solid var(--point-color09) !important;border-radius: var(--radius-10);}
.br-infowindow{width:min(260px, calc(100vw - 64px));padding: 15px;font-size: var(--text-14);color: var(--black-color06);display: grid;gap: 4px;}
.br-infowindow strong{font-size: var(--text-17);font-weight: 600;color: var(--black-color03);margin-bottom: 3px;}
.br-infowindow-phone{font-weight: 600;}
@media (max-width:1024px) {
.br-main{flex-wrap:wrap;}
#branchList{height: clamp(300px, 55vw, 549px);}
.br-map-wrap{width:100%;min-height: auto;height: clamp(400px, 74vw, 740px);}
}
@media (max-width:479px) {
.br-search-row--keyword{flex-wrap: wrap;}
.br-search-row--keyword button{width: calc(100% / 2 - 7.5px); flex-shrink: unset;}
}
/* more-arw */
.more-arw{position: relative;font-size: var(--text-20);font-weight: 500;color: var(--black-color01);line-height: 1.6;display: flex;align-items: center;justify-content: center;gap: clamp(10px, 1.4vw, 12px);}
.more-arw::after{display: inline-flex;content:'';background: url('/images/more-arw.svg') no-repeat center / clamp(15px, 1.8vw, 16px) auto, var(--point-grad03);width: clamp(24px, 3.4vw, 32px);aspect-ratio: auto 1;border-radius: 100%;}