@charset "utf-8";


.shizipic{ margin-top: 30; margin-right: auto; margin-bottom: 30; margin-left: auto; padding: 0px; }
.shizipic li{ float: left; width: 340px; list-style: none; border: 1px solid #e3e3e3; margin-top: 5px; margin-bottom: 5px; height: 250px; padding: 5px; margin-right: 5px; margin-left: 5px; }
.shizipic img { margin: 0px; padding: 0px; height: 245px; width: 330px; }
.shizipic p { margin: 0px; padding: 0px; font-family: "微软雅黑"; font-size: 14px; line-height: 24px; color: #333; z-index: 99; }
.shizipic .text-desc{ position: absolute; left: 0; top: 0; background-color: #fff; height: 245px; opacity: 0; width: 330px; margin: 0px; padding: 0px; }
.shizipic h3 { font-family: "微软雅黑"; font-size: 24px; padding: 0px; line-height: 30px; margin-top: 20px; margin-right: 0px; margin-bottom: 10px; margin-left: 0px; }


/*= Reset CSS End
================= *





/* effect-3 css */
.port-3{ float: left; width: 330px; position: relative; overflow: hidden; text-align: center; perspective: 500px; border-top-style: solid; border-right-style: solid; border-bottom-style: solid; border-left-style: solid; border-top-color: rgba(255, 255, 255, 0.9); border-right-color: rgba(255, 255, 255, 0.9); border-bottom-color: rgba(255, 255, 255, 0.9); border-left-color: rgba(255, 255, 255, 0.9); }
.port-3 img{ transition: 0.5s; margin: 0px; padding: 0px; }

.port-3.effect-1 .text-desc{z-index: -1; transition: 0.5s; transform: rotateX(80deg); transform-origin: center top 0; opacity: 1;}
.port-3.effect-1:hover .text-desc{transform: none;}
.port-3.effect-1:hover img{opacity: 0; transform: scale(1.2)}

.port-3.effect-2 .text-desc{z-index: -1; transition: 0.5s; transform: rotateX(80deg); transform-origin: center bottom 0; top: auto; bottom: 0;}
.port-3.effect-2:hover .text-desc{transform: none; opacity: 1;}
.port-3.effect-2:hover img{transform: translateY(-100%)}

.port-3.effect-3 .text-desc{z-index: -1; transition: 0.5s; transform: rotateX(80deg); transform-origin: center top 0;}
.port-3.effect-3:hover .text-desc{transform: none; opacity: 1;}
.port-3.effect-3:hover img{transform: translateY(100%)}
/* effect-3 css end */