锘緻charset "utf-8"; @font-face { font-family: BASE; src: local("Helvetica Neue"), local(Helvetica), local("Arial"), local("\5FAE\8F6F\96C5\9ED1"), local("Microsoft YaHei"), local("Tahoma"), local("Hiragino sans gb"), local("SimSun"), local("Sans-serif"); } @font-face { font-family: "FuturaBook"; src: url("/static/group_assets/fonts/Futura-Book-2.ttf"); } @font-face { font-family: "FuturaMedium"; src: url("/static/group_assets/fonts/futura_medium.ttf"); } /* 閲嶇疆娴忚鍣ㄩ粯璁ゆ牱寮 START */ html, body, p, ol, ul, li, dl, dt, dd, blockquote, figure, fieldset, legend, textarea, pre, iframe, hr, h1, h2, h3, h4, h5, h6 { margin: 0; padding: 0 } h1, h2, h3, h4, h5, h6 { font-size: 100%; font-weight: normal } ul { list-style: none } button, input, select, textarea { margin: 0 } html { box-sizing: border-box; } *, *::before, *::after { box-sizing: inherit } img, video { height: auto; max-width: 100% } /*@purpose To enable resizing for IE */ /*@branch For IE6-Win, IE7-Win */ input, button, textarea, select { font-size: 100%; outline: none; } input, button, textarea, select, optgroup, option { font-family: inherit; font-size: inherit; font-style: inherit; font-weight: inherit; } a { color: inherit; text-decoration: none; -webkit-transition: color 0.2s ease-in-out; -moz-transition: color 0.2s ease-in-out; transition: color 0.2s ease-in-out; -webkit-transition: background-color 0.2s ease-in-out; -moz-transition: background-color 0.2s ease-in-out; transition: background-color 0.2s ease-in-out; } a:hover { text-decoration: none; } /* 閲嶇疆娴忚鍣ㄩ粯璁ゆ牱寮 END */ html { font-family: 'PingFangSC-Regular', 'helvetica neue', tahoma, 'PingFang SC', 'microsoft yahei', arial, 'hiragino sans gb', sans-serif; ; font-size: 16px; line-height: 1.5; letter-spacing: 1px; } body { color: #333; background-color: #fff; -webkit-font-smoothing: antialiased; text-align: justify; } ::-webkit-scrollbar { width: 15px; background-color: transparent; } ::-webkit-scrollbar-thumb { border-radius: 10px; background-color: #C0C0C0; border: 4px solid #F9F9F9; } ::-webkit-scrollbar-track-piece { background-color: #F9F9F9; } /*-- 瀛楀彿銆侀鑹层€佸杈硅窛銆佸唴琛ヤ竵銆佸眳涓€佽楂樸€佹樉绀恒€侀殣钘 --------------------------------------------------------------------------*/ .c-333 { color: #333; } .c-555 { color: #555; } .c-666 { color: #666; } .c-777 { color: #777; } .c-999 { color: #999; } .c-red { color: #c70114; } .c-red-q { color: #eb0028; } /* 瀛椾綋 */ .font-fm { font-family: "FuturaMedium"; } .font-fb { font-family: "FuturaBook"; } /* 瀛楀彿 */ .f9 { font-size: 9px; -webkit-text-size-adjust: none; } .f12, .fb12 { font-size: 12px; } .f14, .fb14 { font-size: 14px; } .f16, .fb16 { font-size: 16px; } .f18, .fb18 { font-size: 18px; } .f20, .fb20 { font-size: 20px; } .fb, .fb12, .fb14, .fb16, .fb18, .fb20 { font-weight: 700; } /* 闅愯棌 灞呬腑 */ .tc { text-align: center; } .tr { text-align: right; } .show { display: block; } .hide { display: none !important; } .fixed-top { position: fixed; top: 0; left: 0; right: 0; z-index: 10; } /*鏂囧瓧闅愯棌,鐪佺暐鍙?/ .ti, .te { white-space: nowrap; overflow: hidden; } .te { text-overflow: ellipsis; text-align: left; } .te-3 { text-align: left; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; } .te-2 { text-align: left; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } .bg-gray { background: #fbfbfb; } .content-box { width: 1400px; padding: 0 20px; margin: 0 auto; } .contenter { min-width: 1400px; max-width: 1920px; margin: 0 auto; } /* 椤甸潰鏍囬 START */ html:not(.mobile-app) .page-title.pd { padding: 100px 0 60px 0; } .page-title .level-1 { line-height: 1.5; color: #333; font-size: 30px; } .page-title .level-2 { color: #c0c0c0; font-size: 18px; font-family: Arial; text-transform: uppercase; } .page-title .level-3 { line-height: 1.2; color: #c0c0c0; font-size: 14px; font-family: Arial; text-transform: uppercase; } /* 椤甸潰鏍囬 END */ /* 鈥滃姞杞芥洿澶氣€ 鎸夐挳 */ .load-more-btn { display: block; width: 166px; height: 50px; line-height: 50px; margin: 50px auto 150px; border-radius: 25px; font-size: 14px; text-align: center; border: 2px solid #eee; transition: all 0.3s; cursor: pointer; } .load-more-btn-disabled { color: #777; } .load-more-btn-hover:hover { background: #333; border-color: #333; box-shadow: 0 15px 15px -10px rgba(0, 0, 0, 0.2); color: #efefef; } /* ================ 瀵艰埅鏍忔牱寮 START ================ */ html:not(.mobile-app) .header { position: fixed; top: 0; left: 50%; z-index: 200; width: 100%; max-width: 1920px; padding: 0 60px; display: flex; justify-content: space-between; background: #fff; border-bottom: 1px solid #ededed; transform: translateX(-50%); -ms-transform: translateX(-50%); /* IE 9 */ -moz-transform: translateX(-50%); /* Firefox */ -webkit-transform: translateX(-50%); /* Safari 鍜 Chrome */ -o-transform: translateX(-50%); /* Opera */ } html:not(.mobile-app) .header-clear-height { height: 84px; } html:not(.mobile-app) .header.on { border: none; background: transparent; } html:not(.mobile-app) .header-left img { margin-top: 14px; } html:not(.mobile-app) .header-right .item>a { position: relative; z-index: 10; line-height: 84px; display: inline-block; letter-spacing: 2px; transition: all 0.3s; } html:not(.mobile-app) .header-right .item:hover>a, html:not(.mobile-app) .header-right .item.highlight>a { color: #eb0028; } html:not(.mobile-app) .header-right .item>a:after { content: ""; position: absolute; left: 50%; bottom: 0; width: 2em; height: 4px; margin-left: -18px; display: block; border-radius: 2px; background: #eb0028; transition: all 0.2s; opacity: 0; transform: scaleX(0); } html:not(.mobile-app) .header-right .item:hover>a:after { opacity: 1; transform: scaleX(1); } html:not(.mobile-app) .header-right { color: #555; font-size: 18px; } html:not(.mobile-app) .header.on .item>a { color: #fff; } html:not(.mobile-app) .header.on .bg-hover { background: rgba(255, 255, 255, .92); } html:not(.mobile-app) .header .bg-hover { position: absolute; left: 0; top: 0; z-index: -1; width: 100%; height: 0; opacity: 0; background: #fff; transition: all 0.2s; } html:not(.mobile-app) .header.submenu_show .bg-hover { height: 325px; opacity: 1; } html:not(.mobile-app) .header .menu-hook { position: absolute; top: 0; left: 0; width: 138px; height: 400px; display: none; } html:not(.mobile-app) .header.submenu_show .menu-hook { display: block; } html:not(.mobile-app) .main-menu .item { position: relative; z-index: 20; padding-left: 50px; display: inline-block; vertical-align: top; font-size: 20px; cursor: pointer; } html:not(.mobile-app) .dropdown_menu { position: absolute; z-index: 999; width: 100%; max-height: 0; padding-top: 0; opacity: 0; text-align: center; font-size: 18px; overflow: hidden; transition: all 0.25s; } html:not(.mobile-app) .dropdown_menu a { display: block; height: 40px; line-height: 40px; text-align: left; transition: all 0.3s; } html:not(.mobile-app) .dropdown_menu a:hover, html:not(.mobile-app) .dropdown_menu a.active { color: #eb0028; } html:not(.mobile-app) .submenu_show.on .item>a { color: #555; } html:not(.mobile-app) .submenu_show .item:hover>a { color: #eb0028; } html:not(.mobile-app) .header.submenu_show .item.submenu_show .dropdown_menu { max-height: 400px; opacity: 1; padding-top: 20px; } html:not(.mobile-app) .header.submenu_show .dropdown_menu { max-height: 0; opacity: 0; } /* 瀵艰埅鏍忔牱寮 END */ /* =============== 椤佃剼鏍峰紡 START =============== */ .footer { position: relative; width: 100%; background: #c70114; /* color: #f4ddde; */ color: rgba(255, 255, 255, 0.8); line-height: 1; } .footer .link-wrap { display: flex; justify-content: space-between; flex: 1; padding-right: 130px; } .footer .link-wrap dl { display: inline-block; vertical-align: top; } .footer .link-wrap dl:last-child { width: auto; } .footer .link-wrap dt { margin-bottom: 40px; color: #fff; font-size: 18px; } .footer .link-wrap li { margin-bottom: 10px; font-size: 14px; } .footer .link-wrap li a:hover { color: #fff; } .footer-top { padding-top: 90px; padding-bottom: 70px; display: -webkit-box; display: -webkit-flex; display: -moz-box; display: -ms-flexbox; display: flex; justify-content: space-between; } .footer .contact_wrap { text-align: right; } .footer .contact_wrap p{ font-size: 14px; font-weight: 400; color: #FFFFFF; margin: 10px 0; opacity: 0.8; } .footer .contact_wrap .tel { margin-bottom: 24px; color: #fff; font-size: 30px; font-weight: 500; font-family: FuturaMedium; opacity: 1; } .footer .contact_wrap span { font-size: 14px; letter-spacing: 1px; } .footer .contact-item { position: relative; display: inline-block; width: 28px; height: 28px; line-height: 30px; margin-left: 10px; background: rgba(255, 255, 255, 0.2); border-radius: 50%; text-align: center; cursor: pointer; } .footer .contact-item .svg-icon { width: 15px; height: 15px; fill: #fff; } .footer .contact-box { position: absolute; background: #fff; top: calc(-100% + 12px); left: 50%; z-index: 999; min-width: 120px; max-height: 0; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; background: #f9f9f9; color: #333; border-radius: 8px; transform: translate(-50%, -100%); transition: all 0.3s; opacity: 0; overflow: hidden; } .footer .contact-box p { padding: 2px 5px; text-align: left; white-space: nowrap; } .footer .contact-item:hover .contact-box { max-height: 500px; opacity: 1; overflow: initial; } .footer .contact-item:hover { background: #fff; } .footer .contact-item:hover .svg-icon { fill: #c70114; } .footer .contact-box::before { content: ""; position: absolute; bottom: -9px; left: 50%; transform: translateX(-50%); width: 13px; height: 9px; background-image: url('/static/group_assets/image/down.png'); background-size: 100% 100%; } .footer .contact-box img { width: 100%; height: 100%; border-radius: 8px; object-fit: cover; } .footer .contact-icon { padding: 40px 5px; } .footer-bottom { background: #b90012; } .footer .beian { height: 80px; display: -webkit-box; display: -webkit-flex; display: -moz-box; display: -ms-flexbox; display: flex; align-items: center; justify-content: space-between; font-size: 14px; } .footer .beian-icon { display: flex; align-items: center; justify-content: center; } .footer .beian-item { width: 28px; height: 28px; line-height: 30px; margin-right: 10px; display: flex; align-items: center; justify-content: center; background: #fff; border-radius: 50%; } .footer .beian-item a { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; } /* 椤佃剼鏍峰紡 END */ /* header ---end */ .banner-sub { height: 408px; background-size: auto 100%; background-position: center center; } .banner-sub .content-box { height: 100%; box-sizing: border-box; } .banner-sub dl { display: flex; height: 100%; flex-direction: column; justify-content: center; } .banner-sub dt { font-size: 46px; font-weight: 500; color: #333; } .banner-sub dd { font-size: 20px; color: #555; } .banner-sub .en{ font-size: 18px; } .banner-sub dd.en { font-size: 18px; } .banner-sub dl.white dt, .banner-sub dl.white dd { color: #fff; } .go-top { position: fixed; width: 50px; height: 50px; bottom: 20px; right: 20px; z-index: 999; display: none; border-radius: 50%; background: rgba(51, 51, 51, 0.2); cursor: pointer; } .go-top-absolute { position: absolute; top: -70px; bottom: auto; } .go-top:hover { background: #333; } .go-top .icon-back-top { position: absolute; top: 50%; left: 50%; width: 26px; height: 26px; fill: #fff; transform: translate(-50%, -50%); } /*椤甸潰浜岀骇瀵艰埅*/ .page-nav { position: sticky; top: 0; z-index: 100; height: 80px; line-height: 80px; user-select: none; background: #f9f9f9; border-bottom: 1px solid #ededed; font-size: 20px; } .page-nav ul { display: flex; align-items: center; } .page-nav li { margin-right: 80px; } .page-nav li.active { position: relative; color: #eb0028; } .page-nav a { display: block; } .page-nav li.active::after { content: ""; position: absolute; bottom: 0; left: 50%; height: 5px; width: 2em; border-radius: 2.5px; transform: translateX(-50%); background: #eb0028; } .page-nav-box { width: 920px; margin: 0 auto; } .page-nav-box a { display: inline-block; margin-right: 70px; height: 80px; line-height: 80px; font-size: 20px; color: #555; } /* 椤靛唴瀵艰埅鏍忔牱寮 END */ /* swiper涓婁笅椤垫寜閿 */ .s-btn { position: absolute; z-index: 1; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: transparent; border: 2px solid #555; cursor: pointer; outline: none; } .s-btn i { position: relative; background-color: #555; text-align: left; transition: all 0.3s; } .s-btn i::before, .s-btn i::after { content: ""; position: absolute; background-color: inherit; } .s-btn i, .s-btn i::before, .s-btn i::after { width: 6px; height: 6px; border-top-right-radius: 50%; } .s-btn i::before { transform: rotate(-135deg) skewX(-45deg) scale(1.414, .707) translate(0, -50%); } .s-btn i::after { transform: rotate(135deg) skewY(-45deg) scale(.707, 1.414) translate(50%); } .link-next i { margin: -2px 2px 0 0; transform: rotate(-90deg) skewX(-30deg) scale(1, .866); } .link-prev i { margin: 4px 0 0 1px; transform: rotate(90deg) skewX(-30deg) scale(1, .866); } .s-btn:hover { background: #303030; border-color: #303030; } .link-prev:hover i, .link-next:hover i { background-color: #fff; } .s-btn.swiper-button-disabled, .s-btn.disabled { background: transparent; border: 2px solid #ddd; cursor: auto; } .link-prev.swiper-button-disabled i, .link-prev.disabled i, .link-next.swiper-button-disabled i, .link-next.disabled i { background-color: #ddd; } /* 鍒嗕韩鍥炬爣 */ .extra { display: flex; align-items: center; } .share-box.bdsharebuttonbox a { width: 20px; height: 20px; background-position: center; background-size: contain; } .share-box.bdsharebuttonbox .bds_weixin { background-image: url(/static/group_assets/image/wechat.png); } .share-box.bdsharebuttonbox .bds_tsina { background-image: url(/static/group_assets/image/weibo.png); } .share-box.bdsharebuttonbox .bds_sqq { background-image: url(/static/group_assets/image/qq.png); } .bsBox { box-sizing: content-box; } @media only screen and (max-width: 1440px) { .banner-sub{ height: 390px; } } @media only screen and (max-width: 1200px) { /* .content-box { width: 100vw; } .header-right li { margin-left: 20px; } .header { padding: 0 60px 0 36px; } .header-right li>a { font-size: 18px; } .footer dl { margin-right: 35px; }*/ }