@charset "utf-8"; @import url('reset.css'); @import url('animate.min.css'); @import url('/public/plugins/font-awesome-4.7.0/css/font-awesome.min.css'); * { -webkit-box-sizing: border-box; box-sizing: border-box; } :root { --page-width: 1440px; --font-size: 14px; --font-color: #939393; --theme-color: #23a3d9; --hover-color: #23a3d9; --nav-height: 100px; --nav-son-color: #23a3d9; --p-line-height: 200%; --p-size: 16px; --p-color: #333; --font-color-hover: #23a3d9; } body { background-color: #fff; overflow: hidden; font-size: var(--font-size); } input { font-family: Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, 寰蒋闆呴粦, Arial, sans-serif; } img { max-width: 100%; } a { background: transparent; text-decoration: none; color: var(--p-color) } a:active, a:hover { outline: 0 } a:hover { text-decoration: none; color: var(--hover-color) } .textCenter { text-align: center; } .wrapper { width: var(--page-width); margin: 0 auto; text-align: left } .index .wrapper { width: var(--page-width); } .ov { overflow: hidden; } .ts { text-transform: uppercase } .mauto { margin: 0 auto } .pz { position: relative; z-index: 0 } .pa { position: absolute; z-index: 0 } .bz { box-sizing: border-box } .b { font-weight: bold } .i { font-style: italic } .hidden { display: none !important } .cb { clear: both } .tes { text-overflow: ellipsis; white-space: nowrap; } .mt20 { margin-top: 20px; } /*animation*/ @keyframes slideDown { 0% { top: 45px; opacity: 0; } to { top: 100px; opacity: 1; } } @-webkit-keyframes slideDown { 0% { top: 45px; opacity: 0; } to { top: 100px; opacity: 1; } } @keyframes headerDown { 0% { transform: translateY(-70%); } to { transform: translateY(0); } } .img img { transform: scale(1); } a:hover .img img { transform: scale(1.1, 1.1); } .flex { display: flex; display: -webkit-flex; } .flexJb { display: flex; display: -webkit-flex; justify-content: space-between; } .flexColumn { display: flex; display: -webkit-flex; flex-direction: column; } .flexAc { display: flex; display: -webkit-flex; align-items: center; } .flexCenter { display: flex; display: -webkit-flex; justify-content: center; align-items: center; } .flexWrap { display: flex; display: -webkit-flex; flex-wrap: wrap; } .flexRight { display: flex; display: -webkit-flex; justify-content: flex-end; } .ovd { overflow: hidden; } .db { display: block; } #app { overflow: hidden; } .wow { visibility: hidden; /* 鍒濆鐘舵€佷笉鍙 */ opacity: 0; /* 鍒濆鐘舵€佸畬鍏ㄩ€忔槑 */ } .wow.animate__animated { visibility: visible; /* 鍔ㄧ敾瑙﹀彂鏃跺彲瑙 */ opacity: 1; /* 鍔ㄧ敾瑙﹀彂鏃跺畬鍏ㄤ笉閫忔槑 */ } /*header*/ body { padding-top: 100px; } header { width: 100%; height: 100px; background-color: #fff; padding: 0 5%; position: fixed; z-index: 9999; top: 0; left: 0; overflow: visible; } .home header { background: #09132d; } header .logo { flex-grow: 0; flex-shrink: 0; margin-right: 50px; } header .logo, header .logo img { height: 48px; } .home header .logo, .home header .logo img { height: 48px; } header svg { cursor: pointer; } /*nav*/ nav { height: var(--nav-height); } /* nav.active { position: fixed; z-index: 999; top: 0; left: 0; -webkit-animation: headerDown .5s 1; -khtml-animation: headerDown .5s 1; animation-direction: alternate; box-shadow: 0 0 5px #666; } */ nav>ul { width: 100%; overflow: visible !important; margin: 0 auto; font-size: 0; } nav>ul>li { z-index: 9999999; height: var(--nav-height); margin-left: 80px; height: 100px; } nav>ul>li .a { display: inline-block; height: var(--nav-height); text-align: center; line-height: var(--nav-height); font-size: 18px; color: var(--p-color); width: 100%; height: 100px; } .home header nav>ul>li .a { color: #fff; } nav>ul>li .a:hover, nav>ul>li .a.active { color: var(--theme-color); } nav>ul>li>dl { overflow: hidden; display: none; position: absolute; z-index: 999; top: 100px; left: 50%; transform: translateX(-50%); width: 150px; background-color: rgba(255, 255, 255, .85); text-align: center; -webkit-animation: slideDown .3s 1; -khtml-animation: slideDown .3s 1; animation-direction: alternate } nav>ul>li:hover>dl { display: block; } nav dt { overflow: hidden; width: 100%; } nav dt a { overflow: hidden; display: block; width: 100%; text-align: center; padding: 10px 0; line-height: 25px; } nav dt a:link, nav dt a:visited { font-size: var(--font-size); color: #333 } nav dt a:hover { background-color: #0978bb; text-decoration: none; color: #fff } /*animation*/ @keyframes slideDown2 { 0% { top: 45px; opacity: 0; } to { top: 100px; opacity: 1; } } @-webkit-keyframes slideDown2 { 0% { top: 45px; opacity: 0; } to { top: 100px; opacity: 1; } } nav>ul>li .products-son-navs { left: 0; top: 100px; width: 100%; padding: 50px 0; background-color: rgba(255, 255, 255, .85); z-index: 999999; min-height: 390px; overflow: scroll; overflow-x: hidden; overflow-y: auto; display: none; -webkit-animation: slideDown2 0.5s 1; -khtml-animation: slideDown2 0.5s 1; animation-direction: alternate } nav>ul>li:hover .products-son-navs { display: block; } nav>ul>li .products-son-navs>ul>li {} nav>ul>li .products-son-navs>ul>li>.img { height: 56px; } nav>ul>li .products-son-navs>ul>li>.img>img { max-height: 100%; max-width: 100%; } nav>ul>li .products-son-navs>ul>li>.typename { margin-top: 19px; } nav>ul>li .products-son-navs>ul>li>.typename>a { line-height: 39px; font-size: 24px; color: #333; } nav>ul>li .products-son-navs>ul>li>.typename>a:hover { color: var(--theme-color); } nav>ul>li .products-son-navs>ul>li>ul { margin-top: 13px; width: 100%; } nav>ul>li .products-son-navs>ul>li>ul>li { width: 100%; text-align: left; } nav>ul>li .products-son-navs>ul>li>ul>li>a { height: 32px; display: inline-flex; align-items: center; padding-left: 10px; font-size: 16px; color: #333; } nav>ul>li .products-son-navs>ul>li>ul>li>a::before { content: ''; display: block; width: 4px; height: 4px; margin-right: 10px; background-color: #333; } nav>ul>li .products-son-navs>ul>li>ul>li>a:hover { color: var(--theme-color); } nav>ul>li .products-son-navs>ul>li>ul>li>a:hover::before { background-color: var(--theme-color); } /*swiper*/ .homeSwiper { z-index: 1; } .homeSwiper::after { content: ''; display: block; width: 20px; height: 34px; background: url(../images/icon/pointer.png) no-repeat; position: absolute; z-index: 9999999; bottom: 60px; left: 50%; transform: translateX(-50%); } .homeSwiper img { width: 100%; } .homeSwiper article { top: 20%; left: 0; width: 100%; } .homeSwiper article .title { font-weight: bold; font-size: 66px; color: #fff; line-height: 140%; } .homeSwiper article .des { margin-top: 25px; font-size: 32px; color: #fff; line-height: 46px; } .swiper-button-next, .swiper-button-prev { color: #fff !important; } .swiper-pagination-bullet-active { background-color: var(--font-color) !important; } .homeSwiper .swiper-pagination { display: flex; width: 100%; align-items: flex-start; justify-content: center; bottom: 25px !important; } .homeSwiper .swiper-pagination-bullet { background-color: #fff; opacity: 1; width: 15px; height: 15px; border: 1px solid transparent; border-radius: 50%; background: none !important; display: flex; align-items: center; justify-content: center; } .homeSwiper .swiper-pagination-bullet::after { content: ''; display: block; width: 5px; height: 5px; background-color: #fff; border-radius: 50%; } .homeSwiper .swiper-pagination-bullet-active { border-color: #fff; } /*other*/ .banner { width: 100%; } .banner img { display: block; width: 100%; } .banner article { left: 50%; top: 50%; transform: translate(-50%, -50%); width: 100%; } .banner article .title { line-height: 150%; font-size: 48px; color: #fff; } .banner article .intro { line-height: 250%; font-size: 32px; color: #fff; } /*main*/ main .about { padding-top: 107px; } main .about .title { font-size: 48px; font-weight: bold; color: #333; line-height: 73px; } main .about .title2 { line-height: 35px; font-size: 18px; color: #999; } main .about .title2::after { content: ''; display: block; margin: 17px 0 0 1px; width: 48px; height: 2px; background-color: var(--theme-color); } main .about .intro { margin-top: 30px; margin-bottom: 100px; line-height: 35px; font-size: 18px; color: #333; } .contact-info { margin-top: 60px; padding-bottom: 30px; border-bottom: 1px solid #ddd; margin-bottom: 61px; } .contact-info li { width: 50%; height: 52px; margin-bottom: 23px; font-size: 18px; color: #000; } .contact-info li .icon { width: 52px; height: 52px; border-radius: 50%; border: 1px solid #ddd; margin-right: 23px; background-repeat: no-repeat; background-position: center; } .contact-info li:first-child .icon { background-image: url(../images/icon/email.png); } .contact-info li:nth-child(2) .icon { background-image: url(../images/icon/ask.png); } .contact-info li:nth-child(3) .icon { background-image: url(../images/icon/phone.png); } .contact-info li:nth-child(4) .icon { background-image: url(../images/icon/add.png); } /*sidebar*/ .sidebar li { margin-left: 28px; } .sidebar li a { font-size: 16px; color: #333; display: inline-flex; padding: 0 18px; line-height: 56px; border-bottom: 4px solid transparent; } .sidebar li.active a, .sidebar li a:hover { color: var(--theme-color); border-color: var(--theme-color); } .main .r { width: 960px; } /*main*/ main .typename { line-height: 52px; font-size: 36px; } .detail { background-color: #fff; padding: 35px 50px; } .introduction { padding: 30px 0; text-align: justify; line-height: var(--p-line-height); font-size: var(--p-size); color: var(--p-color); } .introduction.nmt { margin-top: 0; padding: 0; } .introduction div, .introduction p { font-size: var(--p-size); color: var(--p-color); } .introduction img { max-width: 100% } .articleImg { width: 100%; margin: 0 0 0 0; text-align: center } .articleImg img { display: block; max-width: 100%; margin: 0 auto } .articleImg2 { width: 100%; margin: 0 0 22px 0; text-align: center } .articleImg2 img { display: block; max-width: 100%; margin: 0 auto } .articleBody { width: 400px; margin: 20px 0 } .articleTitle { overflow: hidden; width: 100%; text-align: center; line-height: 32px; font-size: 20px; color: var(--p-color); margin-bottom: 8px; } .articleTitle2 { overflow: hidden; width: 100%; text-align: center; line-height: 32px; font-size: var(--font-size); color: var(--background-color); font-weight: bold; margin-bottom: 8px; } .articlePhoto { margin-top: 18px; margin-bottom: 16px; } .articleTime { width: 100%; margin-top: 8px; margin-bottom: 15px; text-align: center; line-height: 21px; font-size: 18px; color: #262626; padding-bottom: 22px; } .articleDes { text-align: center; line-height: 28px; font-size: 14px; color: #42403f } .articlePages { margin-top: 20px; padding-top: 10px; border-top: 1px dashed #969797 } .articlePages div { width: 50%; font-size: 16px; color: #666 } /*honor list*/ .honor-list { margin-top: 120px; } .honor-list li { width: calc((100% - 46px) / 3); margin-right: 23px; margin-bottom: 53px; } .honor-list li:nth-child(3n) { margin-right: 0; } .honor-list li .img { width: 100%; height: 262px; background: url(../images/bg/honor.jpg) no-repeat; } .honor-list li .img img { width: 264px; height: 191px; } .honor-list li .img img { border: 1px solid #fff; } .honor-list li .title { width: 100%; height: 41px; line-height: 41px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 24px; color: #333; margin-top: 20px; } .honor-list li a:hover .title { color: var(--theme-color); } /*news list*/ .news-list { margin-top: 120px; margin-bottom: 70px; } .news-list li { width: calc((100% - 146px) / 3); margin-right: 73px; margin-bottom: 36px; } .news-list li:nth-child(3n) { margin-right: 0; } .news-list li .img, .news-list li .img img { width: 100%; } .news-list li .title { margin-top: 25px; width: 100%; height: 80px; line-height: 40px; font-size: 22px; color: #333; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; /* 闄愬埗鏄剧ず鐨勮鏁 */ overflow: hidden; text-overflow: ellipsis; /* 瓒呭嚭閮ㄥ垎鏄剧ず鐪佺暐鍙 */ } .news-list li .des { margin-top: 12px; line-height: 28px; font-size: 14px; color: #888; } .news-list li a:hover .title { color: #004ea2; } .news-list li .addtime { width: 100%; height: 57px; margin-top: 27px; } .news-list li .arrow-right { font-size: 18px; color: #004ea2; margin-left: -20px; } .news-list li .time { font-size: 14px; color: #888; margin-left: 10px; } .news-list li .line { width: 255px; height: 1px; background-color: transparent; } .news-list li .num { font-size: 48px; color: #f3f3f6; font-weight: bold; } .news-list li:hover .line { background-color: #004ea2; } .news-list li:hover .arrow-right { margin-left: 0; } .news-list li:hover .num { color: #004ea2; } /*鍒嗛〉*/ .pages { padding: 20px 0 15px 0; text-align: right; } .pages li { display: inline; } .pages li.active a { background-color: var(--theme-color); color: #fff; } .short-film.main .pages li.active a { background-color: #84bb25; } .market.main .pages li.active a { background-color: #029fd1; } .sanxiao.main .pages li.active a { background-color: #f5a425; } .pages a, .pages em { display: inline-block; height: 28px; margin-right: 5px; padding: 0 8px; background: #f7f7f7; border: 1px solid #f7f7f7; line-height: 28px; font-size: 14px; color: #666 } .pages span { display: inline-block; height: 28px; margin-right: 5px; padding: 0 8px; line-height: 28px; font-size: 14px; color: #666 } .pages span.disabled { background: var(--color); color: #666 } .pages em { background: var(--color); color: #fff; font-style: normal; } .pages span.current { background: var(--theme-color); color: #fff; } /*鍦ㄧ嚎鐣欒█*/ .guestbook { padding: 92px 0 390px 0; background: url(../images/bg/guestbook-page1.jpg) no-repeat center top; } .guestbook.guestbook2 { background-image: url(../images/bg/guestbook2-main.png); background-position: left top; } .guestbook .title2 { margin-top: 40px; line-height: 36px; font-size: 18px; color: #333; } .guestbook ul { margin: 0 auto; margin-top: 40px; width: 708px; } .guestbook li { margin-bottom: 30px; } .guestbook li.no-margin { margin-bottom: 0; } .guestbook li.text { margin-bottom: 0; line-height: 43px; font-size: 14px; color: #808080; padding: 0 20px; } .guestbook .input { width: 342px; height: 60px; background: #fff; border: 1px solid #e6e6e6; padding: 0 19px; font-size: 14px; color: #333; } .guestbook .select { width: 100%; height: 60px; background: #fff; border: 1px solid #e6e6e6; padding: 0 19px; font-size: 14px; color: #999; } .guestbook .textarea { width: 100%; height: 144px; background: #fff; border: 1px solid #e6e6e6; padding: 10px 19px; font-size: 14px; color: #333; } .guestbook .button { width: 100%; height: 60px; background: var(--theme-color); border: 0; cursor: pointer; font-size: 24px; color: #fff; font-family: '寰蒋闆呴粦'; } .guestbook.guestbook2 .button { background: #a476e9; } .page .title .text { line-height: 57px; font-size: 42px; color: #333; } .page .title::after { content: ''; margin-top: 31px; display: block; width: 48px; height: 4px; background-color: var(--theme-color); } /*home*/ .home-swiper, .home-swiper img { width: 100%; display: block; } .home-swiper .title { top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 48px; color: #fff; white-space: nowrap; } .swiper-pagination { display: flex; justify-content: center; width: 100%; } .swiper-pagination .swiper-pagination-bullet { width: 15px; height: 15px; background: none !important; opacity: 1; border: 1px solid transparent; display: flex; align-items: center; justify-content: center; } .swiper-pagination .swiper-pagination-bullet::after { content: ''; display: block; width: 5px; height: 5px; background-color: #fff; border-radius: 50%; } .swiper-pagination .swiper-pagination-bullet-active { border-color: #fff; } .home .page-title { line-height: 58px; font-size: 48px; color: #333; } .home .page1 { margin-top: 88px; } .home .page1 .page-title { margin-bottom: 38px; } .home .page2 { width: 100%; height: 925px; background-repeat: no-repeat; background-position: center bottom; background-size: cover; } .home .page2 .page-title { color: #fff; } .home .page2 .wrapper { height: 925px; padding: 86px 0 0 0; } .home .page2 article { margin-top: 80px; } .home .page2 article .title { line-height: 50px; font-size: 36px; font-weight: bold; color: #fff; } .home .page2 article .des { margin-top: 28px; line-height: 36px; font-size: 18px; color: #fff; } .home .page2 article a { margin-top: 30px; width: 171px; height: 56px; border: 1px solid #fff; border-radius: 0 15px 0 15px; font-size: 14px; color: #fff; } .home .page2 article a i { margin-left: 10px; font-size: 25px; } .home .page2 article a:hover { background-color: #20439d; border-color: #20439d; } .home .page2 .list { width: 100%; bottom: 85px; left: 0; } .home .page2 .list li { width: 160px; } .home .page2 .list li .image-wrap { width: 120px; height: 120px; background-color: #20439d; border-radius: 50%; font-size: 0; line-height: 120px; text-align: center; } .home .page2 .list li .image-wrap img { max-width: 90%; max-height: 90%; vertical-align: middle; } .home .page2 .list li .title { font-size: 20px; color: #fff; line-height: 35px; margin-top: 10px; } .home .page2 .list li:hover .title { opacity: .75; } .home .page3 { width: 100%; height: 888px; background: url(../images/bg/home-page3.jpg) no-repeat center top #fafafa; padding: 88px 0 96px 0; } .home .page3 .c { margin-top: 37px; } .home .page3 .c .topnews { width: 697px; } .home .page3 .c .topnews .img, .home .page3 .c .topnews img { display: block; width: 100%; } .home .page3 .c .topnews .title { margin-top: 22px; width: 100%; height: 38px; line-height: 38px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 24px; color: #333; } .home .page3 .c .topnews .des { margin-top: 9px; line-height: 36px; font-size: 16px; color: #888; } .home .page3 .c .topnews .details { margin-top: 16px; height: 23px; font-size: 14px; color: #898989; } .home .page3 .c .topnews .details i { color: #205aaa; font-size: 20px; margin-left: 12px; } .home .page3 .c .topnews:hover .title { color: #205aaa; } .home .page3 .c .topnews:hover .details { color: #205aaa; margin-left: 10px; } .home .page3 .c .list { width: 700px; } .home .page3 .c .list li { padding: 7px 0 61px 0; } .home .page3 .c .list li::after { content: ''; display: block; width: 1px; height: 100%; background-color: #f1f1f1; position: absolute; z-index: 0; left: 69px; top: 0; } .home .page3 .c .list li::before { content: ''; display: block; width: 5px; height: 5px; background-color: #868686; border-radius: 50%; position: absolute; z-index: 1; top: 26px; left: 67px; } .home .page3 .c .list li .time { width: 64px; } .home .page3 .c .list li .time .m { line-height: 29px; font-size: 16px; color: #333; } .home .page3 .c .list li .time .md { margin-top: 6px; line-height: 30px; font-size: 14px; color: #333; } .home .page3 .c .list li article { margin-left: 34px; flex: 1; } .home .page3 .c .list li article .title { width: 100%; height: 29px; line-height: 29px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 18px; color: #333; } .home .page3 .c .list li article .des { margin-top: 6px; line-height: 30px; font-size: 14px; color: #888; } .home .page3 .c .list li:hover .time .m, .home .page3 .c .list li:hover .time .md, .home .page3 .c .list li:hover article .title, .home .page3 .c .list li:hover article .des { color: #205aaa; } /*positions*/ .positions-wrap { height: 60px; background-color: #f7f7f7; } .positions li:first-child { font-size: 0; } .positions span { margin: 0 18px; } /*forum*/ .forum { padding: 87px 0; background: url(../images/bg/forum.jpg) no-repeat center top #f9f9f9; } .forum .positions { margin-top: 23px; } .forum-list li { width: 100%; } .forum-list li a { width: 100%; border-bottom: 1px solid #be8a30; font-size: 16px; padding: 10px 0; line-height: 35px; } .market.main .forum-list li a { border-color: #029fd1; } /*footer*/ footer { padding: 85px 3% 0 3%; background-color: #25252c; } footer .footer-top { padding-bottom: 55px; } footer .footer-top .l .logo { margin-bottom: 18px; display: block; } footer .footer-top .l .title { line-height: 27px; font-size: 16px; color: #fff; } footer .footer-top .l .tel { margin-bottom: 24px; font-size: 30px; color: #fff; font-weight: bold; line-height: 45px; } footer .footer-top .l .address { line-height: 27px; font-size: 16px; color: #bdbdbe; } footer .footer-top .l .address1 { margin-top: 9px; } footer .footer-top .footer-nav li { margin-left: 120px; } footer .footer-top .footer-nav li a { color: #fff; line-height: 33px; font-size: 18px; } footer .footer-top .footer-nav li a:hover { color: var(--theme-color); } footer .footer-top .footer-nav li dl { margin-top: 23px; } footer .footer-top .footer-nav li dl a { font-size: 16px; } footer .footer-bottom { padding-top: 51px; padding-bottom: 25px; border-top: 1px solid #515156; } footer .footer-bottom .l ul { margin-bottom: 20px; } footer .footer-bottom .l ul li { line-height: 32px; } footer .footer-bottom .l ul li::after { content: ''; display: block; width: 1px; height: 16px; background-color: #67676c; margin-left: 31px; margin-right: 31px; } footer .footer-bottom .l ul li:last-child::after { display: none; } footer .footer-bottom .l ul li a { color: #fff; font-size: 16px; } footer .footer-bottom .l ul li a:hover { color: var(--theme-color); } footer .footer-bottom .l .copyright { font-size: 14px; color: #fff; line-height: 33px; } footer .footer-bottom .follow-us .title { margin-top: 7px; font-size: 14px; color: #fff; line-height: 33px; text-align: center; } /*image-list*/ .image-list { margin-top: 33px; padding-bottom: 32px; border-bottom: 2px solid var(--theme-color); } .short-film.main .image-list { border-color: #84bb25; } .news.main .image-list { border-color: #be7a30; } .sanxiao.main .image-list { border-color: #f5a425; } .image-list li { width: calc((100% - 44px * 3) / 4); margin-right: 44px; margin-bottom: 23px; } .image-list li:nth-child(4n) { margin-right: 0; } .image-list li .text { width: 100%; height: 47px; line-height: 47px; text-align: left; font-size: 16px; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; } /*news-detail*/ .news-detail { padding: 92px 0; } .news-detail .title { line-height: 64px; font-size: 36px; } .news-detail .date { margin-top: 17px; height: 33px; font-size: 18px; color: #ccc; } .news-detail .date svg { margin-right: 9px; } .news-detail .des { margin-top: 34px; padding: 25px; background-color: #f7f7f7; line-height: 180%; font-size: 16px; color: #808080; } .news-detail .share { margin-top: 35px; } .news-detail .share .title { font-size: 14px; color: #808080; } .news-detail .share .weixin, .news-detail .share .sina { width: 50px; height: 50px; border-radius: 50%; border: 1px solid #e9e9e9; margin-left: 10px; cursor: pointer; } .news-detail .prev-next { padding-top: 38px; border-top: 4px solid #be7a30; } .news-detail .prev-next a { width: 200px; height: 60px; background-color: #fff; border: 1px solid #e6e6e6; font-size: 18px; color: #808080; } .news-detail .prev-next a:hover { background-color: var(--theme-color); border-color: var(--theme-color); color: #fff; } /*products list*/ .products-top-categories { margin-top: 65px; padding: 33px 30px 36px 30px; background-color: #f9f9f9; } .products-top-categories .name { line-height: 37px; padding-bottom: 12px; border-bottom: 1px solid #e2e2e2; font-size: 24px; color: #333333; } .products-top-categories .list { margin-top: 19px; } .products-top-categories .list li { width: calc((100% - 86px * 4) / 5); margin-right: 86px; } .products-top-categories .list li:nth-child(5n) { margin-right: 0; } .products-top-categories .list li .img { width: 100%; height: 125px; background: url(../images/bg/image-wrap.png) no-repeat; background-size: cover; text-align: center; line-height: 125px; font-size: 0; border-radius: 8px; border: 1px solid transparent; } .products-top-categories .list li .img img { max-width: 85%; max-height: 80%; vertical-align: middle; } .products-top-categories .list li .title { margin-top: 15px; line-height: 31px; font-size: 18px; color: #333; } .products-top-categories .list li:hover .title, .products-top-categories .list li.active .title { color: #23a3d9; } .products-top-categories .list li:hover .img, .products-top-categories .list li.active .img { border-color: #23a3d9; } .products-top-categories2 { margin-top: 90px; padding: 33px 30px 36px 30px; background-color: #f9f9f9; } .products-top-categories2 .name { line-height: 37px; padding-bottom: 12px; border-bottom: 1px solid #e2e2e2; font-size: 24px; color: #333333; } .products-top-categories2 .list { margin-top: 19px; } .products-top-categories2 .list li { width: calc((100% - 86px * 2) / 3); margin-right: 86px; margin-bottom: 30px; } .products-top-categories2 .list li:nth-child(3n) { margin-right: 0; } .products-top-categories2 .list li .img { width: 100%; height: 260px; background: url(../images/bg/image-wrap.png) no-repeat; background-size: cover; text-align: center; line-height: 260px; font-size: 0; border: 1px solid transparent; border-radius: 8px; } .products-top-categories2 .list li .img img { max-width: 85%; max-height: 80%; vertical-align: middle; } .products-top-categories2 .list li .title { margin-top: 15px; line-height: 31px; font-size: 18px; color: #333; } .products-top-categories2 .list li:hover .title, .products-top-categories2 .list li.active .title { color: #23a3d9; } .products-top-categories2 .list li:hover .img, .products-top-categories2 .list li.active .img { border-color: #23a3d9; } .products-list li { width: calc((100% - 148px) / 3); margin-right: 74px; margin-bottom: 50px; } .products-list li:nth-child(3n) { margin-right: 0; } .products-list li .image-wrap { width: 100%; height: 260px; background: url(../images/bg/image-wrap.png) no-repeat; background-size: cover; } .products-list li:hover .image-wrap img { transform: scale(1.1); } .products-list li .title { margin-top: 26px; height: 39px; line-height: 39px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 22px; color: #23a3d9; } .products-list li .des { line-height: 28px; font-size: 14px; color: #888; } .products-search { margin-top: 50px; } .products-search .input { width: 598px; height: 50px; border: 1px solid #ddd; border-radius: 0; padding-left: 20px; } .products-search .input input { width: 559px; height: 50px; background: none; border: 0; } .products-search button { width: 100px; height: 50px; border: 0; background: #23a3d9; font-size: 16px; color: #fff; cursor: pointer; font-family: '寰蒋闆呴粦'; } .products-screening { margin-top: 7px; margin-bottom: 50px; } .products-screening .filter-boxs { border-bottom: 1px solid #ddd; padding: 30px 0; line-height: 43px; font-size: 18px; color: #333; } .products-screening .filter-boxs a { display: inline-flex; margin-right: 62px; } .products-screening .filter-boxs a b { font-weight: normal; } .products-screening .filter-boxs a .checkbox { margin-right: 6px; } .products-screening .filter-bt { margin-top: 20px; } .products-detail { margin-top: 66px; } .products-detail-top { border: 1px solid #f6f6f6; background-color: #fcfcfc; } .products-detail-top .album { width: 694px; background-color: #fff; border: 1px solid #eee; } .products-detail-top .album .big { width: 100%; height: 430px; border-bottom: 1px solid #eee; } .products-detail-top .album .swiper-slide { border: 1px solid #eee; } .products-detail-top .album .swiper-slide.active { border-color: #1583c8; } .products-detail-top .album .swiper-button-next::after, .products-detail-top .album .swiper-button-prev::after { font-size: 18px; } .products-detail-top article { width: 715px; padding: 72px 35px; } .products-detail-top article h1 { line-height: 52px; font-size: 32px; color: #000; padding-bottom: 30px; border-bottom: 1px solid #e4e4e4; } .products-detail-top article .des { margin-top: 28px; line-height: 36px; font-size: 16px; color: #666; } .products-detail-bottom { margin: 82px 0; } .products-detail-bottom .tabs { width: 100%; height: 80px; background-color: #f9f9f9; } .products-detail-bottom .tabs li { display: inline-flex; padding: 0 35px; line-height: 80px; font-size: 24px; color: #333; cursor: pointer; } .products-detail-bottom .tabs li.active { background-color: #1583c8; color: #fff; } .products-detail-bottom .content { margin-top: 40px; line-height: 180%; font-size: 18px; color: #333; } /*solution-list*/ .solution-list { margin: 103px 0; } .solution-list li { margin-bottom: 60px; padding: 50px; } .solution-list li .img, .solution-list li .img img { width: 570px; } .solution-list li article { width: 570px; } .solution-list li article .title { margin-top: 52px; line-height: 60px; font-size: 36px; color: #000; } .solution-list li article .des { margin-top: 6px; line-height: 31px; font-size: 16px; color: #666; } .solution-list li article a { margin-top: 31px; display: inline-flex; line-height: 54px; padding: 0 45px; background-color: #23a3d9; font-size: 18px; color: #fff; } /* 娣诲姞鎼滅储妗嗘牱寮 */ .search-popup { position: fixed; top: 100px; /* header楂樺害 */ left: 0; width: 100%; background: #fff; padding: 15px; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); z-index: 999; display: none; } .search-popup.active { display: block; } .search-popup .search-container { max-width: 1200px; margin: 0 auto; display: flex; align-items: center; } .search-popup input { flex: 1; padding: 10px 15px; border: 1px solid #ddd; border-radius: 4px; font-size: 16px; } .search-popup button { margin-left: 10px; padding: 10px 20px; background: var(--theme-color); color: white; border: none; border-radius: 4px; cursor: pointer; } .history { margin-top: 89px; background-color: #fff; } .history, .history * { user-select: none; } .history .wrap { margin-top: 23px; background: url(../images/bg/map.jpg) 39vw top no-repeat; background-size: 60vw auto; padding-bottom: 330px; } .history .swiper { margin-top: 171px; } .history .swiper .swiper-slide { height: 276px; } .history .swiper .swiper-slide::after { content: ''; display: block; width: 100%; height: 1px; background-color: var(--theme-color); position: absolute; z-index: -1; left: 0; top: 50%; } .history .swiper .swiper-slide .atitle { font-size: 80px; color: #222; height: 95px; } .history .swiper .swiper-slide.swiper-slide-active .atitle { color: var(--theme-color); } .history .swiper .swiper-slide.even .atitle { transform: translateY(121px); } .history .swiper .swiper-slide .dot { width: 25px; height: 25px; background-color: #fff; position: absolute; z-index: 0; left: 50%; top: 50%; transform: translate(-50%, -50%); border-radius: 50%; box-shadow: 0 0 10px #ccc; } .history .swiper .swiper-slide .dot::after { content: ''; display: block; width: 10px; height: 10px; background-color: #666; border-radius: 50%; } .history .swiper .swiper-slide article { padding: 30px 0; } .history .swiper .swiper-slide .content { left: 50%; background-color: #fff; box-shadow: 0 0 10px #ccc; border-radius: 8px; padding: 10px; line-height: 170%; font-size: 16px; color: #222; width: 90%; transform: translateX(-50%); top: 160px; height: auto; opacity: 0; max-height: 100px; overflow: scroll; overflow-x: hidden; overflow-y: auto; } .history .swiper .swiper-slide.even .content { top: 0; bottom: inherit; } .history .swiper .swiper-slide:hover .content { opacity: 1; } .history .swiper .swiper-slide.swiper-slide-active .dot::after { background-color: var(--theme-color); } .history .buttons { margin-top: 30px; } .history .swiper-button-next, .history .swiper-button-prev { position: static; width: 170px; height: 40px; background-color: #e6e6e6; margin-top: 0; } .history .swiper-button-next { background-color: var(--theme-color); } .history .swiper-button-next::after, .history .swiper-button-prev::after { display: none; } .history .swiper-button-next svg, .history .swiper-button-prev svg { height: 35px; } .history .swiper-button-prev svg { transform: rotate(180deg); } /*涓嬭浇涓績*/ .download-list { margin: 50px 0 0; } .download-list li a { width: 100%; height: 90px; background: #fff; border: 1px solid #e8edf0; margin-bottom: 23px; padding: 0 40px; } .download-list li a:hover { background-color: #1583c8; } .download-list li .num { display: inline-flex; padding-right: 27px; line-height: 24px; border-right: 1px solid #333; font-size: 24px; color: #333; margin-right: 31px; } .download-list li .title { font-size: 16px; color: #333; } .download-list li a:hover .num, .download-list li a:hover .title { color: #fff; } .download-list li a:hover .num { border-color: #449cd3; } .nav, .leftNav { display: none; } #productsSwiper .swiper-button-next, #productsSwiper .swiper-button-prev { color: #1583c8 !important; } @media (max-width: 1500px) { :root { --page-width: 1340px; } .home-swiper .title, .home .page-title { font-size: 36px; } .home .page3 .c .topnews { width: 600px; } .home .page3 .c .topnews .title { font-size: 20px; } footer .footer-top .footer-nav li { margin-left: 70px; } } @media (max-width: 1400px) { :root { --page-width: 1240px; } .home-swiper .title, .home .page-title { font-size: 32px; } .home .page3 .c .topnews { width: 500px; } .home .page3 .c .topnews .title { font-size: 18px; } footer .footer-top .footer-nav li { margin-left: 60px; } } @media (max-width: 1300px) { :root { --page-width: 1140px; } .home-swiper .title, .home .page-title { font-size: 28px; } .home .page3 .c .topnews { width: 540px; } .home .page3 .c .topnews .title { font-size: 16px; } footer .footer-top .footer-nav li { margin-left: 45px; } .home .page3 .c .list { width: 550px; } .solution-list li .img, .solution-list li .img img { width: 530px; } .products-top-categories .list li { width: calc((100% - 56px * 4) / 5); margin-right: 56px; } .products-top-categories .list li .title, .products-screening .filter-boxs { font-size: 16px; } .products-list li .title { font-size: 20px; } .home .page3 { padding: 80px 0; height: auto; } .home .page2 article .title { font-size: 30px; } footer .footer-top .footer-nav li dl a { font-size: 13px; } } @media (max-width: 1200px) { :root { --page-width: 1140px; } .home-swiper .title, .home .page-title { font-size: 32px; } .home .page3 .c .topnews { width: 530px; } .home .page3 .c .topnews .title { font-size: 18px; } footer .footer-top .footer-nav li { margin-left: 30px; } footer .footer-top .footer-nav li a { font-size: 14px; } footer .footer-top .footer-nav li dl a { font-size: 12px; } footer .footer-top .l .address { font-size: 12px; } .solution-list li .img, .solution-list li .img img { width: 500px; } main .typename { font-size: 30px; } main .about .intro { font-size: 16px; } } @media (max-width: 1100px) { :root { --page-width: 1040px; } .home-swiper .title, .home .page-title { font-size: 28px; } .home .page3 .c .topnews { width: 430px; } .home .page3 .c .topnews .title { font-size: 16px; } footer .footer-top .footer-nav li { margin-left: 30px; } footer .footer-top .footer-nav li dl a { font-size: 14px; } .solution-list li .img, .solution-list li .img img { width: 450px; } .solution-list li article { width: 350px; } .solution-list li article .title { margin-top: 0; } } @media (max-width: 1000px) { :root { --page-width: 950px; } .home-swiper .title, .home .page-title { font-size: 28px; } .home .page3 .c .topnews { width: 350px; } .home .page3 .c .topnews .title { font-size: 16px; } footer .footer-top .footer-nav li { margin-left: 30px; } footer .footer-top .footer-nav li dl a { font-size: 14px; } } @media (max-width: 768px) { :root { --page-width: 100vw; } header { padding: 0 2%; } .banner img { width: 100%; height: 30vh; object-fit: cover; } .banner article { padding: 0 2%; } .banner article .title { font-size: 16px; margin-bottom: 2vw; } .banner article .intro { line-height: 150%; font-size: 14px; text-align: center; } .page .title .text { line-height: 170%; font-size: 20px; } .page .title::after { margin-top: 2vw; } footer { padding: 30px 2%; } footer .copyright { padding-top: 0; } header nav { display: none; } .nav { display: block; width: .45rem; height: .26rem; background: url(../images/icon/headerNav.png) no-repeat; background-size: 100%; border: 0; margin-right: .3rem; } .leftNav { display: block; position: fixed; width: 50%; max-width: 400px; height: 100vh; background: var(--theme-color); z-index: 99999 !important; top: 0; left: 0; transform: translateX(-100%); transition: all .6s; } .leftNav.hide { transform: translateX(-100%); } .leftNav.active { transform: translateX(0); } .leftNav li { width: 100%; min-height: .6rem; line-height: .6rem; border-bottom: 1px solid #fff; padding: 0 .1rem; font-size: .24rem; color: #fff; } .leftNav li a { text-decoration: none; color: #fff; display: block; height: .6rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .22rem; } .leftNav .angle { width: .3rem; height: .2rem; } .leftNav .angle i { font-size: .22rem; } .leftNav .angle.active i { transform: rotate(90deg); } .leftNav li.son { overflow: hidden; padding: 0 .4rem; } .shadow { position: fixed; width: 100vw; height: 100vh; overflow: hidden; background-color: rgba(0, 0, 0, 0.5); z-index: 99999 !important; top: 0; left: 0; display: none; } .shadow.active { display: block; animation: shadowShow .5s 1; } header .logo, header .logo img { height: .8rem; } .homeSwiper article .title { font-size: 18px; } .homeSwiper article .des { font-size: 16px; } .homeSwiper img { height: 50vh; object-fit: cover; } .homeSwiper article { padding: 0 3vw; overflow: hidden; width: 100%; } .guestbook { padding: .6rem 0; } .guestbook .title2 { line-height: 180%; font-size: .26rem; margin-top: .4rem; } .guestbook ul { width: 100%; } .guestbook ul li { flex-direction: column; margin-top: 0; margin-bottom: 0; } .guestbook .input, .guestbook .select, .guestbook .textarea { width: 100%; margin-bottom: .2rem; } .guestbook .button { margin-top: .2rem; height: .6rem; font-size: .2rem; } .guestbook li.text { line-height: 180%; font-size: .24rem; } .home .page1 { height: auto; } .home .page1 .search { margin-top: 1.3rem; padding: .3rem; } .home .page1 .search .button { flex-grow: 0; flex-shrink: 0; width: 100px; } .home .page1 .search .input { flex: 1; margin-right: .44rem; } .home .page1 .list { margin-top: .6rem; } .home .page1 .list li { width: calc((100% - .4rem) / 2); margin-right: .4rem; } .home .page1 .list li:nth-child(even) { margin-right: 0; } .home .page1 .list li .img { width: 100%; } .home .page2, .home .page3 { padding: 0 2%; height: auto; } .home .page2 .title, .home .page3 .title { font-size: .36rem; flex-grow: 0; flex-shrink: 0; } .home .page2 .list, .home .page3 .c { margin: 1rem 0 0 .4rem; flex-grow: 0; flex-shrink: 0; flex: 1; } .home .page2 .list li { width: calc((100% - .4rem) / 2); margin-right: .4rem; margin-bottom: .4rem; } .home .page2 .list li:nth-child(even) { margin-right: 0; } .home .page2 .list li .text { display: block; font-size: .24rem; } .home .page3 .c { flex-direction: column; margin: 0; padding: 0 2%; flex: 1; overflow: hidden; } .home .page3 .c .topnews { width: 100%; margin-bottom: .4rem; } .home .page3 .c .topnews .text { margin-top: .2rem; line-height: 180%; font-size: .2rem; } .home .page3 .c .list { width: 100%; } .home .page3 .c .list .img, .home .page3 .c .list .img .img { width: 2rem; } .home .page3 .c .list article { width: calc(100% - .2rem); margin-left: .2rem; } .home .page3 .c .list article .text { line-height: 180%; font-size: .22rem; margin-top: 0; } .home .page3 .c .list article .details { margin-top: .1rem; width: 100px; font-size: .22rem; } .main>.wrapper { flex-direction: column; } .main .r { width: 100%; } .image-list { width: 100%; overflow: hidden; } .image-list li { width: calc((100% - .4rem) / 2); margin-right: .4rem; margin-bottom: .4rem; } .image-list li:nth-child(even) { margin-right: 0; } .image-list li .text { display: block; font-size: .24rem; } .news-detail, .forum { padding: .5rem 0; } .common-typename2 { line-height: 180%; font-size: .28rem; } .history { padding: 5vw 0 0; margin-top: 0; } .history .swiper .swiper-slide .content { opacity: 1; } .history .swiper { margin-top: 0; } .history .wrap { padding-bottom: 50px; } .history .swiper .swiper-slide .atitle { font-size: 40px; } .home-swiper, .home-swiper img { height: 50vh; object-fit: cover; } .home-swiper .title { padding: 0 15%; width: 100%; white-space: wrap; font-size: .24rem; text-align: center; } .home .page-title { line-height: .58rem; font-size: .48rem; } .home .page1 { margin-top: .88rem; padding: 0 3%; } .products-list li { width: 100%; margin-right: 0; margin-bottom: .5rem; } .products-list li .title { margin-top: .26rem; line-height: 180%; height: auto; font-size: .26rem; } .products-list li .des { line-height: 170%; font-size: .24rem; } .positions-wrap { height: auto; } .positions-wrap .wrapper { padding: 3vw; flex-direction: column; } .positions-wrap .wrapper ul { flex-wrap: wrap; margin: .2rem 0; } .sidebar li a { margin-bottom: .15rem; line-height: 180%; font-size: .26rem; } main .about { padding: 0 3%; padding-top: .5rem; } main .about .title { line-height: 180%; font-size: .36rem; } main .about .title2 { line-height: 180%; font-size: .3rem; } main .about .intro { margin-top: .3rem; line-height: 180%; font-size: .24rem; } footer .footer-top { padding-bottom: .55rem; flex-direction: column; } footer .footer-top .l .address { line-height: 170%; font-size: .24rem; } footer .footer-nav { margin-top: .3rem; width: 100%; flex-wrap: wrap; } footer .footer-top .footer-nav li { margin-left: 0; width: 50%; } footer .footer-top .footer-nav li dl { margin-top: .23rem; } footer .footer-top .footer-nav li a { line-height: 180%; font-size: .24rem; } footer .footer-top .footer-nav li dl a { line-height: 180%; font-size: .22rem; } footer .footer-bottom .l .copyright { margin-right: .3rem; } .solution-list { margin: 0; } .solution-list li { margin-bottom: .4rem; border-bottom: 1px solid #ccc; padding: .4rem .2rem; } .solution-list li:last-child { border-bottom: 0; } .solution-list li .img { width: 100%; margin-right: .3rem; } .solution-list li article .title { margin-top: 0; line-height: 180%; font-size: .28rem; } .solution-list li article .des { line-height: 180%; font-size: .24rem; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; /* 闄愬埗鏄剧ず鐨勮鏁 */ overflow: hidden; text-overflow: ellipsis; /* 瓒呭嚭閮ㄥ垎鏄剧ず鐪佺暐鍙 */ } .solution-list li article a { margin-top: .3rem; line-height: 180%; padding: 0 .45rem; font-size: .24rem; } main .typename { line-height: 180%; font-size: .28rem; } .news-list { margin: 0; padding: 3vw; } .news-list li { width: 100%; margin-right: 0; border-bottom: 1px solid #ccc; margin-bottom: .3rem; } .news-list li .title { font-size: .26rem; } .honor-list { margin-top: .3rem; padding: 3vw; } .honor-list li { width: calc((100% - .5rem) / 2); margin-right: .5rem !important; margin-bottom: .5rem; } .honor-list li:nth-child(even) { margin-right: 0 !important; } .honor-list li .img { text-align: center; } .honor-list li .img img { width: auto; height: auto; max-width: 75%; max-height: 75%; margin: 0 auto; } .honor-list li .title { font-size: .24rem; } .contact-info { flex-direction: column; margin-top: .5rem; } .contact-info li { width: 100%; } main .about .intro { margin-bottom: .3rem; } .intro iframe { width: 100% !important; height: 50vh !important; } .xstd tr { display: flex; flex-direction: column; } .products-list li .des { height: auto; white-space: wrap; } .home .page2 .wrapper { height: auto; padding: 8vw 3vw; width: 100%; } .home .page2 article .title { line-height: 180%; font-size: .35rem; } .home .page2 .list { height: auto; flex-wrap: wrap; position: static; margin: .5rem 0 0; } .wrapper { width: 100%; } .home .page2 article { margin-top: .8rem; } .home .page2 article .des { line-height: 180%; font-size: .24rem; } .home .page2 .list li .title { font-size: .24rem; } .home .page3 { padding: .5rem .3rem; } .home .page3 .c { width: 100%; flex-direction: column; } .home .page3 .c .topnews .title { font-size: .26rem; } .home .page3 .c .topnews .des { font-size: .24rem; line-height: 170%; } .home .page3 .c .list li { padding: 0 0 .3rem 0; width: 100%; } .home .page3 .c .list li article { margin-left: .2rem; } .home .page3 .c .list li article .title { font-size: .24rem; height: auto; line-height: 180%; } .home .page3 .c .list li .time { flex-grow: 0; flex-shrink: 0; width: 1rem; } .home .page3 .c .list li::after { left: .8rem; } .home .page3 .c .list li::before { left: .78rem; } .home .page3 .c .list article { width: calc(100% - 1.5rem); } .products-top-categories, .products-top-categories2 { margin-top: .65rem; padding: .3rem; } .products-top-categories .name, .products-top-categories2 .name { font-size: .26rem; } .products-top-categories ul, .products-top-categories2 ul { flex-wrap: wrap; } .products-top-categories .list li, .products-top-categories2 .list li { width: auto; display: inline-flex; margin-right: .3rem; } .products-search { margin-top: .5rem; padding: 0 3%; } .products-search .input { width: calc(100% - 1.2rem); display: flex; align-items: center; } .products-search button { flex-grow: 0; width: 1.2rem; flex-shrink: 0; } .products-search .input input { width: 100%; font-size: .24rem; } .products-screening { padding: .3rem; } .filter-cen { font-size: .24rem; } .products-list { padding: .3rem; } .products-detail-bottom .tabs { height: .8rem; width: calc(100% - 4vw); margin: 0 2vw; } .products-detail-bottom .tabs li { padding: 0 .35rem; font-size: .24rem; height: .8rem; line-height: .8rem; } .products-detail-bottom .content { padding: 0 .3rem; } .products-detail { margin-top: .66rem; padding: 0 3vw; } .products-detail-top { flex-direction: column; } .products-detail-top .album { width: 100%; } .products-detail-top .album .big { width: 100%; height: 94vw; line-height: 94vw; } .products-detail-top article { width: 100%; padding: 3vw; } .products-detail-top article h1 { line-height: 170%; font-size: .28rem; } .download-list { margin: .5rem 0; padding: 0 3vw; } .download-list li a { padding: 0 .4rem; height: 1rem; margin-bottom: .25rem; } .download-list li .num { font-size: .3rem; } .download-list li .title { font-size: .24rem; } }