#review{ padding:130px 0}
#review *{ font-family:'Pretendard', sans-serif !important}
#review .titleBox{}
#review .titleBox .title{ font-size:32px; font-weight:bold; font-family: 'neue-haas-unica', sans-serif !important;}
#review .titleBox .subTitle{ font-size:24px; color:#1f1f1f;}
#review .titleBox .totalBox{ margin-top:30px;}
#review .titleBox .totalBox .star{ display:inline-block; vertical-align:middle;}
#review .titleBox .totalBox .star li{ position:relative; display:inline-block; vertical-align:middle; width:45px; height:45px; margin:0 1px; background-color:#d8d8d8}
#review .titleBox .totalBox .star li:before{ content:""; position:absolute; top:0; left:0; width:100%; height:100%; background-image:url(/img/star_off.png); background-position:center; background-repeat:no-repeat; background-size:cover; z-index:2}
#review .titleBox .totalBox .star li .gage{ position:absolute; top:0; left:0; height:100%; background-color:#ff923a; z-index:1;}
#review .titleBox .totalBox .total_num{ display:inline-block; vertical-align:middle; font-size:40px; color:#1f1f1f; margin-left:30px; margin-top:5px;}
#review .titleBox .items{ margin-top:60px;}
#review .titleBox .items > li{ display:inline-block; margin-right:40px;}
#review .titleBox .items > li span{ display:inline-block; vertical-align:middle; font-size:18px; color:#1f1f1f; margin-right:15px;}
#review .titleBox .items > li .star{ display:inline-block; vertical-align:middle; }
#review .titleBox .items > li .star li{ position:relative; display:inline-block; vertical-align:middle; width:20px; height:20px; margin:0 1px; background-color:#d8d8d8}
#review .titleBox .items > li .star li:before{ content:""; position:absolute; top:0; left:0; width:100%; height:100%; background-image:url(/img/star_off.png); background-position:center; background-repeat:no-repeat; background-size:cover; z-index:2}
#review .titleBox .items > li .star li .gage{ position:absolute; top:0; left:0; height:100%; background-color:#ff923a; z-index:1;}

