@charset "utf-8";


/********************
** btnstyle
********************/
.contactMoveBtnC{background: linear-gradient(to right, #FFA432, #FF6F00);}

/********************
** 메인배너
********************/
.mainBanner{background:url('../img/mainBanner.png'); background-position:center; background-repeat: no-repeat;}

/** 버튼 호버 **/
.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 .circle-icon img {    transform: rotate(90deg);}
.hover-btn:hover .text-default {    opacity: 0;    left: calc((210px - 50px) / 2);}
.hover-btn:hover .text-hover {    opacity: 1;}

.mainIconBox{background:rgba(255, 255, 255, 0.4); box-shadow: 0 0 15px rgba(0, 0, 0, 0.15);}
.mainIconBox1{top:15%; left:8%;}
.mainIconBox2{top:40%; right:10%;}
.mainIconBox3{bottom:10%; left:18%;}

/********************
** success
********************/
.successBox{ box-shadow: 0 0 15px rgba(0, 0, 0, 0.15);}

/********************
** subBanner
********************/
.subBanner {    background: url('../img/eventBanner.jpg');    background-size: cover;    background-attachment: fixed;    background-position: center;}
.subBannerMarker {    bottom: -16px;    left: -6%;    z-index: -1; transform: scaleX(0);    transform-origin: left;    transition: transform 0.5s ease-in-out; }
.subBannerMarker.is-visible {    transform: scaleX(1); }


/********************
** 세무사 프로필
********************/
.card-container {    display: grid; grid-template-columns: repeat(3, 1fr);}
.flip-card {    background-color: transparent;    perspective: 1000px; /* 3D 효과의 원근감을 설정 */    cursor: pointer;}
.flip-card-inner {    transition: transform 0.8s;    transform-style: preserve-3d;     box-shadow: 0 0 15px rgba(0,0,0,0.15);}
.flip-card.flipped .flip-card-inner {   transform: rotateY(180deg);}
.flip-card-front, .flip-card-back {    position: absolute;    width: 100%;    height: 100%;    -webkit-backface-visibility: hidden;    backface-visibility: hidden;     overflow: hidden;    background-color: #fff;}
.flip-card-front1{background-image: url('../img/expert-001.png'); background-size:auto  100%; background-repeat:no-repeat;}
.flip-card-front2{background-image: url('../img/expert-002.png'); background-size:auto  100%; background-repeat:no-repeat;}
.flip-card-front3{background-image: url('../img/expert-003.png'); background-size:auto  100%; background-repeat:no-repeat;}
/* 뒷면은 미리 180도 뒤집어 놓음 */
.flip-card-back {    transform: rotateY(180deg);}

.protectionBox{display:grid; grid-template-columns: 30% 70%;}
.protectionBg{background:url('../img/protection.jpg'); background-size:cover;}
.protectioncontact{box-shadow: 0 0 15px rgba(0,0,0,0.15);}

/********************
** 리뷰
********************/
.reviewBor1{border-radius: 20px 0 20px 20px;word-break: keep-all;     white-space: normal; }
.reviewBor2{border-radius: 0 20px 20px 20px; word-break: keep-all;     white-space: normal; }
.swiper-slide{height:auto;}
.reviewSlideBox{box-shadow:0 0 25px rgba(0 0 0 0.1)}

/********************
** 세금궁금연락ㄱ
********************/
.solutionBox{ display:grid; grid-template-columns: repeat(2 , 1fr);}
.solutionBox div{ box-shadow: 0 0 15px rgba(0,0,0,0.15);}


/********************
** 스탭
********************/
.step_grid {    display: grid;    grid-template-columns: 1fr auto 1fr auto 1fr auto 1fr;  align-items: stretch; }
.step_box {    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.07); overflow: hidden;}
.step_grid img{align-self: center}




/** faq **/

.faq_container {    display: grid;    grid-template-columns: auto 1170px;    justify-content: space-between;}

/* 왼쪽 필터 버튼 */
.filter_btn {    cursor: pointer;    position: relative;    transition: color 0.3s, font-weight 0.3s;}
.filter_btn.active {     color: #1a51fe;    font-weight: 700;}
/* 활성화 시 파란색 점 추가 */
.filter_btn.active::after {    content: '·';    color: #1a51fe;    position: absolute;    right: -24px;    font-size: 1.5em;    line-height:0.5;}

/* 오른쪽 아코디언 아이템 */
.faq_item {    border: 1px solid #D9DADE;    transition: border-color 0.3s, background-color 0.3s;}


.faq_question {    cursor: pointer;}

/* 답변 영역 스타일 및 애니메이션 */
.faq_answer {    max-height: 0;    overflow: hidden;    transition: max-height 0.3s ease-out, padding 0.3s ease-out;}

/* 활성화 상태 스타일 */
.faq_item.active {    border-color: #1a51fe;    background-color: #f0f3ff;}
.faq_item.active .faq_answer {    max-height: 300px;     padding: 0 24px 24px 24px; }
.faq_item.active .arrow_icon {    transform: rotate(180deg);}
.arrow_icon {    transition: transform 0.3s ease-out;}







/********************
** 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;}