.text-desc{ position: absolute; left: 0; top: 0; background-color: #014da1; height: 100%; opacity: 0; width: 100%; padding: 20px; } .port-1{ float: left; width: 100%; position: relative; overflow: hidden; text-align: center; border: 4px solid rgb(255, 255, 255); max-width: 448px; } .port-1 .text-desc{ opacity: 0.8; top: -100%; transition: 0.5s; color: #fff; padding: 20% 30px; } .port-1 img{ transition: 0.5s; max-width: 440px; width: 100%; } .port-1:hover img{ transform: scale(1.05); } .port-1.effect-1:hover .text-desc{ top: 0; } .port-1.effect-2 .text-desc{ top: auto; bottom: -100%; } .port-1.effect-2:hover .text-desc{ bottom: 0; } .port-1.effect-3 .text-desc{ top: 50%; left: 50%; width: 0; height: 0; overflow: hidden; padding: 0; } .port-1.effect-3:hover .text-desc{ width: 100%; top: 0; left: 0; height: 100%; padding: 45px 20px 20px; } .port-1 .text-desc p{ padding-top: 30px; color: #fff; line-height: 30px; text-align: left; } .port-1 .text-desc:hover a{ color: #014da1; background: #fff; padding: 8px 25px; margin-top: 30px; } @media only screen and (max-width: 768px){ .port-1 .text-desc p { display: none; } .port-1 .text-desc a { color: #014da1; background: #fff; padding: 8px 25px; margin-top: 30px; } .text-desc h3{font-size: 16px;} .port-1 .text-desc { padding: 20% 10px; } } /*鍏充簬鎴戜滑鏁板瓧*/ #shuzi { height: 160px; margin: 0px 0px; padding: 30px; } #shuzi .sz{ display: inline-block; float: left; height: 100px; border-left: solid 1px #eee; text-align: center; width: calc((100% - 0px) / 3); padding-left: 0px; } #shuzi .sz:first-of-type { border-left:none; padding-left: 0px; } #shuzi:before, #shuzi:after{ content:''; height: 0px; display: block; clear:both; } #shuzi .sz_sz { display: inline-block; position: relative; line-height: 60px; height: 60px; } #shuzi .sz_wz { color: #222; font-size: 15px; line-height: 40px; height: 40px; } #shuzi .sz .counter { font-size: 48px; line-height: 60px; font-weight: bold; height: 60px; color: #004499; font-family: 'sz'!important; } #shuzi .sz sup.dw { font-size: 16px; color: #333; padding-left: 6px; height: 20px; margin-top: 10px; top: 0px; position: relative; display: inline-block; line-height: 20px; } #shuzi .sz sup.jiahao { top: -20px; position: relative; font-size: 26px; font-weight: bold; padding-left: 4px; color: #004499; height: 30px; line-height: 30px; } @media only screen and (max-width: 768px){ #shuzi { height: auto; margin: 0px 0px; padding: 10px; } #shuzi .sz { display: inline-block; float: left; height: auto; border-left: solid 1px #eee; text-align: center; width: calc((100% - 0px) / 2); padding-left: 0px; margin-bottom: 10px; } #shuzi .sz_sz { display: inline-block; position: relative; line-height: 40px; height: 40px; } #shuzi .sz .counter { font-size: 26px; line-height: 40px; font-weight: bold; height: 40px; color: #004499; font-family: "iconfont"; } #shuzi .sz:nth-child(3){ border-left: solid 0px #eee;} #shuzi .sz sup.jiahao { top: -10px; position: relative; font-size: 18px; font-weight: bold; padding-left: 4px; color: #004499; height: 20px; line-height: 20px; } #shuzi .sz_wz { color: #222; font-size: 14px; line-height: 40px; height: 40px; } } /*鍏充簬鎴戜滑鏁板瓧*/