#banner { height: 879px; width:100%; overflow:hidden; margin:0 auto; position:relative; max-width:1920px; } #banner .swiper-slide { position:relative; text-align:center; } #banner img { max-width:100%; display:block; } #banner video{ max-width:100%; display:block; width: 100%; } #banner .words{ position: absolute; top: 44%; left: 30%; width: 40%; font-size: 62px; color:#cecece;letter-spacing:4px } #banner h2 { text-align:center; font-size:1em; height:42px; line-height:42px; color:#fafafa; position:absolute; left:0; bottom:0; right:0; font-weight:normal; text-shadow:1px 1px 1px #000; /* background-color:rgba(21,20,20,0.5);*/ background-color:rgba(0,0,0,0); background:-moz-linear-gradient(top,rgba(0,0,0,0),rgba(0,0,0,0.7)); background:-webkit-gradient(linear,top,from(rgba(0,0,0,0)),to(rgba(0,0,0,0.7))); background:-webkit-linear-gradient(top,rgba(0,0,0,0),rgba(0,0,0,0.7)); background:-o-linear-gradient(top,rgba(0,0,0,0),rgba(0,0,0,0.7)); } #banner .pagination { position:absolute; z-index:20; bottom:49px; text-align:left; left:50%; width:1200px; margin-left:-600px; } #banner .swiper-pagination-bullet { display:inline-block; width:8px; height:8px; border-radius:4px; background:#fff; margin:4px 13px; opacity:0.8; cursor:pointer; } #banner .swiper-pagination-bullet-active { background:#ff1800; width:16px; height:16px; margin:0 9px; border-radius:8px; } .about{ width: 100%; height: 750px; margin: 0 auto; position: relative; background-color: #eaeaea; background-image: url(/uploads/image/tdimages/about_bg.jpg); background-repeat: no-repeat; background-position: center bottom; } .about .pagecount{ height: 608px; background-image: url(/uploads/image/tdimages/about_bg.png); background-repeat: no-repeat; background-position: left bottom; background-color: #fbfbfb; } .about .pagecount .left{ width: 50%; float: left; height: 608px; box-sizing: border-box; padding-left: 3.7%; padding-right: 9.7%; padding-top: 130px; font-size: 16px; line-height: 2.2em; color: #454545; } .about .pagecount .left h2{ font-size: 25px; line-height: 50px; color: #393939; } .about .pagecount .left .company{ font-size: 20px; line-height: 56px; color: #393939; } .about .pagecount .left .dec{ } .about .pagecount .left .more{ width: 45px; height: 44px; display:block; margin-top:30px; background-image: url(/uploads/image/tdimages/more.png); background-repeat: no-repeat; background-position: center center; } .about .pagecount .right{ width: 50%; float: left; height: 608px; position:relative; } .right .title{ position: absolute; width: 200px; height: 185px; background-color: #e3e3e3; left: -200px; top: 0px; vertical-align: middle; } .right .title h2{ font-family: arial, helvetica, sans-serif; font-size: 20px; line-height: 35px; font-weight: normal; color: #5b5b5b; width:100%; text-align:center; margin-top:75px; position:relative; } .right .title h2:before { content: ""; display: block; width: 2px; height: 15px; background-color: #b9b9b9; position:absolute; top:-20px; left:50%; margin-left:-1px; } .right .title h2:after { content: ""; display: block; width: 2px; height: 15px; background-color: #b9b9b9; position:absolute; bottom:-20px; left:50%; margin-left:-1px; } .about .pagecount .right .con{ position: absolute; width: 100%; height: 266px; background-color: #fff; top:-89px; left:0px; z-index:1000; box-sizing:border-box; padding-left:25px; padding-right:25px; padding-top:30px; } .about .pagecount .right .con h3{ font-size: 28px; line-height: 35px; font-weight: bold; color: #2d2d2d; box-sizing:border-box; padding-left:16px; } .about .pagecount .right .con h3 span{ font-family: arial, helvetica, sans-serif; font-size: 32px; line-height: 35px; color: #424242; font-weight: normal; margin-left:15px; } .about .pagecount .right .con .info{ font-size: 16px; line-height: 2em; color: #454545; box-sizing: border-box; padding-top: 25px; padding-left: 16px; padding-bottom: 20px; border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: #b7b7b7; position:relative; } .about .pagecount .right .con .info .jt{ width: 60px; height: 10px; background-image: url(/uploads/image/tdimages/jt2.png); background-repeat: no-repeat; background-position: right center; position:absolute; bottom:-27px; right:0; } .about .pagecount .right .img{ position: absolute; width: 699px; height: 423px; background-color: #fff; left:0px; bottom:0px; overflow:hidden; } .about .pagecount .right .img img{ width: 100%; height: auto; transition: all 1s; } .about .pagecount .right .img:hover img{ transform: scale(1.18); } .worker{ width: 100%; height:630px; background-image: url(/uploads/image/tdimages/bg1.jpg); background-repeat: no-repeat; background-position: center bottom; background-size:100% auto; max-width:1920px; margin:0px auto; position:relative; overflow:hidden; } .title33{ clear:both; text-align:center; justify-content: center; padding-top:40px; } .title33 h2{ font-size: 36px; color: #262626; margin-bottom:10px; margin-top:0px; } .title33 p{ font-size: 20px; color: #717171; text-transform:uppercase } .worker .left{ width:50%; height:322px; position:absolute; left:0; bottom:0; } .worker .left .con{ width: 367px; height: 322px; float: right; position:relative; } .worker .left .con img.bg{ position:static; width:100%; height:100%;} .worker .left .con .logo{ position:absolute; width:100%; height:100%; z-index:1000; top:60px; left:40px;} .worker .left .con .dec{ position: absolute; width: 100%; height: 100%; z-index: 1000; top: 157px; left: 40px; font-size: 18px; color: #ffffff; } .worker .left .con .more{ position: absolute; width: 100%; height: 52px; height: 12px; z-index: 1000; top: 205px; left: 40px; background-image: url(/uploads/image/tdimages/jt.png); background-repeat: no-repeat; background-position: left top; transition: all 1s; } .worker .left .con:hover .more{ background-position: 10% top; } .worker .right{ width:50%; height:322px; position:absolute; right:0; bottom:0; } .worker .right .con{ width:100%; height:322px; } .worker .right .con li{ width:50%; height:322px; position:relative; float:left; overflow:hidden; } .worker .right .con li img.bg{ position:static; width:100%; height:100%;} .worker .right .con li .logo{ position:absolute; width:100%; height:100%; z-index:1000; top:80px; left:40px;} .worker .right .con li .dec{ position: absolute; width: 100%; height: 100%; z-index: 1000; top: 157px; left: 40px; font-size: 12px; color: #ffffff; text-transform:uppercase; } .worker .right .con li .more{ position: absolute; width: 100%; height: 52px; height: 12px; z-index: 1000; top: 205px; left: 40px; background-image: url(/uploads/image/tdimages/jt.png); background-repeat: no-repeat; background-position: left top; transition: all 1s; } .worker .right .con li:hover .more{ background-position: 10% top; } .news{ clear:both; height:566px; background-color:#ffffff; overflow:hidden; } .news .title{ clear:both; text-align:center; height:108px;justify-content: center; padding-top:40px; } .news .title h2{ font-size: 36px; color: #262626; margin-bottom:10px; margin-top:0px; } .news .title p{ font-size: 20px; color: #717171; text-transform:uppercase } .news .pagecount{} .news .pagecount .month{ font-size: 17px; padding-top:15px; padding-bottom: 5px; border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: #ededed; text-align:center; display:inline-table; } .news .pagecount .year{ font-size: 24px; padding-top:0px; padding-bottom: 0px; text-align:center; display:inline-table; clear:both; } .news .pagecount .left{ width: 49%; float: left; border: 1px solid #ededed; box-sizing: border-box; padding: 30px; font-size: 14px; line-height: 1.8em; color: #6a6a6a; } .news .pagecount .left .imgnews{ clear:both;} .news .pagecount .left .imgnews .img{ float:left; position: absolute; width: 182px; height: 138px; overflow:hidden; } .news .pagecount .left .imgnews .img img{ transition: all 1s; } .news .pagecount .left .imgnews .img:hover img{ transform: scale(1.18); } .news .pagecount .left .imgnews .infos{ float:right; width:400px;} .news .pagecount .left .imgnews h3{ font-size: 18px; font-weight: 400; color: #3f3f3f; line-height:2em; } .news .pagecount .left .imgnews .dec{ font-size: 16px; font-weight: 400; color: #999; line-height:1.8em; clear:both; padding-top:8px; } .news .pagecount .left .imgnews .more{ display:inline-table; position:relative; float:right;} .news .pagecount .left .imgnews .more:before { content: ""; display: block; width: 23px; height: 1px; background-color: #d3d3d3; position: absolute; left: -40px; top: 50%; margin-top: -0.5px; } .news .pagecount .left .time{ float:left; width:50px; text-align:center; margin-right:30px;} .news .pagecount .left .second{ margin-top:50px;} .news .pagecount .left .second .infos{ padding-top:3px;} .news .pagecount .left .second h3{ font-size: 18px; font-weight: 400; color: #3f3f3f; line-height:2em; } .news .pagecount .left .second p{ font-size: 16px; font-weight: 400; color: #999; line-height:1.8em; } .news .pagecount .right{ width:46%; float:right; box-sizing: border-box; padding-right: 55px; } .news .pagecount .right .time{ float:left;width:60px; text-align:center; margin-right:30px;} .news .pagecount .right li{ margin-bottom:20px; position:relative; height:97px; padding-bottom:7px;} .news .pagecount .right li:after{ content: ""; display: block; width: 85%; height: 1px; background-color: #eeeeee; position: absolute; left: 0; bottom:0; } .news .pagecount .right h3{ font-size: 18px; font-weight: 400; color: #3f3f3f; line-height:2em; } .news .pagecount .right p{ font-size: 16px; font-weight: 400; color: #999; line-height:1.8em; } .ad{ width: 100%; height: 257px; overflow: hidden; background-image: url(/uploads/image/tdimages/ad1.jpg); background-repeat: no-repeat; background-position: center top; } .service{ margin:10px auto 0 auto; width:100%;} .index_bottom { height: 164px; width: 100%; padding-top: 70px;} @media screen and (max-width: 1380px) { #banner{ height: 614px; } .worker{ height: 592px; } } .news-list{ line-height:40px; margin-top: 4px; background-color: #f1f1f1;}