ul,li{ list-style: none; } *{ margin:0; padding: 0; font-family: '寰蒋闆呴粦'; } img{ width:100%; height: auto; } html{ font-size:10px; } a{ color:#333; &:hover{ text-decoration: none; color:#333; } &:visited{ text-decoration: none; color:#333; } } input[type='text'],input[type='password']{ outline: none; } @keyframes subItemAnimate { 0% { display: block; } 100% { opacity: 1; right:0; } } .form-panel{ padding: 2rem 0; .input-field{ display: flex; font-size:1.4rem; padding-bottom: 2rem; .field-label{ color:#666; min-width:8rem; margin-top: 0.5rem; .require{ color:#dd3213; } } .field-item{ min-width: 20rem; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; .checkbox-field{ margin-right:3rem; padding:0.5rem 0; input[type='checkbox']{ margin-left: 1rem; } } .radio-field{ margin-right:3rem; padding:0.5rem 0; input[type='radio']{ margin-left: 1rem; } } .text-field{ width:100%; input[type='text']{ width: 100%; padding: 0.5rem; } } } } } .table-panel{ width:100%; font-size:1.4rem; tr{ th{ border-bottom:1px solid #828080; padding-bottom:1rem; font-size:1.6rem; &:last-child{ text-align:right; } } td{ padding:2rem 0; color:#040000; border-bottom:1px solid #ececec; &:last-child{ text-align:right; } } } } // .page-panel{ // width:100%; // display: flex; // align-items: center; // justify-content: center; // padding: 3rem 0; // .arrow{ // border:1px solid #999; // color:#999; // width: 2.4/10rem; // height:2.4/10rem; // display: flex; // align-items: center; // justify-content: center; // border-radius:50%; // margin:0 2/10rem; // &:hover{ // color:#000; // } // } // a{ // display: inline-block; // padding: 1/10rem; // font-size: 1.6/10rem; // color:#999; // &.active{ // color:#000; // } // &:hover{ // color:#000; // } // } // } .page-panel{ width:100%; display: flex; align-items: center; justify-content: center; padding: 3rem 0; .arrow{ border:1px solid #999; color:#999; width: 2.4rem; height:2.4rem; display: flex; align-items: center; justify-content: center; border-radius:50%; margin:0 2rem; &:hover{ color:#000; } } .page-item{ display: inline-block; padding: 1rem; .page-link{ font-size: 1.6rem; color:#999; cursor: pointer; &:hover{ color:#000; } } &.active{ .page-link{ color:#000; } } &.disabled{ .page-link:hover{ color:#999; } } &:first-child{ margin-top: -0.2rem;; .page-link{ font-size:2.2rem; } } &:last-child{ margin-top: -0.2rem;; .page-link{ font-size:2.2rem; } } } } @media screen and (min-width:768px){ .publicity-panel{ position: fixed; bottom: 0; left: 0; z-index:9999; } .pc-footer{ display: none; } .sub-head-tool{ display: none; } .mobile-header-panel{ display: none; } .mobile-close{ display: none; } .topScroll{ cursor: pointer; position: fixed; bottom: 10rem; right: calc(~'(100% / 2) - (1170px / 2) - 20px'); } .search-container{ position: fixed; top: 0; left: 0; width:100%; background: #fff; z-index:9999; display: none; .search-panel{ display: flex; // height: 100%; height:7rem; align-items: center; width:50%; margin: 0 auto; justify-content: space-between; .search-input{ font-size: 20px; border: 0; width: 350px; outline: none; } .tool-item{ display: flex; align-items: center; .iconfont{ font-size:2rem; margin-left: 40px; cursor: pointer; &:hover{ color:#0066cc; } } } } .search-result-panel{ width: 100%; border-top: 1px solid #a5b7c4; padding:6rem 18%; display: none; .search-list{ .list-item{ display: flex; align-items: stretch; margin-bottom: 3rem; &:last-child{ .item-info{ border-bottom: 0; } } .item-type{ font-size: 1.8rem; width: 8rem; font-weight: bold; } .item-info{ padding-bottom:3rem; border-bottom:1px solid #e9e9e9; flex:1; a{ margin-bottom:2rem; display: block; color:#333; font-size: 1.6rem; &:last-child{ margin-bottom: 0; } } span{ color:#0066cc; } .more{ color:#0066cc; font-size: 1.6rem; display: flex; align-items: center; .iconfont{ font-size: 3rem; margin-left: 5px; } } } } } } } .header-section{ position:fixed; top: 0; left: 0; background: #fff; width: 100%; z-index:9; } .header-container{ position: fixed; z-index:999; top: 0; left: 0; width: 100%; background: url('../images/header-linear-bg.png') repeat-x center left; background-size: auto 100%; .logo{ img{ height:3.5rem; width:auto; } } .nav-marker{ width:100%; position: absolute; bottom: 0; left: 0; height: 7px; opacity: 0; z-index:9999; // display: none; .marker__side{ border-top-color: transparent; border-top: 7px solid #fff; -webkit-transition: width .2s,left .2s,border-top-color 0s .2s; transition: width .2s,left .2s,border-top-color 0s .2s; -webkit-transform: translateZ(0); transform: translateZ(0); position: absolute; // z-index:99; &.marker__side--left{ width: 40vw; left:0; border-right: 7px solid transparent; will-change: width; } &.marker__side--right{ width: 50vw; right:0; border-left: 7px solid transparent; will-change: width; } } } &.header-shadow{ box-shadow: 0 0 10px rgba(0,0,0,0.1); } } .header-container-hover{ background: #fff; .header-panel{ .nav-panel{ ul.nav-list{ li{ a.nav{ color:#999; } .tool-item{ color:#999; } } } } } .nav-marker{ opacity: 1; } } .header-panel{ display: flex; align-items: center; justify-content: space-between; height: 7rem; z-index:999; .nav-panel{ height: 100%; flex:1; padding-left: 3%; ul.nav-list{ height: 100%; display: flex; align-items: center; .nav-item{ height: 100%; // float: left; // display: inline; flex:1; a.nav{ display: block; padding: 0 20%; font-size:1.5rem; color:#fff; height: inherit; display: flex; align-items: center; justify-content: center; } &:hover{ .nav{ color:#0066cc; } } &.active{ .nav{ color:#0066cc; } } } .tool-item{ display: flex; align-items: center; padding: 0 2rem; height: 100%; color:#fff; .division{ margin:0 2.3rem; font-size:9px; -webkit-transform-origin-x: 0; -webkit-transform: scale(0.7); } .wechat{ position: relative; cursor: pointer; .wechat-popup{ top: 5.5rem; left: 50%; transform: translateX(-50%); position: absolute; width:140px; height:140px; padding: 10px; font-size: 0; background: #fff; border-radius: 5px; font-size: 0; display: none; &::after{ content:''; border:10px solid transparent; border-bottom:10px solid #fff; display:block; width: 10px; top: -20px; position: absolute; left: 50%; transform: translateX(-50%); } } } .search{ cursor: pointer; &:hover{ color:#0066cc; } } } } .subNav-panel{ position: absolute; top: 6.4rem; left: 50%; transform: translateX(-50%); display: none; background-position: top; background-repeat: no-repeat; background-size: 100% 100%; // background-color:rgba(0,0, 0, 0.3); // background-blend-mode: multiply; width:100%; padding: 10rem 0; min-height:50rem; z-index: 999; &::after{ content:''; width: 100%; height: 100%; position: absolute; top: 0rem; left: 50%; transform: translateX(-50%); background: rgba(0,0, 0, 0.3); display: block; z-index:-1; } .subNav-box{ display: flex; align-items: stretch; } .sub-section{ overflow: hidden; opacity: 0; transition: all 0.3s; position: relative; left: -50px; .nav-title{ display: none; } &.show{ opacity: 1; left: 0; } } .subNav-list-crosswise{ display: flex; align-items: flex-start; flex-wrap: wrap; width: 100%; position: relative; // justify-content:space-between; // height:20/10rem; li{ width:20%; height: auto; transition: padding 0.3s; z-index:999; // padding-bottom: 190px; &.active{ .subItem-box{ display: block; opacity: 1; left: 0; z-index:9999; } .item-label span{ color:#fff; font-weight: 600; &::after{ transform: translateY(-50%) rotate(90deg); } } } &:hover{ .item-label{ span{ color:#fff; } } } .item-label{ display: block; margin-bottom: 3rem; cursor: pointer; span{ position: relative; font-size: 1.6rem; color: #e0e0e0; &::after{ content:'\e601'; font-family: 'iconfont'; font-size:0.8rem; top: 50%; right: -1.5rem; position: absolute; transform: translateY(-50%) rotate(0deg); transition: all 0.3s; } } } .subItem-box{ padding: 35px 0; // margin-top: 35px; border-top: 1px solid rgba(255,255,255,0.5); width: 100%; // min-height:40/10rem; display: none; opacity: 1; position: absolute; left:-50px; overflow: hidden; transition: opacity 0.5s,left 0.5s; -ms-transition: opacity 0.5s,left 0.5s; z-index:-1; flex:1; min-height:19rem; box-sizing: border-box; .subItem-panel-crosswise{ display: flex; // align-items: center; flex-wrap: wrap; width: 100%; a{ display: block; width: 20%; color:#fff; text-align: left; padding:0; padding-right: 10px; font-size:1.4rem; &:nth-child(n+6){ margin-top: 20px; } &:nth-child(5n+5){ padding-right:0; } &:hover{ color:#fff; } } } } } } .subNav-list-portait{ position: relative; width:100%; &.subNav-list-center{ .subNav-list{ left:50px; padding-right: 0; .item-label::after{ content:'' !important; } } } li.active{ .subItem-box{ // display: block; right: 0; opacity: 1; z-index:9999; // animation: subItemAnimate 0.5s ease-in-out ; } .item-label{ border-bottom-color:#fff; a{ font-size: 1.5rem; } } } .item-label{ cursor: pointer; a{ padding: 0; transition:all 0.2s; } } .subItem-box{ position: absolute; right:3rem; top: 0; // display: none; z-index:-9; opacity: 0; padding:0.8rem 0; width:calc(~'100% - 30%'); transition: opacity 0.5s, right 0.5s; .subItem-panel-crosswise{ display: flex; flex-wrap: wrap; a{ display: block; // text-align:center; margin-bottom: 30px; color:#fff; font-size: 1.4rem; padding-right:40px; width: 33.3%; &:nth-child(3n+3){ padding-right: 0; } &:hover{ color:#fff; } } } } } &.product-sub-panel{ padding: 5rem 0; .subNav-list{ li{ margin-top: 0; margin-bottom: 0; .item-label{ font-size:1.4rem; a{ font-size:1.4rem; transition:all 0.2s; color:#e0e0e0; } } &.active{ .item-label{ border-bottom-color:#fff; a{ font-size: 1.5rem; } } } } } } .subNav-list{ width:20%; padding-right: 2rem; li{ margin-bottom:3.5rem; margin-top: 1rem; &:first-child{ margin-top: 0; } &.active{ .item-label{ color:#fff; font-weight: 600; a{ color:#fff; font-weight: 600; } // border-bottom-color:#fff; } } .item-label{ font-size: 1.6rem; color:#e0e0e0; padding:10px 0; // border-bottom:1px solid #b1b1b1; border-bottom:1px solid rgba(177,177,177,0.1); display: flex; justify-content: space-between; align-items: center; cursor: pointer; position: relative; a{ font-size:1.6rem; // color:#b1b1b1; color:#e0e0e0; } &::after{ content:'\e601'; font-family: 'iconfont'; font-size:1.4rem; position: absolute; top: 50%; right: 0; transform: translateY(-50%); } } &:last-child{ margin-bottom:0; } } } .sub-marker{ // height: 100%; width:6px; position: absolute; // left: -13px; left: 20%; top: 0; height:100%; margin:0 5rem; overflow: hidden; display: block; .sub-marker__pic { display: block; position: absolute; top: -323px; left: 0; -webkit-transition: top .5s ease-out; transition: top .5s ease-out; } } // .subItem-box{ // flex: 1; // } .portait-sub-panel{ overflow: hidden; flex:1; .subItem-panel{ display: none; &:first-child{ display: block; } .subItem-list{ flex-wrap: wrap; display: flex; align-content:flex-start; padding-top: 10px; a{ display: block; width:20%; text-align:center; margin-bottom: 30px; color:#fff; font-size: 1.4rem; } } } } } } } .banner-panel{ width: 100%; height: 90vh; position: relative; top: 0; left: 0; z-index:1; &.showMask{ &::after{ content:''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: block; // background: rgba(0,0, 0, 0.4); background: rgba(255,255, 255, 0.6); z-index: 9; } } .swiper-container { width: 100%; height: 100%; .swiper-slide{ overflow: hidden; width:100%; height: 100%; background-size:cover !important; } .img-item{ position: absolute; top: 50%; left: 50%; width: 100%; height: auto; transform: translate(-50%,-50%); } .swiper-pagination-bullet{ width:3rem; height:3rem; background: url('../images/swiper_bullet.png') no-repeat center; background-size:auto; } .swiper-pagination-bullet-active{ background: url('../images/swiper_bullet_active.png') no-repeat center; } .text{ color: #FFF; position: absolute; left: 50%; top: 50%; margin-top: -5rem; margin-left: -600px; font-size: 50px; font-weight: bold; text-shadow: #616161 1px 0 0; transition: all ease 1s; opacity: 0; .title{ transition: all ease 1s; margin-left: 190px; } .f-title{ transition: all ease 1s; font-size: 30px; margin-top: -50px; position: relative; &::after{ content: ""; display: block; width: 20px; height: 4px; background-color: #FFF; position: absolute; left: 0; bottom: -20px; } } } .swiper-slide-active { .text{ opacity: 1; margin-left: -600px; .title{ margin-left: 0; } .f-title{ margin-top: 26px; } } } } } .footer-panel{ width: 100%; // margin-top: ; .container{ height: 8rem; display: flex; position: relative; color: #949494; align-items: center; font-size: 1.2rem; justify-content: center; text-align: center; a{ color: #949494; } } } .pc-hide{ display: none !important; } // 鍐呴〉渚ц竟鏍忓鑸 .type-nav-panel{ width: 180px; ul{ width:180px; transition: all .3s; } li{ padding-bottom:2rem; overflow: hidden; &.active{ .type-title{ color:#1a1a1a; border-bottom:2px solid #1a1a1a; &.has-subnav:after{ transform: rotate(90deg); } a{ color:#1a1a1a; } } .type-sub-panel{ // display: block; } } } .type-title{ font-size: 1.6rem; color:#949494; padding-bottom:1.5rem; border-bottom:2px solid transparent; position: relative; transition: all 0.3s; cursor: pointer; a{ color:#949494; } &.has-subnav:after{ content:'\e601'; font-family: 'iconfont'; position: absolute; top: 0%; right: 0; font-size: 1rem; transform:rotate(0deg); transition: all 0.3s; } &:hover{ border-bottom:2px solid #1a1a1a; color:#1a1a1a; a{ color:#1a1a1a; } } } .type-sub-panel{ display: none; overflow: hidden; padding-bottom: 3rem; a{ color:#aeaeae; margin-top: 27px; font-size:1.4rem; display: block; &.acitve{ color:#1a1a1a; font-weight: 600; } &:hover{ color:#1a1a1a; } } } } .info-panel{ margin-bottom: 10rem; } } @media screen and (max-width:768px){ .mobile-hide{ display: none !important; } .topScroll{ display: none !important; } .pc-footer{ display: none; } .mobile-footer{ display: block } .banner-panel{ width: 100%; height: calc(~'100vh - 9rem'); position: relative; top: 0; left: 0; z-index:1; .swiper-container { width: 100%; height: 100%; .swiper-slide{ overflow: hidden; width:100%; height: 100%; background-size:cover !important; } .img-item{ position: absolute; top: 50%; left: 50%; width: 100%; height: auto; transform: translate(-50%,-50%); } .swiper-pagination-bullet{ // width:1/10rem; // height:2/10rem; // background: url('../images/swiper_bullet.png') no-repeat center; // background-size:auto; } .swiper-pagination-bullet-active{ // background: url('../images/swiper_bullet_active.png') no-repeat center; background:#fff; } } } .mobile-header-panel{ display: flex; align-items: center; justify-content: space-between; padding: 1.5rem 2/10rem; position: fixed; top: 0; left: 0; width: 100%; z-index:9; background: url('../images/header-linear-bg.png') repeat-x center left; background-size: auto 100%; .nav-btn{ min-width: 2.5/10rem; .iconfont{ font-size: 2.3/10rem; } color:#fff; } .logo{ img{ width:auto; height: 2/10rem; } } &.moblie-header-active{ background:#fff; .nav-btn{ color:#000; } } } .page-panel{ .arrow{ margin:0 1/10rem; } } .footer-panel{ width: 100%; height: 8/10rem; display: flex; background: #fafafa; color: #949494; align-items: center; justify-content: center; text-align:center; padding: 0 2/10rem; font-size:1.1/10rem; a{ color: #949494; } } .mobile-company{ font-size:1.6/10rem; font-weight: bold; display: flex; align-items: center; justify-content: center; height:9/10rem; width:100%; img{ width: 75%; } & ~ .footer-panel{ height: 6/10rem; } } .header-section{ position:fixed; top: 0; left: 0; background: #fff; width: 100vw; height: 100vh; z-index:9; display: none; &.animated { animation-duration: 0.5s; animation-fill-mode: both; } } .mobile-close{ display: flex; flex-direction:row-reverse; padding:20px; } .search-container{ width:100%; position: relative; margin: 10px 0 20px; .search-panel{ width: calc(~'100% - 30px'); margin: 0 auto; display: flex; align-items: center; justify-content: space-between; padding: 5px 15px; border-radius: 20px; border:1px solid #e6e6e6; } .search-input{ width: 90%; font-size: 1.4/10rem; outline: none; border:0; } .tool-item{ .iconfont{ font-size:16px; } .search-close{ display: none; } } .search-result-panel{ position: absolute; top: 50px; left: 0; width:100%; background: #fff; z-index:9; padding: 10%; display: none; height: 100vh; .search-list{ .list-item{ margin-bottom: 50px; .item-type{ font-size:1.6/10rem; } .item-info{ margin-top: 20px; font-size:1.4/10rem; a{ color:#666; } } } } } } .sub-head-tool{ display: flex; align-items: center; justify-content: space-between; color:#fff; padding-bottom: 20px; margin:0 -10% 0 -10%; .iconfont{ font-size:20px; } } .header-container{ .logo{ display: none; } .nav-panel{ width: 100%; .nav-item{ border-bottom:1px solid #eee; a.nav{ font-size:20px; display: block; margin:3.5rem 0 2/10rem; color:#333; position: relative; font-weight: bold; &::after{ content:"\e601"; font-family: 'iconfont'; position: absolute; top: 50%; right: 0; transform: translateY(-50%); font-size:1.2/10rem; font-weight: lighter; } } .subNav-panel{ display: none; position: absolute; top: 0; left: 0; width:100%; height: 100%; background-size: 100% auto; background-position: center; z-index:99; background-repeat: no-repeat; overflow-y:auto; padding: 10% 15% 10% 15%; background-color: rgba(0,0, 0, 0.4); background-blend-mode: multiply; &.animated { animation-duration: 0.5s; animation-fill-mode: both; } // &::after{ // content:''; // background-color: rgba(0,0,0,0.6); // display: block; // position:absolute; // top:0; // left: 0; // width: 100%; // height:100%; // z-index:1; // } section{ position:relative; z-index:2; } .nav-title{ font-size:23px; padding: 10px 0; border-bottom:1px solid #fff; color:#fff; font-weight: bold; } .container{ padding: 0; } .subNav-box{ margin-top: 35px; .subNav-list-crosswise{ li{ margin-bottom: 35px; &.label-active{ .item-label::after{ content:'\e601'; font-family: 'iconfont'; top: 50%; right: 0; transform: translateY(-50%) rotate(-90deg); font-size:1.6/10rem; position: absolute; font-weight: normal; transition: all 0.3s; } .subItem-box{ display: block; } .subItem-panel-crosswise{ display: block; } } .item-label{ color:#fff; position: relative; width:100%; font-size:1.5/10rem; font-weight: bold; &::after{ content:'\e601'; font-family: 'iconfont'; top: 50%; right: 0; transform: translateY(-50%); font-size:1.2/10rem; position: absolute; transition: all 0.3s; } } } } .subNav-list-portait{ li{ margin-bottom: 35px; .item-label{ color:#fff; position: relative; width:100%; font-size:1.5/10rem; font-weight: bold; cursor: pointer; a{ margin-left: 0; color:#fff; } &::after{ content:'\e601'; font-family: 'iconfont'; top: 50%; right: 0; transform: translateY(-50%); font-size:1.2/10rem; position: absolute; transition: all 0.3s; } &.label-active{ &::after{ content:'\e601'; font-family: 'iconfont'; top: 50%; right: 0; transform: translateY(-50%) rotate(-90deg); font-size:1.6/10rem; position: absolute; font-weight: normal; transition: all 0.3s; } } } } } .subItem-box{ margin-top: 2.8/10rem; display: none; overflow:hidden; .subItem-panel-crosswise{ display: none; a{ display: block; margin-bottom: 2.6/10rem; color:#fff; font-size: 1.4/10rem; border-bottom: 0; padding: 0; font-weight: lighter; &::after{ content:''; } &:last-child{ margin-bottom: 0; } } } } } } .tool-item{ display: none; } } } } // 鍐呴〉鍒嗙被瀵艰埅 .type-nav-panel{ display: none; position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background: #fff; z-index:999; &.animated { animation-duration: 0.5s; animation-fill-mode: both; } ul{ padding:3rem 5/10rem; li{ width: 100%; .type-title{ border-bottom:1px solid #ddd; color:#000; padding:1.5rem 0; font-size:1.6/10rem; cursor: pointer; position: relative; &.has-subnav:after{ content:'\e601'; font-family: 'iconfont'; position: absolute; top: 50%; right: 0; font-size: 1/10rem; transform:translateY(-50%); transition: all 0.3s; } &.active{ a{ color:#0066cc } } } .type-sub-panel{ display: none; position: fixed; top: 6/10rem; left: 0; width: 100vw; height: 100vh; background: #fff; z-index:9999; padding:3rem 5/10rem; .sub-item{ border-bottom:1px solid #ddd; color:#000; padding:1.5rem 0; font-size:1.6/10rem; display: block; } } } } } .info-panel{ .title-panel{ display: flex; align-items: center; justify-content: space-between; padding:2rem 0.5/10rem; .title{ font-size:1.8/10rem; font-weight: bold; display: flex; justify-content: space-between; align-items: flex-end; flex:1; .goback{ font-size: 1.4/10rem; color:#817F7F; } } .title-type{ font-size:1.4/10rem; position: relative; color: #0066cc; padding-right: 1.5/10rem; &:after{ content:'\e601'; font-family: 'iconfont'; position: absolute; top: 50%; right: 0; font-size:1.4/10rem; transform: translateY(-50%) rotate(90deg); } } } .mobile-type-nav-panel{ display: none; .type-panel{ display: flex; align-items: center; justify-content: space-between; padding:3rem 1.5/10rem; background:#f2f2f2; } .type-item{ width:45%; font-size:1.4/10rem; padding: 0.5rem 0; border-bottom:1px solid #ddd; position: relative; &::after{ content:'\e601'; font-family: 'iconfont'; position: absolute; top: 50%; right: 0; font-size:1.2/10rem; color:#0066cc; transform: translateY(-50%) rotate(90deg); } } } } } ////2021 08.15鏂板 .new-content-text{ width: 1500px; margin: 0 auto; .new-title{ display: flex; justify-content: space-between; height: 50px; margin-top: 20px; border-bottom: 1px solid #eee; align-items: center; .left{ font-size: 24px; position: relative; height: 50px; display: flex; align-items: center; &::after{ content: ""; display: block; position: absolute; left: 0; right: 0; bottom: -1px; height: 4px; background-color: #159eed; } } .right{ color: #949494; font-size: 14px; } } } .swiper-container-02{ width: 572px; height: 385px; position: relative; overflow: hidden; margin-top: 20px; .swiper-slide{ position: relative; .text{ position: absolute; left: 0; right: 0; bottom: 0; color: #FFF; line-height: 36px; background: rgba(0,0, 0, 0.3); z-index: 99; font-size: 16px; padding: 0 18px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } img{ transition: transform .5s ease; transform: scale(1); cursor: pointer; &:hover{ transform: scale(1.05); } } } .swiper-button-prev02,.swiper-button-next02{ position: absolute; left: 15px; top: 50%; width: 47px; height: 47px; margin-top: -23px; background: url(../images/index/arrow_left.png) no-repeat center; background-size: 47px; z-index: 2; } .swiper-button-next02{ background: url(../images/index/arrow_right.png) no-repeat center; background-size: 47px; left: auto; right: 15px; } } .news-information{ display: flex; justify-content: space-between; padding-top: 10px; } .news-title-list{ width: 820px; margin-top: 6px; .news-title{ border-bottom: 1px solid #eee; display: flex; height: 80px; align-items: center; cursor: pointer; .date{ position: relative; width: 74px; border-right: 1px solid #eee; color: #949494; .month{ font-size: 22px; text-align: center; } .year{ font-size: 14px; } } .title-content{ margin-left: 25px; width: 700px; letter-spacing: 1px; .title,.f-title{ font-size: 16px; color: #000; text-overflow: ellipsis; position: relative; white-space: nowrap; line-height: 1.8em; width: 100%; overflow: hidden; } .f-title{ color: #949494; font-size: 14px; letter-spacing: 1px; } } &:hover{ .title-content{ .title{ color: #00a9f0; } } .date{ color: #00a9f0; } } } } .flex-content{ padding-top: 20px; display: flex; justify-content: space-between; .enterprise-content{ width: 475px; .list-content{ .list{ font-size: 14px; height: 52px; border-bottom: 1px solid #eee; display: flex; padding-left: 14px; align-items: center; position: relative; .text{ text-overflow: ellipsis; position: relative; white-space: nowrap; overflow: hidden; width: 100%; letter-spacing: 1px; &:hover{ color: #00a9f0; } } &::after{ content: ""; display: block; width: 4px; height: 4px; border-radius: 50%; background-color: #159eed; left: 0; top: 50%; margin-top: -2px; position: absolute; } &:nth-child(6) { border-bottom: none; } } } } .video-content{ width: 446px; .swiper-container-03{ margin-top: 20px; width: 100%; position: relative; height: 288px; overflow: hidden; .swiper-slide{ position: relative; .text{ position: absolute; left: 0; right: 0; bottom: 0; color: #FFF; line-height: 36px; background: rgba(0,0, 0, 0.3); z-index: 99; font-size: 14px; padding: 0 18px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } img{ transition: transform .5s ease; transform: scale(1); cursor: pointer; &:hover{ transform: scale(1.05); } } .veide-pay{ width: 49px; height: 49px; position: absolute; left: 50%; top: 50%; transform: scale(1) !important; margin-top: -25px; margin-left: -25px; z-index: 9; cursor: pointer; } } .swiper-button-prev03,.swiper-button-next03{ position: absolute; left: 15px; top: 50%; width: 30px; height: 30px; margin-top: -15px; background: url(../images/index/arrow_left.png) no-repeat center; background-size: 30px; z-index: 2; } .swiper-button-next03{ background: url(../images/index/arrow_right.png) no-repeat center; background-size: 30px; left: auto; right: 15px; } } } } .science-content{ width: 300px; .swiper-container-04{ margin-top: 20px; width: 100%; position: relative; height: 288px; box-sizing: border-box; overflow: hidden; .swiper-slide{ position: relative; width: 100%; padding: 0 38px; .img{ width: 100%; height: 100%; display: block; position: relative; overflow: hidden; img{ transition: transform .5s ease; transform: scale(1); cursor: pointer; &:hover{ transform: scale(1.05); } } } .text{ position: absolute; left: 38px; right: 38px; bottom: 0; color: #FFF; line-height: 36px; background: rgba(0,0, 0, 0.3); z-index: 99; font-size: 14px; padding: 0 18px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } } .swiper-button-prev04,.swiper-button-next04{ position: absolute; left: 0; top: 50%; width: 15px; height: 27px; margin-top: -14px; background: url(../images/index/arrow_left2.png) no-repeat center; background-size: 15px 27px; z-index: 2; } .swiper-button-next04{ background: url(../images/index/arrow_right2.png) no-repeat center; background-size: 15px 27px; left: auto; right: 0; } } } .new-footer-panel{ position: relative; margin-top: 25px; // height: 192px; background-color: #1b1b1b; .logo-content{ img{ display: block; margin: 0 auto; } .logo{ width: 220px; height: auto; padding-top: 18px; } .ercode{ width: 72px; height: 72px; margin-top: 10px; } .text{ text-align: center; font-size: 12px; color: #a2a2a2; line-height: 2em; } } .copy-right{ padding-top: 11px; color: #FFF; font-size: 12px; text-align: center; line-height: 24px; background-color: #1b1b1b; } } .Video-Plyr iframe { height: 720px; } @media screen and (max-width:1580px){ .banner-panel .swiper-container .text{ margin-left: -1200/2px !important; } .new-content-text{ width: 1200px; .new-title{ height: 50/12*12px; margin-top: 20/12*12px; .left{ font-size: 24/12*12px; height: 50/12*12px; &::after{ height: 3px; } } .right{ font-size: 14/12*12px; } } } .swiper-container-02{ width: 572/12*12px; height: 385/12*12px; margin-top: 20/12*12px; .swiper-slide{ .text{ line-height: 36/12*12px; font-size: 16/12*12px; padding: 0 18/12*12px; } } .swiper-button-prev02,.swiper-button-next02{ left: 15/12*12px; width: 47/12*12px; height: 47/12*12px; margin-top: -23/12*12px; background: url(../images/index/arrow_left.png) no-repeat center; background-size: 47/12*12px; } .swiper-button-next02{ background: url(../images/index/arrow_right.png) no-repeat center; background-size: 47/12*12px; right: 15/12*12px; left: auto; } } .news-information{ padding-top: 10px; } .news-title-list{ width: 600/12*12px; margin-top: 6/12*12px; .news-title{ height: 80/12*12px; .date{ width: 74/12*12px; .month{ font-size: 22/12*12px; } .year{ font-size: 14/12*12px; } } .title-content{ margin-left: 25/12*12px; width: 505/12*12px; .title,.f-title{ font-size: 16/12*12px; } .f-title{ font-size: 14/12*12px; } } } } .flex-content{ .enterprise-content{ width: 375/12*12px; .list-content{ .list{ font-size: 14/12*12px; height: 52/12*12px; padding-left: 14/12*12px; } } } .video-content{ width: 446/12*12px; .swiper-container-03{ margin-top: 20/12*12px; height: 288/12*12px; .swiper-slide{ .text{ line-height: 36/12*12px; font-size: 14/12*12px; padding: 0 18/12*12px; } .veide-pay{ width: 49/12*12px; height: 49/12*12px; margin-top: -25/12*12px; margin-left: -25/12*12px; } } .swiper-button-prev03,.swiper-button-next03{ left: 15/12*12px; top: 50%; width: 30/12*12px; height: 30/12*12px; margin-top: -15/12*12px; background: url(../images/index/arrow_left.png) no-repeat center; background-size: 30/12*12px; } .swiper-button-next03{ background: url(../images/index/arrow_right.png) no-repeat center; background-size: 30/12*12px; right: 15/12*12px; left: auto; } } } } .science-content{ width: 300/12*12px; .swiper-container-04{ margin-top: 20/12*12px; height: 288/12*12px; .swiper-slide{ padding: 0 38/12*12px; .text{ left: 38/12*12px; right: 38/12*12px; line-height: 36/12*12px; font-size: 14/12*12px; padding: 0 18/12*12px; } } .swiper-button-prev04,.swiper-button-next04{ width: 15/12*12px; height: 27/12*12px; margin-top: -14/12*12px; background: url(../images/index/arrow_left2.png) no-repeat center; background-size: 15/12*12px 27/12*12px; } .swiper-button-next04{ background: url(../images/index/arrow_right2.png) no-repeat center; background-size: 15/12*12px 27/12*12px; } } } .new-footer-panel{ margin-top: 25/12*12px; .logo-content{ .logo{ width: 220/12*12px; padding-top: 18/12*12px; } .ercode{ width: 72/12*12px; height: 72/12*12px; margin-top: 10/12*12px; } .text{ font-size: 12/12*12px; } } .copy-right{ padding-top: 11/12*12px; font-size: 12/12*12px; line-height: 24/12*12px; } } .Video-Plyr iframe { height: 720/12*7.68px; } } @media screen and (max-width:1280px){ .banner-panel .swiper-container .text{ margin-left: -940/2px !important; } .new-content-text{ width: 940px; .new-title{ height: 50/12*9.4px; margin-top: 20/12*9.4px; .left{ font-size: 24/12*9.4px; height: 50/12*9.4px; // &::after{ // height: 2px; // } } .right{ font-size: 14/12*9.4px; } } } .swiper-container-02{ width: 572/12*9.4px; height: 385/12*9.4px; margin-top: 20/12*9.4px; .swiper-slide{ .text{ line-height: 36/12*9.4px; font-size: 16/12*9.4px; padding: 0 18/12*9.4px; } } .swiper-button-prev02,.swiper-button-next02{ left: 15/12*9.4px; width: 47/12*9.4px; height: 47/12*9.4px; margin-top: -23/12*9.4px; background: url(../images/index/arrow_left.png) no-repeat center; background-size: 47/12*9.4px; } .swiper-button-next02{ background: url(../images/index/arrow_right.png) no-repeat center; background-size: 47/12*9.4px; right: 15/12*9.4px; left: auto; } } .news-information{ padding-top: 10px; } .news-title-list{ width: 600/12*9.4px; margin-top: 6/12*9.4px; .news-title{ height: 80/12*9.4px; .date{ width: 74/12*9.4px; .month{ font-size: 22/12*9.4px; } .year{ font-size: 14/12*9.4px; } } .title-content{ margin-left: 25/12*9.4px; width: 505/12*9.4px; .title,.f-title{ font-size: 16/12*9.4px; } .f-title{ font-size: 14/12*9.4px; } } } } .flex-content{ .enterprise-content{ width: 375/12*9.4px; .list-content{ .list{ font-size: 14/12*9.4px; height: 52/12*9.4px; padding-left: 14/12*9.4px; } } } .video-content{ width: 446/12*9.4px; .swiper-container-03{ margin-top: 20/12*9.4px; height: 288/12*9.4px; .swiper-slide{ .text{ line-height: 36/12*9.4px; font-size: 14/12*9.4px; padding: 0 18/12*9.4px; } .veide-pay{ width: 49/12*9.4px; height: 49/12*9.4px; margin-top: -25/12*9.4px; margin-left: -25/12*9.4px; } } .swiper-button-prev03,.swiper-button-next03{ left: 15/12*9.4px; top: 50%; width: 30/12*9.4px; height: 30/12*9.4px; margin-top: -15/12*9.4px; background: url(../images/index/arrow_left.png) no-repeat center; background-size: 30/12*9.4px; } .swiper-button-next03{ background: url(../images/index/arrow_right.png) no-repeat center; background-size: 30/12*9.4px; right: 15/12*9.4px; left: auto; } } } } .science-content{ width: 300/12*9.4px; .swiper-container-04{ margin-top: 20/12*9.4px; height: 288/12*9.4px; .swiper-slide{ padding: 0 38/12*9.4px; .text{ left: 38/12*9.4px; right: 38/12*9.4px; line-height: 36/12*9.4px; font-size: 14/12*9.4px; padding: 0 18/12*9.4px; } } .swiper-button-prev04,.swiper-button-next04{ width: 15/12*9.4px; height: 27/12*9.4px; margin-top: -14/12*9.4px; background: url(../images/index/arrow_left2.png) no-repeat center; background-size: 15/12*9.4px 27/12*9.4px; } .swiper-button-next04{ background: url(../images/index/arrow_right2.png) no-repeat center; background-size: 15/12*9.4px 27/12*9.4px; } } } .new-footer-panel{ margin-top: 25/12*9.4px; .logo-content{ .logo{ width: 220/12*9.4px; padding-top: 18/12*9.4px; } .ercode{ width: 72/12*9.4px; height: 72/12*9.4px; margin-top: 10/12*9.4px; } .text{ font-size: 12/12*9.4px; } } .copy-right{ padding-top: 11/12*9.4px; font-size: 12/12*9.4px; line-height: 24/12*9.4px; } } .Video-Plyr iframe { height: 720/12*7.68px; } } @media screen and (max-width:980px){ .banner-panel .swiper-container .text{ margin-left: -768/2px !important; } .new-content-text{ width: 768px; .new-title{ height: 50/12*7.68px; margin-top: 20/12*7.68px; .left{ font-size: 24/12*7.68px; height: 50/12*7.68px; } .right{ font-size: 14/12*7.68px; } } } .swiper-container-02{ width: 572/12*7.68px; height: 385/12*7.68px; margin-top: 20/12*7.68px; .swiper-slide{ .text{ line-height: 36/12*7.68px; font-size: 16/12*7.68px; padding: 0 18/12*7.68px; } } .swiper-button-prev02,.swiper-button-next02{ left: 15/12*7.68px; width: 47/12*7.68px; height: 47/12*7.68px; margin-top: -23/12*7.68px; background: url(../images/index/arrow_left.png) no-repeat center; background-size: 47/12*7.68px; } .swiper-button-next02{ background: url(../images/index/arrow_right.png) no-repeat center; background-size: 47/12*7.68px; right: 15/12*7.68px; left: auto; } } .news-information{ padding-top: 10px; } .news-title-list{ width: 600/12*7.68px; margin-top: 6/12*7.68px; .news-title{ height: 80/12*7.68px; .date{ width: 74/12*7.68px; .month{ font-size: 22/12*7.68px; } .year{ font-size: 14/12*7.68px; } } .title-content{ margin-left: 25/12*7.68px; width: 505/12*7.68px; .title,.f-title{ font-size: 16/12*7.68px; } .f-title{ font-size: 14/12*7.68px; } } } } .flex-content{ .enterprise-content{ width: 375/12*7.68px; .list-content{ .list{ font-size: 14/12*7.68px; height: 52/12*7.68px; padding-left: 14/12*7.68px; } } } .video-content{ width: 446/12*7.68px; .swiper-container-03{ margin-top: 20/12*7.68px; height: 288/12*7.68px; .swiper-slide{ .text{ line-height: 36/12*7.68px; font-size: 14/12*7.68px; padding: 0 18/12*7.68px; } .veide-pay{ width: 49/12*7.68px; height: 49/12*7.68px; margin-top: -25/12*7.68px; margin-left: -25/12*7.68px; } } .swiper-button-prev03,.swiper-button-next03{ left: 15/12*7.68px; top: 50%; width: 30/12*7.68px; height: 30/12*7.68px; margin-top: -15/12*7.68px; background: url(../images/index/arrow_left.png) no-repeat center; background-size: 30/12*7.68px; } .swiper-button-next03{ background: url(../images/index/arrow_right.png) no-repeat center; background-size: 30/12*7.68px; right: 15/12*7.68px; left: auto; } } } } .science-content{ width: 300/12*7.68px; .swiper-container-04{ margin-top: 20/12*7.68px; height: 288/12*7.68px; .swiper-slide{ padding: 0 38/12*7.68px; .text{ left: 38/12*7.68px; right: 38/12*7.68px; line-height: 36/12*7.68px; font-size: 14/12*7.68px; padding: 0 18/12*7.68px; } } .swiper-button-prev04,.swiper-button-next04{ width: 15/12*7.68px; height: 27/12*7.68px; margin-top: -14/12*7.68px; background: url(../images/index/arrow_left2.png) no-repeat center; background-size: 15/12*7.68px 27/12*7.68px; } .swiper-button-next04{ background: url(../images/index/arrow_right2.png) no-repeat center; background-size: 15/12*7.68px 27/12*7.68px; } } } .new-footer-panel{ margin-top: 25/12*7.68px; .logo-content{ .logo{ width: 220/12*7.68px; padding-top: 18/12*7.68px; } .ercode{ width: 72/12*7.68px; height: 72/12*7.68px; margin-top: 10/12*7.68px; } .text{ font-size: 12/12*7.68px; } } .copy-right{ padding-top: 11/12*7.68px; font-size: 12/12*7.68px; line-height: 24/12*7.68px; } } .Video-Plyr iframe { height: 720/12*7.68px; } } .news-mobile{ display: none; } @media screen and (max-width:768px){ .banner-panel{ height: 73/10rem; } .swiper-container-horizontal>.swiper-pagination-bullets, .swiper-pagination-custom, .swiper-pagination-fraction{ display: flex; height: 10px; justify-content: center; align-items: center; } .swiper-pagination-bullet{ width: 4px; height: 4px; background: url('../images/swiper_bullet.png') no-repeat center !important; background-size: 4px !important; border-radius: 0% !important; } .swiper-pagination-bullet-active{ width: 10px; height: 10px; background: url('../images/swiper_bullet_active.png') no-repeat center !important; background-size: 8px !important; } .banner-panel .swiper-container{ .text{ color: #FFF; position: absolute; left: 50%; margin-top: 230/10/10rem; margin-left: -690/20/10rem !important; font-size: 60/10/10rem; font-weight: bold; text-shadow: #616161 1px 0 0; transition: all ease 1s; opacity: 0; .title{ transition: all ease 1s; margin-left: 190/20/10rem; } .f-title{ transition: all ease 1s; font-size: 28/10/10rem; margin-top: -40/10/10rem; } } .swiper-slide-active { .text{ opacity: 1; margin-left: -600/10/10rem; .title{ margin-left: 0; } .f-title{ margin-top: 26/10/10rem; } } } } .new-content-text{ width: 69/10rem; .news-information{ display: block; } .new-title{ height: 10/10rem; margin-top: 2/10rem; .left{ font-size: 4.4/10rem; height: 10/10rem; } .right{ font-size: 2.8/10rem; display: none; } } } .swiper-container-02{ width: 69/10rem; height: 41/10rem; margin-top: 2/10rem; .swiper-slide{ .text{ line-height: 7/10rem; font-size: 3/10rem; padding: 0 1.8/10rem; } } .swiper-button-prev02,.swiper-button-next02{ left: 1.5/10rem; width: 4.7/10rem; height: 4.7/10rem; margin-top: -2.3/10rem; background: url(../images/index/arrow_left.png) no-repeat center; background-size: 4.7/10rem; } .swiper-button-next02{ background: url(../images/index/arrow_right.png) no-repeat center; background-size: 4.7/10rem; right: 1.5/10rem; left: auto; } } .news-information{ padding-top: 1/10rem; } .news-title-list{ width: 69/10rem; margin-top: 1/10rem; .news-title{ height: 14.4/10rem; .date{ width: 13/10rem; .month{ font-size: 4.6/10rem; } .year{ font-size: 2.8/10rem; } } .title-content{ margin-left: 25/10/10rem; width: 505/10/10rem; .title,.f-title{ font-size: 3.2/10rem; } .f-title{ font-size: 2.8/10rem; } } } } .flex-content{ display: block; .enterprise-content{ width: 69/10rem; .list-content{ .list{ font-size: 2.8/10rem; height: 11/10rem; padding-left: 3/10rem; &:nth-child(6) { border-bottom: 1px solid #eee; } } } } .video-content{ width: 69/10rem; margin-top: 20px; .swiper-container-03{ margin-top: 40/10/10rem; height: 426/10/10rem; .swiper-slide{ .text{ line-height: 8/10rem; font-size: 2.8/10rem; padding: 0 2/10rem; } .veide-pay{ width: 80/10/10rem; height: 80/10/10rem; margin-top: -40/10/10rem; margin-left: -40/10/10rem; } } .swiper-button-prev03,.swiper-button-next03{ left: 15/10/10rem; top: 50%; width: 30/5/10rem; height: 30/5/10rem; margin-top: -30/10/10rem; background: url(../images/index/arrow_left.png) no-repeat center; background-size: 60/10/10rem; } .swiper-button-next03{ background: url(../images/index/arrow_right.png) no-repeat center; background-size: 60/10/10rem; right: 15/10/10rem; left: auto; } } } } .science-content{ margin-top:20px; width: 69/10rem; .swiper-container-04{ margin-top: 4/10rem; height: 63/10rem; .swiper-slide{ padding: 0 7/10rem; .text{ left: 7/10rem; right: 7/10rem; line-height: 8.2/10rem; font-size: 2.8/10rem; padding: 0 2/10rem; } } .swiper-button-prev04,.swiper-button-next04{ width: 3/10rem; height: 5.4/10rem; margin-top: -14/10/10rem; background: url(../images/index/arrow_left2.png) no-repeat center; background-size: 3/10rem 5.4/10rem; } .swiper-button-next04{ background: url(../images/index/arrow_right2.png) no-repeat center; background-size: 3/10rem 5.4/10rem; } } } .new-footer-panel{ margin-top: 25/10/10rem; .logo-content{ .logo{ width: 220/10/10rem; padding-top: 18/10/10rem; } .ercode{ width: 150/10/10rem; height: 150/10/10rem; margin-top: 26/10/10rem; } .text{ font-size: 22/10/10rem; } } .copy-right{ padding-top: 11/10/10rem; font-size: 24/10/10rem; line-height: 1.6em; padding: 1/10rem; display: none; } } .Video-Plyr iframe { height: 720/10/10rem; } .news-mobile{ display: block !important; } .mobile-header-panel { padding: 15px 20px; } .mobile-header-panel .nav-btn { min-width: 25px; } .mobile-header-panel .nav-btn .iconfont { font-size: 23px; } .mobile-header-panel .logo img { height: 20px; } .search-container .search-input { font-size: 14px; } .header-container .nav-panel .nav-item .subNav-panel .subNav-box .subNav-list-portait li .item-label { font-size: 15px; } .header-container .nav-panel .nav-item .subNav-panel .subNav-box .subItem-box { margin-top: 28px; } .header-container .nav-panel .nav-item .subNav-panel .subNav-box .subItem-box .subItem-panel-crosswise a { margin-bottom: 26px; font-size: 14px; } .header-container .nav-panel .nav-item .subNav-panel .subNav-box .subNav-list-portait li .item-label::after { font-size: 12px; } .header-container .nav-panel .nav-item .subNav-panel .subNav-box .subNav-list-portait li .item-label.label-active::after { font-size: 16px; } .header-container .nav-panel .nav-item a.nav::after { font-size: 12px; } .info-list-content{ padding-top: 3.2/10rem; .info-item-new{ &:nth-child(1n){ margin-right: 3/10rem; } &:nth-child(2n){ margin-right: 0; } } .info-pic-new{ width: 28.6*1.15/10rem; .img{ width: 28.6*1.15/10rem; height: 16*1.15/10rem; } .veide-pay{ width: 5/10rem; height: 5/10rem; margin-left: -2.5/10rem; margin-top: -2.5/10rem; } } .info-introduction-new{ line-height: 7/10rem; height: 7/10rem; font-size: 2.8/10rem; padding: 0 1.8/10rem; width: 28.6*1.15/10rem; margin-bottom: 3/10rem; } } .container-panel .info-panel{ width: 100%; padding-left: 0; } .news-mobile{ display: block !important; } .next-page{ display: none; } .info-panel { .news-mobile{ display: flex !important; } } .header-container .nav-panel .nav-item a.nav{ margin: 35px 20px; } .header-container{ .container { width: 6.9rem !important; } } }