.container{margin: 0 auto; max-width:100%;;}


*{margin: 0; padding: 0; box-sizing: border-box;}

img{max-width: 100%; vertical-align: middle;}
.cate_name{padding:10px;background:#eb7e3d;color:#fff}
.container ul{margin: 0 -1.5%;}
.container li{float: left; width: 23%; margin: 10px 1%; list-style: none;border:1px solid #eaeaea}
.container:after{clear:both; content:'';display:block}
.container>ul:after{clear:both; content:'';display:block}
.btn1{margin-top:15px;;display: inline-block; padding: 5px 10px;
font-size: 14px; color: #fff; border: 2px solid #4d92d9; background-color: #4d92d9; text-decoration: none; transition: 0.4s;}
.btn1:hover{background-color: transparent; color: #4d92d9; transition: 0.4s;}
.text-desc{position: relative;
border:1px solid #cfcfcf;
left: 0; top: 0; background-color: #fff; height: 100%; opacity: 1; width: 100%; padding: 20px;}
.port-3{float: left; width: 100%; position: relative; overflow: hidden; text-align: center; border: 4px solid rgba(255, 255, 255, 0.9); perspective: 500px;}
.port-3 img{transition: 0.5s;}

.text-desc h3{padding:5px; }
.text-desc h3 b {padding:5px 5px; background:#eb7e3d;color:#fff;font-size:16px}
.text-desc h4{color:#777;padding:5px;font-size:14px}
.text-desc h5{color:#999;padding:2px;}
.text-desc>a>p{padding:5px}
@media all and (min-width:1px) and (max-width:640px) {

.container li{float: left; width: 48%; margin: 10px 1%; list-style: none;}
.port-3.effect-3 .text-desc p{display:none}
.text-desc{padding:10px 5px}

.text-desc h3 b {padding:2px 3px; background:#eb7e3d;color:#fff;font-size:12px}
.text-desc h3{font-size:12px}
.text-desc h4{font-size:10px}
.text-desc h5{font-size:10px;display:none}

}