@charset "utf-8";
    body,ul,li,div{ 
    padding: 0;
    margin: 0;
     }
li{
    list-style-type: none;
}
a{
    text-decoration: none;
}
a:hover{
    color: red;
}
input,img{
    border: none;
}
.clear{
    clear: both;
    height: 10px;
    width: 100px;
}
body{
    font-family: "微软雅黑"; 
}
p,h1,h2,h3,h4,h5,h6{
    padding: 0;
    margin:0;
}
/*
background-size: cover; 视觉差
    background-attachment: fixed;
    background-repeat: no-repeat;
    background-position: center center; 


 img{ 放大
    transition: all 1s;
}
 img:hover{
    transform: scale(1.4);
}
.divw{  布局居中  
        width: 100%;
        height: 500px;
        border:1px solid red;
        justify-content:sflex-start 所有元素居左
        justify-content:sflex-end   所有元素居右
        justify-content:scenter     所有元素居中
        justify-content:sspace-between    所有元素两遍对齐
        justify-content:sspace-around     所有元素两遍留白
        align-items:center;               水平居中
        display:-webkit-flex;             适应各种浏览器
        flex-direction: row;              可以换行
        flex-wrap: wrap;                  可以换行    
    }
.divw::before   ::after{ 伪元素，一个前一个后
        content: "1";
        width: 100px;
        height: 100px;
        border:1px solid red;
        text-align: center;
        line-height: 100px;
    }

  
 {    视觉差效果
        background-attachment: fixed;
        background-size: cover;
        background-position: center center;
}



    @media  (min-width:1600px) and (max-width:9999px){

   } 响应式



   .divb{   鼠标经过动画 
        width:230px;        
        height:270px;      
        position:fixed;     
        top: 50%;
        left: 50%;
        margin-left: -115px;
        margin-top: -135px;
        transition:all 0.3s linear; 
        border: 1px solid red;
        -webkit-transition:all 0.3s linear; 
        z-index: 999;
        overflow: hidden;
    }
    .divb .divn{
        width: 230px;
        height: 100%;
        position:absolute; left:0px; top:0px;
        top:-270px; transition:all 0.2s ease; 
        -webkit-transition:all 0.2s ease;
        background: rgba(0,0,0,0.5);
    }
    .divb:hover .divn{
        display:block; top:0px;
    }
    
    span{ position:absolute;left:15px; bottom:32px;transition:all 1s; -webkit-transition:all 1s;}

    .divb .divn:hover span{ 
        animation: img4 0.8s linear infinite alternate; 
        -webkit-animation: img4 1s linear infinite alternate;
    }

    @keyframes img4 {0% { bottom:32px;} 100% { bottom:27px;}}

    @-webkit-keyframes img4 {0% { bottom:32px;} 100% { bottom:27px;}}
*/


.div1{
    margin: 0 auto;
    background: url(../image/bj-1.jpg) center center no-repeat;
    height: 567px;
    position: relative;
}
.div1 a{
    display: inline-block;
    width: 100%;
    height: 100%;
}
.div2{
    margin: 0 auto;
    background: #ffbacc;
    height: 748px;
    width: 100%;
}
.div21{
    margin: 0 auto;
    background: url(../image/bj-2.jpg) center center no-repeat;
    height: 748px;
    width: 1200px;
    position: relative;
}
.div21 a{
    display: inline-block;
    width: 100%;
    height: 50%;
    position: absolute;
    top: 300px;
}
.div3{
    margin: 0 auto;
    background: url(../image/bj-3.jpg) center center no-repeat;
    height: 543px;
    position: relative;
    background-attachment: fixed;
    background-size: cover;
    background-position: center center;
}
.div31{
    margin: 0 auto;
    background: url(../image/bj-3-1.png) center center no-repeat;
    height: 273px;
    width: 1210px;
    position: relative;
    top: 50px;
}
.div32{
    margin: 0 auto;
    background: url(../image/bj-3-2.png) center center no-repeat;
    height: 37px;
    width: 193px;
    position: relative;
    top: 180px;
}
.div32 a{
    display: inline-block;
    width: 100%;
    height: 100%;
}
.div4{
    margin: 0 auto;
    background: url(../image/bj-4.jpg) center center no-repeat;
    height: 719px;
    position: relative;
}
.div4 a{
    display: inline-block;
    width: 100%;
    height: 60px;
    position: absolute;
    bottom: 50px;
}
.div5{
    margin: 0 auto;
    background: url(../image/bj-5.jpg) center center no-repeat;
    height: 572px;
    width: 1900px;
    position: relative;
}
.div5 .a1{
    display: inline-block;
    width: 200px;
    height: 60px;
    position: absolute;
    bottom: 90px;
    right: 480px;
}
.theme-default #slider{width:658px;height:390px;}
.theme-default .nivoSlider{background:url("../images/loading.gif") no-repeat 50% 50% rgb(255, 255, 255);position:relative;top: 114px;
    left: 444px;}
