@charset "utf-8";

/********************
** 메인배너
********************/
.mainBanner {background: url('/img/tableorder/mainBg.jpg'); background-size:cover;}


.serviceBox{border:2px solid #D1212B; overflow:hidden;}

.compare{background:url('/img/tableorder/compareBg.jpg'); background-size:cover;}



.faq_item {    background-color: #fff;    overflow: hidden;    transition: all 0.3s ease;}
.faq_q .arrow {    width: 8px;    height: 8px;    border-top: 2px solid #000000;    border-right: 2px solid #000000;    transform: rotate(135deg);    transition: transform 0.3s ease, border-color 0.3s;    margin-left: 20px;}
.faq_a {    max-height: 0;    overflow: hidden;    transition: max-height 0.3s ease-in-out;    background-color: transparent;}
.faq_item.active {    border:1px solid #F22833; }
.faq_item.active .faq_q .arrow {    border-color: #000000;    transform: rotate(-45deg);}

/********************
** qa
********************/
/* 버튼 스타일 통일 (이미 있다면 생략 가능) */
.onlineBtn { border: none; cursor: pointer; transition: 0.3s; }
.onlineBtn:hover { opacity: 0.8; }

/* 단계 전환 애니메이션 (선택사항) */
.form-step {
    animation: fadeIn 0.5s ease; 
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

.online{background:url('/img/tableorder/formBg.jpg'); background-size:cover;}
.qaBox{border:48px solid #37383E; box-shadow:     0 0 16px rgba(255, 255, 255, 0.25),     inset 6px 7px 16px rgba(0, 0, 0, 0.25);}
.online input[type="radio"]{left:-9999px}
.online input[type="radio"] + label{border:1px solid #D9DADE; background:#fefefe; cursor: pointer; transition: ease-in 0.3s;}
.online input[type="radio"]:checked + label{background:#F22833; border:1px solid #F22833; color:#fefefe}
.btnBox{display:grid; grid-template-columns:repeat(2, 1fr)}
.inputBox{ padding: 24px; border: 1px solid #D9DADE ;}
.inputBox:placeholder-shown{color: #91949f; line-height: 1em;}
.moreBtn{text-decoration: underline;}
.custom-checkbox{width: 20px; height: 20px; padding: 0; border: 1px solid #222; background-color: #fff; margin-right: 10px; transition: background-color 0.3s, border 0.3s; position: relative;}
.checkpolicy input[type="checkbox"] {display: none;}
.checkpolicy input[type="checkbox"]:checked + .custom-checkbox{background-color: #F22833; border-color: #F22833;}
.checkpolicy input[type="checkbox"]:checked + .custom-checkbox::after{content: ''; position: absolute; top: 2px; left: 5px; width: 5px; height: 8px; border: solid white; border-width: 0 3px 3px 0; transform: rotate(45deg);}