@charset="utf-8";
*{margin:0;padding: 0;}
html{width:100%;height: 100%;}
body{width:100%;height: 100%;background-image:url(../images/wall.jpg); background-repeat: no-repeat;background-attachment: fixed;}
h6{text-indent: -9999px;}
a{text-decoration: none;}
a:visited{text-decoration: none;}
ul{list-style: none;}
section{
    position: relative;
    width: 100%;
   }
section img{   
       display: inherit;
       width:100%;
       z-index: 1;
       opacity: 1;
}
.hd{
    position: absolute;
    font-family:"隶书";
    font-weight: bold;
    font-size:2.1vw;
    z-index: 3;
    left: 45%;
    top:2.7vw;
}
.hd_en{
    position: absolute;
    font-family:"Microsoft YaHei";
    /*font-weight: bold;*/
    font-size:2.1vw;
    z-index: 3;
    left: 45%;
    top:2.7vw;
}
.hd2{
    position: absolute;
    font-family:"隶书";
    font-weight: bold;
    font-size:2.1vw;
    z-index: 3;
    left: 45%;
    top:1.5vw;
    color: rgba(255,255,255,1);
    text-shadow: 
    0 0.07vw 0 #444,
    0 0.12vw 0 #444;
}
.hd2_en{
    position: absolute;
    font-family:"Microsoft YaHei";
    /*font-weight: bold;*/
    font-size:2.1vw;
    z-index: 3;
    left: 45%;
    top:1.5vw;
    color: rgba(255,255,255,1);
    text-shadow: 
    0 0.07vw 0 #444,
    0 0.12vw 0 #444;
}
/*-------------------
   header
-------------------*/
header{position:fixed;width:100%;height:8vw;background-color: rgba(0,255,255,0.4);z-index: 11; }

#logo{position: fixed;
    padding:1vw 1vw;  width:25vw;z-index:12;}
#logo>img{ width:100%;}

#eng{position: fixed; z-index:13; margin: 1vw 1vw 0vw 87vw;}
#eng li{ float:left;padding:0vw 1vw 0vw 0vw;color: white;}
#eng a{font-family:Microsoft YaHei;color: white;font-size: 1vw;}
#eng a:hover{color: blue;}

