*{
    margin: 0;
    padding: 0;
}
ul{
     list-style: none;
 }


body,html{
    height: 100%;
   
}
@font-face
{
font-family: "myfont";
src: url('../font/zzgf.OTF'),
}
.phonewrap{
     .slogan{
        color: #ffffff;
        margin-top: 60px;
       position: relative;
       img{
           width: 100%;
       }
        .sw{
            font-family: "myfont";
            position: absolute;
             z-index: 10;
             font-size: 20px;
             padding-left: 10%;
             left: 0;
             top: 10%;
             opacity: 0;
             p{
                 margin: 10px;
             }
        }
    }
    .content{
    .kant{
        text-align: center;
        margin: 40px;
        font-size: 25px;
        span{
            border-bottom: 1px solid black;
            padding-bottom: 10px;
        }
    }
    .kankanlist{
     //   width: 1140px;
//      height: 500px;
        color: #fff;
        font-size: 12px;
        margin:auto;
        margin-top: 10px;
        .top{
           text-align: center;
            .det{
               width: 30%;
               display: inline-block;
               position: relative;
               text-align: center;
                img{
                     width: 70%;
                }
                .det_i{
                position: absolute;
                width: 100%;
                height:100%;
                left: 0;
                top: 0;
                text-align: center;
                display: flex;
                align-items: center;
                justify-content: center; 
                }
            }
        }
        .bottom{
            text-align: center;
            margin-top: -20px;
            .det{
               display: inline-block;
               width: 30%;
               text-align: center;
               position: relative;
               
                img{
                    width: 70%;
                }
                .det_i{
                display: flex;
                align-items: center;
                justify-content: center; 
                position: absolute;
                width: 100%;
                height:100%;
                left: 0;
                top: 0;
                text-align: center;
                
                }
            }
        }
        
       
    }
    .intro{
        margin: auto;   
       
        margin-top: 20px;
        .ins{
            box-shadow: 1px 1px 10px lightgray;
            width: 90%;
            margin: auto;
//          height: 100%;
//          border: 1px solid black;
           margin-bottom: 20px;
            img{
                width: 100%;
            }
            .line{
                     width: 100%;
                     background: #E5E5E5;
                     height: 1px;
                     margin: auto;
                     margin:10px 0 10px 0;
                 }
            .in{
                width: 100%;
                .insd{
                 h4{
                    padding-left: 10px;
                 }
                 font-size: 16px;
                 
                 margin: 0 auto;
                 background: #ffffff;
                 h5{
                    text-align: left;
                    padding: 5px;
                 }
                 .cont{
                     padding: 10px;
                     line-height: 30px;
                 }
                }
                .insd2{
                    p{
                        padding-top: 10px;
                        padding-left: 10px;
                    }
                }
            }
            
        }
    }
    .ulf{
        overflow: hidden;
        list-style: none;
        text-align: center;
        margin-top: 15px;
        li{
            width: 30%;
           display: inline-block;
            img{
                width: 100%;
            }
            p{
                text-align: center;
            }
        }
    }
    margin-bottom:50px
    }
    
}
.wrap{
    background: url(../img/homepage/bj.png) left 70%;
    background-size:100% 890px;
    background-repeat:no-repeat;  
   }
// @media screen and (max-width: 2700px){
   
