:root {
--column-gap: 20px;
--HHEIGHT: 400px;
--MHEIGHT: 300px;
--LHEIGHT: 220px;
}
ul.container {
padding: 0;
list-style: none;
}
.line.one {
height: 10px;
width: 117px;
background-color: var(--e-global-color-secondary);
} .container {
display: flex;
column-gap: var(--column-gap);
flex-direction: row;
--column-gap: 20px;
}
.container.duohang {
flex-wrap: wrap;
}
.container.duohang>.element {
margin-bottom: var(--column-gap);
}
.container.zuo {
text-align: start;
}
.container.juzhong {
text-align: center;
}
.container.you {
text-align: end;
}
.container.shu {
flex-direction: column;
}
.container.sxdq {
align-items: center;
}
.container.denggao {
align-items: stretch;
}
.container.dbdq {
align-items: flex-end;
}
.container.zydq {
justify-content: space-between;
}
.container.zydq:after {
content: '';
margin-right: auto;
}  .container.jianju-da {
--column-gap: 40px;
}
.container.jianju-zhong {
--column-gap: 20px;
}
.container.jianju-xiao {
--column-gap: 10px;
}
.container.jianju-wu {
--column-gap: 0px;
}  .container>.element {}
.container>.element.is-1 {
flex: 0 0 100%;
}
.container>.element.is-2 {
flex: 0 0 calc(50% - var(--column-gap) / 2);
}
.container>.element.is-3 {
flex: 0 0 calc(100% / 3 - var(--column-gap) * 2 / 3);
}
.container>.element.is-4 {
flex: 0 0 calc(25% - var(--column-gap) * 3 / 4);
}
.container>.element.is-5 {
flex: 0 0 calc(20% - var(--column-gap) * 4 / 5);
}
.container>.element.is-6 {
flex: 0 0 calc(100% / 6 - var(--column-gap) * 5 / 6);
}
.container>.element.flex-2 {
flex: 0 0 20%;
}
.container>.element.flex-4 {
flex: 0 0 40%;
}
.container>.element.flex-6 {
flex: 0 0 60%;
} .title {
color: var(--e-global-color-primary);
font-family: var(--e-global-typography-6ed476c-font-family), Sans-serif;
font-size: var(--e-global-typography-6ed476c-font-size);
font-weight: var(--e-global-typography-6ed476c-font-weight);
text-transform: var(--e-global-typography-6ed476c-text-transform);
line-height: var(--e-global-typography-6ed476c-line-height);
letter-spacing: var(--e-global-typography-6ed476c-letter-spacing);
word-spacing: var(--e-global-typography-6ed476c-word-spacing);
}
.title.medium {
font-size: 24px;
}
.title.large {
font-size: 30px;
}
.title.exlarge {
font-size: 36px;
}
.title.bold {
font-weight: 700;
}
.title.semi-bold {
font-weight: 600;
}
.title.middle {
font-weight: 500;
} .image_box {} .breadcrumb_box {
color: var(--e-global-color-text);
font-family: var(--e-global-typography-text-font-family), Sans-serif;
font-size: var(--e-global-typography-text-font-size);
font-weight: var(--e-global-typography-text-font-weight);
line-height: var(--e-global-typography-text-line-height);
}
.breadcrumb_box span {
opacity: .5;
color: #000;
}
.breadcrumb_box a.breadcrumb_item:after {
content: '»';
margin: 0 6px;
}
.category_box {
position: relative;
background-color: #fff;
}
.category_box:hover .image .cover_img {
opacity: 1;
}
.category_box:hover .image .cat_image {
opacity: 0;
}
.category_box .image .cat_image {
opacity: 1;
transition: all .4s;
}
.category_box .image .cover_img {
position: absolute;
width: 100%;
height: 100%;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
transition: all .4s;
object-fit: cover;
opacity: 0;
}
.category_box .content {
padding: 20px;
position: absolute;
top: 20px;
left: 20px;
color: #2F2F2F;
z-index: 2;
width: 60%;
font-family: var(--e-global-typography-ba7eb5a-font-family), Sans-serif;
font-size: var(--e-global-typography-text-font-size);
font-weight: var(--e-global-typography-text-font-weight);
}
.category_box .content h3 {
margin: 0;
font-size: var(--e-global-typography-a9a3c74-font-size);
font-weight: var(--e-global-typography-0009af8-font-weight);
}
.category_box .content .description {
overflow: hidden;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
}
.category_box .content:after {
content: '';
width: 100%;
height: 100%;
background-color: transparent;
transition: all .4s;
position: absolute;
left: 0;
top: 0;
border-radius: 5px;
}
.category_box:hover .content:after {
opacity: 0.9;
z-index: -1;
background-color: var(--e-global-color-primary);
}
.category_box:hover .content,
.category_box:hover .title {
color: #fff;
transition: all .4s;
}
.category_box .content.light,
.category_box .content.light .title {
color: #fff;
}
.category_box .content .read_more {
background-color: var(--e-global-color-primary);
font-size: var(--e-global-typography-ba7eb5a-font-size);
font-weight: var(--e-global-typography-ba7eb5a-font-weight);
padding: 8px 30px;
display: inline-block;
color: #fff;
border-radius: 5px;
margin-top: 20px;
}
.category_box:hover .content .read_more {
color: var(--e-global-color-primary);
background-color: #fff;
}