body{ padding: 0px; margin: 0px; } #header { position: absolute; top: 0px; width: 100%; height: 80px; background-color: transparent; z-index: 100; } #header .content { width: 1200px; overflow: hidden; margin: auto; } #header .content .logo { float: left; height: 50px; margin: 15px 0px; } #header .content .logo img { height: 50px; } #header .content .nav { float: right; margin: 10px 0px; } .layui-nav * { font-size: 16px; } #banners { width: 100%; height: 650px; display: inline-block; } #test1 img { width: 100%; height: 700px; } .title { color: #1d63b2; text-align: center; margin: 36px 0 20px; -webkit-user-select: none; } .title > span { font-size: 30px; font-weight: 100; } .title > i { display: block; width: 60px; margin: 10px auto; border-top: 2px solid #ccc; } .title > p { font-size: 22px; } .produvtinfo.mt { margin-top: 60px; } .produvtinfo { width: 1200px; margin: 0 auto; } .produvtinfo .tab { position: relative; } .produvtinfo .tabtit { margin-left: 110px; margin-top: 20px; width: 460px; height: 40px; line-height: 40px; font-size: 18px; } .produvtinfo .tabCon { height: 330px; width: 610px; } .produvtinfo .tabCon .left > p, .produvtinfo .tabCon .right > p { width: 450px; font-size: 16px; line-height: 26px; color: #4d5053; margin-top: 30px; } .produvtinfo .tabCon .left .ll > span > i, .produvtinfo .tabCon .left .rr > span > i { display: inline-block; width: 32px; height: 32px; line-height: 32px; text-align: center; font-size: 20px; color: #54c4ac; margin-right: 10px; } .produvtinfo .tabCon .left .ll > ul, .produvtinfo .tabCon .left .rr > ul { margin-top: 20px; margin-right: 20px; } dd, dl, dt, li, ul { border: 0 none; list-style: none; } .produvtinfo .tabCon .left .ll > ul li, .produvtinfo .tabCon .left .rr > ul li { font-size: 14px; color: #6b798e; margin-bottom: 5px; } .produvtinfo .tabCon .left .ll > ul li > i, .produvtinfo .tabCon .left .rr > ul li > i { font-style: normal; margin-right: 5px; } .produvtinfo .tabCon .left .ll > span, .produvtinfo .tabCon .left .rr > span { font-size: 20px; color: #34373e; } .produvtinfo .tabCon .left .ll { margin-top: 65px; float: left; } .produvtinfo .tabCon .left .rr { margin-top: 65px; float: right; } #footer { width: 100%; height: 220px; color: #999; color: #999; position: relative; background-color: #28292c; } #footer .link { width: 570px; } #footer .part h3 { font-size: 20px; font-weight: normal; color: #ccc; margin-bottom: 15px; } #footer .link > .con { width: 435px; } #footer .part { float: left; padding-top: 25px; margin-left:150px; } #footer .contact > .con { width: 350px; } #footer .contact { margin-left: -250px; } #footer .text { clear: both; width: 100%; text-align: center; font-size: 14px; color: #999; position: absolute; left: 0; bottom: 20px; } #footer .link > .con > a { display: inline-block; margin-right: 40px; margin-bottom: 10px; word-break: keep-all; } #footer .part .con > span, #footer .part .con > a, #footer .part .con > p { font-size: 14px; } a { text-decoration: none; color: inherit; } .layui-carousel:hover .layui-carousel-arrow[lay-type=add], .layui-carousel[lay-arrow=always] .layui-carousel-arrow[lay-type=add] { right: 20px; margin-top: 160px; } .layui-carousel[lay-arrow=always] .layui-carousel-arrow { opacity: 1; left: 20px; margin-top: 160px; } #header > .con div.right .xbtn { height: 24px; line-height: 24px; border-radius: 5px; margin-left: 70px; font-size: 16px; border-color: #636972; } .adv { background-color: #edf4fe; height: 280px; margin-bottom: 30px; } } .adv > .con { width: 1200px; height: 100%; margin: 0 auto; position: relative; } .adv > .con .ll { left: 55px; } .adv > .con .ll, .adv > .con .rr { position: absolute; top: 40px; } .adv > .con .part { width: 355px; } .adv > .con .part > i.layui-icon { display: block; width: 60px; height: 60px; line-height: 60px; text-align: center; color: #599eec; font-size: 32px; } .adv > .con .part.two > i.layui-icon { font-size: 40px; margin: 0 auto 10px; } .adv > .con { width: 1200px; height: 100%; margin: 0 auto; background: url(image/adv.png) no-repeat center 40px; position: relative; } .adv > .con .part > div.txt { margin-left: 75px; color: #6b798e; } .adv > .con .part > div.txt > p { font-size: 14px; margin-top: -50px; } .adv > .con .part.mt { margin-top: 70px; } .adv > .con .part { width: 355px; } .adv > .con .rr { right: -25px; } .adv > .con .ll, .adv > .con .rr { position: absolute; top: 40px; } .adv > .con .part.two { margin: 0 auto; text-align: center; position: relative; top: 70px; } .adv > .con .part { width: 355px; } .adv > .con .part.two > div.txt { margin-left: 0; } .adv > .con .part > div.txt { margin-left: 75px; color: #6b798e; } .adv > .con .part > div.txt > span { font-size: 18px; } .adv > .con .part > div.txt { margin-left: 75px; color: #6b798e; } .adv > .con .part.two { margin: 0 auto; text-align: center; position: relative; top: 70px; } .adv > .con .part > div.txt > p { font-size: 14px; } .news { width: 1200px; margin: 50px auto 50px; height: 280px; } .news .tabCon { position: relative; } .news .newscon { width: 1000px; height: 250px; margin: 20px auto 0; } .news .newscon .ll { float: left; } dd, dl, dt, li, ul { border: 0 none; list-style: none; } .news .newscon .ll li, .news .newscon .rr li { width: 470px; padding: 15px 0 5px; border-bottom: 1px dotted #ddd; position: relative; } .news .newscon .ll li > a > p, .news .newscon .rr li > a > p { color: #474747; font-size: 16px; word-break: keep-all; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; } .news .newscon .ll li > a > p > span, .news .newscon .rr li > a > p > span { color: #999; font-size: 16px; margin-right: 10px; } .news .newscon .ll li > a > p > time, .news .newscon .rr li > a > p > time { font-size: 14px; color: #999; margin-left: 140px; } .news .newscon .ll li > a > b, .news .newscon .rr li > a > b { font-size: 14px; font-weight: normal; position: absolute; right: 0; bottom: 5px; color: #999; } .news .newscon .ll li > a > b i.iconfont, .news .newscon .rr li > a > b i.iconfont { font-size: 16px; margin-right: 5px; vertical-align: middle; } .news .newscon .rr { float: right; } .news .tabCon > div > .xbtn { display: block; width: 68px; margin: 30px auto 0; color: #999; border-color: #ddd; } .xbtn { display: inline-block; border: 1px solid #fff; height: 30px; line-height: 30px; font-size: 14px; padding: 0 15px; color: #fff; margin-left: 560px; text-align: center; background-color: #51afe6; border-radius: 3px; cursor: pointer; } .newscon .images { width: 50px; float: left; } .newscon titles { float: left; } .titles a p { margin-left: 110px; margin-bottom: 10px; font-size: 20px; } .titles time { margin-left: 60px; } .produvtinfo .tabCon .right { position: absolute; right: -46px; top: -63px; } article { text-indent: 25px; margin-top: 10px; margin-left:110px; } .xbtn { margin-top: 20px; } .logoes { margin-left: 340px; width: 200px; float: left; margin-top: 20px; } .qrcode { margin-left: 25px; width: 200px; margin-top: 20px; float: left; } .layui-nav .layui-nav-item a { display: block; padding: 0 20px; color: black; transition: all .3s; -webkit-transition: all .3s; } .headimg { width: 100%; height: 350px; } .headimg img { width: 100%; height: 270px; margin-top:80px; } .company { background-color: #f8f8f8; padding: 65px 0; } .company .part { width: 1200px; margin: 0 auto; overflow: hidden; } .company .part img { float: left; } .company .part .txt { margin: 32px 0 0 625px; } .company .cap { font-size: 24px; color: #474747; } .company .part .txt .p1 { font-size: 14px; line-height: 32px; color: #666; text-indent: 2em; padding-top: 40px; } .company .part .txt .p2 { font-size: 14px; line-height: 32px; color: #666; text-indent: 2em; } .company .cap.mt { margin-top: 50px; text-align: center; } .company .cap > span { display: block; margin-bottom: 5px; } .company .part > ul { margin-top: 35px; clear: both; overflow: hidden; } .company .part > ul li { float: left; width: 386px; height: 210px; background-color: #fff; } .company .part > ul li > h3 { font-size: 18px; color: #474747; font-weight: normal; margin: 50px 0 20px 70px; } .company .part > ul li > p { font-size: 14px; color: #999; margin-left: 70px; margin-right: 40px; line-height: 24px; } .layui-nav .layui-nav-item a { display: block; padding: 0 20px; -webkit-transition: all .3s; } .bannerone .sortnav { width: 1200px; position: absolute; left: 50%; bottom: -40px; margin-left: -600px; background-color: #fff; -webkit-box-shadow: 0 10px 20px #ccc; -moz-box-shadow: 0 10px 20px #ccc; box-shadow: 0 10px 20px #ccc; } .bannerone .sortnav li { float: left; width: 240px; height: 80px; line-height: 80px; } .bannerone .sortnav li > a { display: block; position: relative; font-size: 16px; color: #666; text-align: center; border-bottom: 3px solid transparent; } .bannerone .sortnav li > a > i { display: block; width: 1px; height: 80px; border-right: 1px solid #cdf3ea; position: absolute; top: 0; right: 0; } .bannerone .sortnav li > a > img { vertical-align: middle; margin-right: 10px; } .bannerone { width: 100%; margin-bottom: 60px; background: url(cssimg/ehsbanner.png) no-repeat center center; color: #fff; text-align: center; position: relative; } .sortnav img { width: 50px; height: 50px; } .titleone { text-align: center; font-size: 24px; color: #474747; padding: 30px 0 10px; } .titleone > span { display: block; margin-bottom: 10px; } .titleone > img { display: inline-block; width: 45px; margin: 0 auto; vertical-align: top; } .presentation { text-align: center; color: #999; } .presentation > p { font-size: 14px; margin-bottom: 30px; } .function { position: relative; } .function > .tabLi { position: absolute; left: 50%; top: -10px; margin-left: -420px; text-align: center; background-color: #fff; -webkit-box-shadow: 0 10px 20px #ccc; -moz-box-shadow: 0 10px 20px #ccc; box-shadow: 0 10px 20px #ccc; } .function > .tabLi > li { width: 420px; height: 70px; line-height: 70px; text-align: center; position: relative; font-size: 20px; color: #999; } .function > .tabLi > li > i { font-size: 28px; vertical-align: middle; margin-right: 10px; } .function > .tabLi > li > b { display: block; position: absolute; top: 0; right: 0; width: 1px; height: 100%; border-right: 1px solid #dedede; } .tab .tabLi li { float: left; -moz-user-select: none; user-select: none; -webkit-user-select: none; -ms-user-select: none; cursor: pointer; transition: all 0.2s linear; -o-transition: all 0.2s linear; -moz-transition: all 0.2s linear; -webkit-transition: all 0.2s linear; } .function .part.pt { padding-top: 80px; } .function .part.gray { margin-bottom: 30px; background-color: #f2f2f2; } .function .part { height: 500px; margin-bottom: 30px; } .function .part .tab { width: 1200px; margin: 0 auto; position: relative; } .function .part .tabLi { width: 460px; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; overflow: hidden; background-color: #e6e6e6; color: #666; position: absolute; top: 40px; right: 0; } .function .part .tabLi li { width: 50%; height: 40px; line-height: 40px; font-size: 18px; text-align: center; } .tab .tabLi li { float: left; -moz-user-select: none; user-select: none; -webkit-user-select: none; -ms-user-select: none; cursor: pointer; transition: all 0.2s linear; -o-transition: all 0.2s linear; -moz-transition: all 0.2s linear; -webkit-transition: all 0.2s linear; } .function .part .tabCon > div { position: relative; } .function .part .ll { left: 0; top: 10px; } .function .part .ll, .function .part .rr { position: absolute; } .function .part .ll.ww, .function .part .rr.ww { width: 460px; } .function .part .rr { right: 0; top: 112px; } .function .part .ll, .function .part .rr { position: absolute; } .function .part .ll > h3, .function .part .rr > h3 { color: #474747; font-size: 16px; font-weight: normal; } .function .part .ll > h3 > span, .function .part .rr > h3 > span { font-size: 14px; color: #999 !important; display: block; margin-top: 10px; } .function .part .ll > b, .function .part .rr > b { display: block; width: 45px; height: 1px; border-bottom: 2px solid #0dc79a; margin: 10px 0 30px; } .function .part .ll > p, .function .part .rr > p { font-size: 14px; color: #999; margin-bottom: 10px; } .parta .cap { font-size: 20px; text-align: center; } .parta .cap > span { display: inline-block; width: 45px; height: 1px; border-top: 2px solid #05c597; } .three { width: 1200px; margin: auto; } .adv .three .tabli li { width: 33%; height: 40px; line-height: 40px; font-size: 18px; text-align: center; float: left; } .adv .three .tabli li > img { width: 60px; height: 60px; margin-top: 50px; } .adv .three .tabli li > p { font-size: 14px; color: darkgrey; } .productval { height: 400px; margin-bottom: 30px; background-color: #f5f5f5; } .productval > .con { width: 1200px; margin: 20px auto 30px; text-align: center; position: relative; } .productval .ll { left: 0; text-align: left; } .productval .ll, .productval .rr { text-align: left; } .productval .ll, .productval .cc, .productval .rr { position: absolute; top: 128px; } .productval .ll > h3 { color: #29c560; text-align: center; } .productval .ll > h3, .productval .rr > h3 { text-align: center; } .productval .ll h3, .productval .cc h3, .productval .rr h3 { font-weight: normal; font-size: 18px; margin-bottom: 18px; } .productval .ll > p, .productval .cc > p, .productval .rr > p { font-size: 14px; color: #8c8c8c; margin-bottom: 10px; } .productval .ll > p i, .productval .cc > p i, .productval .rr > p i { font-style: normal; margin-right: 5px; } .productval .rr { right: 0; text-align: left; } .productval > .con > img { padding-top: 50px; } .productval .rr > h3 { color: #57bcf1; text-align: center; } .build { width: 1200px; margin: 0 auto 30px; overflow: hidden; } .build .buildbox.mr { margin-right: 50px; } .build .buildbox { width: 950px; height: 280px; box-sizing: border-box; margin: auto; margin-left: 130px; } .build .buildbox .cap { height: 40px; line-height: 40px; text-align: center; color: #fff; font-size: 18px; background-color: #36d2ad; } .build .buildbox .litxt, .build .buildbox .con { padding: 25px 20px; height: 240px; box-sizing: border-box; border: 1px solid #dedede; border-top: 0 none; } .build .buildbox .con .ll { margin-right: 10px; } .build .buildbox .con .ll li, .build .buildbox .con .rr li { margin-bottom: 10px; } .build .buildbox .con .ll li i, .build .buildbox .con .rr li i { float: left; font-style: normal; } .build .buildbox .con .ll li > p, .build .buildbox .con .rr li > p { margin-left: 12px; } .function .part .tabLi.two { left: 0; right: auto; }