nav{position: fixed;}
nav ul{margin:5vw 0 0 30vw;}
nav ul li{text-align: center; width: 10vw; float: left;}
nav a{font-size: 1vw;font-weight: bold; text-shadow: 0.2vw 0.2vw 0.2vw white;}
nav a:hover{border:solid 0.1vw white;border-radius:5vw;padding:0vw 1vw;padding: 0.2vw 1vw}
/*-------------------
   banner
-------------------*/
.swiper-containers {width: 100%;height:28.13vw;}
.swiper-container {width: 100%;height:44.38vw;}
.swiper-slide {background-position: center;background-size: cover;}
.i-title{ min-width:9.81vw; height:2.25vw; text-transform:uppercase; font-size:2em;}
.i-title  i{ border-bottom:0.5vw #7bc91e solid; width:1.88vw; display:inline-block; margin-left:0.31vw;}

/*-------------------
   cowords
-------------------*/
#cowords{
        z-index: 10;
        border-radius: 12.5vw;
        border-style: double;
        border-width: 0.32vw;
        border-color: rgba(255,255,0,0.6);
        position: absolute;
        margin:13vw 0 0 38vw;
        width:25vw;
        height: 25vw;
        box-shadow: 0.32vw 0.32vw 0.32vw #0c0645;
        background-color: rgba(31,11,244,0.2);
        overflow: hidden;
    }
    #words_ani{
        text-align: center;
        width:25vw;
        height: 10vw;
        font-size: 1.75vw;
        line-height: 2.5vw;
        font-family:"隶书";
         margin-top: 25vw;
         color: rgba(255,255,0);
         text-shadow: 0.19vw 0.19vw 0.19vw black;
        animation-name: adv;
        -webkit-animation-name: adv;
        -moz-animation-name: adv;
        -ms-animation-name: adv;
        -o-animation-name: adv;
        animation-duration: 6s;
        -webkit-animation-duration: 6s;
        -moz-animation-duration: 6s;
        -ms-animation-duration: 6s;
        -o-animation-duration: 6s;
        animation-timing-function: ease-in;
        -webkit-animation-timing-function: ease-in;
        -moz-animation-timing-function: ease-in;
        -ms-animation-timing-function: ease-in;
        -o-animation-timing-function: ease-in;
        animation-iteration-count: infinite;
        -webkit-animation-iteration-count: infinite;
        -moz-animation-iteration-count: infinite;
        -ms-animation-iteration-count: infinite;
        -o-animation-iteration-count: infinite;
       }
    #words_ani_en{
        text-align: center;
        width:25vw;
        height: 10vw;
        font-size: 1.75vw;
        line-height: 2.5vw;
        /*font-family:"隶书";*/
         margin-top: 25vw;
         color: rgba(255,255,0);
         text-shadow: 0.19vw 0.19vw 0.19vw black;
        animation-name: adv;
        -webkit-animation-name: adv;
        -moz-animation-name: adv;
        -ms-animation-name: adv;
        -o-animation-name: adv;
        animation-duration: 6s;
        -webkit-animation-duration: 6s;
        -moz-animation-duration: 6s;
        -ms-animation-duration: 6s;
        -o-animation-duration: 6s;
        animation-timing-function: ease-in;
        -webkit-animation-timing-function: ease-in;
        -moz-animation-timing-function: ease-in;
        -ms-animation-timing-function: ease-in;
        -o-animation-timing-function: ease-in;
        animation-iteration-count: infinite;
        -webkit-animation-iteration-count: infinite;
        -moz-animation-iteration-count: infinite;
        -ms-animation-iteration-count: infinite;
        -o-animation-iteration-count: infinite;
       }

/*-------------------
   about
-------------------*/
#abt_hd{
      border: 0.35vw solid rgb(102,102,102);
    border-radius: 0.5vw;
    box-shadow: 0.2vw 0.2vw 0.2vw #000;
    border-style: groove;
    background-color: rgb(0,0,0);
    width: 13%;
    height: 4vw;
    text-align: center;
    line-height: 4vw;
  
    color: #ffffff;;
    text-shadow: 0 0 0.2vw #fff, 
    0 0 0.4vw #fff,
    0 0 0.6vw #fff, 
    0 0 0.8vw #FF9900, 
    0 0 1vw #FF9900, 
    0 0 1.2vw #FF9900, 
    0 0 1.4vw #FF9900, 
    0 0 1vw #FF9900;
}

#abt{
    width:60%;
    top:13vw;
    left:20%;
    position: absolute;
    z-index: 3;
    font-size:1.4vw;
    font-family: "仿宋";
    font-weight: bold;
    color: rgba(255,255,255,1);
    text-indent: 3em;
    line-height: 2.5vw;
    text-shadow: 0.15vw 0.15vw 0.15vw black;
}
#abt_en{
    width:60%;
    top:13vw;
    left:21%;
    position: absolute;
    z-index: 3;
    font-size:1.4vw;
    color: rgba(255,255,255,1);
    text-indent: 3em;
    /*line-height: 2.5vw;*/
    text-shadow: 0.15vw 0.15vw 0.15vw black;
}
/*-------------------
   products
-------------------*/
#products{
    margin:0 auto;
    width: 90%;
    height: 50vw;
    background-color: rgba(0,0,0,0.2);
    
}

