@charset "utf-8"; /* 组件ID */ #cont_char_1400_007 { font-size: 16px; } /* 组件样式 */ .cont_char_1400_007 { padding-bottom: 50px; } .cont_char_1400_007 .cont_char14_7_wid { max-width: 1400px; margin: 0 auto; } .cont_char_1400_007 .cont_char14_7_char {} .cont_char_1400_007 .cont_char14_7_char ul { display: flex; flex-wrap: wrap; justify-content: space-between; } .cont_char_1400_007 .cont_char14_7_char ul li { width: 47.14%; position: relative; z-index: 1; } .cont_char_1400_007 .cont_char14_7_char ul li::before { content: ''; position: absolute; top: 2px; left: -15px; bottom: 2px; right: -15px; background: linear-gradient(90deg, #096DBB 0%, #096DBB 100%); opacity: 0; visibility: hidden; z-index: -1; transition: all 0.5s; } .cont_char_1400_007 .cont_char14_7_char ul li a { display: flex; flex-wrap: wrap; margin: 20px 0; } .cont_char_1400_007 .cont_char14_7_char ul li a .cont_char14_7_pic { width: 198px; height: 210px; margin-right: 30px; position: relative; overflow: hidden; } .cont_char_1400_007 .cont_char14_7_char ul li a .cont_char14_7_pic img { width: 100%; position: absolute; left: 0; top: 0; width: 100%; height: 100%; object-fit: cover; transition: all 0.5s; } .cont_char_1400_007 .cont_char14_7_char ul li:hover a .cont_char14_7_pic img { transform: scale(1.1); } .cont_char_1400_007 .cont_char14_7_char ul li a .cont_char14_7_tx { flex: 1; min-width: 0; padding: 15px 0 0 0; color: #fff; } .cont_char_1400_007 .cont_char14_7_char ul li a .cont_char14_7_tx h3 { font-size: 26px; font-weight: bold; color: #333333; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; word-break: break-all; } .cont_char_1400_007 .cont_char14_7_char ul li a .cont_char14_7_tx h4 { font-size: 18px; color: #0065C8; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; word-break: break-all; margin-top: 20px; } .cont_char_1400_007 .cont_char14_7_char ul li a .cont_char14_7_tx .x { width: calc(100% - 14px); height: 1px; background: #0065c8; margin: 15px 0; position: relative; } .cont_char_1400_007 .cont_char14_7_char ul li a .cont_char14_7_tx .x::after { content: ''; position: absolute; top: -7px; right: -14px; width: 12px; height: 12px; border: 1px solid #0065c8; border-radius: 50%; } .cont_char_1400_007 .cont_char14_7_char ul li a .cont_char14_7_tx p { font-size: 16px; line-height: 30px; height: 120px; color: #666666; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 4; line-clamp: 4; -webkit-box-orient: vertical; } .cont_char_1400_007 .cont_char14_7_char ul li:hover::before { opacity: 1; visibility: visible; } .cont_char_1400_007 .cont_char14_7_char ul li:hover a .cont_char14_7_tx h3, .cont_char_1400_007 .cont_char14_7_char ul li:hover a .cont_char14_7_tx h4, .cont_char_1400_007 .cont_char14_7_char ul li:hover a .cont_char14_7_tx p { color: #fff; } .cont_char_1400_007 .cont_char14_7_char ul li:hover a .cont_char14_7_tx .x { background: #fff; opacity: 0.2; } .cont_char_1400_007 .cont_char14_7_char ul li:hover a .cont_char14_7_tx .x::after { border-color: #fff; } .fyf { text-align: center; font-size: 14px; margin-top: 20px; } /* @media screen and (max-width: 1400px) { .cont_char_1400_007 .cont_char14_7_wid { padding-left: 15px; padding-right: 15px; } } */ @media screen and (max-width: 1024px) { .cont_char_1400_007 .cont_char14_7_char ul li a .cont_char14_7_tx h3 { font-size: 20px; } .cont_char_1400_007 .cont_char14_7_char ul li a .cont_char14_7_tx h4 { font-size: 16px; } .cont_char_1400_007 .cont_char14_7_char ul li a .cont_char14_7_tx p { font-size: 14px; line-height: 26px; height: 104px; } } @media screen and (max-width: 768px) { .cont_char_1400_007 .cont_char14_7_char ul li { width: 100%; } .cont_char_1400_007 .cont_char14_7_char ul li a { margin: 15px 0; } .cont_char_1400_007 .cont_char14_7_char ul li a .cont_char14_7_tx .x::after { width: 8px; height: 8px; top: -5px; right: -10px; } .cont_char_1400_007 .cont_char14_7_char ul li a .cont_char14_7_tx .x { width: calc(100% - 10px); } } @media screen and (max-width: 480px) { .cont_char_1400_007 .cont_char14_7_char ul li a .cont_char14_7_pic { width: 100%; height: auto; margin-right: 0; padding-top: 133.33%; } .cont_char_1400_007 .cont_char14_7_char ul li a .cont_char14_7_tx { flex: none; width: 100%; } .cont_char_1400_007 .cont_char14_7_char ul li a .cont_char14_7_tx h3 { text-align: center; } .cont_char_1400_007 .cont_char14_7_char ul li a .cont_char14_7_tx h4 { margin-top: 10px; } .cont_char_1400_007 .cont_char14_7_char ul li a .cont_char14_7_tx p { height: auto; max-height: 104px; } .cont_char_1400_007 { padding-bottom: 0; } }