@media screen and (min-width: 320px) and (max-width: 768px) {
    body{
        display: flex;
        align-items: center;
        justify-content: center;
    }
    #box {
        height:400px;
        overflow: hidden;
        padding-top: 400px;
        margin:0 auto;
        /* margin-top:100px; */
    }
    #button{
        margin-top:50px;

    }
    .div-width {
        width: 100%;
        margin: 0 auto;
    }
    .beauty_img {
        margin-top: 20px;
        width: 100%;
    }
    .footer {
        margin-bottom: 400px;
    }
}

@media screen and (min-width: 769px) and (max-width: 1920px) {
    #box {
        height: 440px;
        overflow: hidden;
        padding-top: 440px;
    }
    .div-width {
        width: 50%;
        margin: 0 auto;
        margin-left: 35%;
    }
    .beauty_img {
        margin-top: 20px;
        width: 50%;
    }
    .footer {
        margin-bottom: 140px;
    }
}

body {
    height:100%;
    margin: 0 auto;
    padding:0;
    background:url(../images/bj.jpg)no-repeat;
    font-family: '黑体';
    font-size: 16px;
    overflow: hidden;
    overflow-y: hidden;
}

.bimg{
	position:absolute;top:0;
}
.bimg img{width:100%; }
.but {
    color: #fff;
    font-size: 2rem;
    line-height: 100px;
    margin: 0;
}

p {
    margin: 0;
    margin-top:20px;
}
.p-height{
    margin-bottom:200px;
}

#div1 p span{
    line-height: 40px;
}

.white {
    color: #ffffff;;
}

.red {
	color:#ff0000;
}

.orange {
    color: #f77e21;
}

ul,
li {
    margin: 0;
    padding: 0;
}

.beauty_img ul {
    overflow: hidden;
}

.beauty_img ul li {
    width: 100%;
    margin-bottom: 400px;
}

.beauty_img ul li img {
    width: 100%;
}

.yellow {
    color:#ffcc33;
}

.green {
    color: #00cc33;
}

.ching {
    color: #01ffff;
}

.blue {
    color: #3366ff;
}

.purple {
    color: #9e0097;
}

.Pale {
    color: rgba(204,204,204,0.6);
}

.footer {
    font-size: 20px;
}