@charset "utf-8";

header {    transition: background-color 0.3s ease; }

.headerBtn{border:1px solid #10bcb6;}
header.scrolled {    background-color: #fff !important;    box-shadow: 0 2px 5px rgba(0,0,0,0.1);}
/********************
** 메인배너
********************/
.mainBanner {    position: relative;    overflow: hidden;}
.bg_image {    top: 0;    left: 0;    background-size: cover;    background-position: center;    transition: opacity 1.5s ease-in-out; /* 배경 전환 애니메이션 */}
.bg1 {    background-image: url('/img/kev/main_trasition.jpg');    opacity: 1; /* --- 수정된 부분: 초기 상태 명시 --- */}
.bg2 {    background-image: url('/img/kev/mainBanner.jpg');    opacity: 0; /* --- 수정된 부분: 초기 상태 명시 --- */}
.center_content {    position: absolute;    top: 50%;    left: 50%;    transform: translate(-50%, -50%);    width: 100%;    text-align: center;}
.txtWrap {    height: 170px;    overflow: hidden; }
.turn_container {    transition: transform 1s ease-in-out;}
.turnTxt {    height: 170px;}

.btnImg{transform:rotate(225deg); transition: 0.3s;}

.mainBtn {    position: relative;    transition: color 0.3s;  }
.mainBtn::after {content: "";position: absolute;left: 0;bottom: 0;width: 0%;height: 1px;background: #fff;transition: width 0.3s ease;}
.mainBtn:hover::after {width: 100%;}
.mainBtn:hover .btnImg{transform:rotate(0deg);}




.warning{display:grid; grid-template-columns: repeat(2, 1fr);}
.warningTxtBox{border:1px solid #BC1010; border-radius: 0 0 16px 16px;}

.service{background:url('/img/kev/serviceBg.jpg'); background-size:cover;}
.serviceBox{display:grid; grid-template-columns: repeat(2, 1fr);}
.serviceBoxList{background:rgba(38,39,43,0.6); backdrop-filter: blur(10px);}

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

/***********************
******* review
************************/
.reviewTit{border-bottom:1px solid #D9DADE;}
.review_slide{box-shadow: 0 0 8px #D9DADE;}
.review_slider {    width: 100%;    overflow: hidden; /* Swiper가 제어할 수 있도록 */}


/***********************
******* faq
************************/
.faq-item {    border-bottom: 1px solid #e0e0e0;}
.faq-answer {    max-height: 0;    overflow: hidden;    transition: max-height 0.3s ease-out, padding 0.3s ease-out;}
.arrow {    width: 12px;    height: 12px;    border-left: 2px solid #888;    border-bottom: 2px solid #888;    transform: rotate(-45deg);    transition: transform 0.3s ease-out;}
.faq-item.active .arrow {    transform: rotate(135deg);}
.faq-item.active .faq-answer {    max-height: 200px;}

/********************
** qa
********************/
.online{background:url('/img/kev/contactBg.jpg'); background-size:cover;}
.qaImg{top:0; left:50%; transform: translate(-50%, -50%); }
.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:#10bcb6; border:1px solid #10bcb6; color:#fefefe}
.btnBox{display:grid; grid-template-columns:repeat(5, 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: #10bcb6; border-color: #10bcb6;}
.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);}