* { margin: 0; padding: 0; font-family: arial, "微软雅黑"; } ul { list-style: none; margin-bottom: 0; } button, a, input { border: none; outline: none; } a { color: #333; } a:hover { color: #333; text-decoration: none; } input:focus, textarea:focus { outline: none; } input::-webkit-outer-spin-button, input::-webkit-inner-spin-button { -webkit-appearance: none; } input[type="number"] { -moz-appearance: textfield; } h1, h2, h3, h4, h5, h6 { font-weight: bold; } body { width: 100%; position: relative; font-size: 14px; color: #333; } .head { height: 112px; line-height: 112px; } .inner { width: 1170px; margin: 0 auto; } .head .logo { float: left; } .head .logo img { width: 455px; height: auto; } .head .topbar { float: right; } .head .topbar .search { display: inline-block; margin-right: 14px; position: relative; } .search-box { display: none; position: absolute; right: -10px; top: 0; } .search:hover .search-box { display: block; } .head .topbar .search input { height: 44px; width: 332px; border-radius: 22px; background: #f5f5f5; padding: 0 36px 0 22px; } .head .topbar .search span { background: no-repeat; background-size: 21px 21px; width: 22px; height: 22px; position: absolute; top: 50%; right: 10px; margin-top: -11px; } .head .topbar .language { display: inline-block; margin-left: 10px; } .head .topbar .language div { display: inline-block; } .head .topbar .language div img { vertical-align: middle; } .head .topbar .language div text { vertical-align: middle; } .head .topbar .language .china { padding-right: 10px; } .head .topbar .language .china span { border-right: 1px solid #d7d7d7; padding-right: 10px; } .nav-icon { position: absolute; top: 0; right: 20px; display: none; cursor: pointer; } .nav-icon img { width: 30px; } /***********导航部分******/ .nav-content .close-nav { height: 80px; margin-left: 150px; padding-top: 10px; display: none; } .nav-content .close-nav img { width: 25px; } .nav { height: 60px; line-height: 60px; text-align: center; } .nav-position { border-bottom: 1px solid #d7d7d7; border-top: 1px solid #d7d7d7; cursor: pointer; } .nav .menu { display: inline-block; font-size: 18px; position: relative; cursor: pointer; width: 11.11%; } .nav .menu:after { content: ''; border: 1px solid #d7d7d7; position: absolute; right: -2px; top: 36%; height: 17px; } .nav .menu.act { background: #122a88; } .nav .menu.act span > a { color: #fff; } .nav .menu.act:after { border: 1px solid transparent; } .nav .menu:last-child:after { border: none; } .nav .menu ul { display: none; z-index: 10; position: absolute; box-shadow: 0 0 5px rgba(0, 0, 0, 0.2); background: #fff; left: 0; top: 60px; width: 100%; font-size: 16px; color: #333; } .nav .menu:hover ul { display: inline-block; } .nav .menu ul li { font-size: 14px; line-height: 45px; } .nav .menu ul li:hover a { color: #122a88; font-weight: bold; cursor: pointer; } .nav-inner-list { font-size: 0; } /*******轮播部分******/ /*覆盖插件样式*/ .lunbo .swiper-pagination-bullet { width: 27px; height: 15px; border-radius: 7.5px; } .lunbo .swiper-pagination-bullet-active { background: #1f3779; } .lunbo .swiper-container-horizontal > .swiper-pagination-bullets .swiper-pagination-bullet { margin: 0 7px; } /*******企业新闻部分*/ .news { background: #eee; height: 60px; overflow: hidden; } .news > .inner { position: relative; padding-left: 74px; } .news .news-title { line-height: 60px; /*position: absolute;*/ /*left: 5%;*/ float: left; } .news .news-title span { border-right: 2px solid #999999; padding-right: 16px; } .news .news-con { color: #666; overflow: hidden; } .news .news-con .scroll_item { width: 100%; } .news .news-con .scroll_item ul { } .news .news-con .scroll_item li { padding: 0 40px; width: 33%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: inline-block; line-height: 60px; } .news .news-con .scroll_item li:last-child { padding-right: 0; } /***********小模块*/ .section { padding: 36px 0 56px 0; } .box { display: flex; } .box a{ display: block; cursor: pointer; color: #fff; } .box .box-left { width: 50%; position: relative; } .box .box-left .box-01 { height: 456px; background: no-repeat; background-size: 100% 100%; padding: 100px 90px; } .box-01-title { padding-bottom: 24px; } .box-01-title p { font-size: 22px; opacity: 0.7; } .box-01-con { opacity: 0.7; } .box-01-title h4 { font-size: 24px; } .box-01-btn { color: #4082d9; background: #fff; width: 124px; height: 30px; line-height: 30px; margin-top: 60px; text-align: center; cursor: pointer; } .box .box-right { width: 50%; } .box .box-right-top { } .box .box-right-top .box-02 { height: 228px; background: no-repeat; background-size: 100% 100%; position: relative; } .box .box-right-bottom { display: flex; } .box .box-right-bottom .box-03 { width: 50%; height: 228px; background: no-repeat; background-size: 100% 100%; position: relative; } .box .box-right-bottom .box-04 { width: 50%; height: 228px; background: no-repeat; background-size: 100% 100%; position: relative; color: #333; } .box-common:hover { box-shadow: 0 0 20px rgba(0, 0, 0, 0.4); } .box-icon { position: absolute; right: 30px; top: 20px; } .box-icon img { width: 25px; height: auto; } .box-title { position: absolute; left: 30px; bottom: 30px; } .box-title h5 { font-size: 20px; } .box-title p { opacity: 0.7; } /*******产品展示*/ .product { background: #f7f7f7; padding: 45px 0; } .product-title { text-align: center; padding-bottom: 30px; position: relative; } .product-title h4 { font-size: 24px; } .product-title p { opacity: 0.7; } .more { position: absolute; right: 10px; bottom: 30px; color: #333; cursor: pointer; } .product-con { } .product-item { text-align: center; margin-bottom: 30px; } .product-item .explain .name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .product-item:hover > .explain { background: #122a88; color: #fff; } .product-item:hover > .explain .formula { color: #fff; } .product-item .pic img { transition: all 0.5s; width: 80%; } .product-item:hover img { transform: scale(1.1); } .product-item .pic { padding: 28px 0; background: #fff; position: relative; } .product-item .explain { padding: 20px 0; } .product-item .explain p { font-size: 20px; } .product-item .explain .formula { color: #999999; } /*******底部部分*/ .foot { background: url(/uploads/image/images/foot-bg.jpg) no-repeat; background-size: 100% 100%; } .foot > .container { position: relative; } .foot-title { padding: 50px 0 30px 0; text-align: center; } .foot-title img{ width: 300px; } .foot-con { color: #fff; padding-bottom: 98px; text-align: center; } .foot-con ul { display: inline-block; padding-right: 40px; vertical-align: text-top; text-align: left; } .foot-con ul li a{ color: #fff; } .foot-con .tel li:first-child:before { /*content: '电话:';*/ position: absolute; top: 0; left: 0; } .foot-con .shop li:first-child { font-weight: bold; } .code { position: absolute; right: 15px; top: 45%; } .code p { text-align: center; color: #fff; padding-top: 8px; } .foot-copyright { color: #fff; text-align: center; padding: 20px 0; border-top: #464646 1px solid; } .foot-copyright a{ color: #fff; } .lunbo .swiper-container img { width: 100%; } @media screen and (max-width: 1200px) { .head .logo img { width: 85%; } .news .news-title { display: none; } .foot-title { text-align: center; } .product-item .explain p { font-size: 18px; } } @media screen and (max-width: 991px) { .head > .container, .nav > .container { width: 100%; } .head .logo { width: 45%; } .nav .menu { font-size: 16px; } .nav .menu ul { left: 50%; margin-left: -75%; width: 150%; } .head .topbar .search input { width: 200px; } .news .news-con .scroll_item li { padding: 0 20px; width: 48%; } .box .box-left .box-01 { padding: 60px 30px; } .foot-title { padding: 30px 0 30px 0; } .code { position: relative; right: 0; top: 0; text-align: center; } .foot-con { padding: 0; width: 300px; margin: 0 auto; } .foot-con ul{ display: inline-block; padding-right: 0; /*width: 320px;*/ margin: 0 auto 20px; } .foot-con .tel { margin-bottom: 40px; } .foot-con .tel li:first-child:before { position: relative; } .foot-con .shop li:first-child { text-align: center; padding-bottom: 5px; } .head .topbar .search { margin-right: 0; } } @media screen and (max-width: 768px) { .row { margin: 0; } .nav-position { display: none; position: absolute; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.4); z-index: 100; top: 0; overflow: hidden; cursor: pointer; } .nav-content { position: fixed; background: #fff; width: 250px; right: 0; height: 100%; overflow: scroll; z-index: 9999; } .nav-content .close-nav { display: block; } .nav .menu { line-height: 40px; } .nav .menu:after { border: 0; } .nav .menu ul { top: 0; left: 0; margin-left: 0; width: 100%; } .box .box-left .box-01 { height: auto; } .inner { width: 100%; padding: 0 10px; } .head { height: 80px; line-height: 80px; } .head .topbar { float: right; padding-right: 40px; } .head .topbar .search { display: none; } .head .logo img { width: 100%; } .head .topbar .language { margin-left: 20px; } .nav-icon { display: block; } .nav .menu { width: 250px; text-indent: 2rem; text-align: left; display: inline-block; } .nav .menu ul { position: relative; text-indent: 6rem; box-shadow: none; } .news .news-con .scroll_item li { padding: 0 20px; width: 100%; } .news { padding: 0 40px; } .product-item .pic img { width: 50%; } .box { display: block; } .box .box-left, .box .box-right { width: 100%; } .product p { margin-bottom: 0; } .product-item .explain { padding: 20px 0 0 0; } .product-item .explain .formula { font-size: 14px; } .product-con .col-lg-4.col-md-4.col-sm-6.col-xs-6 { padding-left: 10px; padding-right: 10px; } .lunbo .swiper-pagination-bullet { width: 20px; height: 6px; } } @media screen and (max-width: 640px) { .head .topbar .language span { display: none; } .box-01-title p, .box-01-title h4 { font-size: 20px; } .product-item .explain p { font-size: 16px; } .product-con .col-lg-4.col-md-4.col-sm-6.col-xs-6 { padding-left: 5px; padding-right: 5px; } } @media screen and (max-width: 414px) { .foot-con { /*display: none;*/ padding: 0; } .product-con .col-lg-4.col-md-4.col-sm-6.col-xs-6 { padding: 0; } .box .box-left .box-01 { padding: 20px; } .box-01-title p, .box-01-title h4, .box-title h5 { font-size: 16px; } .box-01-btn { margin-top: 40px; } .box-title { left: 10px; bottom: 10px; } .box .box-right-top .box-02 { height: 160px; } .box .box-right-bottom .box-03, .box .box-right-bottom .box-04 { height: 160px; } }