.classify {
    width: 100%;
    height: 60px;
    background-color: #dddddd;
}

.classify-center {
    width: 1400px;
    height: 100%;
    margin: auto;
}

.classify-img {
    width: 71px;
    height: 60px;
    background-color: #1287d5;
    float: left;
}

.classify-center ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    float: left;
}

/* 为每个链接设定样式 */
.product-center {
    width: 120px;
    height: 18px;
    display: inline-block;
    color: black;
    text-align: center;
    text-decoration: none;
    border-right: 1px #cdcdcd solid;

}

.product-menu {
    display: inline-block;
}

.hide {
    position: absolute;
    background-color: #dddddd;
    z-index: 10;
    min-width: 160px;
    overflow: hidden;
    height: 0;
    transition-duration: 0.5s;
}

.hide a {
    display: block;
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    text-align: center;
}

.hide a:hover {
    background-color: #1287d5;
    color: #ffffff;
}

.product-menu:hover .hide {
    height: 230px;
}

.bann {
    width: 1400px;
    position: relative;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    margin-top: 60px;
    background-color: #fff;
    box-shadow: 1px 1px 2px rgb(180, 180, 180);
}

.bann-message {
    width: 100%;
}

.message {
    width: 280px;
    height: 280px;
    float: left;
    /* border-right: 2px solid rgb(196, 196, 196, 0.2); */
}

.message-img {
    width: 60px;
    height: 60px;
    margin-top: 60px;
    margin-left: 110px;
    transition: all .4s;
    /* 让背面的紫色盒子保留立体空间 给父级添加的 */
    transform-style: preserve-3d;
}

.message p {
    text-align: center;
    margin-top: 30px;
}

.message-tel:hover .message-img {
    content: url(../img/tel2.png);
    transform: rotateY(180deg);
}

.message-tel:hover .tel-p {
    color: #1287d5;
}

.message-fax:hover .message-img {
    content: url(../img/fax2.png);
    transform: rotateY(180deg);
}

.message-fax:hover .fax-p {
    color: #1287d5;
}

.message-mail:hover .message-img {
    content: url(../img/mail2.png);
    transform: rotateY(180deg);
}

.message-mail:hover .mail-p {
    color: #1287d5;
}

.message-time:hover .message-img {
    content: url(../img/time2.png);
    transform: rotateY(180deg);
}

.message-time:hover .time-p {
    color: #1287d5;
}

.message-add:hover .message-img {
    content: url(../img/add2.png);
    transform: rotateY(180deg);
}

.message-add:hover .add-p {
    color: #1287d5;
}

#container {
    width: 1200px;
    height: 500px;
    margin-left: 100px;
}