@charset "utf-8";

.use-box { border:1px solid #ddd; background:#fafafa; padding:20px 15px 3px; margin-bottom:15px; }
.use-none { margin:0px 0px 15px; padding:80px 0px; }

.use-media .div-title-wrap { margin:0px; }
.use-media .photo i { border-radius:50%; background: rgb(245, 245, 245); padding: 15px; width: 64px; height: 64px; text-align: center; color: rgb(143, 143, 143); font-size: 30px  !important; display: inline-block; }
.use-media .photo img { border-radius:50%; width: 64px !important; height: 64px !important; display:inline-block; }
.use-media .media { margin:0px 0px 15px; padding:12px; }
.use-media .media-heading { padding:0; margin:0px; line-height: 22px; }
.use-media .media .media-body { padding-left:0px; }
.use-media .media .media-info { line-height:20px; padding:0px 0px 4px; }
.use-media .media .media-info .sp { display:inline-block; width:20px; text-align:center; font-size:11px; color:#888; }
.use-media .media .media-content { padding:0px 0px 4px; }
.use-media .media .media-content p { margin:0px; padding:0px; }

.view-wrap { width:100%; overflow:hidden; }
.view-wrap h1 { font-size: 22px; font-weight:bold; margin:0px; line-height:50px; display:block; text-overflow:ellipsis; white-space:nowrap; word-wrap:normal; overflow:hidden; margin:0px; padding:0px 10px; color: rgb(59, 62, 67); letter-spacing:-1px; }
.view-wrap h1 .photo { border-radius: 50%; width: 50px; height: 50px; margin-bottom:10px; margin-right:10px; }
.view-head { border-left:0px; border-right:0px; }
.view-head .sp { display:inline-block; width:20px; text-align:center; font-size:11px; color:#888; }
.view-head .list-group-item { padding:5px 15px; border-style:dotted; }
.view-img img { display:block; max-width:100%; margin:0 auto 15px; border:0; height:auto; }
.view-content { padding:0px 15px 20px }
.view-mobile .view-content { padding:0px 0px 20px; }
.view-content img { width:auto; height:auto; max-width:100%; }
.view-content p { padding:0; margin:0; line-height:22px; }
.view-sns { padding:15px; }
.view-btn { margin:0px 0px 30px; }
.view-btn i { margin-right:2px; }
@media all and (max-width:460px) {
	.responsive .view-wrap h1 { text-overflow:clip; overflow:none; white-space:normal; line-height: 24px; font-size: 18px; margin-bottom:10px; }
	.responsive .view-wrap h1 .photo { display:none; }
	.responsive .view-btn i { margin-right:0px; }
}

.item-media .item-photo i { border-radius:50%; background: rgb(245, 245, 245); padding: 15px; width: 50px; height: 50px; text-align: center; color: rgb(143, 143, 143); font-size: 30px; display: inline-block; }
.item-media .item-photo img { border-radius:50%; width: 50px !important; height: 50px !important; display:inline-block; }
.item-media .media-heading { padding:0; margin:0px; line-height: 22px; }
.item-media .media-heading a { color: var(--main-point-color)}
.item-media .media .media-body { padding-left:0px; }
.item-media .media .media-info { line-height:20px; padding:4px 0px; }
.item-media .media .media-info .sp { display:inline-block; width:20px; text-align:center; font-size:11px; color:#888; }

/* �亯 */
.ans-content { padding:0px 15px 15px; }
.ans-content img { width:auto; height:auto; max-width:100%; }
.ans-content p { padding:0; margin:0; line-height:22px; }



.review_img {padding-bottom: 100px; border-bottom: 1px solid #e1e1e1;}
.review_img img {width: 100%; }




/* 좌측 필터 */
#reviewFilter {display: flex; justify-content: space-between; margin-top: 100px; margin-bottom: 30px;}
#reviewFilter .filter_left {display: flex; width: 100%; max-width: 445px; gap: 0 5px;}
#reviewFilter .filter_left .drop_search {display: flex;}

#reviewFilter .filter_left .rtype_drop {position: relative; width: 132px;}
#reviewFilter .filter_left .star_drop {position: relative; width: 112px; margin-right: 7px;}
#reviewFilter .filter_left .category_drop {position: relative; width: 132px; margin-right: 5px;}


/* #reviewFilter .filter_left .drop_wrap {width: calc(100% - 52px); display: flex; gap: 0 7px;}
#reviewFilter .filter_left .rtype_drop,
#reviewFilter .filter_left .category_drop {position: relative; width: 35.11%;}
#reviewFilter .filter_left .star_drop { position: relative; width: 29.79%;} */


/* 인풋 */
#reviewFilter .filter_left  .filter_input {position: relative; width: 100%; padding: 12px 20px; border: 1px solid #e1e1e1; border-radius: 5px; font-size: 16px; text-overflow: ellipsis; background: transparent; color: #666666; cursor: pointer;}
#reviewFilter .filter_left  .filter_input::placeholder {color: #666;}
#reviewFilter .filter_left  .filter_input.active {border:1px solid #111; background: #111111; color: #fff;}
#reviewFilter .filter_left  .filter_input.active::placeholder {color: #fff;}

#reviewFilter .filter_left  .arrow {position: relative;}
#reviewFilter .filter_left  .arrow::after {position: absolute; content: ""; top: 2px; right: 20px;   width: 10px; height: 10px; border-top: 1px solid #666666; border-right: 1px solid #666666;  transform: rotate(135deg); transition: all .3s ease-in-out; }
#reviewFilter .filter_left  .filter_input.active + .arrow::after {top: 7px; border-top: 1px solid #fff; border-right: 1px solid #fff; transform: rotate(315deg);}

/* 드롭 */
#reviewFilter .filter_ul {position: absolute; top: 60px; left: 0; display: none; flex-direction: column; gap: 20px 0; width: 100%; padding: 16px 20px; border-radius: 10px; box-shadow: rgba(149, 157, 165, 0.4) 0px 8px 24px; background: #fff;}
#reviewFilter .category_drop .filter_ul {width: 300px;}
#reviewFilter .filter_ul span {display: block; transition: all .3s ease-in-out; font-size: 16px; color: #666;}
#reviewFilter .filter_ul li {cursor: pointer;}
#reviewFilter .filter_ul li:hover span {color:#111111}

/* 리셋 버튼 */
#reviewFilter .reload_btn {position: relative; width: 47px; height: 47px; border: 1px solid #111111; border-radius: 5px; background: #111;}
#reviewFilter .reload_btn::after {position: absolute; content: ''; top: 50%; left: 50%; width: 20px; height: 21px; background: url(/img/reload.png) no-repeat center center / cover;  transform : translate(calc(-50% + 1px), calc(-50% + 1px))
}

/* 검색창 관련 */
#reviewFilter .filter_right {display: flex; gap:0 5px;}
#reviewFilter .filter_right .input_box {min-width: 280px; border-radius: 5px; border: 1px solid #e1e1e1; padding: 12px 20px; font-size: 16px; color: #111;}
#reviewFilter .filter_right .input_box::placeholder {color: #999999;}
#reviewFilter .filter_right .search_btn {position: relative; width: 47px; height: 47px; border: 1px solid #111111; border-radius: 5px; background: #111;}
#reviewFilter .filter_right .search_btn::after {position: absolute; content: ''; top: 50%; left: 50%; width: 20px; height: 19px; background: url(/img/search_w.png) no-repeat center center / cover;  filter: brightness(0) invert(1);
    transform : translate(calc(-50% + 1px), calc(-50% + 1px))}

/* 올던 관련 리뷰 커스텀 */
#reviewBox .review_container {display: grid; grid-template-columns: repeat(4, 1fr);grid-template-rows: repeat(4, auto);gap: 40px 16px}

#reviewBox .review_card {border-radius: 10px; border: 1px solid #e8e8e8; overflow: hidden; background: #fff;}
#reviewBox .review_card .review_img {padding-bottom: 100%;}

#reviewBox .review_card .review_bot {padding: 15px 18px 22px;}

#reviewBox .review_card .review_bot .product_info {display: flex; gap: 0 12px;  padding-bottom: 14px; border-bottom:1px solid #e8e8e8;} 
#reviewBox .review_card .review_bot  .product_info_l {width: 40px; height: 40px; border-radius: 50%; overflow: hidden;}
#reviewBox .review_card .review_bot  .product_info_l img {width: 100%; height: 100%; object-fit: cover;}
#reviewBox .review_card .review_bot  .product_info_r {display: flex; width: calc(100% - 52px); flex-direction: column;     justify-content: space-around; }
#reviewBox .review_card .review_bot  .product_info_r .product_name {font-size: 14px; font-weight: 500; color: #1b1b1b; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical;}

#reviewBox .review_card .review_bot  .product_info_r .review_meta {display: flex; gap: 0 9px; align-items: center;}
#reviewBox .review_card .review_bot  .review_star {display:flex; gap: 0 3px; align-items: center;}
#reviewBox .review_card .review_bot .review_count {display: flex; gap:0 2px; align-items: center;}

#reviewBox .review_card .review_bot  .review_star i {color: #f8c84a; font-size: 12px !important;}
#reviewBox .review_card .review_bot  .review_star span {font-family: "Pretendard", sans-serif !important;  font-size: 12px; font-weight: 700; color: #424242;}
#reviewBox .review_card .review_bot .review_count span {font-family: "Pretendard", sans-serif !important; font-size: 12px; font-weight: 700; color:#9e9e9e}


#reviewBox .review_card .review_bot .review_info {padding-top: 25px;}
#reviewBox .review_card .review_bot .review_info .review_cont {height: 40px; font-size: 14px; line-height: 1.429; color: #666666; overflow: hidden; text-overflow: ellipsis; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; margin-bottom: 15px;}

#reviewBox .review_card .review_bot .review_info .review_user {display: flex; gap: 0 13px;}
#reviewBox .review_card .review_bot .review_info span {font-size: 12px; color: #9e9e9e;}


.review_pagination .pagination {margin: 70px 0 0 0;}


@media (max-width:1280px) {
    #reviewFilter .filter_right .input_box {min-width:210px}
}


@media (max-width:991px) {
    #reviewBox .review_container {grid-template-columns: repeat(2, 1fr); gap: 30px 15px;}
}

@media (max-width:767px) {


    .review_img {padding-bottom: 50px;}

    #reviewFilter {flex-direction: column; gap: 40px 0; margin-top: 50px; margin-bottom: 20px;}
    #reviewFilter .filter_left {flex-direction: column; gap: 9px 0; max-width: 100%;}
    #reviewFilter .filter_left .rtype_drop {width: 100%;}
    #reviewFilter .filter_left .drop_search {gap: 0 7px;}
    #reviewFilter .filter_left .star_drop,
    #reviewFilter .filter_left .category_drop {width: calc((100% - 7px * 2 - 42.5px)/2); margin-right: 0;}
    #reviewFilter .filter_left .arrow::after {width: 8px; height: 8px; top: 4px; right: 16px;}


    #reviewFilter .filter_left .filter_input {padding: 10.75px 15px; font-size: 14px; border-radius: 2.5px;}
    #reviewFilter .reload_btn {width: 42.5px; height: 42.5px; border-radius: 2.5px;}
    #reviewFilter .reload_btn::after {width: 18px; height: 19px; background: url(/img/mreload.png) no-repeat center center / cover;} 

    #reviewFilter .filter_ul {top:51px; padding: 15px; border-radius: 2.5px; z-index: 20;}
    #reviewFilter .filter_ul span {font-size: 13px;}
    #reviewFilter .category_drop .filter_ul {width: 100%;}


    #reviewFilter .filter_right {gap: 0 7px;}
    #reviewFilter .filter_right .review_input {width: calc(100% - 47.5px);}
    #reviewFilter .filter_right .input_box {padding: 10.75px 15px; width: 100%; min-width: auto; font-size: 14px;}
    
    #reviewFilter .filter_right .search_btn {width: 42.5px; height: 42.5px; border-radius: 2.5px;} 
    #reviewFilter .filter_right .search_btn::after {width: 21px; height: 19px; background: url(/img/msearch_w.png) no-repeat center center / cover;}

    #reviewBox .review_card .review_bot {padding: 8px 10px 14px;}

    #reviewBox .review_card .review_bot .product_info {gap: 0 7px; padding-bottom: 7px;}

    #reviewBox .review_card .review_bot .product_info_l {width: 37.5px; height: 37.5px;}
    #reviewBox .review_card .review_bot .product_info_r {width: calc(100% - 44.5px);}


    #reviewBox .review_card .review_bot .product_info_r .product_name {font-size: clamp(10px, 1.82529335071708vw,14px);}
    #reviewBox .review_card .review_bot .product_info_r .review_meta {gap: 0 5px;}
    #reviewBox .review_card .review_bot .review_star {gap: 0 2px;}
    #reviewBox .review_card .review_bot .review_star span {font-size: 10px;}
    #reviewBox .review_card .review_bot .review_star i {font-size: 9px !important;}
    #reviewBox .review_card .review_bot .review_count span {font-size: 10px;}

    #reviewBox .review_card .review_bot .review_info {padding-top: 17.5px;}
    #reviewBox .review_card .review_bot .review_info .review_cont {height: auto; font-size: 11px; margin-bottom: 13px;}

    #reviewBox .review_card .review_bot .review_info span {font-size: 10px;}
    .review_pagination .pagination {margin: 40px 0 0 0;}
}