header>div>div>a:nth-child(1){ background-color: #33353A; }
header>div>div>a:nth-child(2){ background-color: #272D36; }

#banner{
    height: 535px;
    background: url(../images/direct/banner.png) no-repeat center center;
    background-size: cover;
}
#banner>div{
    margin: 0 auto;
    width: 1200px;
    padding-top: 171px;
    color: #FFF;
}
#banner>div>h1{
    font-size: 34px;
    margin: 0 0 79px 0;
margin-bottom: 43px;
}
#banner>div>p{
 max-width: 648px;
    font-size: 20px;
    line-height: 32px;
    margin-bottom: 37px;
    color: rgba(255, 255, 255, .6);
}
#banner>div>a{
    display: inline-block;
    height: 40px;
    line-height: 40px;
    padding: 0 36px;
    text-align: center;
    border: 1px solid #F6F7FC;
    border-radius: 6px;
    color: #FFF !important;
    text-decoration: none !important;
}
#banner>div>a:hover{
    background-color: rgba(255, 255, 255, .1);
}

#main-body>.block.left{
    background-color: #F6F7FC;
}
#main-body>.block>div{
    width: 1044px;
    height: 580px;
    margin: 0 auto;
    box-sizing: border-box;
    position: relative;
    padding-top: 120px;
}
#main-body>.block.left>div{
    padding-right: 524px;
    text-align: right;
}
#main-body>.block.right>div{
    padding-left: 524px;
}
#main-body>.block>div>img{
    position: absolute;
    top: 110px;
}
#main-body>.block>div>.title{
    color: #313133;
    font-size: 32px;
    margin-bottom: 36px;
}
#main-body>.block>div>p{
    color: #656867;
    font-size: 20px;
    line-height: 32px;
    margin-bottom: 36px;
}
#main-body>.block>div>ul{
    width: 100%;
}
#main-body>.block>div>ul>li{
    display: inline-block;
    white-space: nowrap;
    text-align: center;
    width: 77px;
    padding-top: 92px;
    color: #313133;
    font-size: 18px;
    cursor: pointer;
    background-position: center top;
    background-repeat: no-repeat;
    background-size: 77px 77px;
    position: relative;
}
#main-body>.block>div>ul>li:not(:last-child){
    margin-right: 60px;
}
#main-body>.block>div>ul>li>font{
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    -moz-transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -o-transform: translateX(-50%);
}

#develop>div>ul>li:nth-child(1){ background-image: url(../images/direct/develop-1.png); }
#develop>div>ul>li:nth-child(1):hover{ background-image: url(../images/direct/develop-1-1.png) }

#cloud>div>ul>li:nth-child(1){ background-image: url(../images/direct/cloud-1.png); }
#cloud>div>ul>li:nth-child(1):hover{ background-image: url(../images/direct/cloud-1-1.png) }
#cloud>div>ul>li:nth-child(2){ background-image: url(../images/direct/cloud-2.png); }
#cloud>div>ul>li:nth-child(2):hover{ background-image: url(../images/direct/cloud-2-1.png) }
#cloud>div>ul>li:nth-child(3){ background-image: url(../images/direct/cloud-3.png); }
#cloud>div>ul>li:nth-child(3):hover{ background-image: url(../images/direct/cloud-3-1.png) }

#wiring>div>ul>li:nth-child(1){ background-image: url(../images/direct/wiring-1.png); }
#wiring>div>ul>li:nth-child(1):hover{ background-image: url(../images/direct/wiring-1-1.png) }
#wiring>div>ul>li:nth-child(2){ background-image: url(../images/direct/wiring-2.png); }
#wiring>div>ul>li:nth-child(2):hover{ background-image: url(../images/direct/wiring-2-1.png) }
#wiring>div>ul>li:nth-child(3){ background-image: url(../images/direct/wiring-3.png); }
#wiring>div>ul>li:nth-child(3):hover{ background-image: url(../images/direct/wiring-3-1.png) }
#wiring>div>ul>li:nth-child(4){ background-image: url(../images/direct/wiring-4.png); }
#wiring>div>ul>li:nth-child(4):hover{ background-image: url(../images/direct/wiring-4-1.png) }

#network>div>ul>li:nth-child(1){ background-image: url(../images/direct/network-1.png); }
#network>div>ul>li:nth-child(1):hover{ background-image: url(../images/direct/network-1-1.png) }
#network>div>ul>li:nth-child(2){ background-image: url(../images/direct/network-2.png); }
#network>div>ul>li:nth-child(2):hover{ background-image: url(../images/direct/network-2-1.png) }

#safety>div>ul>li:nth-child(1){ background-image: url(../images/direct/safety-1.png); }
#safety>div>ul>li:nth-child(1):hover{ background-image: url(../images/direct/safety-1-1.png) }
#safety>div>ul>li:nth-child(2){ background-image: url(../images/direct/safety-2.png); }
#safety>div>ul>li:nth-child(2):hover{ background-image: url(../images/direct/safety-2-1.png) }
#safety>div>ul>li:nth-child(3){ background-image: url(../images/direct/safety-3.png); }
#safety>div>ul>li:nth-child(3):hover{ background-image: url(../images/direct/safety-3-1.png) }
#safety>div>ul>li:nth-child(4){ background-image: url(../images/direct/safety-4.png); }
#safety>div>ul>li:nth-child(4):hover{ background-image: url(../images/direct/safety-4-1.png) }

#custom>div>ul>li:nth-child(1){ background-image: url(../images/direct/custom-1.png); }
#custom>div>ul>li:nth-child(1):hover{ background-image: url(../images/direct/custom-1-1.png) }