.about2 { background-color: #fff; padding: 20px 0 220px 0; margin-bottom: 20px; } .wrapper { box-sizing: border-box; width: 96%; margin: auto; max-width: 1200px; } /*.clearfix-time {*/ /* display: block;*/ /*}*/ .about2 ul { background: url(sy51.png) repeat-y center; position: relative; height: 3600px; } /*.clearfix-time {*/ /* display: block;*/ /* zoom: 1;*/ /*}*/ .about2 li:before { background: url(sy50.png) no-repeat center center; left: -54px; top: 12px; content: ""; display: block; position: absolute; width: 17px; height: 17px; } /*.about2 li h4:hover{*/ /* color: #F8F8F8;*/ /* transition: all 1s;*/ /* transform: translateY(-15px);*/ /*}*/ .about2 li h3 { font-size: 16px; font-weight: 700; line-height: 1.2; } .about2 li h3:hover { color: #024393; TEXT-DECORATION: underline; } .about2 li h4 { position: relative; display: block; text-decoration: none; color: #ecf0f1; text-transform: uppercase; padding: 4px 0; transition: 0.5s; } .about2 li h4::after { position: absolute; content: ""; width: 100%; height: 1px; top: 100%; left: 0; background: #3498db; transition: transform 0.5s; transform: scaleX(0); transform-origin: right; } .about2 li h4:hover { color: #006699; } /*.about2 li h4:hover::after {*/ /* transform: scaleX(1);*/ /* transform-origin: left;*/ /*}*/ .f30 { font-size: 14px; } .about2 li:nth-child(2n):before { background: url(sy50.png) no-repeat center center; right: -46px; top: 12px; left: auto; content: ""; display: block; position: absolute; width: 17px; height: 17px; } .about2 li h4 { color: #333; transition: all 1s; } .about2 li p { color: #959595; margin-top: 10px; text-overflow: ellipsis; display: -webkit-box; -webkit-box-orient: vertical; margin-bottom: 10px; font-size: 13px; } .clearfix-time:after { content: '\20'; display: block; clear: both; visibility: hidden; line-height: 0; height: 0; } .about2 li:nth-child(1) { margin-top: 0; } /* 表示1-3之间的间距 */ .about2 li { /*float: right;*/ width: 45%; /*text-align: left;*/ position: absolute; margin-top: 10px; margin-left: 559px; } .about2 li:nth-child(2n) { /*float: left;*/ text-align: right; margin-top: 10px; margin-left: 14px; } .about3 ul { background: url(sy51.png) repeat-y left; background-position-x: 23px; position: relative; height: 1370px; overflow: hidden; } /*.clearfix-time {*/ /* display: block;*/ /* zoom: 1;*/ /*}*/ .about3 li:before { background: url(sy50.png) no-repeat center center; left: -35px; top: 12px; content: ""; display: block; position: absolute; width: 17px; height: 17px; } /*.about2 li h4:hover{*/ /* color: #F8F8F8;*/ /* transition: all 1s;*/ /* transform: translateY(-15px);*/ /*}*/ .about3 li h3 { font-size: 12px; line-height: 18px; } .about3 li h3:hover { color: #024393; TEXT-DECORATION: underline; } .about3 li h4 { position: relative; display: block; text-decoration: none; text-transform: uppercase; padding: 4px 0; color: #333; transition: all 1s; font-size: 12px; } .about3 li h4::after { position: absolute; content: ""; width: 100%; height: 1px; top: 100%; left: 0; background: #3498db; transition: transform 0.5s; transform: scaleX(0); transform-origin: right; } .about3 li h4:hover { color: #006699; } .about3 li p { color: #959595; margin-top: 10px; text-overflow: ellipsis; display: -webkit-box; -webkit-box-orient: vertical; margin-bottom: 10px; font-size: 13px; } .clearfix-time:after { content: '\20'; display: block; clear: both; visibility: hidden; line-height: 0; height: 0; } .about3 li:nth-child(1) { margin-top: 0; } /* 表示1-3之间的间距 */ .about3 li { /*float: right;*/ width: 190px; /*text-align: left;*/ position: absolute; margin-top: 10px; margin-left: 50px; }