.rel { position: relative; } .abs { position: absolute; } .fixed { position: fixed; } .regular { font-family: "regular"; } .medium { font-family: "medium"; } .mm { font-family: "mm"; } .mb { font-family: "mb"; } .db { font-family: "db"; } .bg { background-image: linear-gradient(0deg, #c81d1d 0%, #ef1414 100%); background-blend-mode: normal, normal; } .box-shadow { box-shadow: 0 2px 30px rgba(0, 0, 0, 0.1); } .flex { display: flex; display: -webkit-box; /* Chrome 4+, Safari 3.1, iOS Safari 3.2+ */ display: -moz-box; /* Firefox 17- */ display: -webkit-flex; /* Chrome 21+, Safari 6.1+, iOS Safari 7+, Opera 15/16 */ display: -moz-flex; /* Firefox 18+ */ display: -ms-flexbox; /* IE 10 */ } .flex-wrap { flex-flow: wrap; } .flex-between { -webkit-box-pack: justify; -ms-flex-pack: justify; -webkit-justify-content: space-between; justify-content: space-between; } .inline-block { display: inline-block; } .block { display: block; } .hide { display: none; } .txt { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* 一行省略溢出显示省略号*/ .bold { font-weight: 700; } .ligher { font-weight: lighter; } .txt-center { text-align: center; } .txt-left { text-align: left; } .txt-right { text-align: right; } .linear { transition-timing-function: linear; -o-transition-timing-function: linear; -moz-transition-timing-function: linear; -webkit-transition-timing-function: linear; } .ease { transition-timing-function: ease; -o-transition-timing-function: ease; -moz-transition-timing-function: ease; -webkit-transition-timing-function: ease; } .ease-in { transition-timing-function: ease-in; -o-transition-timing-function: ease-in; -moz-transition-timing-function: ease-in; -webkit-transition-timing-function: ease-in; } .ease-out { transition-timing-function: ease-out; -o-transition-timing-function: ease-out; -moz-transition-timing-function: ease-out; -webkit-transition-timing-function: ease-out; } .ease-in-out { transition-timing-function: ease-in-out; -o-transition-timing-function: ease-in-out; -moz-transition-timing-function: ease-in-out; -webkit-transition-timing-function: ease-in-out; } .before { opacity: 0; visibility: hidden; } .after { opacity: 1; visibility: visible; } .upper { text-transform: uppercase; } .middle { vertical-align: middle; } .background { background-size: contain; background-repeat: no-repeat; background-position: center center; } .coverbackground { background-size: cover; background-repeat: no-repeat; background-position: center center; } .concept-wrapper { background: url(../img/conceptbg.jpg) repeat-x left bottom; } .concept-wrapper .main { position: relative; transition: all 1s; -o-transition: all 1s; -moz-transition: all 1s; -webkit-transition: all 1s; } .concept-wrapper .pic { width: 100%; height: 5.5rem; background-repeat: no-repeat; background-size: cover; background-position: center right; transition: all 1s; -o-transition: all 1s; -moz-transition: all 1s; -webkit-transition: all 1s; margin-right: 0; margin-left: auto; } .concept-wrapper .pic.on { width: 100%; } .concept-wrapper .info { width: 420px; position: absolute; left: 0.74rem; top: 50%; transform: translatey(-50%); -o-transform: translatey(-50%); -moz-transform: translatey(-50%); -webkit-transform: translatey(-50%); z-index: 10; } .concept-wrapper h3 { font-size: var(--fs36); line-height: var(--lh48); color: #c80000; margin-bottom: 0.48rem; } .concept-wrapper .brief { font-size: var(--fs16); line-height: var(--lh30); color: #fff; } @media (max-width: 1004px) { .concept-wrapper .pic { width: 100%; height: 5rem; background-position: center center; } .concept-wrapper .info { width: 100%; left: 0; top: 0; transform: none; position: relative; margin-top: 0.6rem; } .concept-wrapper h3 { font-size: var(--fs22); line-height: var(--lh30); margin-bottom: 0.2rem; } .concept-wrapper .brief { line-height: var(--lh30); color: #666; } } .quick-job-box { position: relative; z-index: 10; display: flex; display: -webkit-box; /* Chrome 4+, Safari 3.1, iOS Safari 3.2+ */ display: -moz-box; /* Firefox 17- */ display: -webkit-flex; /* Chrome 21+, Safari 6.1+, iOS Safari 7+, Opera 15/16 */ display: -moz-flex; /* Firefox 18+ */ display: -ms-flexbox; /* IE 10 */ /* input placeholder */ } .quick-job-box .item { position: relative; width: 2.48rem; margin-right: 0.28rem; } .quick-job-box .item:last-child { margin-right: 0; } .quick-job-box .item .caption { position: relative; cursor: pointer; } .quick-job-box .item .caption.on:after { transform: rotate(180deg); } .quick-job-box .item .caption:after { content: ""; width: 0.18rem; height: 100%; background: url(../img/idown3.png) no-repeat center center; position: absolute; right: 0.2rem; top: 0; z-index: 10; transition: all 0.48s; -o-transition: all 0.48s; -moz-transition: all 0.48s; -webkit-transition: all 0.48s; } .quick-job-box .item .caption span { display: inline-block; width: 48%; } .quick-job-box .item .caption span.text { text-align: right; padding-right: 20px; } .quick-job-box .item .list { display: none; position: absolute; width: 100.5%; left: -1px; top: 100%; z-index: 10; border: 1px solid #ededed; background: #fff; max-height: calc(var(--lh60) * 7 + 7px); overflow: auto; border-radius: 0.1rem; padding-right: 2px; /* 滚动条样式 */ /*定义滚动条的轨道颜色、内阴影及圆角*/ /*定义滑块颜色、内阴影及圆角*/ } .quick-job-box .item .list a { display: block; color: #666; font-size: var(--fs16); border-bottom: 1px solid #ededed; line-height: var(--lh60); padding: 0 0.26rem; } .quick-job-box .item .list a:last-child { border-bottom: none; } .quick-job-box .item .list a:hover, .quick-job-box .item .list a.on { color: #c81d1d; } .quick-job-box .item .list::-webkit-scrollbar { width: 2px; /*对垂直流动条有效*/ } .quick-job-box .item .list::-webkit-scrollbar-track { background-color: #f6f6f6; } .quick-job-box .item .list::-webkit-scrollbar-thumb { background-color: #c81d1d; } .quick-job-box ::-webkit-input-placeholder { /* WebKit browsers */ color: #333; font-size: var(--fs16); } .quick-job-box :-moz-placeholder { /* Mozilla Firefox 4 to 18 */ color: #333; font-size: var(--fs16); } .quick-job-box ::-moz-placeholder { /* Mozilla Firefox 19+ */ color: #333; font-size: var(--fs16); } .quick-job-box :-ms-input-placeholder { /* Internet Explorer 10+ */ color: #333; font-size: var(--fs16); } .quick-job-box .text, .quick-job-box .caption { color: #333; font-size: var(--fs16); height: var(--lh60); line-height: var(--lh60); background-color: #ffffff; border-radius: 0.1rem; border: solid 1px #f0f4f2; padding: 0 0.4rem 0 0.26rem; } .quick-job-box .text { width: 100%; } .quick-job-box .submit { display: block; width: 18px; height: 18px; position: absolute; right: 0.2rem; top: 50%; transform: translatey(-50%); -o-transform: translatey(-50%); -moz-transform: translatey(-50%); -webkit-transform: translatey(-50%); z-index: 10; } .quick-job-box .submit svg { vertical-align: top; } .quick-job-box .submit svg path { fill: #c80000; } .job-box { display: flex; display: -webkit-box; /* Chrome 4+, Safari 3.1, iOS Safari 3.2+ */ display: -moz-box; /* Firefox 17- */ display: -webkit-flex; /* Chrome 21+, Safari 6.1+, iOS Safari 7+, Opera 15/16 */ display: -moz-flex; /* Firefox 18+ */ display: -ms-flexbox; /* IE 10 */ flex-flow: wrap; } .job-box .item { width: calc((100% - 1rem) / 3); margin-right: 0.5rem; margin-top: 0.5rem; padding: 0.64rem 0.54rem 0.7rem; cursor: pointer; font-size: 0; background-color: #f9f9f9; border: solid 1px #f2f2f2; transition: all 0.48s; -o-transition: all 0.48s; -moz-transition: all 0.48s; -webkit-transition: all 0.48s; } .job-box .item:nth-child(3n) { margin-right: 0; } .job-box .item:hover { background: #fff; border-color: #fff; box-shadow: 0px 0px 30px 0px rgba(0, 0, 0, 0.08); transform: translatey(-10px); -o-transform: translatey(-10px); -moz-transform: translatey(-10px); -webkit-transform: translatey(-10px); } .job-box .item:hover .imore { background-position: right top; } .job-box .item .title { position: relative; font-size: var(--fs26); color: #393435; font-weight: 700; line-height: var(--lh36); padding-left: 35px; background: url(../img/user.png) no-repeat left top 5px; background-size: 24px; padding-bottom: 0.3rem; } .job-box .item .title:after { content: ''; display: inline-block; width: 20px; height: 3px; position: absolute; left: 0; bottom: 0; z-index: 10; background-color: rgba(204, 204, 204, 0.6); } .job-box .item .brief { color: #999; font-size: 14px; line-height: var(--lh36); margin: 0.28rem auto 0.58rem; } .job-box .item .brief a { color: #999; font-size: 14px; } .job-box .item .brief a:hover { color: #c80000; } .job-box .item .brief span { display: block; } .job-box .item .detail-box { display: none; } .jobModal-box { width: 100%; height: 100%; position: fixed; left: 0; top: 0; align-items: center; z-index: 110; background: rgba(0, 0, 0, 0.5); display: none; } .jobModal-box.on { display: flex; display: -webkit-box; /* Chrome 4+, Safari 3.1, iOS Safari 3.2+ */ display: -moz-box; /* Firefox 17- */ display: -webkit-flex; /* Chrome 21+, Safari 6.1+, iOS Safari 7+, Opera 15/16 */ display: -moz-flex; /* Firefox 18+ */ display: -ms-flexbox; /* IE 10 */ } .jobModal-box .jobbox { width: 1200px; margin: 0 auto; background: #fff; padding: 0.95rem 0 0 1rem; position: relative; } .jobModal-box .jobbox .name { position: relative; font-weight: 700; font-size: var(--fs28); color: #231e37; margin-bottom: 0.32rem; padding-right: 0.32rem; } .jobModal-box .jobbox h2 { font-weight: 700; color: #c81d1d; font-size: 18px; line-height: var(--lh36); } .jobModal-box .jobbox .header { padding-right: 1rem; margin-bottom: 0.4rem; padding-bottom: 0.4rem; border-bottom: 1px solid #f2f2f2; } .jobModal-box .jobbox .brief { color: #999; font-size: 14px; line-height: var(--lh36); } .jobModal-box .jobbox .brief a { color: #999; font-size: 14px; } .jobModal-box .jobbox .brief span { display: inline-block; margin-right: 0.55rem; } .jobModal-box .jobbox .brief span:last-child { margin-right: 0; } .jobModal-box .jobbox .content-box { height: 530px; overflow: auto; padding-right: 1rem; } .jobModal-box .jobbox .content-box::-webkit-scrollbar { width: 6px; } .jobModal-box .jobbox .content-box::-webkit-scrollbar-track { background-color: #e5e5e5; } .jobModal-box .jobbox .content-box::-webkit-scrollbar-thumb { background-color: #c81d1d; } .jobModal-box .jobbox .box { font-size: 14px; color: #999; line-height: var(--lh34); margin-bottom: 0.3rem; } .jobModal-box .jobbox .box:last-child { margin-bottom: 0.8rem; } .jobModal-box .jobbox .box h3 { font-weight: 700; color: #333; line-height: var(--lh40); } .jobModal-box .jobbox .close { display: inline-block; position: absolute; right: 1rem; top: 1.05rem; z-index: 10; } .jobModal-box .jobbox .close img { max-width: 100%; } @media screen and (min-width: 1004px) { .job-box .item:last-child, .job-box .item:nth-child(3n) { margin-right: 0; } .job-box .item:nth-child(-n+3) { margin-top: 0; } } @media (max-width: 1004px) { .quick-job-box { /* input placeholder */ } .quick-job-box .item { width: calc((100% - .6rem) / 3); margin-right: 0.3rem; } .quick-job-box .item .caption:after { background-size: 8px; } .quick-job-box .item .list { max-height: calc(var(--lh40) * 7 + 7px); } .quick-job-box .item .list a { line-height: var(--lh40); padding: 0 0.2rem; font-size: var(--fs14); } .quick-job-box ::-webkit-input-placeholder { /* WebKit browsers */ color: #333; font-size: var(--fs14); } .quick-job-box :-moz-placeholder { /* Mozilla Firefox 4 to 18 */ color: #333; font-size: var(--fs14); } .quick-job-box ::-moz-placeholder { /* Mozilla Firefox 19+ */ color: #333; font-size: var(--fs14); } .quick-job-box :-ms-input-placeholder { /* Internet Explorer 10+ */ color: #333; font-size: var(--fs14); } .quick-job-box .text, .quick-job-box .caption { font-size: var(--fs14); height: var(--lh40); line-height: var(--lh40); padding: 0 0.2rem; } .quick-job-box .submit { width: 14px; height: 14px; right: 0.2rem; } .job-box .item { width: 100%; margin-right: 0; margin-top: 0.3rem; padding: 20px 15px 25px; } .job-box .item:first-child { margin-top: 0; } .job-box .item .title { font-size: var(--fs20); line-height: var(--lh30); padding-left: 24px; padding-bottom: 10px; background-size: 16px; } .job-box .item .title:after { width: 14px; height: 2px; } .job-box .item .brief { line-height: var(--lh30); font-size: 14px; margin-bottom: 20px; } .jobModal-box .jobbox { width: 96%; padding: 0.6rem 0 0.4rem 0.4rem; } .jobModal-box .jobbox .name { font-size: var(--fs20); } .jobModal-box .jobbox h3 { font-size: var(--fs18); line-height: var(--lh30); } .jobModal-box .jobbox .header { padding-right: 0.4rem; padding-bottom: 0.4rem; } .jobModal-box .jobbox .brief { line-height: var(--lh30); } .jobModal-box .jobbox .brief span { display: block; margin-right: 0; } .jobModal-box .jobbox .content-box { height: 45vh; padding-right: 0.4rem; text-align: justify; } .jobModal-box .jobbox .box { line-height: var(--lh30); } .jobModal-box .jobbox .box h3 { line-height: var(--lh30); } .jobModal-box .jobbox .close { right: 0.3rem; top: 35px; } .jobModal-box .jobbox .close img { width: 16px; } } .report-box .item { position: relative; height: 1.2rem; background-color: #f6f6f6; border-radius: 5px; transition: all 0.48s; -o-transition: all 0.48s; -moz-transition: all 0.48s; -webkit-transition: all 0.48s; display: flex; display: -webkit-box; /* Chrome 4+, Safari 3.1, iOS Safari 3.2+ */ display: -moz-box; /* Firefox 17- */ display: -webkit-flex; /* Chrome 21+, Safari 6.1+, iOS Safari 7+, Opera 15/16 */ display: -moz-flex; /* Firefox 18+ */ display: -ms-flexbox; /* IE 10 */ padding: 0 0.82rem 0 0.7rem; align-items: center; margin-bottom: 0.2rem; } .report-box .item:last-child { margin-bottom: 0; } .report-box .item:after { content: ""; width: 100%; height: 2px; background: #c81d1d; position: absolute; left: 0; bottom: 0; z-index: 10; transition: all 0.8s; -o-transition: all 0.8s; -moz-transition: all 0.8s; -webkit-transition: all 0.8s; transform: scale(0) translateZ(0); -o-transform: scale(0) translateZ(0); -moz-transform: scale(0) translateZ(0); -webkit-transform: scale(0) translateZ(0); } .report-box .item:hover { background-color: #fff; box-shadow: 0px 0px 40px 0px rgba(0, 0, 0, 0.08); } .report-box .item:hover:after { transform: scale(1) translateZ(0); -o-transform: scale(1) translateZ(0); -moz-transform: scale(1) translateZ(0); -webkit-transform: scale(1) translateZ(0); } .report-box .item:hover .index-more { color: #fff; background: #c80000; border-color: #c80000; } .report-box .item:hover .index-more span:after { background-position: left center; } .report-box .date-box { margin-right: 0.46rem; } .report-box .date-box p { font-family: "db"; font-size: var(--fs30); color: #666; line-height: var(--lh30); } .report-box .date-box .year { font-size: 14px; color: #333; line-height: var(--lh24); } .report-box .title { font-size: var(--fs20); height: var(--lh36); line-height: var(--lh36); color: #333; transition: all 0.48s; -o-transition: all 0.48s; -moz-transition: all 0.48s; -webkit-transition: all 0.48s; background: url(../img/pdf.png) no-repeat left center; background-size: var(--lh36); padding-left: 0.6rem; padding-right: 1rem; /* 多行省略溢出显示省略号*/ display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1; overflow: hidden; } @media screen and (min-width: 1004px) { .report-box .title { flex: 1; } } @media (max-width: 1004px) { .spcial .quick-job-box .item:nth-child(2) { flex: 1; } .report-box .item { flex-flow: wrap; height: auto; align-items: flex-start; padding: 0.5rem 0.4rem; margin-bottom: 0.3rem; } .report-box .date-box { width: 20%; margin-right: 0; } .report-box .date-box p { font-size: var(--fs22); line-height: var(--lh24); } .report-box .title { width: 80%; font-size: var(--fs18); height: auto; max-height: calc(var(--lh28) * 2); line-height: var(--lh28); background-size: var(--lh24); padding-left: 0.7rem; padding-right: 0; -webkit-line-clamp: 2; background-position: left top 2px; } .report-box .index-more { margin-left: 20%; margin-right: 0; margin-top: 0.3rem; } } .information-wrapper { background: url(../img/investorbg.jpg) repeat-x left bottom; } .information-wrapper .main { display: flex; display: -webkit-box; /* Chrome 4+, Safari 3.1, iOS Safari 3.2+ */ display: -moz-box; /* Firefox 17- */ display: -webkit-flex; /* Chrome 21+, Safari 6.1+, iOS Safari 7+, Opera 15/16 */ display: -moz-flex; /* Firefox 18+ */ display: -ms-flexbox; /* IE 10 */ -webkit-box-pack: justify; -ms-flex-pack: justify; -webkit-justify-content: space-between; justify-content: space-between; align-items: flex-start; } .information-wrapper .content-box { width: 65.625%; } .information-wrapper .name { font-size: var(--fs36); line-height: var(--lh50); color: #333; font-weight: 700; margin-bottom: 0.34rem; } .information-wrapper .content { color: #666; font-size: var(--fs16); line-height: var(--lh32); } .information-wrapper .content strong, .information-wrapper .content b { color: #333; font-size: var(--fs18); } .information-wrapper .pic { position: relative; width: 27.86%; background: #000; } .information-wrapper .pic:hover img { transform: scale(1.05) translateZ(0); -o-transform: scale(1.05) translateZ(0); -moz-transform: scale(1.05) translateZ(0); -webkit-transform: scale(1.05) translateZ(0); } .information-wrapper .pic img { opacity: 0.88; } .information-wrapper .brief { position: absolute; left: 0; top: 0; z-index: 10; width: 100%; font-size: var(--fs18); line-height: var(--lh36); color: #fff; padding: 0.7rem 0.56rem; font-weight: 700; } @media (max-width: 1004px) { .information-wrapper .main { display: block; } .information-wrapper .content-box { width: 100%; } .information-wrapper .name { font-size: var(--fs22); line-height: var(--lh30); } .information-wrapper .content { font-size: var(--fs16); line-height: var(--lh28); } .information-wrapper .content strong, .information-wrapper .content b { font-size: var(--fs17); } .information-wrapper .pic { width: 100%; margin-top: 0.6rem; } .information-wrapper .brief { line-height: var(--lh30); padding: 1rem 0.6rem; } } .play { position: absolute; width: var(--lh80); height: var(--lh80); border-radius: 50%; left: 50%; top: 50%; margin-left: calc(var(--lh80) / 2 * -1); margin-top: calc(var(--lh80) / 2 * -1); z-index: 10; display: flex; display: -webkit-box; /* Chrome 4+, Safari 3.1, iOS Safari 3.2+ */ display: -moz-box; /* Firefox 17- */ display: -webkit-flex; /* Chrome 21+, Safari 6.1+, iOS Safari 7+, Opera 15/16 */ display: -moz-flex; /* Firefox 18+ */ display: -ms-flexbox; /* IE 10 */ align-items: center; cursor: pointer; } .play:before { content: ""; width: 100%; height: 100%; background-image: url(../img/circle.png); background-size: contain; background-repeat: no-repeat; background-position: center center; position: absolute; left: 0; top: 0; z-index: 0; animation: circleAni 4s linear infinite; } .play i { display: block; width: 9px; height: 100%; margin: 0 auto; background-size: contain; background-repeat: no-repeat; background-position: center center; background-image: url(../img/play.png); } .live-box { display: flex; display: -webkit-box; /* Chrome 4+, Safari 3.1, iOS Safari 3.2+ */ display: -moz-box; /* Firefox 17- */ display: -webkit-flex; /* Chrome 21+, Safari 6.1+, iOS Safari 7+, Opera 15/16 */ display: -moz-flex; /* Firefox 18+ */ display: -ms-flexbox; /* IE 10 */ flex-flow: wrap; } .live-box .item { position: relative; width: calc((100% - .96rem) / 3); margin-right: 0.48rem; margin-top: 0.38rem; } .live-box .item:hover .pic img { transform: scale(1.05) translateZ(0); -o-transform: scale(1.05) translateZ(0); -moz-transform: scale(1.05) translateZ(0); -webkit-transform: scale(1.05) translateZ(0); } .live-box .item:hover .title { color: #c81d1d; } .live-box .item a { display: block; } .live-box .title { font-size: var(--fs24); line-height: var(--lh36); height: calc(var(--lh36) * 2); color: #333; /* 多行省略溢出显示省略号*/ display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; margin-top: 0.23rem; } html.act { height: 100vh; overflow: hidden; } .video-modal-wrapper { position: fixed; height: 100%; width: 100%; top: 0; left: 0; z-index: 110; display: none; } .video-modal-wrapper.one { display: block; animation: fadeIn 1.2s ease; } .video-modal-wrapper.one .inner { display: block; animation: fadeInUp50 1.2s 0.2s ease; } .video-modal-wrapper.one.out { animation: fadeOut 1.2s 0.6s ease; } .video-modal-wrapper.one.out .inner { animation: fadeOutUp50 1.2s ease forwards; } .video-modal-wrapper .main { width: 100%; height: 100%; background: rgba(0, 0, 0, 0.7); text-align: center; vertical-align: middle; display: flex; display: -webkit-box; /* Chrome 4+, Safari 3.1, iOS Safari 3.2+ */ display: -moz-box; /* Firefox 17- */ display: -webkit-flex; /* Chrome 21+, Safari 6.1+, iOS Safari 7+, Opera 15/16 */ display: -moz-flex; /* Firefox 18+ */ display: -ms-flexbox; /* IE 10 */ align-items: center; } .video-modal-wrapper .inner { text-align: center; width: 70%; margin: 0 auto; } .video-modal-wrapper .inner video { max-width: 100%; height: auto; display: inline-block; margin: 0 auto; max-height: 80vh; width: auto; } .video-modal-wrapper .box { position: relative; display: inline-block; } .video-modal-wrapper .close { display: inline-block; width: 20px; height: 20px; position: absolute; right: 0; top: -0.5rem; z-index: 10; transition: transform 0.3s; -o-transition: transform 0.3s; -moz-transition: transform 0.3s; -webkit-transition: transform 0.3s; } .video-modal-wrapper .close:hover { transform: rotate(90deg); } .video-modal-wrapper iframe { width: 12rem; height: 80vh; } @keyframes circleAni { 100% { transform: rotate(1turn); } } @media screen and (min-width: 1004px) { .live-box .item:nth-child(-n+3) { margin-top: 0; } .live-box .item:nth-child(3n) { margin-right: 0; } } @media (max-width: 1004px) { .video-modal-wrapper .main { padding: 0 0.3rem; } .video-modal-wrapper .inner { width: 100%; } .play { width: var(--lh40); height: var(--lh40); margin-left: calc(var(--lh40) / 2 * -1); margin-top: calc(var(--lh40) / 2 * -1); } .play i { width: 7px; } .live-box { -webkit-box-pack: justify; -ms-flex-pack: justify; -webkit-justify-content: space-between; justify-content: space-between; } .live-box .item { width: calc((100% - .3rem) / 2); margin-right: 0; margin-top: 0.6rem; } .live-box .item:nth-child(-n+2) { margin-top: 0; } .live-box .title { font-size: var(--fs16); line-height: var(--lh28); max-height: calc(var(--lh28) * 2); height: auto; margin-top: 0.4rem; } } .video-wrapper .brief { font-size: var(--fs30); color: #333333; line-height: var(--lh40); font-weight: 700; text-align: center; margin-bottom: 0.45rem; } .video-wrapper .videos-box { width: 100%; } .video-wrapper .videos-box .pic img { object-fit: cover; } .video-wrapper .videos-box video { position: absolute; left: 0; top: 0; z-index: 1; width: 100%; height: 100%; object-fit: contain; display: none; } .video-wrapper .videos-box .on .pic { opacity: 0; visibility: hidden; } .video-wrapper .videos-box .on video { display: block; } .video-wrapper .videos-box .pic { position: relative; cursor: pointer; transition: all 0.48s; -o-transition: all 0.48s; -moz-transition: all 0.48s; -webkit-transition: all 0.48s; } .video-wrapper .videos-box .pic:before { content: ""; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.3); position: absolute; left: 0; top: 0; z-index: 1; } .video-wrapper .videos-box .swiper-slide { background: #000; } .video-wrapper .thumb-box { position: relative; margin-top: 0.5rem; width: 100%; } .video-wrapper .thumb-box .swiper-container { overflow: hidden; padding-left: 0.4rem; padding-right: 0.4rem; margin-right: -0.4rem; margin-left: -0.4rem; } .video-wrapper .thumb-box .swiper-slide.on .pic { box-shadow: 0px 14px 32px 0px rgba(0, 0, 0, 0.23); } .video-wrapper .thumb-box .swiper-slide.on .name { color: #0066ff; } .video-wrapper .thumb-box .swiper-slide { cursor: pointer; width: calc((100% - 1.2rem) / 4); margin-right: 0.4rem; } .video-wrapper .thumb-box .swiper-slide:last-child { margin-right: 0; } .video-wrapper .thumb-box .swiper-slide:hover .pic img { transform: scale(1.05) translateZ(0); -o-transform: scale(1.05) translateZ(0); -moz-transform: scale(1.05) translateZ(0); -webkit-transform: scale(1.05) translateZ(0); } .video-wrapper .thumb-box .pic img { height: 1.8rem; object-fit: cover; } .video-wrapper .thumb-box .name { font-size: var(--fs18); color: #333; line-height: var(--lh30); height: calc(var(--lh30) * 2); /* 多行省略溢出显示省略号*/ display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; transition: color 0.48s; -o-transition: color 0.48s; -moz-transition: color 0.48s; -webkit-transition: color 0.48s; margin-top: 0.13rem; } .video-wrapper .play { left: 0.8rem; bottom: 0.72rem; margin: 0; top: auto; } .video-wrapper .swiper-btn { top: calc((1.8rem - var(--lh50)) / 2); transform: none; } @media (max-width: 1600px) { .video-wrapper .thumb-box .swiper-slide { margin-bottom: 8px; } } @media (max-width: 1004px) { .video-wrapper .brief { font-size: var(--fs18); line-height: var(--lh30); } .video-wrapper .thumb-box { margin-top: 0.2rem; } .video-wrapper .thumb-box .swiper-container { margin: 0; padding: 0; } .video-wrapper .thumb-box .swiper-slide { width: calc((100% - .4rem) / 3); margin-right: 0.2rem; } .video-wrapper .thumb-box .swiper-slide.on .pic { box-shadow: none; } .video-wrapper .thumb-box .pic img { height: auto; } .video-wrapper .thumb-box .name { font-size: var(--fs14); line-height: var(--lh24); height: calc(var(--lh24) * 2); margin-top: 0.2rem; } .video-wrapper .thumb-box .swiper-container, .video-wrapper .videos-box .pic img { height: auto; } .video-wrapper .play { left: 0.3rem; bottom: 0.3rem; } } .topnews-wrapper { background-color: #f6f7f8; } .topnews-wrapper .swiper-box { background-color: #ffffff; } .topnews-wrapper .swiper-slide { display: flex; display: -webkit-box; /* Chrome 4+, Safari 3.1, iOS Safari 3.2+ */ display: -moz-box; /* Firefox 17- */ display: -webkit-flex; /* Chrome 21+, Safari 6.1+, iOS Safari 7+, Opera 15/16 */ display: -moz-flex; /* Firefox 18+ */ display: -ms-flexbox; /* IE 10 */ -webkit-box-pack: justify; -ms-flex-pack: justify; -webkit-justify-content: space-between; justify-content: space-between; } .topnews-wrapper .swiper-slide:hover .pic img { transform: scale(1.05) translateZ(0); -o-transform: scale(1.05) translateZ(0); -moz-transform: scale(1.05) translateZ(0); -webkit-transform: scale(1.05) translateZ(0); } .topnews-wrapper .swiper-slide:hover .title { color: #c80000; } .topnews-wrapper .pic { width: 48.83%; } .topnews-wrapper .info { width: 51.17%; padding: 0.42rem 0.68rem 0 0.6rem; } .topnews-wrapper .swiper-slide-active .ani { display: block; } .topnews-wrapper .swiper-slide-active .ani.index-more { display: inline-block; } .topnews-wrapper .swiper-slide-active .ani.title, .topnews-wrapper .swiper-slide-active .ani.brief { display: -webkit-box; } .topnews-wrapper .ani.title, .topnews-wrapper .ani.brief, .topnews-wrapper .ani { display: none; } .topnews-wrapper .date-box { animation-delay: 0.1s; } .topnews-wrapper .date-box p { font-family: "db"; font-size: var(--fs48); line-height: var(--lh40); color: #c80000; } .topnews-wrapper .year { font-size: var(--fs18); line-height: var(--lh24); color: #999; } .topnews-wrapper .title { font-family: "medium"; font-size: var(--fs30); line-height: var(--lh48); height: calc(var(--lh48) * 2); color: #333; transition: color 0.48s; -o-transition: color 0.48s; -moz-transition: color 0.48s; -webkit-transition: color 0.48s; animation-delay: 0.2s; /* 多行省略溢出显示省略号*/ display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; margin: 0.15rem auto 0.18rem; } .topnews-wrapper .brief { font-size: var(--fs16); line-height: var(--lh30); height: calc(var(--lh30) * 2); color: #333; animation-delay: 0.3s; /* 多行省略溢出显示省略号*/ display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; margin-bottom: 0.5rem; } .topnews-wrapper .index-more { animation-delay: 0.4s; } .topnews-wrapper .swiper-container .swiper-pagination { right: 0.68rem; bottom: 1.1rem; width: auto; left: auto; text-align: right; } .topnews-wrapper .swiper-container .swiper-pagination .swiper-pagination-bullet { width: 0.13rem; height: 0.13rem; background-color: #e1e1e1; margin: 0 0.1rem; opacity: 1; } .topnews-wrapper .swiper-container .swiper-pagination .swiper-pagination-bullet:last-child { margin-right: 0; } .topnews-wrapper .swiper-container .swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active { background-color: #c80000; } .topnews-wrapper .swiper-container .swiper-pagination .swiper-pagination-bullet:focus, .topnews-wrapper .swiper-container .swiper-pagination .swiper-pagination-bullet:active, .topnews-wrapper .swiper-container .swiper-pagination .swiper-pagination-bullet:link { outline: none; } @media (max-width: 1004px) { .topnews-wrapper .swiper-slide { display: block; } .topnews-wrapper .swiper-container { padding-bottom: 0.8rem; } .topnews-wrapper .pic { width: 100%; } .topnews-wrapper .info { width: 100%; padding: 0.6rem 0.48rem; } .topnews-wrapper .date-box p { font-size: var(--fs24); line-height: var(--lh30); } .topnews-wrapper .year { font-size: var(--fs16); } .topnews-wrapper .title { font-size: var(--fs18); line-height: var(--lh30); height: calc(var(--lh30) * 2); } .topnews-wrapper .brief { line-height: var(--lh26); height: calc(var(--lh26) * 2); margin-bottom: 0.5rem; } .topnews-wrapper .swiper-container .swiper-pagination { bottom: 0.5rem; right: 0; text-align: center; width: 100%; } .topnews-wrapper .swiper-container .swiper-pagination .swiper-pagination-bullet { width: 0.18rem; height: 0.18rem; margin: 0 0.1rem; } } .news-wrapper { padding-top: 0.9rem; } .newsinfo-wrapper { padding-top: 86px; } .newsinfo-wrapper .main { background: #f8f8f8; border-top: 1px solid #c80000; } .newsinfo-wrapper .main .wrap { display: flex; display: -webkit-box; /* Chrome 4+, Safari 3.1, iOS Safari 3.2+ */ display: -moz-box; /* Firefox 17- */ display: -webkit-flex; /* Chrome 21+, Safari 6.1+, iOS Safari 7+, Opera 15/16 */ display: -moz-flex; /* Firefox 18+ */ display: -ms-flexbox; /* IE 10 */ } .newsinfo-wrapper .content-box { background: #fff; padding-top: 1.38rem; width: calc(100% - 338px); } .newsinfo-wrapper .top { text-align: center; margin-bottom: 0.56rem; } .newsinfo-wrapper .title { font-size: var(--fs48); line-height: var(--lh60); color: #333; font-weight: 700; width: 720px; margin: 0 auto 0.26rem; } .newsinfo-wrapper .date { font-size: var(--fs18); line-height: var(--lh24); color: #999; } .newsinfo-wrapper .content { font-size: var(--fs18); line-height: var(--lh34); color: #333; padding: 0 1.38rem; } .newsinfo-wrapper .other { width: 338px; padding: 0.4rem 0.48rem 1rem 0.54rem; } .newsinfo-wrapper .caption { font-size: var(--fs18); color: #0066ff; font-weight: 700; line-height: var(--lh30); margin-bottom: 0.1rem; } .newsinfo-wrapper .list a { display: block; margin-bottom: 0.33rem; } .newsinfo-wrapper .list a:hover .pic img { transform: scale(1.05) translateZ(0); -o-transform: scale(1.05) translateZ(0); -moz-transform: scale(1.05) translateZ(0); -webkit-transform: scale(1.05) translateZ(0); } .newsinfo-wrapper .list a:hover h3 { color: #c80000; } .newsinfo-wrapper .list h3 { font-size: var(--fs16); line-height: var(--lh30); color: #666; transition: color 0.48s; -o-transition: color 0.48s; -moz-transition: color 0.48s; -webkit-transition: color 0.48s; max-height: calc(var(--lh30) * 3); /* 多行省略溢出显示省略号*/ display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; margin-top: 0.17rem; font-weight: 500; } .newsinfo-wrapper .relative-btn { background: #f8f8f8; padding-top: 1.36rem; display: flex; display: -webkit-box; /* Chrome 4+, Safari 3.1, iOS Safari 3.2+ */ display: -moz-box; /* Firefox 17- */ display: -webkit-flex; /* Chrome 21+, Safari 6.1+, iOS Safari 7+, Opera 15/16 */ display: -moz-flex; /* Firefox 18+ */ display: -ms-flexbox; /* IE 10 */ -webkit-box-pack: justify; -ms-flex-pack: justify; -webkit-justify-content: space-between; justify-content: space-between; } .newsinfo-wrapper .relative-btn p { position: relative; display: flex; display: -webkit-box; /* Chrome 4+, Safari 3.1, iOS Safari 3.2+ */ display: -moz-box; /* Firefox 17- */ display: -webkit-flex; /* Chrome 21+, Safari 6.1+, iOS Safari 7+, Opera 15/16 */ display: -moz-flex; /* Firefox 18+ */ display: -ms-flexbox; /* IE 10 */ align-items: center; width: calc((100% - .56rem) / 2); height: 0.8rem; background-color: #ffffff; transition: all 0.48s; -o-transition: all 0.48s; -moz-transition: all 0.48s; -webkit-transition: all 0.48s; padding: 0 0.32rem; } .newsinfo-wrapper .relative-btn p:hover { box-shadow: 0px 4px 30px 0px rgba(0, 0, 0, 0.1); } .newsinfo-wrapper .relative-btn p:hover a { color: #0162eb; } .newsinfo-wrapper .relative-btn p:hover:after { transform: scale(1) translateZ(0); -o-transform: scale(1) translateZ(0); -moz-transform: scale(1) translateZ(0); -webkit-transform: scale(1) translateZ(0); } .newsinfo-wrapper .relative-btn p:after { content: ""; width: 100%; height: 1px; background: #0162eb; position: absolute; left: 0; bottom: 0; z-index: 1; transform: scale(0) translateZ(0); -o-transform: scale(0) translateZ(0); -moz-transform: scale(0) translateZ(0); -webkit-transform: scale(0) translateZ(0); transition: all 0.48s; -o-transition: all 0.48s; -moz-transition: all 0.48s; -webkit-transition: all 0.48s; } .newsinfo-wrapper .relative-btn p, .newsinfo-wrapper .relative-btn p a { font-size: var(--fs16); color: #333; } .newsinfo-wrapper .relative-btn strong { font-weight: 500; margin-right: 0.1rem; } .newsinfo-wrapper .relative-btn a { max-width: 80%; /* 多行省略溢出显示省略号*/ display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; } @media (max-width: 1004px) { .newsinfo-wrapper { padding-top: 1rem; } .newsinfo-wrapper .main .wrap { display: block; padding: 0; } .newsinfo-wrapper .content-box { padding-top: 0.6rem; width: 100%; } .newsinfo-wrapper .top { margin-bottom: 0.48rem; } .newsinfo-wrapper .title { font-size: var(--fs22); line-height: var(--lh36); width: 100%; } .newsinfo-wrapper .date { font-size: var(--fs14); } .newsinfo-wrapper .content { font-size: var(--fs16); line-height: var(--lh28); padding: 0 var(--offset); } .newsinfo-wrapper .other { width: 100%; padding: 0.6rem 0.3rem 0; text-align: center; } .newsinfo-wrapper .caption { text-align: left; margin-bottom: 0.2rem; } .newsinfo-wrapper .list { text-align: left; } .newsinfo-wrapper .list a { margin-bottom: 0.4rem; } .newsinfo-wrapper .list h3 { margin-top: 0.24rem; } .newsinfo-wrapper .relative-btn { padding: 0.3rem 0.3rem 0; display: block; } .newsinfo-wrapper .relative-btn p { width: 100%; height: 1.1rem; padding: 0 0.3rem; margin-bottom: 0.3rem; } .newsinfo-wrapper .relative-btn p:last-child { margin-bottom: 0; } .newsinfo-wrapper .relative-btn p, .newsinfo-wrapper .relative-btn p a { font-size: var(--fs14); } .newsinfo-wrapper .relative-btn a { max-width: 80%; } } .case-box .item { display: flex; display: -webkit-box; /* Chrome 4+, Safari 3.1, iOS Safari 3.2+ */ display: -moz-box; /* Firefox 17- */ display: -webkit-flex; /* Chrome 21+, Safari 6.1+, iOS Safari 7+, Opera 15/16 */ display: -moz-flex; /* Firefox 18+ */ display: -ms-flexbox; /* IE 10 */ } .case-box .item:hover .pic img { transform: scale(1.05) translateZ(0); -o-transform: scale(1.05) translateZ(0); -moz-transform: scale(1.05) translateZ(0); -webkit-transform: scale(1.05) translateZ(0); } .case-box .item:hover .info { background: #f5f5f5; } .case-box .item:hover .title:after { background-size: 100% 0.08rem; background-position: 0 100%; } .case-box .pic, .case-box .info { width: 50%; } .case-box .info { display: flex; display: -webkit-box; /* Chrome 4+, Safari 3.1, iOS Safari 3.2+ */ display: -moz-box; /* Firefox 17- */ display: -webkit-flex; /* Chrome 21+, Safari 6.1+, iOS Safari 7+, Opera 15/16 */ display: -moz-flex; /* Firefox 18+ */ display: -ms-flexbox; /* IE 10 */ align-items: center; background: #fff; transition: all 0.68s; -o-transition: all 0.68s; -moz-transition: all 0.68s; -webkit-transition: all 0.68s; padding-top: 0.6rem; padding-bottom: 0.6rem; } .case-box .inner { width: 100%; } .case-box .title { position: relative; font-weight: 700; font-size: var(--fs36); line-height: var(--lh50); color: #333; transition: color 0.48s; -o-transition: color 0.48s; -moz-transition: color 0.48s; -webkit-transition: color 0.48s; display: inline-block; } .case-box .title:after { content: ""; width: 100%; height: 0.08rem; position: absolute; left: 0; bottom: 0.05rem; z-index: 0; background: url(../img/line.jpg) no-repeat; background-size: 0 0.08rem; background-position: 100% 100%; transition: background-size 0.7s ease; } .case-box .title i { position: relative; z-index: 10; } .case-box .desc { font-size: var(--fs16); line-height: var(--lh30); min-height: calc(var(--lh30) * 3); color: #666; margin: 0.23rem auto 0.32rem; } @media screen and (min-width: 1004px) { .case-box .item:nth-child(odd) { flex-direction: row-reverse; } .case-box .item:nth-child(odd) .info { padding-left: var(--offset); padding-right: var(--padding); } .case-box .item:nth-child(even) .info { padding-right: var(--offset); padding-left: var(--padding); } } @media (max-width: 1004px) { .case-box .item { display: block; margin-bottom: 0.8rem; } .case-box .item:last-child { margin-bottom: 0; } .case-box .pic, .case-box .info { width: 100%; } .case-box .info { display: block; padding: 0.6rem 0.3rem 0; } .case-box .title { font-size: var(--fs20); line-height: var(--lh30); } .case-box .title:after { bottom: 0.1rem; } .case-box .desc { line-height: var(--lh28); min-height: calc(var(--lh28) * 3); margin: 0.23rem auto 0.32rem; } } .section { padding-top: 1.1rem; } .section:last-child { padding-bottom: 1.1rem; } .section .content { font-size: var(--fs18); color: #333; } .section table { width: 100%; } .section table tr { padding-bottom: 0.1rem; } .section table tr:nth-child(even) td { background-color: #f5f5f5; } .section table td { height: 1.16rem; padding: 0.36rem; } .section table strong { font-size: var(--fs24); } .page-title { line-height: 0.7rem; background-color: #c80000; color: #fff; font-size: var(--fs30); padding: 0 0.38rem; letter-spacing: 2px; font-weight: 700; margin-bottom: 0.86rem; padding-right: 0.36rem; } .page-title a { display: inline-block; color: #fff; float: right; font-size: var(--fs18); background: url(../img/right2.png) no-repeat right center; background-size: 9px; padding-right: 18px; font-weight: 500; } .page-title a:hover { text-decoration: underline; } .goodsinfo-wrapper-1 { padding-bottom: 76px; background: url(../img/goodsinfobg.jpg) no-repeat center center; background-size: cover; } .goodsinfo-wrapper-1 .wrap { display: flex; display: -webkit-box; /* Chrome 4+, Safari 3.1, iOS Safari 3.2+ */ display: -moz-box; /* Firefox 17- */ display: -webkit-flex; /* Chrome 21+, Safari 6.1+, iOS Safari 7+, Opera 15/16 */ display: -moz-flex; /* Firefox 18+ */ display: -ms-flexbox; /* IE 10 */ } .goodsinfo-wrapper-1 .pic { width: 50%; } .goodsinfo-wrapper-1 .info { width: 50%; padding-left: 1.06rem; } .goodsinfo-wrapper-1 .name { font-size: var(--fs36); line-height: var(--lh48); color: #333; font-weight: 700; padding-bottom: 0.34rem; border-bottom: 1px solid rgba(0, 0, 0, 0.1); } .goodsinfo-wrapper-1 .content { font-size: var(--fs18); line-height: var(--lh30); color: #333; margin: 0.56rem auto 0.68rem; } .goodsinfo-wrapper-1 .content img { margin: 0; } @media (max-width: 1004px) { .section { padding-top: 1rem; } .section:last-child { padding-bottom: 1rem; } .section .content { font-size: var(--fs16); } .section table td { height: 1rem; padding: 0.24rem; } .section table strong { font-size: var(--fs18); } .page-title { line-height: 1rem; font-size: var(--fs18); margin-bottom: 0.48rem; padding-right: 0.3rem; } .page-title a { font-size: var(--fs14); background-size: 7px; padding-right: 12px; } .goodsinfo-wrapper-1 { padding-bottom: 1rem; } .goodsinfo-wrapper-1 .wrap { display: block; } .goodsinfo-wrapper-1 .pic { width: 100%; } .goodsinfo-wrapper-1 .info { width: 100%; padding-left: 0; margin-top: 0.8rem; } .goodsinfo-wrapper-1 .name { font-size: var(--fs22); line-height: var(--lh36); } .goodsinfo-wrapper-1 .content { font-size: var(--fs16); margin: 0.48rem auto; line-height: var(--lh28); } } .goodsinfo-wrapper-4 .swiper-box { text-align: center; } .goodsinfo-wrapper-4 .swiper-container { overflow: hidden; position: relative; } .goodsinfo-wrapper-4 .hasSwiper .swiper-container { padding-bottom: 1rem; } .goodsinfo-wrapper-4 .hasSwiper .swiper-container .swiper-pagination { bottom: 0; } .goodsinfo-wrapper-4 .swiper-slide { display: block; width: calc((100% - .54rem) / 4); background-color: #fff; border-radius: 0.1rem; border: solid 1px #eaeaea; margin-right: 0.18rem; padding: 0.2rem; height: auto; } .goodsinfo-wrapper-4 .swiper-slide:last-child { margin-right: 0; } .goodsinfo-wrapper-4 .swiper-slide:hover .pic img { transform: scale(1.05) translateZ(0); -o-transform: scale(1.05) translateZ(0); -moz-transform: scale(1.05) translateZ(0); -webkit-transform: scale(1.05) translateZ(0); } .goodsinfo-wrapper-4 .swiper-slide:hover .title { color: #c80000; } .goodsinfo-wrapper-4 .swiper-slide:hover .icon-more:after { transform: scale(1) translateZ(0); -o-transform: scale(1) translateZ(0); -moz-transform: scale(1) translateZ(0); -webkit-transform: scale(1) translateZ(0); opacity: 1; visibility: visible; } .goodsinfo-wrapper-4 .swiper-slide:hover .icon-more i { background-position: left center; } .goodsinfo-wrapper-4 .info { padding: 0.15rem 0.15rem 0.1rem; } .goodsinfo-wrapper-4 .title { font-size: var(--fs24); line-height: var(--lh30); color: #333; font-family: "medium"; transition: color 0.48s; -o-transition: color 0.48s; -moz-transition: color 0.48s; -webkit-transition: color 0.48s; margin-bottom: 4px; } .goodsinfo-wrapper-4 p { font-size: 14px; line-height: var(--lh30); color: #666; } .goodsinfo-wrapper-4 .icon-more { margin: 0.22rem auto 0; } .goodsinfo-wrapper-4 .index-more { margin-top: 1.36rem; } @media (max-width: 1004px) { .goodsinfo-wrapper-4 .swiper-container { padding-bottom: 0.6rem; } .goodsinfo-wrapper-4 .swiper-slide { width: calc((100% - .3rem) / 2); margin-right: 0.3rem; padding: 0.24rem; } .goodsinfo-wrapper-4 .info { padding: 0.4rem 0; } .goodsinfo-wrapper-4 .title { font-size: var(--fs18); line-height: var(--lh28); } .goodsinfo-wrapper-4 p { line-height: var(--lh24); } .goodsinfo-wrapper-4 .index-more { margin-top: 0.8rem; } } .goods-wrapper { padding-top: 66px; background: #f6f7fa url(../img/goodsbg.jpg) no-repeat center top; background-size: 100%; } .goods-wrapper .wrap { position: relative; } .goods-wrapper .wrapper { display: flex; display: -webkit-box; /* Chrome 4+, Safari 3.1, iOS Safari 3.2+ */ display: -moz-box; /* Firefox 17- */ display: -webkit-flex; /* Chrome 21+, Safari 6.1+, iOS Safari 7+, Opera 15/16 */ display: -moz-flex; /* Firefox 18+ */ display: -ms-flexbox; /* IE 10 */ -webkit-box-pack: justify; -ms-flex-pack: justify; -webkit-justify-content: space-between; justify-content: space-between; align-items: flex-start; } .goods-wrapper .goods-box { width: calc(100% - 320px - 0.67rem); } .goods-wrapper .breadcrumbs { position: absolute; right: 0; top: -20px; z-index: 10; } .filter-box { width: 320px; position: sticky; top: 2rem; } .filter-box ul { list-style-type: none; } .filter-box li { background-color: #f4f4f4; border: solid 1px #eaeaea; } .filter-box li a { white-space: nowrap; } .filter-box h2.on a { background: #c80000; color: #fff; } .filter-box h2.on a:before { opacity: 0; visibility: hidden; } .filter-box h2.on a:after { filter: brightness(0) invert(1); } .filter-box h2.cat.on a:after { transform: rotate(90deg); } .filter-box h2 a { position: relative; display: block; font-size: var(--fs20); line-height: 0.68rem; color: #333; font-weight: 700; padding-left: 0.28rem; padding-right: 0.6rem; } .filter-box h2 a:before { content: ""; position: absolute; left: 0; top: 33.82%; z-index: 1; width: 2px; height: 32.36%; background-color: #e51414; } .filter-box h2 a:after { content: ""; width: 0.09rem; height: 100%; position: absolute; right: 0.2rem; top: 0; z-index: 10; background-size: contain; background-repeat: no-repeat; background-position: center center; background-image: url(../img/right3.png); transition: all 0.48s; -o-transition: all 0.48s; -moz-transition: all 0.48s; -webkit-transition: all 0.48s; } .filter-box .detail { display: none; padding: 0.2rem 0.3rem 0.66rem; background-color: #fff; } .filter-box .item > a { font-family: "medium"; font-size: var(--fs18); line-height: var(--lh48); color: #333; padding-left: 20px; position: relative; } .filter-box .item > a.on { color: #c80000; } .filter-box .item > a.on:before { filter: inherit; } .filter-box .item > a:before { content: ""; width: 0.09rem; height: 100%; background: url(../img/right4.png) no-repeat left center; background-size: contain; position: absolute; left: 0; top: 0; z-index: 1; filter: brightness(0) invert(0.8); transition: all 0.48s; -o-transition: all 0.48s; -moz-transition: all 0.48s; -webkit-transition: all 0.48s; } .filter-box .child { padding-left: 20px; display: none; } .filter-box .child a { font-size: var(--fs16); line-height: var(--lh36); color: #666; background: url(../img/line.jpg) no-repeat; background-size: 0 1px; background-position: 100% 100%; transition: background-size 0.7s ease; } .filter-box .child a.on { color: #c80000; background-size: 100% 1px; background-position: 0 100%; } .filterIcon, .filter-foot { display: none; } .goods-box ul { list-style-type: none; display: flex; display: -webkit-box; /* Chrome 4+, Safari 3.1, iOS Safari 3.2+ */ display: -moz-box; /* Firefox 17- */ display: -webkit-flex; /* Chrome 21+, Safari 6.1+, iOS Safari 7+, Opera 15/16 */ display: -moz-flex; /* Firefox 18+ */ display: -ms-flexbox; /* IE 10 */ flex-flow: wrap; } .goods-box li { width: calc((100% - .36rem) / 3); text-align: center; background-color: #ffffff; border-radius: 0.1rem; border: solid 1px #eaeaea; margin-top: 0.52rem; margin-right: 0.18rem; overflow: hidden; } .goods-box li:hover .pic img { transform: scale(1.05) translateZ(0); -o-transform: scale(1.05) translateZ(0); -moz-transform: scale(1.05) translateZ(0); -webkit-transform: scale(1.05) translateZ(0); } .goods-box li:hover .name { color: #c81d1d; } .goods-box li:hover .icon-more:after { transform: scale(1) translateZ(0); -o-transform: scale(1) translateZ(0); -moz-transform: scale(1) translateZ(0); -webkit-transform: scale(1) translateZ(0); opacity: 1; visibility: visible; } .goods-box li:hover .icon-more i { background-position: left center; } .goods-box li a { display: block; padding: 15px 10px 28px; } .goods-box .info { margin-top: 0.35rem; padding: 0 10px; } .goods-box .name, .goods-box p { /* 多行省略溢出显示省略号*/ display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1; overflow: hidden; } .goods-box .name { font-size: var(--fs24); line-height: var(--lh30); height: var(--lh30); color: #333; transition: color 0.48s; -o-transition: color 0.48s; -moz-transition: color 0.48s; -webkit-transition: color 0.48s; } .goods-box p { font-size: 14px; line-height: var(--lh24); height: var(--lh24); color: #666; margin: 2px auto 0.15rem; } .goods-box .icon-more { margin: 0 auto; } @media screen and (min-width: 1004px) { .filter-box h2:not(.on):hover a, .filter-box h2.cat:not(.on):hover a { color: #c80000; } .filter-box .child a:hover { color: #c80000; background-size: 100% 1px; background-position: 0 100%; } .filter-box .item > a:hover { color: #c80000; } .filter-box .item > a:hover:before { filter: brightness(1); } .goods-box li:nth-child(-n+3) { margin-top: 0; } .goods-box li:nth-child(3n) { margin-right: 0; } } @media (max-width: 1440px) { .filter-box { width: 290px; } .goods-wrapper .goods-box { width: calc(100% - 290px - 0.56rem); } } @media (max-width: 1004px) { .filterIcon { width: 0.76rem; height: 0.76rem; border-radius: 50%; border: 1px solid #c81d1d; position: fixed; right: 0.2rem; bottom: calc(15% + 1rem); z-index: 20; background: #fff; display: block; } .filterIcon svg { width: 50%; margin: 0 auto; display: block; position: relative; height: 100%; } .filterIcon svg path { fill: #c81d1d; } .filter-box { position: fixed; left: 0; z-index: 204; width: 100%; background: rgba(0, 0, 0, 0.9); bottom: 0; height: 100%; top: auto; display: none; } .filter-box.on .main { display: block; animation: fadeInUp50 0.5s ease; } .filter-box.remove .main { animation: fadeOutUp50 0.5s ease; } .filter-box .filter-foot { display: block; position: absolute; left: 0; bottom: 0; z-index: 10; width: 100%; background: #fff; padding: 0.5rem; box-shadow: 0 -4px 8px 0 rgba(0, 0, 0, 0.04), 0 -8px 16px 0 rgba(0, 0, 0, 0.04); } .filter-box .filter-foot a { display: block; margin: 0 auto; height: 0.88rem; line-height: 0.84rem; border-radius: 0.44rem; font-size: var(--fs18); text-align: center; background-color: #c81d1d; color: #fffefe; transition: all 0.4s; -o-transition: all 0.4s; -moz-transition: all 0.4s; -webkit-transition: all 0.4s; } .filter-box .box { display: flex; display: -webkit-box; /* Chrome 4+, Safari 3.1, iOS Safari 3.2+ */ display: -moz-box; /* Firefox 17- */ display: -webkit-flex; /* Chrome 21+, Safari 6.1+, iOS Safari 7+, Opera 15/16 */ display: -moz-flex; /* Firefox 18+ */ display: -ms-flexbox; /* IE 10 */ height: 100%; align-items: flex-end; } .filter-box .main { display: none; position: relative; background: #fff; padding: 0.6rem 0 2rem 0.3rem; height: auto; max-height: calc(100vh - 1.4rem); width: 100%; padding: 0.48rem 0 2.4rem 0.48rem; border-radius: 5px 5px 0 0; } .filter-box ul { max-height: 70vh; overflow-y: auto; overflow-x: hidden; } .filter-box ul::-webkit-scrollbar { width: 3px; border-radius: 3px; } .filter-box ul::-webkit-scrollbar-track { background-color: #eee; } .filter-box ul::-webkit-scrollbar-thumb { background-color: #c81d1d; } .filter-box li { background: #fff; border-width: 0 0 1px 0; } .filter-box h2.on a { background: #fff; color: #c81d1d; } .filter-box h2.on a:after { filter: brightness(1); } .filter-box h2 a { font-size: var(--fs18); line-height: 1rem; padding-left: 0; padding-right: 0.6rem; } .filter-box h2 a:before { display: none; } .filter-box h2 a:after { content: ""; width: 8px; right: 0.3rem; } .filter-box .detail { display: none; padding: 0 0.3rem 0.2rem; } .filter-box .item > a { font-size: var(--fs17); line-height: var(--lh40); padding-left: 0.3rem; } .filter-box .item > a:before { width: 6px; } .filter-box .child { padding-left: 0.3rem; } .filter-box .child a { line-height: var(--lh30); } .goods-wrapper .breadcrumbs { top: -1rem; } .goods-wrapper .goods-box { width: 100%; } .goods-box ul { -webkit-box-pack: justify; -ms-flex-pack: justify; -webkit-justify-content: space-between; justify-content: space-between; } .goods-box li { width: calc((100% - .3rem) / 2); margin-top: 0.3rem; margin-right: 0; } .goods-box li:nth-child(-n+2) { margin-top: 0; } .goods-box li a { padding: 0.3rem; } .goods-box .info { margin-top: 0.48rem; padding: 0 0.1rem; } .goods-box p { -webkit-line-clamp: 2; } .goods-box .name { font-size: var(--fs18); line-height: var(--lh36); height: var(--lh36); } .goods-box p { margin: 2px auto 0.3rem; height: calc(var(--lh24) * 2); } } .contact-wrapper { border-top: 1px solid #c80000; } .form-box { display: flex; display: -webkit-box; /* Chrome 4+, Safari 3.1, iOS Safari 3.2+ */ display: -moz-box; /* Firefox 17- */ display: -webkit-flex; /* Chrome 21+, Safari 6.1+, iOS Safari 7+, Opera 15/16 */ display: -moz-flex; /* Firefox 18+ */ display: -ms-flexbox; /* IE 10 */ -webkit-box-pack: justify; -ms-flex-pack: justify; -webkit-justify-content: space-between; justify-content: space-between; flex-flow: wrap; /* input placeholder */ } .form-box .left { display: flex; display: -webkit-box; /* Chrome 4+, Safari 3.1, iOS Safari 3.2+ */ display: -moz-box; /* Firefox 17- */ display: -webkit-flex; /* Chrome 21+, Safari 6.1+, iOS Safari 7+, Opera 15/16 */ display: -moz-flex; /* Firefox 18+ */ display: -ms-flexbox; /* IE 10 */ flex-flow: wrap; -webkit-box-pack: justify; -ms-flex-pack: justify; -webkit-justify-content: space-between; justify-content: space-between; width: 45.31%; } .form-box .left .group { display: flex; display: -webkit-box; /* Chrome 4+, Safari 3.1, iOS Safari 3.2+ */ display: -moz-box; /* Firefox 17- */ display: -webkit-flex; /* Chrome 21+, Safari 6.1+, iOS Safari 7+, Opera 15/16 */ display: -moz-flex; /* Firefox 18+ */ display: -ms-flexbox; /* IE 10 */ align-items: center; width: 43.1%; border-bottom: solid 1px rgba(0, 0, 0, 0.3); padding-bottom: 8px; margin-top: 0.45rem; } .form-box .left label { margin-right: 8px; } .form-box .right { width: 50%; } .form-box .right label { padding-bottom: 8px; } .form-box label { display: block; line-height: var(--lh44); } .form-box img { width: 0.26rem; margin-right: 6px; } .form-box .btn-box { width: 100%; } .form-box .text, .form-box .msg { font-size: var(--fs16); color: #333; } .form-box .text { flex: 1; overflow: hidden; line-height: var(--lh44); } .form-box .msg { width: 100%; resize: none; height: 95px; border: solid 1px rgba(0, 0, 0, 0.3); line-height: var(--lh30); font-family: inherit; padding: 0.1rem 0.15rem; } .form-box ::-webkit-input-placeholder { /* WebKit browsers */ color: #999; font-size: var(--fs16); } .form-box :-moz-placeholder { /* Mozilla Firefox 4 to 18 */ color: #999; font-size: var(--fs16); } .form-box ::-moz-placeholder { /* Mozilla Firefox 19+ */ color: #999; font-size: var(--fs16); } .form-box :-ms-input-placeholder { /* Internet Explorer 10+ */ color: #999; font-size: var(--fs16); } @media screen and (min-width: 1004px) { .form-box .left .group:nth-child(-n+2) { margin-top: 0; } } @media (max-width: 1004px) { .form-box .left { width: 100%; } .form-box .left .group { width: 100%; } .form-box .right { width: 100%; margin-top: 0.2rem; } .form-box img { width: 0.4rem; position: relative; vertical-align: middle; top: -1px; } .form-box .msg { height: 95px; line-height: var(--lh28); padding: 0.2rem 0.3rem; } } .about-wrapper-1 { overflow: hidden; } .about-wrapper-1 .page-caption-box { margin-bottom: 0; } .about-wrapper-1 .introduction-box { text-align: right; margin: -0.2rem auto 0.5rem; } .about-wrapper-1 .introduction-box .title { font-size: var(--fs36); color: #c80000; margin-bottom: 4px; font-weight: 700; } .about-wrapper-1 .introduction-box .title i { display: inline-block; width: 24px; height: 25px; background-size: contain; background-repeat: no-repeat; background-position: center center; background-image: url(../img/icon2.png); margin: 0 5px; vertical-align: middle; position: relative; top: -1px; } .about-wrapper-1 .introduction-box p { font-size: var(--fs24); color: #cdcccc; } .about-wrapper-1 .main { position: relative; } .about-wrapper-1 .main.animated:after { width: 45.83%; } .about-wrapper-1 .main:after { content: ""; height: 100%; position: absolute; left: 54.17%; top: 0; z-index: 0; background-color: #f9f9f9; transition: all 2s; -o-transition: all 2s; -moz-transition: all 2s; -webkit-transition: all 2s; width: 0; } .about-wrapper-1 .main .wrap { display: flex; display: -webkit-box; /* Chrome 4+, Safari 3.1, iOS Safari 3.2+ */ display: -moz-box; /* Firefox 17- */ display: -webkit-flex; /* Chrome 21+, Safari 6.1+, iOS Safari 7+, Opera 15/16 */ display: -moz-flex; /* Firefox 18+ */ display: -ms-flexbox; /* IE 10 */ -webkit-box-pack: justify; -ms-flex-pack: justify; -webkit-justify-content: space-between; justify-content: space-between; position: relative; z-index: 10; } .about-wrapper-1 .info { width: 52.083%; } .about-wrapper-1 .info .brief { font-size: var(--fs20); line-height: var(--lh30); color: #333; margin-bottom: 0.25rem; font-weight: 700; } .about-wrapper-1 .content { font-size: var(--fs16); line-height: var(--lh32); color: #666; } .about-wrapper-1 .data { width: 40.36%; padding: 0.96rem 0 1.18rem; } .about-wrapper-1 .data li { width: 48%; position: relative; padding-left: 0.7rem; margin-top: 1.16rem; } .about-wrapper-1 .data li:nth-child(-n+2) { margin-top: 0; } .about-wrapper-1 .data .icon { height: 0.5rem; position: absolute; left: 0; top: 0.08rem; z-index: 10; display: block; } .about-wrapper-1 .videos { position: relative; margin-top: 1.18rem; } .about-wrapper-1 .videos .box { margin: 0 auto; } .about-wrapper-1 .videos.active .pic { opacity: 0; visibility: hidden; } .about-wrapper-1 .videos.active video { opacity: 1; visibility: visible; } .about-wrapper-1 .videos.active .playicon { opacity: 0; visibility: hidden; transform: translatey(-1rem); -o-transform: translatey(-1rem); -moz-transform: translatey(-1rem); -webkit-transform: translatey(-1rem); } .about-wrapper-1 .videos.on video { width: 100%; display: block; } .about-wrapper-1 .videos.on .pic { width: 100%; } .about-wrapper-1 .videos .pic, .about-wrapper-1 .videos video { transition: all 0.8s; -o-transition: all 0.8s; -moz-transition: all 0.8s; -webkit-transition: all 0.8s; } .about-wrapper-1 .videos .pic { position: relative; width: var(--mainWid); margin: 0 auto; background-repeat: no-repeat; background-size: cover; background-position: center center; height: 7.52rem; } .about-wrapper-1 .videos .pic:before { content: ""; position: absolute; left: 0; top: 0; z-index: 10; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.2); } .about-wrapper-1 .videos video { position: absolute; left: 50%; top: 0; z-index: 10; opacity: 0; visibility: hidden; margin: 0 auto; width: 100%; transform: translateX(-50%); -o-transform: translateX(-50%); -moz-transform: translateX(-50%); -webkit-transform: translateX(-50%); height: 100%; object-fit: cover; } .about-wrapper-1 .videos .playicon { width: 1.04rem; height: 1.04rem; border-radius: 50%; position: absolute; left: 50%; top: 50%; margin-left: -0.52rem; margin-top: -0.52rem; z-index: 10; cursor: pointer; transition: all 0.8s; -o-transition: all 0.8s; -moz-transition: all 0.8s; -webkit-transition: all 0.8s; transition-delay: 0.3s; background: rgba(255, 255, 255, 0.2); } .about-wrapper-1 .videos .playicon i { display: block; width: 100%; height: 100%; margin: 0 auto; position: relative; top: 0; z-index: 10; background-size: contain; background-repeat: no-repeat; background-position: center center; background-image: url(../img/play2.png); background-size: 40.38%; } .about-wrapper-1 .videos .playicon:before, .about-wrapper-1 .videos .playicon:after { position: absolute; left: 0; top: 0; z-index: 0; content: ""; width: 100%; height: 100%; border-radius: 50%; box-sizing: border-box; border: 1px solid rgba(255, 255, 255, 0.5); animation: iconScale 4s linear infinite; opacity: 0; } .about-wrapper-1 .videos .playicon:after { border: 1px solid rgba(255, 255, 255, 0.3); animation-delay: 1.5s; } @keyframes iconScale { 0% { opacity: 1; transform: scale(1) translateZ(0); -o-transform: scale(1) translateZ(0); -moz-transform: scale(1) translateZ(0); -webkit-transform: scale(1) translateZ(0); } 100% { opacity: 0; transform: scale(2) translateZ(0); -o-transform: scale(2) translateZ(0); -moz-transform: scale(2) translateZ(0); -webkit-transform: scale(2) translateZ(0); } } @media screen and (min-width: 1004px) { .about-wrapper-1 .introduction-box { max-width: 7rem; margin-right: 0; } } @media (max-width: 1440px) { .about-wrapper-1 .content { font-size: var(--fs18); } } @media (max-width: 1004px) { .about-wrapper-1 .introduction-box { text-align: right; margin: 0 auto 0.5rem; } .about-wrapper-1 .introduction-box .title { font-size: var(--fs20); } .about-wrapper-1 .introduction-box .title i { width: 0.3rem; height: 0.3rem; margin: 0 5px; } .about-wrapper-1 .introduction-box p { font-size: var(--fs18); } .about-wrapper-1 .main:after { display: none; } .about-wrapper-1 .main .wrap { display: block; } .about-wrapper-1 .info { width: 100%; } .about-wrapper-1 .info .brief { font-size: var(--fs15); line-height: var(--lh24); margin-bottom: 0.1rem; } .about-wrapper-1 .content { font-size: var(--fs16); line-height: var(--lh28); } .about-wrapper-1 .data { width: 100%; padding: 1rem 0.48rem; margin-top: 0.8rem; background-color: #f9f9f9; } .about-wrapper-1 .data li { padding-left: 1rem; margin-top: 1rem; } .about-wrapper-1 .data .icon { height: 0.6rem; top: 0.2rem; } .about-wrapper-1 .videos { margin-top: 1rem; } .about-wrapper-1 .videos .pic { height: auto; background: none!important; } .about-wrapper-1 .videos .pic img { height: 5rem; object-fit: cover; } } .cate-box { text-align: center; margin-bottom: 0.46rem; } .cate-box a { display: inline-block; margin-right: 1rem; } .cate-box a:last-child { margin-right: 0; } .cate-box a.on .icon:after, .cate-box a:hover .icon:after { transform: scale(1.2) translateZ(0); -o-transform: scale(1.2) translateZ(0); -moz-transform: scale(1.2) translateZ(0); -webkit-transform: scale(1.2) translateZ(0); opacity: 0; visibility: hidden; } .cate-box a.on .icon:before, .cate-box a:hover .icon:before { transform: scale(1) translateZ(0); -o-transform: scale(1) translateZ(0); -moz-transform: scale(1) translateZ(0); -webkit-transform: scale(1) translateZ(0); opacity: 1; visibility: visible; } .cate-box a.on .icon img, .cate-box a:hover .icon img { filter: brightness(0) invert(1); } .cate-box a.on p, .cate-box a:hover p { color: #333; } .cate-box .icon { width: var(--lh50); height: var(--lh50); margin: 0 auto; position: relative; } .cate-box .icon:before, .cate-box .icon:after { content: ""; width: 100%; height: 100%; position: absolute; left: 0; top: 0; z-index: 0; border-radius: 50%; transition: all 0.48s; -o-transition: all 0.48s; -moz-transition: all 0.48s; -webkit-transition: all 0.48s; } .cate-box .icon:before { background: #c80000; transform: scale(0.85) translateZ(0); -o-transform: scale(0.85) translateZ(0); -moz-transform: scale(0.85) translateZ(0); -webkit-transform: scale(0.85) translateZ(0); opacity: 0; visibility: hidden; } .cate-box .icon:after { border: solid 1px #e5e5e5; box-sizing: border-box; background-color: #ffffff; } .cate-box .icon img { position: relative; z-index: 10; display: block; width: 100%; transition: all 0.48s; -o-transition: all 0.48s; -moz-transition: all 0.48s; -webkit-transition: all 0.48s; } .cate-box p { font-size: var(--fs20); line-height: var(--lh30); color: #999; margin-top: 0.12rem; transition: color 0.48s; -o-transition: color 0.48s; -moz-transition: color 0.48s; -webkit-transition: color 0.48s; } .about-wrapper-2 { background: url(../img/honorbg.jpg) no-repeat center bottom; background-size: 100%; padding-bottom: 0.6rem; overflow: hidden; } .honor-box .item { position: relative; padding: 0 0.32rem; } .honor-box .ani { display: none; } .honor-box .on.ani { display: block; } .honor-box .swiper-container { overflow: hidden; } .honor-box .swiper-wrapper { align-items: flex-end; } .honor-box .swiper-slide { width: auto; text-align: center; margin-right: 0.2rem; max-width: 3.1rem; } .honor-box .swiper-slide:last-child { margin-right: 0; } .honor-box .swiper-slide:hover .pic img { transform: scale(1.05) translateZ(0); -o-transform: scale(1.05) translateZ(0); -moz-transform: scale(1.05) translateZ(0); -webkit-transform: scale(1.05) translateZ(0); } .honor-box .swiper-slide .pic { width: auto; display: flex; display: -webkit-box; /* Chrome 4+, Safari 3.1, iOS Safari 3.2+ */ display: -moz-box; /* Firefox 17- */ display: -webkit-flex; /* Chrome 21+, Safari 6.1+, iOS Safari 7+, Opera 15/16 */ display: -moz-flex; /* Firefox 18+ */ display: -ms-flexbox; /* IE 10 */ align-items: flex-end; } .honor-box .swiper-slide .pic img { display: inline-block; max-height: 3.1rem; width: auto; object-fit: contain; max-width: 100%; } .honor-box .swiper-slide p { font-size: var(--fs16); line-height: var(--lh24); height: calc(var(--lh24) * 2); color: #333; /* 多行省略溢出显示省略号*/ display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; margin-top: 0.4rem; width: 100%; padding: 0 0.2rem; } @media (max-width: 1004px) { .cate-box { margin-bottom: 0.6rem; } .cate-box a { margin-right: 0.6rem; } .cate-box .icon { width: var(--lh56); height: var(--lh56); padding: 0.1rem; } .cate-box p { font-size: var(--fs16); line-height: var(--lh26); margin-top: 0.2rem; } .about-wrapper-2 { padding-bottom: 0.6rem; } .honor-box .item { padding: 0; } .honor-box .swiper-slide { width: calc((100% - .3rem) / 2); margin-right: 0.3rem; max-width: inherit; justify-content: center; } .honor-box .swiper-slide .pic img { max-height: 4.4rem; } } .about-wrapper-3 { background: #f8f8f8 no-repeat center bottom; background-size: 100%; } .about-wrapper-3 .brief { font-size: var(--fs30); line-height: var(--lh36); color: #333; margin-bottom: 1rem; } .history-box { position: relative; } .history-box:after { content: ""; width: 3px; height: calc(100% - .34rem - var(--lastH) + .5rem); background-image: linear-gradient(180deg, #c80000 0%, #ef1414 100%); background-blend-mode: normal, normal; position: absolute; left: 50%; top: 0.34rem; z-index: 0; transform: translateX(-50%); -o-transform: translateX(-50%); -moz-transform: translateX(-50%); -webkit-transform: translateX(-50%); } .history-box .item { position: relative; display: flex; display: -webkit-box; /* Chrome 4+, Safari 3.1, iOS Safari 3.2+ */ display: -moz-box; /* Firefox 17- */ display: -webkit-flex; /* Chrome 21+, Safari 6.1+, iOS Safari 7+, Opera 15/16 */ display: -moz-flex; /* Firefox 18+ */ display: -ms-flexbox; /* IE 10 */ -webkit-box-pack: justify; -ms-flex-pack: justify; -webkit-justify-content: space-between; justify-content: space-between; width: 75%; border-left: 2px solid transparent; padding: 0.3rem 0 0.8rem 0.5rem; z-index: 10; margin-bottom: 0.5rem; transition: all 0.48s; -o-transition: all 0.48s; -moz-transition: all 0.48s; -webkit-transition: all 0.48s; } .history-box .item:last-child { margin-bottom: 0; } .history-box .item:hover { background-color: #ffffff; border-color: #c80000; box-shadow: 0px 4px 30px 0px rgba(0, 0, 0, 0.1); } .history-box .item:hover .icon { background: #c81d1d; } .history-box .item:hover .icon:after { filter: brightness(0) invert(1); } .history-box .info { width: 3.1rem; } .history-box .info h3 { font-size: var(--fs24); color: #333; line-height: var(--lh30); font-weight: 700; margin-top: 3px; } .history-box .year { font-family: "pr"; font-size: var(--fs48); color: #cf000e; line-height: var(--lh60); font-weight: 700; } .history-box .desc, .history-box .desc li { font-size: var(--fs18); color: #333; line-height: var(--lh36); } .history-box .desc { width: 6.3rem; padding-right: 0.8rem; padding-top: 0.12rem; position: relative; } .history-box .desc:before { content: ""; width: 0.67rem; height: 7px; position: absolute; left: -0.92rem; top: calc(var(--lh56) / 2); z-index: 1; background-size: contain; background-repeat: no-repeat; background-position: center center; background-image: url(../img/dot.png); } .history-box .desc li { list-style-type: none; position: relative; } .history-box .desc li:before { content: ""; width: 6px; height: 6px; border-radius: 50%; display: inline-block; background: #c80000; margin-right: 5px; vertical-align: middle; position: relative; top: -2px; } .history-box .icon { position: absolute; left: 33.33%; top: 0.34rem; transform: translateX(-50%); -o-transform: translateX(-50%); -moz-transform: translateX(-50%); -webkit-transform: translateX(-50%); z-index: 10; width: var(--lh56); height: var(--lh56); background-color: #ffffff; box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.1); border-radius: 50%; transition: all 0.48s; -o-transition: all 0.48s; -moz-transition: all 0.48s; -webkit-transition: all 0.48s; } .history-box .icon:after { content: ""; width: 50%; height: 100%; position: absolute; left: 25%; top: 0; z-index: 10; background-size: contain; background-repeat: no-repeat; background-position: center center; background-image: url(../img/clock.png); transition: all 0.48s; -o-transition: all 0.48s; -moz-transition: all 0.48s; -webkit-transition: all 0.48s; } @media screen and (min-width: 1004px) { .history-box .item:nth-child(odd) { margin-right: 0; margin-left: auto; } .history-box .item:nth-child(even) { margin-left: 0; margin-right: auto; flex-direction: row-reverse; border-left: none; border-right: 2px solid transparent; } .history-box .item:nth-child(even):hover { border-color: #c80000; } .history-box .item:nth-child(even) .icon { left: auto; right: 33.3%; margin-right: calc(var(--lh56) * -1); } .history-box .item:nth-child(even) .desc { text-align: right; } .history-box .item:nth-child(even) .desc:before { left: auto; right: 0; transform: rotateY(-180deg); } } @media (max-width: 1004px) { .about-wrapper-3 .brief { font-size: var(--fs16); margin-bottom: 0.6rem; line-height: var(--lh30); } .about-wrapper-3 .brief span { font-size: var(--fs16) !important; } .history-box:after { width: 2px; left: 0.4rem; height: calc(100% - .34rem - var(--lastH) + .5rem); top: 0.34rem; } .history-box .item { display: block; width: calc(100% - 1.2rem); border-width: 1px; padding: 0.6rem 0.4rem 0.4rem; margin-bottom: 0.3rem; margin-right: 0; margin-left: auto; } .history-box .info { width: 100%; margin-bottom: 0.2rem; } .history-box .info h3 { font-size: var(--fs20); line-height: var(--lh30); } .history-box .year { font-size: var(--fs30); line-height: var(--lh36); } .history-box .desc, .history-box .desc li { font-size: var(--fs18); color: #333; line-height: var(--lh36); } .history-box .desc { width: 100%; padding-right: 0; padding-top: 0; } .history-box .desc:before { display: none; width: 0.67rem; height: 7px; left: -0.92rem; top: calc(var(--lh56) / 2); } .history-box .icon { left: calc(var(--lh48) * -1 + 4px); top: 0.4rem; width: var(--lh48); height: var(--lh48); } } .about-wrapper-4 .item { display: flex; display: -webkit-box; /* Chrome 4+, Safari 3.1, iOS Safari 3.2+ */ display: -moz-box; /* Firefox 17- */ display: -webkit-flex; /* Chrome 21+, Safari 6.1+, iOS Safari 7+, Opera 15/16 */ display: -moz-flex; /* Firefox 18+ */ display: -ms-flexbox; /* IE 10 */ -webkit-box-pack: justify; -ms-flex-pack: justify; -webkit-justify-content: space-between; justify-content: space-between; margin-bottom: var(--padding); } .about-wrapper-4 .item:last-child { margin-bottom: 0; } .about-wrapper-4 .pic { position: relative; width: 50%; } .about-wrapper-4 .pic:hover img { transform: scale(1.05) translateZ(0); -o-transform: scale(1.05) translateZ(0); -moz-transform: scale(1.05) translateZ(0); -webkit-transform: scale(1.05) translateZ(0); } .about-wrapper-4 .pic .swiper-wrapper, .about-wrapper-4 .pic .swiper-slide, .about-wrapper-4 .pic .swiper-container { height: 100%; } .about-wrapper-4 .pic img { height: 100%; object-fit: cover; } .about-wrapper-4 .icon { display: block; height: 0.65rem; } .about-wrapper-4 .info { width: 43.2%; padding-top: 0.4rem; } .about-wrapper-4 .info .title { font-family: "medium"; font-size: var(--fs36); line-height: var(--lh48); color: #333; margin: 0.27rem auto 0.36rem; } .about-wrapper-4 .desc { font-size: var(--fs16); line-height: var(--lh36); color: #666; } .about-wrapper-4 .swiper-container { overflow: hidden; } .about-wrapper-4 .swiper-container .swiper-pagination { right: 0.2rem; bottom: 0.2rem; width: auto; left: auto; text-align: right; } .about-wrapper-4 .swiper-container .swiper-pagination .swiper-pagination-bullet { width: 10px; height: 10px; background-color: rgba(255, 255, 255, 0.8); margin: 0 5px; opacity: 1; } .about-wrapper-4 .swiper-container .swiper-pagination .swiper-pagination-bullet:last-child { margin-right: 0; } .about-wrapper-4 .swiper-container .swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active { background-color: #c80000; } .about-wrapper-4 .swiper-container .swiper-pagination .swiper-pagination-bullet:focus, .about-wrapper-4 .swiper-container .swiper-pagination .swiper-pagination-bullet:active, .about-wrapper-4 .swiper-container .swiper-pagination .swiper-pagination-bullet:link { outline: none; } @media screen and (min-width: 1004px) { .about-wrapper-4 .item:nth-child(even) { flex-direction: row-reverse; } } @media (max-width: 1600px) { .about-wrapper-4 .desc { line-height: var(--lh32); } } @media (max-width: 1004px) { .about-wrapper-4 .item { display: block; margin-bottom: 1rem; } .about-wrapper-4 .pic { width: 100%; } .about-wrapper-4 .pic .swiper-wrapper, .about-wrapper-4 .pic .swiper-slide, .about-wrapper-4 .pic .swiper-container { height: auto; } .about-wrapper-4 .pic img { height: auto; } .about-wrapper-4 .icon { height: 0.8rem; } .about-wrapper-4 .info { width: 100%; margin-top: 0.4rem; } .about-wrapper-4 .info .title { font-size: var(--fs20); line-height: var(--lh30); margin: 0.27rem auto 0.36rem; } .about-wrapper-4 .swiper-container .swiper-pagination { right: 0; bottom: 0.4rem; text-align: center; width: 100%; } } .about-wrapper-5 .main { display: flex; display: -webkit-box; /* Chrome 4+, Safari 3.1, iOS Safari 3.2+ */ display: -moz-box; /* Firefox 17- */ display: -webkit-flex; /* Chrome 21+, Safari 6.1+, iOS Safari 7+, Opera 15/16 */ display: -moz-flex; /* Firefox 18+ */ display: -ms-flexbox; /* IE 10 */ position: relative; } .about-wrapper-5 .item { width: calc((100% - 1rem) / 3); box-shadow: 2px 5px 38px 0px rgba(0, 0, 0, 0.08); margin-right: 0.5rem; background-color: #ffffff; border-radius: 5px; border-top: 0.04rem solid #c80000; position: relative; padding: 0.5rem; min-height: 5.63rem; } .about-wrapper-5 .item:first-child li { line-height: var(--lh24); margin-bottom: 0.24rem; } .about-wrapper-5 .item:first-child li:last-child { margin-bottom: 0; } .about-wrapper-5 .item:nth-child(3) { padding-bottom: 0.36rem; min-height: inherit; } .about-wrapper-5 .item:nth-child(4) { border-top: none; position: absolute; right: 0; bottom: 0; z-index: 10; min-height: inherit; display: flex; display: -webkit-box; /* Chrome 4+, Safari 3.1, iOS Safari 3.2+ */ display: -moz-box; /* Firefox 17- */ display: -webkit-flex; /* Chrome 21+, Safari 6.1+, iOS Safari 7+, Opera 15/16 */ display: -moz-flex; /* Firefox 18+ */ display: -ms-flexbox; /* IE 10 */ -webkit-box-pack: justify; -ms-flex-pack: justify; -webkit-justify-content: space-between; justify-content: space-between; align-items: center; padding-top: 0.4rem; padding-bottom: 0.4rem; } .about-wrapper-5 .item:nth-child(4) img { width: 2rem; } .about-wrapper-5 .item:nth-child(4) .en { margin-bottom: 0; } .about-wrapper-5 .item h5 { font-size: var(--fs30); line-height: var(--lh36); color: #333; margin-bottom: 0.06rem; } .about-wrapper-5 .icon { position: absolute; right: 0.45rem; top: 0.52rem; z-index: 10; width: 0.45rem; } .about-wrapper-5 .en { font-family: "pr"; font-size: var(--fs18); line-height: var(--lh24); color: rgba(51, 51, 51, 0.35); margin-bottom: 0.36rem; } .about-wrapper-5 li { font-size: var(--fs16); line-height: var(--lh36); color: #666; margin-bottom: 0.34rem; display: flex; display: -webkit-box; /* Chrome 4+, Safari 3.1, iOS Safari 3.2+ */ display: -moz-box; /* Firefox 17- */ display: -webkit-flex; /* Chrome 21+, Safari 6.1+, iOS Safari 7+, Opera 15/16 */ display: -moz-flex; /* Firefox 18+ */ display: -ms-flexbox; /* IE 10 */ align-items: flex-start; } .about-wrapper-5 li:last-child { margin-bottom: 0; } @media screen and (min-width: 1004px) { .about-wrapper-5 .item:last-child, .about-wrapper-5 .item:nth-child(3) { margin-right: 0; } } @media (max-width: 1600px) { .about-wrapper-5 li { line-height: var(--lh32); margin-bottom: 0.28rem; } } @media (max-width: 1440px) { .about-wrapper-5 li { font-size: var(--fs18); } } @media (max-width: 1004px) { .about-wrapper-5 .main { display: block; } .about-wrapper-5 .item { width: 100%; margin-right: 0; padding: 0.6rem 0.5rem; min-height: inherit; border-width: 2px; margin-bottom: 0.48rem; } .about-wrapper-5 .item:last-child { margin-bottom: 0; } .about-wrapper-5 .item:first-child li { line-height: var(--lh28); } .about-wrapper-5 .item:nth-child(3) { margin-bottom: 0; padding-bottom: 0.48rem; } .about-wrapper-5 .item:nth-child(4) { position: relative; padding-top: 0.5rem; padding-bottom: 0.5rem; } .about-wrapper-5 .item:nth-child(4) img { width: 2.2rem; } .about-wrapper-5 .item h5 { font-size: var(--fs20); line-height: var(--lh30); } .about-wrapper-5 .icon { right: 0.4rem; top: 0.6rem; width: 0.8rem; } .about-wrapper-5 .en { line-height: var(--lh26); } .about-wrapper-5 .en:after { width: 16px; } } .floorsbox { position: fixed; left: 0.1rem; top: 50%; transform: translatey(-50%); -o-transform: translatey(-50%); -moz-transform: translatey(-50%); -webkit-transform: translatey(-50%); z-index: 30; display: none; } .floorsbox a { display: block; position: relative; font-size: var(--fs18); line-height: var(--lh36); padding-left: 24px; color: #333; } .floorsbox a.on:before { opacity: 1; visibility: visible; transform: rotate(0deg); } .floorsbox a:hover, .floorsbox a.on { color: #c80000; } .floorsbox a:before { content: ""; width: 14px; height: 14px; background-size: contain; background-repeat: no-repeat; background-position: center center; background-image: url(../img/icon2.png); display: inline-block; position: absolute; left: 0; top: 50%; margin-top: -7px; transform: rotate(45deg); opacity: 0; visibility: hidden; transition: all 0.48s; -o-transition: all 0.48s; -moz-transition: all 0.48s; -webkit-transition: all 0.48s; } .anti-counterfeiting-query-wrapper { min-height: 8rem; background: #f9f9f9; padding-top: 20px; /* input placeholder */ } .anti-counterfeiting-query-wrapper .breadcrumbs { margin-bottom: 0.6rem; } .anti-counterfeiting-query-wrapper .main { display: flex; display: -webkit-box; /* Chrome 4+, Safari 3.1, iOS Safari 3.2+ */ display: -moz-box; /* Firefox 17- */ display: -webkit-flex; /* Chrome 21+, Safari 6.1+, iOS Safari 7+, Opera 15/16 */ display: -moz-flex; /* Firefox 18+ */ display: -ms-flexbox; /* IE 10 */ align-items: center; justify-content: center; } .anti-counterfeiting-query-wrapper .main .title { font-size: var(--fs24); line-height: var(--lh50); color: #333; background: url(../img/filter.png) no-repeat center left; background-size: var(--lh50); padding-left: 0.86rem; margin-right: 0.86rem; font-family: "medium"; } .anti-counterfeiting-query-wrapper .form { display: flex; display: -webkit-box; /* Chrome 4+, Safari 3.1, iOS Safari 3.2+ */ display: -moz-box; /* Firefox 17- */ display: -webkit-flex; /* Chrome 21+, Safari 6.1+, iOS Safari 7+, Opera 15/16 */ display: -moz-flex; /* Firefox 18+ */ display: -ms-flexbox; /* IE 10 */ align-items: center; } .anti-counterfeiting-query-wrapper .text { width: 6.2rem; height: 0.64rem; line-height: 0.64rem; background-color: #f9f9f9; border-radius: 0.32rem; border: solid 1px #ccd0d8; font-size: var(--fs18); color: #333; padding: 0 0.42rem; transition: all 0.48s; -o-transition: all 0.48s; -moz-transition: all 0.48s; -webkit-transition: all 0.48s; } .anti-counterfeiting-query-wrapper .text:focus { border-color: #c80000; } .anti-counterfeiting-query-wrapper ::-webkit-input-placeholder { /* WebKit browsers */ color: #666; font-size: var(--fs18); } .anti-counterfeiting-query-wrapper :-moz-placeholder { /* Mozilla Firefox 4 to 18 */ color: #666; font-size: var(--fs18); } .anti-counterfeiting-query-wrapper ::-moz-placeholder { /* Mozilla Firefox 19+ */ color: #666; font-size: var(--fs18); } .anti-counterfeiting-query-wrapper :-ms-input-placeholder { /* Internet Explorer 10+ */ color: #666; font-size: var(--fs18); } .anti-counterfeiting-query-wrapper .submit { display: block; width: 1.32rem; height: 0.64rem; line-height: 0.64rem; background-color: #c80000; border-radius: 0.1rem; text-align: center; font-size: var(--fs22); color: #fff; padding: 0 0.2rem; margin-left: 0.35rem; } .anti-counterfeiting-query-wrapper .result { text-align: center; margin-top: 0.6rem; font-size: var(--fs18); line-height: var(--lh30); color: #333; } @media (max-width: 1004px) { .anti-counterfeiting-query-wrapper { padding-top: 10px; /* input placeholder */ } .anti-counterfeiting-query-wrapper .breadcrumbs { padding-left: 0; padding-right: 0; } .anti-counterfeiting-query-wrapper .main { display: block; margin-top: 0.6rem; } .anti-counterfeiting-query-wrapper .main .title { font-size: var(--fs20); line-height: var(--lh30); background-size: var(--lh30); margin-right: 0; margin-bottom: 0.48rem; } .anti-counterfeiting-query-wrapper .form { -webkit-box-pack: justify; -ms-flex-pack: justify; -webkit-justify-content: space-between; justify-content: space-between; } .anti-counterfeiting-query-wrapper .text { width: calc(100% - 2.2rem); height: var(--lh48); line-height: var(--lh48); font-size: var(--fs16); border-radius: calc(var(--lh48) / 2); padding: 0 0.3rem; } .anti-counterfeiting-query-wrapper ::-webkit-input-placeholder { /* WebKit browsers */ color: #666; font-size: var(--fs16); } .anti-counterfeiting-query-wrapper :-moz-placeholder { /* Mozilla Firefox 4 to 18 */ color: #666; font-size: var(--fs16); } .anti-counterfeiting-query-wrapper ::-moz-placeholder { /* Mozilla Firefox 19+ */ color: #666; font-size: var(--fs16); } .anti-counterfeiting-query-wrapper :-ms-input-placeholder { /* Internet Explorer 10+ */ color: #666; font-size: var(--fs16); } .anti-counterfeiting-query-wrapper .submit { width: 2rem; height: var(--lh48); line-height: var(--lh48); font-size: var(--fs16); padding: 0 0.3rem; margin-left: 0; } } .breadcrumbs { font-size: 0; line-height: var(--lh24); position: relative; z-index: 10; } .breadcrumbs a, .breadcrumbs span, .breadcrumbs i { vertical-align: middle; position: relative; top: -1px; display: inline-block; } .breadcrumbs a, .breadcrumbs span { font-size: 14px; } .breadcrumbs a { color: #666; } .breadcrumbs a:hover, .breadcrumbs span { color: #c81d1d; } .breadcrumbs i { width: 4px; height: 7px; background-size: contain; background-repeat: no-repeat; background-position: center center; background-image: url(../img/icon.png); margin: 0 0.1rem; } .breadcrumbs .home { margin-right: 0.16rem; top: -2px; } .breadcrumbs .home + i { margin-left: 0; } .page-nav-box { position: sticky; top: var(--headerH); z-index: 10; background-color: #f9f9f9; } .page-nav-box .caption { display: none; } .page-nav-box .wrap { height: 0.7rem; display: flex; display: -webkit-box; /* Chrome 4+, Safari 3.1, iOS Safari 3.2+ */ display: -moz-box; /* Firefox 17- */ display: -webkit-flex; /* Chrome 21+, Safari 6.1+, iOS Safari 7+, Opera 15/16 */ display: -moz-flex; /* Firefox 18+ */ display: -ms-flexbox; /* IE 10 */ -webkit-box-pack: justify; -ms-flex-pack: justify; -webkit-justify-content: space-between; justify-content: space-between; align-items: center; } .page-nav-box .nav a { position: relative; display: inline-block; font-size: 16px; color: #333; margin-right: 0.46rem; line-height: 0.7rem; } .page-nav-box .nav a:last-child { margin-right: 0; } .page-nav-box .nav a.on { color: #c80000; } .page-nav-box .nav a.on:after { transform: scale(1) translateZ(0); -o-transform: scale(1) translateZ(0); -moz-transform: scale(1) translateZ(0); -webkit-transform: scale(1) translateZ(0); } .page-nav-box .nav a:after { content: ""; width: 100%; height: 3px; background: #c80000; position: absolute; left: 0; bottom: 0; z-index: 1; transform: scale(0) translateZ(0); -o-transform: scale(0) translateZ(0); -moz-transform: scale(0) translateZ(0); -webkit-transform: scale(0) translateZ(0); transition: all 0.48s; -o-transition: all 0.48s; -moz-transition: all 0.48s; -webkit-transition: all 0.48s; } @media screen and (min-width: 1004px) { .page-nav-wrapper { position: relative; z-index: 20; width: 100%; background-color: #f9f9f9; } .page-nav-wrapper .wrap { display: flex; display: -webkit-box; /* Chrome 4+, Safari 3.1, iOS Safari 3.2+ */ display: -moz-box; /* Firefox 17- */ display: -webkit-flex; /* Chrome 21+, Safari 6.1+, iOS Safari 7+, Opera 15/16 */ display: -moz-flex; /* Firefox 18+ */ display: -ms-flexbox; /* IE 10 */ align-items: center; } .page-nav-wrapper .intruction-caption { display: none; } .page-nav-wrapper .nav-box { flex: 1; margin-right: 0.6rem; } .page-nav-wrapper .nav { position: relative; z-index: 2; font-size: 0; display: flex; display: -webkit-box; /* Chrome 4+, Safari 3.1, iOS Safari 3.2+ */ display: -moz-box; /* Firefox 17- */ display: -webkit-flex; /* Chrome 21+, Safari 6.1+, iOS Safari 7+, Opera 15/16 */ display: -moz-flex; /* Firefox 18+ */ display: -ms-flexbox; /* IE 10 */ } .page-nav-wrapper .nav > a { position: relative; font-size: var(--fs16); line-height: 0.7rem; text-align: center; color: #333; transition: all 0.5s; -o-transition: all 0.5s; -moz-transition: all 0.5s; -webkit-transition: all 0.5s; min-width: 1.56rem; padding: 0 0.2rem; display: inline-block; } .page-nav-wrapper .nav > a.on { color: #fff; font-weight: 700; background: #c81d1d; } .page-nav-wrapper .nav > a:not(.on):hover { color: #c81d1d; } .page-nav-box .nav a:hover { color: #c80000; } } @media (max-width: 1004px) { .page-nav-wrapper { position: relative; padding: 0; height: auto; margin-top: 0; top: 0; width: 100%; z-index: 20; } .page-nav-wrapper .wrap { height: auto; padding: 0; } .page-nav-wrapper .nav-box { position: relative; } .page-nav-wrapper .intruction-caption { position: relative; display: block; line-height: var(--lh50); padding: 0 var(--offset); font-size: var(--fs16); background: #c81d1d; color: #fff; } .page-nav-wrapper .intruction-caption.extend:after { transform: rotateX(180deg); } .page-nav-wrapper .intruction-caption:after { display: inline-block; position: absolute; right: 0.3rem; top: 0; z-index: 10; content: ""; width: 0.26rem; height: 100%; background: url(../img/down.png) no-repeat center center; background-size: contain; } .page-nav-wrapper .nav { position: absolute; left: 0; top: 100%; z-index: 30; width: 100%; background: #f7f8f9; display: none; } .page-nav-wrapper .nav a { display: block; width: 100%; text-align: left; line-height: var(--lh50); padding: 0 var(--offset); font-size: var(--fs16); border-top: 1px solid #f2f2f2; } .page-nav-wrapper .nav a:first-child { border-top: none; } .page-nav-wrapper .nav > a.on, .page-nav-wrapper .nav > a:hover { background: none; } .page-nav-wrapper .nav > a:after { display: none; } .breadcrumbs { padding: 0.2rem var(--offset) 0; line-height: var(--lh30); } .breadcrumbs i { margin: 0 0.2rem; } .breadcrumbs .home { margin-right: 0.2rem; top: -1px; } .page-nav-box { top: 0.4rem; } .page-nav-box .caption { display: none; } .page-nav-box .wrap { height: auto; display: block; padding: 0; } .page-nav-box .floor-box { background: #fff; padding: 0 var(--offset); } .page-nav-box .nav a { font-size: 14px; margin-right: 0.3rem; line-height: 1rem; } .page-nav-box .nav a:after { height: 2px; } } .page-banner-wrapper { position: relative; } .page-banner-wrapper img { animation-duration: 4s; } .page-banner-wrapper .info { position: absolute; left: 0; top: 2.08rem; z-index: 10; width: 100%; text-align: center; display: none; } .page-banner-wrapper .title { color: #fff; font-size: var(--fs48); line-height: var(--lh60); font-weight: 700; } .top-box { display: flex; display: -webkit-box; /* Chrome 4+, Safari 3.1, iOS Safari 3.2+ */ display: -moz-box; /* Firefox 17- */ display: -webkit-flex; /* Chrome 21+, Safari 6.1+, iOS Safari 7+, Opera 15/16 */ display: -moz-flex; /* Firefox 18+ */ display: -ms-flexbox; /* IE 10 */ -webkit-box-pack: justify; -ms-flex-pack: justify; -webkit-justify-content: space-between; justify-content: space-between; align-items: center; margin-bottom: 0.9rem; } .top-box .page-title-box { margin-bottom: 0; } .page-title-box { margin-bottom: 0.9rem; } .page-title-box.mb40 { margin-bottom: 0.45rem; } .page-title-box.center { text-align: center; } .page-title-box.center .line { margin-left: auto; margin-right: auto; } .page-title-box .title { font-size: var(--fs48); letter-spacing: 0.05rem; color: #222; line-height: var(--lh60); font-weight: 700; } .page-title-box .en { font-family: "mb"; display: inline-block; font-size: var(--fs24); line-height: var(--lh30); color: #333; background-image: -webkit-linear-gradient(right, #c7ced8, #9faab7); -webkit-background-clip: text; -webkit-text-fill-color: transparent; margin-top: 0.07rem; } .page-title-box .line { width: 36px; height: 4px; background-color: #c81d1d; margin-top: 0.24rem; } .page-caption-box { margin-bottom: 0.42rem; } .page-caption-box.center { text-align: center; } .page-caption-box.center .line { margin-left: auto; margin-right: auto; } .page-caption-box .title { font-size: var(--fs36); letter-spacing: 0.04rem; color: #222; line-height: var(--lh48); font-weight: 700; } .page-caption-box .en { font-family: "mb"; display: inline-block; font-size: var(--fs48); line-height: var(--lh48); color: #333; background-image: -webkit-linear-gradient(right, #c7ced8, #9faab7); -webkit-background-clip: text; -webkit-text-fill-color: transparent; margin-bottom: 2px; } .page-caption-box .line { width: 36px; height: 4px; background-color: #c81d1d; margin-top: 14px; } .page-brief { font-size: var(--fs24); line-height: var(--lh36); color: #343333; margin-bottom: var(--padding); } .btn-box { display: flex; display: -webkit-box; /* Chrome 4+, Safari 3.1, iOS Safari 3.2+ */ display: -moz-box; /* Firefox 17- */ display: -webkit-flex; /* Chrome 21+, Safari 6.1+, iOS Safari 7+, Opera 15/16 */ display: -moz-flex; /* Firefox 18+ */ display: -ms-flexbox; /* IE 10 */ justify-content: center; margin-top: 0.68rem; } .btn-box img { width: 0.3rem; margin-right: 0.16rem; vertical-align: middle; position: relative; top: -1px; } .btn-box a { margin-right: 0.3rem; } .btn-box a:last-child { margin-right: 0; } @media (max-width: 1004px) { .top-box { display: block; margin-bottom: 0.48rem; } .top-box .page-title-box { margin-bottom: 0.4rem; } .page-title-box { margin-bottom: 0.48rem; } .page-title-box .title { font-size: var(--fs24); letter-spacing: 0.06rem; line-height: var(--lh30); } .page-title-box .en { font-size: var(--fs18); } .page-title-box .line { width: 28px; height: 2px; } .page-caption-box { margin-bottom: 0.6rem; } .page-caption-box .title { font-size: var(--fs20); line-height: var(--lh30); } .page-caption-box .en { font-size: var(--fs30); line-height: var(--lh40); } .page-caption-box .line { width: 28px; height: 2px; margin-bottom: 10px; } .page-brief { font-size: var(--fs18); line-height: var(--lh30); margin-bottom: 0.5rem; } .page-banner-wrapper .info { top: 1.4rem; } .page-banner-wrapper .title { font-size: var(--fs24); line-height: var(--lh30); } } /*分页*/ .pageNum { text-align: center; font-size: 0; margin-top: 1rem; } .pageNum a { display: inline-block; color: #4d4d4d; font-size: 14px; vertical-align: middle; margin: 0 0.1rem; width: var(--lh48); height: var(--lh48); line-height: var(--lh48); background-color: #fff; border-radius: 5px; border: solid 1px #d2d4d3; text-align: center; transition: background 0.5s; -o-transition: background 0.5s; -moz-transition: background 0.5s; -webkit-transition: background 0.5s; } .pageNum a:first-child { margin-left: 0; } .pageNum a:last-child { margin-right: 0; } .pageNum .dot { line-height: var(--lh38); } .pageNum .btn { background-size: contain; background-repeat: no-repeat; background-position: center center; background-size: 8px; } .pageNum .prev, .pageNum .next { position: relative; } .pageNum .prev:hover i, .pageNum .next:hover i { filter: brightness(0) invert(1); } .pageNum .prev i, .pageNum .next i { position: absolute; left: 50%; height: 100%; width: 0.09rem; background-image: url(../img/pi.png); background-size: contain; background-repeat: no-repeat; background-position: center center; margin-left: -5px; } .pageNum .prev i { transform: rotateY(180deg); } .pageNum a:hover, .pageNum .on { color: #fff; background-color: #c81d1d; border-color: #c81d1d; } .pageMore { display: none; margin-top: 0.6rem; } .pageMore a { display: block; width: 100%; text-align: center; height: 0.9rem; line-height: 0.9rem; background: #c81d1d; color: #fff; font-size: 14px; border-radius: 8px; } @media (max-width: 1004px) { .pageNum { display: none; } .pageMore { display: block; } }