﻿.pj-list{}
.pj-item {
 margin-bottom: 20px;
  
}

.pj-item a {
  text-decoration: none;
  background: #fff;
  display: flex;
  height: 100%;
  color: #666;
  transition: all 0.5s;
}

.pj-itm-img {
	 position: relative;
  overflow: hidden;
    border-radius: 20px;
    margin: 0;
    width: 30%;
}
.pj-itm-img img {
width: 100%;
    height: 100%;
    border-radius: 20px;
    padding: 5px;
    transition: all 0.5s;
    object-fit: cover;
}

.pj-itm-img::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 9999;
  padding: 5px;
  border-radius: inherit;
  background: linear-gradient(90deg, rgba(175, 19, 11, 1) 15%, rgba(154, 17, 14, 1) 50%, rgba(129, 14, 17, 1) 100%);
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
}
.pj-itm-main {
	width: 70%;
  padding: 0 0 0 30px;
}
.pj-itm-ttl {
 text-transform: uppercase;
    font-size: 26px;
    line-height: 1.4;
    margin: 0;
    color: var(--mcolor);
    font-weight: bold;
}
.pj-itm-info {
  font-size: 16px;
    margin: 0 0 15px;
  position: relative;
  display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.pj-itm-more {
	width: 120px;
    position: relative;
    background: var(--mcolor);
    color: #fff;
    padding: 8px 14px;
    border-radius: 15px;
    text-decoration: none;
    font-size: 13px;
    display: inline-block;
    margin-bottom: 0;
	
}
.pj-itm-more:before {
    content: "";
    background: url(/assets/images/icon_next.png) no-repeat left center;
    background-size: 10px;
    padding: 5px 10px;
}

.pj-item a:hover .pj-itm-img img {
	transform:scale(1.1,1.1);
  
}
/*.pj-itm-info:before {
  content: '';
  position: absolute;
  width: 6px;
  height: 6px;
  background: #8dc63f;
  border-radius: 50%;
  left: 0;
  top: 11px;
}*/
@media screen and (max-width:480px){
	.pj-itm-img{width:40%;}
	.pj-itm-ttl{font-size: 14px;margin-bottom: 5px;}
	.pj-itm-main{padding: 0px 0 0 15px;width:60%;}
	.pj-itm-info{font-size: 13px;margin: 0;}
	.pj-itm-more{display:none;
	width: auto;
        padding: 5px 15px 5px 10px;
        font-size: 10px;
	}
	.pj-itm-img::before{padding: 3px;}
	.pj-itm-more:before {
    content: "";
    background-size: 8px;
    padding: 5px 7px;
}
}