.section { padding-bottom: 100px; padding-top: 50px; box-sizing: border-box; }

/*
    ********* search 타이틀 공통  ********
*/


.cl_searchTitle { display: flex; align-items: center; justify-content: space-between; }
.cl_searchTitle .searchArea { display: flex; align-items: center; justify-content: center; gap: 20px; }
.cl_searchTitle .searchArea .checkboxArea { display: flex; align-items: center; justify-content: center; gap: 20px; }
.cl_searchTitle .cl_title { margin-bottom: 0; }



/*
*  ********************************************리뷰페이지*******************************************

/***
* *** 리뷰list
*/

/*리뷰배너*/
.reviewList .section { padding-top: 90px;}
.reviewList .reviewBanner { position: relative; width: 100%; margin-top: 50px; }
.reviewList .reviewBanner .imgArea img { width: 100%; }
.reviewList .reviewBanner .textArea { position: absolute; bottom: 5vw; right: 5vw; color: #fff; text-align: right; }
.reviewList .reviewBanner .textArea .mainText { font-size: 40px; font-family: 'PretendardB'; }
.reviewList .reviewBanner .textArea .subText { font-size: 26px; font-family: 'PretendardM'; color: rgba(255, 255, 255, 0.80); margin-top: 40px; }
.reviewList .reviewBanner .textArea .subText.bold { color: #fff; font-family: 'PretendardB'; }

/*그리드*/
.reviewList .gridWrapper {overflow:hidden; margin-bottom: 50px;}
.reviewList .grid {display:flex; flex-wrap:wrap; padding:10px 0 0 20px; margin:-20px}
.reviewList .grid .gridCell { box-sizing:border-box; width:calc(100% / 4); border:0 solid transparent; border-width:0 20px 10px 0; border-radius: 30px 30px 0px 0px; padding: 20px 0; box-sizing: border-box; cursor: pointer; }
.reviewList .grid .gridCell .imgArea img { width: 100%; border-radius: 30px 30px 0px 0px; }
.reviewList .grid .gridCell .textArea { margin-top: 25px; font-family: 'PretendardM'; font-size: 20px; }
.reviewList .grid .gridCell .textArea .mainText { font-size: 30px; color: #4F4F4F; font-family: 'PretendardSB'; }
.reviewList .grid .gridCell .textArea .name { color: #999; margin-top: 20px; }
.reviewList .grid .gridCell .textArea .date { color: #666; margin-top: 20px; }

/***
* *** 리뷰view
*/

/*리뷰헤더*/
.reviewView .section { padding-top: 60px;}
.reviewView .reviewHeader { display: flex; align-items: center; justify-content: space-between; font-family: 'PretendardM'; font-size: 20px;
    border-radius: 10px; background: #EEF6FF; padding: 10px 20px; box-sizing: border-box; }
.reviewView .reviewHeader .info { display: flex; align-items: center; justify-content: center; gap: 44px; }
.reviewView .reviewHeader .info > li { position: relative; color: #4F4F4F; }
.reviewView .reviewHeader .info > li:nth-child(1):after { display: none; }
.reviewView .reviewHeader .info > li:after { content: ''; position: absolute; top: 50%; left: -33px; transform: translateY(-50%); width: 24px; height: 24px; background-image: url("/app/layout/web/images/sub/slashIcon.png"); background-repeat: no-repeat;  }
.reviewView .reviewHeader .viewCount { color: #999; }
/*리뷰컨텐트*/
.reviewView .reviewContent { padding: 50px 0; box-sizing: border-box; }
.reviewView .reviewContent .imgArea { width: 100%; max-width: 800px; margin: 0 auto; }
.reviewView .reviewContent .imgArea img { width: 100%; }
.reviewView .reviewContent .contentText { width: 100%; max-width: 800px; font-size: 20px; color: #333; font-family: 'PretendardM'; text-align: left; margin: 0 auto;  margin-top: 30px; }
/*버튼*/
.reviewView .buttonArea { display: flex; align-items: center; justify-content: center; gap: 30px; }

/***
* *** 리뷰form
*/
.reviewForm .section { padding-top: 60px;}
.reviewForm .formArea { padding-bottom: 50px; box-sizing: border-box; }
.reviewForm .formCol { display: flex; align-items: center; margin-bottom: 11px; }
.reviewForm .formCol:nth-last-child(1) { margin-bottom: 0; }
.reviewForm .formCol .attach { display: flex; align-items: center; gap: 20px; }
.reviewForm .formCol .title { width: 200px; color: #4F4F4F; font-size: 20px; font-family: 'PretendardM'; }
.reviewForm .formCol .title span { position: relative; }
.reviewForm .formCol .title span:before { content: '*'; position: absolute; top: 50%; right: -15px; transform: translateY(-50%); color: #007FFF; font-size: 20px; }

.reviewForm .buttonArea { display: flex; align-items: center; justify-content: center; margin-top: 50px; }

@media (max-width: 1668px){
    /*
    *  ********************************************리뷰페이지*******************************************
    */

    /***
    * *** 리뷰list
    */

    /*리뷰 리스트*/
    .reviewList .grid .gridCell .textArea { font-size: 18px; margin-top: 20px; }
    .reviewList .grid .gridCell .textArea .mainText { font-size: 26px; }


    /***
    * *** 리뷰view
    */

    /*리뷰헤더*/
    .reviewView .reviewHeader { font-size: 18px; }
    /*리뷰컨텐트*/
    .reviewView .reviewContent .contentText { font-size: 18px; }

    /***
    * *** 리뷰form
    */
    .reviewForm .formArea { padding-bottom: 40px; }
    .reviewForm .formCol .title { font-size: 18px; }

}

@media (max-width: 1024px){
    .section { padding: 50px 0 80px 0; }

    /*
        ********* search 타이틀 공통  ********
    */
    .cl_searchTitle .searchArea { gap: 10px; }

    /*
    *  ********************************************리뷰페이지*******************************************
    */

    /***
    * *** 리뷰list
    */
    /*리뷰배너*/
    .reviewList .section { padding-top: 50px;}
    .reviewList .reviewBanner { margin-top: 30px; }

    /*리뷰 리스트*/
    .reviewList .grid .gridCell { width: calc(100%/2); }
    .reviewList .grid .gridCell .textArea { font-size: 16px; margin-top: 10px; }
    .reviewList .grid .gridCell .textArea .mainText { font-size: 24px; }
    .reviewList .grid .gridCell .textArea .name { margin-top: 10px; }
    .reviewList .grid .gridCell .textArea .date { margin-top: 10px; }

    /***
    * *** 리뷰view
    */

    /*리뷰헤더*/
    .reviewView .section { padding-top: 50px;}
    .reviewView .reviewHeader { font-size: 16px; }

    /***
    * *** 리뷰form
    */
    .reviewForm .section { padding-top: 50px;}




}

@media (max-width: 768px){
    .section { padding: 40px 0; }
    /*
        ********* search 타이틀 공통  ********
    */
    .cl_searchTitle .searchArea { width: 100%; flex-direction: column; align-items: flex-start; gap: 20px; margin-top: 30px; }
    .cl_searchTitle .searchArea .checkboxArea { display: flex; align-items: center; gap: 15px; }


    /*
    *  ********************************************리뷰페이지*******************************************
    */

    /***
    * *** 리뷰list
    */
    /*리뷰배너*/
    .reviewList .section { padding-top: 40px;}
    .reviewList .reviewBanner { margin-top: 0; }
    .cl_searchTitle { flex-direction: column; }
    /*리뷰 리스트*/
    .reviewList .listArea { padding-bottom: 40px; }

    .reviewList .grid { padding: 10px 0 0 10px; margin: -10px; }
    .reviewList .grid .gridCell { border-radius: 20px 20px 0 0; border-width: 0 10px 10px 0; padding: 10px 0; }
    .reviewList .grid .gridCell .imgArea img { border-radius: 20px 20px 0 0; }
    .reviewList .grid .gridCell .textArea { font-size: 12px; }
    .reviewList .grid .gridCell .textArea .mainText { font-size: 18px; }

    /***
    * *** 리뷰view
    */
    /*리뷰헤더*/
    .reviewView .section { padding-top: 40px;}
    .reviewView .reviewHeader { font-size: 14px; padding: 10px; }
    .reviewView .reviewHeader .info { gap: 15px; }
    .reviewView .reviewHeader .viewCount { font-size: 12px; }
    .reviewView .reviewHeader .info > li:after { width: 15px; height: 15px; background-size: 15px 15px; left: -15px; }
    /*리뷰content*/
    .reviewView .reviewContent { padding: 30px 0; }
    .reviewView .reviewContent .contentText { font-size: 14px; }
    /*리뷰버튼*/
    .reviewView .buttonArea { flex-direction: column; gap: 20px; }
    .reviewView .buttonArea .cl_button.padding { width: 100%; }

    /***
    * *** 리뷰form
    */

    .reviewForm .section { padding-top: 40px;}
    .reviewForm .formArea { padding-bottom: 30px; }
    .reviewForm .formCol { flex-direction: column; align-items: flex-start; margin-bottom: 20px; }
    .reviewForm .formCol .title { margin-bottom: 10px; }
    .reviewForm .formCol .input.default { width: 90%; }

    .reviewForm .buttonArea { margin-top: 30px; }
    .reviewForm .buttonArea .cl_button { width: 100%; }

}