.section-box .section:nth-child(even) { background-color: #f6f8fb; } .section-box .section:nth-child(odd) { background-color: #fff; } .pro-box { margin-top: 50px; } .pro-box .item { position: relative; width: 410px; height: 440px; box-shadow: 0px 0px 30px 0px rgba(228, 234, 251, 0.75); background-color: #FFFFFF; } .pro-box .item::before { content: ''; position: absolute; left: 0; width: 3px; height: 48px; top: 59px; background-color: #dd3833; } .pro-box .item .item-wrap { padding: 50px; } .pro-box .item .item-wrap .item-head .item-name { color: #333333; font-size: 26px; line-height: 42px; } .pro-box .item .item-wrap .item-head p { color: #e3e3e3; text-transform: uppercase; line-height: 24px; } .pro-box .item .item-wrap .item-head::after { content: ''; display: block; width: 26px; height: 0; border-bottom: 1px solid #e6e6e6; margin-top: 16px; } .pro-box .item .item-wrap .item-desc { margin-top: 20px; font-size: 16px; color: #8b92a0; line-height: 36px; height: 108px; } .pro-box .item .item-wrap .item-price { font-size: 20px; color: #dd3834; margin-top: 30px; } .pro-box .item .item-wrap .item-price span { font-size: 26px; } .pro-box .item .item-wrap .item-tools { margin-top: 20px; } .pro-box .item .item-wrap .item-tools .btn { margin: 0; } .pro-box .item:nth-child(1) .item-head { background: url("../Image/bdxy/icon-1.png") right 0 no-repeat; } .pro-box .item:nth-child(2) .item-head { background: url("../Image/bdxy/icon-2.png") right 0 no-repeat; } .pro-box .item:nth-child(3) .item-head { background: url("../Image/bdxy/icon-3.png") right 0 no-repeat; } .category-tab { overflow: hidden; margin: 0 auto; } .category-tab .tab-head { max-width: 1000px; margin: 0 auto; } .category-tab .tab-head li { display: block; width: 20%; text-align: center; height: 50px; float: left; font-size: 18px; color: #333; line-height: 50px; border: 1px solid #DEDEDE; border-left: none; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; cursor: pointer; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .category-tab .tab-head li:first-child { border-left: 1px solid #dedede; } .category-tab .tab-head li.active { background-image: -moz-linear-gradient(-170deg, #1e3c72 0%, #2a5298 100%); background-image: -webkit-linear-gradient(-170deg, #1e3c72 0%, #2a5298 100%); background-image: -ms-linear-gradient(-170deg, #1e3c72 0%, #2a5298 100%); color: #fff; border: 1px solid #2a5298; } .category-tab .tab-con .tab-item { display: none; } .category-tab .tab-con .tab-item.active { display: block; } .tab-box { padding-top: 30px; padding-bottom: 30px; } .tab-box .leftbar { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; width: 260px; padding-left: 44px; padding-top: 55px; padding-bottom: 60px; float: left; background-color: #FFFFFF; } .tab-box .leftbar ul { border-left: 1px solid #e7e7e7; } .tab-box .leftbar ul li { flex: 0 0 25%; max-height: 25%; padding-left: 25px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; position: relative; } .tab-box .leftbar ul li::before { content: ''; width: 3px; height: 20px; background-color: #cdcdcd; display: block; position: absolute; left: -2px; -webkit-transition: all .3s; -moz-transition: all .3s; -ms-transition: all .3s; -o-transition: all .3s; transition: all .3s; } .tab-box .leftbar ul li h3 { font-size: 20px; line-height: 1; margin-bottom: 12px; } .tab-box .leftbar ul li p { font-size: 16px; color: #666666; line-height: 24px; } .tab-box .leftbar ul li.active::before { background-color: #dd3833; background-image: -moz-linear-gradient(-170deg, #d7d7d7 0%, #dd3833 0%, #ec4945 100%); background-image: -webkit-linear-gradient(-170deg, #d7d7d7 0%, #dd3833 0%, #ec4945 100%); background-image: -ms-linear-gradient(-170deg, #d7d7d7 0%, #dd3833 0%, #ec4945 100%); box-shadow: 0px 10px 20px 0px rgba(221, 56, 51, 0.26); height: 48px; } .tab-box .leftbar ul li.active h3 { color: #dd3833; font-weight: bold; } .tab-box .main-container { height: 550px; width: 1020px; float: right; background: #FFFFFF; } .tab-box .main-container .con { display: none; padding: 60px 50px; } .tab-box .main-container .con .con-wrap .con-img { width: 500px; } .tab-box .main-container .con .con-wrap .con-txt { width: 390px; font-size: 16px; color: #666666; line-height: 30px; } .tab-box .main-container .con .con-wrap .con-txt p { position: relative; padding-left: 20px; margin-bottom: 20px; } .tab-box .main-container .con .con-wrap .con-txt p::before { content: ''; top: 12px; left: 0; background-image: -moz-linear-gradient(-170deg, #d7d7d7 0%, #dd3833 0%, #ec4945 100%); background-image: -webkit-linear-gradient(-170deg, #d7d7d7 0%, #dd3833 0%, #ec4945 100%); background-image: -ms-linear-gradient(-170deg, #d7d7d7 0%, #dd3833 0%, #ec4945 100%); position: absolute; width: 6px; height: 6px; } .tab-box .main-container .con .con-wrap .show-content h3 { font-size: 18px; line-height: 36px; } .tab-box .main-container .con .con-wrap .show-content p { color: #666666; line-height: 26px; } .tab-box .main-container .con.active { display: block; } .gwrz-container { padding: 30px; } .gwrz-container .gwrz-img { box-shadow: 0px 0px 30px 0px rgba(228, 234, 251, 0.75); } .gwrz-container .gwrz-txt { width: 580px; } .gwrz-container .gwrz-txt h3 { font-size: 26px; color: #4e4e4e; line-height: 2; margin-bottom: 15px; } .gwrz-container .gwrz-txt p { padding-left: 20px; margin-bottom: 26px; position: relative; color: #666666; font-size: 16px; line-height: 36px; } .gwrz-container .gwrz-txt p::before { content: ''; top: 12px; left: 0; background-image: -moz-linear-gradient(-170deg, #d7d7d7 0%, #dd3833 0%, #ec4945 100%); background-image: -webkit-linear-gradient(-170deg, #d7d7d7 0%, #dd3833 0%, #ec4945 100%); background-image: -ms-linear-gradient(-170deg, #d7d7d7 0%, #dd3833 0%, #ec4945 100%); position: absolute; width: 6px; height: 6px; } .sb-container .item { flex: 0 0 48%; max-width: 48%; background-color: #fff; padding: 46px 30px; } .sb-container .item .item-name { color: #4e4e4e; font-size: 26px; margin-top: 20px; line-height: 2; } .sb-container .item .item-desc p { color: #666666; padding-left: 20px; position: relative; color: #666666; font-size: 16px; line-height: 36px; } .sb-container .item .item-desc p::before { content: ''; top: 12px; left: 0; background-image: -moz-linear-gradient(-170deg, #d7d7d7 0%, #dd3833 0%, #ec4945 100%); background-image: -webkit-linear-gradient(-170deg, #d7d7d7 0%, #dd3833 0%, #ec4945 100%); background-image: -ms-linear-gradient(-170deg, #d7d7d7 0%, #dd3833 0%, #ec4945 100%); position: absolute; width: 6px; height: 6px; } .tips { font-size: 26px; text-align: center; color: #4e4e4e; margin-top: 40px; line-height: 46px; } .partner-box { border: 1px solid #f0f0f0; } .partner-box .item { border: 1px solid #f0f0f0; width: calc(100%/6); height: 110px; position: relative; -webkit-transition: all .3s; -moz-transition: all .3s; -ms-transition: all .3s; -o-transition: all .3s; transition: all .3s; -webkit-transform-origin: top; -moz-transform-origin: top; -ms-transform-origin: top; -o-transform-origin: top; transform-origin: top; } .partner-box .item img { max-width: 80%; max-height: 50%; position: absolute; margin: auto; top: 0; bottom: 0; left: 0; right: 0; -webkit-transition: all .3s; -moz-transition: all .3s; -ms-transition: all .3s; -o-transition: all .3s; transition: all .3s; -webkit-filter: grayscale(0.65); filter: grayscale(0.65); } .partner-box .item:hover img { -webkit-filter: grayscale(0); filter: grayscale(0); max-width: 85%; max-height: 55%; }