body.home #loop-content-area {
width: 70vw;
}
body.home #loop-content-area .loop-content-block {
width: 21.4285714286vw;
}
body.home #loop-content-area .loop-content-block .img-wrap {
width: 21.4285714286vw;
height: 10.7142857143vw;
}
.single-column #loop-content-area.post-lists {
width: 70vw;
}
.single-column #loop-content-area.post-lists .loop-content-block {
width: 21.4285714286vw;
}
.single-column #loop-content-area.post-lists .loop-content-block .img-wrap {
width: 21.4285714286vw;
height: 10.7142857143vw;
}
#loop-content-area,
.alm-listing {
display: flex;
flex-wrap: wrap;
justify-content: flex-start;
gap: 2.6666666667vw;
margin: 0 auto 3.6vw;
}
@media screen and (max-width:1024px) {
#loop-content-area,
.alm-listing {
flex-direction: column;
justify-content: center;
align-items: center;
width: 100%;
gap: 10.2564102564vw 0;
}
#loop-content-area.alm-listing,
.alm-listing.alm-listing {
width: 100% !important;
}
}
#loop-content-area.post-lists,
.alm-listing.post-lists {
width: 56.8vw;
}
@media screen and (max-width:1024px) {
#loop-content-area.post-lists,
.alm-listing.post-lists {
width: 100% !important;
gap: 5.1282051282vw;
}
}
#loop-content-area.post-lists .loop-content-block,
.alm-listing.post-lists .loop-content-block {
width: 16.6666666667vw;
}
@media screen and (max-width:1024px) {
#loop-content-area.post-lists .loop-content-block,
.alm-listing.post-lists .loop-content-block {
width: 89.7435897436vw !important;
min-height: 85.8974358974vw !important;
}
}
#loop-content-area.post-lists .loop-content-block .img-wrap,
.alm-listing.post-lists .loop-content-block .img-wrap {
width: 16.6666666667vw;
height: 8.3333333333vw;
border: 1px solid #000;
}
@media screen and (max-width:1024px) {
#loop-content-area.post-lists .loop-content-block .img-wrap,
.alm-listing.post-lists .loop-content-block .img-wrap {
width: 89.7435897436vw !important;
height: 44.8717948718vw !important;
overflow: hidden;
}
}
#loop-content-area.post-lists .loop-content-block .details .cat-label,
.alm-listing.post-lists .loop-content-block .details .cat-label {
min-width: 7.4666666667vw;
font-size: 0.8vw;
}
@media screen and (max-width:1024px) {
#loop-content-area.post-lists .loop-content-block .details .cat-label,
.alm-listing.post-lists .loop-content-block .details .cat-label {
font-size: 3.0769230769vw;
min-width: 28.7179487179vw;
}
}
#loop-content-area.post-lists .loop-content-block .details .post-date,
.alm-listing.post-lists .loop-content-block .details .post-date {
font-size: 0.9333333333vw;
}
@media screen and (max-width:1024px) {
#loop-content-area.post-lists .loop-content-block .details .post-date,
.alm-listing.post-lists .loop-content-block .details .post-date {
font-size: 3.5897435897vw;
}
}
#loop-content-area.post-lists .loop-content-block .loop-excerpt,
.alm-listing.post-lists .loop-content-block .loop-excerpt {
overflow: hidden;
text-align: left;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 5;
word-break: break-all;
font-size: 0.9333333333vw;
line-height: 1.857em;
padding-bottom: 0.4em;
}
@media screen and (max-width:1024px) {
#loop-content-area.post-lists .loop-content-block .loop-excerpt,
.alm-listing.post-lists .loop-content-block .loop-excerpt {
font-size: 3.5897435897vw;
}
}
#loop-content-area .loop-content-block,
.alm-listing .loop-content-block {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 1.5vw;
width: 24vw;
height: auto;
transition: 0.4s;
}
@media screen and (max-width:1024px) {
#loop-content-area .loop-content-block,
.alm-listing .loop-content-block {
width: 89.7435897436vw !important;
min-height: 85.8974358974vw !important;
}
}
#loop-content-area .loop-content-block:hover,
.alm-listing .loop-content-block:hover {
opacity: 0.7;
}
#loop-content-area .loop-content-block .img-wrap,
.alm-listing .loop-content-block .img-wrap {
width: 24vw;
height: 12vw;
border: 1px solid #000;
overflow: hidden;
}
@media screen and (max-width:1024px) {
#loop-content-area .loop-content-block .img-wrap,
.alm-listing .loop-content-block .img-wrap {
width: 89.7435897436vw !important;
height: 44.8717948718vw !important;
overflow: hidden;
}
}
#loop-content-area .loop-content-block .img-wrap img,
.alm-listing .loop-content-block .img-wrap img {
width: 100%;
}
#loop-content-area .loop-content-block .details,
.alm-listing .loop-content-block .details {
display: flex;
width: 100%;
justify-content: space-between;
align-items: center;
}
#loop-content-area .loop-content-block .details .cat-label,
.alm-listing .loop-content-block .details .cat-label {
box-sizing: border-box;
padding: 0.2666666667vw 1.3333333333vw;
border: 2px solid #AD87ff;
color: #AD87ff;
font-weight: 700;
min-width: 11.2vw;
text-align: center;
font-size: 1.2vw;
}
@media screen and (max-width:1024px) {
#loop-content-area .loop-content-block .details .cat-label,
.alm-listing .loop-content-block .details .cat-label {
font-size: 3.0769230769vw;
min-width: 28.7179487179vw;
}
}
#loop-content-area .loop-content-block .details .cat-label.topic,
.alm-listing .loop-content-block .details .cat-label.topic {
border-color: #1CCC00;
color: #1CCC00;
}
#loop-content-area .loop-content-block .details .cat-label.press,
.alm-listing .loop-content-block .details .cat-label.press {
border-color: #00B1E9;
color: #00B1E9;
}
#loop-content-area .loop-content-block .details .cat-label.finished,
.alm-listing .loop-content-block .details .cat-label.finished {
border-color: #666;
color: #666;
}
#loop-content-area .loop-content-block .details .post-date,
.alm-listing .loop-content-block .details .post-date {
font-size: 1.4vw;
text-align: right;
}
@media screen and (max-width:1024px) {
#loop-content-area .loop-content-block .details .post-date,
.alm-listing .loop-content-block .details .post-date {
font-size: 3.5897435897vw;
}
}
#loop-content-area .loop-content-block .loop-excerpt > p,
.alm-listing .loop-content-block .loop-excerpt > p {
overflow: hidden;
text-align: left;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 5;
word-break: break-all;
font-size: 1.4vw;
}
@media screen and (max-width:1024px) {
#loop-content-area .loop-content-block .loop-excerpt > p,
.alm-listing .loop-content-block .loop-excerpt > p {
font-size: 3.5897435897vw;
}
}
.box_link {
width: 100%;
display: flex;
justify-content: center;
margin: 3.6vw 0;
}
.box_link .link {
box-sizing: border-box;
display: flex;
justify-content: center;
align-items: center;
padding: 1vw;
background: #fff;
border: 0.1vw solid #B2B2B2;
width: 29.5vw;
height: 5vw;
gap: 1vw;
transition: 0.4s;
}
@media screen and (max-width:1024px) {
.box_link .link {
padding: 2.5641025641vw;
width: 75.641025641vw;
height: 12.8205128205vw;
gap: 2.5641025641vw;
}
}
.box_link .link:hover {
opacity: 0.7;
gap: 1.5vw;
}
.box_link .link:hover span.polygon {
background: #b00;
width: 1.5vw;
height: 1.5vw;
}
.box_link .link::before {
background: initial !important;
}
.box_link .link span {
font-size: 2vw;
line-height: 2.6vw;
font-weight: 500;
color: #000;
}
@media screen and (max-width:1024px) {
.box_link .link span {
font-size: 5.1282051282vw;
line-height: 6.6666666667vw;
}
}
.box_link .link span.polygon {
transition: 0.4s;
background: #000;
width: 1vw;
height: 1vw;
-webkit-clip-path: polygon(0% 0%, 0% 100%, 100% 50%);
clip-path: polygon(0% 0%, 0% 100%, 100% 50%);
}
@media screen and (max-width:1024px) {
.box_link .link span.polygon {
width: 2.5641025641vw;
height: 2.5641025641vw;
}
}