.blog_page .top .title {
text-align: center;
color: var(--pink);
font-size: 28px;
font-weight: 700;
margin: 50px 0;
}
.blog_loop .box {
background-color: #fff;
border-radius: 25px;
overflow: hidden;
max-width: 430px;
width: 100%;
border: 1px solid #bfbfbf;
-webkit-transition: 0.3s all ease-in-out;
-o-transition: 0.3s all ease-in-out;
transition: 0.3s all ease-in-out;
position: relative;
padding: 0 0 105px;
}
.blog_loop .box .content {
padding: 3% 5%;
}
.blog_loop .box .title {
color: var(--pink);
font-weight: 700;
font-size: 32px;
line-height: 32px;
font-family: "Sofia Sans Extra Condensed", sans-serif;
margin: 0;
}
.blog_loop .box .text {
font-size: 17px;
line-height: 23px;
margin: 20px 0;
}
.blog_loop .date {
font-size: 14px;
color: var(--black);
opacity: .5;
margin: 0 0 15px;
padding: 0 5%;
position: absolute;
bottom: 45px;
}
.blog_loop .date .date-text-1 {
margin: 0 0 2px 0;
}
.blog_loop .box .btn-read {
text-align: center;
padding: 10px 0;
background-color: var(--pink);
font-family: "Sofia Sans Extra Condensed", sans-serif;
color: #fff;
display: block;
font-weight: 600;
font-size: 22px;
letter-spacing: 0.02em;
-webkit-transition: 0.3s all ease-in-out;
-o-transition: 0.3s all ease-in-out;
transition: 0.3s all ease-in-out;
position: absolute;
bottom: 0;
right: 0;
width: 100%;
}
.blog_loop .box:hover {
-webkit-box-shadow: 0 0 10px #89898961;
box-shadow: 0 0 10px #89898961;
}
.blog_loop .box:hover .btn-read {
background-color: #e7519a;
}
.blog_loop {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-ms-flex-direction: row;
flex-direction: row;
-webkit-box-align: stretch;
-ms-flex-align: stretch;
align-items: stretch;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
row-gap: 30px;
}
.line_block {
font-weight: 500;
}
@media only screen and (max-width:1500px) {
.blog_loop .box {
max-width: 32%;
}
.blog_loop .box .title {
font-size: 28px;
line-height: 30px;
}
.blog_loop .box .text {
font-size: 15px;
line-height: 20px;
}
.blog_loop .date {
font-size: 13px;
}
}
@media only screen and (max-width:1024px) {
.blog_loop {
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
gap: 30px;
}
.blog_loop .box {
max-width: 430px;
width: 100%;
}
.blog_loop .box .text {
font-size: 14px;
}
.blog .blog_page .top .title {
font-size: 24px;
}
}