@charset "utf-8"; @font-face { font-family: "title-font1"; src: url(../fonts/BONKERS.TTF); } html, body, figure, dl, dd, img, form, div, ul, ol, li, h1, h2, h3, h4, h5, h6, p, button, input, textarea, a, span, em { margin: 0; padding: 0; border: 0; box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; -webkit-tap-highlight-color: transparent; } body { font-family:'Microsoft Yahei', '思源黑体 CN'; font-size: 20px; overflow-x: hidden; overflow-y: auto; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; -webkit-tap-highlight-color: transparent; /* tap-highlight-color: transparent; */ background: #fff; } input, textarea, button { padding: 0; /* font-family: Verdana, Arial; */ font-family: 'Microsoft Yahei','思源黑体 CN'; -webkit-appearance: none; } select{ -webkit-appearance: none; } h1, h2, h3, h4, h5, h6 { font-weight: normal; } img { border: 0; vertical-align: middle; max-width: 100%; } /* input[type=submit], input[type=text], button { appearance: none; -moz-appearance: none; -webkit-appearance: none; border-radius: 0; cursor: pointer; } input:focus, textarea:focus, button:focus, input:active { outline-color: transparent; border: 0; } select, input, select, textarea { vertical-align: middle; outline: none; -webkit-tap-highlight-color: transparent; } */ ul, ol, li { list-style-type: none; } a { color: #333; -webkit-tap-highlight-color: transparent; -webkit-touch-callout: none; -webkit-user-select: none; } a:link { text-decoration: none; } a:visited { text-decoration: none; } a:hover { text-decoration: none; cursor: pointer; } a:active { text-decoration: none; } .hidden { display: none; visibility: hidden; } .wrap { border: 0; padding: 0; margin: 0 auto; *zoom: 1; position: relative; } .wrap:after { clear: both; content: ""; display: table; } .clear { clear: both; font-size: 0; line-height: 0; height: 0; visibility: hidden; } .clearfix:before, .clearfix:after { content: ""; display: table; } .clearfix:after { clear: both; } .clearfix { zoom: 1; } .wrap:after, .wrap:before, .container:after, .container:before { content: ""; display: table; } .wrap:after, .container:after { clear: both; } .container { width: 80%; margin: 0 auto; } .clear { clear: both; } .fl { float: left; } .fr { float: right; } .absolute { position: absolute; } .pors { position: relative; } .tl { text-align: left; } .tc { text-align: center; } .tr { text-align: right; } .hide { opacity: 0; } nav li, .index-banner li, .item-list li, .inner-tab li { list-style-type: none; } input:-ms-input-placeholder, textarea:-ms-input-placeholder { color: #6f6f6f; } input::-webkit-input-placeholder, textarea::-webkit-input-placeholder { color: #6f6f6f; } .box{ width: 1600px; margin: auto; position: relative; } .header{ width: 100%; position: absolute; left: 0; top: 0; z-index: 99; } .header .logo{ float: left; margin-top: 28px; } .header .menu{ float: right; margin-top: 45px; } .header .menu li{ float: left; font-size: 16px; line-height: 40px; margin-right: 90px; } .header .menu li:last-child{ margin-right: 0; } .header .menu li .menu-link{ color: #fff; display: block; } .banner{ width: 100%; position: relative; } .banner .swiper-container{ width: 100%; } .banner .swiper-slide{ width: 100%; overflow: hidden; } .banner .swiper-slide a{ width: 100%; display: block; position: relative; } .banner .swiper-slide a img{ max-width: initial; width: 100%; } .banner .swiper-slide a img:first-child{ display: block; } .banner .swiper-slide a img:last-child{ display: none; } .banner .swiper-button-next.swiper-button-disabled, .banner.swiper-button-prev.swiper-button-disabled { opacity: 1; } .banner .swiper-pagination { width: auto; position: absolute; font-size: 0; left: 8.5%; bottom: 63px; } .swiper-container-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet { margin: 0; } .banner .swiper-pagination .swiper-pagination-bullet { width: 15px; height: 15px; background: #fff; border-radius: 0; box-sizing: border-box; opacity: .3; border-radius: 50%; margin-right: 15px; } .banner .swiper-pagination .swiper-pagination-bullet-active { opacity: 1; } .banner .numbox{ position: absolute; right: 8.5%; bottom: 70px; color: #fff; font-family: "苹方"; font-size: 14px; z-index: 9; } .banner .numbox .n1{ font-size: 24px; } .banner .explore{ font-size: 14px; color: #fff; position: absolute; left: 50%; transform: translateX(-50%); bottom: 45px; z-index: 9; } .banner .explore .line{ width: 3px; height: 0; background: #fff; position: absolute; left: 50%; transform: translateX(-50%); top: 28px; animation: telescopic 1.5s ease-out infinite; } @-webkit-keyframes telescopic { 0% { height: 0px; } 100% { height: 60px; } } @keyframes telescopic { 0% { height: 0px; } 100% { height: 60px; } } .index-about{ width: 100%; padding: 90px 0 130px; background: #2f2f2f url(../images/about-img11.png) right 393px no-repeat; } .index-about .box1{ width: 100%; display: table; } .index-about .box1 .img{ width: 50%; float: left; } .index-about .box1 .tbox{ width: 38.125%; float: right; padding-top: 26px; text-align: right; } .index-about .box1 .tbox .t1{ font-size: 50px; color: #999; text-transform: uppercase; line-height: 1; font-family: "title-font1"; } .index-about .box1 .tbox .t2{ font-size: 30px; line-height: 1; color: #fff; margin-top: 23px; } .index-about .box1 .tbox .line{ width: 2px; height: 110px; background: #fff; margin-top: 54px; display: inline-block; } .index-about .box1 .tbox .txt{ font-size: 14px; line-height: 30px; color: #fff; text-align: right; margin-top: 63px; } .index-about .list{ width: 100%; display: inline-block; margin-top: 84px; } .index-about .list .swiper-container{ padding-bottom: 52px; } .index-about .list .swiper-container .swiper-pagination{ display: none; } .index-about .list .swiper-slide{ position: relative; /* float: left; width: 31.6%; margin-right: 2.6%; */ } /* .index-about .list .swiper-slide:last-child{ margin-right: 0; } */ .index-about .list .swiper-slide .img{ width: 100%; } .index-about .list .swiper-slide .img img{ width: 100%; } .index-about .list .swiper-slide .title{ width: 80%; height: 88px; background: #212121; text-align: center; line-height: 88px; position: absolute; left: 50%; transform: translateX(-50%); bottom: -50px; font-size: 20px; color: #fff; transition: all ease .5s; } .index-about .list .swiper-slide:hover .title{ background: #454545; } .index-product{ width: 100%; background: #2f2f2f; } .index-product .title img:first-child, .index-display .title img:first-child{ display: block; } .index-product .title img:nth-child(2), .index-display .title img:nth-child(2){ display: none; } .index-product .title{ position: relative; overflow: hidden; } .index-product .title .img{ position: absolute; width: 100%; height: 100%; background-image: url(../images/product-img34.jpg); background-position: 50% 50%; background-size: 1920px; background-attachment: fixed; } .index-product .title .box{ position: relative; z-index: 2; padding: 148px 4%; } .index-product .title .box .t1{ font-size: 50px; line-height: 1; color: #fefefe; font-family: "title-font1"; text-transform: uppercase; } .index-product .title .box .t2{ font-size: 30px; color: #fff; line-height: 1; margin-top: 22px; } .index-product .title .box .line{ width: 2px; height: 110px; background: #fff; margin-top: 50px; } .index-product .list{ width: 100%; padding: 83px 0 60px; } .index-product .list ul{ width: 100%; display: table; } .index-product .list li{ width: 33.33%; float: left; position: relative; background: #1b1b1b; transition: all ease .5s; } .index-product .list li:nth-child(2n){ background: #212121; } .index-product .list li:hover{ background: #242424; } .index-product .list li a{ display: block; } .index-product .list li .img{ width: 100%; } .index-product .list li .tbox{ position: absolute; left: 0; top: 0; color: #eee; padding: 80px 0 0 45px; } .index-product .list li .tbox .t1{ font-size: 26px; line-height: 1; } .index-product .list li .tbox .t2{ font-size: 16px; line-height: 1; margin-top: 18px; } .index-product .list li .tbox .t3{ font-size: 14px; color: #999; line-height: 1; margin-top: 55px; } .index-product .more{ font-size: 20px; color: #999; text-transform: uppercase; line-height: 40px; padding-left: 60px; background: url(../images/icon12.png) left center no-repeat; margin-top: 58px; display: table; } .index-display{ width: 100%; background: #2f2f2f; } .index-display .title{ position: relative; width: 100%; overflow: hidden; } .index-display .title .img{ position: absolute; width: 100%; height: 100%; background-image: url(../images/display-img1.jpg); background-position: 50% 50%; background-size: 1920px; background-attachment: fixed; } .index-display .title .box{ /* position: absolute; left: 50%; transform: translateX(-50%); top: 0; z-index: 2; */ padding: 148px 4%; } .index-display .title .box .t1{ font-size: 50px; line-height: 1; color: #fefefe; font-family: "title-font1"; text-transform: uppercase; } .index-display .title .box .t2{ font-size: 30px; color: #fff; line-height: 1; margin-top: 22px; } .index-display .title .box .line{ width: 2px; height: 110px; background: #fff; margin-top: 50px; } .index-display .list{ width: 100%; padding: 80px 0 72px; } .index-display .list ul{ width: 100%; display: table; } .index-display .list li{ width: 48.75%; float: left; margin-right: 2.5%; margin-bottom: 40px; position: relative; } .index-display .list li:nth-child(2n){ margin-right: 0; } .index-display .list li a{ display: block; } .index-display .list li .img{ width: 100%; position: relative; overflow: hidden; } .index-display .list li .img::after{ content: ''; position: absolute; left: 0; bottom: 0; width: 100%; height: 100%; background: url(../images/display-bg1.png) left bottom repeat-x; } .index-display .list li .img img{ width: 100%; transition: all ease .5s; } .index-display .list li .img:hover img{ transform: scale(1.05); } .index-display .list li .tbox{ width: 100%; position: absolute; color: #fff; left: 0; bottom: 20px; z-index: 2; padding-left: 20px; } .index-display .list li .tbox .t1{ font-size: 24px; font-weight: bold; line-height: 1; } .index-display .list li .tbox .t2{ font-size: 20px; margin-top: 15px; } .index-display .more{ font-size: 20px; color: #999; text-transform: uppercase; line-height: 40px; padding-left: 60px; background: url(../images/icon12.png) left center no-repeat; margin-top: 20px; display: table; } .index-news{ width: 100%; background: #2f2f2f; } .index-news .box{ border-top: 1px solid #383838; display: table; padding: 76px 0 155px; } .index-news .companys{ width: 61.6%; float: left; } .index-news .companys .title{ } .index-news .companys .title .t1{ font-size: 50px; line-height: 1; color: #999; font-family: "title-font1"; text-transform: uppercase; } .index-news .companys .title .t2{ font-size: 30px; line-height: 1; color: #fff; margin-top: 13px; } .index-news .companys .list{ width: 100%; display: table; margin-top: 46px; } .index-news .companys .list li{ width: 48.5%; float: left; margin-right: 3%; } .index-news .companys .list li:last-child{ margin-right: 0; } .index-news .companys .list li .img{ width: 100%; overflow: hidden; } .index-news .companys .list li .img img{ width: 100%; transition: all ease .5s; } .index-news .companys .list li:hover .img img{ transform: scale(1.05); } .index-news .companys .list li .tbox{ width: 100%; background: #3b3b3b; font-family: "苹方"; padding: 30px 15px 25px; transition: all ease .5s; } .index-news .companys .list li:hover .tbox{ background: #212121; } .index-news .companys .list li .tbox .t1{ font-size: 18px; color: #fff; line-height: 25px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .index-news .companys .list li .tbox .t2{ font-size: 14px; line-height: 25px; color: #999; margin-top: 7px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .index-news .companys .list li .tbox .t3{ font-size: 14px; line-height: 25px; color: #999; margin-top: 9px; } .index-news .companys .more{ font-size: 20px; color: #999; text-transform: uppercase; line-height: 40px; padding-left: 60px; background: url(../images/icon12.png) left center no-repeat; margin-top: 20px; display: table; } .index-news .news{ width: 35.6%; float: right; position: relative; } .index-news .news .title{ margin-top: 10px; } .index-news .news .title .t1{ font-size: 40px; line-height: 1; color: #999; font-family: "title-font1"; text-transform: uppercase; } .index-news .news .title .t2{ font-size: 30px; line-height: 1; color: #fff; margin-top: 15px; } .index-news .news .news-button-next{ width: 26px; height: 22px; background: url(../images/icon9.png) center center no-repeat; position: absolute; top: 70px; right: 0; cursor: pointer; } .index-news .news .news-button-prev{ width: 26px; height: 22px; background: url(../images/icon8.png) center center no-repeat; position: absolute; top: 70px; right: 31px; cursor: pointer; } .index-news .news .swiper-container{ width: 100%; margin-top: 46px; } .index-news .news .newslist{ width: 100%; background: #3b3b3b; padding: 10px 26px 0 22px; } .index-news .news .newslist li{ width: 100%; line-height: 25px; border-bottom: 1px solid #434343; padding: 23px 0 21px; display: table; } .index-news .news .newslist li:last-child{ border-bottom: none; } .index-news .news .newslist li .num{ width: 21px; height: 21px; float: left; margin: 2px 13px 2px 2px; color: #fff; background: #a0a0a0; text-align: center; line-height: 21px; font-size: 16px; } .index-news .news .newslist li .num1{ background: #e60012; } .index-news .news .newslist li .num2{ background: #e68200; } .index-news .news .newslist li .num3{ background: #efcb25; } .index-news .news .newslist li .t1{ float: left; font-size: 16px; color: #fff; width: 60%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .index-news .news .newslist li .t2{ float: right; font-size: 14px; color: #fff; } .index-news .companys .list .swiper-container, .index-news .news .list, .index-news .news .more{ display: none; } .info-header{ width: 100%; background: #fff; height: 110px; position: absolute; left: 0; top: 0; z-index: 99; } .info-header .logo{ float: left; padding-top: 28px; } .info-header .logo img:last-child{ display: none; } .info-header .menu{ float: right; padding-top: 46px; } .info-header .menu li{ float: left; margin-right: 42px; } .info-header .menu li:last-child{ margin-right: 0; } .info-header .menu li .menu-link{ font-size: 16px; line-height: 40px; color: #222; display: block; } .info-header .menu li:hover .menu-link{ } .info-header .menu li.on .menu-link{ } @media screen and (min-width: 980px){ .header .menu li, .info-header .menu li{ height: 64px; position: relative; } .header .menu li::after, .info-header .menu li::after{ width: 0; height: 3px; background: #313131; content: ''; position: absolute; left: 0; bottom: 0; transition: all ease .5s; } .header .menu li::after{ background: #fff; } .header .menu li:hover::after, .info-header .menu li:hover::after{ width: 100%; } .header .menu li.on::after, .info-header .menu li.on::after{ width: 100%; } .header .menu li .menu-link, .info-header .menu li .menu-link{ padding: 0 24px; } .menu-s{ opacity: 0; position: fixed; left: 0; top: 109px; z-index: 10; background: rgba(255,255,255,.9); width: 100%; height: 0; border-top: 1px solid #e5e5e5; text-align: center; overflow: hidden; transition: all ease .5s; } .menu-s .menu-s-link{ line-height: 80px; font-size: 16px; color: #666; margin: 0 57px; } .menu-s.s-product .menu-s-link{ margin: 0 20px; } .menu-s .menu-s-link:hover{ color: #222; } .header .menu li:hover .menu-s, .info-header .menu li:hover .menu-s{ height: 80px; opacity: 1; } } .menu-s{ display: block; } .head-height{ width: 100%; height: 110px; } .info-banner{ width: 100%; } .info-banner img:last-child{ display: none; } .breadcrumbs{ width: 100%; background: #141414; line-height: 70px; font-size: 14px; color: #999; } .breadcrumbs a{ color: #999; } .breadcrumbs span{ color: #999; } .breadcrumbs.b1{ background: #fff; color: #999; line-height: 86px; } .breadcrumbs.b1 a{ color: #999; } .breadcrumbs.b1 span{ color: #999; } .info-menu{ width: 100%; background: #212121; display: table; } .info-menu ul{ float: right; } .info-menu li{ float: left; } .info-menu li a{ display: block; line-height: 80px; font-size: 16px; color: #fff; padding: 0 55px; transition: all ease .5s; } .info-menu li:hover a{ background: #2f2f2f; } .info-menu li.on a{ background: #2f2f2f; } .bread-menu{ width: 100%; line-height: 70px; background: #212121; } .bread-menu .box{ display: table; } .bread-menu .breads{ font-size: 14px; color: #999; float: left; } .bread-menu .breads a{ color: #999; } .bread-menu .breads span{ color: #999; } .bread-menu .menus{ float: right; } .bread-menu .menus li{ float: left; } .bread-menu .menus li a{ display: block; font-size: 16px; color: #fff; padding: 0 55px; transition: all ease .5s; } .bread-menu .menus li:hover a{ background: #2f2f2f; } .bread-menu .menus li.on a{ background: #2f2f2f; } .about-introduction{ width: 100%; padding: 100px 0 112px; } .about-introduction .title{ font-size: 50px; line-height: 1; color: #212121; margin-bottom: 16px; padding-top: 27px; text-transform: uppercase; font-family: "title-font1"; } .about-introduction .t1{ font-size: 30px; font-weight: bold; line-height: 1; color: #444; margin-bottom: 65px; } .about-introduction .img1{ margin-bottom: 40px; } .about-introduction .txt{ font-size: 16px; line-height: 44px; color: #444; padding: 60px 53.4% 67px 60px; background: #eee; } .about-introduction .img2{ width: 45%; position: absolute; right: 30px; top: 0; } .about-pilot{ width: 100%; background: #eee; display: table; padding: 172px 0 162px; } .about-pilot .tbox{ width: 46%; float: left; } .about-pilot .tbox .title{ font-size: 50px; font-weight: bold; color: #212121; line-height: 1; text-transform: uppercase; padding-top: 13px; font-family: "title-font1"; } .about-pilot .tbox .t1{ font-size: 30px; line-height: 1; font-weight: bold; color: #444; margin-top: 17px; } .about-pilot .tbox .txt{ font-size: 16px; line-height: 44px; color: #444; margin-top: 75px; } .about-pilot .img{ width: 45.6%; float: right; margin-right: 22px; padding: 65px 65px 74px 70px; background: url(../images/about-bg1.png) left top repeat; } .about-pilot2{ width: 100%; padding: 120px 0 130px; } .about-pilot2 .title{ font-size: 50px; font-weight: bold; color: #212121; line-height: 1; text-transform: uppercase; font-family: "title-font1"; } .about-pilot2 .t1{ font-size: 30px; color: #444; font-weight: bold; line-height: 1; margin-top: 15px; } .about-pilot2 .txt{ font-size: 16px; line-height: 44px; color: #666; margin-top: 70px; } .about-pilot2 .img img{ display: block; margin: 103px auto 0; } .footer{ width: 100%; background: #2c2c2c; } .footer .box1{ width: 100%; padding: 65px 0 40px; display: table; } .footer .box1 .f-menu{ float: left; } .footer .box1 .f-menu ul{ float: left; width: 170px; } .footer .box1 .f-menu ul .t1{ font-size: 14px; line-height: 25px; color: #fff; margin-bottom: 13px; } .footer .box1 .f-menu ul .t2 a{ font-size: 14px; line-height: 30px; color: #999; } .footer .box1 .ewm{ float: left; display: flex; } .footer .box1 .ewm .ebox{ width: 90px; margin-right: 10px; } .footer .box1 .ewm .title{ font-size: 14px; line-height: 25px; color: #fff; margin: 15px 0 5px; text-align: center; } .footer .box1 .ewm .img{ width: 100%; } .footer .box1 .ewm .txt{ display: none; } .footer .box1 .contact{ width: 317px; float: right; margin-right: 2px; } .footer .box1 .contact .title{ font-size: 14px; line-height: 25px; color: #fff; margin-bottom: 15px; } .footer .box1 .contact .tbox1{ width: 100%; position: relative; margin-bottom: 11px; } .footer .box1 .contact .tbox1 .t1{ width: 100%; text-align: center; position: absolute; z-index: 2; left: 0; top: 0; color: #fff; font-size: 18px; padding-top: 30px; } .footer .box1 .contact .tbox1 .t1 span{ display: block; } .footer .box2{ width: 100%; display: table; border-top: 1px solid #444; font-size: 14px; line-height: 1; color: #999; padding: 22px 0 33px; } .footer .box2 .copyright{ float: left; } .footer .box2 .copyright a{ color: #999; } .footer .box2 .jszc{ float: right; } .footer .box2 .jszc a{ color: #999; } .go-top{ position: fixed; right: 10px; bottom: 50px; z-index: 9; cursor: pointer; } .history{ width: 100%; padding-top: 92px; } .history .map{ width: 100%; } .history .map img:last-child{ display: none; } .history .title{ width: 100%; font-size: 30px; line-height: 50px; color: #444; border-bottom: 2px solid #535353; padding: 33px 0 13px; } .history .title span{ font-size: 20px; color: #999; text-transform: uppercase; } .history .list{ width: 100%; padding-top: 18px; padding-bottom: 130px; } .history .list li{ width: 100%; display: table; font-size: 20px; line-height: 50px; color: #444; } .history .list li .time{ float: left; } .history .list li .things{ float: left; } .company{ width: 100%; padding-top: 90px; } .company .box1{ width: 100%; } .company .box1 .title{ font-size: 30px; color: #444; line-height: 34px; border-bottom: 1px solid #eee; padding-bottom: 20px; } .company .box1 .img{ width: 100%; margin-top: 50px; } .company .box1 .address{ width: 100%; display: table; margin-top: 22px; } .company .box1 .address .add{ float: left; padding-left: 40px; font-size: 16px; line-height: 40px; color: #444; } .company .box1 .address .add1{ width: 30%; background: url(../images/icon2.png) left center no-repeat; } .company .box1 .address .add2{ width: 35%; background: url(../images/icon3.png) left center no-repeat; } .company .box1 .address .add3{ width: 35%; background: url(../images/icon4.png) left 8px no-repeat; } .company .box2{ width: 100%; margin-top: 90px; } .company .box2 .title{ font-size: 30px; line-height: 34px; color: #444; padding-bottom: 20px; border-bottom: 1px solid #eee; } .company .box2 .list{ width: 100%; margin-top: 48px; } .company .box2 .list li{ width: 100%; display: table; margin-bottom: 34px; } .company .box2 .list li .tbox{ float: left; width: 77.125%; box-sizing: border-box; padding-top: 24px; } .company .box2 .list li .tbox .add{ font-size: 16px; color: #444; line-height: 38px; float: left; padding-left: 40px; } .company .box2 .list li .tbox .add1{ background: url(../images/icon4.png) 7px center no-repeat; width: 100%; } .company .box2 .list li .tbox .add2{ background: url(../images/icon2.png) 4px center no-repeat; width: 40%; } .company .box2 .list li .tbox .add3{ background: url(../images/icon3.png) 9px center no-repeat; width: 50%; } .company .box2 .list li .simg{ float: right; width: 22.125%; } .company .box3{ width: 100%; margin-top: 75px; padding-bottom: 100px; } .company .box3 .title{ font-size: 30px; line-height: 34px; color: #444; padding-bottom: 20px; border-bottom: 1px solid #eee; } .company .box3 .select{ font-size: 16px; font-weight: bold; color: #444; line-height: 42px; margin-top: 30px; padding-left: 25px; } .company .box3 .select select{ width: 200px; height: 42px; border: 1px solid #e5e5e5; margin-left: 20px; padding-left: 20px; } .company .box3 .list{ width: 100%; display: table; margin-top: 50px; } .company .box3 .list li{ width: 48.4%; float: left; margin-bottom: 32px; min-height: 152px; } .company .box3 .list li:nth-child(2n){ float: right; } .company .box3 .list li .add{ font-size: 16px; color: #444; line-height: 38px; padding-left: 40px; } .company .box3 .list li .add1{ background: url(../images/icon4.png) 7px 7px no-repeat; width: 100%; } .company .box3 .list li .add2{ background: url(../images/icon2.png) 4px center no-repeat; } .company .box3 .list li .add3{ background: url(../images/icon3.png) 9px center no-repeat; } .product{ width: 100%; } .product-list{ width: 100%; padding: 70px 0 68px; } .product-list ul{ width: 100%; display: table; } .product-list li{ width: 18.375%; float: left; margin-right: 2%; margin-bottom: 24px; position: relative; } .product-list li:nth-child(5n){ margin-right: 0; } .product-list li:hover{ box-shadow: 0 0 12px 3px rgba(0,0,0,.17); } .product-list li a{ display: block; } .product-list li .img{ width: 100%; position: relative; } .product-list li .img::after{ content: ''; width: 100%; height: 100%; position: absolute; left: 0; top: 0; background: url(../images/product-bg1.png) center center no-repeat; background-size: 100% 100%; transition: all ease .5s; } .product-list li:hover .img::after{ background: url(../images/product-bg2.png) center center no-repeat; background-size: 100% 100%; } .product-list li .txt{ width: 100%; font-size: 18px; color: #212121; text-align: center; line-height: 1; position: absolute; left: 0; bottom: 29px; transition: all ease .5s; } .product-list li:hover .txt{ bottom: 40px; } .product-list li .hot{ position: absolute; left: 0; top: 0; z-index: 3; } .product-list .more{ width: 230px; height: 70px; background: #212121; display: table; margin: 41px auto 0; font-size: 16px; color: #fff; text-align: center; line-height: 70px; } .product-list2{ width: 100%; padding: 20px 0 68px; } .product-list2 ul{ width: 100%; display: table; } .product-list2 li{ width: 47.5%; float: left; margin-right: 5%; margin-bottom: 50px; position: relative; } .product-list2 li:nth-child(2n){ margin-right: 0; } .product-list2 li a{ display: block; } .product-list2 li .img{ width: 100%; overflow: hidden; } .product-list2 li .img img{ width: 100%; transition: all ease .5s; } .product-list2 li:hover .img img{ transform: scale(1.05); } .product-list2 li .tbox{ width: 100%; position: absolute; left: 0; top: 0; padding: 62px 0 0 54px; color: #eee; } .product-list2 li .tbox .t1{ font-size: 26px; line-height: 1; } .product-list2 li .tbox .t2{ font-size: 16px; line-height: 1; margin-top: 18px; } .product-list2 li .tbox .t3{ font-size: 14px; line-height: 1; color: #999; margin-top: 53px; transition: all ease .5s; } .product-list2 li:hover .tbox .t3{ color: #fff; } .product-list2 .more{ width: 230px; height: 70px; background: #212121; display: table; margin: 13px auto 0; font-size: 16px; color: #fff; text-align: center; line-height: 70px; } .product-list3{ width: 100%; padding: 80px 0 60px; } .product-list3 ul{ width: 100%; display: table; } .product-list3 li{ width: 48.5%; margin-right: 3%; float: left; margin-bottom: 38px; } .product-list3 li:nth-child(2n){ margin-right: 0; } .product-list3 li a{ display: block; } .product-list3 li .img{ width: 100%; overflow: hidden; } .product-list3 li .img img{ width: 100%; transition: all ease .8s; } .product-list3 li:hover .img img{ transform: scale(1.05); } .product-list3 li .tbox{ width: 100%; color: #444; padding-top: 35px; } .product-list3 li .tbox .t1{ font-size: 24px; font-weight: bold; line-height: 1; } .product-list3 li .tbox .t2{ font-size: 20px; line-height: 1; margin-top: 20px; } .product-list3 .more{ width: 230px; height: 70px; background: #212121; display: table; margin: 20px auto 0; font-size: 16px; color: #fff; text-align: center; line-height: 70px; } .product-info{ width: 1400px; margin: auto; padding: 100px 0 68px; } .product-info .title{ text-align: center; font-size: 30px; font-weight: bold; color: #444; } .product-info .txt{ width: 100%; margin-top: 50px; } .product-info .txt img{ margin-bottom: 11px; } .product-info .ckbox{ width: 100%; border-top: 1px solid #eee; display: table; padding-top: 42px; margin-top: 41px; } .product-info .ckbox .back{ font-size: 16px; color: #666; line-height: 1; float: left; } .product-info .ckbox .other{ float: right; font-size: 16px; line-height: 1; color: #666; } .product-info .ckbox .other a{ color: #666; margin: 0 50px; } .product-info .ckbox .other a:last-child{ margin-right: 0; } .product-info .more{ width: 230px; height: 70px; background: #212121; display: table; margin: 50px auto 0; font-size: 16px; color: #fff; text-align: center; line-height: 70px; } .p5{ width: 100%; display: table; padding: 67px 0 90px; } .p5 .box-menu{ width: 202px; float: left; } .p5 .box-menu .title{ font-size: 30px; color: #444; line-height: 1; } .p5 .box-menu .tbox{ width: 100%; position: relative; margin-top: 33px; } .p5 .box-menu .tbox .cbox{ width: 38px; height: 40px; background: #212121; text-align: center; line-height: 40px; font-size: 24px; color: #999; cursor: pointer; } .p5 .box-menu .tbox .p-menu{ width: 164px; position: absolute; left: 38px; top: 0; z-index: 3; background: #212121; padding-top: 15px; padding-bottom: 20px; display: none; } .p5 .box-menu .tbox .p-menu .t1{ font-size: 20px; line-height: 1; font-family: "title-font1"; color: #999; text-transform: uppercase; opacity: 0.1; text-align: right; padding-right: 20px; } .p5 .box-menu .tbox .p-menu .line{ font-size: 16px; line-height: 1; color: #999; opacity: 0.1; text-align: right; padding-right: 7px; margin-top: 10px; } .p5 .box-menu .tbox .p-menu ul{ width: 100%; margin-top: 8px; } .p5 .box-menu .tbox .p-menu ul li{ width: 100%; position: relative; padding-left: 40px; } .p5 .box-menu .tbox .p-menu ul li a{ font-size: 16px; line-height: 50px; color: #999; transition: all ease .5s; } .p5 .box-menu .tbox .p-menu ul li::after{ content: ''; position: absolute; width: 0; height: 2px; background: #fff; left: 17px; top: 25px; transition: all ease .5s; } .p5 .box-menu .tbox .p-menu ul li:hover::after{ width: 10px; } .p5 .box-menu .tbox .p-menu ul li.on::after{ width: 10px; } .p5 .box-menu .tbox .p-menu ul li:hover a{ color: #fff; } .p5 .box-menu .tbox .p-menu ul li.on a{ color: #fff; } .p5 .box-list{ width: calc(100% - 225px); float: right; margin-top: 12px; } .p5 .box-list ul{ width: 100%; display: table; } .p5 .box-list li{ width: 48.2%; float: left; margin-right: 3.6%; margin-bottom: 90px; position: relative; } .p5 .box-list li:nth-child(2n){ margin-right: 0; } .p5 .box-list li a{ display: block; } .p5 .box-list li .img{ width: 100%; } .p5 .box-list li .txt{ width: 54%; height: 70px; background: #fff; text-align: center; line-height: 70px; font-size: 24px; color: #444; position: absolute; left: 50%; transform: translateX(-50%); bottom: -35px; z-index: 2; box-shadow: 0 0 20px 3px rgba(0,0,0,.13); } .p5 .box-list .more{ width: 230px; height: 70px; background: #212121; display: table; margin: 5px auto 0; font-size: 16px; color: #fff; text-align: center; line-height: 70px; } .news-list{ width: 100%; padding: 82px 0; } .news-list ul{ width: 100%; display: table; } .news-list li{ width: 31.25%; float: left; margin-right: 3.125%; margin-bottom: 50px; } .news-list li:nth-child(3n){ margin-right: 0; } .news-list li a{ display: block; } .news-list li .ibox{ width: 100%; position: relative; } .news-list li .ibox .simg{ width: 100%; position: relative; z-index: 2; } .news-list li .ibox .simg img{ width: 100%; } .news-list li .ibox .box1{ position: absolute; width: 100%; height: 100%; background: #212121; left: 0; top: 0; z-index: 1; transition: all ease .5s; } .news-list li:hover .ibox .box1{ left: -18px; top: -16px; } .news-list li .ibox .box2{ position: absolute; width: 100%; height: 100%; background: rgba(0,0,0,.5); left: 0; top: 0; z-index: 3; opacity: 0; transition: all ease .5s; } .news-list li:hover .ibox .box2{ opacity: 1; } .news-list li .ibox .box2 .st1{ font-size: 20px; line-height: 25px; font-weight: bold; color: #fff; position: absolute; left: 26px; bottom: 44px; } .news-list li .ibox .box2 .sline{ width: 50px; height: 2px; background: #fff; position: absolute; left: 32px; bottom: 28px; } .news-list li .ibox .box2 .share{ width: 26px; height: 26px; position: absolute; right: 30px; bottom: 40px; } .news-list li .tbox{ width: 100%; } .news-list li .tbox .t1{ font-size: 18px; line-height: 25px; color: #444; margin-top: 43px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; transition: all ease .5s; } .news-list li:hover .tbox .t1{ font-weight: bold; } .news-list li .tbox .t2{ font-size: 14px; line-height: 25px; color: #999; margin-top: 17px; } .page-list{ width: 100%; text-align: center; margin-top: 37px; } .page-list a{ display: inline-block; width: 35px; height: 35px; text-align: center; line-height: 35px; font-size: 14px; color: #666; } .page-list .prev, .page-list .next{ margin: 0 8px; } .news-info{ width: 100%; padding: 115px 0 65px; } .news-info .box{ display: table; } .news-info .news-other{ width: 18.75%; float: left; } .news-info .news-other .title{ font-size: 30px; font-weight: bold; color: #444; line-height: 1; } .news-info .news-other .slist{ width: 100%; } .news-info .news-other .slist li{ width: 100%; margin-top: 58px; } .news-info .news-other .slist li a{ display: block; } .news-info .news-other .slist li .t1{ font-size: 16px; line-height: 30px; color: #666; } .news-info .news-other .slist li .t2{ font-size: 14px; line-height: 25px; color: #999; margin-top: 16px; } .news-info .info-box{ width: 74.25%; float: right; } .news-info .info-box .title{ text-align: center; font-size: 30px; line-height: 1; color: #444; font-weight: bold; } .news-info .info-box .title span{ font-size: 14px; line-height: 30px; color: #999; font-weight: initial; display: block; margin-top: 20px; } .news-info .info-box .txt{ font-size: 16px; line-height: 30px; color: #666; margin-top: 68px; } .news-info .info-box .txt img{ display: block; margin: 50px auto 0; } .news-info .ckbox{ width: 100%; display: table; padding-top: 57px; } .news-info .ckbox .back{ font-size: 16px; color: #666; line-height: 1; float: left; } .news-info .ckbox .other{ float: right; font-size: 16px; line-height: 1; color: #666; } .news-info .ckbox .other a{ color: #666; margin: 0 50px; } .news-info .ckbox .other a:last-child{ margin-right: 0; } .contact{ width: 100%; } .contact .boxs1{ width: 100%; display: table; padding: 87px 0 0; } .contact .boxs1 .sz-add{ width: 40%; float: left; padding-left: 40px; } .contact .boxs1 .sz-add .t1{ font-size: 30px; line-height: 34px; color: #444; border-bottom: 1px solid #eee; padding: 12px 0 20px; } .contact .boxs1 .sz-add .t2{ font-size: 16px; line-height: 40px; color: #444; margin-top: 16px; } .contact .boxs1 .sz-add .ewms{ width: 100%; display: table; margin-top: 114px; } .contact .boxs1 .sz-add .ewms .ewm{ width: 16.7%; float: left; margin-right: 11%; } .contact .boxs1 .sz-add .ewms .ewm span{ font-size: 16px; color: #444; line-height: 34px; display: block; margin-bottom: 5px; } .contact .boxs1 .sz-add .ewms .ewm:last-child{ margin-right: 0; } .contact .boxs1 .map{ width: 50.25%; float: right; } .contact .boxs2{ width: 100%; display: table; padding: 83px 0 80px; } .contact .boxs2 .left{ float: left; width: 40%; padding-left: 40px; } .contact .boxs2 .left .title{ font-size: 30px; line-height: 34px; color: #444; border-bottom: 1px solid #eee; padding-bottom: 20px; } .contact .boxs2 .left ul{ width: 100%; padding-top: 20px; } .contact .boxs2 .left li{ width: 100%; display: table; margin-bottom: 38px; } .contact .boxs2 .left li .add{ font-size: 16px; line-height: 38px; color: #444; padding-left: 40px; float: left; } .contact .boxs2 .left li .add1{ background: url(../images/icon4.png) left 9px no-repeat; width: 100%; } .contact .boxs2 .left li .add2{ background: url(../images/icon2.png) left center no-repeat; width: 60%; } .contact .boxs2 .left li .add3{ background: url(../images/icon3.png) left center no-repeat; } .contact .boxs2 .right{ float: right; width: 50.25%; } .contact .boxs2 .right .title{ font-size: 30px; line-height: 34px; color: #444; margin-bottom: 20px; } .contact .boxs2 .right .select{ width: 100%; background: #eee; border: 1px solid #e5e5e5; display: table; padding: 15px 0; } .contact .boxs2 .right .select span{ line-height: 42px; display: block; float: left; width: 100px; color: #444; font-size: 14px; font-weight: bold; text-align: center; } .contact .boxs2 .right .select select{ width: 200px; height: 42px; background: #fff; border: 1px solid #e5e5e5; padding: 0 20px; } .contact .boxs2 .right .tbox{ margin-top: 25px; } .contact .boxs2 .right .tbox .add{ font-size: 16px; line-height: 38px; color: #444; padding-left: 40px; } .contact .boxs2 .right .tbox .add1{ background: url(../images/icon4.png) left 7px no-repeat; } .contact .boxs2 .right .tbox .add2{ background: url(../images/icon2.png) left center no-repeat; } .contact .boxs2 .right .tbox .add3{ background: url(../images/icon3.png) left center no-repeat; } .contact2{ width: 100%; padding: 80px 0 70px; } .contact2 .title{ font-size: 30px; line-height: 34px; color: #444; } .contact2 .txt{ font-size: 16px; line-height: 34px; color: #666; margin-top: 25px; } .contact2 .txt span{ font-size: 14px; } .contact2 .txt span span{ color: #cf0c0c; } .contact2 .tbox{ width: 100%; display: table; } .contact2 .tbox .t1{ font-size: 16px; color: #444; line-height: 34px; margin-bottom: 5px; margin-top: 20px; } .contact2 .tbox .t1 span{ font-size: 20px; color: #cf0c0c; margin-right: 15px; } .contact2 .tbox select{ width: 100%; height: 60px; border: 1px solid #e5e5e5; padding: 0 20px; font-size: 14px; color: #999; background: #fff url(../images/icon14.png) 98% center no-repeat; } .contact2 .tbox .t2{ width: 47.5%; float: left; height: 60px; border: 1px solid #e5e5e5; padding: 0 20px; font-size: 14px; } .contact2 .tbox .gender{ line-height: 60px; margin-left: 5%; float: left; } .contact2 .tbox .gender label{ margin-right: 60px; } .contact2 .tbox .gender label input{ width: 18px; height: 18px; margin-right: 15px; } .contact2 .tboxs .tbox{ width: 47.5%; float: left; } .contact2 .tboxs .tbox:nth-child(2n){ float: right; } .contact2 .tbox .t3{ width: 100%; height: 60px; border: 1px solid #e5e5e5; padding: 0 20px; font-size: 14px; } .contact2 .tbox .t4{ width: 100%; height: 150px; padding: 20px; line-height: 34px; font-size: 14px; border: 1px solid #e5e5e5; resize: none; } .contact2 .btn{ width: 240px; height: 60px; background: #212121; display: table; margin: 60px auto 0; font-size: 16px; font-weight: bold; color: #fff; -webkit-appearance: none; } .p6-box{ width: 100%; display: inline-block; margin-top: 62px; } .p6-img{ width: 50%; float: left; } .pc-slide { width: 100%; display: inline-block; } .pc-slide .view { width: 77.5%; float: right; } .pc-slide .view .swiper-container { } .pc-slide .view .swiper-container .swiper-wrapper .swiper-slide img { width: 100%; } .preview { width: 60px; height: 336px; position: relative; float: left; padding: 25px 0; margin-top: 124px; } .preview .swiper-container { width: 100%; height: 288px; } .preview .swiper-slide { width: 100%; height: 89px; cursor: pointer; border: 1px solid #e5e5e5; } .preview .swiper-slide.active-nav{ border: 1px solid #005bac; } .preview .arrow-left { background: url(../images/icon10.png) no-repeat center center; position: absolute; left: 0; top: 0; width: 100%; height: 25px; z-index: 10; } .preview .arrow-right { background: url(../images/icon11.png) no-repeat center center; position: absolute; left: 0; bottom: 0; width: 100%; height: 22px; z-index: 10; } .p6-box .tbox{ width: 43.75%; float: right; padding-top: 22px; } .p6-box .tbox .title{ font-size: 30px; color: #444; line-height: 1; font-weight:700; /* font-family: "title-font1"; */ } .p6-box .tbox .txt{ font-size: 20px; color: #444; line-height: 1; margin-top: 20px; } .p6-box .tbox .t2{ font-size: 14px; line-height: 24px; color: #666; border-top: 2px solid #eee; border-bottom: 2px solid #eee; padding: 25px 0 32px; margin-top: 50px; } .p6-box .tbox .t2 b{ width: 16px; height: 16px; font-weight:normal; border-radius: 50%; display: inline-block; margin-right: 15px; } .buynow{ width: 100%; text-align: center; margin: 50px 0 60px; } .buynow .title{ font-size: 20px; line-height: 1; font-weight: bold; color: #222; background: url(../images/icon17.png) center center no-repeat; } .buynow .boxs{ margin-top: 30px; } .buynow .boxs a{ display: inline-block; margin: 0 20px; } .product .box .ckbox{ width: 100%; position: relative; margin-top: 90px; margin-bottom: 60px; } .product .box .ckbox .back{ font-size: 16px; color: #666; position: absolute; left: 0; } .product .box .ckbox .other{ font-size: 16px; line-height: 1; color: #666; text-align: center; } .product .box .ckbox .other .prev{ padding: 0 50px; color: #666; background: url(../images/icon8.png) left center no-repeat; } .product .box .ckbox .other .next{ padding: 0 50px; color: #666; background: url(../images/icon9.png) right center no-repeat; } .m-footer{ display: none; } .flex-menu{ display: none; } .fm-box{ position: fixed; left: 4px; top: 50%; transform: translateY(-50%); width: 70px; height: 130px; background: #212121; z-index: 99; cursor: pointer; border-radius: 4px; } .fm-box .icon1{ text-align: center; font-size: 14px; color: #fff; line-height: 1; margin: 35px 0 24px; } .fm-box .icon2{ width: 38px; height: 27px; margin: auto; } .fm-list{ position: fixed; z-index: 98; left: 0; top: 0; width: 100%; height: 100%; background: rgba(0,0,0,.2); display: none; } .fm-list.on{ display: block; } .fm-list ul{ width: 24%; height: 100%; background: #2f2f2f; padding-left: 9%; display: flex; justify-content: center; flex-direction: column; position: absolute; left: 0; top: 0; transform: translateX(-24%); transition: all ease .5s; } .fm-list.on ul{ transform: translateX(0); } .fm-list ul li{ margin-bottom: 25px; position: relative; } .fm-list ul li::after{ width: 0; height: 1px; background: #fff; content: ''; position: absolute; left: 0; bottom: 0; transition: all ease .5s; } .fm-list ul li a{ font-size: 16px; color: #fff; line-height: 46px; } .fm-list ul li:hover::after{ width: 100%; } .fm-list ul li.on::after{ width: 100%; /* border-bottom: 1px solid #fff; */ } @media screen and (max-width: 1660px){ .box{ width: 100%; padding: 0 4%; } .header .menu li, .info-header .menu li{ margin-right: 60px; } .banner .swiper-pagination, .banner .numbox{ bottom: 40px; } .index-about{ background-size: 45%; } .index-news .box{ padding: 76px 4% 155px; } .index-news .news .newslist li{ padding: 20px 0 21px; } .about-introduction .img2{ right: 4%; } .footer .box1 .f-menu ul{ width: 140px; } } @media screen and (max-width: 1440px){ .header .menu li, .info-header .menu li{ margin-right: 40px; } .banner .swiper-pagination, .banner .numbox{ bottom: 30px; } .index-about .box1 .tbox .line{ margin-top: 30px; } .index-about .box1 .tbox .txt{ margin-top: 40px; } .index-product .title .box, .index-display .title .box { padding-top: 80px; } .index-product .list li .tbox{ padding: 50px 0 0 25px; } .index-news .box { padding: 76px 4%; } .index-news .news .newslist{ padding: 8px 26px 0 22px; } .index-news .news .newslist li{ padding: 18px 0; } .footer .box1 .f-menu ul{ width: 140px; } .company .box3 .list li{ width: 48.4%; } .news-info .news-other{ width: 21.75%; } .contact .boxs1 .sz-add .ewms{ margin-top: 60px; } .product-info{ width: 100%; } .footer .box1 .f-menu ul{ width: 120px; } } @media screen and (max-width: 1366px){ .header .menu li, .info-header .menu li{ margin-right: 30px; } .index-about{ background: #2f2f2f url(../images/about-img11.png) right 333px no-repeat; background-size: 45%; } .index-about .box1 .tbox{ width: 45%; } .index-about .box1 .tbox .t1, .index-product .title .box .t1, .index-display .title .box .t1, .index-news .companys .title .t1, .about-introduction .title, .about-pilot .tbox .title, .about-pilot2 .title{ font-size: 40px; } .index-about .box1 .tbox .t2, .index-product .title .box .t2, .index-display .title .box .t2, .index-news .companys .title .t2, .index-news .news .title .t2, .about-introduction .t1, .about-pilot .tbox .t1, .about-pilot2 .t1, .product-list2 li .tbox .t1, .index-display .list li .tbox .t1{ font-size: 20px; } .index-about .box1 .tbox .line, .index-product .title .box .line, .index-display .title .box .line{ height: 80px; } .index-about .list .swiper-slide .title{ height: 60px; line-height: 60px; bottom: -35px; } .index-product .list li .tbox .t1{ font-size: 22px; } .index-product .list li .tbox .t2{ font-size: 14px; } .index-product .list li .tbox .t3{ margin-top: 40px; } .index-display .list li .tbox .t1{ font-weight: initial; } .index-display .list li .tbox .t2{ margin-top: 5px; font-size: 14px; } .index-news .news .title{ margin-top: 0; } .index-news .news .newslist li{ padding: 17px 0; } .about-introduction{ padding: 70px 0; } .about-pilot{ padding: 70px 0; } .about-introduction .txt{ padding: 30px 53.4% 30px 30px; } .about-pilot .tbox .txt{ margin-top: 40px; } .about-pilot .img{ padding: 35px 35px 44px 40px; } .about-pilot2{ padding: 60px 0 65px; } .about-pilot2 .txt{ margin-top: 40px; } .about-pilot2 .img img{ margin-top: 50px; } .company .box3 .list li{ min-height: 152px; } .product-list2 li .tbox{ padding: 30px 0 0 25px; } .product-list2 li .tbox .t2{ font-size: 14px; } .product-list2 li .tbox .t3{ margin-top: 30px; } .preview{ margin-top: 80px; } .product-list3 li .tbox{ padding-top: 20px; } .product-list3 li .tbox .t1{ font-size: 20px; font-weight: initial; } .product-list3 li .tbox .t2{ font-size: 14px; margin-top: 5px; } .p5 .box-list li .txt{ height: 60px; line-height: 60px; font-size: 20px; } .product-info .title{ font-size: 24px; } .news-list li{ margin-bottom: 40px; } .news-list li .tbox .t1{ margin-top: 20px; } .news-list li .tbox .t2{ margin-top: 5px; } .contact .boxs1 .sz-add .ewms{ margin-top: 40px; } .contact .boxs1 .sz-add .ewms .ewm{ width: 24.7%; } .contact2 .tbox select, .contact2 .tbox .t2, .contact2 .tbox .t3{ height: 50px; } .contact2 .tbox .gender{ line-height: 50px; } .footer .box1 .f-menu ul{ width: 120px; } .footer .box1 .contact{ width: 260px; } .footer .box1 .contact .tbox1 .t1{ padding-top: 18px; } } @media screen and (max-width: 1220px){ .header .logo{ margin-top: 12px; } .header .menu{ margin-top: 22px; } .header .menu li, .info-header .menu li{ margin-right: 10px; height: 58px; } .header .menu li .menu-link, .info-header .menu li .menu-link{ padding: 0 15px; } .menu-s{ top: 80px; } .info-header{ height: 80px; } .info-header .logo{ padding-top: 12px; } .info-header .menu{ padding-top: 22px; } .banner .swiper-pagination, .banner .numbox{ bottom: 20px; } .index-product .list li .tbox{ padding: 30px 0 0 20px; } .index-product .list li .tbox .t1{ font-size: 20px; } .index-news .news .newslist{ padding: 0 26px 0 22px } .index-news .news .newslist li{ padding: 16px 0; } .info-menu li a{ line-height: 60px; font-size: 14px; } .about-introduction .txt, .about-pilot .tbox .txt, .about-pilot2 .txt{ font-size: 14px; line-height: 30px; } .history .list li{ font-size: 16px; line-height: 40px; } .company .box2 .list li .tbox .add2, .company .box2 .list li .tbox .add3{ width: 45%; } .product-list2 .more, .product-list .more, .product-list3 .more, .p5 .box-list .more, .product-info .more{ height: 60px; line-height: 60px; } .breadcrumbs, .bread-menu{ line-height: 60px; } .bread-menu .menus li a{ font-size: 14px; } .contact .boxs2 .left li .add2{ width: 100%; } .footer .box1 .f-menu ul{ width: 90px; } .footer .box1 .contact{ width: 240px; } .footer .box1 .contact .tbox1 .t1{ padding-top: 18px; } } @media screen and (max-width: 1024px){ .header .menu li, .info-header .menu li a{ font-size: 14px; } .banner .explore{ bottom: 30px; } .index-about .box1 .tbox .line{ display: none; } .index-product .title .box, .index-display .title .box{ padding-top: 50px; } .index-news .news .newslist li{ padding: 13px 0; } .index-news .companys .list li .tbox{ padding: 28px 15px 25px; } .index-news .news .newslist li .t1{ font-size: 14px; } .index-news .news .newslist li .t2{ font-size: 12px; } .footer .box1 .f-menu ul{ width: 80px; } .contact .boxs1 .sz-add, .contact .boxs2 .left{ width: 45%; } .contact .boxs1 .sz-add .ewms{ margin-top: 10px; } .breadcrumbs, .bread-menu{ line-height: 50px; } .bread-menu .menus li a{ padding: 0 25px; } .info-menu li a{ line-height: 50px; padding: 0 25px; } .news-list{ padding: 60px 0; } .news-list li{ margin-bottom: 20px; } .news-list li .tbox .t1{ font-size: 16px; margin-top: 10px; } .news-list li .tbox .t2{ margin-top: 0; } .page-list{ margin-top: 20px; } .news-info{ padding: 65px 0; } .news-info .info-box .title, .news-info .news-other .title{ font-size: 24px; } .news-info .info-box .txt { font-size: 14px; line-height: 20px; margin-top: 30px; } .news-info .news-other .slist li{ margin-top: 30px; } .news-info .news-other .slist li .t1{ font-size: 14px; line-height: 20px; } .news-info .news-other .slist li .t2{ margin-top: 5px; } .product-list li .txt{ bottom: 15px; font-size: 16px; } .product-list li:hover .txt{ bottom: 25px; } .preview{ margin-top: 30px; } .about-introduction .title{ padding-top: 0; } .about-introduction .t1{ margin-bottom: 30px; } .about-introduction .img1{ margin-bottom: 30px; } .about-introduction .img1 img{ width: 30%; } .about-introduction .txt { padding: 20px 51.4% 20px 20px; } .history, .company{ padding-top: 60px; } .history .list, .company .box3{ padding-bottom: 60px; } .company .box2 .list li .tbox{ padding-top: 0; } } @media screen and (max-width: 980px){ .box{ padding: 0 5%; } .header{ position: relative; z-index: 15; background: #242424; padding: 8px 0 11px; display: table; } .header .logo{ width: 18%; margin-top: 0; } .header .menu{ width: 30px; height: 60px; background: url(../images/m-icon1.png) center center no-repeat; background-size: 100%; margin-top: 0; } .header .menu.on{ background: url(../images/m-icon2.png) center center no-repeat; background-size: 100%; } .header .menu ul{ position: fixed; z-index: -1; width: 100%; height: calc(100% - 80px); left: 0; top: 79px; background: #242424; padding: 0 5%; border-top: 1px solid #545454; overflow-y: scroll; display: none; } .header .menu li{ float: initial; border-bottom: 1px solid #545454; margin-right: 0; line-height: 60px; font-size: 15px; } .header .menu li:last-child{ border-bottom: none; } .header .menu li a{ padding-left: 7px; } .info-header{ position: relative; z-index: 15; background: #242424; padding: 10px 0; /* height: 50px; */ display: table; } .info-header .logo{ height: 60px; padding-top: 0; } .info-header .logo img{ height: 100%; } .info-header .logo img:first-child{ display: none; } .info-header .logo img:last-child{ display: block; } .info-header .menu{ width: 30px; height: 60px; background: url(../images/m-icon1.png) center center no-repeat; background-size: 100%; margin-top: 0; position: absolute; right: 5%; top: 0; padding-top: 0; } .info-header .menu.on{ background: url(../images/m-icon2.png) center center no-repeat; background-size: 100%; } .info-header .menu ul{ position: fixed; z-index: -1; width: 100%; height: calc(100% - 80px); left: 0; top: 79px; background: #242424; padding: 0 5%; border-top: 1px solid #545454; overflow-y: scroll; display: none; } .info-header .menu li{ float: initial; border-bottom: 1px solid #545454; margin-right: 0; font-size: 15px; } .info-header .menu li:last-child{ border-bottom: none; } .info-header .menu li a{ padding-left: 7px; line-height: 60px; color: #fff; } .banner .swiper-slide a img:first-child{ display: none; } .banner .swiper-slide a img:last-child{ display: block; } .banner .swiper-pagination, .banner .numbox, .banner .explore{ display: none; } .index-about{ background: #2f2f2f url(../images/about-img11.png) right 220px no-repeat; background-size: 100%; padding: 56px 0; } .index-about .box1 .img{ display: none; } .index-about .box1 .tbox{ width: 100%; float: initial; } .index-about .box1 .tbox .t1, .index-product .title .box .t1, .index-display .title .box .t1{ font-size: 25px; } .index-about .box1 .tbox .t2, .index-product .title .box .t2, .index-display .title .box .t2{ font-size: 15px; margin-top: 10px; } .index-about .box1 .tbox .line{ display: inline-block; height: 55px; margin-top: 27px; } .index-about .box1 .tbox .txt{ margin-top: 15px; line-height: 20px; } .index-about .list{ margin-top: 47px; } .index-about .list .swiper-container{ padding-bottom: 62px; } .index-about .list .swiper-container .swiper-pagination{ display: block; } .index-about .list .swiper-slide .title{ width: 60%; height: 44px; line-height: 44px; font-size: 14px; bottom: -22px; } .index-about .list .swiper-pagination{ bottom: 0; font-size: 0; } .index-about .list .swiper-pagination .swiper-pagination-bullet{ width: 10px; height: 10px; background: none; border: 1px solid #fff; opacity: .5; margin: 0 5px; } .index-about .list .swiper-pagination .swiper-pagination-bullet-active{ background: #fff; opacity: 1; } .index-product .title img:first-child, .index-display .title img:first-child{ display: none; } .index-product .title img:nth-child(2), .index-display .title img:nth-child(2){ display: block; } .index-product .title .box{ padding: 74px 5% 0; left: 0; transform: translateX(0); } .index-product .title .box .line, .index-display .title .box .line{ height: 55px; } .index-product .list{ padding: 30px 0 45px; } .index-product .list li{ width: 50%; } .index-product .list li .tbox{ padding: 22px 0 0 13px; } .index-product .list li .tbox .t1{ font-size: 16px; } .index-product .list li .tbox .t2{ font-size: 14px; margin-top: 7px; } .index-product .list li .tbox .t3{ font-size: 12px; margin-top: 25px; } .index-product .more, .index-display .more{ height: 20px; background-size: 20px; padding-left: 30px; font-size: 12px; margin-top: 28px; } .index-display .list{ padding: 30px 0 40px; } .index-display .list li{ width: 100%; margin-right: 0; margin-bottom: 24px; } .index-display .list li:last-child{ margin-bottom: 0; } .index-display .list li .tbox{ position: relative; bottom: 0; padding-left: 0; margin-top: 15px; } .index-display .list li .tbox .t1{ font-size: 14px; } .index-display .list li .tbox .t2{ font-size: 12px; } .index-news .box{ display: inline-block; padding: 34px 5%; } .index-news .companys{ width: 100%; float: initial; } .index-news .companys .title .t1, .index-news .news .title .t1{ font-size: 25px; } .index-news .companys .title .t2, .index-news .news .title .t2{ font-size: 15px; margin-top: 7px; } .index-news .companys .list{ display: inline-block; margin-top: 25px; } .index-news .companys .list ul{ display: none; } .index-news .companys .list .swiper-container{ width: 100%; padding-bottom: 35px; display: block; } .index-news .companys .list .swiper-container .img{ width: 100%; } .index-news .companys .list .swiper-container .img img{ width: 100%; } .index-news .list .swiper-slide .tbox{ width: 100%; background: #3b3b3b; padding: 22px 7px 20px; } .index-news .list .swiper-slide .tbox .t1{ font-size: 14px; color: #fff; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .index-news .list .swiper-slide .tbox .t2{ font-size: 12px; color: #999; margin-top: 10px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .index-news .list .swiper-slide .tbox .t3{ font-size: 12px; color: #999; margin-top: 17px; } .index-news .list .swiper-pagination{ bottom: 0; font-size: 0; } .index-news .list .swiper-pagination .swiper-pagination-bullet{ width: 10px; height: 10px; background: none; border: 1px solid #fff; opacity: .5; margin: 0 5px; } .index-news .list .swiper-pagination .swiper-pagination-bullet-active{ background: #fff; opacity: 1; } .index-news .companys .more{ display: none; } .index-news .news{ width: 100%; float: initial; margin-top: 45px; } .index-news .news .swiper-container, .index-news .news .news-button-prev, .index-news .news .news-button-next{ display: none; } .index-news .news .list{ background: #3b3b3b; padding: 0 10px; margin-top: 25px; display: block; } .index-news .news .list li{ width: 100%; line-height: 24px; border-bottom: 1px solid #434343; padding: 18px 0; display: table; } .index-news .news .list li:last-child{ border-bottom: none; } .index-news .news .list li .num{ width: 20px; height: 20px; float: left; margin: 2px 10px 2px 2px; color: #fff; background: #a0a0a0; text-align: center; line-height: 20px; font-size: 12px; } .index-news .news .list li .num1{ background: #e60012; } .index-news .news .list li .num2{ background: #e68200; } .index-news .news .list li .num3{ background: #efcb25; } .index-news .news .list li .t1{ float: left; font-size: 14px; color: #fff; width: 70%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .index-news .news .list li .t2{ float: right; font-size: 12px; color: #fff; } .index-news .news .more{ height: 20px; padding-left: 30px; font-size: 12px; margin-top: 28px; color: #999; text-transform: uppercase; background: url(../images/icon12.png) left center no-repeat; background-size: 20px; display: table; } .footer .box1{ padding: 27px 0 33px; } .footer .box1 .f-menu ul{ width: 100%; border-bottom: 1px solid #4e4e4e; display: table; padding: 13px 0; } .footer .box1 .f-menu ul li{ float: left; width: 25%; } .footer .box1 .f-menu ul .t1{ height: 100%; margin-bottom: 0; line-height: 20px; } .footer .box1 .f-menu ul .t2 a{ font-size: 12px; line-height: 20px; display: block; } .footer .box1 .f-menu ul .t2:nth-child(5), .footer .box1 .f-menu ul .t2:nth-child(8){ margin-left: 25%; } .footer .box1 .ewm{ width: 50%; margin: 42px 0 0; display: flex; } .footer .box1 .ewm .txt{ font-size: 12px; color: #999; margin-top: 13px; display: block; width: 50%; text-align: center; } .footer .box1 .contact{ width: 50%; margin: 42px 0 0; display: flex; flex-wrap: wrap; justify-content: space-between; } .footer .box1 .contact .title{ width: 100%; } .footer .box1 .contact .tbox1{ width: 49%; } .footer .box1 .contact .tbox1 .t1{ padding-top: 10px; font-size: 14px; } .footer .box2{ border-top: none; text-align: center; padding: 0 0 28px; } .footer .box2 .copyright, .footer .box2 .jszc{ float: initial; font-size: 12px; margin: 6px 0; } .go-top{ display: none; } .m-footer{ display: flex; left: 0; bottom: 0; display: table; background: #242424; width: 100%; padding: 14px 0; } .m-footer li{ width: 25%; float: left; } .m-footer li a{ display: block; } .m-footer li .icon{ width: 29px; margin: auto; position: relative; } .m-footer li .icon img:last-child{ position: absolute; opacity: 0; left: 0; top: 3px; } .m-footer li.on .icon img:last-child{ opacity: 1; } .m-footer li .txt{ text-align: center; font-size: 14px; color: #999; margin-top: 6px; } .m-footer li.on .txt{ color: #fff; } .info-banner img:first-child{ display: none; } .info-banner img:last-child{ display: block; } .info-banner img:last-child{ width: 100%; } .info-menu{ width: 100%; } .info-menu ul{ width: 100%; } .info-menu.about li{ width: 33.3%; } .info-menu.about li a{ display: block; text-align: center; } .about-introduction .title, .about-pilot .tbox .title, .about-pilot2 .title{ font-size: 25px; } .about-introduction .t1{ font-size: 15px; } .about-introduction{ padding: 57px 0; } .about-introduction .title{ margin-bottom: 7px; } .about-introduction .img1 img{ width: 70%; } .about-introduction .txt{ padding: 25px 15px 30px; } .about-introduction .img2{ width: 100%; position: relative; right: 0; } .about-introduction .txt, .about-pilot .tbox .txt, .about-pilot2 .txt{ line-height: 25px; } .about-pilot{ padding: 55px 0 35px; } .about-pilot .tbox{ width: 100%; float: initial; } .about-pilot .img{ width: 100%; float: initial; margin-top: 30px; } .about-pilot .tbox .t1, .about-pilot2 .t1{ font-size: 15px; margin-top: 7px; } .about-pilot .tbox .txt, .about-pilot2 .txt{ margin-top: 35px; } .history .map img:first-child{ display: none; } .history .map img:last-child{ display: block; } .history .title{ font-size: 15px; line-height: 25px; padding: 29px 0 10px; } .history .title span{ font-size: 12px; margin-left: 5px; } .history .list li{ font-size: 12px; line-height: 30px; } .history .list li .things{ width: calc(100% - 70px); float: right; } .company .box1 .title, .company .box2 .title, .company .box3 .title, .contact .boxs1 .sz-add .t1, .contact .boxs2 .left .title, .contact .boxs2 .right .title, .contact2 .title{ font-size: 15px; line-height: 17px; padding: 0 0 10px; } .company .box1 .img{ margin-top: 12px; } .company .box1 .address{ margin-top: 15px; } .company .box1 .address .add1, .company .box1 .address .add2, .company .box1 .address .add3{ width: 100%; font-size: 12px; background-size: 12px; padding-left: 20px; line-height: 30px; } .company .box2{ margin-top: 45px; } .company .box2 .list li{ margin-bottom: 25px; } .company .box2 .list li .simg, .company .box2 .list li .tbox, .company .box2 .list li .simg img{ width: 100%; float: initial; } .company .box2 .list li .tbox{ padding-top: 15px; } .company .box2 .list li .tbox .add1{ background: url(../images/icon4.png) left 7px no-repeat; } .company .box2 .list li .tbox .add2{ background: url(../images/icon2.png) left center no-repeat; } .company .box2 .list li .tbox .add3{ background: url(../images/icon3.png) left center no-repeat; } .company .box2 .list li .tbox .add1, .company .box2 .list li .tbox .add2, .company .box2 .list li .tbox .add3{ width: 100%; font-size: 12px; line-height: 30px; background-size: 12px; padding-left: 20px; } .company .box3{ margin-top: 35px; } .company .box3 .select{ width: 100%; padding-left: 0; font-size: 12px; margin-top: 15px; } .company .box3 .select select{ width: calc(100% - 60px); float: right; margin-left: 0; padding: 0 10px; } .company .box3 .list{ margin-top: 27px; } .company .box3 .list li{ width: 100%; float: initial; margin-right: 0; margin-bottom: 26px; min-height: initial; } .company .box3 .list li:nth-child(2n){ float: initial; } .company .box3 .list li .add1{ background: url(../images/icon4.png) left 7px no-repeat; } .company .box3 .list li .add2{ background: url(../images/icon2.png) left center no-repeat; } .company .box3 .list li .add3{ background: url(../images/icon3.png) left center no-repeat; } .company .box3 .list li .add1, .company .box3 .list li .add2, .company .box3 .list li .add3{ width: 100%; font-size: 12px; line-height: 30px; background-size: 12px; padding-left: 20px; } .breadcrumbs{ display: none; } .bread-menu .breads{ display: none; } .bread-menu .menus{ float: initial; width: 100%; } .bread-menu .menus li{ width: 33.3%; text-align: center; } .bread-menu.news .menus li{ width: 25%; text-align: center; } .bread-menu.news .menus li a{ display: block; padding: 0; text-align: center; } .contact .boxs1{ padding: 45px 0 0; } .contact .boxs1 .sz-add, .contact .boxs2 .left{ width: 100%; padding: 0; } .contact .boxs1 .sz-add .t2{ font-size: 12px; line-height: 30px; } .contact .boxs1 .sz-add .ewms .ewm{ width: 43%; } .contact .boxs1 .sz-add .ewms .ewm span{ font-size: 12px; } .contact .boxs1 .map{ width: 100%; margin-top: 40px; } .contact .boxs2 .left li .add1, .contact .boxs2 .left li .add2, .contact .boxs2 .left li .add3{ font-size: 12px; line-height: 30px; background-size: 12px; padding-left: 20px; } .contact .boxs2{ padding: 60px 0; } .contact .boxs2 .left li{ margin-bottom: 25px; } .contact .boxs2 .right{ width: 100%; } .contact .boxs2 .right .select{ background: none; border: none; padding: 0; } .contact .boxs2 .right .select span{ width: auto; } .contact .boxs2 .right .select select{ width: calc(100% - 70px); float: right; padding: 0 10px; } .contact .boxs2 .right .tbox .add1, .contact .boxs2 .right .tbox .add2, .contact .boxs2 .right .tbox .add3{ font-size: 12px; line-height: 30px; background-size: 12px; padding-left: 20px; } .contact .boxs2 .right .title{ border-bottom: 1px solid #eee; } .contact2 .txt{ font-size: 12px; line-height: 20px; margin-top: 5px; } .contact2 .txt span{ font-size: 12px; } .contact2 .tbox .t1{ font-size: 14px; line-height: 20px; } .contact2 .tbox .t1 span{ margin-right: 5px; font-size: 14px; } .contact2 .tbox select, .contact2 .tbox .t2, .contact2 .tbox .t3{ height: 40px; padding: 0 10px; } .contact2 .tbox select{ background-size: 12px; } .contact2 .tbox .t4{ padding: 10px; } .contact2 .tbox .gender{ line-height: 40px; } .contact2 .tbox .gender label{ margin-right: 20px; font-size: 16px; } .contact2 .tbox .gender label input{ margin-right: 5px; width: 14px; height: 14px; } .contact2 .btn{ height: 50px; margin: 30px auto 0; } .news-list ul{ display: block; } .news-list li{ width: 100%; margin-right: 0; float: initial; margin-bottom: 30px; } .news-list li .tbox .t1{ font-size: 14px; } .news-list li .tbox .t2{ font-size: 12px; } .page-list a{ width: 26px; height: 26px; line-height: 26px; } .page-list .prev img, .page-list .next img{ width: 10px; } .news-info .news-other, .news-info .info-box{ width: 100%; float: right; } .news-info .news-other{ margin-top: 68px; } .news-info .info-box .title, .news-info .news-other .title{ font-size: 20px; } .news-info .info-box .title span{ font-size: 12px; } .news-info .ckbox .back{ float: initial; margin: auto; display: table; } .news-info .ckbox .other{ width: 100%; float: initial; text-align: center; margin-top: 25px; } .news-info .ckbox .other a{ margin: 0 36px; } .news-info .ckbox .other a:last-child{ margin: 0 36px; } .product-list3{ padding: 60px 0; } .product-list3 li{ width: 100%; margin-right: 0; } .product-list3 li .tbox .t1{ font-size: 14px; font-weight: bold; } .product-list3 li .tbox .t2{ font-size: 12px; } .product-list3 .more{ display: none; } .p5{ padding: 27px 0; } .p5 .box-menu{ width: 100%; margin-bottom: 23px; } .p5 .box-menu .title{ font-size: 15px; } .p5 .box-menu .tbox{ margin-top: 12px; } .p5 .box-menu .tbox .cbox{ width: 20px; height: 20px; line-height: 20px; font-size: 12px; } .p5 .box-menu .tbox .p-menu{ left: 19px; } .p5 .box-list{ width: 100%; float: initial; } .p5 .box-list li{ width: 100%; margin-right: 0; margin-bottom: 52px; } .p5 .box-list li .txt{ height: 35px; line-height: 35px; bottom: -18px; font-size: 14px; } .p5 .box-list .more{ display: none; } .product-info .title{ font-size: 20px; } .product .box .ckbox{ padding-top: 26px; margin-top: 32px; margin-bottom: 50px; } .product .box .ckbox .back{ left: 50%; transform: translateX(-50%); } .product .box .ckbox .other{ width: 100%; float: initial; text-align: center; margin-top: 40px; } .product .box .ckbox .other a{ margin: 0 36px; } .product .box .ckbox .other a:last-child{ margin: 0 36px; } .product-info{ padding: 54px 0; } .product-info .txt{ margin-top: 20px; } .product-info .more{ width: 115px; height: 35px; line-height: 35px; font-size: 13px; margin: 31px auto 0; } .product-list2{ padding: 50px 0 36px; } .product-list2 li{ width: 100%; margin-right: 0; margin-bottom: 30px; } .product-list2 li .tbox{ padding: 30px 0 0 16px; } .product-list2 li .tbox .t1{ font-size: 16px; } .product-list2 li .tbox .t2{ font-size: 12px; margin-top: 10px; } .product-list2 li .tbox .t3{ font-size: 12px; margin-top: 25px; } .product-list2 .more{ display: none; } .product-list{ padding: 50px 0; } .product-list li{ width: 44%; margin-right: 12%; } .product-list li:nth-child(5n){ margin-right: 12%; } .product-list li:nth-child(2n){ margin-right: 0; } .product-list li .txt{ font-size: 14px; } .product-list .more{ display: none; } .head-height{ display: none; } .p6-img{ width: 100%; } .p6-box{ margin-top: 50px; } .p6-box .tbox{ width: 100%; } .preview{ margin-top: 148px; width: 55px; height: 321px; } .preview .swiper-container{ height: 271px; } .preview .swiper-slide{ height: 83px; } .pc-slide .view{ width: 90%; } .preview .arrow-left, .preview .arrow-right{ height: 20px; } .p6-box .tbox .title{ font-size: 24px; } .p6-box .tbox .txt{ font-size: 15px; margin-top: 15px; } .p6-box .tbox .t2{ margin-top: 27px; font-size: 14px; line-height: 30px; padding: 16px 0 18px; } .p6-box .tbox .t2 span{ width: 12px; height: 12px; } .product .box .ckbox .other .prev, .product .box .ckbox .other .next{ padding: 0; background: none; } } @media screen and (max-width: 767px){ .header .menu{ height: 30px; } .header .menu ul{ height: calc(100% - 50px); top: 49px; } .info-header{ height: 50px; } .breadcrumbs, .bread-menu{ line-height: 40px; } .info-header .logo, .info-header .menu{ height: 30px; } .info-header .menu ul{ top: 49px; height: calc(100% - 50px); } .info-menu.about li a{ line-height: 40px; font-size: 12px; } .preview{ margin-top: 70px; width: 30px; height: 202px; } .preview .swiper-container{ height: 152px; } .preview .swiper-slide{ height: 44px; } .footer .box1 .ewm, .footer .box1 .contact{ width: 100%; justify-content: space-between; } }