@charset "utf-8";

/********************
** mainBanner
********************/
.mainBannerBtn {box-shadow:0 0 8px #6C8EEE; min-height:0px !important;}



/********************
** review
********************/
.reviewCnt {background:linear-gradient(to bottom, #FFFFFF, #F0F3FE); border:1px solid #C4D2F9;}

/********************
** service
********************/
.service {background-image:url('/img/mainServiceBg.jpg'); background-position:center center; background-size:cover;}
.serviceCntBox {background:linear-gradient(to bottom, #FFFFFF, #EEEEF0);}

/********************
** internet
********************/
.internetCntBox {background:linear-gradient(to bottom, #F0F3FE, #DEE5FB);}
.internetCnt {box-shadow:0 0 12px 0 #D9DADE;}
#internet .internetCnt {box-sizing: border-box; overflow: hidden; }
#internet .internetCnt img {display: block; flex: 0 0 auto; height: 64px; max-width: 100%; object-fit: contain; }

/********************
** phone
********************/
.phoneCntBtns {border:1px solid #D9DADE;}
.phoneCntBtns .BntNo {border: 0; box-shadow: none; transition: background .2s ease, color .2s ease, box-shadow .2s ease;}
.phoneCntBtns .BntNo.active,
.phoneCntBtns .BntNo[aria-pressed="true"] {background: #3349DC; color: #F7F8F8; box-shadow: 0 0 8px 0 #6C8EEE; }

/* 관리자 오버레이 */
.phoneItem { position: relative; overflow: hidden; }
.adminOverlay {
  position: absolute; inset: 0;
  background: rgba(0,0,0,0.5);            /* #000 50% */
  opacity: 0; visibility: hidden;
  transition: opacity .2s ease;
}
.phoneItem:hover .adminOverlay { opacity: 1; visibility: visible; }
.adminOverlay .editBtn { cursor: pointer; }

/* 모달 베이스 */
.modalWrap { position: fixed; inset: 0; display: none; z-index: 9999; }
.modalWrap.show { display: block; }
.modalDim { position: absolute; inset: 0; background: rgba(0,0,0,.5); }
.modalCard {position: relative; box-shadow: 0 0 8px rgba(0,0,0,.25);}

/* phone 섹션 - 슬라이드 폭/높이 자동화 */
#phone .swiper { width: 100%; }
#phone .swiper-slide { height: auto; }

/* 카드가 슬라이드 폭에 ‘딱 맞춰 찌그러지는’ 느낌 방지 */
#phone .swiper-slide > .phoneItem {
  width: auto;           /* 고정폭 제거 */
  max-width: 100%;       /* 컨테이너를 넘지 않도록 */
  box-sizing: border-box;/* 내부 padding 포함한 레이아웃 계산 */
}





/********************
** rental
********************/
.rental { background: linear-gradient(to bottom, #F0F3FE, #DEE5FB); }

/* 탭 버튼 */
.rentalCntBtns { border: 1px solid #D9DADE; }
.rentalCntBtns .BntNo {
  border: 0;
  box-shadow: none;
  transition: background .2s ease, color .2s ease, box-shadow .2s ease;
}
.rentalCntBtns .BntNo.active,
.rentalCntBtns .BntNo[aria-pressed="true"] {
  background: #3349DC;
  color: #F7F8F8;
  box-shadow: 0 0 8px 0 #6C8EEE;
}

/* ───────── 렌탈 전용 오버레이 ───────── */
.rentalItem { position: relative; overflow: hidden; }
.rentalItem .adminOverlay{
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  background: rgba(0,0,0,.5);
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .25s ease, visibility .25s ease;}
.rentalItem:hover .adminOverlay{opacity: 1; visibility: visible; pointer-events: auto;}

#rental .swiper { width: 100%; }
#rental .swiper-slide { height: auto; }
#rental .swiper-slide > .rentalItem {width: auto;max-width: 100%;box-sizing: border-box;}
#rental .rentalItem { display: flex; flex-direction: column; }
#rental .rentalItem .pricePrimary { margin-top: auto; }
#rental .rentalItem { display: flex; flex-direction: column;}
#rental .rentalItem .priceArea {margin-top: auto; padding-top: 48px;}
/* 공통 모달 레이어: 화면 전체 덮기 */
.modalWrap {
  position: fixed;      /* 화면 고정 */
  inset: 0;             /* 4면 0 */
  display: none;
  z-index: 10000;       /* 헤더 등 위로 */
}
.modalWrap.show { display: block; }

/* 가운데 정렬 컨테이너(패딩 있어도 무관) */
.modalWrap .inner {
  position: fixed;      /* 화면 전체 범위 */
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;        /* 카드 여백용(원하면 조절) */
  box-sizing: border-box;
}

/* ★ 딤: 항상 화면 전체 덮기 */
.modalDim {
  position: fixed;      /* 핵심 */
  inset: 0;             /* 전체 화면 */
  background: rgba(0,0,0,0.6);  /* 더 어둡게 */
  z-index: 0;           /* 카드 아래 */
}

/* 카드: 딤 위에 */
.modalCard {
  position: relative;
  z-index: 1;
  max-height: 80vh;                 /* 높이 상한 */
  overflow: auto;                    /* 내부 스크롤 */
  -webkit-overflow-scrolling: touch;
  box-sizing: border-box;
  overscroll-behavior: contain;
}
@supports (height: 100dvh) {
  .modalCard { max-height: 80dvh; }
}

/* 모달 열릴 때 바깥 스크롤 잠금(선택) */
html.noScroll, body.noScroll { overflow: hidden; }


/********************
** poss
********************/
.possCntBox {background:linear-gradient(to bottom, #F7F8F8, #EEEEF0);}

/* 카드: 폭 = calc(25% - 18px)  → 4열 */
.possGrid .possCntBox{flex: 0 0 calc(25% - 18px); box-sizing:border-box;}
@media (max-width: 1200px){
  .possGrid .possCntBox{ flex-basis: calc(50% - 10px); }
}
@media (max-width: 768px){
  .possGrid .possCntBox{ flex-basis: 100%; }
}


/********************
** faq
********************/
.faqCntBtns {border:1px solid #D9DADE;}
.faqCntBtns .BntNo {border:none; box-shadow: none; transition: background .2s ease, color .2s ease, box-shadow .2s ease;}
.faqCntBtns .BntNo.active,
.faqCntBtns .BntNo[aria-pressed="true"] {background: #3349DC; color: #F7F8F8; box-shadow: 0 0 8px 0 #6C8EEE; }
.faqCntBox {border-top:2px solid #D9DADE; border-bottom:2px solid #D9DADE;}
.faqCntLine {border-bottom:1px solid #D9DADE;}
.qnaArrow { transform: rotate(180deg); }
#faq .faqCntLine img { transition: transform .25s ease;cursor: pointer;}
#faq .faqItem.open .faqCntLine img {transform: rotate(360deg);}
#faq .faq-ans {overflow: hidden;height: 0;opacity: 0;transition: height .28s ease, opacity .28s ease, padding .28s ease;}
#faq .faqItem.open .faq-ans {opacity: 1;}
#faq .is-hidden {display: none !important;}
.qnaListLine th, 
.qnaListLine td{border:1px solid #9BB5F5;}
.qnaLine {border-bottom:1px solid #D9DADE;}
  
/********************
** contact
********************/
.contact {background-image:url('/img/contactBg.jpg'); background-position:center center;}
.contactBnt {border-radius:16px 16px 0 0;}
.contact .contactBnt {border: 0; transition: background .2s ease, color .2s ease, box-shadow .2s ease, transform .06s ease;}
.contact .contactBnt.active,
.contact .contactBnt[aria-pressed="true"] {background: #FEFEFE; color: #26272B;}
.contactCntBox {border-radius:0 0 8px 8px;}
.contactBoxLine {border:1px solid #D9DADE;}
.contactCntBg {background:linear-gradient(to bottom, #D9DADE, #EEEEF0);}
.checkBoxLine {position: absolute; width: 1px;height: 1px;margin: -1px;clip: rect(0 0 0 0);clip-path: inset(50%);overflow: hidden; white-space: nowrap;border: 0;padding: 0;}
.checkBoxLine + label::before {content: "";display: inline-block;width: 20px;height: 20px;margin-right: 8px;background: url("/img/chkOff.svg") center center no-repeat;background-size: contain;flex: 0 0 20px;}
.checkBoxLine:checked + label::before {background-image: url("/img/chkOn.svg");}
.checkBoxLine:focus-visible + label::before {outline: 2px solid #2a7cff;outline-offset: 2px;}
.underLine { text-decoration: underline; }
.contactBtn {background:linear-gradient(to bottom, #2B38CA, #4968E8); box-shadow:0 0 8px 0 #6C8EEE;}

.contact .contactCntBg {
    background: #F4F5F7;
    color: #26272B;
    border: 0;
    box-shadow: inset 1px 1px 4px 0 #B8BAC1; 
    transition: background .2s ease, color .2s ease, box-shadow .2s ease;}
  
  /* 활성: 그라디언트 + 글자색 + 바깥 그림자 */
  .contact .contactCntBg.active,
  .contact .contactCntBg[aria-pressed="true"] {background: linear-gradient(to bottom, #5D606C, #26272B);color: #F7F8F8;  box-shadow: 0 0 8px 0 #B8BAC1;  }
  .contact .contactCntBg:focus-visible {outline: 2px solid #6C8EEE;outline-offset: 2px;}


input::placeholder,
textarea::placeholder {font-size: 20px; color: #91949F; font-weight: 400;opacity: 1; line-height:1; }
input::-webkit-input-placeholder,
textarea::-webkit-input-placeholder { font-size: 20px; }
input:-ms-input-placeholder,
textarea:-ms-input-placeholder { font-size: 20px; }


/********************
** contactList
********************/
.contactList td,
.contactList th{border-bottom:1px solid #D9DADE; border-left:1px solid #D9DADE;}
.contactList th:first-child,
.contactList td:first-child { border-left: none !important;}

/********************
** contactView
********************/
.contactView td,
.contactView th{border-bottom:1px solid #D9DADE; border-top:1px solid #D9DADE; border-right:1px solid #D9DADE;}
.contactView th:last-child,
.contactView td:last-child { border-right: none; }
.styleN {background:none;}
.contactViewBtn {border:1px solid #D9DADE;}

/********************
** policy
********************/
.policyTp {border-bottom:1px solid #26272B;}

/********************
** login
********************/
.loginBg {background:linear-gradient(to left, #2B38CA, #4968E8);}