/*鍒楄〃*/ .list{ } .list-title{ font-size:32px; font-weight:600; color:rgba(51,51,51,1); letter-spacing:1px; margin-bottom: 30px; } .list .item{ width: 100%; border-radius: 10px; box-shadow: 0 0 20px rgba(51,51,51,0.1); height: 300px; position: relative; margin-bottom: 40px; } .item-l{ width: 25%; flex-shrink: 0; border-top-left-radius:10px; border-bottom-left-radius:10px; } .item-r{ flex: 1; padding: 30px; display: flex; flex-direction: column; justify-content: space-between; } .item-r h3{ font-size:26px; font-weight:600; color:rgba(51,51,51,1); line-height:45px; } .item-r p{ margin-top: 15px; font-size:16px; font-weight:500; color:rgba(68,68,68,1); line-height:25px; overflow:hidden; text-overflow:ellipsis; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:3; } .tag{ padding-left: 20px; margin: 0; width:80%; } .item-r ul li{ list-style-type:disc; font-size:14px; font-weight:500; color:rgba(62,94,187,1); line-height:25px; } .item-r a.btn{ position: absolute; bottom: 30px; right: 30px; } .banner{ width:100%; height:600px; padding:150px 0; } .banner .text{ text-align:center; } .banner h1{ font-size:64px; font-weight:700; color:#fff; text-align:center; text-shadow: 1px 1px 10px rgba(0,0,0,0.5); } .banner p{ font-size:20px; color:rgba(255,255,255,0.8); } .menu{ background:#fff; text-align:center; } .menu ul{ margin:0; overflow-x: auto; overflow-y: hidden; white-space: nowrap; } .menu li{ display:inline-block; font-size:16px; padding:0 30px; margin:16px 0; border-right:1px solid #C3C5D6; } .menu li:last-child{ border:0; } .about{ background:#F4F6FB; width: 100%; overflow:hidden; padding-bottom:0; } .about .container{ margin:90px auto; } .about .intro{ background:#fff; padding:50px 70px; } .about h4{ font-size:24px; font-weight:700; } .about .intro .text{ font-size:16px; margin: 20px auto; width:100%; } .about .intro .image{ height:300px; width:100%; } .about .product{ background:#fff; padding: 50px 70px; } .about .product .image{ height:100%; min-height: 300px; } .about .product .con{ overflow:hidden; position:relative; margin-top:40px; } .about .product h5{ font-size:22px; font-weight:700; } .about .product .desc{ margin: 20px auto; font-size:16px; } .about .product .desc a{ margin-top:20px; } .about .product h6{ font-size:20px; font-weight:700; margin-top:60px; } .about .product ul{ margin-top:20px; } .about .product ul li{ margin:10px 0; font-size:16px; } .about .product ul li img{ width:24px; height:24px; margin-right:10px; } .about .product .swiper-wrapper{ padding-bottom:50px; } .about .product .swiper-pagination-bullets{ bottom:0; } .advantage{ } .advantage .con{ overflow:hidden; position:relative; padding-bottom: 50px; margin:20px auto; } .advantage .con .item{ padding: 0 30px; } .advantage h5{ margin-bottom:20px; font-size:22px; font-weight:700; border-bottom:1px solid #f2f2f2; } .advantage h5 span{ font-size:28px; color:#8792AE; margin-right:10px; } .advantage .desc{ font-size:16px; margin-bottom:40px; padding-right:50px; } .advantage .image{ height:140px; margin-bottom:40px; } .advantage .con .swiper-pagination{ bottom: 0px; left: 0; width: 100%; } .advantage .con .swiper-pagination-bullet{ margin: 0 4px; } .case{ width: 100%; overflow:hidden; } .case .section-title{ color:#fff; } .case .section-title p.text{ color:rgba(255,255,255,0.8); } .case .con{ margin-top: 20px; } .case .con .swiper-slide{ height:400px; background:#fff; box-shadow: 0 0 15px rgba(0,0,0,0.1); } .case .con .image{ width:100%; height:190px; } .case .con h5{ padding:20px 5% 0 5%; font-size:20px; font-weight:700; } .case .con .desc{ color:#444444; font-size:16px; padding: 20px 5%; overflow-y:auto; height:140px; } .cate{ margin-bottom:20px; } .cate .item{ text-align:center; height:64px; line-height:64px; font-size:18px; margin:0 10px 10px 0; box-shadow: 0 0 10px rgba(51,51,51,0.05); border-radius: 4px; padding:0; } .cate .item:hover,.cate .item.cur{ background:#CDD2DF; } .cate .item a{ display:block; } /* PAD */ @media screen and (min-width:768px) and (max-width:1199px) { /* 鍒楄〃 */ .list-title{ font-size: 40px; line-height: 56px; margin-bottom: 40px; } .item-r h3{ font-size: 26px; line-height: 40px; } .item-r p{ font-size: 16px; line-height: 22px; } .item-r ul li{ font-size: 16px; } .item-r a.btn{ font-size: 14px; } .about .container { width: 90%; } } /* 鎵嬫満 */ @media screen and (max-width:767px) { /* 鍒楄〃 */ .list-title{ font-size: 26px; line-height: 40px; margin-bottom: 30px; } .list .item{ height: auto; } .item-l{ width: 35%; } .item-r{ padding: 20px; display: block; } .item-r h3{ font-size: 18px; line-height: 30px; } .item-r p{ margin-top: 5px; font-size: 14px; line-height: 21px; } .tag{ margin-top: 20px; } .item-r ul li{ font-size: 14px; line-height: 21px; } .item-r a.btn{ font-size: 14px; margin-top: 30px; position: static; float: right; } .about .container{ width:90%; } .banner{ height: 30vh; padding:100px 0; } .banner h1{ font-size:36px; } .banner p{ font-size:16px; } .menu li{ font-size:14px; } .about .intro{ background:#fff; padding:20px; } .about .product{ background:#fff; padding:20px; } .about .product h5{ font-size:20px; text-align:center; } .about .product .desc{ font-size:14px; } .case{ padding-top:0; } .about .intro .text{ font-size:14px; } .advantage .desc{ padding-left: 0; padding-right:0; margin-bottom:10px; } .advantage h5{ font-size:18px; } .advantage h5 span{ font-size:20px; } }