@charset "utf-8";

.nav{bottom:60px; right:60px; z-index: 10;}

/********************
** 메인배너
********************/
.mainBanner{background:url('../img/mainBanner.jpg'); background-size:cover; background-position:center; }
.mainBottom{bottom:0;}

/********************
** about
********************/
.about {background:linear-gradient(to bottom, #4CBB90, #15674E); overflow:hidden;}
.aboutbg{right:0; bottom:0;}
.aboutBox{ display:grid; grid-template-columns: repeat(3 ,1fr);}
.aboutBox > div{box-shadow: 0 0 8px #F1A546;}

/* ===== Logo Marquee (무한 롤링) ===== */
.logoMarquee{
  overflow: hidden;
  width: 100%;
  position: relative;
}

.logoMarquee .logoTrack{
  display: flex;
  align-items: center;
  gap: 56px;
  width: max-content;
  will-change: transform;
  animation: logoMarqueeMove var(--dur, 26s) linear infinite;
}

/* 로고 크기 공통(필요 시 조정) */
.logoMarquee img{
  height: 80px;
  width: 160px;
  object-fit: contain;
  object-position: center;
  display: block;
  flex: 0 0 auto;
}

/* 반응형 */
@media (max-width: 1024px){
  .logoMarquee .logoTrack{ gap: 32px; }
  .logoMarquee img{ height: 36px; width: 120px; }
}
@media (max-width: 768px){
  .logoMarquee .logoTrack{ gap: 24px; }
  .logoMarquee img{ height: 28px; width: 96px; }
}

/* 트랙이 2개로 복제되면, -50% 이동이 정확히 "한 세트"만큼 이동 */
@keyframes logoMarqueeMove{
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* 접근성(모션 줄이기) */
@media (prefers-reduced-motion: reduce){
  .logoMarquee .logoTrack{ animation: none; }
}


/********************
** menu
********************/
.menuBox{ display:grid; grid-template-columns: repeat(2 ,1fr);}
.menuImg{bottom:0; right:0;}
#coffeecar3{background:linear-gradient(to bottom, #4CBB90, #29A075); overflow:hidden;}
#coffeecar15{background:linear-gradient(to bottom, #29A075, #15674E); overflow:hidden;}
#coffeecar43{background:linear-gradient(to bottom, #15674E, #114335); overflow:hidden;}

.modal_overlay {    position: fixed;    top: 0;    left: 0;    width: 100%;    height: 100%;    background-color: rgba(0, 0, 0, 0.7);    display: flex;    justify-content: center;    align-items: center;    z-index: 1000;    opacity: 0;    visibility: hidden;    transition: opacity 0.3s ease, visibility 0.3s ease;}
.modal_overlay.active {    opacity: 1;    visibility: visible;}
.modal_content {    overflow-y:auto;    transform: translateY(20px);    transition: transform 0.3s ease;}
.modal_overlay.active .modal_content {    transform: translateY(0);}
.close_btn {    position: absolute;    top: 40px;    right: 40px;    cursor: pointer;}
.menu_list {display:grid; grid-template-columns: repeat(3,1fr); border:1px solid #D03232;}
.modalTable th{border:1px solid #A8C5B7;}
.modalTable td{border:1px solid #A8C5B7;}

/********************
** case
********************/
.longTxt {  width:100%;  overflow: hidden;    white-space: nowrap;    text-overflow: ellipsis;  }  
.swiper-slide{overflow:hidden; box-shadow:0 0 8px #D9DADE;}
.logo-swiper-l .swiper-wrapper { transition-timing-function: linear !important; }
.gallery .swiper-slide .caseThumb {width: 100%;aspect-ratio: 3 / 2; overflow: hidden;}
.gallery .swiper-slide .caseThumb img {width: 100%;height: 100%;display: block;object-fit: cover;}
  

/********************
** faq
********************/
.faq_answer {max-height: 0;overflow: hidden;transition: max-height 0.5s ease-in-out, padding 0.5s ease-in-out, opacity 0.4s ease-in-out;opacity: 0;}
.faq_question{border-radius:8px 8px 8px 8px;}

.faq_item.active .faq_question{ border-radius: 8px 8px 0 0; }
.faq_item.active .faq_question p{color:#15674E;}
.faq_item.active .faq_answer {max-height: 500px;padding: 0 40px 32px 40px; opacity: 1;background:#EFFAF5;border-radius: 0 0 8px 8px;}
.faq_item.active .icon_plus {transform: rotate(180deg); }

.icon_plus {transition: transform 0.3s ease-in-out;}


/********************
** qa
********************/
.online{background:linear-gradient(to bottom, #EFFAF5, #D7F4E4);}
.form_label {display: block;}
.input_base, .textarea_base {border: 1px solid #91949F;transition: border-color 0.3s;}        
.input_base:focus, .textarea_base:focus {outline: none;border-color: #2E479F;}
.textarea_base {min-height: 150px;resize: vertical;}

/* 상담 유형 라디오 버튼 그룹 */
.type_btn_group { display: grid; grid-template-columns: repeat(3,1fr);}
.type_btn_group2{display: grid; grid-template-columns: repeat(2,1fr);}
.type_radio_hidden {display: none;}
.type_btn { cursor: pointer;transition: background-color 0.3s, color 0.3s, font-weight 0.3s;}
.type_radio_hidden:checked + .type_btn {background-color: #343a40;color: #fff;font-weight: 700;}


/* 날짜 선택 커스텀 */
.date_wrapper { position: relative; }
.date_wrapper .date_icon {position: absolute;right: 16px;top: 50%;transform: translateY(-50%);pointer-events: none;}        
input[type="date"]::-webkit-calendar-picker-indicator {display: none;}

/* 커스텀 체크박스 (이미지 기반) */
.policy_check {display: flex;align-items: center;gap: 12px;cursor: pointer;}
.policy_check input[type="checkbox"] {display: none;}
.custom_checkbox {width: 20px;height: 20px;background-image: url('../img/chkOff.svg');background-size: contain;background-repeat: no-repeat;background-position: center;transition: background-image 0.2s ease-in-out;}
.policy_check input[type="checkbox"]:checked + .custom_checkbox {background-image: url('https://cubetruck.kr/img/chkOn.svg');}


/* 커스텀 체크박스 (이미지 기반) */
.pay_check {display: flex;align-items: center;gap: 12px;cursor: pointer;}
.pay_check input[type="checkbox"] {display: none;}
.custom_checkbox {width: 20px;height: 20px;background-image: url('../img/chkOff.svg');background-size: contain;background-repeat: no-repeat;background-position: center;transition: background-image 0.2s ease-in-out;}
.pay_check input[type="checkbox"]:checked + .custom_checkbox {background-image: url('https://cubetruck.kr/img/chkOn.svg');}
/* 숨김 처리용 클래스 */
.hidden { display: none; }

/* '현금계산서 발행'이 비활성화일 때 시각 표시 */
label.pay_check.is-disabled {opacity: 0.5;cursor: not-allowed;pointer-events: none;}


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

/***********************
** contact
***********************/
.contactBox {box-shadow:0 0 8px #C4EDD9;}

/***********************
** contactList
***********************/
.contactLists th,
.contactLists td{border-top:1px solid #D9DADE; border-bottom:1px solid #D9DADE; border-right:1px solid #D9DADE;}
.contactLists{border-collapse: collapse;}
.contactLists th:last-child,
.contactLists td:last-child{border-right: 0;}
.contactLists td{vertical-align: middle; text-align: left;}
.borderleftno {text-align: center !important;}

/***********************
** contactView
***********************/
.contactView th,
.contactView td {border-top:1px solid #D9DADE; border-bottom:1px solid #D9DADE; border-right:1px solid #D9DADE;}
.contactView{border-collapse: collapse;}
.contactView th:last-child,
.contactView td:last-child{border-right: 0;}
.undLineTxt {text-decoration: underline;}
.contactListBtn {border:1px solid #D9DADE;}

/***********************
** casetList
***********************/
.caseBoxLine {border:1px solid #D9DADE;}
.caseGrid {display: grid; grid-template-columns: repeat(3, 1fr);gap: 24px;row-gap: 56px;}
@media (max-width: 1024px) {.caseGrid { grid-template-columns: repeat(2, 1fr); }}
@media (max-width: 767px) {.caseGrid { grid-template-columns: 1fr; }}
.caseItemLink { display:block; text-decoration:none; }
.caseItemImg  { width:100%; aspect-ratio:4/3; object-fit:cover; display:block; }

/***********************
** casetView
***********************/
.casemainTxt img{ width:100%; }
.casemainTxt > *:not(:first-child) img{ margin-top:48px; }
.caseBtnLine {border:1px solid #D9DADE;}