@charset "utf-8";

/********** 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;}

/********************
** index 
********************/
/** mainBanner **/
.mainBanner {background:url('/img/mainBanner.jpg'); background-position:center; background-size:cover;}
.mainBannerInner {gap:64px;}
.mainBannerBtn {border:1px solid #F7F8F8;}
.mainBannerGallery {overflow:visible;}
.mainBannerFlow {--main-banner-visible-count:1.8; --main-banner-gap:20px; --main-banner-flow-width:calc(100% + clamp(96px, 10vw, 180px)); overflow:hidden; width:var(--main-banner-flow-width); padding:24px 0;}
.mainBannerFlowTrack {display:flex; width:max-content; animation:mainBannerFlow 80s linear infinite;}
.mainBannerFlowSet {display:flex; align-items:center; gap:var(--main-banner-gap); padding-right:var(--main-banner-gap);}
.mainBannerFlow img {display:block; height:auto; flex:0 0 auto;}
@keyframes mainBannerFlow {
    from {transform:translate3d(0, 0, 0);}
    to {transform:translate3d(-50%, 0, 0);}
}
@media (prefers-reduced-motion: reduce) {
    .mainBannerFlowTrack {animation:none;}
}
/** about **/
.aboutCnts {display:grid; grid-template-columns:repeat(3,1fr);}
/** why **/
.whyCnts {display:grid; grid-template-columns:repeat(5,1fr);}
.whyCnt1 {box-shadow:0 0 40px #FF4AFF;}
.whyCnt2 {background:linear-gradient(to bottom, #0088FF, #FF00FF);}
/** support **/
.supportCnts {display:grid; grid-template-columns:repeat(3, 1fr);}
.supportCnt {background: rgba(255, 255, 255, 0.1); box-shadow:inset 0 0 4px rgba(255, 255, 255, 0.25);}
/** review **/
.reviewMarquee {position:relative; overflow:hidden; width:100%; --review-visible-count:4; --review-gap:24px; --review-card-width:320px;}
.reviewTrack {display:flex; gap:var(--review-gap); width:max-content; will-change:transform;}
.reviewItem {position:relative; flex:0 0 var(--review-card-width); aspect-ratio:4 / 6; overflow:hidden; isolation:isolate;}
.reviewItem::before {content:""; position:absolute; inset:0; z-index:0;}
.reviewItem > * {position:relative; z-index:1;}
.reviewItem img {width:min(120px, 26%); height:auto;}
.reviewItem p {line-height:1.5; word-break:keep-all;}
.reviewCnt-001 {background:url('/img/review-001.jpg'); background-position:center; background-size:cover;}
.reviewCnt-002 {background:url('/img/review-002.jpg'); background-position:center; background-size:cover;}
.reviewCnt-003 {background:url('/img/review-003.jpg'); background-position:center; background-size:cover;}
.reviewCnt-004 {background:url('/img/review-004.jpg'); background-position:center; background-size:cover;}
.reviewCnt-005 {background:url('/img/review-005.jpg'); background-position:center; background-size:cover;}
.reviewCnt-006 {background:url('/img/review-006.jpg'); background-position:center; background-size:cover;}
.reviewCnt-007 {background:url('/img/review-007.jpg'); background-position:center; background-size:cover;}
/** subBanner **/
.subBanner {background:url('/img/subBanner.jpg'); background-position:center; background-size:cover;}
/** family **/
.family {overflow:hidden; --family-column-height:clamp(440px, 68vw, 960px); --family-gap:24px; --family-visible-count:2.8;}
.familyGallery {position:relative; align-items:stretch;}
.familyMarquee {position:relative; overflow:hidden; height:var(--family-column-height);}
.familyMarqueeTrack {display:flex; flex-direction:column; gap:var(--family-gap); width:100%; will-change:transform;}
.familyMarquee img {display:block; width:100%; height:auto;}
.familyItemThumb {display:block;}
.familyItemName {display:inline-block; text-decoration:none;}
.familyCopy {align-self:flex-start;}
.familybox {background:linear-gradient(to bottom, #0088FF, #FF00FF);}
.familyTit {display:block; width:fit-content; margin:0; font-size:240px; line-height:1; white-space:nowrap; writing-mode:vertical-rl; text-orientation:sideways;}
.familyFBg1,
.familyFBg2 {position:absolute; left:0; z-index:5; pointer-events:none;}
.familyFBg1 {top:0; background:linear-gradient(to bottom, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0) 100%);}
.familyFBg2 {bottom:0; background:linear-gradient(to top, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0) 100%);}
.dateInputWrap {position:relative;}
.dateInput {
    position:relative;
    padding-right:72px;
    cursor:pointer;
}
.dateInput::-webkit-calendar-picker-indicator {
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    margin:0;
    opacity:0;
    cursor:pointer;
}
.dateInputIcon {
    position:absolute;
    right:24px;
    top:50%;
    width:24px;
    height:24px;
    transform:translateY(-50%);
    background:url('/img/datapicker.svg') center / contain no-repeat;
    pointer-events:none;
}
.contactAgree {flex-wrap:wrap;}
.checkBoxLine {
    flex:0 0 20px;
    width:20px;
    height:20px;
    margin:0;
    padding:0;
    -webkit-appearance:none;
    appearance:none;
    background:url('/img/chkOff.svg') center / contain no-repeat;
    border:0;
    cursor:pointer;
    flex-shrink:0;
}
.checkBoxLine:checked {background-image:url('/img/chkOn.svg');}
.checkBoxLine:focus-visible {
    outline:2px solid #0088FF;
    outline-offset:3px;
}
.contactAgreeLabel {
    display:inline-flex;
    align-items:center;
    cursor:pointer;
}
.contactBtn {background:linear-gradient(to right, #0088FF, #FF00FF);}
.underLine {text-decoration:underline;}

/********************
** 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;}

/********************
** creator
********************/
/** Write **/
.inputBox {border:1px solid #D9DADE;}
.fileInput {
    position:absolute;
    width:1px;
    height:1px;
    padding:0;
    margin:-1px;
    overflow:hidden;
    clip:rect(0, 0, 0, 0);
    white-space:nowrap;
    border:0;
}
.fileUploadButton {cursor:pointer;}
.fileNameText {
    flex:1;
    min-width:0;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}