.content .service-project { background-color: #FFFFFF; width: 100%; padding-top:60px; padding-bottom:60px; margin:0 auto; } .content .content-title { font-family: Microsoft YaHei; margin-top: 60px; font-size: 36px; color: #4A4A4A; text-align: center; } .content .content-desc { font-family: Microsoft YaHei; font-size: 14px; color: #4A4A4A; line-height: 24px; margin-left:auto; margin-right: auto; margin-top: 40px; padding-bottom: 81px; width: 1100px; } .content .service-project .project-title { font-family: Microsoft YaHei; font-size: 36px; color: #4A4A4A; text-align: center; } .content .service-project .project { position:relative; width:1100px; margin:0 auto; height: 500px; } .service-project .project .project-header { position:absolute; top:0; width: 100%; height: 140px; background: rgba(0,0,0,0.40); } .service-project .project .project-header-item { width:366px; height: 100%; background: transparent; float:left; color:white; } .service-project .project .active{ background: rgba(255,0,31,0.80); } .service-project .project .project-header-item-middle { border-left:1px solid #303334; border-right:1px solid #303334; } .project .item-img { width: 50px; height: 50px; margin-left: auto; margin-right: auto; margin-top:28px; background-repeat: no-repeat; background-position: center; } .project .project-header-item .title { text-align: center; font-size: 18px; margin-top:10px; color: #FFFFFF; } .project .project-content-desc { position:absolute; top:0; width:1100px; height: 100%; background-color: transparent; font-size: 14px; color: #FFFFFF; line-height: 24px; } .project .project-content-desc-1 { display: block; background-image: url(../images/supply-chain-1.jpg); } .project .project-content-desc-2{ display:none; background-image: url(../images/supply-chain-2.jpg); } .project .project-content-desc-3{ display:none; background-image: url(../images/supply-chain-3.jpg); } .project .project-content-desc .project-content-text{ margin-left:40px; margin-right:40px; } .project .project-content-desc p{ margin-top:200px; } .project .project-content-desc a { display: inline; border: 1px solid #EEEEEE; padding-left:22px; padding-right:22px; padding-top:3px; padding-bottom:3px; text-align: center; color:#FFFFFF; } .project .project-content-desc-button { margin-top:45px; } .project .project-content-desc-button-3 { margin-top:20px; } .project .project-content-desc-button-2{ float:left; margin-top:22px; margin-right: 20px; } .content .content-badges { margin:0 auto; width:1100px; margin-bottom: 40px; } .content-badges .content-badge { margin-left:10px; margin-right:10px; /*width: 100px;*/ width:160px; margin-bottom:46px; float:left; } .content-badges .content-badge img{ width: 100px; display: block; margin: 0 auto; height: 60px; } .content-badges .content-badge .badge-name { font-family: Microsoft YaHei; font-size: 14px; color: #9B9B9B; text-align: center; line-height: 24px; margin-top:10px; } .content .content-desc { padding-bottom: 40px; } .ep-1 { width: 991px; margin: 0 auto 100px; display: block; } .technology-box { width: 1120px; height: 400px; /*border: 1px solid red;*/ margin: 44px auto 0; position: relative; } .technology-box img { width: 224px; float: left; } .technology-box p { width: 224px; height: 400px; opacity: 0.9; background: rgba(13,51,95,0.70); position: absolute; left: 0; top: 0; } .technology-box p em { font-size: 12px; color: #ddd; font-style: normal; line-height: 24px; display: none; padding: 0 20px; } .technology-box p.show-2 { left: 224px } .technology-box p.show-3 { left: 448px } .technology-box p.show-4 { left: 672px } .technology-box p.show-5 { left: 896px } .technology-box p i { width: 80px; height: 80px; display: block; margin: 90px auto 0; } .technology-box p i { background-image: url(../images/show-1.png); background-size: 80% 80%; background-repeat: no-repeat; background-position: 50% 50%; } .technology-box p.show-1 i { background-image: url(../images/fd.png); } .technology-box p.show-2 i { background-image: url(../images/ly.png); } .technology-box p.show-3 i { background-image: url(../images/zk.png); } .technology-box p.show-4 i { background-image: url(../images/fs.png); } .technology-box p.show-5 i { background-image: url(../images/xw.png); } .technology-box p span { display: block; text-align: center; font-size: 18px; color: #FFFFFF; margin-top: 40px; margin-bottom: 16px; } .technology-box p:hover { background-color: rgba(0,0,0,0.90) } .technology-box p:hover em { display: block; } .technology-box p:hover i { width: 50px; height: 50px; margin: 60px auto 0; } .technology-box p:hover span { margin-top: 20px; font-size:14px; } .content .great-pro { padding-bottom: 220px; } .great-box { width: 1100px; height: 500px; /*border: 1px solid red;*/ margin: 44px auto 0; } .great-box .great-list { width: 504px; height: 148px; float: left; margin-bottom: 20px; margin-left: 90px; /*border: 1px solid green;*/ } .great-box .great-list.no-margin { margin-left: 0; } .great-box .great-list img { display: block; width: 148px; height: 148px; float: left; } .great-box .great-list p { font-size: 18px; width: 336px; color: #000000; float: left; margin: 10px 0 10px 20px; } .great-box .great-list span { font-size: 18px; width: 336px; font-size: 14px; color: #9B9B9B; line-height: 24px; float: left; margin: 0 0 0 20px; } .content .resource-supply-image-2 { margin-top: 44px; height: 430px; width:1100px; margin-left:auto; margin-right: auto; margin-bottom: 80px; background-image: url("../images/examp-banner.jpg"); cursor: pointer; } .content .resource-supply-image-2 .title{ margin-left:30px; padding-top:59px; font-family: Microsoft YaHei; font-size: 18px; color: #FFFFFF; font-weight: bold; } .content .resource-supply-image-2 .txt{ margin-top:40px; margin-left:30px; font-family: Microsoft YaHei; width:370px; font-size: 14px; color: #FFFFFF; line-height: 24px; } .content .resource-supply-image-2 .detail{ margin-top: 50px; margin-left:30px; font-family: Microsoft YaHei; font-size: 14px; color: #FFFFFF; border-left: 4px solid #FFFFFF; padding-left:16px; }