.main-con,.footer,.header{ width: 100%; min-width: 1200px; margin: 0 auto; } .banner img{ display: block; width: 100%; } .demonstration-pic{ width: 100%; max-width: 1200px; display: block; margin: 10px auto; } .scences-title{ text-align: center; padding: 20px 0; } .scences-title h3{ font-size: 38px; margin-bottom: 30px; line-height: 38px; } .scences-title p{ font-size: 16px !important; line-height: 26px; color: #2f2f2f; } .scences ul{ width: 1192px; display: flex; flex-wrap: wrap; position: relative; margin: 0 auto; } .scences ul li{ width: 25%; height: 320px; padding-right:25px; position: relative; box-sizing: border-box; margin-bottom: 25px; } .scences ul li p{ width: 100%; height: 20px; text-align: center; position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: auto; font-size: 19px; color: #fff; } .statis .cont{ width: 100%; max-width: 1200px; margin: 30px auto 0; } .statis ul{ padding: 20px 94px; display: flex; justify-content: space-between; flex-wrap: wrap; } .statis ul li{ display: inline-block; width: 260px; height: 180px; vertical-align: top; } .statis ul li .icon{ background: url(../images/index/statis/sprite.png) no-repeat } .statis ul li h3{ margin-top: 16px; font-size: 18px; color: #2f2f2f; } .statis ul li p{ font-size: 12px; color: grey; line-height: 24px; margin-top: 30px; } .statis ul li .icon:nth-child(1){ height: 39px; width: 40px; background-position: -178px 0; } .statis ul li .icon:nth-child(2){ height: 39px; width: 36px; background-position: -218px 0; } .statis ul li .icon:nth-child(3){ height: 36px; width: 40px; background-position: -254px 0; } .statis ul li .icon:nth-child(4){ height: 36px; width: 36px; background-position: -294px 0; } .chart { padding: 30px 0; } .chart .cont{ width: 100%; max-width: 1200px; margin: 0 auto; } .chart .cont img{ width: 100%; display: block; border: 1px solid #f1f1f1; box-shadow: 10px 40px 50px #eee; box-sizing: border-box; } .chart p{ font-size: 14px; color: #2f2f2f; margin-top: 68px; text-align: center; } .alarm ul { width: 1200px; max-width: 100%; margin: 0 auto; padding: 20px 10px; box-sizing: border-box; display: flex; justify-content: center; } .alarm ul li { width: 25%; height: 360px; padding-top: 110px; box-sizing: border-box; margin-left: 10px; text-align: center; vertical-align: top; background-color: #fff; border: 1px solid #eaeaea; margin-bottom: 20px; box-sizing: border-box; } .alarm ul li:nth-child(1){ margin-left: 0; } .alarm ul li .icon{ width: 48px; height: 48px; margin: 0 auto; } .alarm ul li:nth-child(1) .icon{ background: url(../images/index/statis/secure_icon.png) no-repeat; } .alarm ul li:nth-child(2) .icon{ background: url(../images/index/statis/secure_icon.png) -53px 0 no-repeat; } .alarm ul li:nth-child(3) .icon{ background: url(../images/index/statis/secure_icon.png) -107px 0 no-repeat; } .alarm ul li:nth-child(4) .icon{ background: url(../images/index/statis/secure_icon.png) -158px 0 no-repeat; } .alarm ul li p{ font-size: 20px; color: #2f2f2f; font-weight: 600; text-align: center; margin-top: 56px; } .layout-item { width: 100%; max-width: 1200px; margin: 0 auto; padding: 20px 10px; box-sizing: border-box; } .layout-item .layout-item-title{ color: #0070c0; font-size: 24px; padding-bottom: 30px; } .layout-item .layout-item-title .icon{ padding: 0 15px 0 10px; } .layout-item .tab-wrap .tab-head-cont{ } .layout-item .tab-wrap .tab-head{ display: inline-block; padding: 9px 16px; color: #333; font-size:18px; font-weight: 600; cursor: pointer; } .layout-item .tab-wrap .tab-head.active{ color: #265d3d; margin-bottom: -1px; border: 1px solid #eee; border-top: solid 2px #265d3d; border-bottom: 0; } .tab-cont-conatiner{ padding: 10px 16px; border: solid 1px #eee; } .layout-item .tab-wrap .tab-cont{ display: none; padding: 15px; } .layout-item .tab-wrap .tab-cont li{ padding-bottom: 20px; } .layout-item .tab-wrap .tab-cont li p{ padding-bottom: 20px; } .layout-item .tab-wrap .tab-cont li .tab-cont-title{ color: #333; font-size: 14px; line-height: 1.4; overflow-x: hidden; font-family: "microsoft yahei", "微软雅黑"; font-weight: 600; padding: 8px; } .layout-item .tab-wrap .tab-cont li .tab-cont-title::before{ content: "▶"; color: red; padding-right: 2px; } .layout-item .tab-wrap .tab-cont li p{ color: #666; font-size: 14px; line-height: 1.6; text-indent: 18px; padding-top: 10px; } .advantage{ width:100%; max-width: 1200px; margin: 0 auto; padding:0 20px; box-sizing: border-box; padding-bottom: 80px; } .advantage-title{ text-align: center; color: rgb(0, 112, 192); font-size: 24px; padding: 30px 0; } .advantage-subtitle{ text-indent: 2em; line-height: 1.5; color: #666; font-size: 14px; font-family: "microsoft yahei", "微软雅黑"; padding-bottom: 25px; } .advantage img{ max-width: 100%; margin: 0 auto; display: block; } .advantage table{ border-collapse: collapse; border-spacing: 0; margin: 60px auto 0; } .advantage table tr td{ border: 1px solid #ddd; padding: 8px 12px; line-height: 1.5; word-break: break-all; font-size: 14px; } .advantage table tr td:nth-child(2){ min-width: 95px; } .advantage table tr td:nth-child(1),.advantage table tr td:nth-child(2){ color: rgb(31, 73, 125); font-weight: 600; }