@charset "utf-8";
@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/pretendard.css');
@font-face {
  font-family: "Digital_Font";
  src: url("/resources/main/font/Digital_Font.ttf");
}

.page-main.layer-mo{font-family: "Pretendard", sans-serif; color: #212529;}
.page-main.layer-mo .section{padding: 0;}

.page-main.layer-mo .banner-section{position: relative;}
.page-main.layer-mo .banner-section .banner-pagination{position: absolute; right: 0; bottom: 0; width: 50px; height: 20px; background-color: rgba(0, 0, 0, 0.5); color: white; font-size: 12px; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; z-index: 1000;}
.page-main.layer-mo .banner-section .banner-pagination .pagination-count{}
.page-main.layer-mo .banner-section .banner-pagination .pagination-totalCount{color:#ababab;}

.page-main.layer-mo .menu-list-section{width: 100%; min-height: 100px; display: flex; flex-wrap: wrap; justify-content: space-between; padding: 40px 18px 30px; }
.page-main.layer-mo .menu-list-section .menu{width: 60px; display: flex; flex-direction: column; align-items: center; margin-bottom: 5px;}
.page-main.layer-mo .menu-list-section .menu .menu-icon{width: 56px; height: 56px; border-radius: 5px; background-color: #f1f3f5; align-content: center; text-align: center;}
.page-main.layer-mo .menu-list-section .menu .menu-title{font-size: 12px; padding: 6px 0;}
.page-main.layer-mo .menu-list-section .menu .menu-icon.hot-deal{background-color: #b00020;}
.page-main.layer-mo .menu-list-section .menu .menu-icon.hot-deal p{width: 100%; height: 100%; text-align: center; align-content: center; color: white; font-weight: bold; line-height: 18px;}

.page-main.layer-mo .new-item-section{background-color: #f1f3f5; padding: 40px 20px;}
.page-main.layer-mo .new-item-section .new-item-slider{display: flex; flex-wrap: wrap; justify-content: space-around; padding-bottom: 30px;}
.page-main.layer-mo .new-item-section .new-item-slider .swiper-pagination{bottom: 0 !important;}
.page-main.layer-mo .new-item-section .item{width: 48%; height: auto; display: flex; flex-wrap: wrap;}
.page-main.layer-mo .new-item-section .item .img-box{width: 100%; height: 240px; background-color: white; position: relative;}
.page-main.layer-mo .new-item-section .item .img-box .new{width: 25px; height: 25px; text-align: center; align-content: center; border-radius: 50%; background-color: #b00020; font-size: 10px; color: white; font-weight: bold; position: absolute; top: 12px; left: 12px;}
.page-main.layer-mo .new-item-section .item .text-box{width: 100%; padding: 10px 14px;}
.page-main.layer-mo .new-item-section .item .text-box span{width: 100%; display: block; line-height: 15px;}
.page-main.layer-mo .new-item-section .item .text-box span.brand{font-size: 14px; font-weight: bold; color: #212529;}
.page-main.layer-mo .new-item-section .item .text-box span.model{font-size: 12px; color: #868e96; text-overflow: ellipsis; overflow: hidden; white-space: nowrap;}
.page-main.layer-mo .new-item-section .item .text-box span.salePrice{font-size: 15px; font-weight: 900; font-family: "Lato",sans-serif; color: #212529;}


.page-main.layer-mo .graph-section {background-color: #212529; display: flex; flex-direction: column; align-items: center; padding: 40px 20px;}
.page-main.layer-mo .graph-section .section-title{color: #fff05c;}
.page-main.layer-mo .graph-section .section-subTitle{color: white; font-weight: 500;}
.page-main.layer-mo .graph-section .chart-box{width: 100%; display: none; flex-direction: column; align-items: center;}
.page-main.layer-mo .graph-section .chart-box.view{display: flex;}
.page-main.layer-mo .graph-section .chart-box .img-box{width: 160px; height: 200px; }
.page-main.layer-mo .graph-section .chart-box .brand{font-size: 15px; font-weight: bold; color: white; line-height: 18px;}
.page-main.layer-mo .graph-section .chart-box .model{font-size: 13px; color: white; letter-spacing: -1px; line-height: 14px;}
.page-main.layer-mo .graph-section .chart-box .rate{font-size: 15px; color: white; font-weight: bold; line-height: 28px;}
.page-main.layer-mo .graph-section .chart-box .rate.up{color: #fff05c;}
.page-main.layer-mo .graph-section .chart-box .chart{margin-bottom: 10px;}
.page-main.layer-mo .graph-section .chart-box .retail-value{width: 60%; display: flex;flex-wrap: wrap; justify-content: space-between; font-size: 15px; font-weight: bold; color: white; margin-bottom: 2px;}
.page-main.layer-mo .graph-section .chart-box .resell-value{width: 60%; display: flex;flex-wrap: wrap; justify-content: space-between; font-size: 15px; font-weight: bold; color: #fff05c;}

.page-main.layer-mo .review-section{padding: 40px 20px; background-color: #f1f3f5;}
.page-main.layer-mo .review-section .review-slider{display: flex; flex-wrap: wrap; justify-content: space-around; padding-bottom: 30px;}
.page-main.layer-mo .review-section .review-slider .swiper-pagination{bottom: 0 !important;}
.page-main.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-main.layer-mo .review-section .review-slider .review .img-box{width: 48%; height: auto; align-content: center;}
.page-main.layer-mo .review-section .review-slider .review .img-box img{width: 100%; height: 100%;}
.page-main.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-main.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-main.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-main.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-main.layer-mo .review-section .review-slider .review .text-box .review-header .event{color: #868e96; font-size: 12px; line-height: 14px;}
.page-main.layer-mo .review-section .review-slider .review .text-box .review-header .review-star{display: flex;}
.page-main.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-main.layer-mo .review-section .review-slider .review .text-box .review-title{font-size: 11px; color: #868e96; margin-bottom: 4px;}
.page-main.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-main.layer-mo .review-section .review-slider .review .text-box .review-content.user{-webkit-line-clamp: 8;}
.page-main.layer-mo .review-section .review-slider .review .text-box .review-content.user-content{-webkit-line-clamp: 3;}
.page-main.layer-mo .review-section .review-slider .review .text-box .review-store{font-size: 11px; color: #868e96; align-content: center;}
.page-main.layer-mo .review-section .review-slider .review .text-box .cut-line{border-bottom: 1px solid black; margin: 10px 0;}
.page-main.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;}

.page-main.layer-mo .youtube-section{padding: 40px 20px; }
.page-main.layer-mo .youtube-section .youtube-slider{display: flex; flex-wrap: wrap; justify-content: space-around; width: 100%; padding-bottom: 30px;}
.page-main.layer-mo .youtube-section .youtube-slider .swiper-pagination{bottom: 0 !important;}
.page-main.layer-mo .youtube-section .youtube-slider .youtube{width: 100%; flex-wrap: wrap;}
.page-main.layer-mo .youtube-section .youtube-slider .youtube .img-box{width: 100%; }
.page-main.layer-mo .youtube-section .youtube-slider .youtube .text-box{width: 100%; display: flex; flex-wrap: wrap;  justify-content: space-between; margin-top: 14px; padding: 0 10px;}
.page-main.layer-mo .youtube-section .youtube-slider .youtube .text-box .youtube-title{font-size: 11px; letter-spacing: 0; color: #212529; width: 65%; text-overflow: ellipsis; overflow: hidden; white-space: nowrap;}
.page-main.layer-mo .youtube-section .youtube-slider .youtube .text-box p{font-size: 11px; letter-spacing: 0; color: #868e96; width: 35%; text-align: right;}

.page-main.layer-mo .cf-section{padding: 40px 20px; background-color: #f1f3f5; }
.page-main.layer-mo .cf-section .video-box{width: 100%; display: flex; justify-content: center;}
.page-main.layer-mo .cf-section .video-box #cf{width: 100%;}

.page-main.layer-mo .sns-section{padding: 40px 20px;}
.page-main.layer-mo .sns-section .sns-list{width: 100%; display: flex; justify-content: center;}
.page-main.layer-mo .sns-section .sns-list .sns{width: 40px; height: 40px; border-radius: 5px; background-color: #495057; margin: 0 5px;}
.page-main.layer-mo .sns-section .sns-list .sns a{width: 100%; height: 100%; display: block; text-align: center; align-content: center;}
.page-main.layer-mo .sns-section .sns-list .sns a img{width: 30px; height: 30px;}

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