html,

body {

    margin: 0;

    height: 100%;

    width: 100%;

}
img{
    width: 100%;
}
.text_right{
    text-align: right !important;
}
.justify_end{
    display: flex;
    justify-content: flex-end;
}
ul,ol{
    margin: 0 ;
    padding: 0 ;
}

/* header----------------- start --------- */
#top{
    /* background-color: red; */
    border-bottom: 1px solid #eee;
    ul{
        display: flex;
        align-items: center;
        margin-bottom: 0;
        padding: 10px 0;
        li{
            margin: 0 10px;
        }
    }
    
}
/* top----------------- end --------- */

/* header------------ start ------------- */
#header{
    padding: 30px 0;
    background: linear-gradient(to bottom, #fff, #eee);
    /* header_content这个css是为了让row里面的col元素，不一样高度时，变成一样 */
    .header_content{
        /* display: flex;
        align-items: stretch; */
        
        .logo{
            img{
               
            }
        }
        .header_item{
            
        
            ul{
                display: flex;
                justify-content: space-around;
                align-items: center;
                /* overflow: hidden; */
                flex-wrap: wrap;
                li{
                    z-index: 1;
                    .list{
                        .box{
                            display: flex;
                            align-items: center;
                            .iconBox{
                                background-color: #f0dc79;
                                border-radius: 10px;
    
                                .icon{
                                    font-size: 36px;
                                    margin: 5px;
                                    color: #fff;
                                }
                            }
                            
                            .text{
                                margin: 0 10px;
                            }
                        }
                    }
                    
                }
                
            }
            ul li:nth-child(2) .list .box .iconBox {
                background-color: #c3f1b1;
            }
            ul li:nth-child(2) .list .box::before{
                animation: furotate 2s linear infinite;
                background: linear-gradient(-155deg, rgb(255, 0, 0),rgb(231, 227, 227), rgb(6, 231, 74));
            }
            ul li:nth-child(3) .list .box .iconBox {
                background-color: #337ab7;
            }
            ul li:nth-child(3) .list .box::before{
                background: linear-gradient(-155deg, rgb(255, 0, 0),rgb(231, 227, 227), #0381ed);
            }
            ul li:nth-child(4) .list .box .iconBox {
                background-color: #f5b3b3;
            }
            ul li:nth-child(4) .list .box::before{
                animation: furotate 2s linear infinite;
                background: linear-gradient(-155deg, rgb(255, 0, 0),rgb(231, 227, 227), rgb(231, 6, 6));
            }
        }
    }
   
}
/* header------------ end ------------- */

/* yimingguojia------------- start ----------- */
#yimingguojia{
    .list{
        display: flex;
        justify-content: center;
        margin: 20px 0;
        a{
            text-align: center;
            img{
                width: 60%;
            }
        }
    }
    
}
/* yimingguojia------------- end ----------- */

/* menu ---------- start ---------- */
#menu{
    ul{
        display: flex;
        margin: 0;
        li{
            margin: 0 20px;
            padding: 10px 0;
            a{
                color: #fff;
            }
        }
    }
}
/* menu ---------- end ---------- */


/* footer----------------- start --------- */
#footer{
    background-color: #333;
    ul{
        margin: 0;
    }
    .footer_title{
        padding: 20px 0;
       
        ul{
            display: flex;
            li{
                margin: 0 7px;
            }
        }
        
    }
    .footer_footer{
        padding: 30px 0;
        .footer_logo{
            
        }
        .footer_info{
            margin: 3% 0;

            ul{
                li{
                    margin: 15px 0;
                }
            }
        }
        .footer_saoyisao{
            text-align: center;
            ul{
                display: flex;
                li{
                    margin-left:10px;
                    img{
                        margin-bottom: 10px;
                    }
                }
            }
        }
    }
}
/* footer----------------- end --------- */