@charset "utf-8";

.page-quote.layer-mo{font-family: "Pretendard", sans-serif; position: relative;}
.page-quote.layer-mo .section{margin: 0 !important;}

.page-quote.layer-mo .brand-section{width: 100%; min-height: 100px; display: flex; flex-wrap: wrap; justify-content: space-between; padding: 30px 20px 30px; }
.page-quote.layer-mo .brand-section .brand{width: 56px; display: flex; flex-direction: column; align-items: center; margin-bottom: 5px; }
.page-quote.layer-mo .brand-section .brand .brand-icon{width: 56px; height: 56px; border-radius: 5px; background-color: #f1f3f5; text-align: center; align-content: center;}
.page-quote.layer-mo .brand-section .brand .brand-icon img{width: 28px; }
.page-quote.layer-mo .brand-section .brand .brand-title{font-size: 12px; padding: 6px 0; color: #212529; word-break: keep-all; text-align: center; line-height: 14px;}
.page-quote.layer-mo .brand-section .brand .brand-icon p{width: 100%; height: 100%; text-align: center; align-content: center; color: #212529; font-weight: bold; line-height: 18px;}
.page-quote.layer-mo .brand-section .brand.selected .brand-icon{background-color: #212529;}
.page-quote.layer-mo .brand-section .brand.selected .brand-icon p{color: white; }
.page-quote.layer-mo .brand-section .brand.selected .brand-title{font-weight: bold;}

.page-quote.layer-mo .bestItem-section{background-color: #f1f3f5; padding: 40px 20px;}
.page-quote.layer-mo .bestItem-section .bestItem-slider{display: flex; flex-wrap: wrap; justify-content: space-between; padding-bottom: 30px;}
.page-quote.layer-mo .bestItem-section .bestItem-slider .swiper-pagination{bottom: 0 !important;}
.page-quote.layer-mo .bestItem-section .item{width: 48%; height: auto;}
.page-quote.layer-mo .bestItem-section .item .img-box{width: 100%; background-color: white; position: relative; text-align: center; align-content: center;}
.page-quote.layer-mo .bestItem-section .item .img-box img{width: 100%;}
.page-quote.layer-mo .bestItem-section .item .text-box{width: 100%; padding: 10px;}
.page-quote.layer-mo .bestItem-section .item .text-box .brand{font-size: 14px; font-weight: bold; color: #212529; width: 100%; display: block; line-height: 20px;}
.page-quote.layer-mo .bestItem-section .item .text-box .model{font-size: 13px; color: #868e96; width: 100%; display: block; line-height: 20px; text-overflow: ellipsis; overflow: hidden; white-space: nowrap;}
.page-quote.layer-mo .bestItem-section .item .text-box .price-box{display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center;}
.page-quote.layer-mo .bestItem-section .item .text-box .price-box .salePrice{font-family: "Lato",sans-serif;  font-weight: 900; font-size: 16px; line-height: 20px;}
.page-quote.layer-mo .bestItem-section .item .text-box .price-box .rate{font-weight: bold; font-size: 12px;  color: #868e96;}
.page-quote.layer-mo .bestItem-section .item .text-box .price-box .rate.blue{color: #092CB1;}
.page-quote.layer-mo .bestItem-section .item .text-box .price-box .rate.red{color: #C11111;}
.page-quote.layer-mo .bestItem-section .item .text-box .info-box{display: flex; flex-wrap: wrap; margin: 8px 0; align-items: center; align-content: center;}
.page-quote.layer-mo .bestItem-section .item .text-box .info-box .label1{background-color: #868e96; color: white; font-size: 12px; font-weight: 500; padding: 3px 3px;}
.page-quote.layer-mo .bestItem-section .item .text-box .info-box .info{font-size: 12px; margin-left: 4px; font-weight: 500;}
.page-quote.layer-mo .bestItem-section .item .text-box .saleDate-box{display: flex; flex-wrap: wrap; align-items: center; align-content: center;}
.page-quote.layer-mo .bestItem-section .item .text-box .saleDate-box .label1{background-color: #868e96; color: white; font-size: 12px; font-weight: 500; padding: 3px 3px;}
.page-quote.layer-mo .bestItem-section .item .text-box .saleDate-box .saleDate{font-size: 13px; margin-left: 4px; font-weight: 500;}

.page-quote.layer-mo .product-section{padding: 40px 20px 10px;}
.page-quote.layer-mo .product-section .filter-box1{width: 100%; display: flex; flex-wrap: wrap; justify-content: space-between; margin-bottom: 20px;}
.page-quote.layer-mo .product-section .filter-box1 .item-count{font-size: 12px; color: #212529; font-weight: 500;}
.page-quote.layer-mo .product-section .filter-box1 .item-count strong{font-weight: bold;}
.page-quote.layer-mo .product-section .filter-box1 .sort-filter{font-size: 12px; color: #212529; font-weight: bold; border: none;}
.page-quote.layer-mo .product-section .filter-box1 .sort-ul{min-width: 100px;}
.page-quote.layer-mo .product-section .filter-box1 .sort-ul .sort-li{font-size: 12px; font-family: "Pretendard", sans-serif; padding: 8px 10px;}
.page-quote.layer-mo .product-section .item-list{display: flex; flex-wrap: wrap; justify-content: space-between;}
.page-quote.layer-mo .product-section .item-list .item{width: 48%; height: auto; margin-bottom: 20px;}
.page-quote.layer-mo .product-section .item-list .item .img-box{width: 100%; background-color: #f1f3f5; position: relative; text-align: center; align-content: center;}
.page-quote.layer-mo .product-section .item-list .item .img-box img{width: 100%;}
.page-quote.layer-mo .product-section .item-list .item .text-box{width: 100%; padding: 10px;}
.page-quote.layer-mo .product-section .item-list .item .text-box .brand{font-size: 14px; font-weight: bold; color: #212529; width: 100%; display: block; line-height: 20px;}
.page-quote.layer-mo .product-section .item-list .item .text-box .model{font-size: 13px; color: #868e96; width: 100%; display: block; line-height: 20px; text-overflow: ellipsis; overflow: hidden; white-space: nowrap;}
.page-quote.layer-mo .product-section .item-list .item .text-box .price-box{display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center;}
.page-quote.layer-mo .product-section .item-list .item .text-box .price-box .salePrice{font-family: "Lato",sans-serif;  font-weight: 900; font-size: 16px; line-height: 19px;}
.page-quote.layer-mo .product-section .item-list .item .text-box .price-box .rate{font-weight: bold; font-size: 12px;  color: #868e96; }
.page-quote.layer-mo .product-section .item-list .item .text-box .price-box .rate.blue{color: #003caa;}
.page-quote.layer-mo .product-section .item-list .item .text-box .price-box .rate.red{color: #b00020;}
.page-quote.layer-mo .product-section .item-list .item .text-box .info-box{display: flex; flex-wrap: wrap; margin: 8px 0; align-items: center; align-content: center;}
.page-quote.layer-mo .product-section .item-list .item .text-box .info-box .label1{background-color: #868e96; color: white; font-size: 12px; font-weight: 500; padding: 3px 3px;}
.page-quote.layer-mo .product-section .item-list .item .text-box .info-box .info{font-size: 12px; margin-left: 4px; font-weight: 500;}
.page-quote.layer-mo .product-section .item-list .item .text-box .saleDate-box{display: flex; flex-wrap: wrap; align-items: center; align-content: center;}
.page-quote.layer-mo .product-section .item-list .item .text-box .saleDate-box .label1{background-color: #868e96; color: white; font-size: 12px; font-weight: 500; padding: 3px 3px;}
.page-quote.layer-mo .product-section .item-list .item .text-box .saleDate-box .saleDate{font-size: 12px; margin-left: 4px; font-weight: 500;}

.page-quote.layer-mo .ad-section{margin-bottom: 0 !important;}
.page-quote.layer-mo .ad-section .ad-slider{width: 100%;}
.page-quote.layer-mo .ad-section .ad-slider .ad{width: 100%; padding: 20px; background-color: #f1f3f5; display: flex; flex-wrap: wrap; justify-content: space-evenly; align-items: center;}
.page-quote.layer-mo .ad-section .ad-slider .ad .text-box{min-width: 120px; height: 120px; display: flex; justify-content: center; align-items: center; flex-direction: column; margin-right: 10px;}
.page-quote.layer-mo .ad-section .ad-slider .ad .text-box .ad-title{font-size: 16px; font-weight: bold; margin-bottom: 2px;}
.page-quote.layer-mo .ad-section .ad-slider .ad .text-box .ad-description{font-size: 14px; margin-bottom: 10px; font-weight: 500;}
.page-quote.layer-mo .ad-section .ad-slider .ad .text-box .ad-link{width: 100px; height: 26px; border-radius: 12px; background-color: #212529; text-align: center; align-content: center; font-size: 12px; color: white; }
.page-quote.layer-mo .ad-section .ad-slider .ad .img-box{width: 184px; height: 108px; border-radius: 6px;}
.page-quote.layer-mo .ad-section .ad-slider .ad .img-box img{width: 100%; height: 100%; border-radius: 6px;}
.page-quote.layer-mo .ad-section .ad-slider .ad.type2{padding: 0;}
.page-quote.layer-mo .ad-section .ad-slider .ad .type2-img{width: 100%; height: 160px;}


/*시세 상세*/
.page-quoteInfo.layer-mo{color: #212529;}
.page-quoteInfo.layer-mo .head-section{position: relative; height: 60px; text-align: center; align-content: center;}
.page-quoteInfo.layer-mo .head-section .back-page{position: absolute; left: 30px; top: 14px; font-size: 28px;}
.page-quoteInfo.layer-mo .head-section .head-title{font-size: 20px; font-weight: bold;}

.page-quoteInfo.layer-mo .mainImg-section{position: relative;}
.page-quoteInfo.layer-mo .mainImg-section .img-box{width: 100%; background-color: #f1f3f5; }
.page-quoteInfo.layer-mo .mainImg-section .img-box img{width: 100%;}
.page-quoteInfo.layer-mo .mainImg-section p {position: absolute; right: 20px; bottom: 10px; font-size: 12px; color:#868e96;}

.page-quoteInfo.layer-mo .info-section{padding: 40px 20px;}
.page-quoteInfo.layer-mo .info-section .brand{font-size: 18px; font-weight: bold; margin-bottom: 10px;}
.page-quoteInfo.layer-mo .info-section .model{font-size: 14px; font-weight: 500; color: #868e96; margin-bottom: 10px; line-height: 18px}
.page-quoteInfo.layer-mo .info-section .price-box{width: 100%; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center;}
.page-quoteInfo.layer-mo .info-section .price-box .salePrice{font-size: 22px; font-weight: 700; font-family: 'Lato', 'sans-serif';}
.page-quoteInfo.layer-mo .info-section .price-box .rate-box{}
.page-quoteInfo.layer-mo .info-section .price-box .rate-box p{font-size: 13px; font-weight: 500; line-height: 20px;}
.page-quoteInfo.layer-mo .info-section .price-box .rate-box p .rate{display: inline-block; text-align: right;}
.page-quoteInfo.layer-mo .info-section .price-box .rate-box p .rate.red{color: #C11111;}
.page-quoteInfo.layer-mo .info-section .price-box .rate-box p .rate.blue{color: #092CB1;}
.page-quoteInfo.layer-mo .info-section .button-box{width: 100%; display: flex; flex-wrap: wrap; justify-content: space-between; margin-top: 10px;}
.page-quoteInfo.layer-mo .info-section .button-box a{width: 46%; height: 35px; border-radius: 5px; background-color: #868e96; text-align: center; align-content: center; font-size: 14px; font-weight: bold; color: white; }

.page-quoteInfo.layer-mo .detail-section{width:100%; padding: 20px 20px 40px;}
.page-quoteInfo.layer-mo .detail-section h3{font-size: 16px; font-weight: 700; margin-bottom: 10px; line-height: 28px; text-align: center;}
.page-quoteInfo.layer-mo .detail-section table{border-top: 1px solid #868e96; border-bottom: 1px solid #868e96; width: 100%;}
.page-quoteInfo.layer-mo .detail-section table tr{display: flex; flex-wrap: wrap; border-bottom: 1px solid rgba(161,172,183,.35);}
.page-quoteInfo.layer-mo .detail-section table tr:last-child{border-bottom: 0;}
.page-quoteInfo.layer-mo .detail-section table tr th{display: flex; align-items: center; font-size: 11px; font-weight: bold; width: 26%; height:40px; padding: 0 10px; background: #f1f3f5;}
.page-quoteInfo.layer-mo .detail-section table tr td{display: flex; align-items: center; font-size: 10px; font-weight: 500; width: 72%; height: 40px; padding: 0 10px; color: #868e96;}
.page-quoteInfo.layer-mo .detail-section table tr td .slash{margin: 0 3px;}
.page-quoteInfo.layer-mo .detail-section table tr td .slash:last-child{display: none;}
.page-quoteInfo.layer-mo .detail-section table tr.double-th td{width: 24%;}

.page-quoteInfo.layer-mo .graph-section{width:100%; padding: 20px 20px 40px;}
.page-quoteInfo.layer-mo .graph-section h3{font-size: 16px; font-weight: 700; margin-bottom: 10px; line-height: 28px; text-align: center;}
.page-quoteInfo.layer-mo .graph-section .date-box{width: 100%; display: flex; flex-wrap: wrap; border-bottom: 1px solid #212529;}
.page-quoteInfo.layer-mo .graph-section .date-box span{width:20%; height: 26px; font-size: 14px; color: #868e96; display: flex; align-items: center; justify-content: center; border-radius: 4px 4px 0 0;}
.page-quoteInfo.layer-mo .graph-section .date-box span.selected{background-color: #212529; color: white; font-weight: bold;}

.page-quoteInfo.layer-mo .trade-section{width:100%; padding: 20px 20px 60px;}
.page-quoteInfo.layer-mo .trade-section h3{font-size: 16px; font-weight: 700; margin-bottom: 10px; line-height: 28px; text-align: center;}
.page-quoteInfo.layer-mo .trade-section .sort-box {width: 100%; display: flex; justify-content: flex-end;}
.page-quoteInfo.layer-mo .trade-section .sort-box button{color: #868e96; font-size: 12px;}
.page-quoteInfo.layer-mo .trade-section .sort-box .sort-ul{min-width: 100px;}
.page-quoteInfo.layer-mo .trade-section .sort-box .sort-ul .sort-li{font-size: 12px; font-family: "Pretendard", sans-serif; padding: 8px 10px;}
.page-quoteInfo.layer-mo .trade-section table{border-top: 1px solid #868e96; width: 100%; margin-top: 10px; border-collapse: separate; white-space: normal;}
.page-quoteInfo.layer-mo .trade-section table tr th{font-size: 11px; font-weight: bold; height:40px; line-height: 13px; padding: 0; background: #f1f3f5; text-align: center; align-content: center; border-bottom: 1px solid rgba(161, 172, 183, .35); border-right: 1px solid rgba(161, 172, 183, .35); border-top: 0;}
.page-quoteInfo.layer-mo .trade-section table tr th.wd14{width: 14%;}
.page-quoteInfo.layer-mo .trade-section table tr th:first-child{border-left: 0;}
.page-quoteInfo.layer-mo .trade-section table tr th:last-child{border-right: 0;}
.page-quoteInfo.layer-mo .trade-section table tr th.hidden{display: none;}
.page-quoteInfo.layer-mo .trade-section table tr td{font-size: 10px; font-weight: 500;  height: 40px; line-height: 13px; padding: 0; text-align: center; align-content: center; border-bottom: 1px solid rgba(161, 172, 183, .35); border-right: 1px solid rgba(161, 172, 183, .35);}
.page-quoteInfo.layer-mo .trade-section table tr td:first-child{border-left: 0;}
.page-quoteInfo.layer-mo .trade-section table tr td:last-child{border-right: 0;}
.page-quoteInfo.layer-mo .trade-section table tr td.hidden{display: none;}
.page-quoteInfo.layer-mo .trade-section table tr td span.red{color: #C11111;}
.page-quoteInfo.layer-mo .trade-section table tr td span.blue{color: #092CB1;}
.page-quoteInfo.layer-mo .trade-section .add-trade{display: flex; align-items: center; justify-content: space-evenly; width: 150px; height: 35px; border-radius: 5px; background-color: #868e96; font-size: 13px; font-weight: bold; color: white; margin: 0 auto;}


.page-quoteInfo.layer-mo .review-section{padding: 40px 20px; background-color: #f1f3f5;}
.page-quoteInfo.layer-mo .review-section .review-slider{display: flex; flex-wrap: wrap; justify-content: space-around; padding-bottom: 30px;}
.page-quoteInfo.layer-mo .review-section .review-slider .swiper-pagination{bottom: 0 !important;}
.page-quoteInfo.layer-mo .review-section .review-slider .review{width: 360px; height: auto; background-color: white; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: stretch; padding: 20px 20px; }
.page-quoteInfo.layer-mo .review-section .review-slider .review .img-box{width: 48%; height: auto; align-content: center;}
.page-quoteInfo.layer-mo .review-section .review-slider .review .img-box img{width: 100%; height: 100%;}
.page-quoteInfo.layer-mo .review-section .review-slider .review .text-box{width: 48%; height: auto; background-color: #F7F8F8; display: flex; flex-direction: column; flex-wrap: wrap; padding: 8px; position: relative;}
.page-quoteInfo.layer-mo .review-section .review-slider .review .text-box .review-header{width: 100%; display: flex; flex-wrap: wrap; align-items: center; margin-bottom: 6px;}
.page-quoteInfo.layer-mo .review-section .review-slider .review .text-box .review-header .review-type{display: inline-block; font-size: 11px; color: white; background-color: #323529; width: auto; text-align: center; align-content: center; padding: 3px 3px; margin-right: 6px;}
.page-quoteInfo.layer-mo .review-section .review-slider .review .text-box .review-header .text-star{color: #b00020; align-content: center; font-size: 15px; line-height: 14px;}
.page-quoteInfo.layer-mo .review-section .review-slider .review .text-box .review-header .event{color: #868e96; font-size: 12px; line-height: 14px;}
.page-quoteInfo.layer-mo .review-section .review-slider .review .text-box .review-header .review-star{display: flex;}
.page-quoteInfo.layer-mo .review-section .review-slider .review .text-box .review-header .review-star .img-star{background: url(/resources/main/image/img_rating.png) no-repeat; background-position: left bottom; overflow: hidden; width: 100%;}
.page-quoteInfo.layer-mo .review-section .review-slider .review .text-box .review-title{font-size: 11px; color: #868e96; margin-bottom: 4px;}
.page-quoteInfo.layer-mo .review-section .review-slider .review .text-box .review-content{font-size:11px; display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; line-height: 14px;}
.page-quoteInfo.layer-mo .review-section .review-slider .review .text-box .review-content.user{-webkit-line-clamp: 8;}
.page-quoteInfo.layer-mo .review-section .review-slider .review .text-box .review-content.user-content{-webkit-line-clamp: 3;}
.page-quoteInfo.layer-mo .review-section .review-slider .review .text-box .review-store{font-size: 11px; color: #868e96; align-content: center;}
.page-quoteInfo.layer-mo .review-section .review-slider .review .text-box .cut-line{border-bottom: 1px solid black; margin: 10px 0;}
.page-quoteInfo.layer-mo .review-section .review-slider .review .text-box .more{font-size: 10px; color: #868e96; font-weight: bold; position: absolute; right: 0; bottom: 0; padding: 10px;}


/******* 반응형 ******/

@media (max-width: 450px) {
    .page-quoteInfo.layer-mo .review-section .review-slider .review .text-box .review-content{-webkit-line-clamp: 3;}
}
@media (max-width: 400px) {
    .page-quoteInfo.layer-mo .review-section .review-slider .review .text-box .review-content{-webkit-line-clamp: 2;}
    .page-quoteInfo.layer-mo .review-section .review-slider .review .text-box .review-content.user-content{-webkit-line-clamp: 2;}
}

/* 모바일 공통 */
@media (min-width: 320px) and (max-width: 1024px) {
}

/* 테블릿 */
@media (max-width: 1024px) {
}

@media (max-width: 768px) {
}

/* 모바일 */
@media (max-width: 575px) {

}