@charset "utf-8";

/********************
** mainbanner
********************/
.btnTxt{width:calc(100% - 50px);}
/** 메인 타이틀 **/
.main-title {    transition: transform 0.5s ease-in-out; }
.mainIcon {    opacity: 0;    transform: translateY(30px);     position: absolute;}
.animate .text-left {    transform: translateX(-380px); }
.animate .text-right {    transform: translateX(380px); }
.animate .mainIcon {    opacity: 1;    animation: fadeAndRise 1s ease-in-out forwards;}
.animate .mainIcon.floating {    animation: float 3s ease-in-out infinite;}
@keyframes fadeAndRise {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
@keyframes float {
    0% {
        transform: translateY(0px);
    }
    50% {
        transform: translateY(-15px); 
    }
    100% {
        transform: translateY(0px);
    }
}
/** 버튼 호버 **/
.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;}

/********************
** 비교
********************/
.compareBigcrad{border:3px solid #6B26FE; transition: height 0.5s ease-in-out;}
.compareBigcrad.grow {    height: 600px; }

/********************
** 리뷰
********************/
.review{background:url('../img/reviewBg.jpg'); background-size:cover; background-position:center;}
.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)}

/********************
** 로고 슬라이드
********************/
.logoSlide {    overflow: hidden; }
.swiper-container {    width: 100%;}
.swiper-slide {   width: auto; }
.swiper-wrapper {   transition-timing-function: linear !important;}


/********************
** solution
********************/
.solutionBg {    display: grid;    grid-template-columns: repeat(3, 1fr); background-size: cover;  background:url('../img/solutioBg.jpg');  background-position: center;  transition: background-image 0.5s ease-in-out;}
.solutionBox {    cursor: pointer;    border-top: 1px solid rgba(255, 255, 255, 0.2);    transition: background-color 0.4s ease;}
.solutionBox:hover{    background-color: rgba(0,0,0,0.2);}
.hoverTxt {    max-height: 0;    opacity: 0;    overflow: hidden;    margin-top: 8px; /* 제목과의 간격 */    transition: max-height 0.5s ease-in-out, opacity 0.5s ease-in-out 0.1s;}
/* solutionBox에 호버했을 때 내부의 hoverTxt를 보이게 함 */
.solutionBox:hover .hoverTxt {    max-height: 100px;   opacity: 1;}
.solutionBor{border-right:1px solid #fff;border-left:1px solid #fff;}

/********************
** video
********************/
.txtSlide {     top: 40%;     left: 50%;    transform: translateX(-50%);    width: 100%;}
.swiper-container {    width: 100%;    overflow: visible; }
.swiper-slide {    width: auto;     white-space: nowrap; }
.swiper-wrapper {    transition-timing-function: linear !important;}

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


/********************
** Contact
********************/
.qaBox{border:1px solid #6B26FE; box-shadow: 0 0 50px rgba(0 0 0 0.1);}
.inputBox{ padding: 24px; border: 1px solid #b8bac1; border-radius: 8px;}
.inputBox:placeholder-shown{color: #91949f; line-height: 1em;}



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