#pimg ul{
    width: 100%;
}
#pimg li{
    width: 30%;
    float: left;
    padding: 8vw 0 0 2vw;
}
#pname table{
    position: absolute;
    width: 100%;
    margin:30vw auto;
}
#pname_en table{
    position: absolute;
    width: 100%;
    margin:30vw auto;
}
#pname td{
    width: 30%;
    font-family: "隶书";
    font-size: 2vw;
    text-align: center;
    color: rgba(255,255,255,1);
}
#pname_en td{
    width: 30%;
    font-family: "Microsoft YaHei";
    font-size: 2vw;
    text-align: center;
    color: rgba(255,255,255,1);
}
#pimg a{
    display: block;border:none;
}
#pro1,
#pro2,
#pro3{
        border:solid 1px white;
        display:none; 
        height:45vw;  
        width:90vw;  
        position:fixed;
        top:1vw;
        left:2vw;  
        z-index:100;
        overflow: hidden;
        background: rgba(255,255,255,0.7); 
}
#over1,
#over2,
#over3{  
        width: 100%;  
        height: 100%;  
        opacity:0.8;
        /*filter:alpha(opacity=80);  */
        display: none;  
        position:absolute;  
        top:0;  
        left:0;  
        z-index:11;  
    } 
#pro1 a,
#pro2 a,
#pro3 a{
    position: relative;
    float: right;
} 


/*********************弹出层*****************************/
#pic_bt1,
#pic_bt2,
#pic_bt3{
    width: 85vw;
    height: 9vw;
    margin:32vw auto 0 auto;
    display:block;
        white-space: nowrap;
        overflow:auto;
}
#pic_bt1 ul,
#pic_bt2 ul,
#pic_bt3 ul{
    width:120vw;margin:0;
}
#pic_bt1 li,
#pic_bt2 li,
#pic_bt3 li{
        display: inline-block;
        margin:0 1px;
        
}
#pic_bt1 img,
#pic_bt2 img,
#pic_bt3 img{
    width: 10vw;padding: 2px;
}
#pic_bt3 a:hover,#pic_bt2 a:hover,#pic_bt1 a:hover{
    border-width:1.5px;
    border-style: solid;
    border-color: blue;
}


#focpic1,
#focpic2,
#focpic3 {
    width: 42vw;
    /*height: 30vw;*/
    visibility: visible;
    position: absolute;
    margin:2vw 7vw;
   }
#fttltxt{
    border:solid 1px black;
    width: 20vw;
    height: 10vw;
    margin:10vw 10vw auto 60vw;
    /*padding: 1vw;*/
    position: absolute;
    font-size: 1vw;
    
}


/**********************************************************/
/*-------------------
   factory
-------------------*/
#factory{
    /*position: relative;*/
    perspective:1000px;
    -webkit-perspective:1000px;
    -moz-perspective:1000px;
    -ms-perspective:1000px;
    -o-perspective:1000px;
    
    margin:0 auto;
    width: 90vw;
    height: 50vw;
    background-color: rgba(0,0,0,0.2);
    overflow: hidden;
}
#move_bd{
    
     float: right;
     width: 80vw;
     height: 40vw;
     margin: 4vw 3vw;

     -webkit-transform-origin: 100% 0 0;
     -moz-transform-origin: 100% 0 0;
     -ms-transform-origin: 100% 0 0;
     -o-transform-origin: 100% 0 0;
     transform-origin: 100% 0 0;
     -webkit-transform: rotateY(-70deg);
     -moz-transform: rotateY(-70deg);
     -ms-transform: rotateY(-70deg);
     -o-transform: rotateY(-70deg);
     transform: rotateY(-70deg);
     border: 2vw solid rgba(0,0,0,0.7);
     border-radius: 2vw;
    
     overflow: hidden;
}
#move_bd:hover{
     -webkit-animation-name: movebd;
     -moz-animation-name: movebd;
     -ms-animation-name: movebd;
     -o-animation-name: movebd;
     animation-name: movebd;
     -webkit-animation-duration: 20s;
     -moz-animation-duration: 20s;
     -ms-animation-duration: 20s;
     -o-animation-duration: 20s;
     animation-duration: 20s;
     -webkit-animation-timing-function: ease;
     -moz-animation-timing-function: ease;
     -ms-animation-timing-function: ease;
     -o-animation-timing-function: ease;
     animation-timing-function: ease;
     -webkit-animation-iteration-count: infinite;
     -moz-animation-iteration-count: infinite;
     -ms-animation-iteration-count: infinite;
     -o-animation-iteration-count: infinite;
     animation-iteration-count: infinite;
}


