@charset "UTF-8"; body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, dl, dt, dd, ul, ol, li, pre, form, fieldset, legend, button, input, textarea, th, td { margin: 0; padding: 0; } caption, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { display: block; margin: 0; padding: 0; } h1, h2, h3, h4, h5, h6 { font-size: 100%; } address, cite, dfn, em, var { font-style: normal; } code, kbd, pre, ul:after { content: ""; display: block; clear: both; } li { list-style: none; } a, a:hover, a:link, a:visited, a:active { text-decoration: none; } img { border: 0; } button, input, select, textarea { font-size: 100%; outline: none } table { border-collapse: collapse; border-spacing: 0; } .hide { display: none; } body { -webkit-font-smoothing: antialiased; background-color: #fff; vertical-align: baseline; font-family: "PingFang SC",myFont; -webkit-font-smoothing: antialiased; font-stretch: normal; font-style: normal; font-variant: normal; font-weight: normal; } *, *::before, *::after { box-sizing: border-box; } * { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; font-family: "PingFang SC",myFont; } *:before, *:after { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } *:after { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } html, body { height: 100%; } ::-moz-selection { background: #0042D0; color: #FFF; } ::selection { background: #0042D0; color: #FFF; } ::-webkit-scrollbar-thumb { border-radius: 10px; background-color: #bdbdbd; -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3); } ::-webkit-scrollbar { width: 0px; } a, div, p, span, li, h2, h1, h3 { font-family: "PingFang SC",myFont; } .clr { display: block; clear: both } .clear:after { content: ''; height: 0; line-height: 0; display: block; visibility: hidden; clear: both; } /* video::-webkit-media-controls-timeline { display: none; } */ .mt12 { margin-top: 12px; } .inner { margin: 0 auto; width: 13.62rem; min-width: 9.6rem; } .inner .i-common-top { position: relative; padding-top: 0.72rem; } .inner .i-common-top h3 { font-size: 0.40rem; font-weight: 400; color: #333333; text-align: center; } .inner .i-common-top .more { position: absolute; right: 0; } .inner .i-common-top .more a { float: right; font-size: 0.16rem; font-weight: 400; color: #666666; cursor: pointer; display: flex; align-items: center; } .inner .i-common-top .more a:hover { color: #0042D0; } .inner .i-common-top .more i { margin-left: 4px; width: 14px; height: 14px; display: block; float: right; background-image: url(../image/arrow.png); background-repeat: no-repeat; background-size: 100%; } .inner .i-common-top .more a:hover i { background-image: url(../image/arrow_on.png); } .inner .nav { list-style: none; color: #333 } /**澶撮儴**/ .nav-header{ display: flex; } .header { position: fixed; top: 0; left: 0; width: 100%; z-index: 998; height: 64px; } .header.bg { background: #fff; box-shadow: 0 1px 4px 0 rgba(218, 218, 218, 0.8) } .header .logo { display: block; height: 100%; line-height: 64px; margin-right: 0.8rem; } .header .logo span { display: block; width: 118px; height: 40px; margin: 12px 0; background-image: url(../image/logo.png); background-repeat: no-repeat; background-size: 100%; } .headerw { z-index: 9999; } .headerw .logo { display: block; height: 100%; line-height: 64px; margin-right: 0.8rem; } .headerw .logo span { display: block; width: 118px; height: 40px; margin: 12px 0; background-image: url(../image/logo_home.png); background-repeat: no-repeat; background-size: 100%; } .header .nav { display: flex; } .header .nav li { position: relative; height: 64px; line-height: 64px; } .header .nav li > a { display: block; height: 55px; line-height: 55px; margin: 0 25px; font-size: 14px; color: #333; position: relative; } .headerw .nav li > a { color: #fff; } .header .nav li.child > a { padding-right: 0.38rem; } .minWidth { min-width: 13.6rem; } .header .nav li:hover a { color: #0042D0; } .nav-ul-item-active a { color: #0042D0 !important; } .nav-ul-item-on a.nav-link { color: #0042D0 !important; border-bottom: 3px solid #0042D0; border-radius: 2px; } .nav-ul-item-active a::before { content: ""; position: absolute; top: 0; left: 0; border-bottom: 3px solid #0042D0; width: 0; height: 60px; border-radius: 2px; } .header .nav li:hover a::before { width: 100%; transition: .2s all linear; transition-delay: .1s } .header .nav li > a::before { content: ""; position: absolute; top: 0; left: 0; border-bottom: 3px solid #0042D0; border-radius: 2px; width: 0; height: 55px; } .header .index_navLevel { display: none; min-width: calc(100% + 60px); position: absolute; top: 64px; left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%); background: rgba(255, 255, 255, 0.8000); backdrop-filter: blur(6px); font-size: 14px; text-align: center; line-height: 40px; z-index: 99999; } .header .index_navLevel > dd a { text-align: center; position: relative; padding: 0 10px; white-space: nowrap; color: #333 !important; } .header .index_navLevel > dd a:hover { cursor: pointer; color: #0042D0 !important } .header .langu { display: flex; align-items: center; justify-content: center; flex-direction: center; font-size: 14px; width: 100px; float: right; line-height: 64px; color: #999; } .header .langu img { width: 16px; height: 16px; } .header .langu span { margin-left: 8px; cursor: pointer; } .header .cn { color: #0042D0; margin-right: 8px; } .headerw .cn { color: #fff; margin-right: 8px; } .headerw .cn :before { content: "/"; display: block; position: absolute; top: 0; height: 0; right: -2px; font-size: 12px; } .headerw .en { color: #666; } .header .en { color: #fff; } .header .en:hover { color: #0042D0; } /*棣栭〉*/ .home-view { position: relative; width: 100%; height: 100%;; overflow: hidden; z-index: 1; } .index_sliderItemVideo { width: 100%; left: 0; bottom: 0; height: 100%; object-fit: cover; position: absolute; } .product { display: block; width: 100%; height: 100%; } .qinglifang { position: relative; width: 100%; height: 100%;; overflow: hidden; } .qinglifang_Video { width: 100%; height: 100%; object-fit: cover; } .qinglifang .left .img2 { width: 6.18rem; height: 1.98rem; margin-left: -0.7rem; margin-top: -0.1rem; } .qinglifang .left .qlf-group { background-position: bottom; } @keyframes run { from { background-position-y: 0rem; } to { background-position-y: -99rem; } } .qinglifang .left { display: flex; flex-direction: column; align-items: center; } .qinglifang .left .img1 { width: 1.34rem; height: 0.39rem; background: url('../image/qlf_02.png'); background-repeat: no-repeat; background-size: 100%; display: none; } /* 鍙充晶椋炲叆 */ @keyframes bounceInRight { from, 60%, 75%, 90%, to { animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); } 0% { opacity: 0; transform: translate3d(-500px, 0, 0); } 100% { opacity: 1; transform: none; } } .qinglifang .right { flex: 1; position: absolute; right: 5%; width: 4.8rem; z-index: 2; top: calc(50% - 2.2rem); } .qinglifang .right img { width: 4.19rem; height: 1.48rem; opacity: 0; } .qlf_qp1 { animation: bounceInRight .5s 0.1s linear forwards; -webkit-animation: bounceInRight .5s 0.1s linear forwards; } .qlf_qzt { animation: bounceInRight .8s 0.1s linear forwards; -webkit-animation: bounceInRight .8s 0.1s linear forwards; } .qlf_qs1 { animation: bounceInRight .6s 0.1s linear forwards; -webkit-animation: bounceInRight .6s 0.1s linear forwards; } .qlf_qz1 { animation: bounceInRight .7s 0.1s linear forwards; -webkit-animation: bounceInRight .7s 0.1s linear forwards; } .product #wrapper { transform: translate(-50%, 0); position: absolute; top: 30%; left: 50%; } .product .btn_qinzhen { position: absolute; pointer-events: none; width: 900px; height: 524px; transform: translate(0, 0); top: calc(30%); right: 0; background-image: url(../image/qinzhen_btn.png); background-repeat: no-repeat; background-size: 100%; } .product .btn_lifang { width: 500px; height: 525px; position: absolute; left: 50%; top: calc(30%); transform: translate(-50%, 0); } @media (min-width: 1360px) and (max-width: 1530px) { .btn_qinpan, .btn_qinshi, .btn_qinzhen { width: 700px !important; height: 400px !important; } .product #wrapper { transform: translate(-50%, -50%); position: absolute; top: 50%; left: 50%; } } @media (min-width: 1200px) and (max-width: 1360px) { .btn_qinpan, .btn_qinshi, .btn_qinzhen { width: 630px !important; height: 360px !important; } .product #wrapper { transform: translate(-50%, -50%); position: absolute; top: 50%; left: 50%; } } @media (min-width: 1100px) and (max-width: 1200px) { .btn_qinpan, .btn_qinshi, .btn_qinzhen { width: 600px !important; height: 320px !important; } .product #wrapper { transform: translate(-50%, -50%); position: absolute; top: 50%; left: 50%; } } .product .zoombie { width: 500px; height: 420px; background-image: url("../image/lf.png"); } .pro_flex { display: flex; flex-direction: column; } .pro_flex .pro_left { width: 65%; height: 100%; padding: 1.05rem 0 } .video_mask { position: absolute; width: 65%; height: 100%; padding: 1.05rem 0; z-index: 2; height: 100%; pointer-events: none; } .video_mask img { width: 100%; height: 100%; pointer-events: none; } .pro_flex .itemVideo_qz { width: 100%; /* left: 0; bottom: 0; */ height: 100%; object-fit: contain; } .pageContent { position: relative; /* background:#141724 */ } .pageContent .video_intro { width: 480px; z-index: 1002; cursor: pointer; } .pageContent .video_intro a { display: block; } .pageContent .video_intro a:hover .more i { background-image: url(../image/arrow_on.png); } .pageContent .qin_left { left: 30%; padding-top: 50%; padding-left: 10%; } .pageContent .video_intro .video_intro_title { width: 332px; height: 36px; background-image: url(../image/qinzhen.png); background-repeat: no-repeat; background-size: cover; } .pageContent .video_intro .qinpan { background-image: url(../image/qinpan.png); } .pageContent .video_intro .qinshi { background-image: url(../image/qinshi.png); } .pageContent .video_intro .video_intro_title .more { width: 32px; height: 32px; display: block; float: right; margin-top: 2px; margin-right: -50px; } .pageContent .video_intro .video_intro_title .more a { float: right; font-size: 16px; font-weight: 400; color: #666666; cursor: pointer; display: flex; align-items: center; } .pageContent .video_intro:hover .more a { color: #0042D0; } .pageContent .video_intro .video_intro_title .more i { margin-left: 12px; width: 32px; height: 32px; display: block; float: right; background-image: url(../image/arrow.png); background-repeat: no-repeat; background-size: 100%; } .pageContent .video_intro .video_intro_title .more a:hover i { background-image: url(../image/arrow_on.png); } @media (min-width: 1100px) and (max-width: 1360px) { .pro_flex .pro_right { display: flex; padding-left: 0; padding-right: 24px; align-items: center; width: 35%; height: 100%; } .pageContent .video_intro .video_intro_content { width: 380px; } } .pageContent .video_intro .line { display: block; width: 40px; height: 4px; margin-top: 24px; background: #00A6CB; } .relative_mask { top: 64px } .page_qinshi .video_mask { position: absolute; width: 65%; height: 100%; right: 0; padding: 1.05rem 0; height: 100%; } .page_qinshi .pro_left { display: flex; padding-left: 10%; text-align: right; align-items: center; width: 40%; height: 100%; } .page_qinshi .pro_right { width: 60%; height: 100%; padding: 1.05rem 0 } .news_vidio_box { width: 100%; height: 100%; } #footerOuter { display: none; } .footer { background-color: #0B111A } .footer .bottom { height: 3rem; } .footer .footer-content { display: flex; /* align-items: center; */ justify-content: center; } .footer .footer-content .footer-logo { width: 1.85rem; height: 1.8rem; margin-right: 1.43rem; margin-top: .48rem; } .footer .footer-content ul { flex: 1; border-bottom: #151B25 solid 1px } .footerBox .tableCell { display: block !important; } .linkList { display: flex; margin: 0.40rem 0 0 0; zoom: 1; font-size: 12px } /* .footer-link-h5 { width: 90%; margin: 0 auto; margin-top: 0.24rem; border-top: 1px solid #2D333B; } .footer-link-h5 .title{ font-size: .15rem; padding-left:0.18rem; margin-top:0.18rem; margin-bottom: 0.18rem; color:#fff } .footer-link-h5 .row{ width:100%; position: relative; margin-top:0.18rem; margin-bottom: 0.18rem; height:0.5rem; } .footer-link-h5 .row .item{ width:50%; float:left; position: relative; height:0.5rem; } .footer-link-h5 .row .item img{ vertical-align: middle; } .footer-link-h5 a{ position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 0.13rem; font-weight: 400; color: #FFFFFF; opacity: 0.7; display: block; } */ .linkItem { flex: 1; padding: 10px; list-style-type: none } .linkItemPar { color: #FFF; font-size: 0.20rem; margin-bottom: 0.24rem; text-align: center; } .linkList li:first-child { margin-left: -1rem !important } .linkList li:last-child { /* margin-right:-0.9rem!important */ } .linkWarp { display: block; } .linkWarp dd { font-size: 0.16rem; padding: 0.1rem 0; text-align: center; } .linkHerf { display: inline-block; width: 100%; /* margin: 0.06rem 0; */ white-space: nowrap; color: hsla(0, 0%, 100%, .5); transition: color .3s; } .linkHerf:hover { color: #fff } .news_noLinking { display: inline-block; width: 100%; margin: 0.06rem 0; white-space: nowrap; color: hsla(0, 0%, 100%, .5); } .siteInfo { background: #151B25; box-sizing: border-box; width: 100%; height: 0.84rem; line-height: 0.84rem; } .buttonGroups { display: flex; justify-content: flex-end; align-items: center; height: 0.84rem; } .index_button { box-sizing: border-box; position: relative; color: hsla(0, 0%, 100%, .8); text-align: center; cursor: pointer; padding-left: 28px; font-size: 0.14rem; width: 180px; height: 32px; margin-right: 24px; background: rgba(255, 255, 255, 0.0500); border-radius: 16px; border: 1px solid rgba(255, 255, 255, 0.2000); } .index_icon { position: absolute; width: 20px; height: 16px; top: 8px; left: 16px; background-image: url(../image/wechat.png); background-repeat: no-repeat; background-size: 100%; background-position: 50%; } .index_icon_hover { background-image: url(../image/wechat2.png); } .index_qrCode { position: absolute; display: none; width: 100%; bottom: 0.52rem; left: 0; border-radius: 0.04rem; } .index_qrCode_show { display: block; } .index_siteInfoMsg { font-size: 0.14rem; color: #ddd; display: flex; justify-content: space-between; align-items: center; } .index_siteInfoMsg .address { display: flex; justify-items: center; align-items: center; } .index_siteInfoMsg .address img { width: 16px; height: 16px; margin-right: 8px; } .bnt_active { background-color: #fff; border: 2px solid #333 } .bnt_active span { color: #333 } .clearfix { zoom: 1; } /*鑻辨枃鐗堝ご閮?/ .header-nav{ display: flex; justify-content: space-between; width: 80%; margin: 0 auto; min-width: 8rem; } .header #change-ln{ display:flex; font-size: 14px; height: 55px; } .header #change-ln a{ margin-left: 6px; height: 55px; line-height: 55px; } .header #change-ln img{ align-self: center; width: 16px; height:16px; } .header #change-ln div{ align-self: center; width: 16px; height:16px; background-size: 100%; background-image: url("../image/en/dyy-other.png"); margin-bottom: 2px; } .headerw #change-ln div{ align-self: center; width: 16px; height:16px; background-image: url("../image/en/dyy.png"); background-size: 100%; margin-bottom: 2px; } .headerw #color-choosed{ color:#fff; } .headerw #color-choose{ color:#8894A6; } #color-choosed-other{ color:#265ED7; } #color-choose-other{ color:#353535; } /*鎵嬫満绔?/ .nav-ul-change{ display: flex; }