body, input, textarea, button { font-family: "PingFang SC", "Microsoft YaHei", "Tahoma", "Arial", "sans-serif"; } .body { width: 100%; overflow: hidden; font-family: "PingFang SC", "Microsoft YaHei", "Tahoma", "Arial", "sans-serif"; } .pic img { width: 100%; transition: all ease 2s; } .scaleImg .pic { overflow: hidden; } .scaleImg:hover .pic img { transform: scale(1.1); } .xs-show { display: none !important; } @font-face { font-family: 'Embassy BT'; src: url('/static/font/Embassy\ BT.56b15795.woff2'); } @font-face { font-family: 'Gotham'; src: url('/static/font/Gotham-XLight.otf'); } .wrap { width: 69.271vw; margin: 0 auto; } .load-container { position: fixed; left: 0; top: 0; width: 100%; height: 100%; z-index: 55; user-select: none; pointer-events: none; background: #f3f3f3; /* display: none; */ } .load-container::before, .load-container::after { content: ''; display: block; width: 100%; height: 0%; position: absolute; left: 0; background: #fff; transition: all linear 0.5s; } .load-container::before { top: 0; } .load-container::after { bottom: 0; } .load-container .pic { width: 12.5vw; position: relative; z-index: 2; opacity: 0; } .load-container .progress { width: 100%; height: 2px; background: #ececec; margin: 1.719vw 0 1.042vw; position: relative; z-index: 2; opacity: 0; } .load-container .progress span { display: block; width: 0%; height: 2px; background: #0168AE; } .load-container .text { font-family: 'Embassy BT'; font-size: 0.99vw; margin-bottom: 1.042vw; color: #0168AE; position: relative; z-index: 2; opacity: 0; } .loading .load-container::before, .loading .load-container::after { height: 50%; } .loading .load-container .pic, .loading .load-container .progress, .loading .load-container .text { opacity: 1; transition: all linear .2s; } .loaded .load-container { background: transparent; } .loaded .load-container::before, .loaded .load-container::after { height: 0%; transition: all ease-in 0.8s; } .loaded .load-container .pic, .loaded .load-container .progress, .loaded .load-container .text { opacity: 0; transition: all linear .2s; } header { padding: 2.083vw 0; padding: 2vw 0; position: fixed; left: 0; top: 0; z-index: 50; width: 100%; background: #fff; transition: all ease-out .3s; } .scroll header { padding: 1vw 0; background: rgba(255, 255, 255, 0.5); } header .logo { width: 12.5vw; } header .logo img { width: 100%; } .language { font-size: 0.833vw; color: #000000; } .language a { transition: all ease .3s; } .language a:hover { color: #E4B35B; } .search-btn { margin: 0 1.823vw; width: 2.188vw; height: 2.188vw; user-select: none; cursor: pointer; } .search-btn svg { width: 100%; } .search-btn svg path { transition: all ease .3s; } .search-btn:hover svg path { fill: #E4B35B; stroke: #E4B35B; } .menu-btn { width: 4.688vw; height: 2.188vw; background: #FFFFFF; box-shadow: inset 0 0 0.104vw #C5C5C5; font-size: 0.833vw; font-family: Gotham; font-weight: 400; color: #C5C5C5; user-select: none; cursor: pointer; position: relative; transition: all linear .25s; } .menu-btn:hover { color: #E4B35B; } .menu-btn::after, .menu-btn::before { content: ''; display: block; position: absolute; width: 0%; height: 0%; border: 1px solid transparent; box-sizing: border-box; } .menu-btn::before { top: 0; left: 0; } .menu-btn::after { bottom: 0; right: 0; } .menu-btn:hover::before { width: 100%; height: 100%; border-left-color: #E4B35B; border-top-color: #E4B35B; -webkit-transition: width 0.25s ease-out, height 0.25s ease-out 0.25s; transition: width 0.25s ease-out, height 0.25s ease-out 0.25s; } .menu-btn:hover::after { width: 100%; height: 100%; border-right-color: #E4B35B; border-bottom-color: #E4B35B; -webkit-transition: width 0.25s ease-out, height 0.25s ease-out 0.25s; transition: width 0.25s ease-out, height 0.25s ease-out 0.25s; } .C-title span { display: inline-block; font-size: 3.333vw; font-family: Gotham; font-weight: normal; color: #C5C5C5; opacity: 0.4; line-height: 1; user-select: none; text-transform: uppercase; } .C-title h2 { font-size: 2.188vw; margin-top: -0.8em; font-weight: 800; color: #0168AE; position: relative; z-index: 5; overflow: hidden; } .C-title.small h2 { font-size: 1.875vw; } .C-title h2::after { content: ''; display: block; position: absolute; left: 0; top: 0; width: 0.521vw; background-color: #fff; box-shadow: 0 0 0.781vw #fff; height: 100%; transform: translateX(-200%) skew(-10deg); } .C-title:hover h2::after { left: 40%; transform: translateX(100%) skew(-10deg); opacity: 0; transition: all linear 0.5s; } .C-more { font-size: 0.729vw; color: #111111; } .C-more i { display: block; width: 5.208vw; height: 0.052vw; margin-left: 1.094vw; background: #111111; position: relative; } .C-more i::after { content: ''; display: block; left: 0; top: 0; width: 0%; height: 0.052vw; background: #E4B35B; transition: all ease .1s; } .C-more:hover { color: #E4B35B; } .C-more:hover i::after { width: 100%; } footer { background: url('/img/foot-bg.svg') no-repeat center/cover; padding: 5.469vw 0 0; } .foot-logo { width: 12.5vw; } .info a { font-size: 0.833vw; color: #FFFFFF; } .info .wechat { margin: 0 3.125vw; position: relative; cursor: pointer; } .info .wechat img { width: 100%; } .info .wechat .pic { position: absolute; left: 50%; bottom: calc(100% + 1.042vw); width: 7.396vw; transform: translate(-50%, 0) scale(0.7); background: #fff; box-shadow: 0 0 0.521vw rgb(77, 77, 77); pointer-events: none; opacity: 0; transition: all ease .3s; } .info .wechat:hover .pic { pointer-events: visible; opacity: 1; transform: translate(-50%, 0) scale(1); } .foot-link { padding: 3.229vw 0 4.688vw; border-bottom: 2px solid rgba(138, 204, 255, 0.2); } .foot-link dt { font-size: 0.833vw; margin-bottom: 1.563vw; font-weight: bold; color: #FFFFFF; } .foot-link a[href="javascript:;"] { cursor: default; } .foot-link dd:not(.title) { font-size: 0.729vw; margin-bottom: 1em; color: #FFFFFF; opacity: 0.6; } .foot-link dd:not(.title):hover { opacity: 1; } .foot-link dd.title { font-size: 0.729vw; margin-bottom: 1em; font-weight: bold; color: #FFFFFF; } .foot-copy { padding: 2.083vw 0; } .foot-copy p { font-size: 0.729vw; color: #FFFFFF; opacity: 0.6; } .foot-copy p.switch { cursor: pointer; } .foot-copy a { font-size: 0.729vw; color: #FFFFFF; opacity: 0.6; } .foot-copy a:hover { opacity: 1; } .popup { background: rgba(0, 9, 16, 0.4); position: fixed; left: 0; top: 0; width: 100%; height: 100%; z-index: 50; pointer-events: none; opacity: 0; transition: all ease .3s; } .popup.open { pointer-events: visible; opacity: 1; } .popup-close { width: 2.083vw; height: 2.083vw; position: absolute; right: 3.125vw; top: 3.125vw; cursor: pointer; transition: all linear .3s; z-index: 10; } .popup-close img { width: 100%; } .popup-close:hover { transform: rotate(90deg); } .popup-close:active { transition: all linear .1s; transform: scale(0.7); } .search-form input { width: 93%; height: 4.688vw; padding: 1.719vw 1.563vw; background: #FFFFFF; font-size: 0.938vw; color: #111111; border: none; } .search-form input::placeholder { font-size: 0.938vw; color: #111111; } .search-form button { width: 7%; height: 4.688vw; background: #FFFFFF; border: none; border-left: 1px solid #C5C5C5; } .search-form button svg path { transition: all ease .3s; } .search-form button:hover svg path { fill: #E4B35B; stroke: #E4B35B; } .search-form, .fixed-text, .nav { position: absolute; left: 100%; top: 100%; } .search-form.on, .fixed-text.on, .nav.on { position: static; } .fixed-text { height: 33.281vw; padding: 2.708vw 0.833vw 3.125vw 3.438vw; background: #FFFFFF; } .fixed-text .title { font-size: 1.875vw; font-weight: 600; color: #0168AE; text-align: center; margin-bottom: 2.5vw; padding-right: 3.125vw; } .fixed-text .scroll-container { font-size: 0.729vw; color: #505559; height: 21.875vw; overflow: auto; padding-right: 3.125vw; } ::-webkit-scrollbar { width: 10px; height: 5px; } ::-webkit-scrollbar-track-piece { background: #E3E3E3 } ::-webkit-scrollbar-thumb:vertical { background-color: #0E6EB8; border-radius: 30px } ::-webkit-scrollbar-thumb:vertical:hover { background-color: #000 } ::-webkit-scrollbar-corner:vertical { background-color: #535353 } ::-webkit-scrollbar-resizer:vertical { background-color: #000 } .nav { width: 37%; height: 100%; margin-left: 63%; background: #0168AE; transition: all ease .4s; transform: translateX(10.417vw); } .nav.on { transform: translateX(0); } .nav-box { width: 100%; height: 100%; padding: 0 0 0 5.208vw; overflow: auto; } .nav-box::-webkit-scrollbar { display: none; } .nav-box .scroll-box { width: 100%; padding: 100px 0; height: auto; } .nav-box .link>a { display: block; font-size: 1.875vw; margin-bottom: 0.9em; font-weight: 600; color: #FFFFFF; opacity: 0.7; transition: all ease .3s; } .nav-box .link:hover>a, .nav-box .link.on>a { opacity: 1; } .nav-box .link .down { padding-bottom: 3.125vw; display: none; } .nav-box .link .down>a, .nav-box .link .down .tow-link>a { padding-left: 1.563vw; display: block; position: relative; font-size: 0.938vw; margin-bottom: 1em; color: #FFFFFF; } .nav-box .link .down>a::after, .nav-box .link .down .tow-link>a::after { content: ''; display: block; width: 0; height: 0.104vw; background: #FFFFFF; position: absolute; left: 0; top: 50%; transition: all ease .3s; } .nav-box .link .down>a.on::after, .nav-box .link .down>a:hover::after, .nav-box .link .down .tow-link>a.on::after, .nav-box .link .down .tow-link>a:hover::after { width: 0.729vw; } .nav-box .link .down .twoDown { display: none; } .nav-box .link .down .twoDown a { font-size: 0.83333vw; color: #fff; opacity: 0.6; display: block; width: 100%; padding-left: 1.563vw; margin-bottom: 1em; transition: all ease .3s; } .nav-box .link .down .twoDown a.on, .nav-box .link .down .twoDown a:hover { opacity: 1; } .C-linkBanner .intr { padding: 17.188vw 0 5.052vw; align-items: flex-end; } .C-linkBanner .intr>div { width: 69%; } .C-linkBanner .intr ul { max-width: 30%; display: flex; flex-direction: column; } .C-linkBanner h3 { font-size: 2.708vw; font-family: Gotham; font-weight: normal; color: #C5C5C5; margin-bottom: 0.3em; line-height: 1.3; text-transform: uppercase; } .C-linkBanner h2 { font-size: 2.708vw; font-weight: 500; line-height: 4.167vw; color: #0168AE; } .C-linkBanner li { font-size: 0.833vw; margin-bottom: 0.6em; font-weight: 800; color: #C5C5C5; transition: all ease .2s; } .C-linkBanner li.on, .C-linkBanner li:hover { color: #0168AE; } .C-linkBanner .pic { width: 100%; } .C-case { overflow: hidden; position: relative; padding: 3.125vw 2.083vw 0.677vw; background: linear-gradient(156deg, #0E6EB8 0%, #a7d1f1 120%); background: linear-gradient(156deg, #005fa9 0%, #a7d1f1 120%) } .C-case .intr .title h2 { font-size: 1.25vw; padding-right: 4em; font-weight: 800; color: #FFFFFF; } .C-case .intr .title hr { border: none; margin: 1.302vw 0; border-top: 1px solid rgba(255, 255, 255, 0.26); } .C-case .intr ul { width: 49%; height: 11.97917vw; overflow: auto; margin-right: 1%; } .C-case .intr ul::-webkit-scrollbar { width: 3px; height: 5px; } .C-case .intr ul li { font-size: 0.833vw; padding-left: 1.198vw; margin-bottom: 1em; color: #FFFFFF; position: relative; } .C-case .intr ul li::before { content: ''; display: block; width: 0.313vw; height: 0.313vw; background: #FFFFFF; position: absolute; left: 0; top: 0.7em; transform: translate(0, -50%); border-radius: 100%; transition: all ease .3s; } .C-case .intr ul li:hover:before { transform: translate(0.521vw, -50%); } .C-case .intr .time { font-size: 6.25vw; font-family: Gotham; font-weight: normal; color: #0168AE; opacity: 0.3; text-align: right; user-select: none; } .C-case .pic { background-repeat: no-repeat; background-position: center; background-size: cover; position: absolute; right: 100%; top: 0; width: 100%; height: 100%; transition: all ease-out 0.61s; z-index: 1; } .C-case.open .pic { right: 0; } .C-case .btn { width: 2.292vw; height: 2.292vw; background: rgba(255, 255, 255, 0.18); border-radius: 50%; position: absolute; right: 2.083vw; top: 2.604vw; cursor: pointer; z-index: 5; } .C-case .btn span { display: block; width: 50%; height: 50%; background: url('/img/jt-z.svg') no-repeat center/contain; transform: rotateY(180deg); transition: all ease .3s; } .C-case.open .btn { background: rgba(255, 255, 255, 1); box-shadow: 0 0 0.26vw #999; /* animation: ani-btn ease-in-out 0.8s forwards; */ } .C-case.open .btn span { background: url('/img/jt-z-y.svg') no-repeat center/contain; transform: rotateY(0deg); } @keyframes ani-btn { 0% { transform: translateX(0vw); } 50% { transform: translateX(-2.083vw); } 100% { transform: translateX(0vw); } } .product-title h2 { font-size: 1.875vw; font-weight: 500; color: #0168AE; } .product-title hr { border: none; width: 100%; height: 0.052vw; margin: 1.042vw 0; background: #C5C5C5; } .product-title p { font-size: 0.833vw; color: #888888; } .gotop { width: 2.188vw; height: 2.188vw; display: flex; align-items: center; justify-content: center; cursor: pointer; position: fixed; right: 100px; bottom: 100px; background: rgba(255, 255, 255, 0.8); border: 1px solid #0168AE; transition: all ease 1s; opacity: 0; } .scroll .gotop { opacity: 1; } .gotop span { display: block; width: 50%; height: 50%; background: url('/img/jt-z-b.svg') no-repeat center/contain; transform: rotate(90deg); } .gotop:hover { transition: all ease .3s; background: rgba(255, 255, 255, 0.5); } /* *======================================================media=============================================================== */ @media screen and (max-width:1919px) {} @media screen and (max-width:1519px) {} @media screen and (max-width:1366px) {} @media screen and (max-width:1250px) {} @media screen and (max-width:991px) { .xs-hide { display: none !important; } .xs-show { display: flex !important; } .wrap { width: 80%; } .load-container .pic { width: 160px; } .load-container .progress { margin: 33px 0 20px; } .load-container .text { font-size: 16px; margin-bottom: 20px; } header { padding: 20px 0; } header .logo { width: 160px; } .language { font-size: 14px; } .search-btn { margin: 0 10px; width: 32px; height: 32px; } .menu-btn { width: 74px; height: 32px; font-size: 14px; box-shadow: inset 0 0 1px #c5c5c5; } .C-title span { font-size: 42px; } .C-title h2 { font-size: 32px; } .C-title.small h2 { font-size: 28px; } .C-more { font-size: 12px; } .C-more i { width: 60px; margin-left: 21px; } footer { padding: 80px 0 0; } .foot-logo { width: 160px; } .info a { font-size: 14px; } .info .wechat { margin: 0 30px; } .info .wechat .pic { bottom: calc(100% + 20px); width: 120px; } .foot-link { padding: 42px 0 60px; border-bottom: 2px solid rgba(138, 204, 255, 0.2); } .foot-link dl { width: 30%; margin-bottom: 3%; } .foot-link dl:nth-child(1) { order: 4; } .foot-link dt { font-size: 14px; margin-bottom: 20px; } .foot-link dd:not(.title) { font-size: 12px; } .foot-link dd.title { font-size: 12px; } .foot-copy { padding: 15px 0; } .foot-copy p { font-size: 12px; } .foot-copy a { font-size: 12px; } .popup-close { width: 20px; height: 20px; right: 30px; top: 30px; } .search-form { width: 80%; } .search-form input { width: 90%; height: 70px; padding: 33px 30px; font-size: 14px; } .search-form input::placeholder { font-size: 14px; } .search-form button { width: 10%; height: 70px; } .fixed-text { height: 80%; padding: 52px 16px 60px 66px; } .fixed-text .title { font-size: 26px; margin-bottom: 28px; padding-right: 60px; } .fixed-text .scroll-container { font-size: 12px; height: 90%; padding-right: 60px; } .nav-box { padding: 0 0 0 40px; } .nav-box .link>a { font-size: 18px; } .nav-box .link .down { padding-bottom: 20px; } .nav-box .link .down>a, .nav-box .link .down .tow-link>a { padding-left: 20px; font-size: 14px; } .nav-box .link .down .twoDown a { font-size: 12px; padding-left: 20px; } .nav-box .link .down .twoDown a { font-size: 12px; } .nav-box .link .down>a::after, .nav-box .link .down .tow-link>a::after { height: 2px; } .nav-box .link .down>a.on::after, .nav-box .link .down>a:hover::after, .nav-box .link .down .tow-link>a.on::after, .nav-box .link .down .tow-link>a:hover::after { width: 10px; } .C-linkBanner .intr { padding: 150px 0 80px; } .C-linkBanner .intr>div { width: 69%; } .C-linkBanner h3 { font-size: 32px; } .C-linkBanner h2 { font-size: 32px; line-height: 1.4; } .C-linkBanner li { font-size: 14px; font-weight: normal; margin-bottom: 0.6em; } .C-case { padding: 60px 40px 13px; } .C-case .intr .title h2 { font-size: 20px; } .C-case .intr .title hr { margin: 15px 0; } .C-case .intr ul { width: 50%; height: auto; overflow: hidden; } .C-case .intr ul li { font-size: 14px; padding-left: 13px; } .C-case .intr ul li::before { width: 3px; height: 3px; } .C-case .intr .time { font-size: 80px; line-height: 1; } .C-case .btn { width: 34px; height: 34px; right: 40px; top: 50px; } .C-case .btn span { width: 50%; height: 50%; } .product-title h2 { font-size: 22px; } .product-title hr { height: 1px; margin: 10px 0; } .product-title p { font-size: 14px; } .gotop { display: none; } } @media screen and (max-width:768px) { .wrap { width: 95%; } .load-container .pic { width: 130px; } .load-container .progress { margin: 33px 0 20px; } .load-container .text { font-size: 14px; margin-bottom: 20px; } header { padding: 20px 0; } header .logo { width: 130px; } .language { font-size: 14px; } .search-btn { margin: 0 10px; width: 32px; height: 32px; } .menu-btn { width: 74px; height: 32px; font-size: 14px; box-shadow: inset 0 0 1px #c5c5c5; } .C-title span { font-size: 27px; } .C-title h2 { font-size: 22px; } .C-title.small h2 { font-size: 20px; } .C-more { font-size: 12px; } .C-more i { width: 60px; margin-left: 21px; } footer { padding: 80px 0 0; } .foot-logo { width: 160px; } .info a { font-size: 14px; } .info .wechat { margin: 0 30px; } .info .wechat .pic { bottom: calc(100% + 20px); width: 120px; } .foot-link { padding: 42px 0 60px; border-bottom: 2px solid rgba(138, 204, 255, 0.2); } .foot-link dl { width: 30%; margin-bottom: 3%; } .foot-link dl:nth-child(1) { order: 4; } .foot-link dt { font-size: 14px; margin-bottom: 20px; } .foot-link dd:not(.title) { font-size: 12px; } .foot-link dd.title { font-size: 12px; } .foot-copy { padding: 15px 0; } .foot-copy p { font-size: 12px; } .foot-copy a { font-size: 12px; } .popup-close { width: 20px; height: 20px; right: 30px; top: 30px; } .search-form { width: 80%; } .search-form input { width: 90%; height: 50px; padding: 10px 30px; font-size: 14px; } .search-form input::placeholder { font-size: 14px; } .search-form button { width: 10%; height: 50px; } .fixed-text { height: 80%; padding: 52px 16px 60px 66px; } .fixed-text .title { font-size: 26px; margin-bottom: 28px; } .fixed-text .scroll-container { font-size: 12px; height: 90%; padding-right: 60px; } .nav { width: 70%; height: 100%; margin-left: 30%; transform: translateX(100px); } .nav-box { padding: 0 0 0 40px; } .nav-box .link>a { font-size: 18px; } .nav-box .link .down { padding-bottom: 20px; } .nav-box .link .down>a, .nav-box .link .down .tow-link>a { padding-left: 20px; font-size: 14px; } .nav-box .link .down>a::after, .nav-box .link .down .tow-link>a::after { height: 2px; } .nav-box .link .down>a.on::after, .nav-box .link .down>a:hover::after, .nav-box .link .down .tow-link>a.on::after, .nav-box .link .down .tow-link>a:hover::after { width: 10px; } .C-linkBanner .pic { display: flex; justify-content: center; } .C-linkBanner .pic img { height: 230px; object-fit: cover; } .C-linkBanner .intr { padding: 120px 0 60px; } .C-linkBanner .intr>div { width: 100%; margin-bottom: 20px } .C-linkBanner .intr ul { width: 100%; max-width: none; } .C-linkBanner h3 { font-size: 22px; } .C-linkBanner h2 { font-size: 22px; line-height: 1.4; } .C-linkBanner li { font-size: 12px; font-weight: normal; margin-bottom: 0.6em; } .C-case { padding: 40px 30px 13px; } .C-case .intr .title h2 { font-size: 18px; } .C-case .intr .title hr { margin: 15px 0; } .C-case .intr ul { width: 50%; } .C-case .intr ul li { font-size: 12px; padding-left: 13px; } .C-case .intr ul li::before { width: 3px; height: 3px; } .C-case .intr .time { font-size: 60px; line-height: 1; } .C-case .btn { width: 30px; height: 30px; right: 30px; top: 30px; } .C-case .btn span { width: 50%; height: 50%; } .product-title h2 { font-size: 20px; } .product-title hr { height: 1px; margin: 10px 0; } .auto3 .product-title h2 { font-size: 18px; padding-right: 2em; } .product-title p { font-size: 12px; } } @media screen and (max-width:480px) { .C-title { width: 90%; } .info { width: 100%; margin-top: 10px; } .nav { width: 100%; margin-left: 0%; } .search-form { width: 90%; } .search-form input { width: 85%; height: 50px; padding: 10px 30px; font-size: 12px; } .search-form input::placeholder { font-size: 12px; } .search-form button { width: 15%; height: 50px; } .fixed-text { height: 80%; padding: 32px 16px 60px 30px; } .fixed-text .title { font-size: 20px; margin-bottom: 18px; } .fixed-text .scroll-container { font-size: 12px; height: 90%; padding-right: 20px; } .C-case .intr ul { width: 100%; } .product-title h2 { font-size: 20px; padding-right: 4em; } .C-linkBanner .pic img { height: 156px; object-fit: cover; } .C-case .intr .title h2 { font-size: 16px; } }