@charset "utf-8";


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

/********************
** 메인배너
********************/
.mainBanner{background:url('/img/mainBannerBg.jpg'); background-size:cover;}
.logoSlider {    animation: slide 60s linear infinite;}

/**************** absoluteLogo ****************/
.absoluteLogoBg {box-shadow:4px 4px 24px #CECED640; bottom:-60px;}
.slider-wrapper {overflow:hidden;}
.slider {width:calc(100% * 29); animation:slide 500s linear infinite;}
.slider img {flex-shrink:0;}
@keyframes slide {
    0% {transform: translateX(0);}
    100% {transform: translateX(-100%);}
}

/********************
** 서브배너
********************/
.subBanner{background:url('/img/subBannerBg.png'); background-size:100%; background-position:center; background-repeat:no-repeat;}

/********************
** Rider
********************/
.Rider{box-shadow: 0 -4px 16px rgba(176, 176, 176, 0.25); border-radius:60px 0 0 0;}
.RiderIcon{display:grid; grid-template-columns: repeat(7, 1fr);}

/********************
** why
********************/
.why_leftBox{bottom:0; left:0; border-radius: 0 32px 0 0;background: linear-gradient(to right, #FFA432, #FF6F00);}
.why_rightBox{bottom:0; right:0; border-radius:32px 0 0 0;background: linear-gradient(to right, #FFA432, #FF6F00);}

/********************
** lastBanner
********************/
.lastBanner{background:url('/img/mainBannerBg.jpg'); background-size:cover; background-position: right bottom;}
.lastBannerImg{bottom:0; right:0;}

/********************
** review
********************/
.reviewBox{display:grid; grid-template-columns: repeat(3, 1fr);}
.reviewBox > div{box-shadow: 0 0 16px rgba(255, 223, 165, 0.5);}

/********************
** step
********************/
.stepGrid{display:grid; grid-template-columns: repeat(2, 1fr);}
.step-item {    background-color: #ffffff;   border: 1px solid #e5e7eb;    transition: background-color 0.4s ease, border-color 0.4s ease;}
.step-item .stepImgBox {    background-color: #f2f2f2;    transition: background-color 0.4s ease;}
/* 활성화 상태 스타일 */
.step-item.active {    background-color: #fff7ed;    border-color: #ff9d42; }
.step-item.active .stepImgBox {    background: linear-gradient(to right, #FFA432, #FF6F00);}

/********************
** FAQ
********************/
.faq{margin-bottom: 0 !important;}
.faq-item{border-top: 1px solid #d9dade;}
.faq-item:last-child{border-bottom: 1px solid #d9dade;}

.arrow {width: 12px; height: 12px; border-left: 2px solid #26272b; border-bottom: 2px solid #26272b; transform: rotate(-45deg); transition: transform 0.3s ease-out;}
.faq-item.active .arrow {transform: rotate(135deg);}

.faq-answer{height: 0; overflow: hidden; transition: height 0.3s ease;}

/********************
** Contact
********************/
.online{background:url('/img/contact_background.jpg'); background-size:cover;}
.inputBox{ padding: 24px; border: 1px solid #FF6F00; 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: #FF6F00; border-color: #FF6F00;}
.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{background: linear-gradient(to right, #FFA432, #FF6F00); cursor: pointer;}