@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:230px;
}
.proleft ul li h3{
    text-align:center;
    margin-top:20px;
    padding-top:1px dashed #111;
    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:5px;
    right:5px;
    color:#FFDD57;
}
.proleft ul li .content {
    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:175px;
    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:#fff;
}
.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:100%;
    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:30px;position:relative;height:372px;}
.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:15px 0;}
.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: #387CBB;color:#fff;}
.pnmessage{background: #FFDD57;color:#000;}
.pnmessage:hover{background: #E86E00;color:#000;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;}
    .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 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{font-size:333;float:left;font-size: 18px;font-weight: 700;}
.pnbot dl dd ul li{float:left;width:213px;background:#242424;}
.pnbot dl dd ul li:hover{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;}
/*pronr end*/