// }
// @media screen and (max-width: 1400px){
//     .wrap{
//      background: url(../img/homepage/bj.png) left 79%;
//      background-size:100% 790px;
//      background-repeat:no-repeat;  
//     }
// }
// @media screen and (max-width: 1317px){
//     .wrap{
//      background: url(../img/homepage/bj.png) left 75%;
//      background-size:100% 690px;
//      background-repeat:no-repeat;  
//     }
// }
.wrap{
    
     .slogan2{
        img{
            
            width: 100%;
        }
     }
     .slogan3{
         display: none;
     }
    .slogan{
        color: #ffffff;
        
       position: relative;
        .sw{
            font-family: 'myfont','Microsoft YaHei';
            position: absolute;
             margin-left: 200px;
             padding-top: 120px;
             font-size: calc(100vw/20);
             opacity: 0;
             left: 0;
             top: 15%;
             p{
                 margin: 20px;
             }
        }
      
    }
    .content{
   
  
    .kant{
        text-align: center;
        margin: 200px 0 70px 0;
        font-size: 35px;
        span{
            border-bottom: 1px solid black;
            padding-bottom: 10px;
        }
    }
    .fade2{
        margin-bottom: 150px;
    }
    .fade1_f{
        overflow: hidden;
    }
    .fade1,.fade2,.fade3{
        opacity: 0;
    }
    .fade3{
        padding-bottom: 15px;
    }
    .kankanlist{   
        width: 1140px;
        height: 450px; 
        margin:auto;
        margin-top: 10px;
        position: relative;
        .det{
            span{
                opacity: 0;
                transition: opacity 1s;
            }
            width: 300px;
            height: 250px;        
            position: absolute;
            cursor: pointer;
            //border: 1px solid black;
            font-size: 25px;
            top:160px;
            left: 0;
            color: #ffffff;
            img{
                width: 100%;
                filter: brightness(1);
                transition: filter 1s;
            }
           
        }
        // @keyframes myfirst{
        //     from {filter: brightness(1);}
        //     to {filter: brightness(0.5);}
        // }
        // @keyframes myfirst2{
        //     from {opacity: 0}
        //     to {opacity: 1}
        // }
        .det:hover{
            img{
                filter: brightness(0.5);
            }   
           span{
               opacity: 1; 
            } 
        }
        .det1{
            top:200px;
            left: 0;
            .det1_i{
                position: absolute;
                width: 300px;
                height:250px;
                left: 0;
                top: 0;
                text-align: center;
                line-height:250px;
            }
        }
        .det2{
            top: 0px;
            left: 210px;
            .det2_i{
                position: absolute;
                width: 300px;
                height:250px;
                left: 0;
                top: 0;
                text-align: center;
                line-height:250px;
            }
        }
        .det3{
            top:200px;
            left: 420px;
            .det3_i{
                 position: absolute;
                width: 300px;
                height:250px;
                left: 0;
                top: 0;
                text-align: center;
                line-height:250px;
            }
        }
        .det4{
            top:0;
            left: 630px;
            .det4_i{
                position: absolute;
                width: 300px;
                height:250px;
                left: 0;
                top: 0;
                text-align: center;
                line-height:250px;
            }
        }
        .det5{
            top:200px;
            left: 840px;
            .det5_i{
                position: absolute;
                width: 300px;
                height:250px;
                left: 0;
                top: 0;
                text-align: center;
                line-height:250px;
            }
        }
       
    }
    .intro{
        display: flex;
        width:1140px;
        height: 410px;
        margin: auto;
        justify-content: space-between;
        margin-top: 20px;
        .ins{
            width: 32%;
//          height: 100%;
//          border: 1px solid black;
            position: relative;
            img{
                width: 100%;
            }
            .in{
                position: absolute;
                left: 0;
                top: 150px;
                width: 100%;
                text-align: left;
                .insd{
                 width: 79%;
                 height: 265px;
                 box-shadow: 1px 1px 10px lightgray;
                 margin: 0 auto;
                 background: #ffffff;
                 h3{
                    text-align: center;
                    padding: 10px;
                    font-size: 24px;
                 }
                 .line{
                     width: 40px;
                     background: lightgray;
                     height: 2px;
                     margin: 0 auto;
                   
                 }
                 .cont{
                     font-size: 20px;
                     padding: 18px;
                     line-height: 30px;
                      letter-spacing:1px;
                 }
                }
                .insd2{
                    p{
                        padding-top: 10px;
                        padding-left: 10px;
                    }
                }
            }
            
        }
    }
    .ulf{
       
        overflow: hidden;
        list-style: none;
        text-align: center;
        font-size: 20px;
        margin-top: 30px;
        li{
           margin-left: 30px;
            width: 250px;
           display: inline-block;
            img{
                width: 100%;
            }
            p{
                text-align: center;
            }
        }
    }
    }
    
}