/*= Reset CSS
============= */
html,
body {
border: 0;
margin: 0;
padding: 0;
}
body {
font: 14px "Lato", Arial, sans-serif;
min-width: 100%;
min-height: 100%;
color: #666;
background: url(../images/bg-2.jpg) repeat;
}
.container {
margin: 0 auto;
width: 1200px;
}
h2 {
color: #fff;
float: left;
width: 100%;
font-size: 24px;
font-weight: 400;
text-align: center;
padding: 50px 0 40px;
position: relative;
z-index: 50;
}
h2 span {
position: relative;
padding-bottom: 10px;
}
h2 span:after {
content: "";
width: 50%;
height: 3px;
background-color: #fff;
position: absolute;
left: 25%;
bottom: 0;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
img {
max-width: 100%;
vertical-align: middle;
}
.full-length {
width: 100%;
float: left;
padding-bottom: 35px;
}
.full-length ul{
width:1230px;
}
.full-length ul li{
width:275px;
overflow: hidden;
margin: 10px 14px 14px 0;
float: left;
}
.full-lengthe {
width: 100%;
float: left;
padding-bottom: 35px;
}
.full-lengthe ul{
width:990px;
}
.full-lengthe ul li{
width: 305px;
overflow: hidden;
margin: 10px 14px 14px 0;
float: left;
}
/* gongchang */
.full-lengthc {
width: 100%;
float: left;
padding-bottom: 10px;
}
.full-lengthc ul{
width:1230px;
}
.full-lengthc ul li{
width:280px;
overflow: hidden;
margin: 10px 27px 14px 0;
float: left;
}
.text-desca h3 {
font-size: 20px;
margin: 30px 0px 30px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
/* gongchangyemian */
.full-lengthcs {
width: 100%;
float: left;
padding-bottom: 10px;
}
.full-lengthcs ul{
width:990px;
}
.full-lengthcs ul li{
width:214px;
overflow: hidden;
margin: 10px 27px 14px 0;
float: left;
}
.text-desca h3 {
font-size: 20px;
margin: 30px 0px 30px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
/* anli */
.full-lengthl {
width: 100%;
float: left;
}
.full-lengthl ul{
width:1230px;
}
.full-lengthl ul li{
width: 286px;
overflow: hidden;
margin: 19px 19px 14px 0;
float: left;
}
/* anliyemian */
/* anli */
.full-lengthle {
width: 100%;
float: left;
}
.full-lengthle ul{
width:990px;
}
.full-lengthle ul li{
width: 302px;
height:260px;
overflow: hidden;
margin: 19px 19px 14px 0;
float: left;
}
p {
font-weight: 300;
line-height: 20px;
font-size: 14px;
margin-bottom: 15px;
}
.btn {
display: inline-block;
padding: 5px 10px;
font-size: 14px;
color: #cc0000;
border: 2px solid #cc0000;
background-color: transparent;
text-decoration: none;
transition: 0.4s;
}
.text-desca .btn:hover {
background-color: #cc0000;
color: #fff;
transition: 0.4s;
}
.text-desca {
position: absolute;
left: 0;
top: 0;
background-color: #fff;
height: 100%;
opacity: 0;
width: 100%;
padding: 20px;
}
.port-1{
border:none !important;
}
.port-3.effect-2 .text-desc{
border:1px solid #e8e8e8;
}
.text-desc h3 {
font-size: 20px;
margin: 30px 0px 30px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
p {
font-weight: 300;
line-height: 20px;
font-size: 14px;
margin-bottom: 15px;
}
.btn {
display: inline-block;
padding: 5px 10px;
font-size: 14px;
color: #cc0000;
border: 2px solid #cc0000;
background-color: transparent;
text-decoration: none;
transition: 0.4s;
}
.text-desc .btn:hover {
background-color: #cc0000;
color: #fff;
transition: 0.4s;
}
.text-desc {
position: absolute;
left: 0;
top: 0;
background-color: #fff;
height: 100%;
opacity: 0;
width: 100%;
padding: 20px;
}
/*= Reset CSS End
================= *
/* effect-1 css */
.port-1 {
float: left;
width: 100%;
position: relative;
overflow: hidden;
text-align: center;
border: 4px solid rgba(255, 255, 255, 0.9);
}
.port-1 .text-desc {
opacity: 0.9;
top: -100%;
transition: 0.5s;
color: #000;
padding: 45px 20px 20px;
}
.port-1 img {
transition: 0.5s;
}
.port-1:hover img {
/* transform: scale(1.2); */
}
.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;
}
/* effect-1 css end */
/* effect-2 css */
.port-2 {
float: left;
width: 100%;
position: relative;
overflow: hidden;
text-align: center;
border: 4px solid rgba(255, 255, 255, 0.9);
perspective: 800px;
}
.port-2 .text-desc {
z-index: -1;
transition: 0.6s;
}
.port-2 .image-box {
transition: 0.4s;
}
.port-2:hover .image-box {
transform: rotateX(80deg);
transform-origin: center bottom 0;
transition: 0.4s;
}
.port-2.effect-1:hover .text-desc {
opacity: 1;
}
.port-2.effect-2 .text-desc {
opacity: 1;
top: -100%;
}
.port-2.effect-2:hover .text-desc {
top: 0;
}
.port-2.effect-3 .text-desc {
opacity: 1;
top: auto;
bottom: -100%;
}
.port-2.effect-3:hover .text-desc {
bottom: 0;
}
/* effect-2 css end */
/* effect-3 css */
.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;
width: 100%;
height: 199px;
}
.port-3.effect-1 .text-desc {
z-index: -1;
transition: 0.5s;
transform: rotateX(80deg);
transform-origin: center top 0;
padding: 45px 20px 20px;
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;
padding: 45px 20px 20px;
}
.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;
padding: 45px 20px 20px;
border: 1px solid #e8e8e8;
}
.port-3.effect-3:hover .text-desc {
transform: none;
opacity: 1;
}
.port-3.effect-3:hover img {
transform: translateY(100%)
}
/* effect-3 css end */
/* effect-4 css */
.port-4 {
float: left;
width: 100%;
position: relative;
overflow: hidden;
text-align: center;
border: 4px solid rgba(255, 255, 255, 0.9);
z-index: 10;
}
.port-4.effect-1 img {
transition: 0.5s;
transform: rotateY(360deg) scale(1, 1);
}
.port-4.effect-1 .text-desc {
transform: rotateY(0deg) scale(0, 0);
transition: 0.5s;
opacity: 0;
padding: 45px 20px 20px;
}
.port-4.effect-1:hover .text-desc {
transform: rotateY(360deg) scale(1, 1);
opacity: 1;
}
.port-4.effect-1:hover img {
transform: rotateY(0deg) scale(0, 0);
}
.port-4.effect-2 {
z-index: 12;
}
.port-4.effect-2 img {
transition: 0.5s;
transform: rotateX(360deg) scale(1, 1);
}
.port-4.effect-2 .text-desc {
transform: rotateX(0deg) scale(0, 0);
transition: 0.5s;
opacity: 0;
padding: 45px 20px 20px;
}
.port-4.effect-2:hover .text-desc {
transform: rotateX(360deg) scale(1, 1);
opacity: 1;
}
.port-4.effect-2:hover img {
transform: rotateX(0deg) scale(0, 0);
}
.port-4.effect-3 img {
transition: 0.5s;
transform: rotate(360deg) scale(1, 1);
}
.port-4.effect-3 .text-desc {
transform: rotate(0deg) scale(0, 0);
transition: 0.5s;
opacity: 0;
padding: 45px 20px 20px;
}
.port-4.effect-3:hover .text-desc {
transform: rotate(360deg) scale(1, 1);
opacity: 1;
}
.port-4.effect-3:hover img {
transform: rotate(0deg) scale(0, 0);
}
/* effect-4 css end */
/* effect-5 css */
.port-5 {
float: left;
width: 100%;
position: relative;
overflow: hidden;
text-align: center;
border: 4px solid rgba(255, 255, 255, 0.9);
overflow: visible;
}
.port-5.effect-1 {
z-index: 9;
}
.port-5.effect-1 img {
transition: 0.5s;
}
.port-5.effect-1:hover img {
transform: scale(0.5) translateX(-100%);
position: relative;
z-index: 9;
border: 6px solid rgba(255, 255, 255, 0.9);
}
.port-5.effect-1 .text-desc {
transform: translateX(100%);
opacity: 0;
padding: 40px 20px 20px 90px;
transition: 0.5s;
}
.port-5.effect-1:hover .text-desc {
transform: translateX(0px);
opacity: 1;
}
.port-5.effect-2 {
z-index: 10;
}
.port-5.effect-2 img {
transition: 0.5s;
transform: none
}
.port-5.effect-2:hover img {
transform: scale(0.5) translateY(100%);
position: relative;
z-index: 9;
border: 6px solid rgba(255, 255, 255, 0.9);
}
.port-5.effect-2 .text-desc {
transform: translateY(-100%);
opacity: 0;
padding: 20px;
transition: 0.5s;
}
.port-5.effect-2:hover .text-desc {
transform: translateY(0px);
opacity: 1;
}
.port-5.effect-3 img {
transition: 0.5s;
}
.port-5.effect-3:hover img {
transform: scale(0.5) translateX(100%);
position: relative;
z-index: 9;
border: 6px solid rgba(255, 255, 255, 0.9);
}
.port-5.effect-3 .text-desc {
transform: translateX(-100%);
opacity: 0;
padding: 40px 90px 20px 20px;
transition: 0.5s;
}
.port-5.effect-3:hover .text-desc {
transform: translateX(0px);
opacity: 1;
}
/* effect-5 css end */
/* effect-6 css */
.port-6 {
float: left;
width: 100%;
position: relative;
overflow: hidden;
text-align: center;
border: 4px solid rgba(255, 255, 255, 0.9);
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 {
transform: translateY(100%);
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 */
/* effect-7 css */
.port-7 {
float: left;
width: 100%;
position: relative;
overflow: hidden;
text-align: center;
border: 4px solid rgba(255, 255, 255, 0.9);
overflow: hidden;
}
.port-7 .text-desc {
opacity: 0;
transition: 0.5s;
color: #000;
}
.port-7.effect-1 img {
transition: 0.5s;
position: relative;
width: 100%;
left: 0;
}
.port-7.effect-1:hover img {
left: 50%;
}
.port-7.effect-1 .text-desc {
transform: perspective(600px) rotateY(90deg);
transform-origin: left center 0;
width: 50%;
position: absolute;
left: 0;
top: 0;
padding: 18px 10px;
}
.port-7.effect-1:hover .text-desc {
opacity: 1;
transform: perspective(600px) rotateY(0deg);
z-index: 99;
}
.port-7.effect-2 img {
transition: 0.5s;
position: relative;
width: 100%;
top: 0;
}
.port-7.effect-2:hover img {
top: 50%;
}
.port-7.effect-2 .text-desc {
transform: perspective(600px) rotateX(90deg);
transform-origin: top center 0;
width: 100%;
position: absolute;
left: 0;
top: 0;
height: 50%;
padding: 5px 10px;
}
.port-7.effect-2:hover .text-desc {
opacity: 1;
transform: perspective(600px) rotateX(0deg);
z-index: 99;
}
.port-7.effect-3 img {
transition: 0.5s;
position: relative;
width: 100%;
right: 0;
}
.port-7.effect-3:hover img {
right: 50%;
}
.port-7.effect-3 .text-desc {
transform: perspective(600px) rotateY(-90deg);
transform-origin: right center 0;
width: 50%;
position: absolute;
left: auto;
right: 0;
top: 0;
padding: 18px 10px;
}
.port-7.effect-3:hover .text-desc {
opacity: 1;
transform: perspective(600px) rotateY(0deg);
z-index: 99;
}
/* effect-7 css end */
/* effect-8 css */
.port-8 {
float: left;
width: 100%;
position: relative;
overflow: hidden;
text-align: center;
border: 4px solid rgba(255, 255, 255, 0.9);
overflow: hidden;
}
.port-8 .text-desc {
opacity: 0;
transition: 0.5s;
color: #000;
padding: 45px 20px 20px;
}
.port-8.effect-1 img {
transition: 0.5s;
}
.port-8.effect-1:hover img {
transform: scale(1.1);
}
.port-8.effect-1 .text-desc {
left: 0;
position: absolute;
top: 0;
width: 100%;
height: 100%;
transform: scale(0);
backface-visibility: hidden;
}
.port-8.effect-1:hover .text-desc {
opacity: 1;
transform: scale(1);
border-radius: 20%;
}
.port-8.effect-2 img {
transition: 0.5s;
}
.port-8.effect-2:hover img {
transform: scale(1.1);
}
.port-8.effect-2 .text-desc {
left: 0;
position: absolute;
top: 0;
width: 100%;
height: 100%;
transform: scale(0);
backface-visibility: hidden;
}
.port-8.effect-2:hover .text-desc {
opacity: 1;
transform: scale(1);
border-radius: 50% 0 50% 0;
}
.port-8.effect-2 img {
transition: 0.5s;
}
.port-8.effect-2:hover img {
transform: scale(1.1);
}
.port-8.effect-2 .text-desc {
left: 0;
position: absolute;
top: 0;
width: 100%;
height: 100%;
transform: scale(0);
backface-visibility: hidden;
}
.port-8.effect-2:hover .text-desc {
opacity: 1;
transform: scale(1);
border-radius: 50% 0 50% 0;
}
.port-8.effect-3 img {
transition: 0.5s;
}
.port-8.effect-3:hover img {
transform: scale(1.1);
}
.port-8.effect-3 .text-desc {
left: 0;
position: absolute;
top: 0;
width: 100%;
height: 100%;
transform: scale(0);
backface-visibility: hidden;
background: none;
padding: 40px 70px 20px;
}
.port-8.effect-3 .text-desc:before,
.port-8.effect-3 .text-desc:after {
background-color: #fff;
border-radius: 50% 50% 0 0;
content: "";
height: 100%;
left: 50%;
position: absolute;
top: 0;
transform: rotate(-50deg);
transform-origin: 0 100% 0;
width: 50%;
z-index: -1;
}
.port-8.effect-3 .text-desc:after {
left: 0;
transform: rotate(50deg);
transform-origin: 100% 100% 0;
}
.port-8.effect-3:hover .text-desc {
opacity: 1;
transform: scale(1);
}
/* effect-8 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
======================== */