@charset "utf-8";

/********** common **********/
.siteHeaderOffset{display:block; width:100%; height:80px; flex:none;}

/********** popup **********/
.popup{position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);}
.haoPopup{position:fixed; inset:0; z-index:9999; display:none;}
.haoPopup[aria-hidden="false"]{display:block;}
.haoPopupDim{position:absolute; inset:0; background:rgba(0,0,0,.55); backdrop-filter:blur(2px);}
.popup{width:min(90vw,520px); overflow:hidden;}
.haoPopupImg{display:block; width:100%; height:auto; -webkit-user-drag:none; user-select:none;}
.today,.close{cursor:pointer;}

/*******************
** header
*******************/

/*******************
** index
*******************/
/** mainBanner **/
.mainBannerBg {background:url('/img/mainBanner.jpg'); background-position:center; background-size:cover;}
.mainBannerBtn {box-shadow:4px 4px 16px rgba(0,0,0,0.25);}
/** about **/
.aboutSlideGroup{--about-slide-gap:40px; --about-slide-visible-count:5.8; --about-slide-visible-gap-count:5; overflow:hidden;}
.aboutSlide{position:relative; width:100%; overflow:hidden;}
.aboutSlideTrack{display:flex; width:max-content; will-change:transform;}
.aboutSlideSet{display:flex; align-items:center; gap:var(--about-slide-gap); flex-shrink:0; padding-right:var(--about-slide-gap);}
.aboutSlideSet img{display:block; width:var(--about-slide-item-width, 180px); max-width:none; height:auto; flex-shrink:0;}
.aboutSlideTop .aboutSlideTrack{animation:aboutSlideRight 26s linear infinite;}
.aboutSlideBottom .aboutSlideTrack{animation:aboutSlideLeft 26s linear infinite;}
.aboutSlideStyleLeft {left:0; background:linear-gradient(to right, #FFF, rgba(255, 255, 255, 0));}
.aboutSlideStyleRight {right:0; background:linear-gradient(to left, #FFF, rgba(255, 255, 255, 0));}
@keyframes aboutSlideLeft{from{transform:translateX(0);} to{transform:translateX(-50%);}}
@keyframes aboutSlideRight{from{transform:translateX(-50%);} to{transform:translateX(0);}}
.aboutCntpont {border:2px solid #F25512;}
.aboutCrown {right:24px; top:-24px;}
/** review **/
.review{overflow:hidden;}
.reviewMarquee{
    --review-slide-gap:24px;
    --review-visible-count:5;
    --review-profile-width:80px;
    --review-card-width:calc((100vw - (var(--review-slide-gap) * (var(--review-visible-count) - 1))) / var(--review-visible-count));
    margin-top:80px;
    overflow:hidden;
    width:100%;
}
.reviewTrack{
    display:flex;
    width:max-content;
    gap:var(--review-slide-gap);
    will-change:transform;
}
.reviewTrack.is-ready{animation:reviewMarqueeScroll var(--review-duration, 30s) linear infinite;}
.reviewSet{display:flex; align-items:stretch; gap:var(--review-slide-gap); flex-shrink:0; width:max-content;}
.reviewSetSpacer{display:none;}
.reviewCard{align-items:stretch; flex:0 0 auto; width:var(--review-card-width);}
.reviewCarthaf {background: linear-gradient(to left, #F25512 50%, #FFF 50%);}
.reviewCard1 {width:calc(var(--review-card-width) - var(--review-profile-width)); min-width:0; border-radius:24px 32px 0px 24px;}
.reviewCard > div:last-child{flex:none; width:var(--review-profile-width);}
.reviewCarthaf{width:100%;}
.reviewCard2 {border-radius:0 0 0 22px;}
@keyframes reviewMarqueeScroll{
    from{transform:translate3d(0,0,0);}
    to{transform:translate3d(calc(-1 * var(--review-loop-width, 0px)),0,0);}
}
@media (max-width:1024px){
    .reviewMarquee{--review-slide-gap:16px;}
}
@media (max-width:768px){
    .reviewMarquee{--review-slide-gap:12px;}
}
@media (prefers-reduced-motion:reduce){
    .reviewTrack.is-ready{animation:none; transform:none;}
}
/** benefit **/
.benefit{overflow:hidden;}
.benefit .inner{position:relative; z-index:1;}
.benefitCnts{display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); align-items:stretch;}
.benefitCol{min-width:0;}
.benefitCnt{position:relative; border:1px solid #F7B98C; background:#FFF; box-shadow:none; transition:background-color .3s ease, border-color .3s ease, box-shadow .3s ease;}
.benefitCnt p{transition:color .3s ease;}
.benefitCntIcon{transition:transform .3s ease;}
.benefitCnt.is-active{background:#F25512; border-color:#F25512; box-shadow:4px 4px 16px #EEEEF0;}
.benefitCnt.is-active p{color:#F7F8F8;}
.benefitBg {position:absolute; background-image:url('/img/benefit-img-001.jpg'); background-position:center; background-size:cover; background-repeat:no-repeat; opacity:1; top:0; right:0; z-index:0; pointer-events:none; border-radius:0 0 0 240px; transition:opacity .25s ease;}
.benefitBg.is-fixed{position:fixed; right:auto;}
.benefitBg.is-bottom{top:auto; bottom:0;}
/** item **/
.itemInfoBubble{position:relative; isolation:isolate; box-shadow:0 4px 16px rgba(0,0,0,0.25);}
.itemInfoBubble::after{content:""; position:absolute; left:50%; bottom:-8px; width:28px; height:28px; background:inherit; transform:translateX(-50%) rotate(45deg); border-radius:0 0 2px 0; z-index:-1;}
.itemCnts {display:grid; width:100%; grid-template-columns:repeat(6, minmax(0, 1fr));}
.itemCnt{width:100%; min-width:0; cursor:pointer; transition:transform .25s ease;}
.itemCnt p{width:100%; overflow-wrap:anywhere; word-break:keep-all;}
.itemCnt img{filter:grayscale(1); transition:filter .25s ease, transform .25s ease;}
.itemCnt:hover,
.itemCnt:active,
.itemCnt:focus-visible,
.itemCnt[aria-expanded="true"]{transform:translateY(-4px);}
.itemCnt:hover img,
.itemCnt:active img,
.itemCnt:focus-visible img,
.itemCnt[aria-expanded="true"] img{filter:grayscale(0); transform:scale(1.03);}
.itemCnt:focus-visible{outline:none;}
.itemModal{position:fixed; inset:0; z-index:9999; display:none;}
.itemModal[aria-hidden="false"]{display:flex;}
.itemModalDim{position:absolute; inset:0; background:rgba(17, 18, 24, .56); backdrop-filter:blur(4px);}
.itemModalShell{position:relative; z-index:1; display:flex; flex-direction:column; align-items:flex-end; gap:8px; max-width:100%;}
.itemModalPanel{position:relative; background:#FFF; box-shadow:0 24px 80px rgba(17, 18, 24, .18); overflow:hidden; z-index:1;}
.itemModalClose{position:relative; display:flex; align-items:center; justify-content:center; width:32px; height:32px; padding:0; border:0; border-radius:0; background:transparent; box-shadow:none; -webkit-appearance:none; appearance:none; cursor:pointer; z-index:2;}
.itemModalClose span{position:absolute; width:24px; height:2px; background:#FFF; border-radius:999px;}
.itemModalClose span:first-child{transform:rotate(45deg);}
.itemModalClose span:last-child{transform:rotate(-45deg);}
.itemModalContent{min-height:1.5em;}
/** step **/
.stepCnt{align-self: stretch;}
.stepCnts {display:grid; grid-template-columns:repeat(3, 1fr); align-items:start;}
.stepCnt6{align-self:start;}
.stepCnt {background:rgba(255,255,255,0.05);}
.stepCnt6 {background:url('/img/step-006.jpg'); background-position:right; background-size:cover;}
/** place **/
.placeCnts {min-height:480px; max-height:480px; overflow-y:auto; border:1px solid #D9DADE; scrollbar-gutter:stable;}
/** subBanner **/
.subBanner{overflow:hidden;}
.subBannerMarquee{overflow:hidden;}
.subBannerTrack{display:flex; width:max-content; will-change:transform; animation:subBannerSlide 80s linear infinite;}
.subBannerSet{display:flex; align-items:center; flex-shrink:0;}
.subBannerSet img,
.subBannerSet p{flex:none;}
.subBannerSet p{white-space:nowrap;}
@keyframes subBannerSlide{from{transform:translateX(0);} to{transform:translateX(-50%);}}
/** faq **/
.faqList{display:flex; flex-direction:column; gap:16px;}
.faqItem{border:1px solid #F9D6B9; background-color:#FFFFFF; overflow:hidden; transition:border-color .3s ease, background-color .3s ease;}
.faqItem.is-open{border:2px solid #F79359; background-color:#FFF6ED;}
.faqCnt{width:100%; border:none; background:transparent; cursor:pointer; text-align:left;}
.faqItem.is-open .faqCnt{padding-bottom:24px;}
.faqCnt p{padding-right:20px;}
.faqArrow{flex:none; transition:transform .35s ease;}
.faqItem.is-open .faqArrow{transform:rotate(180deg);}
.faqPanel{height:0; overflow:hidden; transition:height .35s ease;}
.faqPanelInner{padding:0 32px 32px;}
/** list **/
.list{overflow:hidden;}
.list .inner{position:relative; z-index:1;}
.listRowsWrap {
    --list-fade-size: 112px;
    --list-fade-soft: 28px;
    position: relative;
    z-index: 1;
    min-width: 0;
    overflow: hidden;
    /* 기존 mask-image 유지 */
    -webkit-mask-image: linear-gradient(
        to bottom,
        transparent 0,
        rgba(0, 0, 0, .28) var(--list-fade-soft),
        #000 var(--list-fade-size),
        #000 calc(100% - var(--list-fade-size)),
        rgba(0, 0, 0, .28) calc(100% - var(--list-fade-soft)),
        transparent 100%
    );
    mask-image: linear-gradient(
        to bottom,
        transparent 0,
        rgba(0, 0, 0, .28) var(--list-fade-soft),
        #000 var(--list-fade-size),
        #000 calc(100% - var(--list-fade-size)),
        rgba(0, 0, 0, .28) calc(100% - var(--list-fade-soft)),
        transparent 100%
    );
}

.listRows {
    position: relative; 
    z-index: 1; 
    min-width: 0; 
    will-change: transform;
}

.listRow {
    display: grid; 
    width: 100%; 
    min-width: 0; 
    grid-template-columns: 72px minmax(0, 1fr) minmax(0, 1fr) 56px auto; 
    align-items: center; 
    gap: 16px;
    /* [추가] 투명도 변화를 아주 부드럽게 (0.8초) */
    transition: opacity 0.8s ease-in-out;
    will-change: opacity;
}

/* 마스크 영역과 시너지를 내기 위해 edge 투명도를 조절 */
.listRow.is-edge {
    opacity: 0; /* Mask가 이미 있으므로 0으로 두어 완전히 자연스럽게 사라지게 합니다 */
}
.listCell{min-width:0;}
.listCellService,
.listCellPhone,
.listCellName{white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.listCellName{text-align:center;}
.listStatus{justify-self:end;}
.listCnt1 {border:1px solid #5D606C;}
.listCnt2 {border:1px solid #E44912;}
.listBgTxt {bottom:0; left:0; max-width:100%; white-space:nowrap; pointer-events:none;}
/** contact **/
.contacttelBtn {box-shadow:4px 4px 16px #F9D6B9;}
.contactForm fieldset{border:0;}
.inputBox {border:1px solid #D9DADE;}
.inputBox:focus{border-color:#F79359; outline:none;}
.contactPolicyWrap{position:relative;}
.contactPolicyInput{position:absolute; opacity:0; pointer-events:none;}
.contactPolicyLabel{cursor:pointer;}
.contactPolicyIcon{width:24px; height:24px; flex:none; background:url('/img/chkOff.svg') center/contain no-repeat;}
.contactPolicyInput:checked + .contactPolicyLabel .contactPolicyIcon{background-image:url('/img/chkOn.svg');}
.contactPolicyInput:focus-visible + .contactPolicyLabel .contactPolicyIcon{outline:2px solid #F79359; outline-offset:2px; border-radius:4px;}
.undLine{text-decoration:underline; text-underline-position:under;}
.contactBtn {border:none; background:linear-gradient(to right, #F79359, #E44912); cursor:pointer;}

/*******************
** footer
*******************/
footer {border-top:1px solid #D9DADE;}

/*******************
** login
*******************/
.loginBg {background:url('/img/login.jpg'); background-position:center; background-size:cover;}

/*******************
** contact
*******************/
/** list **/
.contactTable tr{border-top:1px solid #D9DADE;}
.contactTable tr:last-child{border-bottom:1px solid #D9DADE;}
.contactTable th,
.contactTable td {border-right:1px solid #D9DADE;}
.contactTable th:last-child,
.contactTable td:last-child {border-right:0;}
/** view **/
.consiltCntLine {border-top:1px solid #D9DADE;}
.consiltCntLine:last-child {border-bottom:1px solid #D9DADE;}
.successBtnLine {border:1px solid #D9DADE;}