.bg-1{background: url(/uploads/image/slimages/bg_1.jpg) no-repeat center top #dcdcdc; padding-bottom: 55px} .bg_3{background: url(/uploads/image/slimages/bg_2.jpg) no-repeat center top #dcdcdc; height: 674px; padding: 60px 0px 15px 0px} .bg_4{ background: url(/uploads/image/slimages/bg_3.png) no-repeat center top; height: 157px; } .bg_5{ background: #35353b; height: 612px;} .bg_6{ background: url(/uploads/image/slimages/bg_ys.jpg) no-repeat center top; height: 807px;} .bg_7{ background: #36363a; padding-bottom: 60px;} .bg_8{ background: url(/uploads/image/slimages/bg_about.jpg) no-repeat center top;} .ul-1{ list-style: none; margin-top: 30px} .ul-1 li{ width: 262px; position: relative; height: 301px; overflow:hidden; color: #1a1a1a; background: #565a6f;float: left; margin-right: 40px; text-align: center; cursor: pointer} .ul-1 li:hover{ background: #ff4a00; transition: all 0.5s;} .ul-1 li a{ background: url(/uploads/image/slimages/on_1.png) no-repeat center bottom; width: 262px; height: 284px; position: absolute; display: block; z-index: 1000; left: 0px; bottom: 9px} .ul-1 li a:hover{ background: url(/uploads/image/slimages/on_hover.png) no-repeat center bottom; width: 262px; height: 284px; position: absolute; display: block; z-index: 1000; left:0px; bottom: 9px; transition: all 0.5s;} .ul-1 li div span{ font-size: 20px; line-height: 60px; z-index: 1000;position: relative; } .ul-1 li div p{ font-size: 16px; z-index: 1000; position: relative; } .ul-1 li:first-child div{ background: url(/uploads/image/slimages/ul_1.jpg) no-repeat center top; width: 262px; height: 284px; margin-top: 8px; padding-top: 30px } .ul-1 li:nth-child(2) div{background: url(/uploads/image/slimages/ul_2.jpg) no-repeat center top; width: 262px; height: 284px; margin-top: 8px; padding-top: 30px} .ul-1 li:nth-child(3) div{background: url(/uploads/image/slimages/ul_3.jpg) no-repeat center top; width: 262px; height: 284px; margin-top: 8px; padding-top: 30px} .ul-1 li:last-child div{background: url(/uploads/image/slimages/ul_4.jpg) no-repeat center top; width: 262px; height: 284px; margin-top: 8px; padding-top: 30px} .ul-1 li:first-child::before:hover{ transform: rotatey(turn)} .ul-1 li:last-child{ margin-right: 0px} .ul-2{ list-style: none} .ul-2 li{ width: 338px; margin-top: 19px; height: 106px; background:url(/uploads/image/slimages/ul_bg.jpg) no-repeat center top; float: left; padding: 15px; margin-right: 40px } .ul-2 li div{ padding: 15px 0px 0px 120px} .ul-2 li div span{ font-size: 20px; font-weight: bold; } .ul-2 li div p{ font-size: 16px; line-height: 26px} .ul-2 li:last-child{ margin-right: 0px;} /*标题*/ .title-1{ font-size: 40px; color: #494949; text-align: center; line-height: 60px; position: relative; margin-top: 55px;} .title-1:before{ width: 158px; height: 28px; display: block; background:url(/uploads/image/slimages/before_1.png) no-repeat left; content: ""; left: 150px; top: 25px; position: absolute} .title-1:after{ width: 158px; height: 28px; display: block; background:url(/uploads/image/slimages/after_1.png) no-repeat left; content: ""; right: 150px; top: 25px; position: absolute} .ititle-1{ width:315px; height: 47px; background: url(/uploads/image/slimages/new_p.jpg) no-repeat 60px top #414246; border-radius: 25px; margin: 0 auto; margin-top: 15px;} .ititle-1 p{ font-size: 28px; color: #ffffff; font-weight: bold; padding-left: 120px} .title-2{ font-size: 40px; color: #ffffff; text-align: center; line-height: 60px; position: relative; margin-top: 30px;} .title-2:before{ width: 158px; height: 28px; display: block; background:url(/uploads/image/slimages/before_2.png) no-repeat left; content: ""; left: 150px; top: 25px; position: absolute} .title-2:after{ width: 158px; height: 28px; display: block; background:url(/uploads/image/slimages/after_2.png) no-repeat left; content: ""; right: 150px; top: 25px; position: absolute} /* 本例子css */ .slidetxtbox{ width:100%; text-align:left; } .slidetxtbox .hd{ background:#35353b; width: 50%; height: 611px; position:relative; float: left } .slidetxtbox .hd ul{ float:left; position:absolute; left:40%; width: 603px; margin: 0 auto; background:#35353b; padding-top: 20px } @media only screen and (min-width: 1024px) and (max-width: 1600px) { .slidetxtbox .hd ul{ float:left; position:absolute; left:10%; width: 603px; margin: 0 auto; background:#35353b; padding-top: 20px ; } } .slidetxtbox .hd ul li{cursor:pointer; color: #ffffff; width: 603px; list-style: none; height: 160px; } .slidetxtbox .hd ul li div{ font-size: 20px; font-weight: bold; color: #ffffff} .slidetxtbox .hd ul li div span{ font-size: 50px; font-family:"flashdbol"; color: #ff4a00;padding: 0px 5px 0px 5px;} .slidetxtbox .hd ul li p{ font-size: 16px; line-height: 30px;} .slidetxtbox .hd ul li:first-child{ background:url(/uploads/image/slimages/p_01.jpg) no-repeat left center; padding: 45px 0px 0px 110px;} .slidetxtbox .hd ul li:nth-child(2){ background:url(/uploads/image/slimages/p_02.jpg) no-repeat left center; padding: 10px 0px 0px 110px;} .slidetxtbox .hd ul li:nth-child(2) p{ padding-top: 10px;} .slidetxtbox .hd ul li:last-child{ background:url(/uploads/image/slimages/p_03.jpg) no-repeat left center; padding: 20px 0px 0px 110px;} .slidetxtbox .bd ul{ zoom:1; width: 50%; float: right; } .slidetxtbox .bd li{ position: relative;} .slidetxtbox .bd li.pic_q1{ width: 100%; background:url(/uploads/image/slimages/pic_q1.jpg) no-repeat left center; height: 612px; display: block;} .slidetxtbox .bd li.pic_q2{ width: 100%; background:url(/uploads/image/slimages/pic_q2.jpg) no-repeat left center; height: 612px; display: block;} .slidetxtbox .bd li.pic_q3{ width: 100%; background:url(/uploads/image/slimages/pic_q3.jpg) no-repeat left center; height: 612px; display: block;} .block-1 { color: #35353b;font-size: 15px; background: #ffffff; padding: 45px} .block-1 p{ line-height: 30px; text-align: left} .block-3{ background: #ff4a00; padding: 15px;} .block-3 img{ padding-bottom: 10px}