@charset "utf-8";


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

.differenceBox{display:grid; grid-template-columns: repeat(3, 1fr);}

.aboutBox{display:grid; grid-template-columns: repeat(3, 1fr);}

.stepoBox{display:grid; grid-template-columns: repeat(5, 1fr);}
.stepoBoxList{aspect-ratio: 1 / 1; border-radius: 50%; border:1px solid #222}

.lastBanner{background:url('/img/franchise/subBannerBg.jpg'); background-size:cover; background-position: right;}

/********************
** 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:16px 16px 16px 16px;}
.faq_item.active .faq_question{ border-radius: 16px 16px 0 0; border-bottom:none; background:#FFF2F1;}
.faq_item.active .faq_answer {max-height: 500px; padding:24px 36px; opacity: 1;background:#FFF2F1;border-radius: 0 0 16px 16px; border:1px solid #FFF2F1; border-top:none;}
.faq_item.active .icon_plus {transform: rotate(180deg); }
.icon_plus {filter: invert(1); transition: transform 0.3s ease-in-out;}

/********************
** Contact
********************/
.online{background:url('/img/franchise/qaBg.jpg'); background-size:cover; background-position:center}
.inputBox{ padding: 24px; border: 1px solid #D9DADE; border-radius: 4px;}
.inputBox:placeholder-shown{color: #91949f; line-height: 1em;}

.custom-checkbox{width: 20px; height: 20px; padding: 0; border: 1px solid #26272b; border-radius: 4px; 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: #F84A3B; border-color: #F84A3B;}
.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);}

.moreBtn{text-decoration: underline;}

.onlineBtn{ cursor: pointer;}