@font-face { font-family: "siyuan"; src: ; } #index-main { background: #ffffff; } /**********************************************************************************************/ /* #index-1 */ #index-1 { padding: 40px 0; } .left-box { width: 270px; } .right-box { width: 895px; } .hot-tit { width: 100%; height: 50px; } .hot-tit p { float: left; box-sizing: border-box; width: 195px; padding-left: 60px; height: 50px; line-height: 50px; font-size: 20px; color: #ffffff; background: #ffcc00 url(/statics/images/hot-tit.png) no-repeat center left 35px; } .hot-tit a { float: right; display: block; margin: 9px 0; width: 85px; height: 25px; line-height: 25px; text-align: center; font-size: 16px; color: #555555; border-radius: 5px; text-transform: uppercase; border: 1px solid #c4c4c4; } .hot-tit a:hover { color: #ff0000; } .pro-item { width: 100%; } .pro-item li:nth-of-type(3n) { margin-right: 0; } .pro-item li { position: relative; float: left; margin: 20px 20px 0 0; padding-bottom: 20px; width: 285px; height: 265px; background: url(/statics/images/pro-item.png) no-repeat center bottom; } .pro-item li .item-img { display: flex; align-items: center; justify-content: center; width: 100%; height: 220px; background: #fff; overflow: hidden; } .pro-item li .item-info { box-sizing: border-box; padding: 0 15px; width: 100%; height: 45px; background: #2273f8; transition: .5s; } .pro-item li .item-info p { line-height: 45px; text-align: center; font-size: 14px; color: #ffffff; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; } .pro-item li .item-h { position: absolute; top: 0; width: 100%; height: 265px; background: rgba(255, 204, 0, 0.85); opacity: 0; transition: .5s; } .pro-item li .item-h .p1 { position: relative; margin-top: 50px; padding: 0 20px; line-height: 35px; text-align: center; font-size: 14px; color: #1b1b1b; font-weight: bold; } .pro-item li .item-h .p1:after { content: ""; position: absolute; bottom: 0; left: 50%; width: 70px; height: 2px; background: #252525; transform: translatex(-50%); } .pro-item li .item-h .link { padding-top: 20px; width: 100%; text-align: center; } .pro-item li .item-h .link a { display: inline-block; margin: 0 10px; width: 95px; height: 25px; line-height: 25px; text-align: center; font-size: 12px; color: #252525; border: 1px solid #333333; border-bottom: 2px solid #333333; transition: .3s; } .pro-item li .item-h .link a:hover { background: #ffffff; } .pro-item li:hover .item-info { background: #efefef; } .pro-item li:hover .item-h { opacity: 1; } /**********************************************************************************************/ /* index-2 */ #index-2 { height: 258px; background: url(/statics/images/index-2.png) no-repeat center; } /**********************************************************************************************/ /* index-3 */ #index-3 { padding: 40px 0; background: url(/statics/images/index-3.jpg) no-repeat center; } .adv-title { padding: 20px 0; width: 100%; text-align: center; } .adv-title .p1 { position: relative; line-height: 50px; font-size: 38px; font-weight: bold; color: #333333; } .adv-title .p1 span { color: #0656d9; } .adv-title .p1:before { content: ""; position: absolute; left: 230px; top: 50%; width: 55px; height: 3px; background: #0661e5; } .adv-title .p1:after { content: ""; position: absolute; right: 230px; top: 50%; width: 55px; height: 3px; background: #0661e5; } .adv-title .p2 { padding: 10px 0; font-size: 18px; color: #333333; } .adv-list { width: 100%; height: 450px; } .adv-list .item { width: 100%; height: 450px; animation-name: bounceinleft; opacity: 1; } .adv-list .item:not(.active) { display: none; } .adv-list .item .item-img { width: 630px; height: 450px; } .adv-list .item .item-info { padding-left: 45px; width: 496px; height: 450px; background: url(/statics/images/adv-list-tit.png) no-repeat center top; } .adv-list .item .item-info .p1 { padding-left: 15px; line-height: 80px; font-size: 28px; color: #ffffff; font-weight: bold; } .adv-list .item .item-info .p2 { padding-left: 15px; line-height: 24px; font-size: 14px; color: #8c8c8c; } .adv-list .item .item-info ul { box-sizing: border-box; margin: 20px 15px; border-top: 1px solid #d7d8d9; } .adv-list .item .item-info ul li { padding-top: 20px; line-height: 24px; font-size: 16px; color: #333333; } .adv-menu { margin-top: 25px; display: flex; align-items: center; justify-content: space-around; width: 100%; height: 200px; border-radius: 0 70px 0 70px; background: #ffffff url(/statics/images/adv-menu.png) no-repeat center; box-shadow: 0 0 15px rgba(28, 108, 239, 0.3); } .adv-menu li { float: left; width: 114px; cursor: pointer; } .adv-menu li .item-img { width: 114px; height: 115px; border-radius: 50%; transition: .3s; } .adv-menu li .item-img.item-1 { background: url(/statics/images/adv-menu-1.png) no-repeat center; } .adv-menu li .item-img.item-2 { background: url(/statics/images/adv-menu-2.png) no-repeat center; } .adv-menu li .item-img.item-3 { background: url(/statics/images/adv-menu-3.png) no-repeat center; } .adv-menu li.curr .item-img.item-1 { background: url(/statics/images/adv-menu-1-h.png) no-repeat center; } .adv-menu li.curr .item-img.item-2 { background: url(/statics/images/adv-menu-2-h.png) no-repeat center; } .adv-menu li.curr .item-img.item-3 { background: url(/statics/images/adv-menu-3-h.png) no-repeat center; } .adv-menu li .item-info { padding-top: 15px; text-align: center; font-size: 16px; color: #333333; } /**********************************************************************************************/ /* index-4 */ #index-4 { height: 500px; background: url(/statics/images/index-4.png) no-repeat center; } .index4-con { padding-top: 60px; } .index4-con .p1 { font-size: 24px; font-weight: bold; color: #ffffff; text-transform: uppercase; } .index4-con .p2 { font-size: 36px; font-weight: bold; color: #ffffff; text-transform: uppercase; } .index4-con .p3 { font-family: siyuan; font-size: 28px; color: #ffffff; font-weight: bold; text-transform: uppercase; } .index4-con .div1 { padding-top: 15px; width: 290px; height: 60px; } .index4-con .p4 { font-family: siyuan; float: left; box-sizing: border-box; padding: 5px 20px; width: 80px; height: 60px; line-height: 25px; text-align: center; font-size: 20px; font-weight: bold; color: #ffffff; background: #333333; } .index4-con .p5 { font-family: siyuan; float: right; width: 210px; height: 60px; line-height: 60px; text-align: center; font-size: 30px; font-weight: bold; color: #333333; background: #ffcc00; } .index4-con a { float: right; margin-top: 30px; width: 160px; height: 45px; line-height: 45px; text-align: center; font-family: siyuan; font-size: 25px; color: #0f1011; font-weight: bold; background: #ffffff; } /**********************************************************************************************/ /* index-5 */ #index-5 { margin: 40px 0; background: url(/statics/images/index-5.png) no-repeat center top; } .in-intro { width: 100%; height: 195px; } .in-intro .item { float: left; width: 300px; height: 195px; text-align: center; color: #ffffff; } .in-intro .item .p1 { padding-top: 25px; font-size: 72px; font-weight: bold; } .in-intro .item .p1 span { font-weight: normal; font-size: 20px; } .in-intro .item .p2 { font-size: 24px; } .in-about { box-sizing: border-box; padding: 60px; width: 100%; border-radius: 5px; background: #ffffff; box-shadow: 0 0 15px rgba(28, 108, 239, 0.3); } .about-info { width: 530px; } .about-tit { box-sizing: border-box; padding-left: 240px; width: 100%; height: 48px; background: url(/statics/images/in-about.png) no-repeat center left; } .about-tit p { padding-top: 15px; font-size: 24px; color: #333333; font-weight: bold; } .about-con { padding: 30px 0; width: 100%; height: 175px; line-height: 25px; font-size: 14px; color: #666666; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 7; overflow: hidden; } .about-info a.more { display: block; width: 140px; height: 40px; line-height: 40px; text-align: center; font-size: 14px; font-weight: bold; color: #ffffff; background: #2273f8; box-shadow: 0 0 15px rgba(28, 108, 239, 0.3); border-radius: 25px; } .in-patent { position: relative; margin-top: 40px; padding-bottom: 140px; width: 100%; height: 445px; background: url(/statics/images/in-patent.png) no-repeat center bottom; } .patent-list { margin: 0 auto; width: 1090px; height: 445px; } .patent-list .item { width: 252px; } .patent-list .item-img { margin-top: 20px; display: flex; align-items: center; justify-content: center; width: 252px; height: 375px; background: #efefef; transition: .5s; overflow: hidden; } .patent-list .item-img img { max-width: 100%; } .patent-list .item:hover .item-img { transform: translatey(-20px); } .patent-list .item-info { height: 50px; line-height: 50px; text-align: center; font-size: 16px; color: #2b2b2b; } .patent-l { top: 190px; left: 0; width: 40px; height: 40px; background: #333333; border-radius: 5px; outline: none; } .patent-r { top: 190px; right: 0; width: 40px; height: 40px; background: #2273f8; border-radius: 5px; outline: none; } .patent-l:after, .patent-r:after { font-size: 20px; color: #ffffff; } /**********************************************************************************************/ /* index-6 */ #index-6 {} .news-top { padding: 20px 0; width: 100%; text-align: center; } .news-top .p1 { position: relative; line-height: 50px; font-size: 38px; font-weight: bold; color: #333333; } .news-top .p1 span { color: #0656d9; } .news-top .p1:before { content: ""; position: absolute; left: 230px; top: 50%; width: 55px; height: 3px; background: #0661e5; } .news-top .p1:after { content: ""; position: absolute; right: 230px; top: 50%; width: 55px; height: 3px; background: #0661e5; } .news-top .p2 { padding: 10px 0; font-size: 18px; color: #333333; } .in-news { padding: 20px 0; } .news-l { width: 700px; } .news-menu { position: relative; width: 100%; height: 50px; border-bottom: 2px solid #d4d4d4; } .news-menu:after { content: ""; position: absolute; left: 0; bottom: -3px; width: 190px; height: 4px; background: #2273f8; } .news-menu li { float: left; line-height: 50px; font-size: 18px; color: #999999; font-weight: bold; cursor: pointer; transition: .3s; } .news-menu li.curr { color: #2273f8; } .news-menu p { float: left; padding: 0 15px; line-height: 50px; font-size: 14px; color: #999999; } .news-menu a.more { float: right; margin: 14px 0; } .product-list .item { width: 100%; animation-name: bounceinright; opacity: 1; } .news-list { margin-top: 25px; } .news-list .item { width: 100%; animation-name: bounceinleft; opacity: 1; } .news-list .item:not(.active) { display: none; } .news-list .frist { float: left; width: 345px; } .news-list .frist .item-img { display: flex; align-items: center; justify-content: center; width: 100%; height: 195px; overflow: hidden; } .news-list .frist .item-img img { width: 100%; } .news-list .frist .item-info { padding-top: 25px; } .news-list .frist .item-info .p1 { width: 100%; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; } .news-list .frist .item-info .p1 a { font-size: 16px; font-weight: bold; color: #333333; } .news-list .frist .item-info .p2 { padding-top: 20px; line-height: 26px; font-size: 14px; color: #666666; } .news-list .frist .item-info .p2 a { color: #2273f8; } .news-list .frist .item-info .p2 a:hover { color: #ff0000; text-decoration: underline; } .news-list .other { float: right; margin-bottom: 19px; padding-bottom: 19px; width: 320px; height: 80px; border-bottom: 1px dashed #999999; } .news-list .other .item-date { box-sizing: border-box; width: 75px; height: 80px; text-align: center; border-radius: 5px; border: 2px solid #c0c0c0; } .news-list .other .item-date .p1 { padding-top: 8px; font-size: 26px; color: #666666; } .news-list .other .item-date .p2 { font-size: 14px; color: #333333; } .news-list .other .item-info { width: 235px; height: 80px; } .news-list .other .item-info .p1 { width: 100%; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; } .news-list .other .item-info .p1 a { font-size: 16px; color: #333333; font-weight: bold; } .news-list .other .item-info .p1 a:hover { color: #ff0000; text-decoration: underline; } .news-list .other .item-info .p2 { padding-top: 10px; height: 48px; line-height: 24px; font-size: 14px; color: #666666; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; } .news-r { width: 450px; } .news-qa { padding-top: 25px; width: 100%; } .news-qa li { box-sizing: border-box; margin-bottom: 20px; padding: 0 0 20px 50px; width: 100%; height: 99px; background: url(/statics/images/news-qa.png) no-repeat top left; border-bottom: 1px dashed #999999; } .news-qa li .p1 { text-overflow: ellipsis; white-space: nowrap; overflow: hidden; } .news-qa li .p1 a { font-size: 16px; color: #333333; font-weight: bold; } .news-qa li .p1 a:hover { color: #ff0000; text-decoration: underline; } .news-qa li .p2 { padding-top: 10px; height: 48px; line-height: 25px; font-size: 14px; color: #999999; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; } /**********************************************************************************************/ /**********************************************************************************************/