/*产品展示*/ .probg { background-color: #f2f2f2; padding-top: 20px; } .probg .playnum li { float: left; text-align: left; width: 349px; border-right: 1px solid #d9d9d9; padding: 34px 0 32px 0; background-position: 45px center; background-repeat: no-repeat; } .probg .playnum li:hover { background-color: #fff; } .probg .playnum li a { margin-left: 105px; cursor: pointer; } .probg .playnum li strong { display: block; font-size: 22px; line-height: 22px; color: #404040; margin-bottom: 12px; } .probg .playnum li p { font: 14px/14px "arial"; color: rgba(64, 64, 64, 0.5); text-transform: uppercase; } .probg .playnum li#fir { border-left: 1px solid #d9d9d9; width: 348px; background-image: ; } .probg .playnum li#fir:hover { background-image: ; } .probg .playnum li#sec { background-image: ; } .probg .playnum li#sec:hover { background-image: ; } .probg .playnum li#thir { background-image: ; } .probg .playnum li#thir:hover { background-image: ; } .probg .playnum li#four { background-image: ; } .probg .playnum li#four:hover { background-image: ; } #productshow { width: 1394px; height: 563px; margin: 60px auto; overflow: hidden; border: 1px solid #d9d9d9; } #productshow .demos { width: 950px; float: left; -webkit-box-shadow: 0 0 4px #ccc; box-shadow: 0 0 4px #ccc; height: 563px; } .prodemo { float: right; width: 446px; text-align: center; } .prodemo h1 { font-size: 36px; color: #404040; text-align: center; margin-top: 50px; padding-bottom: 28px; background: no-repeat bottom center; } .proimg { width: 100%; height: 285px; } .prodemo p { font-size: 16px; line-height: 30px; text-align: center; color: #404040; padding: 0 50px; } .prodemo a { font-size: 14px; color: #666666; line-height: 32px; border: 1px solid #adadad; display: inline-block; padding: 0 30px; margin-top: 30px; } .prodemo a:hover, .prodemo a:active, .songbang .content .right a.more:hover, .songbang .content .right a.more:active { background-color: #f7ecab; border-color: #f7ecab; } #productshow>ul { display: none; } .currentshow { background-color: #fff; } #productshow>.boxshow { display: block; } /*案例展示*/ .title strong { font-size: 36px; line-height: 36px; color: #f9cd09; display: block; margin-bottom: 18px; } .title p { font-size: 16px; line-height: 16px; padding-bottom: 20px; color: #666666; background: no-repeat bottom center; } .casedemo { margin: 40px auto 80px auto; } .casedemo li { -webkit-box-shadow: 0 0 20px 4px #ccc; box-shadow: 0 0 20px 4px #ccc; } .casedemo li { position: relative; } .casedemo li b { font-weight: normal; opacity: 0; -webkit-transition: all ease-in-out 0.8s; -o-transition: all ease-in-out 0.8s; transition: all ease-in-out 0.8s; color: #fff; font-size: 30px; line-height: 30px; } .casedemo li.fir { width: 781px; height: 490px; float: left; } .casedemo li.sec { width: 588px; height: 230px; float: right; margin-bottom: 30px; } .casedemo li.thir { margin: 0; } .casedemo li a div { position: absolute; top: 0; bottom: 0; left: 0; right: 0; height: 160px; margin: auto; -webkit-transition: all ease-in-out 0.3s; -o-transition: all ease-in-out 0.3s; transition: all ease-in-out 0.3s; } .casedemo li p { font-size: 24px; line-height: 57px; height: 57px; border: 1px solid #fff; font-weight: bold; color: #fff; padding: 0 18px; position: absolute; left: 0; top: 0; width: 250px; right: 0; bottom: 0; margin: auto; -webkit-text-shadow: 2px 4px 1px rgba(0, 0, 0, 0.4); -moz-text-shadow: 2px 4px 1px rgba(0, 0, 0, 0.4); -ms-text-shadow: 2px 4px 1px rgba(0, 0, 0, 0.4); -o-text-shadow: 2px 4px 1px rgba(0, 0, 0, 0.4); text-shadow: 2px 4px 1px rgba(0, 0, 0, 0.4); -webkit-transition: all ease-in-out 0.8s; -o-transition: all ease-in-out 0.8s; transition: all ease-in-out 0.8s; /* 有了这个就自动居中了 */ } .casedemo li a:hover div { width: 100%; opacity: 1; background-color: rgba(0, 56, 116, 0.6); } .casedemo li a:hover div p { color: #f7ecab; border: 0; top: -60px; } .casedemo li a:hover div b { font-size: 16px; line-height: 35px; color: #fff; display: block; border-top: 1px solid #fff; border-bottom: 1px solid #fff; position: absolute; top: 84px; left: 0; right: 0; width: 250px; margin: auto; opacity: 1; } /*关于宋邦*/ .songbang .title { text-align: center; background: no-repeat center; } .songbang .title div { display: inline-block; } .songbang .title .left { color: rgba(66, 66, 68, 0.6); margin-right: 30px; } .songbang .title .left em { display: block; font: normal normal 16px/16px "arial"; margin-bottom: 6px; } .songbang .title.left b { font: normal 16px/16px "microsoft yahei"; } .songbang .title .right { font-size: 36px; line-height: 36px; } .songbang .content>strong { font-size: 16px; line-height: 80px; color: #666; display: block; font-weight: normal; text-align: center; } .songbang .content .left { width: 50%; float: left; height: 370px; background: no-repeat center; } .songbang .content .left video { padding: 0; margin: 0; display: block; object-fit: initial; } .songbang .content .left .togglevideo { display: none; position: fixed; width: 100%; height: 100%; z-index: 7888; top: 0; left: 0; background: rgba(0, 0, 0, 0.5); } .songbang .togglevideo .cover{ width: 800px; height:450px; position: absolute; top: 50%; left: 50%; z-index: 10; margin: -225px 0 0 -400px; } .songbang .togglevideo .onoff{ position: relative; } .songbang .togglevideo .cover a{ position: absolute; width: 0; height: 0; padding: 25px 0 0 25px; overflow: hidden; right: 0px; top: 0px; z-index: 9999; background: url(/uploads/image/tnimages/close.png) no-repeat; _background: no-repeat } .songbang .content .right { float: right; width: 650px; padding-right: 10px; padding-left: 40px; text-align: left; height: 370px; } .songbang .content .right { font-size: 14px; line-height: 28px; color: #737373; background-color: #f2f2f2; } .songbang .content .right>strong { font-size: 24px; line-height: 24px; color: #666666; display: block; margin-top: 67px; margin-bottom: 30px; } .songbang .content .right a.more { display: inline-block; font-size: 14px; color: #666666; line-height: 30px; padding: 0 27px; margin-top: 40px; border: 1px solid #adadad; }