#move_bd ul{
      width: 720vw;
      height: 40vw; 
}
#move_bd:hover ul{
     animation-name: move;
     -webkit-animation-name: move;
     -moz-animation-name: move;
     -ms-animation-name: move;
     -o-animation-name: move;
     animation-duration: 20s;
     -webkit-animation-duration: 20s;
     -moz-animation-duration: 20s;
     -ms-animation-duration: 20s;
     -o-animation-duration: 20s;
     
     animation-timing-function: ease;
     -webkit-animation-timing-function: ease;
     -moz-animation-timing-function: ease;
     -ms-animation-timing-function: ease;
     -o-animation-timing-function: ease;
     
     animation-iteration-count: infinite;
     -webkit-animation-iteration-count: infinite;
     -moz-animation-iteration-count: infinite;
     -ms-animation-iteration-count: infinite;
     -o-animation-iteration-count: infinite;
     
}
#move_bd li{
    width: 80vw;
    height:40vw;
    float: left;
    
}

#ply{
    width: 20vw;
    position: absolute;
    margin:20vw 10vw;
}

#move_bd:hover + #ply{
    animation-name: play;
    -webkit-animation-name: play;
    -moz-animation-name: play;
    -ms-animation-name: play;
    -o-animation-name: play;
    
    animation-duration: 20s;
    -webkit-animation-duration: 20s;
    -moz-animation-duration: 20s;
    -ms-animation-duration: 20s;
    -o-animation-duration: 20s;
    
    animation-timing-function: ease;
    -webkit-animation-timing-function: ease;
    -moz-animation-timing-function: ease;
    -ms-animation-timing-function: ease;
    -o-animation-timing-function: ease;
    
    animation-iteration-count: infinite;
    -webkit-animation-iteration-count: infinite;
    -moz-animation-iteration-count: infinite;
    -ms-animation-iteration-count: infinite;
    -o-animation-iteration-count: infinite;
    
}

/*-------------------
   contact
-------------------*/
#contact{
    margin:0 auto;
    width: 90vw;
    height: 45vw;
    background-color: rgba(0,0,0,0.2);
    
}
#add{
    float: left;
    width: 30vw;
    /*height: 30vw;*/
    color: rgb(255,255,255);
    padding: 10vw 0 0 8vw;
    font-size: 1.2vw;
    line-height: 2vw;
}
#msg{
    float: left;
    width: 40vw;
    /*height: 30vw;*/
    color: rgba(255,255,255);
    padding: 7vw 0 0 8vw;
    font-size: 1vw;
    
}
fieldset{
    color: white;background-color: rgba(0,0,0,0.5);padding: 1.5vw 0 0 0;
}
legend{
    color: white;
    font-weight: bold;
    font-size: 1.5vw;
}
label{
    padding: 0 3vw;
}
fieldset input{
    font-size: 1vw;
    background-color: rgba(0,0,0,0);
    color: white;
    padding: 0.2vw;
    margin:0 3vw;
}
textarea{
    font-size: 1vw;
    margin:0 3vw;
    color: white;
}
.but1{
    float:left;
    margin:1vw 3vw;padding:0.2vw 1vw;
}
.but2{
    float:right;
    margin:1vw 3vw;padding:0.2vw 1vw;
}
/*-------------------
   footer
-------------------*/
footer{
    height: 3vw;
    width:100%;
    line-height: 3vw;
    font-weight: bold;
    color: rgba(255,255,255,0.8);
    background-color: rgba(0,0,0,0.2);  
}
    
footer p{
    text-align: center;font-size: 1vw;
}