.pchead .nav li:nth-child(4) .navs span::after { transform: scale(1); } .aa { position: relative; z-index: 6; background: #fff; } .aa .aanavs { background: #fff; } .aa .aanavs .inwrap .navBox a { float: left; display: block; width: 33.333333%; line-height: 50px; font-size: 16px; color: #4d4d4d; text-align: center; position: relative; } .aa .aanavs .inwrap .navBox a::after { transition: all .5s; content: ""; display: block; width: 100%; height: 2px; height: 3px; background: #ee9655; position: absolute; left: 0; bottom: -2px; transform: scale(0); } .aa .aanavs .inwrap .navBox a:hover::after, .aa .aanavs .inwrap .navBox .actA::after { transform: scale(1); } .bb { padding-top: 90px; position: relative; z-index: 6; background: #fff; margin-bottom: 440px; } .bb .inwrap .caseUl { border-bottom: 1px solid #e6e6e6; margin-bottom: 44px; } .bb .inwrap .caseUl a { display: block; width: 32.448573%; margin-right: 1.3271405%; float: left; } .bb .inwrap .caseUl a .imgBox { position: relative; } .bb .inwrap .caseUl a .imgBox .mask { position: absolute; left: 0; top: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, 0.5); transition: all .5s; opacity: 0; transform: scale(0); z-index: 10; } .bb .inwrap .caseUl a .imgBox .infoBox { position: absolute; left: 0; right: 0; top: 0; bottom: 0; text-align: center; margin-top: 18%; transition: all .5s; transform: scale(1.4); opacity: 0; z-index: 10; } .bb .inwrap .caseUl a .imgBox .infoBox .tcase { font-size: 18px; line-height: 16px; letter-spacing: 14px; color: #f2c21e; } .bb .inwrap .caseUl a .imgBox .infoBox .caseName { width: 80%; font-size: 20px; line-height: 1.5; color: #fff; margin: 0 auto; margin-top: 4.703%; } .bb .inwrap .caseUl a .imgBox .infoBox .icon { margin: 0 auto; margin-top: 6.5439%; width: 45px; height: 45px; background: url(../images/case_02.png); background-size: 100% 100%; } .bb .inwrap .caseUl a .title { line-height: 88px; font-size: 18px; overflow: hidden; height: 88px; text-overflow: ellipsis; -ms-text-overflow: ellipsis; white-space: nowrap; } .bb .inwrap .caseUl a .caseImg { display: block; width: 100%; } .bb .inwrap .caseUl a:hover .imgBox .mask { opacity: 1; transform: scale(1); } .bb .inwrap .caseUl a:hover .imgBox .infoBox { transform: scale(1); opacity: 1; } .bb .inwrap .caseUl a:last-child { margin-right: 0; } .bb .inwrap .caseUl:last-child { margin-bottom: 0; } @media screen and (min-width: 1280px) and (max-width: 1366px) { .bb .inwrap .caseUl a .title { line-height: 60px; font-size: 14px; } .bb .inwrap .caseUl a .imgBox .infoBox .tcase{ font-size: 14px; } .bb .inwrap .caseUl a .imgBox .infoBox .caseName{ font-size: 18px; width: 90%; } .bb .inwrap .caseUl a .imgBox .infoBox{ margin-top: 13%; } .bb .inwrap .caseUl a .imgBox .infoBox .icon{ width: 35px; height: 35px; margin-top: 4%; } } @media screen and (max-width: 1024px) { .aa .aanavs .inwrap .navBox a { line-height: 42px; font-size: 14px; } .bb { padding-top: 6%; margin-bottom: 0!important; } .bb .inwrap .caseUl { border-bottom: 1px solid #e6e6e6; margin-bottom: 44px; display: flex; justify-content: space-between; flex-wrap: wrap; } .bb .inwrap .caseUl a { display: block; width: 32%; margin-right: 2%; margin-bottom: 2%; } .bb .inwrap .caseUl a:nth-child(3n){ margin-right: 0; } .bb .inwrap .caseUl a .imgBox { position: relative; } .bb .inwrap .caseUl a .imgBox .mask { display: none; position: absolute; left: 0; top: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, 0.5); transition: all .5s; opacity: 0; transform: scale(0); } .bb .inwrap .caseUl a .imgBox .infoBox { display: none; position: absolute; left: 0; right: 0; top: 0; bottom: 0; text-align: center; margin-top: 18%; transition: all .5s; transform: scale(1.4); opacity: 0; } .bb .inwrap .caseUl a .imgBox .infoBox .tcase { font-size: 18px; line-height: 16px; letter-spacing: 14px; color: #f2c21e; } .bb .inwrap .caseUl a .imgBox .infoBox .caseName { font-size: 20px; line-height: 1; color: #fff; margin-top: 4.703%; } .bb .inwrap .caseUl a .imgBox .infoBox .icon { margin: 0 auto; margin-top: 6.5439%; width: 45px; height: 45px; background: url(../images/case_02.png); background-size: 100% 100%; } .bb .inwrap .caseUl a .title { line-height: 44px; font-size: 14px; height: 44px; } .bb .inwrap .caseUl a .caseImg { display: block; width: 100%; } .bb .inwrap .caseUl a:hover .imgBox .mask { opacity: 1; transform: scale(1); } .bb .inwrap .caseUl a:hover .imgBox .infoBox { transform: scale(1); opacity: 1; } .bb .inwrap .caseUl a:last-child { margin-right: 0; } .bb .inwrap .caseUl:last-child { margin-bottom: 0; } } @media screen and (max-width:768px){ .bb .inwrap .caseUl a { display: block; width: 100%; margin-right: 0; float: none; margin-bottom: 6%; } .bb .inwrap .caseUl a .imgBox { position: relative; } .bb .inwrap .caseUl a .imgBox .mask { display: none; position: absolute; left: 0; top: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, 0.5); transition: all .5s; opacity: 0; transform: scale(0); } .bb .inwrap .caseUl a .imgBox .infoBox { display: none; position: absolute; left: 0; right: 0; top: 0; bottom: 0; text-align: center; margin-top: 18%; transition: all .5s; transform: scale(1.4); opacity: 0; } .bb .inwrap .caseUl a .imgBox .infoBox .tcase { font-size: 18px; line-height: 16px; letter-spacing: 14px; color: #f2c21e; } .bb .inwrap .caseUl a .imgBox .infoBox .caseName { font-size: 20px; line-height: 1; color: #fff; margin-top: 4.703%; } .bb .inwrap .caseUl a .imgBox .infoBox .icon { margin: 0 auto; margin-top: 6.5439%; width: 45px; height: 45px; background: url(../images/case_02.png); background-size: 100% 100%; } .bb .inwrap .caseUl a .title { line-height: 44px; font-size: 14px; height: 44px; } .bb .inwrap .caseUl a .caseImg { display: block; width: 100%; } .bb .inwrap .caseUl a:hover .imgBox .mask { opacity: 1; transform: scale(1); } .bb .inwrap .caseUl a:hover .imgBox .infoBox { transform: scale(1); opacity: 1; } .bb .inwrap .caseUl a:last-child { margin-right: 0; } .bb .inwrap .caseUl:last-child { margin-bottom: 0; } }