@charset "utf-8"; /*------------------------------------------------------------ index ------------------------------------------------------------*/ .about { padding: 60px 0; height: 800px; background: url(/uploads/image/tdimages/about_bg.jpg) no-repeat center center fixed; background-size: cover } .about .inner { margin: 0 auto; width: 80%; min-width: 1200px; } .about .textbox { padding: 50px; width: 800px; background: rgba(255,255,255,.8); } .about .textbox h2 { color: 333; font-size: 30px; font-weight: normal; } .about .textbox h3 { margin-bottom: 30px; color: #000; font-size: 42px; } .about .textbox .abtext { margin-bottom: 15px; color: #666; font-size: 15px; line-height: 1.8; text-indent: 2em; } .about .textbox .linkul { margin-top: 60px; } .about .textbox .linkul li { width: 100px; float: left; font-size: 15px; text-align: center; } .about .textbox .linkul li a { display: block; color: #666; } .about .textbox .linkul li a:hover { filter: brightness(120%); } .about .textbox .linkul li span { margin: 0 auto 5px; width: 50px; height: 50px; line-height: 50px; display: block; text-align: center; border-radius: 50%; background: #004098; } .about .textbox .linkul .btn02 span { background: #45b035; } .about .textbox .linkul li span i { color: #fff; font-size: 25px; line-height: 50px; } @media all and (max-width: 1280px) { .about { padding: 30px 20px; height: auto; } .about .inner { margin: 0; width: auto; min-width: inherit; } .about .textbox { padding: 15px; width: auto; } .about .textbox h2 { font-size: 20px; } .about .textbox h3 { margin-bottom: 10px; font-size: 25px; } .about .textbox .abtext { margin-bottom: 10px; } .about .textbox .linkul { margin-top: 30px; } .about .textbox .linkul li { width: 25%; text-align: center; } .about .textbox .linkul li span { width: 44px; height: 44px; line-height: 44px; } } .numsrcoll { margin-top: 80px; padding: 0; } .numsrcoll .sub { margin: 0 auto; position: relative; box-sizing: border-box; } .numsrcoll .num { margin-right: 3.33333%; width: 30%; float: left; border-right: 1px dotted #ccc; box-sizing: border-box; } .numsrcoll .num:first-child { } .numsrcoll .js-counter { margin: 10px 0; } .numsrcoll .js-counter span { color: #004098; font-size: 50px; font-family: impact; line-height: 1.2; } .numsrcoll .text { margin: 0; font-size: 16px; color: #666; } @media all and (max-width: 1280px) { .numsrcoll { margin-top: 30px; } .numsrcoll .num { margin-right: 0; width: 33.33333%; border-right: none; text-align: center; } .numsrcoll .js-counter { margin: 10px 0; } .numsrcoll .js-counter span { font-size: 35px; } .numsrcoll .text { margin: 0; font-size: 15px; color: #666; } } .product { margin: 0 auto; padding: 100px 0; width: 1280px; position: relative; } .product .slider { margin: 0 auto; width: 1280px; } .product .slider li { width: 100%; float: left; overflow: hidden; } .product .slider li .photo { width: 690px; float: left; } .product .slider li .photo img { width: 100%; } .product .slider li .textbox { padding-top: 70px; width: 560px; float: right; } .product .slider li .textbox .name { color: #000; font-size: 30px; } .product .slider li .textbox .title { margin: 30px 0; color: #004098; font-size: 35px; } .product .slider li .textbox .txt { color: #333; font-size: 15px; } .product .slider li .textbox .link { margin-top: 30px; } .product .slider li .textbox .link a { padding: 10px 0; width: 150px; display: block; color: #fff; font-size: 15px; text-align: center; background: #004098; border-radius: 35px; } .product .slider li .textbox .link a:hover { background: #f28108; } .product .prev { width: 26px; height: 48px; left: -50px; top: 45%; cursor: pointer; position: absolute; background: url(/uploads/image/tdimages/left.png) no-repeat left top; -webkit-transition: all .4s ease-in-out 0s; -moz-transition: all .4s ease-in-out 0s; -ms-transition: all .4s ease-in-out 0s; transition: all .4s ease-in-out 0s; } .product .prev:hover { left: -60px; } .product .next { width: 26px; height: 48px; right: -50px; top: 45%; cursor: pointer; position: absolute; background: url(/uploads/image/tdimages/right.png) no-repeat left top; -webkit-transition: all .4s ease-in-out 0s; -moz-transition: all .4s ease-in-out 0s; -ms-transition: all .4s ease-in-out 0s; transition: all .4s ease-in-out 0s; } .product .next:hover { right: -60px; } @media all and (max-width: 1280px) { .product { margin: 0 20px; padding: 30px 0; width: auto; } .product .slider { margin: 0; width: auto; } .product .slider li .photo { width: auto; float: none; } .product .slider li .textbox { padding-top: 20px; width: auto; float: none; } .product .slider li .textbox .name { color: #000; font-size: 20px; } .product .slider li .textbox .title { margin: 10px 0; font-size: 25px; } .product .slider li .textbox .link { margin-top: 20px; } .product .slider li .textbox .link a { padding: 5px 0; border-radius: 35px; } .qiehuan { text-align: center; } .product .prev { margin: 0 10px; display: inline-block; width: 35px; height: 35px; left: inherit; top: inherit; position: relative; background: #f28108 url(/uploads/image/tdimages/left02.png) no-repeat center center; background-size: auto 24px; border-radius: 50%; } .product .prev:hover { left: inherit; } .product .next { margin: 0 10px; display: inline-block; width: 35px; height: 35px; right: inherit; top: inherit; position: relative; background: #f28108 url(/uploads/image/tdimages/right02.png) no-repeat center center; background-size: auto 24px; border-radius: 50%; } .product .next:hover { left: inherit; } } .partner { padding: 50px 0; height: 600px; background: url(/uploads/image/tdimages/partner.jpg) no-repeat center center fixed; background-size: cover; } .partner .inner { margin: 0 auto; width: 80%; min-width: 1200px; } .partner h2 { margin-bottom: 30px; color: #111; font-size: 35px; font-weight: normal; } .partner li { margin: 0 1% 15px; padding: 10px 0; width: 12.28%; float: left; text-align: center; background: #fff; } .partner li img { max-width: 100%; } .partner .btn { padding: 0; width: auto; } .partner .btn a { width: 30px; height: 100px; line-height: 100px; display: block; color: #fff; font-size: 20px; background: #004098; } .partner .btn a:hover { filter: brightness(120%); } @media all and (max-width: 1280px) { .partner { padding: 30px 20px 50px; height: auto; background: url(/uploads/image/tdimages/partner.jpg) no-repeat center center; background-size: cover; } .partner .inner { margin: 0; width: auto; min-width: inherit; } .partner h2 { margin-bottom: 15px; font-size: 25px; } .partner li { margin: 0 1% 15px; padding: 10px 0; width: 31.33333%; } .partner li img { max-width: 100%; } .partner .btn { margin: 0; padding: 0; width: 100%; background: none; } .partner .btn a { margin: 15px auto 0; width: 120px; display: block; height: auto; line-height: inherit; border-radius: 30px; } .partner .btn a:hover { filter: brightness(120%); } } .honor { padding: 50px 0; margin: 0 auto; width: 80%; min-width: 1200px; } .honor li { margin-right: 20px; width: 200px; float: left; } .honor li .img { display: table; height: 286px; width: 200px; } .honor li .pic { width: 200px; height: 286px; display: table-cell; text-align: center; overflow: hidden; vertical-align: middle; } .honor li img { width: 100%; -webkit-transition: all .4s ease-in-out 0s; -moz-transition: all .4s ease-in-out 0s; -ms-transition: all .4s ease-in-out 0s; transition: all .4s ease-in-out 0s; } .honor li a:hover img { transform: scale(1.2); -webkit-transform: scale(1.2); -moz-transform: scale(1.2); } .honor li p { margin-top: 10px; color: #000; text-align: center; font-size: 16px; } @media all and (max-width: 1280px) { .honor { padding: 30px 20px 60px; margin: 0; width: auto; min-width: inherit; } .honor li { margin-right: 20px; width: 200px; } } .case { padding: 60px 0 100px; background: url(/uploads/image/tdimages/case_bg.jpg) no-repeat center center; background-size: cover; } .case h2 { margin: 0 auto 40px; width: 80%; min-width: 1200px; } .case ul { margin: 0 auto; width: 80%; min-width: 1200px; } .case li { width: 25%; float: left; } .case li a { display: block; overflow: hidden; } .case li .pic { position: relative; overflow: hidden; -webkit-transition: all .4s ease-in-out 0s; -moz-transition: all .4s ease-in-out 0s; -ms-transition: all .4s ease-in-out 0s; transition: all .4s ease-in-out 0s; } .case li .pic:before { width: 100%; height: 0; position: absolute; left: 0; top: 0; content: ""; background-image: url(/uploads/image/tdimages/link.png); background-position: center 60%; background-repeat: no-repeat; background-size: 50px 50px; background-color: rgba(0,0,0,.5); -webkit-transition: all .4s ease-in-out 0s; -moz-transition: all .4s ease-in-out 0s; -ms-transition: all .4s ease-in-out 0s; transition: all .4s ease-in-out 0s; } .case li a:hover .pic:before { height: 100%; } .case li img { width: 100%; -webkit-transition: all .4s ease-in-out 0s; -moz-transition: all .4s ease-in-out 0s; -ms-transition: all .4s ease-in-out 0s; transition: all .4s ease-in-out 0s; } .case li a:hover .pic { margin-top: -70px; } .case li .title { margin-bottom: -70px; padding: 10px 15px; font-size: 18px; background: #fff; -webkit-transition: all .4s ease-in-out 0s; -moz-transition: all .4s ease-in-out 0s; -ms-transition: all .4s ease-in-out 0s; transition: all .4s ease-in-out 0s; } .case li a:hover .title { margin-bottom: 0; } .case li .title span { display: block; color: #666; font-size: 15px; } @media all and (max-width: 1280px) { .case { padding: 40px 20px; } .case h2 { margin: 0 0 30px; width: auto; min-width: inherit; } .case ul { margin: 0; width: auto; min-width: inherit; } .case li { width: 50%; } .case li .pic:before { display: none; } .case li img { width: 100%; } .case li a:hover .pic { margin-top: 0; } .case li .title { margin-bottom: 0; padding: 10px 15px; font-size: 16px; min-height: 90px; background: #fff; } .case li a:hover .title { margin-bottom: 0; } .case li .title span { font-size: 14px; } } .news { padding: 50px 0; } .news .inner { margin: 0 auto; width: 80%; min-width: 1200px; } .news .left { width: 43%; float: left; padding: 35px; background: #f9f9f9; box-sizing: border-box; } .news .left a { display: block; } .news .left .photo { margin-bottom: 20px; height: 300px; overflow: hidden; } .news .left .photo img { width: 100%; } .news .left .date { color: #004098; font-size: 15px; } .news .left .title { margin: 10px 0 20px; color: #004098; font-size: 30px; } .news .left .txt { padding-bottom: 30px; color: #666; font-size: 15px; position: relative; } .news .left .txt:before { width: 100%; height: 1px; position: absolute; left: 0; bottom: 0; content: ""; opacity: 0.1; background-color: #000; -webkit-transition: all .4s ease-in-out 0s; -moz-transition: all .4s ease-in-out 0s; -ms-transition: all .4s ease-in-out 0s; transition: all .4s ease-in-out 0s; } .news .left .txt:after { width: 0; height: 1px; position: absolute; left: 0; bottom: 0; content: ""; background-color: #004098; -webkit-transition: all .4s ease-in-out 0s; -moz-transition: all .4s ease-in-out 0s; -ms-transition: all .4s ease-in-out 0s; transition: all .4s ease-in-out 0s; } .news .left a:hover .txt:after { width: 100%; } .news .right { width: 54%; float: right; } .news .right li a { padding: 20px 0; display: block; overflow: hidden; position: relative; } .news .right li a:before { width: 100%; height: 1px; position: absolute; left: 0; bottom: 0; content: ""; opacity: 0.1; background-color: #000; -webkit-transition: all .4s ease-in-out 0s; -moz-transition: all .4s ease-in-out 0s; -ms-transition: all .4s ease-in-out 0s; transition: all .4s ease-in-out 0s; } .news .right li a:after { width: 0; height: 1px; position: absolute; left: 0; bottom: 0; content: ""; background-color: #004098; -webkit-transition: all .4s ease-in-out 0s; -moz-transition: all .4s ease-in-out 0s; -ms-transition: all .4s ease-in-out 0s; transition: all .4s ease-in-out 0s; } .news .right a:hover:after { width: 100%; } .news .right li .photo { width: 200px; height: 150px; float: left; overflow: hidden; } .news .right li .photo img { min-height: 100%; width: 100%; -webkit-transition: all .4s ease-in-out 0s; -moz-transition: all .4s ease-in-out 0s; -ms-transition: all .4s ease-in-out 0s; transition: all .4s ease-in-out 0s; } .news .right li a:hover .photo img { transform: scale(1.3); -webkit-transform: scale(1.3); -moz-transform: scale(1.3); } .news .right li .textbox { padding-left: 215px; } .news .right li .textbox .title { color: #333; font-size: 21px; } .news .right li .textbox .date { margin: 3px 0; color: #666; font-size: 15px; } .news .right li .textbox .txt { color: #666; font-size: 15px; } .news .right li .textbox .link { margin-top: 5px; padding: 2px 0; width: 100px; color: #fff; font-size: 13px; text-align: center; background: #004098; border-radius: 30px; } @media all and (max-width: 1280px) { .news { padding: 30px 20px; } .news .inner { margin: 0; width: auto; min-width: inherit; } .news .left { display: none; width: auto; float: none; padding: 15px; } .news .left .photo { margin-bottom: 10px; height: auto; } .news .left .photo img { width: 100%; } .news .left .date { font-size: 14px; } .news .left .title { margin: 5px 0 10px; font-size: 22px; } .news .left .txt { padding-bottom: 20px; color: #666; font-size: 15px; position: relative; } .news .left .txt:after { display: none; } .news .right { width: auto; float: none; } .news .right li a { padding: 10px 0; } .news .right li a:after { display: none; } .news .right li .photo { width: auto; height: auto; float: none; } .news .right li .photo img { min-height: inherit; } .news .right li .textbox { padding: 10px 0; } .news .right li .textbox .title { color: #333; font-size: 21px; } .news .right li .textbox .date { margin: 3px 0; color: #666; font-size: 15px; } .news .right li .textbox .txt { display: none; color: #666; font-size: 15px; } .news .right li .textbox .link { margin-top: 5px; padding: 2px 0; width: 100px; color: #fff; font-size: 13px; text-align: center; background: #004098; border-radius: 30px; } }