.btn_act{background:#db192a;}
/*anli开始*/
.port-7{float: left; width: 100%;margin-bottom: 20px; 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: 100%; 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;}
.full-length{width: 100%; float: left; padding-bottom: 10px;}
.btn{display: inline-block; padding: 5px 10px; font-size: 14px; color: #fff; border: 2px solid #17a471;margin-top: 20px; background-color: #17a471; text-decoration: none; transition: 0.4s;}
.btn:hover{background-color: transparent; color: #17a471; transition: 0.4s;}
.text-desc{position: absolute; left: 0; top: 0; background-color: #fff; height: 100%; opacity: 0; width: 100%; padding: 20px;}
.full-length ul li{
    float: left;
    width: 25%;
    list-style: none;
    margin-top: 20px;
}
.full-length ul li a{
    text-align: center;
    display: block;
    width: 50%;
    margin: auto;
}
.image-box{
    height:280px
}
.image-box img{
    height:280px
}
.text-desc h3{
    margin: 40px 0 20px 0;
}
.text-desc p{
    line-height: 20px;
    font-size: 14px;
    color: #666;
    margin-bottom: 30px;
}
#container{ width:1200px; margin: 0 auto;}
#container li{ position:relative;text-align: center; margin:10px 10px 10px 0; float: left; overflow: hidden;}
#container li p{width: 100%;
    position: absolute;
    left: 0; top: -100%;
    color: #ffffff;
    z-index: 2;

    display: table;
    _position: relative;}
#container li img{ width: 100%; display: block;
    height: 230px;
    -moz-transition:.5s ease-in;
    -webkit-transition:.5s ease-in;
    -o-transition:.5s ease-in;
    -ms-transition:.5s ease-in;
    transition:.5s ease-in;
    border-radius: 5px;
}
#container li:hover img{ transform:scale(1.1,1.1);-moz-transform:scale(1.1,1.1);-webkit-transform:scale(1.1,1.1);-o-transform:scale(1.1,1.1)}
#container li p i{ width: 100%; height: 280px; display: block; position: absolute; left: 0; top: 0;z-index: -1;background: #000000; opacity: 0.8; -moz-opacity:0.8; filter:alpha(opacity=80);  }
#container li p span{ display: block; line-height: 24px; font-size: 14px; padding:20px; color:#999; box-sizing:border-box;text-align:center;display: table-cell;
    vertical-align: middle;_position:absolute;
    _top:50%;
    _left:50%;
}
#container li{
    width: 285px;
    height: 280px;
    margin-right: 15px;
    border-radius: 5px;
}
#container li h3{
    margin-top: 10px;
    background-color:#e6e6e6;
    line-height: 41px;
    border-radius: 5px;
}

/*应用领域结束*/

#wrapper{
    width:100px;
    height:480px;
    position:relative;
    color:#fff;
    text-shadow:rgba(0,0,0,0.1) 2px 2px 0px;
}

#slider-wrap{
    width:800px;
    height:480px;
    position:relative;
    overflow:hidden;
}

#slider-wrap ul#slider{
    width:100%;
    height:100%;

    position:absolute;
    top:0;
    left:0;
}

#slider-wrap ul#slider li{
    float:left;
    position:relative;
    width:800px;
    height:480px;
}

#slider-wrap ul#slider li > div{
    position:absolute;
    top:20px;
    left:35px;
}

#slider-wrap ul#slider li > div h3{
    font-size:36px;
    text-transform:uppercase;
    margin-top: 30px;
}
#slider-wrap ul#slider li > div img{
 width: 100%;
    height: 480px;
}
#slider-wrap ul#slider li > div hr{
    border: none;
    background: #11a55b;
    height: 5px;
    width: 50px;
    margin-top: 30px;
}

#slider-wrap ul#slider li > div span{
    font-family: Neucha, Arial, sans serif;
    font-size:16px;
    display: block;
    margin-top: 20px;
    width: 240px;
    line-height: 30px;
}

#slider-wrap ul#slider li i{
    text-align:center;
    line-height:480px;
    display:block;
    width:100%;
    font-size:90px;
}


/*btns*/
.btns{
    position:absolute;
    width:50px;
    height:60px;
    top:50%;
    margin-top:-25px;
    line-height:57px;
    text-align:center;
    cursor:pointer;
    background:rgba(0,0,0,0.1);
    z-index:100;


    -webkit-user-select: none;
    -moz-user-select: none;
    -khtml-user-select: none;
    -ms-user-select: none;

    -webkit-transition: all 0.1s ease;
    -moz-transition: all 0.1s ease;
    -o-transition: all 0.1s ease;
    -ms-transition: all 0.1s ease;
    transition: all 0.1s ease;
}

.btns:hover{
    background:rgba(0,0,0,0.3);
}

#next{right:-50px; border-radius:7px 0px 0px 7px;}
#previous{left:-50px; border-radius:0px 7px 7px 7px;}
#counter{
    top: 30px;
    right:35px;
    width:auto;
    position:absolute;
}

#slider-wrap.active #next{right:0px;}
#slider-wrap.active #previous{left:0px;}


/*bar*/
#pagination-wrap{
    min-width:20px;
    margin-top:350px;
    margin-left: auto;
    margin-right: auto;
    height:15px;
    position:relative;
    text-align:center;
}

#pagination-wrap ul {
    width:100%;
}

#pagination-wrap ul li{
    margin: 0 4px;
    display: inline-block;
    width:5px;
    height:5px;
    border-radius:50%;
    background:#fff;
    opacity:0.5;
    position:relative;
    top:0;


}

#pagination-wrap ul li.active{
    width:12px;
    height:12px;
    top:3px;
    opacity:1;
    box-shadow:rgba(0,0,0,0.1) 1px 1px 0px;
}