/*初始化样式*/ 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;} p{margin: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;} /*滚动*/ #demo{overflow:hidden;width:100%;margin:0 auto;} #indemo {float: left;width:800%!important;} #demo1 {float: left;} #demo2 {float: left;} #m_demo{overflow:hidden;width:92%;margin:0 auto;} #m_indemo {float: left;width:800%!important;} #m_demo1 {float: left;} #m_demo2 {float: left;} .com-img{ overflow:hidden;} .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);} .w1725{max-width: 1725px; margin: 0 auto;} @media (max-width: 1725px) { .w1725{padding: 0 2%;} } .x-top2{position: fixed; width: 100%; z-index: 999; background-color: #fff;} .bbtbdh h2{ font-size: 16px; font-weight: bold; font-stretch: normal; line-height: 20px; letter-spacing: 0px; color: #111111; } .bbtbdh h3{ font-family: ArialMT; font-size: 18px; font-weight: bold; /*font-style: italic;*/ font-stretch: normal; line-height: 20px; letter-spacing: 0px; color: #2749da; margin-top: 6px; } .bbtbzx{ width: 100px; height: 32px; background-color: #2749da; border-radius: 16px; ; } .bbtbzx h2{ font-size: 14px; font-weight: normal; font-stretch: normal; line-height: 32px; letter-spacing: 0px; color: #ffffff; text-align: center; } @media (max-width: 1300px) { .x-top2 .nnav{width: 55%;} } .bb1x{ margin-top: 4vw; margin-left: 13%; overflow: hidden; margin-bottom: 4vw; } .bb1nr{ width: 100%; float: left; } .bb1bt{ font-size: 22px; font-weight: normal; font-stretch: normal; line-height: 26px; letter-spacing: 0px; color: #111111; } .bb1fl{ margin-top: 3vw; position: relative; width: 52%; } .bb1fl:before{content: '';width: 1660px;height: 1px;background-color: #2749da;position: absolute;top: 0;} .bb1fl li{float: left;padding-top: 2.2vw; opacity:0.6; } .bb1fl li:before{content: '';width: 5px;height: 5px;background-color: #2749da;position: absolute;top: -2px;left: 20px;border-radius: 5px;z-index: 999;} .bb1fl li h2{ font-family: Impact; font-size: 36px; font-weight: normal; font-stretch: normal; line-height: 30px; letter-spacing: 0px; color: #2749da; } .bb1fl li h2 s1{ font-size: 18px; font-weight: normal; letter-spacing: 0px; color: #2749da; position: absolute; margin-top: 8px; margin-left: 2px; } .bb1fl li h3{ font-size: 16px; font-weight: normal; font-stretch: normal; line-height: 24px; letter-spacing: 0px; color: #666666; margin-top: 23px; } .bb1fl .swiper-slide-prev{opacity:1; } .bb1fl .swiper-slide-active{opacity:1;} .bb1fl .swiper-slide-next{opacity:1;} .bb1fl .swiper-button-prev,.bb1fl .swiper-button-next{ width: 50px; height: 50px; outline: none; } .bb1fl .swiper-button-prev{ background: url(../images/le1.png) no-repeat ; opacity:0; } .bb1fl .swiper-button-next{ background: url(../images/le1.png) no-repeat; right: -64%; top: 68%; } .swiper-button-next:after, .swiper-rtl .swiper-button-prev:after{display: none;} .swiper-button-prev:after, .swiper-rtl .swiper-button-next:after{display: none;} @media (max-width: 1400px) { .bb1x{ margin-left: 6%;} } @media (max-width: 1200px) { .bb1fl{width: 65%;} } @media (max-width: 992px) { .bb1x{margin-left: 2%;} .bb1bt{ font-size: 14px;} .bb1fl li h2{font-size: 28px;} .bb1fl li h2 s1{ margin-top: 4px; margin-left: 2px; font-size: 15px; } .bb1fl li h3{ margin-top: 8px;} .bb1fl .swiper-button-next{ right: -30%; top: 58%; } .bb1fl .swiper-button-prev, .bb1fl .swiper-button-next{ width: 40px; height: 40px; background-size: 100%; } .bb1fl .swiper-slide-next{opacity:0.6; } } .w1400{max-width: 1400px; margin: 0 auto;} @media (max-width: 1400px) { .w1400{padding: 0 2%;} } .bb2x{ background: url(../images/box1.png) no-repeat left bottom; position: relative; padding-top: 6.7vw; } .bb2x .img{float: right;width: 58.5%;} .bb2x .img img{ width: 100%; } .bb2nr{ position: absolute; width: 100%; } .bb2nr h2{ font-size: 24px; font-weight: normal; font-stretch: normal; line-height: 24px; letter-spacing: 0px; color: #2749da; } .bb2nr h3{ font-size: 48px; font-weight: normal; font-stretch: normal; line-height: 52px; letter-spacing: 0px; color: #ffffff; margin-top: 22px; } .bb2nr h3 s1{ font-weight: bold; } .bb2nr h4{ font-size: 16px; font-weight: normal; font-stretch: normal; line-height: 36px; letter-spacing: 0px; color: #ffffff; /*opacity: 0.6;*/ width: 34%; margin-top: 3.8vw;max-height: 230px;overflow: hidden; } .bb2nr h5{ width: 168px; height: 50px; border-radius: 25px; border: solid 1px #dde1f4; font-size: 16px; font-weight: normal; font-stretch: normal; line-height: 50px; letter-spacing: 0px; color: #ffffff; text-align: center; margin-top: 3.5vw; } @media (max-width: 1300px) { .bb2nr h4{ margin-top: 1.8vw; width: 43%; line-height: 31px; } .bb2nr h3{ font-size: 36px; margin-top: 8px; } .bb2nr h2{ font-size: 22px; } .bb2x .img{width: 52%;margin-top: 35px;} .bb2nr h5{ width: 137px; height: 38px; font-size: 14px; line-height: 38px; margin-top: 2.5vw; } } @media (max-width: 992px) { .bb2nr{width: 100%; position: relative;} .bb2nr h4{width: 100%;} .bb2x .img{width: 100%;} .bb2nr h2{ font-size: 20px; } .bb2nr h3{ font-size: 30px; margin-top: 8px; line-height: 35px; } .bb2nr h4{ margin-top: 25px; } } .bb3x{} .bb3nr{} .bb3z{ width: 27.7%; float: left; padding-top: 7.2vw; } .bb3z h2{ font-size: 36px; font-weight: bold; font-stretch: normal; line-height: 39px; letter-spacing: 0px; color: #111111; } .bb3z h2 s1{ font-weight: normal; } .bb3z h3{ font-size: 36px; font-weight: bold; font-stretch: normal; line-height: 39px; letter-spacing: 0px; color: #111111; margin-top: 20px; } .bb3z h4{ font-size: 16px; font-weight: normal; font-stretch: normal; line-height: 36px; letter-spacing: 0px; color: #333333; margin-top: 2.2vw; width: 80%; } .bb3z h5{ width: 168px; height: 50px; background-color: #eef1fc; border-radius: 25px; border: solid 1px #cccccc; font-size: 16px; font-weight: normal; font-stretch: normal; line-height: 48px; letter-spacing: 0px; color: #333333; text-align: center; margin-top: 2.5vw; } .bb3y{ width: 72.3%; float: left; border-left: 1px solid #ccc; padding-left: 5.5%; padding-top: 6.6vw; } .bb3hd{ } .bb3hd li{ float: left; width: 128px; text-align: center; position: relative; } .bb3hd li:first-child:before{ display: none; } .bb3hd .on:before{ display: none; } .bb3hd li:before{content: '';width: 1px;height: 16px;background-color: #cccccc;position: absolute;left: 0;top: 9px;} .bb3hd .on{ width: 116px; height: 31px; background-color: #2749da; border-radius: 16px; margin-right: 12px; } .bb3hd .on h2{ color: #fff; } .bb3hd li h2{ font-size: 16px; font-weight: normal; font-stretch: normal; line-height: 31px; letter-spacing: 0px; color: #333; } .bb3bd{ margin-top: 3.5vw; border-top: 1px solid #ccc; } .bb3bd .tt{} .bb3bd .tt ul{ display: flex; justify-content: space-between; flex-wrap: wrap; } .bb3bd .tt li{ width: 33.33%; padding: 3.2vw 35px; border-right: 1px solid #ccc; border-bottom: 1px solid #ccc; } .bb3bd .tt li:hover{ box-shadow: -3px 4px 17px 4px rgba(8, 9, 16, 0.07); } .bb3bd .tt li .img{} .bb3bd .tt li .img img{ width: 100%; } .bb3bd .tt li:nth-child(3n){border-right: none;} .bb3bd .tt li:nth-child(n+4){border-bottom: none;} .bb3bd .tt li h2{ font-size: 20px; font-weight: bold; font-stretch: normal; line-height: 21px; letter-spacing: 0px; color: #111111; margin-top: 36px; text-align: center; } .bb3bd .tt li:hover h3{ width: 99px; height: 2px; background-color: #2749da; margin: 0 auto; margin-top: 10px; } .bb3bd .tt li h3{ width: 99px; height: 2px; margin-top: 10px; } @media (max-width: 1250px) { .bb3hd li{width: 105px;} .bb3hd .on{width: 100px; margin-right: 5px;} .bb3hd li h2{font-size: 14px;} } @media (max-width: 992px) { .bb3z{width: 100%;} .bb3z h2{ font-size: 28px; } .bb3z h3{ font-size: 30px; line-height: 36px; margin-top: 9px; } .bb3z h4{ width: 100%; font-size: 14px; line-height: 32px; } .bb3z h5{ width: 137px; height: 38px; font-size: 14px; line-height: 38px; margin-top: 2.5vw; } .bb3y{ width: 100%; padding-left: 0; border-left: none; padding-top: 50px; } .bb3hd li{ width: 33.3%; } .bb3hd .on{ width: 33.3%; margin-right: 0; } .bb3hd li:before{ display: none; } .bb3bd .tt li{ padding: 4.2vw 6px; } .bb3bd .tt li h2{ font-size: 14px; margin-top: 10px; } .bb3bd .tt li h3{width: 77px;} .bb3bd .tt li:hover h3{width: 77px;} } .bb4bd { position: relative; } .bb4bd .bb4bdn { position: absolute; left: 0; top: 0; z-index: 9; right: 0;} .bb4bd .bb4bdn { opacity: 0; visibility: hidden; transition: all .5s ease; } .bb4bd .bb4bdn.on { position: static; opacity: 1; visibility: visible; } .bb4x{ background: url(../images/box2.png) no-repeat; padding-top: 5.3vw; padding-bottom: 4vw; } .bb4bt{ text-align: center; } .bb4bt h2{ font-size: 36px; font-weight: bold; font-stretch: normal; line-height: 36px; letter-spacing: 0px; color: #ffffff; background: url(../images/th.png) no-repeat center bottom; padding-bottom: 28px; } .bb4bt h2 s1{ font-weight: normal; } .bb4nr{ margin-top: 20px; } .bb4hd{ text-align: center; } .bb4hd li{ font-size: 24px; font-weight: normal; font-stretch: normal; line-height: 36px; letter-spacing: 0px; color: #9597a0; display: inline-block; vertical-align: middle; padding: 0 10px; } .bb4hd .on{color: #fff;} .bb4hd li:after{content: '/';margin-left: 22px;color: #9597a0;} .bb4hd li:last-child:after{ display: none; } .bb4bd{ margin-top: 2.2vw; } .bb4bdn{overflow: hidden; position: relative;} .bb4tt{} .bb4tt li{ background-color: #fff; padding: 20px 10px 33px; border-left: 1px solid #e3e3e3; } .bb4tt li .img{} .bb4tt li .img img{ width: 100%; } .bb4tt li h2{ font-size: 18px; font-weight: normal; font-stretch: normal; line-height: 18px; letter-spacing: 0px; color: #000011; margin-top: 21px; } .bb4tt li h3{ width: 115px; height: 2px; margin-top: 15px; } .bb4tt li:hover h3{ background-color: #2749da; } .bb4bdn .swiper-button-prev,.bb4bdn .swiper-button-next{ width: 50px; height: 50px; outline: none; background-size: 100%; } .bb4bdn .swiper-button-prev{ background: url(../images/la.png) no-repeat; left: -60px; } .bb4bdn .swiper-button-next{ transform: scale(-1,1); background: url(../images/la.png) no-repeat; right: -60px; } .bb4bdn .swiper-button-prev:hover{ background: url(../images/lb.png) no-repeat; transform: scale(-1,1); background-size: 100%; } .bb4bdn .swiper-button-next:hover{ background: url(../images/lb.png) no-repeat; transform: scale(1,-1); background-size: 100%; } @media (max-width: 1550px) { .bb4bdn .swiper-button-prev{ left: 10px; } .bb4bdn .swiper-button-next{ right: 10px; } } @media (max-width: 992px) { .bb4bt h2{font-size: 30px; background: url(../images/th.png) no-repeat center bottom; background-size: 75%; padding-bottom: 16px;} .bb4hd li{ font-size: 18px; padding: 0 7px; } .bb4hd li:after{ margin-left: 13px; } .bb4nr{ margin-top: 10px; } .bb4tt li{ padding: 15px 5px 14px; } .bb4tt li h2{ font-size: 16px; margin-top: 12px; } .bb4bdn .swiper-button-prev, .bb4bdn .swiper-button-next{ width: 40px; height: 40px; background-size: 100%; } .bb4tt li h3{width: 103px;} } .bb5x{ background: url(../images/box3.png) no-repeat right; background-size: 30% 100%; } .bb5nr{} .bb5z{ width: 27.7%; float: left; padding-top: 6.8vw; } .bb5z h2{ font-size: 36px; font-weight: bold; font-stretch: normal; line-height: 39px; letter-spacing: 0px; color: #111111; } .bb5z h2 s1{ font-weight: normal; } .bb5z h3{ font-size: 36px; font-weight: bold; font-stretch: normal; line-height: 39px; letter-spacing: 0px; color: #111111; margin-top: 20px; } .bb5z h4{ font-size: 16px; font-weight: normal; font-stretch: normal; line-height: 36px; letter-spacing: 0px; color: #333333; margin-top: 2.2vw; width: 80%; } .bb5hd{margin-top: 2.7vw;} .bb5hd li{ width: 120px; height: 31px; text-align: center; position: relative; margin-bottom: 15px; } .bb5hd li:first-child:before{ display: none; } .bb5hd .on:before{ display: none; } .bb5hd .on{ width: 120px; height: 31px; background-color: #2749da; border-radius: 16px; } .bb5hd .on h2{ color: #fff; } .bb5hd li h2{ font-size: 16px; font-weight: normal; font-stretch: normal; line-height: 31px; letter-spacing: 0px; color: #333; } .bb5y{ width: 72.3%; float: left; border-left: 1px solid #ccc; padding-left: 5.5%; background-color: #f5f8fa; padding-bottom: 5.2vw; } .bb5bd{ margin-top: 4vw; } .bb5bd .tt{} .bb5bd .tt li{ float: left; padding-bottom: 32px; border-bottom: 1px solid #ccc; padding-top: 2.4vw; } .bb5bd .tt li .bb5sj{ text-align: left; float: left; } .bb5bd .tt li .bb5sj h2{ font-family: Arial-BoldMT; font-size: 36px; font-weight: bold; font-stretch: normal; line-height: 31px; letter-spacing: 0px; color: #8e8f98; } .bb5bd .tt li .bb5sj h3{ font-size: 18px; font-weight: normal; letter-spacing: 0px; color: #8e8f98; margin-top: 15px; } .bb5bd .tt li .bb5wz{ width: 76.1%; float: right; } .bb5bd .tt li .bb5wz h2{ font-size: 18px; font-weight: normal; font-stretch: normal; line-height: 20px; letter-spacing: 0px; color: #333333; } .bb5bd .tt li .bb5wz h3{ font-size: 14px; font-weight: normal; font-stretch: normal; line-height: 24px; letter-spacing: 0px; color: #999999; margin-top: 20px; } .bb5bd .tt li:hover .bb5sj h2{ color: #000011;} .bb5bd .tt li:hover .bb5sj h3{ color: #000011;} @media (max-width: 992px) { .bb5x{background: none;} .bb5z{width: 100%;} .bb5z h2{ font-size: 28px; } .bb5z h3{ font-size: 30px; line-height: 36px; margin-top: 9px; } .bb5z h4{ width: 100%; font-size: 14px; line-height: 32px; } .bb5hd li{ width: 49%; float: left; } .bb5hd{ margin-top: 25px; } .bb5hd .on{ width: 49%; margin-right: 0; } .bb5y{ width: 100%; padding-left: 0; border-left: none; padding-top: 0; margin-top: 25px; background-color: #f5f8fa; } .bb5bd .tt li .bb5sj h2{ font-size: 26px; } .bb5bd .tt li .bb5sj h3{ font-size: 16px; margin-top: 5px; } .bb5bd .tt li .bb5wz h2{ overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 17px; } .bb5bd .tt li .bb5wz{ float: left; margin-left: 3%; width: 72.1%; } .bb5bd .tt li .bb5wz h3{ margin-top: 10px; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; font-size: 13px; } .bb5bd .tt li{ padding-top: 20px; padding-bottom: 20px; } } .bb6x{ background: url(../images/box4.png) no-repeat; padding-top: 2.6vw; padding-bottom: 2.6vw; } .bb6nr{} .bb6z{ width: 15%; float: left; position: relative; } .bb6z h2{ font-size: 36px; font-weight: normal; font-stretch: normal; line-height: 39px; letter-spacing: 0px; color: #ffffff; } .bb6z h2 s1{ font-weight: bold; } .bb6z .swiper-button-prev,.bb6z .swiper-button-next{ width: 50px; height: 50px; outline: none; top: 90px; } .bb6z .swiper-button-prev{ background: url(../images/le.png) no-repeat; left: 0; } .bb6z .swiper-button-next{ transform: scale(-1,1); background: url(../images/le.png) no-repeat; left: 70px; } .bb6z .swiper-button-prev:hover{ background: url(../images/le1.png) no-repeat; transform: scale(-1,1); background-size: 100%; } .bb6z .swiper-button-next:hover{ background: url(../images/le1.png) no-repeat; transform: scale(1,-1); background-size: 100%; } .bb6y{ width: 82.7%; float: right; overflow: hidden; margin-top: 1vw; } .bb6y li{} .bb6y li .img{} .bb6y li .img img{width: 100%;} @media (max-width: 992px) { .bb6z{width: 100%;} .bb6y{width: 100%;margin-top: 25px;} .bb6z .swiper-button-prev,.bb6z .swiper-button-next{ width: 40px; height: 40px; top: 23px; background-size: 100%; } .bb6z .swiper-button-prev{ left: 43%; } .bb6z .swiper-button-next{ left: 62%; } .bb6z h2{ font-size: 30px; } } .bbdb{background-color: #0e0e0e;padding-top: 5.5vw;} .bbdnr{ margin-bottom: 2.6vw; } .bbdz{ float: left; width: 30%; } .bbdz .img{} .bbdz .img img{ max-width: 100%; } .bbdz h2{ margin-top: 0; font-size: 18px; font-weight: normal; font-stretch: normal; line-height: 20px; letter-spacing: 0px; color: #878787; } .bbdz h3{ font-size: 14px; font-weight: normal; font-stretch: normal; line-height: 31px; letter-spacing: 0px; color: #878787; margin-top: 23px; } .bbdy{ width: 48.5%; float: right; } .bbdy .foot_nav{ display: flex; justify-content: space-between; flex-wrap: wrap; position: relative; } .bbdy .foot_nav:before{content: '';width: 100%;background-color: rgba(255, 255, 255, 0.2);height: 1px;position: absolute;top: 46px;} .dbnry{ float: right; margin-bottom: 2.8vw; } .dbnry .dbyqlj{ position: relative; } .dbnry .dbyqlj h3{ border: solid 1px rgba(255, 255, 255, 0.2); font-size: 14px; font-weight: normal; font-stretch: normal; line-height: 56px; letter-spacing: 0px; color: rgba(255, 255, 255, 0.4); padding-left: 16px; background: url(../images/dt.png) no-repeat 88%; width: 234px; height: 56px; } .dbnry .dbyqlj .ypljfl{ position: absolute; bottom: 56px; width: 100%; background-color: #fff; max-height: 300px; overflow: hidden; overflow-y: hidden; display: none; } .dbnry .dbyqlj .ypljfl a{ width: 100%; float: left; font-size: 14px; color: #333; line-height: 28px; padding: 2%; border-bottom: 1px solid #e3e3e3; } .bbdxx{ border-top: 1px solid #ccc; padding: 15px 0; font-size: 14px; font-weight: normal; font-stretch: normal; line-height: 28px; letter-spacing: 0px; color: #ffffff; opacity: 0.4; text-align: center; } .bbdxx a{color: #ffffff;} @media (max-width: 992px) { .bbdy{display: none;} .dbnry{display: none;} .bbdz{width: 100%;} .bbdxx{padding-bottom: 50px;} } .foot_nav li { text-align: left; } .foot_nav li a { font-size: 16px; color: rgba(255, 255, 255, 0.6); display: block; width: 100%; font-weight: 700; } .foot_nav li .x-nav-menu { width: 100%; margin-top: 53px; } .foot_nav li .x-nav-menu a { display: block; font-size: 14px; line-height: 2.5; font-weight: normal; color: #878787; } /*------------内页-------------------*/ .prodescription{border:1px solid #e5e5e5;background:#f9f9f9;line-height:24px;padding:10px;margin-bottom:15px;text-indent:20px;} .n_banner{width:100%;margin:0 auto;} .n_banner img{width:100%;margin:0 auto} .pf {width: 100%;height: 40px;position: relative;z-index: 999;} .pf-box {position: fixed;left: 0;bottom: 0;right: 0;height: 40px;display: flex;justify-content: center;align-items: center;background-color: #0e2f52;overflow: hidden;width:100vw;} .pf-box a {display: flex;justify-content: center;align-items: center;flex: 1;height: 40px;} .pf-box a div {max-width: 20%;} .pf-box a div img {width: 100%;} .pf-box a h3 {font-size: 12px;color: #fff;margin-left: 5px;white-space: nowrap;} .pf-box a.active {background-color: #0f67c5;} @media (max-width: 768px) { .n_banner{margin-top: 60px;} .x-banner{margin-top:60px} }