.theme-default .nivoSlider img{left:0px;top:0px;display:none;position:absolute;}
.theme-default .nivoSlider a{border:0px currentColor;display:block;}
.theme-default .nivo-controlNav{    left: 220px;
    width: 193px;
    height: 38px;
    bottom: -15px;
    padding-top: 14px;
    padding-left: 50px;
    position: absolute;
    z-index: 9;
    background-image: url(../images/bullets-bg.png);
    background-repeat: no-repeat;}
.theme-default .nivo-controlNav a{background:url("../images/bullets.png") no-repeat;border:0px currentColor;width:23px;height:17px;text-indent:-9999px;margin-right:3px;float:left;display:block;}
.theme-default .nivo-controlNav a.active{background-position:0px -17px;}
.theme-default .nivo-directionNav a{background:url("../images/arrows.png") no-repeat;border:0px currentColor;width:65px;height:65px;text-indent:-9999px;display:block;}
.theme-default a.nivo-nextNav{background-position:-65px 0px;top:151px;right:30px;}
.theme-default a.nivo-prevNav{left:30px;top:151px;}
.theme-default a.nivo-nextNav:hover{background-position:-65px -65px;top:151px;right:30px;}
.theme-default a.nivo-prevNav:hover{background-position:0px -65px;left:30px;top:151px;}
.theme-default .nivo-caption{font-family:Helvetica,Arial,sans-serif;}
.theme-default .nivo-caption a{color:rgb(255, 255, 255);border-bottom-color:rgb(255, 255, 255);border-bottom-width:1px;border-bottom-style:dotted;}
.theme-default .nivo-caption a:hover{color:rgb(255, 255, 255);}
/* nivoSlider */
.nivoSlider{position:relative;}
.nivoSlider img{left:0px;top:0px;position:absolute;}
.nivoSlider a.nivo-imageLink{margin:0px;padding:0px;border:0px currentColor;left:0px;top:0px;width:100%;height:100%;display:none;position:absolute;z-index:6;}
.nivoSlider{position:relative;}
.nivoSlider img{left:0px;top:0px;position:absolute;}
.nivoSlider a.nivo-imageLink{margin:0px;padding:0px;border:0px currentColor;left:0px;top:0px;width:100%;height:100%;display:none;position:absolute;z-index:6;}
.nivo-slice{height:100%;display:block;position:absolute;z-index:5;}
.nivo-box{display:block;position:absolute;z-index:5;}
.nivo-caption{background:rgb(0, 0, 0);left:0px;width:30%;bottom:0px;color:rgb(255, 255, 255);display:none;position:absolute;z-index:8;opacity:0.8;}
.nivo-caption p{margin:0px;display:none;}
.nivo-caption a{display:inline !important;}
.nivo-html-caption{display:none;}
.nivo-directionNav a{top:45%;position:absolute;z-index:9;cursor:pointer;}
.nivo-prevNav{left:0px;}
.nivo-nextNav{right:0px;}
.nivo-controlNav a{position:relative;z-index:9;cursor:pointer;}
.nivo-controlNav a.active{font-weight:bold;}
.div6{
    margin: 0 auto;
    background: url(../image/bj-6.jpg) center center no-repeat;
    height: 603px;
    position: relative;
}
.div6 a{
    display: inline-block;
    width: 100%;
    height: 60px;
    position: absolute;
    bottom: 150px;
    left: 0;
}























.company{
    position: absolute;
    top: 112px;
    left: 396px;

}

