@charset "utf-8";

/*= Reset CSS 
============= */
html, body {border: 0; margin: 0; padding: 0;}
body {font: 14px "Microsoft Yahei", Arial, sans-serif; min-width: 100%; min-height: 100%; color: #666; background: url(../images/bg-2.jpg) repeat;}
.container{margin: 0 auto; max-width: 1060px;}

*{margin: 0; padding: 0; box-sizing: border-box;}
img{max-width: 100%; }
.full-length{width: 100%; float: left; padding-bottom:0px;}

a:hover{    text-decoration: none;}

h3{font-size: 20px; margin: 5px 0 10px;}
p{font-weight: 300; line-height:25px; font-size: 14px; margin-bottom: 15px;}
.btn{display: inline-block; padding: 5px 10px; font-size: 14px; color: #fff; border: 2px solid #1f7a1d; background-color: #1f7a1d; text-decoration: none; transition: 0.4s;}
.btn:hover{background-color: transparent; color: #1f7a1d; transition: 0.4s;}
.text-desc{position: absolute; left: 0; top: 0; background-color: #fff; height: 100%; opacity: 0; width: 100%; padding: 20px;}
.container ul{      float: left;  margin: 0 auto;max-width: 1060px;}
.container ul li{margin: 0 auto;     max-width: 265px;float: left;padding:10px 3px;}


/* effect-6 css */
.port-6{margin-bottom: 10px;float: left; width: 100%; position: relative; overflow: hidden; text-align: center; border: 2px solid #1f7a1d; overflow: visible;}

.port-6.effect-1{z-index: 8;}
.port-6.effect-1 img{transition: 0.5s;}
.port-6.effect-1:hover img{transform: scale(0.3) translateY(110%); position: relative; z-index: 9;}
.port-6.effect-1 .text-desc{transform: translateY(-100%); opacity: 0; padding: 10px 20px; transition: 0.5s;}
.port-6.effect-1:hover .text-desc{transform: translateY(0px); opacity: 1;}

.port-6.effect-2{z-index: 7;}
.port-6.effect-2 img{transition: 0.6s; z-index: 1;}
.port-6.effect-2:hover img{transform: scale(0.3) translateX(110%); position: relative; z-index: 9;}
.port-6.effect-2 .text-desc{transform: translateX(-100%); opacity: 0; padding: 40px 120px 20px 20px; transition: 0.6s;}
.port-6.effect-2:hover .text-desc{transform: translateX(0px); opacity: 1;}

.port-6.effect-3 img{transition: 0.5s;}
.port-6.effect-3:hover img{transform: scale(0.3) translateY(-110%); position: relative; z-index: 9;}
.port-6.effect-3 .text-desc{ opacity: 0; padding: 85px 20px 10px; transition: 0.5s;}
.port-6.effect-3:hover .text-desc{transform: translateY(0px); opacity: 1;}
/* effect-6 css end */

/*= Media Screen CSS
==================== */
@media only screen and (max-width: 1090px){
	ul{width: 340px; margin: 0 auto;}
	li{width: 100%; margin: 20px 0;}
	.port-5.effect-1 {z-index: 19;}
}

@media only screen and (max-width: 360px){
	ul{width: 300px;}
	.port-1 .text-desc, 
	.port-1.effect-3:hover .text-desc, 
	.port-3.effect-1 .text-desc, 
	.port-3.effect-3 .text-desc,
	.port-4.effect-1 .text-desc,
	.port-4.effect-2 .text-desc,
	.port-4.effect-3 .text-desc, .port-8 .text-desc{padding: 20px;}
	.text-desc{padding: 7px;}
	.port-5.effect-1 .text-desc{padding: 13px 20px 20px 90px;}
	.port-5.effect-2 .text-desc{padding: 10px;}
	.port-5.effect-3 .text-desc{padding: 16px 90px 20px 20px;}
	.port-6.effect-1 .text-desc .btn, 
	.port-6.effect-2 .text-desc .btn,
	.port-6.effect-3 .text-desc .btn,
	.port-7.effect-1 .text-desc .btn,
	.port-7.effect-2 .text-desc .btn,
	.port-7.effect-3 .text-desc .btn,
	.port-8.effect-3 .text-desc .btn{display: none;}
	.port-6.effect-2 .text-desc{padding: 20px 120px 20px 20px;}
	.port-6.effect-3 .text-desc{padding: 75px 20px 10px;}
	.port-7.effect-1 .text-desc{padding: 12px 10px;}
	.port-8.effect-3 .text-desc{padding: 28px 70px 20px;}
}
/*= Media Screen CSS End
======================== */