@charset 'utf-8';

/* category
------------------------------------------------ */
.category--list{ padding-top: 35px; }
.category--list li{ position: relative; }
.category--list li > a{ display: flex; flex-wrap: wrap; }
.category--item-title{font-size: 2.2rem; font-weight: 400; font-family: 'Koulen', cursive; line-height: normal; color:#121212; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; }
.category--item-thumb{ width: 324px; height: 221px; border:1px solid #8B8B8B; overflow: hidden; }
.category--item-thumb img{ transition: .5s ease; width: 100%; height: 100%; object-fit: cover; object-position: center center; }
.category--item-thumb:hover img{ transform: scale(1.2); }
.category--item-desc{ padding-bottom: 25px; position: relative; padding-left: 36px; width: calc(100% - 324px); }
.category--item-date{ display: block; font-size: 1.8rem; font-weight: 400; font-family: 'Content', cursive; color:#777777; }
.category--item-txt{ margin-top: 9px; font-size: 1.8rem; font-weight: 400; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 3; line-clamp: 3; -webkit-box-orient: vertical; color:#777777; }
.category--item-read{ position: absolute; bottom: 0; display: flex; flex-wrap: wrap; align-items: center; line-height: 1; }
.category--list li{ position: relative; }
.category--item-desc:hover .category--item-date,
.category--item-desc:hover .category--item-txt,
.category--item-desc:hover .category--item-title{ color:#0F5FAD; }

.view-counter{ padding-top: 1px; }
.view-counter i{}
.view-counter span{ margin-left: 10px; font-size: 1.8rem; line-height: 1; color:#777777; font-family: 'Noto Sans', sans-serif; }

.pld-like-dislike-wrap{ line-height: 1; }
.pld-like-dislike-wrap .pld-common-wrap{ min-width: 110px !important; font-size: 1.8rem;  }
.pld-like-dislike-wrap{ margin: 0 !important; }
.pld-count-wrap{ font-family: 'Noto Sans', sans-serif; }


@media only screen and (min-width: 768px) {
    .category--list li+li{ margin-top: 30px; }
    .category--item-read .view-counter i{ width: 22px; }
    .category--item-read{ padding-left: 36px; width: calc(100% - 324px); right: 0; }
}
@media only screen and (max-width: 1024px) and (min-width: 768px) {
    .category--item-thumb{ width: 23.7188872621vw; height: 16.1786237189vw; }
    .category--item-desc{ padding-left: 20px; width: calc(100% - 23.7188872621vw); }
    .category--item-read{ padding-left: 20px; width: calc(100% - 23.7188872621vw);  }
    .pld-like-dislike-wrap .pld-common-wrap{ min-width: 60px !important; }
}

@media only screen and (max-width: 767px) {	
    .category--list{ padding-top: 17px; }
    .category--list li:nth-child(-n+2) > a{ flex-direction: column; }
    .category--list li:nth-child(2){ margin-top: 20px; }
    .category--list li:nth-child(3){ margin-top: 20px; }
    .category--list li:not(:nth-child(-n+3)){ margin-top: 19px; }
    .category--list li:nth-child(-n+2) .category--item-thumb{ margin: 0 auto; width: 72vw; height: 47.7333333333vw; border-radius: 2px; }
    .category--list li:nth-child(-n+2) .category--item-desc{ padding: 0 0 20px; width: 100%; margin-top: 18px; }
    .category--list li:nth-child(-n+2) .category--item-title{ margin-top: 2px; font-size: 1.8rem; }

    .category--list li:not(:nth-child(-n+2)) .category--item-thumb{ width: 121px; height: 80px; border-radius: 2px; }
    .category--list li:not(:nth-child(-n+2)) .category--item-desc{ padding-left: 10px; padding-bottom: 15px; width: calc(100% - 121px); }
    .category--list li:not(:nth-child(-n+2)) .category--item-title{ font-size: 1.4rem; }
    .category--list li:not(:nth-child(-n+2)) .category--item-txt{ display: none; }

    .category--item-date{ font-size: 1rem; }
    .category--item-txt{ margin-top: 6px; font-size: 1.3rem; }

    .category--item-read{ bottom:-4px; }
    .view-counter{ display: inline-flex; align-items: center; }
    .category--list li:nth-child(-n+2) .category--item-read{ left: 0; }
    .category--list li:nth-child(-n+2) .pld-like-dislike-wrap .pld-common-wrap{ font-size: 1.1rem; min-width: 65px !important; }
    .category--list li:nth-child(-n+2) .pld-like-trigger i{ font-size: 1.4rem; }
    .category--list li:nth-child(-n+2) .view-counter i{ width: 14px; }
    .category--list li:nth-child(-n+2) .view-counter span{ font-size: 1.1rem; }

    .category--list li:not(:nth-child(-n+2)) .category--item-read{ padding-left: 10px; width: calc(100% - 121px); right: 0; }
    .category--list li:not(:nth-child(-n+2))  .pld-like-dislike-wrap .pld-common-wrap{ min-width: 40px !important; margin-right: 7px; font-size: 0.9rem; }
    .category--list li:not(:nth-child(-n+2)) .view-counter i{ padding-top: 5px; width: 11px; }
    .category--list li:not(:nth-child(-n+2)) .view-counter span{ font-size: 0.9rem; margin-left: 6px; }
    
}