.quw-problem span{ display: inline-block; line-height: 1.4; min-width: 60px; font-size: 25px; color: #333; font-weight: bold; z-index: 0; position: absolute; left: 0; width: 100%; bottom: -6px; z-index: 1; } .quw-problem h5{ position: relative; font-size: 75px; font-weight: bold; color: rgba(40, 123, 246 , 0.2); margin: 0; } .quw-problem{ text-align: center; padding-bottom: 30px; } .quw-problem h5::after{ content: ""; width: 132px; height: 38px; background: #F3F8FF; display: inline-block; position: absolute; bottom: -10px; left: 532px; } .quw-problemBox{ display: flex; justify-content: space-between; color: #fff; padding-bottom: 60px; } .quw-problem-box{ width: 226px; height: 140px; border-radius: 10px; text-align: center; padding: 20px 0 30px 0; background-repeat: no-repeat; background-position: right 10px bottom; font-size: 0; } .quw-problem-box h5{ font-size: 18px; font-weight: bold; margin: 0 0 24px 0; } .quw-problembox{ width: 50%; display: inline-block; } .quw-problembox p{ font-size: 23px; margin: 0; } .quw-problembox span{ font-size: 16px; } .quw-problem-box-g{ background-color: #21CC70; background-image: url(../images/zdbg2/quw-About.png); } .quw-problem-box-lg{ background-color: #0ED2B8; background-image: url(../images/zdbg2/quw-parper.png); } .quw-problem-box-b{ background-color: #5B9EF9; background-image: url(../images/zdbg2/quw-data.png); } .quw-problem-box-p{ background-color: #7278EF; background-image: url(../images/zdbg2/quw-lc.png); } .quw-problem-box-s{ background-color: #CBA478; background-image: url(../images/zdbg2/quw-hz.png); } .quw-problem-gc{ padding-left: 370px; position: relative; padding-bottom: 50px; } .quw-problem-gcimg{ width: 214px; height: 239px; } .quw-problem-gc-title{ position: absolute; width: 303px; display: flex; justify-content: space-between; align-items: center; left: 597px; } .quw-problem-gc-title img{ width: 84px; height: 13px; } .quw-problem-gc-txt{ width: 201px; display: flex; justify-content: space-between; align-items: center; } .quw-problem-gc-txt span{ font-size: 18px; color: #333333; } .quw-problem-gc-txt h5{ margin: 0; font-size: 48px; font-weight: bold; } .quw-problem-gc-title-y{ top: 80px; } .quw-problem-gc-title-b{ top: 170px; } .quw-problem-gc-title-y h5{ color: #F6A132; } .quw-problem-gc-title-b h5{ color: #287BF6; } .quw-problem-tb{ height: 111px; border-radius: 10px; box-shadow: 0 3px 16px #9BBDEE; text-align: left; display: flex; justify-content: space-between; align-items: center; margin-bottom: 40px; } .quw-problem-tbBox h5{ font-size: 20px; font-weight: bold; margin: 0; margin-bottom: 12px; } .quw-problem-tb span{ font-size: 18px; color: #333333; display: flex; align-items: center; } .quw-problem-tb span b{ font-size: 26px; font-weight: bold; } .quw-problem-tb span em{ color: rgba(51, 51, 51, 0.3); } .quw-problem-tbBox-g{ position: relative; } .quw-problem-tbBox{ /* flex: auto; */ text-align: left; /* padding-left: 124px; */ } .quw-problem-tbBox-b h5{ color: #287BF6; } .quw-problem-tbBox-g h5{ color: #4DC187; } .quw-problem-tbBox-r h5{ color: #FF4224; } .quw-problem-tbBox-b span b{ color: #287BF6; margin: 0 12px; } .quw-problem-tbBox-g span b{ color: #4DC187; margin: 0 12px; } .quw-problem-tbBox-r span b{ color: #FF4224; margin: 0 12px; } .quw-problem-tbBox-g::before{ content: ""; height: 44px; border-left: 2px dotted #D5DDE5; position: absolute; top: 14px; left: -118px; } .quw-problem-tbBox-g::after{ content: ""; height: 44px; border-left: 2px dotted #D5DDE5; position: absolute;top: 14px; right: -118px; } .quw-problem-tb-box{ display: flex; justify-content: center; flex: auto; }