#list_skin .title_best{ margin:80px 0 20px;}
#list_skin .title_best span{ display:inline-block; font-size:30px; font-weight:bold; color:#1f1f1f; padding-bottom:5px; border-bottom:4px solid #1f1f1f; font-family: 'neue-haas-unica', sans-serif !important;}
#list_skin .best{}
#list_skin .best:after{ content:""; display:block; clear:both}
#list_skin .best .thumbnail{ float:left; display:block; width:30%; height:340px; background-position:center; background-repeat:no-repeat; background-size:cover;}
#list_skin .best .infoBox{ position:relative; float:right; width:65%; display:block;}
#list_skin .best .infoBox .subject{ font-size:30px; font-weight:bold; color:#1f1f1f;}
#list_skin .best .infoBox ul{ text-align:center; margin:70px 0 50px; font-size: 0}
#list_skin .best .infoBox ul li{ position:relative; display:inline-block; vertical-align:middle; width:33%; font-size:22px; color:#1f1f1f; text-align: center; }
#list_skin .best .infoBox ul li:nth-of-type(2){ padding: 0 10px; box-sizing: border-box;}
#list_skin .best .infoBox ul li:nth-of-type(2):before{content:""; position:absolute; top:0; left:0; width:1px; height:100%; background-color:#666;}
#list_skin .best .infoBox ul li:nth-of-type(2):after{content:""; position:absolute; top:0; right:0; width:1px; height:100%; background-color:#666;}
#list_skin .best .infoBox ul li img{ display:inline-block; height:26px;}
#list_skin .best .infoBox .text{ height:140px; font-size:18px; color:#1f1f1f; line-height:1.6; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical;}
#list_skin .best .infoBox .text br{ display:none}
#list_skin .best .infoBox .viewBtn{ position:absolute; top:-10px; right:0; display:block; width:180px; line-height:50px; font-size:16px; color:#fff; text-align:center; background-color:#1f1f1f; border-radius:30px;}
#list_skin .review_list{ position:relative; margin-top:150px; margin-bottom:50px}
#list_skin .review_list:after{ content:""; display:block; clear:both}
#list_skin .review_list .all_check{ position:absolute; left:0; top:0;}
#list_skin .review_list > li{ position:relative; float:left; width:30%; margin-right:5%; margin-top:60px;}
#list_skin .review_list > li:nth-of-type(3n){ margin-right:0}
#list_skin .review_list > li .check{ position:absolute; left:0; top:0;}
#list_skin .review_list > li .thumbnail{ display:block; width:100%; height:340px; overflow:hidden}
#list_skin .review_list > li .thumbnail span{ display:block; width:100%; height:inherit; background-position:center; background-repeat:no-repeat; background-size:cover; transition:0.3s;}
#list_skin .review_list > li .infoBox{ display:block;}
#list_skin .review_list > li .infoBox .subject{ height:29px; font-size:21px; font-weight:bold; color:#1f1f1f; margin-top:15px; overflow:hidden}
#list_skin .review_list > li .infoBox ul{ padding:15px 0; text-align:left}
#list_skin .review_list > li .infoBox ul li{ position:relative; display:inline-block; vertical-align:middle; font-size:12px; color:#1f1f1f; padding:0 20px;}
#list_skin .review_list > li .infoBox ul li:first-child{ padding-left:0;}
#list_skin .review_list > li .infoBox ul li:nth-of-type(2):before{content:""; position:absolute; top:0; left:0; width:1px; height:100%; background-color:#666;}
#list_skin .review_list > li .infoBox ul li:nth-of-type(2):after{content:""; position:absolute; top:0; right:0; width:1px; height:100%; background-color:#666;}
#list_skin .review_list > li .infoBox ul li img{ display:inline-block; height:14px;}
#list_skin .review_list > li .infoBox .text{ height:75px; font-size:16px; color:#1f1f1f; line-height:1.6; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; transform:skew(-0.1deg);}
#list_skin .review_list > li .infoBox .text br{ display:none;}
/*#list_skin .review_list > li:hover .thumbnail span{ transform:scale(1.1);}*/

#review.viewPage .titleBox .title{ font-size:32px; font-weight:bold; font-family: 'neue-haas-unica', sans-serif !important;}
#review.viewPage .titleBox .subTitle{ font-size:22px; font-weight:bold; color:#1f1f1f; margin-top:30px;}
#view_skin .thumb_swiper{}
#view_skin .thumb_swiper .swiper-container{}
#view_skin .thumb_swiper .swiper-container .swiper-slide{ height:360px; background-position:center; background-repeat:no-repeat; background-size:cover; cursor:pointer}
#view_skin .infoBox{ position:relative; padding:30px 0;}
#view_skin .infoBox ul{}
#view_skin .infoBox ul li{ position:relative; display:inline-block; vertical-align:middle; font-size:20px; color:#1f1f1f; padding:0 60px;}
#view_skin .infoBox ul li:first-child{ padding-left:0}
#view_skin .infoBox ul li:last-child{ padding-right:0}
#view_skin .infoBox ul li:nth-of-type(2):before{content:""; position:absolute; top:0; left:0; width:1px; height:100%; background-color:#666;}
#view_skin .infoBox ul li:nth-of-type(2):after{content:""; position:absolute; top:0; right:0; width:1px; height:100%; background-color:#666;}
#view_skin .infoBox ul li img{ display:inline-block; height:24px;}
#view_skin .infoBox .viewBtn{ position:absolute; top:50%; right:0; transform:translateY(-50%) skew(-0.1deg); display:block; width:180px; line-height:50px; font-size:16px; color:#fff; text-align:center; background-color:#1f1f1f; border-radius:30px; }
#view_skin .contents{ margin:20px 0 50px;}
#view_skin .contents .starBox{ padding:20px 0 50px;}
#view_skin .contents .starBox li{ display:inline-block; vertical-align:middle; margin-right:50px; text-align:left;}
#view_skin .contents .starBox li span{ display:inline-block; vertical-align:middle; width:50px; font-size:18px; color:#1f1f1f; margin-right:15px; margin-top:4px;}
#view_skin .contents .starBox li img{ display:inline-block; vertical-align:middle; height:18px;}
#view_skin .contents .text{ font-size:18px; color:#1f1f1f; line-height:1.8;}

