@charset "utf-8";


/********************
** btnstyle
********************/


/********************
** 메인배너
********************/
.mainBanner{background:url('/img/mainBg.png'); background-size:100%; background-position:center; background-repeat: no-repeat;}
.mainImg{bottom:0; left:24.5%}

.mainBtn{bottom:26%;}

/** 버튼 호버 **/
.hover-btn {    overflow: hidden; }
.circle-icon {    position: absolute;    top: 8px;    left: 8px;    z-index: 10;    transition: left 0.4s ease-in-out;}
.circle-icon img {    transition: transform 0.4s ease-in-out;}
.text-wrapper {    position: absolute;    left: 0; right: 0; top: 0; bottom: 0;}
.btnTxt {    position: absolute;    top: 50%;    width: auto;    white-space: nowrap;     transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out, left 0.4s ease-in-out;}
.text-default {    opacity: 1;    left: calc((210px + 50px) / 2);     transform: translate(-50%, -50%);}
.text-hover {    opacity: 0;    left: calc((210px - 50px) / 2);    transform: translate(-50%, -50%);}
.hover-btn:hover .circle-icon {    left: calc(100% - 50px - 8px); }
.hover-btn:hover .text-default {    opacity: 0;    left: calc((210px - 50px) / 2);}
.hover-btn:hover .text-hover {    opacity: 1;}


/********************
** case
********************/
.caseLeft_wrapper {    width: calc(100% - 768px - 24px);    position: relative;    height: auto;}

/********************
** review
********************/
.reviewBox{display:grid; grid-template-columns: repeat(3 , 1fr);}
.reviewBoxList{border:1px solid #FA6432; overflow:hidden;}
.revieTxtwBox{border-radius:0 8px 8px 8px;}


/********************
** step
********************/
.stepBox{display:grid; grid-template-columns: repeat(4 , 1fr);}


/********************
**파트너
********************/
.partner{background:url('/img/partnerBg.png'); background-size:100%; background-position:bottom; background-repeat: no-repeat;}
.chat_container {background: url('/img/partnerPc.png'); background-size:cover;}
.bubble{box-shadow: 2px 3px 4px rgba(0, 0, 0, 0.2);}
.bubble::after {    content: '';    position: absolute;    width: 0;    height: 0;    border-style: solid;}
.bubble_left {     align-self: flex-start;}
.bubble_left::after {    border-width: 0px 15px 20px 0;    border-color: transparent #fbeee8 transparent transparent;    left: -12px;    top: 12px; }
.bubble_right {    align-self: flex-end;}
.bubble_right::after {    border-width: 0px 0 20px 15px;    border-color: transparent transparent transparent #f79273;    right: -12px;    top: 12px;}

/********************
**help
********************/
.helpBox{display:grid; grid-template-columns: repeat(4, 1fr);}

/********************
**possibility
********************/
.possibilityBox{display:grid; grid-template-columns: repeat(2, 1fr);}

/********************
**difference
********************/
.differenceBox{background:#2F4858;}
.comparison_table {    width:1200px;    display: grid;    grid-template-columns: auto 485px 485px;     gap:16px;}
.table_cell {    display: flex;    align-items: center;    justify-content: center;    padding: 24px;    border-radius: 8px;}
.row_header{justify-content: flex-start;}
.col_auto{background:#4C6574; color:#969FA5; }


/** faq **/

.faq_item {    border: 1px solid #D9DADE;    border-radius: 8px;    background-color: #fff;    transition: border-color 0.3s, background-color 0.3s;}
.faq_item + .faq_item {    margin-top: 16px;}
.faq_question {    cursor: pointer;}
.faq_answer {    max-height: 0;    overflow: hidden;    transition: max-height 0.4s ease-out, padding 0.4s ease-out, opacity 0.3s ease-in-out;    opacity: 0;    color: #555;    line-height: 1.7;}
.faq_item.active {    border-color: #ff7e79;    background-color: #fff8f7;}
.faq_item.active .faq_answer {    max-height: 200px;     padding: 0 24px 24px 24px;    opacity: 1;}
.faq_item.active .arrow_icon {    transform: rotate(180deg);}
.faq_item.active .q_text {    color: #ff7e79;}
.arrow_icon {    transition: transform 0.4s ease-out;}


/********************
** qa
********************/
.qa{background: url('/img/consultBg.jpg'); background-size:cover;}
.qaImg1{top:100px; left:10%;}
.qaImg2{top:110px; right:8%;}


/********************
** Contact
********************/

.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:#0540F2; border:1px solid #0540F2; color:#fefefe}

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

.custom-checkbox{width: 20px; height: 20px; padding: 0; border: 1px solid #0540F2; 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: #0540F2; border-color: #0540F2;}
.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;}