h2.bt { background: url(../images/h-1.png) no-repeat center 14px; text-align: center; font-size: 34px; color: #e60012; line-height: 1; span { font-weight: 100; color: #434343; padding-right: 14px; } p { margin-top: 17px; font-size: 16px; color: #666666; font-weight: 500; } } .c1 { margin-top: 50px; margin-bottom: 32px; h2 { margin-bottom: 25px; } .list2 { li { float: left; margin-right: 13px; background: #f2f2f2; text-align: center; box-sizing: border-box; padding-top: 32px; &:last-child { margin-right: 0; } h3 { text-transform: uppercase; font-size: 18px; color: #333333; line-height: 1; margin-bottom: 18px; &:after { content: ""; display: block; width: 20px; margin: 0 auto; height: 1px; background: #999999; margin-top: 16px; } p { margin-top: 11px; font-size: 12px; color: #999999; font-weight: 500; } } a.ck { width: 112px; margin: 0 auto; margin-bottom: 24px; display: block; padding-left: 27px; background: url(../images/kf1.png) no-repeat 0 center; font-size: 14px; color: #e60012; height: 18px; line-height: 18px; box-sizing: border-box; } .tu { padding: 5px; } &:hover { background: #e60012; h3 { color: #fff; &:after { background: #ff6470; } p { color: #ff6470; } } a.ck { color: #fff; background: url(../images/kf1h.png) no-repeat 0 center; } } } } } .c2 { margin-top: 32px; margin-bottom: 104px; .btx { line-height: 52px; background: url(../images/h-2.png) no-repeat 0 bottom; height: 52px; margin-bottom: 12px; h2 { height: 52px; font-size: 18px; color: #333333; text-transform: uppercase; b { color: #e60012; } span { font-weight: 500; font-size: 12px; color: #666666; padding-left: 6px; } } a.ck { display: block; font-size: 14px; color: #e60012; } .list2 { li { float: left; font-size: 14px; color: #333333; &:after { content: '-'; padding: 0 26px; } &.on { color: #e60012; } } } } .content { .list3 { li { float: left; margin-right: 30px; &:last-child { margin-right: 0; } a.img { display: block; position: relative; img { width: 380px; height: 285px; } h3 { line-height: 40px; height: 40px; font-weight: 500; width: 100%; color: #fff; font-size: 14px; background: rgba(0, 0, 0, .6); position: absolute; z-index: 1; bottom: 0; text-align: center; } } } } } } .c3 { background: #f8f8f8; padding-top: 84px; h2 { margin-bottom: 43px; } .content { position: relative; .list3 { position: absolute; z-index: 111; background: #fff; text-align: center; width: 880px; margin-left: -440px; left: 50%; li { font-size: 16px; float: left; color: #333333; width: 219px; height: 60px; line-height: 60px; padding-right: 1px; background: url(../images/su1.png) no-repeat right center; &:last-child { background: none; } &.on, &:hover { background: url(../images/cx.png) repeat-x; } } } .list2 { li { float: left; position: relative; img { width: 1920px; height: 700px; } .zi { width: 100%; position: absolute; z-index: 111; height: 120px; bottom: 0; background: rgba(0, 0, 0, .7); color: #fff; box-sizing: border-box; padding-top: 10px; h3 { font-weight: 500; font-size: 18px; line-height: 38px; &:after { content: ''; display: block; background: #e60012; width: 30px; height: 1px; } } dd { font-size: 14px; margin-top: 8px; line-height: 24px; width: 856px; } a.ck { display: block; text-align: center; font-size: 14px; color: #e60012; border: 1px solid #e60012; width: 158px; line-height: 38px; height: 38px; right: 0; top: 38px; position: absolute; z-index: 1111; } } } } } } .c4 { margin-top: 88px; margin-bottom: 100px; .list2 { text-align: center; display: flex; justify-content: center; margin-top: 25px; margin-bottom: 20px; li { margin: 0 24px; display: flex; align-items: center; justify-content: center; border-radius: 100px; font-size: 14px; width: 100px; height: 100px; background: url(../images/list1.png) no-repeat center 0; a { color: #333333; padding: 0 22px; display: block; } &:hover { background: url(../images/list1h.png) no-repeat center 0; a { color: #fff; } } } } .content { position: relative; .xx { position: absolute; z-index: 111; top: 50%; cursor: pointer; transform: translateY(-50%); } .next { left: -74px; } .prev { right: -74px; } .bd { overflow: hidden; .list3 { li { float: left; margin-right: 40px; a.img { display: block; position: relative; img { width: 580px; height: 400px; } h3 { font-weight: 500; text-align: center; font-size: 14px; color: #fff; line-height: 40px; height: 40px; background: rgba(0, 0, 0, .7); position: absolute; z-index: 111; width: 100%; bottom: 0; } } } } } } } .c5 { background: url(../images/c5.png); padding-top: 78px; padding-bottom: 104px; h2 { margin-bottom: 42px; } .tu1 { text-align: center; } .zi { text-align: center; color: #666; font-size: 14px; line-height: 28px; margin-top: 14px; margin-bottom: 25px; } } .c6 { background: url(../images/hf.png) no-repeat center 30px; margin-top: -30px; margin-bottom: 68px; .list2 { li { width: 300px; float: left; padding: 0 42px; padding-top: 76px; height: 300px; overflow: hidden; box-sizing: border-box; .tu { text-align: center; margin-bottom: 23px; } .zi { line-height: 1; .su { color: #e60012; font-size: 60px; font-family: simhei; vertical-align: top; height: 60px; margin-top: -7px; } .zi1 { h3 { font-weight: 500; color: #fff; line-height: 30px; font-size: 18px; } dd { font-size: 12px; text-transform: uppercase; color: #999999; line-height: 1; } } } &:nth-child(1) { padding: 0 54px; padding-top: 76px; } &:nth-child(2) { padding: 0 76px; padding-top: 76px; } &:hover { background: url(../images/dbg.png) no-repeat center 0; .zi { .su { color: #fff; } .zi1 { dd { color: #fff; } } } } } } } .c7 { margin-bottom: 68px; h2 { margin-bottom: 32px; } .content { position: relative; .xx { position: absolute; z-index: 111; top: 50%; cursor: pointer; transform: translateY(-50%); } .next { left: -74px; } .prev { right: -74px; } .bd { overflow: hidden; .list3 { li { float: left; margin-right: 32px; a.img { display: block; border: 1px solid #e1e1e1; img { width: 274px; height: 196px; } } h3 { font-weight: 500; text-align: center; font-size: 14px; line-height: 40px; a { color: #333333; } } } } } } } .c8 { background: #f2f2f2; padding-bottom: 85px; .c8-1 { width: 400px; .c8-1-1 { position: relative; height: 268px; background: #fff; border-top: 2px solid #e60012; padding: 14px 20px 0; box-sizing: border-box; h2 { line-height: 46px; border-bottom: 1px solid #dedede; color: #333333; font-size: 18px; text-transform: uppercase; a { font-size: 12px; font-weight: 500; float: right; } } .content { .xx { position: absolute; bottom: 0; z-index: 111; cursor: pointer; } .next { right: 0px; } .prev { right: 41px; } .list2 { li { padding-top: 24px; a { display: block; font-size: 16px; color: #333; line-height: 42px; &:after { content: ''; display: block; width: 65px; height: 1px; background: #333333; } } dd { font-size: 14px; color: #666666; margin-top: 15px; line-height: 25px; } &:hover{ a { color: #e60012; } } } } } } .c8-1-2 { margin-top: 11px; background: #fff; padding: 14px 20px 0; height: 350px; box-sizing: border-box; h2 { line-height: 46px; border-bottom: 1px solid #dedede; color: #333333; font-size: 18px; text-transform: uppercase; a { font-size: 12px; font-weight: 500; float: right; } } .list3 { li { font-size: 14px; padding-left: 14px; line-height: 46px; background: url(../images/dian.png) no-repeat 0 center; a { color: #666666; } &:hover { background: url(../images/dianh.png) no-repeat 0 center; a { color: #e60012; } } } } } } .c8-2 { position: relative; background: #fff; border-top: 2px solid #e60012; padding: 14px 20px 0; box-sizing: border-box; width: 789px; height: 629px; h2 { line-height: 46px; border-bottom: 1px solid #dedede; color: #333333; font-size: 18px; text-transform: uppercase; a { font-size: 12px; font-weight: 500; float: right; } } .list4 { margin-top: 12px; li { padding: 22px 0; border-bottom: 1px solid #dedede; &:last-child { border-bottom: none; } .tu { width: 230px; height: 140px; img { width: 230px; height: 140px; } } .zi { width: 496px; h3 { font-weight: 500; font-size: 16px; color: #333; line-height: 48px; } dd { font-size: 14px; color: #666666; line-height: 25px; b { font-size: 14px; font-weight: 500; color: #e60012; } } } &:hover{ .zi{ h3{ color: #e60012; } } } } } } } .c9 { margin-top: 82px; margin-bottom: 70px; h2{ margin-bottom: 15px; } .content { position: relative; .xx { position: absolute; z-index: 111; top: 22px; cursor: pointer; //transform: translateY(-50%); } .next { left: -74px; } .prev { right: -74px; } .bd { overflow: hidden; .list3 { li { float: left; margin-right: 12px; a.img { display: block; border: 1px solid #dedede; padding:4px; img { width: 220px; height: 110px; } } h3 { font-weight: 500; text-align: center; font-size: 14px; line-height: 34px; a { color: #333333; } } &:hover{ a.img{ border-color: #e60012; } } } } } } }