/*初始化样式*/ html { margin: 0; padding: 0; border: 0; } body, div, span, object, iframe, h1, h2, h3, h4, p, blockquote, pre, a, address, code, b, em, img, dl, dt, dd, ol, ul, li, fieldset, form, label, footer, header, hgroup, navs, section { margin: 0; padding: 0; border: 0; } body { background: #fff; color: #333; position: relative; font: 12px/1.5 microsoft yahei, arial, 宋体, sans-serif; vertical-align: baseline; width: 100%; overflow-x: hidden; } a { text-decoration: none; outline: none; } a:hover, a:active, a:focus { text-decoration: none; outline: none; } input { padding: 0; margin: 0; font-family: 'microsoft yahei'; } img { border: none; background: none; vertical-align: middle; } ul, ol, li { list-style-type: none; } select, input, img, select { vertical-align: middle; } table { border-collapse: collapse; border-spacing: 0 } table, th, td { vertical-align: middle } .clearfix:after { content: "."; display: block; height: 0; clear: both; overflow: hidden; visibility: hidden; } .clearfix { zoom: 1 } .clearboth { height: 0px; line-height: 0px; overflow: hidden; clear: both; font-size: 0px; } h1, h2 { font-size: 12px; font-weight: bold; } hr { border: 0; border-top: 1px solid #ccc; height: 0; } /*----- common css ------*/ .fl { float: left; } .fr { float: right; } .di { _display: inline; } .fwn { font-weight: normal; } .dib { *display: inline; _zoom: 1; _display: inline; _font-size: 0px; } .wh { max-width: 1530px; margin: 0 auto; padding: 0 15px; } .com-img { overflow: hidden; margin: 0 auto; } .com-img img { transition: all 0.8s; -webkit-transition: all 0.8s; -moz-transition: all 0.8s; -o-transition: all 0.8s; } .com-img:hover img { transform: scale(1.2); -webkit-transform: scale(1.2); -moz-transform: scale(1.2); -o-transform: scale(1.2); -ms-transform: scale(1.2); } .flex { display: flex; justify-content: space-between; } .flexs { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .flex2 { display: flex; align-items: center; flex-wrap: wrap; } /*头部样式*/ .top2 { background: #202960; height: 115px; } .top2 .wh { height: 115px; } .logo { width: 16.4%; overflow: hidden; } .logo img { width: 100%; } /*热门搜索*/ .sou { margin: 15px 0; } .hotsearch { float: left; height: 24px; line-height: 24px; font-weight: normal; color: #0d0d0d; font-size: 14px; } .hotsearch a { margin-right: 6px; color: #0d0d0d; } #search-type { float: left; width: 100px; height: 24px; border: 1px solid #c8c8c8; margin-right: 5px; } /* 导航样式 */ .nnav { width: 67.07%; } .x-menu { width: 100%; } .x-menu>li { position: relative; text-align: center; } .x-menu>li>a { display: block; font-size: 16px; color: #fff; line-height: 60px; } .x-menu>li:hover>a {} .x-menu>li.active>a {} .x-menu>li:hover .x-sub-menu { opacity: 1; visibility: visible; -webkit-transform: translatey(0); transform: translatey(0); } .x-sub-menu { position: absolute; z-index: 99999; width: 150%; left: -25%; top: 60px; background: #fff; padding: 10px 0; opacity: 0; visibility: hidden; -webkit-transform: translatey(20px); transform: translatey(20px); -webkit-transition: all .5s ease; transition: all .5s ease; } .x-sub-menu>li>a { display: block; text-align: center; font-size: 14px; color: #333; line-height: 40px; height: 40px; overflow: hidden; } .x-sub-menu>li>a:hover { background: #e9eaeb; } .x-menu li.lastli { width: 21px; position: relative; cursor: pointer; } .product_list1 { margin-top: 38px; } .product_list1 li { float: left; margin-right: 57px; margin-bottom: 28px; } .product_list1 li:nth-child(4n) { margin-right: 0; } .product_list1 li img { width: 257px; height: 293px; } .product_list1 li h3 { text-align: center; font-weight: normal; color: #3f3f3f; font-size: 20px; } /*主体样式*/ .bxs { overflow: hidden; } .box1 { background: #f8f8f8; padding: 3vw 0 2.2vw; } .bt { text-align: center; color: #202960; font-size: 41px; } .prod1 { margin-top: 3vw; } .prod1 li { width: 23%; text-align: center; margin-bottom: 2.3vw; } .prod1 li .img { box-shadow: 0px 0px 13px 0px rgba(0, 0, 0, 0.07); } .prod1 li img { display: block; width: 100%; } .prod1 li h3 { color: #333333; font-size: 14px; line-height: 3.8; background: #fff; box-shadow: 0px 0px 13px 0px rgba(0, 0, 0, 0.07); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; margin-top: 3px; } .prod1 li:hover h3 { background: #202960; color: #fff; } /*应用领域*/ .box2 { padding: 3vw 0 2.5vw; } .yin { margin-top: 3vw; position: relative; padding-bottom: 4.2vw; } .yin .myswiper { overflow: hidden; } .yin .swiper-slide { text-align: center; position: relative; } .yin .swiper-slide .img img { width: 100%; display: block; } .yin .swiper-slide .img2 img { width: 100%; display: block; } .yin .swiper-slide .det { background: rgba(0, 0, 0, .6); width: 100%; height: 100%; position: absolute; left: 0; top: 0; display: block; } .yin .swiper-slide .nr { display: flex; align-items: center; justify-content: center; flex-direction: column; height: 100%; } .yin .swiper-slide h2 { color: #fff; font-size: 20px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; margin-top: 2vw; } .yin .swiper-slide .det2 { width: 100%; position: absolute; left: 0; bottom: 2.8vw; display: none; } .yin .swiper-slide h3 { color: #fff; font-size: 20px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; margin-bottom: 16px; font-weight: bold; } .yin .swiper-slide .xian { width: 29px; height: 3px; background: #fff; margin: 0 auto; } .yin .swiper-slide:hover .det { display: none; } .yin .swiper-slide:hover .det2 { display: block; } .yin .swiper-button-prev { position: absolute; bottom: 0; left: 30%; width: 50px; height: 50px; opacity: 1; z-index: 999; background: url(/uploads/image/tdimages/aba028de0e547a8e8e7f34d1f5f8e0688583bfda.png) no-repeat; background-size: 100% 100%; top: auto; } .yin .swiper-button-next { position: absolute; bottom: 0; right: 30%; width: 50px; height: 50px; opacity: 1; z-index: 999; background: url(/uploads/image/tdimages/dce4bd93c2e442a624accf79ca1977b68230c157.png) no-repeat; background-size: 100% 100%; top: auto; } /* 4大优势 */ .box3 { background: #f8f8f8; padding: 3vw 0 3.5vw; } .yadd { margin-top: 3vw; } .yadd li { width: 24%; background: #fff; box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.1); text-align: center; } .yadd li h2 { color: #fff; font-size: 30px; background: #202960; width: 75px; line-height: 75px; margin: 0 auto; } .yadd li h3 { font-weight: bold; color: #202960; font-size: 28px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; margin-top: 2.5vw; } .yadd li h4 { width: 45px; height: 3px; background: #202960; margin: 0 auto; margin-top: 16px; } .yadd li h5 { color: #666666; font-size: 16px; line-height: 2; width: 85%; margin: 2vw auto 3.6vw; } /*新闻资讯*/ .box4 { margin: 3vw 0; } .box4 .cont { margin-top: 3vw; } .xw1 { width: 46.6%; background: #f8f8f8; } .xw1 li { padding: 7%; } .xw1 li h5 { color: #b8b8b8; font-size: 24px; } .xw1 li h2 { color: #333333; font-size: 28px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; margin: 1.5vw 0; } .xw1 li h4 { color: #999999; font-size: 14px; overflow: hidden; line-height: 23px; height: 69px; padding-left: 20px; border-left: 2px solid #adadad; } .xw1 li .img { margin: 30px auto 20px; } .xw1 li .img img { width: 100%; display: block; } .xw1 li .nmo { color: #fff; font-size: 16px; width: 125px; line-height: 41px; background: #202960; text-align: center; } .xw2 { width: 51.27%; border: 1px solid #efefef; } .xw2 li { padding: 6%; } .xw2 li h3 { width: 70%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; color: #333333; font-size: 22px; } .xw2 li h2 { color: #999999; font-size: 22px; } .xw2 li h4 { color: #666666; font-size: 14px; line-height: 25px; height: 50px; overflow: hidden; width: 70%; } .xw2 li h5 { margin-right: 20px; } .xw2 li .det2 { margin-top: 1.8vw; } .xw2 li:hover { box-shadow: 0px 0px 38px 0px rgba(0, 0, 0, 0.22); } .xw2 li:hover h3 { color: #202960; font-weight: bold; } /*关于我们*/ .box5 { background: url(/uploads/image/tdimages/964b41041db79bdd5925122313b25fa802524d67.jpg) no-repeat; background-size: cover; padding-top: 4.3vw; } .cpname { color: #fff; font-size: 41px; text-align: center; } .about { width: 86%; margin: 0 auto; color: #fff; font-size: 16px; line-height: 2.5; margin-top: 2.8vw; text-align: center; } .alogo { text-align: center; margin: 0 auto; margin-top: 4vw } .alogo img { max-width: 100%; } /*页面底部*/ .foot { background: #202960; color: #fff; } .foot a { color: #fff; } .foot .cont1 { padding: 2.5vw 0; border-bottom: 1px solid #3b4373; } .fadd li {} .fadd li .wz { margin-left: 10px; } .fadd li h3 { font-size: 16px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .fadd li h2 { font-size: 20px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; margin-top: 5px; } .bq { padding: 22px 0; } .cop { color: rgba(255, 255, 255, .8); font-size: 14px; line-height: 24px; } .cop a { color: rgba(255, 255, 255, .8); } .footer33 { height: 50px; } @media (max-width:1440px) { .yin { padding-bottom: 5vw; } } @media (max-width:1024px) { .bt { font-size: 32px; } .yin .swiper-slide h2 { font-size: 18px; } .yin .swiper-slide h3 { font-size: 18px; } .yin { padding-bottom: 6.2vw; } .yin .swiper-slide .img2 { width: 30%; margin: 0 auto; } .yadd li h2 { font-size: 25px; width: 60px; line-height: 60px; } .yadd li h3 { font-size: 22px; } .yadd li h5 { font-size: 14px; } .yadd li h4 { width: 30px; height: 2px; } .xw1 li h5 { font-size: 20px; } .xw1 li h2 { font-size: 22px; } .xw2 li h3 { font-size: 18px; } .xw2 li h2 { font-size: 18px; } .xw2 li h5 { margin-right: 12px; } .cpname { font-size: 32px; } .about { width: 100%; font-size: 14px; } .fadd li h3 { font-size: 14px; } .fadd li h2 { font-size: 16px; } .cop { width: 100%; text-align: center; } } @media (max-width: 768px) { .x-banner { margin-top: 60px; } .page-banner { margin-top: 60px; } .xypg-right-content p img { max-width: 100% !important; width: auto !important; height: auto !important; } .prod1 li h3 { line-height: 3; } .box1 { padding: 5vw 0; } .prod1 { margin-top: 5vw; } .box2 { padding: 5vw 0; } .yin { margin-top: 5vw; padding-bottom: 55px; } .yin .swiper-button-prev { width: 35px; height: 35px; } .yin .swiper-button-next { width: 35px; height: 35px; } .box3 { padding: 5vw 0; } .yadd { margin-top: 5vw; } .yadd li { width: 49%; } .yadd li:nth-child(n 3) { margin-top: 15px; } .yadd li h3 { margin-top: 4.2vw; } .yadd li h5 { margin: 3.5vw auto 5vw; } .box4 { margin: 5vw 0; } .box4 .cont { margin-top: 5vw; } .box5 { padding-top: 6vw; } .alogo { width: 25%; } .fadd li { width: 50%; justify-content: left; } .fadd li:nth-child(n 3) { margin-top: 10px; } .foot .cont1 { padding: 4vw 0; } } @media (max-width:425px) { .bt { font-size: 25px; } .prod1 li { width: 48%; } .yin .swiper-slide h2 { font-size: 15px; } .yin .swiper-slide h3 { font-size: 15px; } .yin .swiper-slide .det2 { bottom: 25px; } .yadd li h2 { font-size: 18px; width: 42px; line-height: 42px; } .yadd li h3 { font-size: 18px; } .yadd li h5 { font-size: 12px; line-height: 24px; } .yadd li h4 { width: 25px; height: 2px; margin-top: 10px; } .xw1 { width: 100%; } .xw2 { width: 100%; margin-top: 20px; } .xw1 li h5 { font-size: 17px; } .xw1 li h2 { font-size: 17px; margin: 15px 0; } .xw2 li h3 { font-size: 15px; width: 100%; } .xw2 li h2 { font-size: 15px; width: 100%; } .xw1 li .nmo { font-size: 14px; width: 100px; line-height: 32px; } .xw2 li h2 { display: none; } .xw2 li h5 { display: none; } .xw2 li h4 { width: 100%; } .cpname { font-size: 25px; } .about { line-height: 25px; margin-top: 5.5vw; } .alogo { width: 30%; } .foot .cont1 { padding: 25px 0; } .fadd li { width: 100%; } .fadd li:nth-child(n 2) { margin-top: 10px; } } /*内页左侧样式*/ .page-product-inquiry a { color: #fff; } .xymob-left-close-btn .icon-close:before { font-size: 0; } /*左侧工具条*/ #toolbar { position: fixed; z-index: 9999; right: 17px; bottom: 10%; } #toolbar li { margin-bottom: 3px; font-size: 0; width: 57px; height: 57px; right: 0; position: relative; } #toolbar li a { display: block; position: absolute; z-index: 9; right: 0; top: 0; width: 57px; height: 57px; overflow: hidden; background: #202960; -webkit-transition: all .5s ease; transition: all .5s ease; white-space: nowrap; font-size: 0; } #toolbar li .icon-font { display: inline-block; vertical-align: middle; width: 57px; height: 57px; background-color: #d9d9d9; } #toolbar li .icon-qq:after { background-position: 0 -150px; } #toolbar li .icon-phone:after { background-position: 0 -90px; } #toolbar li .icon-ewm:after { background-position: 0 -30px; } #toolbar li .icon-message:after { background-position: 0 -120px; } #toolbar li .icon-top:after { background-position: 0 -60px; } #toolbar li .icon-wangwang:after { background-position: 0 0; } #toolbar li .wz { display: inline-block; line-height: 57px; font-size: 14px; color: #fff; vertical-align: middle; padding-left: 10px; } #toolbar li.ewm .ewm-box { position: absolute; z-index: 1; padding: 5px; background: #202960; width: 110px; right: 120%; bottom: 0; opacity: 0; visibility: hidden; -webkit-transform: translatex(100%); transform: translatex(100%); -webkit-transition: all .7s; transition: all .7s; } #toolbar li.ewm .ewm-box p { margin-bottom: 0; } #toolbar li.ewm .ewm-box img { max-width: 100%; } #toolbar li.ewm .ewm-box:after { content: ''; position: absolute; right: -5px; bottom: 20px; width: 0; height: 0; line-height: 0; font-size: 0; overflow: hidden; border-width: 5px; cursor: pointer; border-style: dashed dashed dashed solid; border-color: transparent transparent transparent #202960; border-right: none; } #toolbar li.ewm:hover .icon { background-position: -57px -180px; } #toolbar li.ewm:hover .ewm-box { opacity: 1; visibility: visible; -webkit-transform: translatey(0); transform: translatey(0); } #toolbar li.backtop { cursor: pointer; } #toolbar li.backtop .iconfont { color: #fff; background-color: #202960; } #toolbar li:hover a { width: 200px; } #toolbar li:hover .icon-font { background-color: #202960; } #toolbar li:hover .icon-qq:after { background-position: -30px -150px; } #toolbar li:hover .icon-phone:after { background-position: -30px -90px; } #toolbar li:hover .icon-ewm:after { background-position: -30px -30px; } #toolbar li:hover .icon-message:after { background-position: -30px -120px; } #toolbar li:hover .icon-wangwang:after { background-position: -30px 0; } #toolbar li:hover .icon-top:after { background-position: -30px -60px; } @media (max-width: 990px) { #toolbar { display: none; } } /* 内页 */ .n_banner { width: 100%; height: auto; } .n_banner img { width: 100%; } @media(max-width:995px) { .n_banner { padding-top: 60px; } }