html { font-size: 62.5%; } body { font-family: helvetica neue, helvetica, arial, sans-serif; font-size: 14px; color: #000; margin: 0; padding: 0; } body, div, p, ul, li, h1 { box-sizing: border-box; margin: 0; padding: 0; } ul li { list-style: none; } a { text-decoration: none; color: #141414; } /* a:hover{ color:#fff; } */ #index-header { display: flex; justify-content: space-between; align-items: center; height: 64px; width: 1200px; margin: auto; } .header-left { display: flex; align-items: center; cursor: pointer; } .header-left>div:first-child { width: 106px; height: 36px; cursor: pointer; } .header-left>div:first-child>a { width: 100%; height: 100%; display: block; cursor: pointer; } .header-left>div:first-child img { width: 100%; height: 100%; cursor: pointer; } .header-left>div:nth-child(2) { margin-left: 20px; margin-right: 20px; width: 1px; height: 30px; background: #eeeeee; } .header-left div:last-child { font-size: 16px; /* margin-left: 2rem; */ /* font-weight: bod; */ /*cursor: default;*/ } .header-right { display: flex; align-items: center; } .header-right div:first-child { margin-right: 50px; display: flex; align-items: center; justify-content: center; } .header-right div:first-child { display: flex; align-items: center; } .header-right div:first-child input { outline: none; /* height: 1.6rem; */ padding-left: 1rem; color: #141414; font-size: 16px; border: none; } input::placeholder { color: #a1a1a1; ; } .header-right div:first-child img { width: 20px; height: 20px; } .header-right div:nth-child(2) { width: auto; background: #4e298c; text-align: center; line-height: 3.4rem; color: #fff; padding: 0 1rem; margin-right: 2.8rem; } .header-right div:nth-child(2) a { color: #fff; } .header-right div:nth-child(3) a { display: flex; align-items: center; } .header-right div:nth-child(3) span { font-size: 1.5rem; margin-left: 12px; } .header-right div:nth-child(3) img { width: 20px; height: 20px; } .wap { display: none; } .ck { position: relative; display: flex; justify-content: center; align-items: center; background: #4e298c; color: #fff; margin: auto; margin-top: 88px; width: 150px !important; height: 44px; cursor: pointer; } .img-none { display: none; } .manual>div:first-child>div:first-child { display: flex; align-items: center; } .manual>div:first-child>div:first-child img { width: 40px; } /* wap头 */ /* map 头 结束*/ .a.active { color: #4e298c; } .b.active { color: #4e298c; } .active { color: #4e298c; border-bottom: 0.1rem solid #4e298c; } .swiper-container1 { width: 100%; height: 100%; position: relative; overflow: hidden; } .swiper-zoom-container>canvas, .swiper-zoom-container>img, .swiper-zoom-container>svg { max-height: 100%; } .swiper-container-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet { width: 1.6rem; height: 0.4rem; border-radius: 1%; bottom: 10%; background-color: #fff; } .swiper-pagination-bullet-active { width: 2.8rem !important; height: 0.6rem !important; transition: 0.3s; } /* 资料手册 */ .manual { position: relative; width: 1200px; margin: auto; } .manual>div:first-child { display: flex; justify-content: start; align-items: center; margin-top: 80px; margin-bottom: 40px; } .manual>div:first-child a { margin-left: 4rem; margin-bottom: -1.5rem; padding-bottom: 0.5rem; font-size: 1.8rem; } .manual-title { font-size: 3.2rem; margin-left: 3rem; font-weight: 500; } /* 手册列表 */ .manual-list { width: 100%; margin: 0; padding: 0; display: flex; justify-content: start; flex-wrap: wrap; z-index: 10; /* margin-bottom:20px ; */ } .manual-list>li { font-size: 14px; margin-right: 2rem; margin-bottom: 1.4rem; color: #666666; line-height: 1em; } .manual-list>li a { color: #666666; } .li-active { color: #4e298c !important; } /* .manual-list>li:first-child{ color:#4e298c; } */ .tu-left { width: 576px !important; height: 460px; position: absolute; top: -150px; left: -42%; pointer-events: none; /* background: red; */ /* z-index: ; */ } .tu-left img { width: 100%; } .tu-right img { width: 100%; } .tu-right { position: absolute; right: -100px; bottom: -150px; /* background: red; */ width: 576px !important; height: 460px; pointer-events: none; } .wap { display: none; } /* 内容列表 */ .content-list { width: 100%; } #page { display: flex; justify-content: center; } #page>li { width: 3.4rem; height: 3.4rem; text-align: center; line-height: 3.4rem; } .pag { height: 100%; margin-bottom: 30px; /* overflow: hidden; */ } #yemian { z-index: 10; } .content-list>div { width: 100%; } .content-list>div>ul { width: 100%; display: flex; justify-content: start; flex-wrap: wrap; /* padding-top: 18px; */ /* padding-bottom:20px ; */ } .content-list>div>ul>li { width: 160px; box-sizing: border-box; margin-left: 48px; z-index: 10; margin-top: 10px; } .content-list>div>ul>li:first-child { margin-left: 0; } .content-list>div>ul>li:nth-child(7) { margin-left: 0; } .content-list>div>ul>li>div { position: relative; } .content-list>div>ul>li>div>a { width: 100%; display: block; margin-bottom: 34px; /* background: #000; */ } .content-list>div>ul>li>div>a>img { width: 100%; border-radius: 4px; box-shadow: 1px 10px 30px 0px rgba(0, 0, 0, 0.2); } .content-list>div>ul>li:hover div img { box-shadow: 1px 10px 30px 0px rgba(0, 0, 0, 0.3); } /* .content-list>div>ul>li:hover p{ width: 100%; position: absolute; height: 100%; top: 0; transition: 0.6s; border-radius: 6px; background: rgba(0,0,0,0.3); } */ /* .content-list>div>ul>li:hover p>a{ display: flex; align-items: flex-end; width: 100%; height: 100%; padding-bottom: 16px; box-sizing: border-box; font-size:12px ; } */ .content-list>div>ul>li:hover p>a>span { color: #4e2a8c; } .content-list>div>ul>li:hover div>a>img { background: rgba(0, 0, 0, 1); } .content-list>div>ul>li>div>p { font-size: 1.4rem; } .content-list>div>ul>li>div>p span { color: #333333; /*display: -webkit-box;*/ -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; text-align: start; } #zhishiqi { display: flex; justify-content: center; align-items: center; margin-bottom: 90px; } #zhishiqi span:last-child { margin-left: 15px; } #zhishiqi span:first-child { margin-right: 15px; } .ho { height: 0; } .sele { background-color: #4e298c; color: azure; } /* .swiper-zoom-container>div>ul{ width: 100%; display: flex; justify-content: space-between; } .swiper-zoom-container>div>ul>li{ width: 13.5%; padding:20px 24px 50px 24px; } .swiper-zoom-container>div>ul>li:first-child{ -left: 0; } .swiper-zoom-container>div>ul>li:last-child{ margin-right: 0; } .swiper-zoom-container>div>ul>li:hover{ margin:0; } .swiper-zoom-container>div>ul>li>div{ width: 100%; } .swiper-zoom-container>div>ul>li>div:hover{ width: 120%; height: 120%; transition: 0.7s; } .swiper-zoom-container>div>ul>li>div:hover>p{ opacity: 0; } .swiper-zoom-container>div>ul>li>div img{ width: 100%; } .swiper-zoom-container>div>ul>li>div p{ display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; text-align: start; } */ /* .append-buttons .swiper-pagination-customs{ display: block; width: 3.4rem; height: 3.4rem; text-align: center; line-height: 3.4rem; margin:0 10px 0 10px; } */ .d12 { display: flex; align-items: center; } .d12 img { width: 40px; } .demo { display: flex; justify-content: center; } .demo>ul { width: auto; display: flex; justify-content: center; } .demo>ul>li { width: 34px; height: 34px; text-align: center; line-height: 34px; } .swiper-pagination-customs-active { background: #4e298c; color: #ffffff; } .video-center { width: 100%; background: #f6f6f6; padding-bottom: 80px; position: relative; } .video-center>div:first-child, .video-center>div:nth-child(2) { max-width: 1200px; } .video-center .video-play { position: fixed; background: rgba(0, 0, 0, 0.5); z-index: 10; bottom: 0; top: 0; left: 0; right: 0; margin: auto; /* background:#f9f9f9; */ padding-top: 10px; display: flex; justify-content: center; align-items: center; } .video-center .video-play>div { position: relative; background: #fff; width: 713px; height: auto; border-radius: 4px; } .video-center .video-play.show { display: none; } .video-center .video-play span { font-size: 30px; color: rgba(153, 153, 153, 1); text-align: right; display: block; width: 100%; padding-right: 10px; box-sizing: border-box; line-height: 24px; cursor: pointer; position: absolute; top: 20px; } .video-center .video-play h1 { font-weight: 500; font-size: 20px; line-height: 60px; text-indent: 30px; } .video-center .video-play video { width: 100%; height: 430px; display: block; /* background: #000; */ } .video-center::before { content: ""; display: table; } .video-center>div { width: 100%; margin: auto; } .video-center>div:first-child { display: flex; justify-content: start; align-items: center; margin-top: 75px; margin-bottom: 40px; } .video-center>div:first-child a { margin-left: 4rem; margin-bottom: -1.5rem; font-size: 1.8rem; border-bottom: 1px solid #000; } .video-center-title { font-size: 3.2rem; margin-left: 30px; font-weight: 500; } .video-center-list { width: 100%; } .video-center-list::after { display: inline-table; content: ""; } .video-center-list>ul { width: 100%; display: flex; justify-content: space-between; padding: 0; flex-wrap: wrap; } .video-center-list>ul li { width: 270px; margin-bottom: 20px; } .video-center-list>ul li>a { display: block; width: 100%; height: 60%; } .video-center-list>ul li>a { position: relative; } .video-center-list>ul li>a>img:first-child { position: absolute; top: 40%; left: 40%; width: 46px; height: 46px; } .video-center-list>ul li a img:last-child { display: block; width: 100%; height: 100%; } .video-center-list>ul li div { background: #ffffff; padding: 2.3rem 2rem 2.8rem 2rem; display: flex; flex-flow: column; align-content: space-around; position: relative; height: 40%; } .video-center-list>ul li div p { color: #333334; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; text-align: start; } /* .video-center-list>ul li div>a{ position: absolute; bottom: 25px; padding-bottom: 2px; border-bottom: 1px solid #000; color:#333334; } */ .video-center-list>ul li>div>a { display: block; width: 100%; height: 100%; } .video-center-list>ul li:hover>div { background: #ffae26; color: #ffffff; transition: 0.5s; } .video-center-list>ul li:hover>div p { color: #fff; /* transition: 0.5s; */ } /* .video-center-list>ul li:hover>div>a{ color: #fff; border:1px solid #fff; padding:0.6rem 1.5rem 0.6rem 1.5rem; margin-bottom: -5px; width: 84px; height: 26px; box-sizing: border-box; font-size:14px; text-align: center; /* line-height: 100%; } */ .ck:hover { background: #592ca4; transition: 0.7s; } .ck a { width: 100%; height: 100%; position: absolute; top: 0; left: 0; text-align: center; padding-right: 20px; line-height: 100%; color: #fff; padding-right: 57px; padding-left: 30px; padding-top: 14px; padding-bottom: 14px; box-sizing: border-box; } .ck img { width: 13px; height: 13px; display: block; margin-left: 105px; line-height: 100%; } @media screen and (max-width:467px) { .ck a { line-height: 65%; } .pc { display: none !important; } .wap { display: block; } .wap-app-list { display: flex; align-items: center; } .img-none { display: inline-block; } .wap-header { width: 100%; display: flex; justify-content: space-between; align-items: center; padding: 11px 20px; } .video-play { padding-left: 5%; padding-right: 5%; } .video-play h1 { font-size: 14px !important; margin-bottom: 5px !important; margin-top: -20px !important; } .video-play span { font-size: 24px !important; } .wap-header-left { display: flex; align-items: center; } .wap-header-left div { width: 1px; height: 2rem; background: #eeeeee; margin-left: 10px; } .video-center .video-play>div { height: auto; } .wap-header-left img { width: 8rem; } .wap-header-left span { font-size: 12px; font-weight: 300; color: rgba(20, 20, 20, 1); margin-left: 10px; } .wap-header-right { display: flex; justify-content: space-between; align-items: center; } .wap-header-right a:first-child { width: auto; background: #4e298c; text-align: center; line-height: 24px; font-size: 12px; white-space: nowrap; color: #fff; padding: 0 5px; margin-right:5px; } .wap-header-right a:nth-child(2) { margin-right: 15px; line-height: 100%; } .wap-header-right a img { width: 15px; height: 15px; } .manual { width: 100% !important; position: relative; } .manual>div:first-child>div:first-child { display: flex; align-items: center; } .manual>div:first-child { padding-left: 20px; padding-right: 20px; margin-top: 30px !important; margin-bottom: 15px !important; justify-content: space-between !important; } .manual>div:first-child img { width: 8px; height: 5px; } .manual>div:first-child img:first-child { width: 20px !important; height: 20px; } .manual>div:first-child h1 { font-size: 15px; margin-left: 15px; } .manual>div:first-child a { font-size: 12px !important; margin-bottom: -5px !important; border: none; margin-left: 10px !important; margin-right: 5px; } .manual-list { width: 100%; flex-wrap: wrap; position: absolute; z-index: 10; /* background: rgba(0, 0, 0, 0.7); padding-bottom: 250px; */ box-sizing: border-box; box-shadow: 0px 30px 30px 0px rgba(0, 0, 0, 0.1); top: 26px; } .ul-div { height: 250px; overflow: scroll; } .manual-list-app.hide { display: none !important; } .manual-list-product.hide { display: none !important; } .manual-list>li:first-child { color: #000 !important; } .manual-list li { padding-left: 20px !important; padding-right: 20px !important; width: 100%; margin-bottom: 0 !important; line-height: 36px; font-size: 13px !important; background: #fff; } .wap-content-list { width: 100%; padding-left: 20px; padding-right: 20px; display: flex; flex-wrap: wrap; } .wap-content-list li { width: 30%; } .wap-content-list li:nth-child(3n - 1) { margin-left: 5%; margin-right: 5%; } .wap-content-list li img { width: 103px; margin-bottom: 11px; box-shadow: 0 0 10px 0 rgba(0, 0, 0, .3); } .wap-content-list li a p { font-size: 13px; margin-bottom: 30px; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; } .wap-zhishiqi { width: 100%; display: flex; justify-content: center; margin-bottom: 50px; } .wap-zhishiqi a { display: block; width: 90px; height: 36px; text-align: center; line-height: 36px; font-size: 14px; color: #999999; background: #eeeeee; margin: 0 10px; } .zhi-active { border: 1px solid #4e298c; color: #4e298c !important; background: #fff !important; } .video-center { width: 100%; padding-left: 20px; padding-right: 20px; padding-bottom: 60px !important; } .video-center>div { width: 100% !important; } .video-center>div:first-child { margin-top: 30px !important; display: flex; justify-content: space-between !important; } .video-center>div:first-child img { width: 20px; height: 20px; } .video-center-title { font-size: 15px !important; margin-left: 15px !important; } .video-center>div:first-child a { margin-bottom: 0 !important; } .video-center>div:first-child a { font-size: 12px !important; margin-left: 10px !important; } .wap-video-center-list { display: flex; justify-content: space-between; flex-wrap: wrap; } .wap-video-center-list li { width: 162.5px; background: #fff; position: relative; margin-bottom: 10px; } .wap-video-center-list li>div:first-child { width: 100%; position: relative; height: 94px; background-image: url(/uploads/image/primages/wappic_video.png); display: flex; justify-content: center; align-items: center; } .wap-video-center-list li>div:first-child img { width: 31px; height: 31px; margin-bottom: 10px; } .wap-video-center-list li>div:last-child { position: relative; padding: 14px 10px; height: 120px; } .wap-video-center-list li p { font-size: 13px; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; text-align: start; } .wap-video-center-list li a { position: absolute; bottom: 15px; border-bottom: 1px solid #000; } .video-center .ck { width: 150px !important; height: 36px !important; margin-top: 20px; } .video-center .ck a { font-size: 14px; } } @media screen and (max-width:415px) { .wap-video-center-list li { width: 180px; } } @media screen and (max-width:398px) { .wap-video-center-list li { width: 165px; } } @media screen and (max-width:375px) { .wap-video-center-list li { width: 162px; } } @media screen and (max-width:370px) { .wap-video-center-list li { width: 150px; } } @media screen and (max-width:340px) { .wap-video-center-list li { width: 260px; margin: auto; } .video-center>div:first-child a { margin-left: 5px; } .wap-header-left img { width: 6rem !important; } } @media screen and (max-width:1250px) { #index-header { width: 90%; } .manual { width: 90%; } .video-center { padding: 0 5%; } .content-list>div>ul>li { /* width: 24%; */ } .content-list>div>ul>li:nth-child(11) { margin-left: 0; } .content-list>div>ul>li:nth-child(6) { margin-left: 0; } .content-list>div>ul>li:nth-child(7) { margin-left: 48px; } } @media screen and (max-width:1020px) { .content-list>div>ul>li { width: 200px; } .header-right div:first-child { margin-right: 100px; } .manual-list>li { margin-bottom: 1.5rem; } } @media screen and (max-width:1119px) { .content-list>div>ul>li { width: 180px; } .content-list>div>ul>li:nth-child(5) { margin-left: 0; } .content-list>div>ul>li:nth-child(6) { margin-left: 48px; } .content-list>div>ul>li:nth-child(9) { margin-left: 0px; } .content-list>div>ul>li:nth-child(11) { margin-left: 48px; } } @media screen and (max-width:905px) { .content-list>div>ul>li { width: 32%; } .header-right div:first-child { margin-right: 50px; } .manual-list>li { margin-bottom: 1rem; } .video-play { width: 90% !important; height: 200px !important; } .video-play video { height: 200px !important; } .header-right div:first-child input { width: 100px; } } @media screen and (max-width:764px) { .swiper-container-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet { width: 0.8rem; height: 0.2rem; border-radius: 1%; bottom: 10%; background-color: #fff; } .swiper-pagination-bullet-active { width: 1.2rem !important; height: 0.3rem !important; transition: 0.3s; } #index-header { display: none; } .wap-header { display: block; display: flex; } .wap-header a{ white-space: nowrap; } .wap-header { width: 100%; display: flex; justify-content: space-between; align-items: center; padding: 11px; } .wap-header-left { display: flex; align-items: center; } .wap-header-left div { width: 1px; height: 2rem; background: #eeeeee; margin-left: 10px; } .wap-header-left img { width: 6rem; } .wap-header-left a { font-size: 13px; font-weight: 300; color: rgba(20, 20, 20, 1); margin-left: 10px; } .wap-header-right { display: flex; justify-content: space-between; align-items: center; } /* .wap-header-right a:first-child { width: 70px; height: 24px; background: #4e298c; text-align: center; line-height: 24px; font-size: 12px; color: #fff; margin-right: 17px; } */ .wap-header-right a:nth-child(2) { margin-right: 5px; line-height: 100%; } .wap-header-right a img { width: 15px; height: 15px; } .manual-title { font-size: 1.6rem; margin-left: 1rem; } .video-center-title { font-size: 1.6rem; margin-left: 15px; } .video-center>div:first-child a { font-size: 1rem; } .video-center-list>ul li { width: 45%; } .manual>div:first-child a { font-size: 0.8rem; } .content-list>div>ul>li { width: 33% !important; } #index-header { width: 670px; } .manual { width: 90%; } } @media screen and (max-width:470px) { .content-list>div>ul>li { width: 50% !important; } .ck a { line-height: 65%; } } @media screen and (max-width:976px) { .content-list>div>ul>li { width: 160px; } /* .content-list>div>ul>li:nth-child(4){ margin-left: 0px; } .content-list>div>ul>li:nth-child(4){ margin-left: 0px; } .content-list>div>ul>li:nth-child(4){ margin-left: 0px; } .content-list>div>ul>li:nth-child(4){ margin-left: 0px; } */ } @media screen and (max-width:888px) { .content-list>div>ul>li { width: 180px; } .content-list>div>ul>li:nth-child(4), .content-list>div>ul>li:nth-child(7), .content-list>div>ul>li:nth-child(10) { margin-left: 0px; } .content-list>div>ul>li:nth-child(5), .content-list>div>ul>li:nth-child(9) { margin-left: 48px; } } @media screen and (max-width:764px) { .content-list>div>ul>li:nth-child(3), .content-list>div>ul>li:nth-child(5), .content-list>div>ul>li:nth-child(9), .content-list>div>ul>li:nth-child(11) { margin-left: 0px; } .content-list>div>ul>li:nth-child(4), .content-list>div>ul>li:nth-child(10) { margin-left: 48px; } }