.banner .swiper-wrapper { height: 100%; } .banner .swiper-slide { height: 100%; background-repeat: no-repeat; background-size: cover; background-position: center; position: relative; } .banner .next { width: 220px; height: 55px; background-image: url(../images/index_next.png); background-repeat: no-repeat; position: absolute; left: 50%; transform: translate(-50%); bottom: 0px; cursor: pointer; } .item1 { background-color: #f9f9f9; } .item1 .container .l { width: 200px; } .item1 .container .l h4.title { font-size: 28px; color: #545454; padding-left: 27px; line-height: 34px; background-image: url(../images/title_bg.jpg); background-repeat: no-repeat; background-position: left center; margin-top: 60px; } .item1 .container .r { width: calc(100% - 200px); } .item1 .container .r .product_list { display: flex; flex-flow: row wrap; justify-content: space-between; margin-top: 75px; } .item1 .container .r .product_list li { width: calc((100% - 80px) / 3); margin-bottom: 15px; } .item1 .container .r .product_list li .pic { overflow: hidden; } .item1 .container .r .product_list li .pic img { width: 100%; display: block; transition: 0.5s; } .item1 .container .r .product_list li:hover .pic img { transform: scale(1.2); } .item1 .container .r .product_list li .txt { padding-left: 35px; } .item1 .container .r .product_list li .txt h5 { font-size: 18px; color: #545454; line-height: 39px; margin-top: 20px; font-weight: 600; } .item1 .container .r .product_list li .txt p { font-size: 12px; color: #6e6e6e; line-height: 32px; width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .item1 .container .r .product_list li:hover .txt h5 { color: #083f80; } .item2 { background-color: #f9f9f9; background-image: url(../images/about_p1.jpg); background-repeat: no-repeat; background-position: left center; /* background-size: auto 100%;*/ } .item2 .container .r { width: 50%; } .item2 .container .r h4.title { font-size: 28px; color: #363636; margin-top: 128px; font-weight: 600; } .item2 .container .r .article { margin-top: 60px; } .item2 .container .r .article p { font-size: 14px; color: #545454; line-height: 24px; margin-bottom: 0px; text-indent: 2em; } .item2 .container .r a.more { display: block; width: 154px; height: 56px; background-color: #083f80; font-size: 18px; color: #FFFFFF; text-align: center; line-height: 56px; margin-top: 35px; } .item2 .container .r ul.nums { display: flex; flex-flow: row nowrap; justify-content: space-around; margin-top: 90px; } .item2 .container .r ul.nums li .top:after { content: ""; clear: both; display: table; } .item2 .container .r ul.nums li .top h5 { font-weight: 100; font-family: pingfang; font-size: 48px; color: #383838; float: left; line-height: 54px; } .item2 .container .r ul.nums li .top span { float: right; font-family: pingfang; font-size: 12px; color: #939393; line-height: 54px; font-weight: 600; padding-left: 5px; } .item2 .container .r ul.nums li p { font-family: pingfang; font-size: 12px; color: #939393; font-weight: 600; line-height: 52px; text-align: center; } .item3 { background-color: #f9f9f9; } .item3 h4.title { font-size: 28px; color: #545454; padding-left: 26px; line-height: 158px; background-image: url(../images/title_bg.jpg); background-repeat: no-repeat; background-position: left center; } .item3 ul.ys_list { display: flex; flex-flow: row nowrap; justify-content: space-between; box-sizing: border-box; padding-left: 100px; } .item3 ul.ys_list li { width: calc(1180px / 3); background-color: #ffffff; transition: 0.5s; } .item3 ul.ys_list li .pic { overflow: hidden; } .item3 ul.ys_list li .pic img { display: block; width: 100%; transition: 0.5s; } .item3 ul.ys_list li:hover .pic img { transform: scale(1.2); } .item3 ul.ys_list li .txt { width: 100%; height: 325px; box-sizing: border-box; padding: 25px 30px; background-image: url(../images/ys_bg1.jpg); background-repeat: no-repeat; background-position: left 35px bottom 35px; transition: 0.5s; } .item3 ul.ys_list li .txt h5 { font-size: 20px; color: #424242; line-height: 70px; } .item3 ul.ys_list li .txt p { font-size: 14px; color: #727272; line-height: 24px; } .item3 ul.ys_list li:hover { box-shadow: 0 0 10px #CCCCCC; } .item3 ul.ys_list li:hover .txt { background-image: url(../images/ys_bg2.jpg); } .item4 { background-color: #f9f9f9; background-image: url(../images/hb_bg1.jpg); background-repeat: no-repeat; background-position: right center; background-size: auto 100%; } .item4 h4.title { font-size: 28px; color: #545454; padding-left: 26px; line-height: 158px; background-image: url(../images/title_bg.jpg); background-repeat: no-repeat; background-position: left center; } .item4 .content { display: flex; flex-flow: row nowrap; justify-content: space-between; box-sizing: border-box; padding-left: 100px; } .item4 .content .l { width: 520px; } .item4 .content .l img { display: block; width: 100%; } .item4 .content .r { width: calc(1300px - 520px); background-color: #FFFFFF; box-sizing: border-box; padding: 0 58px; } .item4 .content .r h5 { font-size: 20px; color: #2b2b2b; line-height: 48px; margin-top: 85px; font-weight: 600; } .item4 .content .r p { font-size: 14px; color: #555555; line-height: 24px; } .item4 .content .r ul { display: flex; flex-flow: row wrap; justify-content: space-between; margin-top: 45px; } .item4 .content .r ul li { width: calc((100% - 69px) / 4); box-sizing: border-box; border: 1px solid #e5e5e5; margin-bottom: 23px; } .item4 .content .r ul li img { display: block; width: 100%; } .item5 { background-color: #f9f9f9; } .item5 h4.title { font-size: 28px; color: #545454; padding-left: 26px; line-height: 158px; background-image: url(../images/title_bg.jpg); background-repeat: no-repeat; background-position: left center; } .item5 .content { display: flex; flex-flow: row nowrap; justify-content: space-between; box-sizing: border-box; padding-left: 100px; } .item5 .content .l { width: 500px; } .item5 .content .l img { display: block; width: 100%; } .item5 .content .r { width: calc(1300px - 500px); background-color: #FFFFFF; box-sizing: border-box; padding: 0 64px; } .item5 .content .r .news_list { display: flex; flex-flow: row wrap; justify-content: space-between; margin-top: 52px; } .item5 .content .r .news_list li { width: calc((100% - 40px) / 2); margin-bottom: 47px; } .item5 .content .r .news_list li span.addtime { font-size: 14px; color: #505050; line-height: 20px; font-weight: 600; } .item5 .content .r .news_list li h5 { font-size: 16px; color: #444444; line-height: 46px; margin-bottom: 9px; font-weight: 600; } .item5 .content .r .news_list li p { font-size: 12px; color: #686868; line-height: 22px; } .item5 .content .r .news_list li a { display: block; width: 110px; height: 36px; background-color: #efefef; border-radius: 3px; font-size: 14px; color: #353535; text-align: center; line-height: 36px; margin-top: 12px; } .item5 .content .r .news_list li:hover a { background-color: #083f80; color: #FFFFFF; } .item6 { background-color: #f9f9f9; } .item6 h4.title { font-size: 28px; color: #545454; padding-left: 26px; line-height: 158px; background-image: url(../images/title_bg.jpg); background-repeat: no-repeat; background-position: left center; } .item6 #map { width: calc(100%); height: 235px; margin-top: 65px; } .item6 .content { display: flex; flex-flow: row nowrap; justify-content: space-between; box-sizing: border-box; padding-top: 40px; } .item6 .content .l { width: 500px; box-sizing: border-box; padding-left: 50px; } .item6 .content .l h5 { font-size: 24px; color: #434343; line-height: 24px; } .item6 .content .l ul { margin-top: 24px; } .item6 .content .l ul li:after { display: table; content: ""; clear: both; } .item6 .content .l ul li span { float: left; display: block; font-size: 16px; color: #888888; line-height: 30px; } .item6 .content .l ul li p { float: left; display: block; font-size: 16px; color: #424242; line-height: 30px; margin-bottom: 0px; } .item6 .content .r { width: 700px; } .item6 .content .r .mess_info { margin-top: 0px; } .item6 .content .r .mess_info .content { padding-left: 0px; padding-top: 0px; } .mess_info ul li:nth-of-type(5) textarea { height: 140px !important; } .item6 p.footer { font-size: 14px; color: #838383; line-height: 24px; } #pc_menu { position: fixed; z-index: 100; right: 100px; top: 50%; transform: translateY(-50%); } #pc_menu li a { display: block; font-size: 14px; color: #9e9e9e; line-height: 34px; } #pc_menu li.active a { color: #333333; } #pc_menu li.active a:before { height: 55px; width: 2px; background-color: #9e9e9e; } .fp-tableCell { vertical-align: inherit; } .footer { position: inherit; } @media screen and (max-width: 550px) { .banner { height: 260px !important; background-position: center center; } .banner .next { display: none; } #pc_menu { display: none; } .item1 .container .l { float: none !important; width: 100%; padding-top: 20px; } .item1 .container .l h4.title { margin-top: 0px; } .item1 .container .r { width: 100%; } .item1 .container .r .product_list { margin-top: 30px; } .item1 .container .r .product_list li { width: calc((100% - 15px) / 2); } .item1 .container .r .product_list li .txt { padding-left: 5px; } .item1 .container .r .product_list li .txt h5 { margin-top: 0px; font-size: 16px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .item1 .container .r .product_list li .txt p { margin: 0px; line-height: 14px; } .item2 { background-image: none; } .item2 .container .r { width: 100%; float: none; } .item2 .container .r h4.title { margin-top: 40px; font-size: 28px; color: #545454; padding-left: 27px; line-height: 34px; background-image: url(../images/title_bg.jpg); background-repeat: no-repeat; background-position: left center; font-weight: 500; } .item2 .container .r .article { margin-top: 20px; padding: 0 10px; } .item2 .container .r a.more { margin: 0 auto; margin-top: 20px; } .item2 .container .r ul.nums { margin-top: 20px; } .item2 .container .r ul.nums li .top h5 { font-size: 24px; } .item3 h4.title { line-height: 54px; margin-bottom: 20px; } .item3 ul.ys_list { padding-left: 0px; flex-flow: row wrap; } .item3 ul.ys_list li { width: 100%; } .item3 ul.ys_list li .txt { height: 240px; } .item4 { background-image: none; } .item4 h4.title { line-height: 54px; margin-bottom: 20px; } .item4 .content { padding-left: 0px; } .item4 .content .l { display: none; } .item4 .content .r { width: 100%; padding: 0 10px; } .item4 .content .r h5 { margin-top: 15px; line-height: 34px; font-size: 16px; } .item4 .content .r ul { justify-content: flex-start; } .item4 .content .r ul li { width: calc(100% / 2); margin-right: -1px; } .item5 h4.title { line-height: 54px; margin-bottom: 20px; } .item5 .content { padding-left: 0px; flex-flow: row wrap; } .item5 .content .l { width: 100%; } .item5 .content .r { width: 100%; padding: 0 10px; } .item5 .content .r .news_list li { width: 100%; margin-bottom: 47px; } .item6 h4.title { line-height: 54px; margin-bottom: 0px; } .item6 .box { width: 100%; } .item6 #map { width: 100%; margin-top: 0px; } .item6 .content { flex-flow: row wrap; } .item6 .content .l { width: 100%; padding: 0 10px; } .item6 .content .l h5 { font-size: 20px; } .item6 .content .l ul { margin-top: 10px; } .item6 .content .r { width: 100%; margin-top: 20px; } .item6 .content .r .mess_info { padding: 0 10px; } .mess_info ul li { width: 100% !important; margin-bottom: 20px; } .mess_info ul li input { padding-left: 10px !important; } .mess_info ul li:nth-of-type(5) textarea { padding-left: 10px !important; } .mess_info ul li.submit input { margin-top: 10px; } .item6 p.footer { padding: 0 10px; } }