.imgView{ position:fixed; top:0; left:0; width:100%; height:100%; background-color:rgba(0,0,0,0.9); z-index:100;}
.imgView .xBtn{ position:absolute; top:30px; right:20px; display:block; z-index:10}
.imgView .xBtn img{ display:block;}
.imgView .img_swiper{ position:absolute; top:50%; left:50%; width:100%; max-width:1200px; transform:translate(-50%,-50%);}
.imgView .img_swiper .swiper-container{}
.imgView .img_swiper .swiper-container .swiper-slide{ height:80vh; background-position:center; background-repeat:no-repeat; background-size:contain; cursor:all-scroll}
.imgView .img_swiper .swiper-pagination{ position:absolute; bottom:-25px; left:0; width:100%; text-align:center;}
.imgView .img_swiper .swiper-pagination span{ margin:0 5px; background-color:#fff;}
.imgView .img_swiper .swiper-pagination .swiper-pagination-bullet-active{ background-color:#fff;}

@media (max-width:1250px){
#list_skin .best .thumbnail{ height:280px}
#list_skin .best .infoBox ul{ margin:60px 0 40px;}
#list_skin .best .infoBox ul li{ padding:2px 0}
#list_skin .best .infoBox .text{ height:112px; -webkit-line-clamp:4}
#list_skin .review_list{ margin-top:100px}
#list_skin .review_list > li .thumbnail{ height:280px}
#list_skin .review_list > li .infoBox .subject{ height:26px; font-size:18px}
#list_skin .review_list > li .infoBox ul li{ padding:0 10px;}
#list_skin .review_list > li .infoBox ul li:last-child{ padding-right:0}

#view_skin .thumb_swiper .swiper-container .swiper-slide{ height:320px}
.imgView .img_swiper{ max-width:800px}
.imgView .img_swiper .swiper-container .swiper-slide{ height:70vh;}
}
@media (max-width:1023px){
#review .titleBox .title{ font-size:26px}
#review .titleBox .subTitle{ font-size:20px;}
#review .titleBox .totalBox .star li{ width:35px; height:35px;}
#review .titleBox .totalBox .total_num{ font-size:30px}
#review .titleBox .items > li{ margin-right:30px;}
#review .titleBox .items > li span{ font-size:16px;}
#review .titleBox .items > li img{ height:16px;}
#list_skin .title_best span{ font-size:24px; border-width:3px}
#list_skin .best .thumbnail{ width:32%; height:230px;}
#list_skin .best .infoBox ul{ margin:30px 0 20px;}
#list_skin .best .infoBox ul li{ font-size:18px; padding:0;}
#list_skin .best .infoBox ul li img{ height:20px}
#list_skin .best .infoBox .viewBtn{ width:140px; line-height:45px; font-size:14px;}
#list_skin .best .infoBox .subject{ font-size:20px;}
#list_skin .best .infoBox .text{ height:auto; font-size:16px; -webkit-line-clamp:5}
#list_skin .review_list > li{ width:32%; margin-right:2%}
#list_skin .review_list > li .thumbnail{ height:230px;}
#list_skin .review_list > li .infoBox ul li{ font-size:11px; padding:0 5px; letter-spacing:-0.05em}
#list_skin .review_list > li .infoBox ul li:nth-child(2){ padding:0 8px}
#list_skin .review_list > li .infoBox ul li img{ height:12px;}
#list_skin .review_list > li .infoBox .subject{ height:22px; font-size:16px}
#list_skin .review_list > li .infoBox .text{ height:auto; font-size:14px;}
#list_skin .review_list > li .infoBox ul li:first-child{ max-width:70px; height:12px}

#review.viewPage .titleBox .title{ font-size:26px;}
#review.viewPage .titleBox .subTitle{ font-size:18px; margin-top:20px}
#view_skin .thumb_swiper .swiper-container .swiper-slide{ height:230px;}
#view_skin .infoBox ul li{ font-size:16px; padding:0 30px;}
#view_skin .infoBox ul li img{ height:20px; }
#view_skin .infoBox .viewBtn{ width:140px; line-height:45px; font-size:14px;}
#view_skin .contents .starBox{ padding:10px 0 30px}
#view_skin .contents .starBox li{ margin-right:30px;}
#view_skin .contents .starBox li span{ font-size:14px; margin-right:10px; margin-top:2px}
#view_skin .contents .starBox li img{ height:16px;}
#view_skin .contents .text{ font-size:14px;}
}
@media (max-width:800px){
#review{ padding:100px 0; box-sizing:border-box}
#review .titleBox .title{ font-size:20px;}
#review .titleBox .subTitle{ padding-left:0; font-size:16px; line-height:1.6; margin-top:10px}
#review .titleBox .subTitle br{ display:block}
#review .titleBox .totalBox{ margin-top:20px;}
#review .titleBox .totalBox .star li{ width:25px; height:25px;}
#review .titleBox .totalBox .total_num{ font-size:20px; margin-left:10px;}
#review .titleBox .items{ margin-top:20px; font-size:0}
#review .titleBox .items > li{ width:50%; margin-right:0; margin-top:10px}
#review .titleBox .items > li span{ font-size:14px; margin-right:10px;}
#review .titleBox .items > li img{ height:14px;}
#review .titleBox .items > li .star li{ width:18px; height:18px;}
#review .titleBox .items > li:nth-of-type(even){ text-align:right}
#list_skin .title_best{ margin:20px 0}
#list_skin .title_best span{ font-size:18px;}
#list_skin .best .thumbnail{ float:none; width:100%; height:80vw;}
#list_skin .best .infoBox{ float:none; width:100%; margin-top:20px}
#list_skin .best .infoBox .viewBtn{ display:none; width:80px; line-height:30px; top:-60px; right:10px; font-size:10px;}
#list_skin .best .infoBox ul{ margin:15px 0 10px; text-align:left;}
#list_skin .best .infoBox ul li{ font-size:13px;}
#list_skin .best .infoBox ul li img{ height:14px;}
#list_skin .best .infoBox .subject{ font-size:17px;}
#list_skin .best .infoBox .text{ font-size:13px; -webkit-line-clamp:3}
#list_skin .review_list{ margin-top:50px}
#list_skin .review_list > li{ float:none; width:100%; margin-right:0 !important; margin-top:50px;}
#list_skin .review_list > li .thumbnail{ height:80vw;}
#list_skin .review_list > li .infoBox ul{ padding:15px 0 10px}
#list_skin .review_list > li .infoBox ul li{ font-size:13px; padding:0 10px;}
#list_skin .review_list > li .infoBox ul li:nth-child(2){ padding:0 10px}
#list_skin .review_list > li .infoBox ul li img{ height:14px;}
#list_skin .review_list > li .infoBox .subject{ height: auto; font-size:17px;}
#list_skin .review_list > li .infoBox .text{ font-size:13px; }
#list_skin .review_list > li .infoBox ul li:first-child{ max-width:none; height:auto}

#review.viewPage .titleBox .title{ font-size:22px;}
#review.viewPage .titleBox .subTitle{ font-size:14px;}
#view_skin .thumb_swiper .swiper-container .swiper-slide{ height:28vw;}
#view_skin .infoBox{ padding:15px 0;}
#view_skin .infoBox ul li{ font-size:12px; padding:0 5px;}
#view_skin .infoBox ul li:nth-child(2){ padding:0 10px}
#view_skin .infoBox ul li img{ height:12px;}
#view_skin .infoBox .viewBtn{ width:90px; line-height:30px; font-size:10px; transform:none; top:-25px}
#view_skin .contents .starBox{ padding:0 0 20px;}
#view_skin .contents .starBox li{ margin-bottom:10px}
#view_skin .contents .starBox li span{ font-size:12px; margin-right:0}
#view_skin .contents .starBox li img{ height:12px;}
#view_skin .contents .text{ font-size:12px;}
.imgView .xBtn img{ width:25px}
}