/* =========================================================
   REVIEW SECTION
========================================================= */

.review-section{

    position:relative;

    padding:80px 0;

    background-color:#e1fdfa;

    overflow:hidden;

        /* background:
        url("../assets/image/testbg3.png")
        no-repeat
        right center;

    background-size:cover; */
}

.review-section .container{

    width:min(1400px,92%);

    margin:auto;

}


/* =========================================================
   TITLE
========================================================= */

.review-title{

    text-align:center;

    margin-bottom:80px;

}

.review-title h4{

    font-size:20px;

    font-weight:700;

    letter-spacing:4px;

    color:#5acec2;

    margin-bottom:18px;

}

.review-title .real-review{

    display:block;

    font-size:48px;

    font-weight:800;

    color:#111;

    margin-bottom:20px;

}

.review-title p{

    font-size: 28px;

    color:#000000;

    line-height:1.8;

    font-weight: 700;

}
.review-title p span{
    color:#5acec2;



}


/* =========================================================
   SLIDER
========================================================= */

.review-slider{

    position:relative;

    overflow:hidden;


    padding:10px 0; 

}
.review-track{

    display:flex;

    transition:transform .45s ease;

    will-change:transform;

}
.review-track{


    width: 100%;

    text-align: center;

    display:flex;

    transition:transform .45s ease;

    will-change:transform;
}


.review-tag{
    margin: 0 auto;

}

.review-page{

    width:100%;

    min-width:100%;

    flex-shrink:0;

    box-sizing:border-box;

    display:grid;

    grid-template-columns:repeat(3,minmax(0,1fr));

    gap:28px;

    padding: 0;

    flex:0 0 100%;

}


/* =========================================================
   CARD
========================================================= */

.review-card{

    position:relative;


    border-radius:26px;

    padding:30px 24px;

    min-height:470px;


    overflow:hidden;

    display:flex;

    flex-direction:column;

    transition:.35s;

    background:#FFFFFF;

    border:1px solid #EAF4F3;

    box-shadow:
    0 10px 28px rgba(0,0,0,.04);


}


/* 상단 오렌지 라인 */

.review-card::before{


    position:absolute;

    top:0;

    left:0;

    width:0;

    height:3px;

    background:#81D8D0;

    transition:.35s;

}

.review-card:hover{

    transform:translateY(-6px);

    border-color:#81D8D0;

    box-shadow:

    0 18px 40px rgba(129,216,208,.15);

}

.review-card:hover::before{

    width:100%;

}


/* =========================================================
   TAG
========================================================= */

.review-tag{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    height:38px;

    padding:0 18px;

    width:fit-content;

    border-radius:100px;

    border:1px solid #CDEEEA;

background:#F4FCFB;

color:#55BEB4;

    font-size:14px;

    font-weight:700;

    margin-bottom:34px;

}


/* =========================================================
   QUOTE
========================================================= */




/* =========================================================
   TITLE
========================================================= */

.review-card h3{

    font-size:28px;

    font-weight:800;

    line-height:1.45;

    color:#1E2D2B;

    margin-bottom:24px;

}


/* =========================================================
   DESCRIPTION
========================================================= */

.review-card p{

    font-size:20px;

    line-height:1.9;

    color:#666;

    margin-bottom:22px;

}


/* =========================================================
   HIGHLIGHT
========================================================= */

.review-card strong{

    display:block;

    color:#81D8D0;

    font-size:17px;

    font-weight:700;

    margin-bottom:36px;

}

/* =========================================================
   USER
========================================================= */

.review-user{

    margin-top:auto;

    display:flex;

    flex-direction:column;

    gap:6px;

    padding-top:28px;

    border-top:1px solid #EDF5F4;

}

.review-user strong{

    margin:0;

    color:#111;

    font-size:17px;

    font-weight:700;

}

.review-user span{

    color:#888;

    font-size:15px;

}


/* =========================================================
   ARROW
========================================================= */

.review-arrow{

        content:"";

    position:absolute;

    top:50%;

    transform:translateY(-50%);

    width:58px;

    height:58px;

    border:none;

    border-radius:50%;

    
    cursor:pointer;



    transition:.35s;

    z-index:20;

    background:#FFFFFF;

border:1px solid #EAF4F3;

box-shadow:

0 10px 24px rgba(0,0,0,.05);
}

.review-arrow:hover{

    transform:translateY(-50%) scale(1.08);

    background:#81D8D0;

box-shadow:

0 12px 30px rgba(129,216,208,.22);
}


.review-arrow.prev{

    left: 0px;

}

.review-arrow.prev::before{

    content:"";

    position:absolute;

    top:50%;

    left:52%;

    width:12px;

    height:12px;

    border-left:3px solid #81D8D0;

    border-bottom:3px solid #81d8d0;

    transform:translate(-50%,-50%) rotate(45deg);

    transition:.3s;

}

.review-arrow.next{

    right: 0px;

}

.review-arrow.next::before{

    content:"";

    position:absolute;

    top:50%;

    left:48%;

    width:12px;

    height:12px;

    border-right:3px solid #81D8D0;

    border-top:3px solid #81D8D0;

    transform:translate(-50%,-50%) rotate(45deg);

    transition:.3s;

}

.review-arrow:hover::before{

    border-color:#fff;

}




/* =========================================================
   PAGINATION
========================================================= */

.review-pagination{

    margin-top:55px;

    display:flex;

    justify-content:center;

    align-items:center;

    gap:12px;

}

.review-pagination span{

    width:10px;

    height:10px;

    border-radius:50%;

    background:#ddd;

    cursor:pointer;

    transition:.35s;

}

.review-pagination span.active{

    width:34px;

    border-radius:100px;

    background:#81D8D0;

}


/* =========================================================
   ANIMATION
========================================================= */

.review-card{

    opacity:0;

    transform:translateY(20px);

    animation:reviewFade .6s ease forwards;

}

@keyframes reviewFade{

    to{

        opacity:1;

        transform:translateY(0);

    }

}