@charset "utf-8";
/* CSS Document */
.pro{
    padding-top:80px;
    padding-bottom:50px;
}
.proleft{
    width:68%;
    float:left;
}
.proright{
    width:27%;
    float:right;
    overflow:hidden;
}
.proleft ul li{
    float:left;
    width:175px;
    margin:0 32px 30px 0;
    border:5px solid #EEEEEE;
    overflow:hidden;
    position:relative;
    min-height:235px;
}
.proleft ul li h3{
    text-align:center;
    margin-top:20px;
    font-size:14px;
}
.proleft ul li .content h4{
    margin-top:5px;
    font-size:16px;
    text-align:center;
}
.proleft ul li .content p{
    line-height:22px;
    text-indent: 0;
    height:145px;
}
.proleft ul li .content a.info{
    position:absolute;
    bottom:-25px;
    right:5px;
    color:#FFDD57;
}
.proleft ul li:hover .content a.info{bottom:5px}
.proleft ul li .content {
    background:#fff;
    background:rgba(4, 171, 241, 0.78);
    height: 0;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
    filter: alpha(opacity=50);
    opacity: 0.5;
    width:190%;
    overflow: hidden;
    -webkit-transform: rotate(-33.5deg) translate(-112px, 166px);
    -moz-transform: rotate(-33.5deg) translate(-112px, 166px);
    -o-transform: rotate(-33.5deg) translate(-112px, 166px);
    -ms-transform: rotate(-33.5deg) translate(-112px, 166px);
    transform: rotate(-33.5deg) translate(-112px, 166px);
    -webkit-transform-origin: 0% 100%;
    -moz-transform-origin: 0% 100%;
    -o-transform-origin: 0% 100%;
    -ms-transform-origin: 0% 100%;
    transform-origin: 0% 100%;
    -webkit-transition: all 0.4s ease-in-out 0.3s;
    -moz-transition: all 0.4s ease-in-out 0.3s;
    -o-transition: all 0.4s ease-in-out 0.3s;
    transition: all 0.4s ease-in-out 0.3s;
    padding:5px;

}
.proleft ul li .content a{
    color:#00A7EA;
    color:rgba(255,255,255,1)
}
.proleft ul li:hover .content{
    height: 175px;
    width: 165px;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=90)";
    filter: alpha(opacity=90);
    opacity: 0.9;
    top: 40px;
    -webkit-transform: rotate(0deg) translate(0, 0);
    -moz-transform: rotate(0deg) translate(0, 0);
    -o-transform: rotate(0deg) translate(0, 0);
    -ms-transform: rotate(0deg) translate(0, 0);
    transform: rotate(0deg) translate(0, 0);
}
.proleft ul li a img{
    width:175px;
    height:175px;
    float:left;
}
.proleft ul li a img:hover {
    -webkit-box-shadow: 0 0 5px #000;
    -moz-box-shadow: 0 0 5px #000;
    box-shadow: 0 0 5px #000;
}
   .proleft ul li:hover .mask1, .proleft ul li:hover .mask2 {
    -webkit-transition-delay: 0s;
    -moz-transition-delay: 0s;
    -o-transition-delay: 0s;
    transition-delay: 0s;
}
.proleft ul li:hover .mask1 {
    -webkit-transform: rotate(56.5deg) translateX(1px);
    -moz-transform: rotate(56.5deg) translateX(1px);
    -o-transform: rotate(56.5deg) translateX(1px);
    -ms-transform: rotate(56.5deg) translateX(1px);
    transform: rotate(56.5deg) translateX(1px);
}
.proleft ul li:hover .mask2 {
    -webkit-transform: rotate(56.5deg) translateX(-1px);
    -moz-transform: rotate(56.5deg) translateX(-1px);
    -o-transform: rotate(56.5deg) translateX(-1px);
    -ms-transform: rotate(56.5deg) translateX(-1px);
    transform: rotate(56.5deg) translateX(-1px);
}
.profast{
    border:2px solid #ccc;
    padding:20px;
    overflow:hidden;
    margin-bottom:30px;
}
.profast h3{
    font-size: 20px;
    font-weight: 700;
    border-bottom: 1px solid #ccc;
    margin-bottom: 20px;
    padding-bottom: 20px;
}
.profast h3 em{
    display: inline-block;
    background-position: 0 -90px;
    width: 25px;
    height: 25px;
}
.profast h3 span{
    font-size:14px;
    font-weight: normal;
    margin-left:10px;
    color:#777;
}
.profast ul li {
    margin-bottom:30px;
    overflow:hidden;
}
.profast ul li dl dt{
    font-size:16px;
    font-weight: 700;
    margin-bottom:10px;
}
.profast ul li dl dd{
    width:140px;
    text-align:center;
    float:left;
    list-style-type : square;
    background: url(images/dian.png) no-repeat 0 center;
    padding-left:10px;
}
.profast ul li dl dd:nth-child(even){
    text-align:left;
}
.profast ul li dl dd:nth-child(odd) {
    text-align:left;
}
.mask{
    width: 350px;
    height: 234px;
    position: absolute;
    overflow: hidden;
    top: 0;
    left: 0;
    display: block;
}
.mask1,.mask2 {
    background-color: rgba(0, 0, 0, 0.5);
    height:393px;
    width: 361px;
    background:rgba(187, 165, 1, 0.59);
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
    filter: alpha(opacity=100);
    opacity: 1;
    -webkit-transition: all 0.3s ease-in-out 0.6s;
    -moz-transition: all 0.3s ease-in-out 0.6s;
    -o-transition: all 0.3s ease-in-out 0.6s;
    transition: all 0.3s ease-in-out 0.6s;
}
.mask1 {
    left: auto;
    right: 0;
    -webkit-transform: rotate(56.5deg) translateX(-180px);
    -moz-transform: rotate(56.5deg) translateX(-180px);
    -o-transform: rotate(56.5deg) translateX(-180px);
    -ms-transform: rotate(56.5deg) translateX(-180px);
    transform: rotate(56.5deg) translateX(-180px);
    -webkit-transform-origin: 100% 0%;
    -moz-transform-origin: 100% 0%;
    -o-transform-origin: 100% 0%;
    -ms-transform-origin: 100% 0%;
    transform-origin: 100% 0%;
}
.mask2 {
    top: auto;
    bottom:-2px;
    -webkit-transform: rotate(56.5deg) translateX(180px);
    -moz-transform: rotate(56.5deg) translateX(180px);
    -o-transform: rotate(56.5deg) translateX(180px);
    -ms-transform: rotate(56.5deg) translateX(180px);
    transform: rotate(56.5deg) translateX(180px);
    -webkit-transform-origin: 0% 100%;
    -moz-transform-origin: 0% 100%;
    -o-transform-origin: 0% 100%;
    -ms-transform-origin: 0% 100%;
    transform-origin: 0% 100%;
}
/*pronr*/
.pntop{
    overflow:hidden;
    margin-bottom:50px;
}
.ptleft{
    width:55%;
    float:left;
    overflow:hidden;
    padding-bottom:50px;
    position:relative;
}
.ptleft em{
    line-height:30px;
}
.ptright{
    width:530px;
    float:right;
    position:relative;
    overflow:hidden;
    overflow:hidden;
    border:1px solid #ccc;
}
.ptleft h1{
    font-size:20px;
    font-weight: bold;
    margin-bottom:20px;
}
.ptleft ul li{
    line-height:35px;
}
.ptleft i{
    font-style:normal;
}
.ptleft ul{
    margin-top:5px;
}
.pnfactory,.pnmessage{
    display:block;
    width:150px;
    height:40px;
    text-align:center;
    float:left;
    line-height:40px;
    box-shadow:3px 3px 5px #CCC;
    position:absolute;
    bottom:0;
}
.pnfactory{
    background: #04ABF1;
    color:#fff;
    left:280px;
}
.pnfactory:hover{
    background: #FFDD57;
    color:#000;
}
.pnmessage{
    background: #FFDD57;
    color:#000;
}
.pnmessage:hover{
    background: #04ABF1;
    color:#fff;
    overflow:hidden;
}

    /* 本例子css */