/*定义一个名字为lefteaseinAnimate动画，实现从页面的左边淡入页面效果*/
@keyframes lefteaseinAnimate{
 0%{ transform: translateX(-396px); opacity: 0;
-webkit-transform: translateX(-396px); opacity: 0;
-webkit-transform: translateX(-396px); opacity: 0;
-webkit-transform: translateX(-396px); opacity: 0;
-webkit-transform: translateX(-396px); opacity: 0;
    } /*在0%时设置文字在想X轴-2000px位移处（左边），透明度为0，也就是看不见文字*/
 100%{
  transform: translateX(0px); opacity: 1;
  -webkit-transform: translateY(0px); opacity: 1;
-webkit-transform: translateY(0px); opacity: 1;
-webkit-transform: translateY(0px); opacity: 1;
-webkit-transform: translateY(0px); opacity: 1;

    } /*在100%时设置文字在想X轴0px位移处，也就是原始布局的位置，透明度为1，也就是文字可以看见了*/
}
.company_name{
 animation: lefteaseinAnimate 1s ease 1; /*调用已定义好的动画lefteaseinAnimate，全程运行时间1S，进入的速度曲线为ease，只播放一次*/
 -webkit-animation: lefteaseinAnimate 1s ease 1;
 -ms-animation: lefteaseinAnimate 1s ease 1;
 -o-animation: lefteaseinAnimate 1s ease 1;
 -moz-animation: lefteaseinAnimate 1s ease 1;
 background: url(../image/bj-1-1.png)no-repeat;
 background-size: 100%;
 width: 437px;
 height: 210px;
 
 /*规定动画的最后状态为结束状态*/
 animation-fill-mode:forwards;
 -webkit-animation-fill-mode: forwards; 
 -o-animation-fill-mode: forwards; 
 -ms-animation-fill-mode: forwards; 
 -moz-animation-fill-mode: forwards; 
}
/*定义一个名字为righteaseinAnimate动画，实现从页面的右边淡入页面效果*/
@keyframes righteaseinAnimate{
 0%{ transform: translateX(-2000px); opacity: 0;
-webkit-transform: translateX(-2000px); opacity: 0;
-webkit-transform: translateX(-2000px); opacity: 0;
-webkit-transform: translateX(-2000px); opacity: 0;
-webkit-transform: translateX(-2000px); opacity: 0;

    } /*在0%时设置文字在想X轴2000px位移处（右边），透明度为0，也就是看不见文字*/
 100%{ transform: translateX(0px); opacity: 1;
-webkit-transform: translateX(0px); opacity: 1;
-webkit-transform: translateX(0px); opacity: 1;
-webkit-transform: translateX(0px); opacity: 1;
-webkit-transform: translateX(0px); opacity: 1;

    } /*在100%时设置文字在想X轴0px位移处，也就是原始布局的位置，透明度为1，也就是文字可以看见了*/
}
.div1-1{
    position: absolute;
    top: 400px;
    left: 396px;
}
.company_introduce{
 animation: righteaseinAnimate 2s ease 1; /*调用已定义好的动画righteaseinAnimate，全程运行时间1S，进入的速度曲线为ease，只播放一次*/
 -webkit-animation: righteaseinAnimate 2s ease 1;
 -moz-animation: righteaseinAnimate 2s ease 1;
 -ms-animation: righteaseinAnimate 2s ease 1;
 -o-animation: righteaseinAnimate 2s ease 1;
background: url(../image/bj-1-2.png)no-repeat;
 width: 358px;
 height: 86px;
 
 /*规定动画的最后状态为结束状态*/
 animation-fill-mode:forwards;
 -webkit-animation-fill-mode: forwards; 
 -o-animation-fill-mode: forwards; 
 -ms-animation-fill-mode: forwards; 
 -moz-animation-fill-mode: forwards; 
}



