.m_project { width:100%; display:inline-block; position: relative; } .m_project_l { float:left; width:25.3125%; position: relative; height: 791px; } .m_project_l>img { height: 100%; width: -webkit-fill-available; } .m_project_l .nei { padding:95px 75px 55px 125px; position: absolute; top: 0; left: 0; width: 100%; } .m_project_l .nei h3 { font-size:36px; color:#fff; font-weight:400; width:100%; display:inline-block; display:flex; justify-content:left; align-items:center; } .m_project_l .nei h3 img { float:left; max-height:40px; margin:0px; } .m_project_l .nei h3 span { float:left; font-size:36px; color:#fff; margin-left:10px; } .m_project_l .nei p { font-size:16px; color:#fff; line-height:26px; margin-top:40px; } .m_project_l .nei .swiper-pagination { bottom:0px; left:125px; } .m_project_l .nei .swiper-pagination-bullet { width:12px; height:12px; opacity:0.2; margin-right:8px; } .m_project_l .nei .swiper-pagination-bullet-active { opacity:1; background:#fff; } .m_project_l .moree { display: inline-block; border: 1px solid #fff; width: 140px; height: 46px; line-height: 46px; text-align: center; font-size: 14px; color: #fff; margin-top: 30px; transition:0.5s all; } .m_project_l .moree:hover { background:#fff; color:var(--xc1); transition:0.5s all; } .home-container { width: 74.6875%; height: 791px; } .m_project_c { float:left; width:53.277545%; line-height:0; } .m_project_c .up { width:100%; display:inline-block; height: 50%; } .m_project_c .up li { float:left; width:50%; position:relative; overflow:hidden; } .m_project_c .up li>img { width:100%; transition:1s; height: 100%; } .m_project_c .up li:hover>img { transform:scale(1.1); } .m_project_c .up li .text { position:absolute; bottom:0px; left:0px; width:100%; padding:0px 6.5%; height:13%; transition:1s; } .m_project_c .up li:hover .text { width:100%; height:100%; background:rgba(0,0,0,0.7); padding:20% 6.5%; } .m_project_c .up li .text h3 { font-weight:400; font-size:18px; color:#ddd; overflow:hidden; text-overflow:ellipsis; white-space: nowrap; } .m_project_c .up li .text p { margin-top:35px; font-size:14px; color:#fff; line-height:26px; height:56px; display: -webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; overflow: hidden; } .m_project_c .up li .text h4 { font-weight:400; width:100%; margin-top:30px; display:inline-block; text-align:left; } .m_project_c .up li .text h4 a { display:inline-block; width:80px; height:40px; line-height:40px; text-align:center; border:1px solid rgba(255,255,255,0.3); font-size:12px; color:#fff; } .m_project_c .up li .text h4 a:hover { background:#fff; color:#813b85; } .m_project_c .down { width:100%; display:inline-block; position:relative; overflow:hidden; height: 50%; } .m_project_c .down>img { width:100%; transition:1s; height: 100%; } .m_project_c .down:hover>img { transform:scale(1.1); } .m_project_r { float:right; width:46.722455%; position:relative; overflow:hidden; height: 100%; } .m_project_r>img { width:100%; transition:1s; height: 100%; } .m_project_r:hover>img { transform:scale(1.1); } .m_project .text { position:absolute; bottom:0px; left:0px; width:100%; padding:0px 6.5%; height:13%; transition:1s; } .m_project .text h3 { font-weight:400; font-size:18px; color:#fff; overflow:hidden; text-overflow:ellipsis; white-space: nowrap; } .m_project .text p { margin-top:35px; font-size:14px; color:#fff; line-height:26px; height:56px; display: -webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; overflow: hidden; } .m_project .text h4 { font-weight:400; width:100%; margin-top:30px; display:inline-block; text-align:left; } .m_project .text h4 a { display:inline-block; width:80px; height:40px; line-height:40px; text-align:center; border:1px solid rgba(255,255,255,0.3); font-size:12px; color:#fff; } .m_project .text h4 a:hover { background:#fff; color:#813b85; } .m_project .m_project_c .down:hover .text { width:100%; height:100%; background:rgba(0,0,0,0.7); padding:10% 6.5%; } .m_project .m_project_c .down .text h4 a:hover { background:#fff; color:#813b85; } .m_project .m_project_r .text { height:7%; } .m_project .m_project_c .down .text { height:30%; } .m_project .m_project_r:hover .text { width:100%; height:100%; background:rgba(0,0,0,0.7); padding:20% 6.5%; } .m_project .m_project_r:hover .text h4 a:hover { background:#fff; color:#813b85; } @media (min-width:1365px) and (max-width:1441px) { .m_project_c .up li .text p { margin-top:25px; } .m_project .text p { margin-top:25px; } .m_project_l .more { top: 68%; padding: 0px 75px 0px 56px; } .m_project_l .nei { padding: 95px 75px 55px 58px; } .m_project_l .nei .swiper-pagination { left: 57px; } } @media (width:1440px) { .m_project_l { height: 593px; } .m_project_l>img { height: 100%; } .m_project_r>img { height: 593px; } } @media (max-width:1441px) { .m_project_l { height: 593px; } .m_project_l>img { height: 100%; } .m_project_r>img { height: 593px; } } @media (min-width:1365px) and (max-width:1380px) { .m_project_l { height: 561px; } .m_project_l>img { height: 100%; } .m_project_r>img { height: 561px; } } @media (min-width:1442px) and (max-width:1680px) { .m_project_l .more { top: 48%; padding: 0px 75px 0px 56px; } .m_project_l .nei { padding: 95px 75px 55px 58px; } .m_project_l .nei .swiper-pagination { left: 57px; } .m_project_c .up li .text p { margin-top:25px; } .m_project .text p { margin-top:25px; } } @media (min-width:1279px) and (max-width:1364px) { .m_project_l .nei { padding: 30px; } .m_project_l .nei .swiper-pagination { left: 27px; } .m_project_l .more { padding: 0 75px 0px 24px; top: 50%; } } @media (min-width:1680px) and (max-width:1919px) { .m_project_l { height: 692px; } .home-container { height: 692px; } } @media (min-width:1600px) and (max-width:1679px) { .m_project_l { height: 659px; } .home-container { height: 659px; } } @media (min-width:1440px) and (max-width:1599px) { .m_project_l { height: 593px; } .home-container { height: 593px; } } @media (min-width:1366px) and (max-width:1439px) { .m_project_l { height: 561px; } .home-container { height: 561px; } } @media (min-width:1360px) and (max-width:1365px) { .m_project_l { height: 559px; } .home-container { height: 559px; } } @media (min-width:1280px) and (max-width:1359px) { .m_project_l { height: 525px; } .home-container { height: 525px; } } @media screen and (max-width:768px) { .m_project .m_project_c .down .text{ height: 14%; } .m_project .text p{ margin-top: 20px; } .m_project .text h4{ margin-top: 10px; } }