.ptright .bd {
    position:relative;
    float:left;
    width:402px;
    height:402px;
    overflow:hidden;
}
    .ptright .bd img {
    width:400px;
    height:400px;
    text-align:center;
}
    .ptright .hd {
    position:relative;
    width:70px;
    float:right;
    z-index:1;
    margin-top:30px;
    z-index:99;
    padding-right:30px;
}
    .ptright .hd ul {
    position:relative;
    width:70px;
    overflow:hidden;
}
    .ptright .hd li {
    height:70px;
    overflow:hidden;
    margin-bottom:20px;
}
    .ptright .hd img {
    width:70px;
    height:70px;
    display:block;
    border-bottom:1px solid #ccc;
}
.ptright .hoverBg {
    position:absolute;
    top:0;
    left:-12px;
    width:88px;
    height:80px;
    z-index:100;
    background:url(/images/hover.png) no-repeat;
    _filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=images/hover.png);
    _background:none;
}
.pronav {
    background: #242424;
    height:40px;
    line-height:40px;
    color:#fff;
}
.pronav ul li{
    float:left;
    width:12%;
    text-align:center;
    cursor:pointer;
}
.pronav ul li a{
    color:#fff;
    font-size:15px;
    display: block;
    width:100%;
}
.pronav ul li:hover{
    background: #FFDD57;
}
.pronav ul li:hover a{
    color:#000;
    transition:none;
}
.pnbot{overflow:hidden;}
.pnbot dl{
    overflow:hidden;
    margin:40px 0;
    width:100%;
    padding-bottom:20px;
    border-bottom:1px solid #ccc;
}
.pnbot dl dt{
    overflow:hidden;
}
.pnbot dl dt em{
    display:inline-block;
    background-position: 0 -90px;
    float:left;
}
.pnbot dl dt h4{
    float:left;
    font-size:18px;
    font-weight: 700;
    margin-bottom:25px;
}
.pnbot dl dd table{
    width:100%;
    border:1px solid #ccc;
    border-bottom:none;
    border-right:none;
    text-align:center;
    cursor:pointer;
}
.pnbot dl dd table tr td{border-right:1px solid #ccc;border-bottom:1px solid #ccc;}
.pnbot dl dd table tr{line-height:30px}
.pnbot dl dd table tr:nth-child(odd){
    background: #ECF7FD;
        line-height: 30px;
}
.pnbot p {text-indent:0;}
/*.pnbot dl dd table tr:first-child{
    height:40px;
    font-size:16px;
}*/
.pnbot dl dd table tr:hover{
    background:#FFDD57;
}
.pnbot dl dd ul li{
    float:left;
    width:213px;
}
.pnbot dl dd ul li a img{
    width:175px;
    height:175px;
    border:20px solid #fff;
}
.pnbot dl dd ul li:hover h3{
    background: #FFDD57;
}
.pnbot dl dd ul li:hover a{
    color:#000;
    transition:none;
}
.pnbot dl dd ul li a{
    color:#fff;
}
.pnbot dl dd ul li h3{
    text-align:center;
    line-height:30px;
    height:30px;
    font-size:14px;
    border-right:1px solid #f1f1f1;
    background:#242424;
    padding:0 5%;
    overflow:hidden;
}
#sscs img{display:none}
/*pronr end*/