/*定义一个名字为righteaseinAnimate动画，实现从页面的右边淡入页面效果*/
@keyframes righteaseinAnimatee{
 0%{ transform: translateY(-2000px); opacity: 0;
-webkit-transform: translateY(-2000px); opacity: 0;
-webkit-transform: translateY(-2000px); opacity: 0;
-webkit-transform: translateY(-2000px); opacity: 0;
-webkit-transform: translateY(-2000px); opacity: 0;

    } /*在0%时设置文字在想X轴2000px位移处（右边），透明度为0，也就是看不见文字*/
 100%{ transform: translateX(0px); opacity: 1;
-webkit-transform: translateX(0px); opacity: 1;
-webkit-transform: translateX(0px); opacity: 1;
-webkit-transform: translateX(0px); opacity: 1;
-webkit-transform: translateX(0px); opacity: 1;

    } /*在100%时设置文字在想X轴0px位移处，也就是原始布局的位置，透明度为1，也就是文字可以看见了*/
}
.div1-2{
    position: absolute;
    top: 0px;
    right: 460px;
}
.company_introducee{
 animation: righteaseinAnimatee 3s ease 1; /*调用已定义好的动画righteaseinAnimate，全程运行时间1S，进入的速度曲线为ease，只播放一次*/
 -webkit-animation: righteaseinAnimatee 3s ease 1;
 -moz-animation: righteaseinAnimatee 3s ease 1;
 -ms-animation: righteaseinAnimatee 3s ease 1;
 -o-animation: righteaseinAnimatee 3s ease 1;
background: url(../image/bj-1-3.jpg)no-repeat;
 width: 147px;
 height: 225px;
 
 /*规定动画的最后状态为结束状态*/
 animation-fill-mode:forwards;
 -webkit-animation-fill-mode: forwards; 
 -o-animation-fill-mode: forwards; 
 -ms-animation-fill-mode: forwards; 
 -moz-animation-fill-mode: forwards; 
}
.div1 .div1-3{
    margin:0 auto;
    width: 1400px;
    height: 156px;
    /*justify-content:space-between;*/  
    justify-content:space-around;  
    align-items:center;               
    display:-webkit-flex;             
    flex-direction: row;          
    flex-wrap: wrap;  
    position: absolute;
    bottom: 100px;
    left: 50%;
    margin-left: -700px;

}
.div1 .div1-3 p{
    display: inline-block;
    width: 181px;
    height: 160px;
}
.div1 .div1-3 p:nth-child(1){
    background: url(../image/bj-1-4.png)no-repeat;
}
.div1 .div1-3 p:nth-child(2){
    background: url(../image/bj-1-5.png)no-repeat;
}
.div1 .div1-3 p:nth-child(3){
    background: url(../image/bj-1-6.png)no-repeat;
}

/*定义一个名字为righteaseinAnimate动画，实现从页面的右边淡入页面效果*/
@keyframes righteaseinAnimateee{
 0%{ transform: translateY(2000px); opacity: 0;
-webkit-transform: translateY(2000px); opacity: 0;
-webkit-transform: translateY(2000px); opacity: 0;
-webkit-transform: translateY(2000px); opacity: 0;
-webkit-transform: translateY(2000px); opacity: 0;

    } /*在0%时设置文字在想X轴2000px位移处（右边），透明度为0，也就是看不见文字*/
 100%{ transform: translateX(0px); opacity: 1;
-webkit-transform: translateX(0px); opacity: 1;
-webkit-transform: translateX(0px); opacity: 1;
-webkit-transform: translateX(0px); opacity: 1;
-webkit-transform: translateX(0px); opacity: 1;

    } /*在100%时设置文字在想X轴0px位移处，也就是原始布局的位置，透明度为1，也就是文字可以看见了*/
}
.div1-3{
 animation: righteaseinAnimateee 3s ease 1; /*调用已定义好的动画righteaseinAnimate，全程运行时间1S，进入的速度曲线为ease，只播放一次*/
 -webkit-animation: righteaseinAnimateee 3s ease 1;
 -moz-animation: righteaseinAnimateee 3s ease 1;
 -ms-animation: righteaseinAnimateee 3s ease 1;
 -o-animation: righteaseinAnimateee 3s ease 1;
 
 /*规定动画的最后状态为结束状态*/
 animation-fill-mode:forwards;
 -webkit-animation-fill-mode: forwards; 
 -o-animation-fill-mode: forwards; 
 -ms-animation-fill-mode: forwards; 
 -moz-animation-fill-mode: forwards; 
}