* { font-family: arial, helvetica, sans-serif; } body, div, a, li, ul, ol, dl, img, span, input { padding: 0px; margin: 0px; list-style: none; border: 0px; } /* ios 样式兼容 */ input[type=button], input[type=submit], input[type=file], select, button, input, textarea { -webkit-appearance: none; border-radius: 0; } a:link { color: #000; text-decoration: none; } a:visited { text-decoration: none; color: #000; } a:hover { text-decoration: none; color: #000; } a:active { text-decoration: none; color: #000; } /* 外边距和后台一致 */ p { margin: 5px 0; } ul { list-style-type: none; } img { max-width: 100%; } .clear { clear: both; } .f-l { float: left; } .f-r { float: right; } .after:after { content: ''; display: block; clear: both; } .mr-0 { margin-right: 0px!important; } .this-1080 { margin: 0 auto; width: 1080px; } html, body { background-attachment: fixed; height: 100%; width: 100%; background-size: cover; } /* 头部 */ #header { position: absolute; width: 100%; line-height: 110px; top: 0; background-color: rgba(0, 0, 0, .5); z-index: 999; } #header .logo { height: 110px; } #header .nav>li { display: inline-block; position: relative; margin: 0 20px; } #header .nav>li>a { display: block; font-size: 18px; color: #fff; } #header .nav>li>a:hover { color: #369de0; } #header .nav>li .son { position: absolute; top: 110px; left: 0; margin-top: -15px; padding: 5px 0; background-color: #fff; box-sizing: border-box; border-radius: 4px; box-shadow: 0 1px 6px rgba(0, 0, 0, .2); text-align: center; display: none; left: 50%; } #header .nav>li .son a { width: 100%; display: block; padding: 7px 16px 8px; font-size: 14px; line-height: initial; box-sizing: border-box; white-space: nowrap; } #header .nav>li .son a:hover { background-color: #f3f3f3; } #header .nav>li:hover .son { display: block; } #header .search i { font-size: 18px; color: #fff; margin-right: 10px; cursor: pointer; } #header .language a { display: inline-block; width: 40px; color: #fff; background-color: #174052; text-align: center; line-height: 25px; font-size: 12px; border-radius: 3px; margin-left: 10px; } #header .language a:hover { background-color: #0d3346; } .language-active { background-color: #0d3346!important; } /* 首页 */ #home { padding-top: 190px; } #home .about { height: 180px; width: 720px; text-align: right; padding: 30px; box-sizing: border-box; } #home .about .title a { font-size: 48px; color: #fff; font-weight: bold; } #home .about .content a { font-size: 12px; color: #fff; line-height: 25px; } #home .about .content a p { color: #fff; } #home .wrap { float: right; } #home .item { float: right; font-size: 0; width: 180px; height: 180px; } #home .icon { position: relative; height: 180px; text-align: center; } #home .icon>i { margin-top: 50px; font-size: 40px; } #home .icon>p { margin-top: 10px; font-size: 16px; } #home .icon>.more { position: absolute; right: 10px; bottom: 10px; } #home .icon>.more i { font-size: 22px; } #home .color1 { background-color: #dec863; } #home .color1>i, #home .color1>p, #home .color1>.more i { color: #b89628; transition: all 0.3s; } #home .color2 { background-color: #9ede64; } #home .color2>i, #home .color2>p, #home .color2>.more i { color: #609f28; transition: all 0.3s; } #home .color3 { background-color: #40bae9; } #home .color3>i, #home .color3>p, #home .color3>.more i { color: #234b5a; transition: all 0.3s; } #home .color4 { background-color: #1e7296; } #home .color4>i, #home .color4>p, #home .color4>.more i { color: #07b4ff; transition: all 0.3s; } #home .color5 { background-color: #dd6e73; } #home .color5>i, #home .color5>p, #home .color5>.more i { color: #5f161a; transition: all 0.3s; } #home .color6 { background-color: #8b8ffd; } #home .color6>i, #home .color6>p, #home .color6>.more i { color: #444774; transition: all 0.3s; } #home .icon:hover i, #home .icon:hover p, #home .icon:hover .more i { color: #fff; } #home .point-list { width: 800px; margin: 0 auto; margin-top: 50px; font-size: 0; } #home .point-list .point { width: 13px; height: 13px; border-radius: 12px; box-shadow: 0 0 0 4px rgba(255, 255, 255, .15); background-color: #fff; display: inline-block; cursor: pointer; transition: all 0.5s; } #home .point-list .point:hover { background-color: #369de0; } #home .point-list .point:first-child .point { margin: 0 380px; } .point-active { background-color: #369de0!important; } #home .line { height: 1px; width: 795px; margin: 0 auto; background-color: #6e9ba9; margin-top: -7.5px; } /* 其他页公共部分 */ #main { padding-top: 110px; box-sizing: border-box; border-radius: 3px; } #main>.this-1080 { position: relative; } #main>.banner { width: 100%; height: 100%; position: absolute; background-size: cover; top: 0; } #main>.this-1080>.link { line-height: 35px; padding: 5px 10px; font-size: 14px; color: #fff; text-align: right; margin: 50px 0; padding-left: 60px; box-sizing: border-box; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } #main>.this-1080>.link a { font-size: 14px; color: #fff; } #main>.this-1080>.link a:hover { color: #333; } #main>.this-1080>.content { background-color: rgba(255, 255, 255, 0.8); border-radius: 5px; overflow: hidden; } #main>.this-1080>.content>.border { border-radius: 5px; margin: 15px; background-color: #fff; box-sizing: border-box; padding: 20px 30px; } #main>.this-1080>.content>.border>.class { margin-bottom: 20px; } #main>.this-1080>.content>.border>.class a { color: #369de0; font-size: 14px; display: inline-block; padding: 5px 0; margin-right: 20px; border-bottom: 1px solid transparent; } #main>.this-1080>.content>.border>.class a:hover { border-bottom: 1px solid #369de0; } .class-active { border-bottom: 1px solid #369de0!important; } /* 关于我们 */ #main .about>.left { width: 129px; border-right: 1px solid #dbe3ef; padding-right: 30px; } #main .about>.left .title { font-size: 18px; color: #369de0; font-weight: bold; border-bottom: 3px solid #369de0; padding-bottom: 10px; } #main .about>.left .list a { display: block; line-height: 25px; border-bottom: 1px solid #dbe3ef; font-size: 14px; color: #333; padding: 10px 0; } #main .about>.left .list a:hover { color: #369de0; } #main .about>.right { width: 860px; margin-left: 159px; border-left: 1px solid #dbe3ef; padding-left: 30px; box-sizing: border-box; padding-right: 30px; } /* 图片模块 */ #main .about>.right .photo { font-size: 0; } #main .about>.right .photo .list li { display: inline-block; width: 253px; margin-right: 20px; cursor: pointer; text-align: center; } #main .about>.right .photo .list li p { font-size: 16px; color: #333; line-height: 40px; font-weight: bold; text-align: center; margin: 5px 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* 产品中心 */ #main .products>.left { width: 129px; border-right: 1px solid #dbe3ef; padding-right: 30px; } #main .products>.left .title { font-size: 18px; color: #369de0; font-weight: bold; border-bottom: 3px solid #369de0; padding-bottom: 10px; } #main .products>.left .list a { display: block; line-height: 35px; border-bottom: 1px solid #dbe3ef; font-size: 14px; color: #333; } #main .products>.left .list a:hover { color: #369de0; } #main .products>.right { width: 860px; margin-left: 159px; border-left: 1px solid #dbe3ef; padding-left: 30px; box-sizing: border-box; font-size: 0; padding-right: 30px; } #main .products>.right>a { display: inline-block; width: 259px; margin-right: 10px; font-size: 14px; margin-bottom: 10px; border: 1px dashed #369de0; padding: 10px 10px; box-sizing: border-box; transition: all 0.3s; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } #main .products>.right>a:hover { border: 1px solid #369de0; color: #fff; background-color: #369de0; } /* 产品内页 */ #main .products>.right .products-view { font-size: initial; } #main .products>.right .products-view>.title { font-size: 20px; font-weight: bold; display: inline-block; margin-bottom: 10px; border-bottom: 1px solid #eee; width: 100%; } #main .products>.right .products-view>.title p { float: left; } #main .products>.right .products-view>.title p:first-child p { font-size: 20px; color: #333; font-weight: normal; } #main .products>.right .products-view .parameter-img .parameter { width: 399px; } #main .products>.right .products-view .parameter-img .parameter .list li { line-height: 30px; } #main .products>.right .products-view .parameter-img .parameter .list li:after { content: ""; display: block; clear: both; } #main .products>.right .products-view .parameter-img .parameter .list p { float: left; } #main .products>.right .products-view .parameter-img .parameter .list p:first-child { font-size: 13px; font-weight: bold; } #main .products>.right .products-view .parameter-img .parameter .list p:first-child p { font-size: 13px; color: #333; } #main .products>.right .products-view .parameter-img .img { width: 400px; margin: auto; } #main .products>.right .products-view .parameter-img .img a { display: table-cell; width: 400px; height: 300px; border: 1px solid #ccc; vertical-align: middle; text-align: center; box-sizing: border-box; font-size: 0; } #main .products>.right .products-view .parameter-img .img a img { max-height: 100%; } #main .products>.right .products-view .parameter-img .img .list { margin-top: 10px; } #main .products>.right .products-view .parameter-img .img .list li { width: 70px; height: 70px; border: 1px solid #ccc; float: left; margin-right: 10px; cursor: pointer; } #main .products>.right .products-view .parameter-img .img .list li div { width: 70px; height: 70px; display: table-cell; vertical-align: middle; text-align: center; } #main .products>.right .products-view .parameter-img .img .list li img { max-width: 100%; max-height: 100%; vertical-align: middle; } .pro-view-img-active { border: 1px solid #b8271e!important; } #main .products>.right .products-view>.detailed { padding: 20px 0; margin-top: 10px; border-top: 1px solid #eee; } #main .products>.right .products-view>.other-info { margin-top: 10px; padding: 20px 0; border-top: 1px solid #eee; } #main .products>.right .products-view h4 { padding-bottom: 10px; } #main .products>.right .products-view>.other>a { display: inline-block; width: 259px; margin-right: 10px; font-size: 14px; margin-bottom: 10px; border: 1px dashed #369de0; padding: 10px 10px; box-sizing: border-box; transition: all 0.3s; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } #main .products>.right .products-view>.other>a:hover { border: 1px solid #369de0; color: #fff; background-color: #369de0; } #main .products>.right .products-view>.other>.title { font-size: 22px; font-weight: bold; text-align: center; padding-bottom: 20px; } /* 搜索列表 */ #main .search input { line-height: 60px; height: 60px; width: 100%; text-align: center; outline: none; font-size: 25px; border-bottom: 1px solid #dbe3ef; } #main .search .list { margin-top: 20px; } #main .search .list>a { display: inline-block; width: 259px; margin-right: 10px; font-size: 14px; margin-bottom: 10px; border: 1px dashed #369de0; padding: 10px 10px; box-sizing: border-box; transition: border 0.3s; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } #main .search .list>a:hover { border: 1px solid #369de0; color: #fff; background-color: #369de0; } /* 新闻中心 */ #main .news .list li { line-height: 37px; border-bottom: 1px solid #eee; font-size: 13px; height: 37px; color: #666; vertical-align: middle; } #main .news .list li a .title { display: inline-block; max-width: 860px; line-height: initial; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; vertical-align: sub; } #main .news .list li i { height: 37px; line-height: 37px; float: left; } #main .news .list li a { font-size: 13px; color: #666; margin-left: 5px; } #main .news .list li a .time { float: right; } #main .news .list li a:hover { color: #0087c8; } /* 新闻内页 */ #main .news-view>.title p:first-child { font-size: 22px; font-weight: bold; } #main .news-view>.title p:first-child p { margin: 20px 0; color: #999; } #main .news-other { margin-top: 20px; } #main .news-other .border>.title { font-size: 28px; text-align: center; margin-bottom: 20px; } /* 底部 */ #footer { text-align: center; color: #fff; font-size: 12px; margin-top: 50px; position: relative; margin-bottom: 20px; } #footer i { margin-right: 10px; color: #369de0; } /* 移动端 */ #nav-m { display: none; } @media screen and (max-width:1200px) { .this-1080 { width: auto; } /* 头部 */ #header { display: none; } #nav-m { height: 50px; display: block; position: relative; z-index: 999; font-size: 0; background-color: rgba(78, 78, 78, 0.3); } #nav-m .logo { display: inline-block; } #nav-m .logo a { display: table-cell; height: 50px; vertical-align: middle; } #nav-m .logo a img { height: 30px; margin-left: 10px; } #nav-m>.title { font-size: 18px; display: inline-block; line-height: 50px; vertical-align: top; margin-left: 5px; } #nav-m .menu { position: absolute; right: 10px; top: 11px; width: 22px; padding: 5px 10px; border: 1px solid #f1f2f4; border-radius: 3px; } #nav-m .menu span { display: block; width: 100%; margin-bottom: 5px; height: 2px; background-color: #f1f2f4; } #nav-m .menu span:nth-of-type(3) { margin-bottom: 0px; } #nav-m .nav-m-list { background-color: rgba(45, 45, 45, 0.6); display: none; } #nav-m .nav-m-list li { line-height: 40px; border-bottom: 1px solid #777; } #nav-m .nav-m-list li a { height: 100%; width: 100%; display: block; padding-left: 10px; font-size: 14px; color: #f1f2f4; } #nav-m .nav-m-list li .more { display: block; background-image: url(/uploads/image/peimages/r_arrow.png); background-repeat: no-repeat; background-size: 15px; background-position: 95% center; } #nav-m .nav-m-list li .nav-list { border-top: 1px solid #777; background-color: rgba(97, 96, 96, 0.6); } #nav-m .nav-m-list li .nav-list { display: none; } #nav-m .nav-m-list li .nav-list .border-bottom-none { border-bottom: 0px; } #nav-m .nav-m-list .language { height: 40px; } #nav-m .nav-m-list .language a { display: inline-block; width: 33.333%; box-sizing: border-box; border-right: 1px solid #777; } #nav-m .nav-m-list .language a:first-child a { border-right: 1px solid #777; } /* 首页 */ #home { padding: 10px 0; } #home .about { width: 100%; padding: 10px; height: 390px; } #home .wrap { width: 33.333%; } #home .item { width: 100%; } #home .item img { width: 100%; } #home .point-list, #home .line { display: none; } #home .icon>i{ font-size: 25px; } #home .icon>p{ font-size: 14px; } /* 其他页公共部分 */ #main { padding-top: 0px; } #main>.this-1080>.content { position: relative; } #main>.this-1080>.link { margin: 20px 0; } #main>.this-1080>.content>.border { margin: 10px; padding: 10px; } /* 关于我们 */ #main .about>.left { position: absolute; left: -200px; background-color: #fff; padding: 20px; top: 0px; border: 1px solid #dbe3ef; } #main .about>.right { width: 100%; margin-left: 0px; border-left: 0px; padding-left: 0px; padding-right: 0px; } /* 证书 */ #main .about>.right .photo .list li { width: calc(50% - 10px); margin-right: 10px!important; } #main .about>.right .photo .list li:nth-of-type(2n) { margin-right: 0px!important; } /* 产品中心 */ #main .products>.left { position: absolute; left: -200px; background-color: #fff; padding: 20px; top: 0px; border: 1px solid #dbe3ef; } #main .products>.right { width: 100%; margin-left: 0px; border-left: 0px; padding-left: 0px; padding-right: 0px; } #main .products>.right>a, #main .products>.right .products-view>.other>a { width: calc(50% - 10px); margin-right: 10px!important; } #main .products>.right>a:nth-of-type(2n), #main .products>.right .products-view>.other>a:nth-of-type(2n) { margin-right: 0px!important; } #main .products>.right .products-view .parameter-img .parameter{ width: 100%; } #main .products>.right .products-view .parameter-img .img { w /* 新闻中心 */ #main .news .list { width: 100%; margin: 0; padding: 0 10px; box-sizing: border-box; } #main .news .list li a { width: calc(100% - 10px); } #main .news .list li a .title { width: calc(100% - 135px); } /* 搜索 */ #main .search .list>a { width: calc(50% - 10px); margin-right: 10px!important; } #main .search .list>a:nth-of-type(2n) { margin-right: 0px!important; } #main .search input{ font-size: 16px; line-height: 40px; height: 40px; } }