@charset "utf-8"; .index-video-show { position: fixed; width: 100%; height: 100%; top: 0; left: 0; z-index: 1000; display: none; } .index-video-show::after { background: rgba(0, 0, 0, 0.5); content: ''; left: 0; top: 0; position: absolute; width: 100%; height: 100%; } .index-video-box { width: 90%; max-width: 1000px; margin: auto; z-index: 10; position: absolute; top: 0; left: 0; right: 0; bottom: 0; max-height: 80vh; height: fit-content; } .index-video-box video { width: 100%; } .index-video-box .close { position: absolute; right: 20px; top: 20px; background: #000; border-radius: 50%; width: 30px; height: 30px; display: flex; justify-content: center; align-items: center; cursor: pointer; z-index: 10; } .index-video-box .close img { width: 16px; } /*头部样式*/ .header { position: fixed; top: 0; z-index: 110; width: 100%; margin: 0 auto; left: 0; right: 0; transition: all 0.5s; cursor: pointer; } .headerTop { display: flex; align-items: center; justify-content: space-between; /*height: 120px;*/ height: 100px; padding: 0 20px; transition: all 0.5s; /*max-width: 80%;*/ width: 80%; margin: auto; } .headerTop.black .menuBox ul li a, .headerTop.black .menuBox ul li.active > a { color: #333; } .headerTop.black .menuBox ul li.active > a { color: var(--dominant-color); } .headerTop.black .logo img { filter: none; } .headerTop.black .language .search img { filter: brightness(0.5) } .headerTop.black .language-box { color: #999; background: url('../images/language2.png') no-repeat center left; } .headerTop.black .phoneNav, .headerTop.black .phoneNav::before, .headerTop.black .phoneNav::after { background: #333; } .logo a { height: 100px; display: block; line-height: 100px; } /*导航颜色*/ /*默认情况:全白*/ .logo img { max-width: 100%; filter: grayscale(1) brightness(100); } /*鼠标移入状态 下滑状态 上滑状态*/ .header.active { transition: all 0.5s; margin-top: -121px; } @media screen and (max-width: 768px) { .header.active { margin-top: 0 !important; } } .header.active2 { /*border-bottom:1px solid #eee*/ } .header.bgActive, .header.active, .header.active2 { background: #fff; box-shadow: 0 0 20px 10px rgba(0, 0, 0, 0.05); } .header.bgActive .logo img, .header.active .logo img, .header.active2 .logo img, .header.header1 .logo img { filter: none; } .header.bgActive .language .search img, .header.active .language .search img, .header.active2 .language .search img, .header.header1 .language .search img { filter: brightness(0.5); } .header.bgActive .language .language-box, .header.active .language .language-box, .header.active2 .language .language-box, .header.header1 .language .language-box { color: #999; background: url('../images/language2.png') no-repeat center left; } .header.bgActive .menuBox ul li > a, .header.active2 .menuBox ul li > a { color: #666 } .header .menuBox ul li.active > a { color: #fff; font-weight: 600; } .header.bgActive .menuBox ul li.active > a, .header.active2 .menuBox ul li.active > a { color: #009c96 } .header .menuBox ul li a:hover { color: #009c96; font-weight: 600; } .header .menuBox ul li .secondMenu a:hover { font-weight: 400; } .header .menuBox ul li .threeMenu a:hover { font-weight: 400; } .header .menuBox ul li .threeMenu a:hover::after { width: 100%; } /*情况一:header1 logo绿色+黑字*/ .header.header1 { box-shadow: 0 0 20px 10px rgb(0 0 0 / 5%); /*border-bottom: 2px solid #cfcfcf;*/ } .header.header1 .menuBox ul li a { color: #666 } .header.header1 .menuBox ul li.active > a { color: #009c96; font-weight: 600; } .header.header1 .menuBox ul li a:hover { color: #009c96; } .header.header1.header2 { border-bottom: none; } .header.header1.header2 { border: none; box-shadow: none; } /*背景深色文字显白*/ .headerTop.white .menuBox ul li a { color: #fff; } .bgActive .headerTop.white .menuBox ul li a, .active2 .headerTop.white .menuBox ul li a { color: #333; } .bgActive .headerTop.white .menuBox ul li a:hover, .active2 .headerTop.white .menuBox ul li a:hover { color: var(--dominant-color); } .headerTop.white .logo img { filter: grayscale(1) brightness(100); } .bgActive .headerTop.white .logo img, .active2 .headerTop.white .logo img { filter: none; } .bgActive .headerTop.white .menuBox ul li.active > a, .active2 .headerTop.white .menuBox ul li.active > a { color: var(--dominant-color); } .headerTop.white .language .search img { filter: none; } .bgActive .headerTop.white .language .search img, .active2 .headerTop.white .language .search img { filter: brightness(0.5); } .headerTop.white .language .language-box { color: #fff; background: url('../images/language.png') no-repeat center left } .bgActive .headerTop.white .language .language-box, .active2 .headerTop.white .language .language-box { color: #333; background: url('../images/language2.png') no-repeat center left } body::before { content: ''; width: 100%; height: 0; position: fixed; background: rgba(0, 0, 0, 0.2); top: 0; left: 0; z-index: 101; transition: all 0.5s; } body.active::before { height: 100%; transition: all 0.5s; } /*头部样式*/ /*菜单样式*/ .pro-phone-menu { display: none; } .menu { display: flex; justify-content: flex-end; } .phoneIcon { display: none } .menuBox .close { display: none; } .menuBox ul { display: flex; justify-content: flex-start; } .menuBox ul li a { font-size: 20px; color: #fff; margin-left: 15px; margin-right: 15px; /*height: 120px;*/ /*line-height: 120px;*/ height: 100px; line-height: 100px; display: block; position: relative; transition: all 0.5s; } .menuBox ul li.active a::after { width: 100%; } .menuBox ul li a:hover::after { width: 100%; } .header .menuBox ul li { position: relative; } .header .menuBox ul li:nth-child(2), .header .menuBox ul li:nth-child(3) { position: inherit; } .header .secondMenu { position: absolute; /*top: 120px;*/ top: 100px; background: #fdfdfd; left: 50%; margin-left: -85px; padding: 20px; width: 170px; box-shadow: inset 0 15px 15px 0 rgba(0, 0, 0, 0.03), 0 2px 5px 0 rgba(0, 0, 0, 0.01), 0 2px 5px 0 rgba(0, 0, 0, 0.01), 0 2px 5px 0 rgba(0, 0, 0, 0.01); /*transition: all 0.5s;*/ display: none; text-align: center; } .header .secondMenu a { color: #333; line-height: 40px; height: auto; text-align: center; margin: 0 auto 0; display: block; } .header .secondMenu a:last-child { margin-bottom: 0; } .menuBox ul li .secondMenu a::after { content: ''; position: absolute; bottom: 0; height: 1px; width: 0; background: #009c96; left: 0; right: 0; transition: all 0.5s; margin: auto; } .header .secondMenu a:hover::after { width: 100%; } .language { display: flex; align-items: center; position: relative; padding-left: 30px; } .language .language-box { color: #fff; font-size: 16px; background: url('../images/language.png') no-repeat center left; padding: 0 0 0 36px; margin-left: 30px; line-height: 100px; height: 100%; position: relative; } .language a:hover { color: #fff; text-decoration: underline; } .language-show { position: absolute; top: 100px; background: #fdfdfd; padding: 20px; width: 120px; left: 50%; margin-left: -60px; box-shadow: inset 0 15px 15px 0 rgb(0 0 0 / 3%), 0 2px 5px 0 rgb(0 0 0 / 1%), 0 2px 5px 0 rgb(0 0 0 / 1%), 0 2px 5px 0 rgb(0 0 0 / 1%); text-align: center; display: none; } .language-show { line-height: 40px; font-size: 16px; } .language-show a { font-size: 20px; color: #666; line-height: 40px; } .language-show a:hover { color: var(--dominant-color) } .proMenu { /*position: fixed;*/ position: absolute; /*top: 120px;*/ top: 100px; width: 100%; background: #fff; left: 0; margin-left: 0; box-shadow: inset 0 15px 15px 0 rgba(0, 0, 0, 0.03), 0 2px 5px 0 rgba(0, 0, 0, 0.01), 0 2px 5px 0 rgba(0, 0, 0, 0.01), 0 2px 5px 0 rgba(0, 0, 0, 0.01); display: none; } .secondMenu-box { display: flex; justify-content: space-between; max-width: 80%; margin: auto; padding: 30px 20px; position: relative; } .firstMenu { width: 76%; min-height: 410px; position: relative; } .firstMenu-box { height: 412px; overflow: auto; width: 30%; } .secondMenu-boxs { position: absolute; top: 0; left: 33%; width: 27%; height: 412px; overflow: auto; } .threeMenu-box { position: absolute; width: 27%; top: 0; left: 63%; overflow: auto; height: 100%; } .three-box, .second-box { display: none; } .three-box.active, .second-box.active { display: block; } .firstMenu-box::-webkit-scrollbar, .secondMenu-boxs::-webkit-scrollbar, .threeMenu-box::-webkit-scrollbar { width: 2px; } .secondItem, .threeMenu a { margin: 20px auto; } .proMenu.secondMenuDown .secondMenu-box .firstMenu .firstItem { margin: 20px 0; width: 33%; width: 100%; } .proMenu.secondMenuDown .secondMenu-box .firstMenu a { /*font-weight: 600;*/ height: auto; line-height: 1.4; /*margin: 0 0 30px;*/ width: fit-content; border-bottom: 1px solid transparent; position: relative; color: #666; } .proMenu.secondMenuDown .secondMenu-box .firstMenu .secondItem a { color: #333; } .proMenu.secondMenuDown .secondMenu-box .firstMenu a::after { content: ''; width: 0; height: 1px; left: 0; right: 0; bottom: 0; margin: auto; position: absolute; background: var(--dominant-color); transition: all 0.5s; } .proMenu.secondMenuDown .secondMenu-box .firstMenu a:hover { /*border-bottom: 1px solid #009c96;*/ color: #009c96 } .proMenu.secondMenuDown .secondMenu-box .firstMenu a:hover::after { /*width: 100%;*/ /*transition: all 0.5s;*/ } .proMenu.secondMenuDown .secondMenu-box .pro-secondMenu a:hover::after { width: 100%; transition: all 0.5s; } .secondMenu-box .pro-menu-img { width: 20%; max-width: 335px; border-radius: 14px; overflow: hidden; text-align: right; position: relative; /*margin-top: 30px;*/ margin-right: 5%; } .secondMenu-box .pro-menu-img a { color: #333 } .proMenu.secondMenuDown .secondMenu-box .firstMenu .pro-secondMenu a { font-weight: 400; } .pro-secondMenu { /*position: absolute;*/ width: 100%; left: 33%; /*top: 30px;*/ top: 0; font-weight: 400; display: none; max-height: 370px; } .pro-secondMenu.active { display: block; } .threeMenu { /*border-right: 2px solid #d9d9d9;*/ /*display: none;*/ width: 100%; /*left: 100%;*/ position: absolute; top: 0; height: 412px; border-right: 2px solid #d9d9d9; } .secondItem.active .threeMenu { display: block; max-height: 412px; overflow: auto; min-height: 412px; } .secondItem.active .threeMenu::-webkit-scrollbar { width: 2px; } .firstItem.active .pro-secondMenu { display: block; } .firstItem.active > a, .secondItem.active > a { color: #009c96 !important; } .firstItem.active, .secondItem.active { background: url('../images/next5.png') no-repeat center right 8%; } .proMenu.secondMenuDown .secondMenu-box .firstMenu a:last-child { margin-bottom: 0; } .pro-menu-img a { color: #333; font-size: 20px; line-height: 2 !important; height: auto !important; display: inline-block !important; border-bottom: 1px solid #333; margin: 10px 0 !important; } .menu-close { background: url('../images/menu-close.png') no-repeat center; width: 50px; height: 50px; text-align: center; line-height: 50px; position: absolute; right: -30px; top: 20px; } /*菜单样式*/ /*轮播图样式*/ .banner { height: 100vh; } .banner .swiper-slide img { display: none; } .banner .swiper-slide video { width: 100%; height: 100vh; object-fit: cover; } .banner .swiper-slide .imgBox { height: 100vh; background-size: cover !important; } .banner .swiper-pagination { max-width: 100%; padding: 0 160px; left: 0; right: 0; bottom: 70px !important; text-align: left; margin: auto; } .banner .swiper-pagination-bullet { width: 60px !important; height: 1px !important; background: #fff; border-radius: 0 !important; } .banner .swiper-pagination-bullet-active { background: #fff !important; } .banner .text { position: absolute; top: 30%; max-width: 80%; padding: 0 20px; left: 0; right: 0; margin: auto; z-index: 2; } .banner .text img { max-width: 100%; width: auto; } .banner .text a { display: inline-block; } .banner .text .title { font-size: 68px; color: #fff; margin-top: 10px; font-weight: 400; line-height: 1.6; } .banner .index-swiper-button svg { width: 100%; height: 100%; opacity: 0; } .banner .index-swiper-button .swiper-button-next svg #circle { transition: linear 0s; stroke-dasharray: 255, 255; stroke-dashoffset: 255; } .banner .index-swiper-button .swiper-button-next.animated-button #circle { stroke-dashoffset: 0; transition: linear 3s; } .banner .index-swiper-button .swiper-button-next.animated-button svg { opacity: 1; } @media screen and (max-width: 768px) { .banner, .banner .swiper-slide .imgBox, .banner .swiper-slide img, .banner .swiper-slide video { } .banner .swiper-slide .imgBox { background: none !important; height: 0; padding-bottom: calc(640 / 750 * 100%); overflow: hidden; position: relative; } .banner .swiper-slide img { display: block; position: absolute; } .banner .text { display: none; } .banner { height: auto; margin-top: 60px; } } .index-swiper-button { width: 100%; max-width: 80%; padding: 0 20px; margin: auto; position: absolute; bottom: 24%; left: 0; right: 0; display: flex; z-index: 11; } .index-swiper-button .swiper-button-prev { margin-right: 40px; } .index-swiper-button .swiper-button-prev, .index-swiper-button .swiper-button-next { width: 80px; height: 80px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, 0.5); position: relative; margin-top: 0; } .index-swiper-button .swiper-button-prev::after, .index-swiper-button .swiper-button-next::after { font-size: 24px; color: #fff; opacity: 0.8; } .index-swiper-button .swiper-button-next::after { position: absolute; } .index-container { display: flex } .index-container .left { width: 40px; height: 80px; position: relative; overflow: hidden; } .index-container .leftcircle { width: 80px; height: 80px; border: 2px solid rgba(255, 255, 255, 1); position: absolute; border-radius: 50%; left: 0; top: 0; transform: rotate(45deg); /*transform: rotate(0deg);*/ animation-duration: 3s; animation-timing-function: linear; animation-iteration-count: infinite; } .index-container.animated-button .leftcircle { animation-name: circle_left; border: none; border-bottom: 2px solid rgba(255, 255, 255, 1); border-left: 2px solid rgba(255, 255, 255, 1); } .index-container .right { width: 40px; height: 80px; position: relative; overflow: hidden; } .index-container .rightcircle { width: 80px; height: 80px; border-radius: 50%; border: 2px solid rgba(255, 255, 255, 1); position: absolute; right: 0px; top: 0px; animation-duration: 3s; animation-timing-function: linear; animation-iteration-count: infinite; transform: rotate(-135deg); } .index-container.animated-button .rightcircle { animation-name: circle_right; border: none; border-top: 2px solid rgba(255, 255, 255, 1); border-right: 2px solid rgba(255, 255, 255, 1); } @keyframes circle_right { 0% { transform: rotate(-135deg); } 50%, 100% { transform: rotate(45deg); } } @keyframes circle_left { 0%, 50% { transform: rotate(-135deg); } 100% { transform: rotate(45deg); } } .indexLink { max-width: 80%; padding: 0 20px; margin: auto; position: absolute; top: 0; bottom: 0; left: 0; right: 0; z-index: 10; width: 100%; display: flex; align-items: center; flex-direction: column; justify-content: right; height: fit-content } .indexLink a { width: 68px; height: 68px; border-radius: 50%; display: block; margin: 0 0 0 auto; position: relative; } .indexLink a::after { content: ''; width: 8px; height: 8px; border-radius: 50%; position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: auto; background: #fff; } .indexLink a:hover, .indexLink a.active { border: 1px solid #fff; } /*轮播图样式*/ /*通用样式*/ .indexTitle { font-size: 48px; color: #333; transition: all 0.5s; transform: translateY(100px); opacity: 0; } .detailMore { overflow-x: hidden; border-radius: 30px; margin-top: 8%; width: 150px; transition: all 0.5s; } .indexNewMore { margin: 30px auto 0; } .detailMore a { background: #009c96 linear-gradient(to right, rgba(32, 156, 255, 0.39), rgba(104, 204, 227, 0.39)); height: 60px; display: flex; justify-content: center; align-items: center; font-size: 18px; color: #fff; } .detailMore:hover { width: 180px; transition: all 0.5s; } .detailMore a:hover { color: #fff; } /*通用样式*/ /*第二屏*/ .about .summary { max-width: 850px; font-size: 20px; color: #333; margin-top: 40px; line-height: 1.8; margin-bottom: 100px; transform: translateY(100px); opacity: 0; transition: all 0.5s; } .aboutNumber { max-width: 740px; display: flex; justify-content: space-between; transform: translateY(100px); opacity: 0; transition: all 0.5s; } .aboutNumber .item { text-align: center; } .aboutNumber .item:nth-child(1), .aboutNumber .item:nth-child(2) { width: 110px; } .aboutNumber .item:nth-child(3), .aboutNumber .item:nth-child(4) { width: 170px; } .aboutNumber .item .imgBoxs { width: 110px; height: 90px; margin: auto; display: flex; align-items: center; justify-content: center; } .aboutNumber .item .imgBox img { width: auto; } .aboutNumber .item .number { font-size: 54px; color: #666; font-family: OPPOSans-B; } .aboutNumber .item p { font-size: 18px; color: #333; margin-top: 5px; } .more-box { transform: translateY(20px); opacity: 0; transition: all 1.5s; } @media screen and (min-width: 768px) { .active .indexTitle { transition: all 1.5s; transform: translateY(0); opacity: 1; transition-delay: 1s; } .active .about .summary { transition: all 1.5s; transform: translateY(0); opacity: 1; transition-delay: 1.5s; } .active .aboutNumber { transition: all 1.5s; transform: translateY(0); opacity: 1; transition-delay: 1.7s; } .active .more-box { transition: all 1.5s; transform: translateY(0); opacity: 1; transition-delay: 1.9s; } } /*第二屏*/ /*第三屏*/ .index-swiper { width: 100%; } .index-swiper .swiper-slide { height: 100vh; align-items: center; display: flex; justify-content: center; } .index-swiper .text-box { /*max-width: 80%;*/ padding: 0 20px; width: 100%; margin: 0 auto 0 250px; } .index-swiper .text-box.white .text, .index-swiper .text-box.white .text .indexTitle { color: #fff; } .index-swiper .text { color: #333; } .index-swiper .text .indexTitle { /*font-size: clamp(20px,3vw,48px);*/ } .index-swiper .text .title { font-size: 52px; /*font-size: clamp(20px,3vw,52px);*/ font-weight: 600; margin: 2% 0; transition: all 1.5s; transform: translateY(100px); opacity: 0; } .active .index-swiper .text .title { transition: all 1.5s; transform: translateY(0); opacity: 1; transition-delay: 1.2s; } .index-swiper .text .summary { font-size: 20px; max-width: 520px; line-height: 1.8; transition: all 1.5s; transform: translateY(100px); opacity: 0; } .active .index-swiper .text .summary { transition: all 1.5s; transform: translateY(0); opacity: 1; transition-delay: 1.4s; } .productMore { transition: all 1.5s; transform: translateY(100px); opacity: 0; } .active .productMore { transition: all 1.5s; transform: translateY(0); opacity: 1; transition-delay: 1.6s; } .productMore .pro-hover { background: var(--linear-color); width: 150px; height: 60px; border-radius: 30px; line-height: 60px; color: #fff; font-size: 16px; display: flex; align-items: center; justify-content: center; cursor: pointer; } .pro-hover span { background: url('../images/prev3.png') no-repeat center; width: 15px; height: 13px; margin-left: 20px; } .pro-list { top: 120%; width: 1000px; max-width: 1000px; position: absolute; display: none; } .pro-list a { color: #666; font-size: 16px; height: 60px; line-height: 60px; background: rgba(255, 255, 255, 0.8); margin-right: 20px; border-radius: 34px; display: inline-block; padding: 0 20px; min-width: 180px; text-align: center; margin-bottom: 20px; } .pro-list a:hover { background: var(--linear-color); color: #fff; } .productMore-box { position: relative; width: 150px; margin-top: 5%; } .index-button { position: absolute; width: 180px; display: flex; justify-content: space-between; right: 0; } .index-button .swiper-button-prev, .index-button .swiper-button-next { position: initial; width: 70px; height: 70px; background: #d1d1d1; border-radius: 50%; margin-top: 0; } .index-button .swiper-button-prev:hover, .index-button .swiper-button-next:hover { background: var(--linear-color); } .index-button .swiper-button-prev:after, .index-button .swiper-button-next:after { content: ''; width: 100%; height: 100%; } .index-button .swiper-button-prev:after { background: url(../images/prev1.png) no-repeat center; } .index-button .swiper-button-next:after { background: url(../images/next.png) no-repeat center; } .index-button-box { position: relative; max-width: 80%; padding: 0 20px; margin: auto; bottom: 30%; text-align: right; } .sliderMenu { position: absolute; left: 0; top: 0; bottom: 0; margin: auto; width: 265px; display: flex; align-items: center; flex-direction: column; justify-content: center; z-index: 10; } .sliderMenu { /*height: 100vh;*/ } .sliderMenu .swiper { } .sliderMenu .swiper-slide { font-size: 20px; height: auto !important; text-align: left; position: relative; padding-left: 40px; margin-bottom: 30px; color: #ccd4d9; } .sliderMenu .swiper-slide:nth-child(2n) .text::after { height: 3px; } .sliderMenu .swiper-slide-thumb-active .text.white { color: #f0f0f0; } .sliderMenu .swiper-slide-thumb-active .text.black { color: #666; } .sliderMenu .swiper-slide .text::after { content: ''; width: 20px; height: 3px; background: #dcdcdc; left: 0; top: 0; bottom: 0; margin: auto; position: absolute; transition: all 0.5s; } .sliderMenu .swiper-slide-thumb-active .text::after { width: 36px; background: #8d8d8d; transition: all 0.5s; } .sliderMenu .swiper-slide .text.white::after { background: #ccd4d9; } .sliderMenu .swiper-slide-thumb-active .text.white::after { background: #f0f0f0; } /*第三屏*/ /*第四屏新闻*/ .newsBox { display: flex; margin-top: 40px; transition: all 1.5s; opacity: 0; transform: translateY(100px); } .active .newsBox { transition: all 1.5s; transform: translateY(0); transition-delay: 1.2s; opacity: 1; } .newsBox .item { background: #fff; border-radius: 14px 14px 0 0; box-shadow: 0 0 5px 5px rgba(0, 0, 0, 0.01); overflow: hidden; position: relative; } .newsBox .newsLeft .item .text { padding: 41px 50px; position: absolute; bottom: 0; left: 0; } .newsBox .item .text { padding: 34px 50px; } .newsBox .item .text .title { font-size: 24px; color: #666; font-weight: 600; } .newsBox .item .text .summary { color: #949494; font-size: 16px; margin-top: 20px; margin-bottom: 50px; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; } .newsBox .item .text .sub { display: flex; justify-content: space-between; color: #9fa0a0; font-family: OPPOSans-R; font-size: 16px; } .newsBox .newsLeft { margin-right: 20px; width: 50%; /*max-width: 680px;*/ background: #fff; } .newsBox .newsLeft .item { height: 100%; } .newsBox .item::after { content: ''; position: absolute; height: 3px; width: 0; background: #009c96; left: 0; bottom: 0; transition: all 0.5s; } .newsBox .item .newsImg img { transition: all 0.5s; } .newsBox .item:hover .newsImg img { transition: all 0.5s; /*transform: translate(-50%,-50%) scale(1.1);*/ transform: scale(1.1); } .newsBox .item:hover::after { width: 100%; transition: all 0.5s; } .newsBox .item:hover .title { color: var(--dominant-color) } .newsBox .item .newsImg { /*height: 0;*/ /*padding-bottom: 57%;*/ height: 65%; position: relative; overflow: hidden; } .newsBox .item .newsImg img { /*position: absolute;*/ top: 50%; left: 50%; width: 100%; height: 100%; object-fit: cover; /*transform: translate(-50%,-50%);*/ } .newsBox .newsRight { display: flex; flex-direction: column; justify-content: space-between; height: 100%; width: 50%; /*max-width: 680px;*/ } .newsBox .newsRight .item { margin-bottom: 20px; } .newsBox .newsRight .item:last-child { margin-bottom: 0 } /*第四屏新闻*/ /*第五屏视频*/ .video-show-box { height: 100vh; overflow: hidden; } .video-show-box video { width: 100%; height: 100%; object-fit: cover; } .index-video { position: absolute; bottom: 0; width: 100%; } .index-video-top { max-width: 80%; margin: 0 auto; padding: 0 20px; cursor: pointer; opacity: 0.3; transition: all 0.5s; } .index-video-top.active, .index-video-top:hover { opacity: 1; transition: all 0.5s; } .index-video-bottom { width: 100%; border-top: 1px solid rgba(255, 255, 255, 0.3); } .index-video-bottom .itemList { display: flex; max-width: 80%; margin: 0 auto; padding: 0 20px; color: #fff } .index-video-bottom .itemList .item { width: 30%; font-family: OPPOSans-R; cursor: pointer; opacity: 0.3; transition: all 0.5s; } .index-video-bottom .itemList .item:nth-child(2) { width: 40%; border-left: 1px solid rgba(255, 255, 255, 0.3); border-right: 1px solid rgba(255, 255, 255, 0.3); } .index-video-bottom .itemList .text { padding: 50px 70px 80px; } .itemList .item:nth-child(1) .text { padding-left: 0; } .itemList .item:nth-child(3) .text { padding-right: 0; } .index-video-top { margin-bottom: 50px; } .index-video-top .text { color: #fff } .index-video-top a { width: 180px; height: 70px; line-height: 70px; text-align: center; background: rgba(255, 255, 255, 0.3); border-radius: 34px; color: #fff; font-size: 18px; display: block; margin-top: 50px; } .index-video-top a:hover { background: #009c96; color: #fff } .index-video-top .number, .index-video-bottom .itemList .number { font-size: 28px; } .index-video-top .title, .index-video-bottom .itemList .title { font-size: 40px; font-weight: 600; margin: 40px 0; } .index-video-top .summary, .index-video-bottom .itemList .summary { font-size: 24px; } .index-video-bottom .itemList .item:hover { opacity: 1; transition: all 0.5s; } .item-video { display: none; } .item-video.active { display: block; } /*第五屏视频*/ /*底部样式*/ .fp-watermark { display: none; } .footer { background: #e3e3e3; } .indexFooter .copyLink { position: absolute; bottom: 0; width: 100%; } .indexFooter .footerBox { /*margin-bottom: 90px;*/ } .footerBox { /*max-width: 1240px;*/ max-width: 80%; padding: 80px 20px; margin: 0 auto 30px; } .footerCode { display: flex; justify-content: space-between; } .footerCode .wechat { margin-right: 70px; } .footerCode .wechat p { font-size: 18px; color: #909090; text-align: center; margin-top: 10px; } .footerCode .shares { text-align: right; } .footerCode .shares .title { font-size: 26px; color: #333; line-height: 1; } .footerCode .shares .titleNum { font-size: 26px; font-family: OPPOSans-B; margin-left: 10px; } .footerCode .shares .number { color: #ec4417; font-family: OPPOSans-B; font-weight: 900; font-size: 58px; margin: 15px 0; } .footerCode .shares .time { color: #909090; font-family: OPPOSans-R; font-size: 22px; } .footerLogo { display: flex; align-items: center; } .footerLogo span { font-size: 26px; color: #666; margin-left: 10px; line-height: 1; } .footerTop { display: flex; justify-content: space-between; margin-bottom: 90px; } .footerAdd { margin-top: 50px; } .footerAdd .item span { font-size: 14px; color: #767676; display: block; margin-bottom: 5px; } .footerAdd .item a { font-size: 38px; color: #333; font-family: OPPOSans-B; } .footerAdd .item p { font-size: 22px; color: #909090; margin-top: 10px; } .footerMenu { display: flex; justify-content: space-between; width: 100%; /*max-width: 1200px;*/ max-width: 100%; margin: auto; border-top: 2px solid #d1d1d1; padding-top: 90px; } .footerMenu .item a { font-size: 26px; color: #333; display: block; font-weight: 600; } .footerMenu .secondMenu a:hover { color: #009c96; } .footerMenu .secondMenu { margin-top: 40px; } .footerMenu .secondMenu a { color: #999; margin-bottom: 10px; font-size: 24px; font-weight: 400; } .indexFooter .footerMenu .secondMenu a { margin-bottom: 20px; } .footerMenu .secondMenu a.more { color: #009c96; } .copyLink { background: #606060; padding: 20px 0; } .copyLink .sections { display: flex; justify-content: space-between; color: #c0c0c0; font-size: 18px; } .copyLink a:hover { color: #009c96 } .copyLink a { color: #c0c0c0; font-size: 18px; } .pageFooter .goTop { display: none; bottom: 5%; position: fixed; z-index: 10; } .goTop { background: #d1d1d1 url('../images/goTop.png') no-repeat center; width: 80px; height: 80px; border-radius: 50%; box-shadow: 0 0 15px 5px rgba(0, 0, 0, 0.03); position: absolute; right: 5%; bottom: 30%; transition: all 0.5s; } .goTop:hover { background-color: #4c4c4c; transition: all 0.5s; } #fp-nav ul li a span, .fp-slidesNav ul li a span { background: #fff !important; } #fp-nav ul li a { padding: 20px; } #fp-nav ul li a.active { border-radius: 50%; border: 1px solid #fff; } #fp-nav ul li, .fp-slidesNav ul li { width: auto !important; height: auto !important; } #fp-nav.fp-right { /*right: 13% !important;*/ z-index: 10 !important; } @media screen and (max-width: 1600px) { /*导航*/ .language { padding-left: 20px; } .menuBox ul li a { /*margin-left: 20px;*/ /*margin-right: 20px;*/ } /*导航*/ /*通用*/ .detailText .sub { font-size: 32px; } .detailText .title { font-size: 24px; } /*通用*/ .newsBox .item .text .title { font-size: 20px; } .newsBox .item .text .summary { margin-bottom: 20px; } .newsBox .item .newsImg { /*padding-bottom: 47%;*/ } .banner .text .title { font-size: 48px; } .banner .text .title p, .banner .text .title span .banner .text .title div { font-size: 48px; } } @media screen and (max-width: 1440px) { /*通用*/ .detailText .sub { font-size: 32px; } .detailText .title { font-size: 24px; } /*通用*/ } @media screen and (max-width: 1366px) { .menuBox ul li a { margin-left: 10px; margin-right: 10px; font-size: 18px; } .logo { width: 180px; } } @media screen and (max-width: 1366px) { .indexTitle { font-size: 36px; } .index-swiper .text .title { font-size: 42px; } .index-swiper .text .summary { font-size: 16px; } .productMore .pro-hover, .pro-list a { height: 50px; line-height: 50px; } .aboutNumber .item .number { font-size: 36px; } .index-swiper .text-box { margin-bottom: 10%; } .pro-list a { margin-bottom: 10px; margin-right: 10px; } .newsBox .item .text { padding: 20px; } .pro-list { width: 900px; max-width: 900px; } .index-button { width: 120px; } .index-button .swiper-button-prev, .index-button .swiper-button-next { width: 50px; height: 50px; } } @media screen and (max-width: 1280px) { /*导航*/ .language { padding-left: 15px; } .menuBox ul li a { font-size: 18px; margin-left: 15px; margin-right: 15px; } /*导航*/ /*通用*/ .detailText .sub { font-size: 24px; } .detailText .title { font-size: 18px; } /*通用*/ .appLeft { top: 40px; } .proSummary { margin-top: 10% } .applicationText-swiper .item .summary { font-size: 14px; -webkit-line-clamp: 2; margin-top: 10px; } .applicationText-swiper .viewMore { margin-top: 20px; } .viewMore a { font-size: 14px; } .news-swiper .item .title { font-size: 14px; min-height: 46px; } .engineering-swiper .title { font-size: 16px; } .footerMenu .item a, .footerMenu a { font-size: 14px; } .footerMenu .item { /*margin-left: 40px;*/ } } @media screen and (max-width: 1080px) { /*导航*/ .language-box { display: none; } .headerTop { display: block; height: 60px; line-height: 60px; padding: 0 20px; width: 100%; } .menu { position: absolute; top: 0; right: 20px; flex-direction: row-reverse; } .language { padding-left: 0; padding-right: 15px; margin-left: 0; margin-right: 15px; } .language::after { left: auto; right: 0; } .header .logo { display: flex; align-items: center; height: 60px; width: 40%; } .header .logo a { height: 80px; line-height: 80px; } /*菜单手机状态*/ .phoneIcon { width: 20px; height: 16px; position: relative; top: 0; bottom: 0; margin: auto; display: flex; align-items: center; cursor: pointer; } .phoneNav { width: 100%; height: 2px; background: #fff; } .phoneNav:before { content: ''; position: absolute; top: 0; height: 2px; background: #fff; width: 100% } .phoneNav:after { content: ''; position: absolute; bottom: 0; height: 2px; background: #fff; width: 100% } .header1 .phoneNav, .header1 .phoneNav:before, .header1 .phoneNav:after, .active2 .phoneNav, .active2 .phoneNav:before, .active2 .phoneNav:after, .active .phoneNav, .active .phoneNav:before, .active .phoneNav:after, .bgActive .phoneNav, .bgActive .phoneNav:before, .bgActive .phoneNav:after { background: #000; } .header1 .white .phoneNav, .header1 .white .phoneNav:before, .header1 .white .phoneNav:after { background: #fff; } .header1.active2 .white .phoneNav, .header1.active2 .white .phoneNav:before, .header1.active2 .white .phoneNav:after { background: #000; } .headerTop.white .menuBox ul li a { color: #333; } .menuBox { position: fixed; width: 100%; background: #fff; height: 100vh; top: 0; right: -100%; z-index: 10; transition: all 0.5s; overflow: auto; overflow-x: hidden; } .phoneNavShow { right: 0; transition: all 0.5s; } .menuBox .close { position: absolute; top: 20px; right: 10px; font-size: 20px; text-align: center; width: 30px; height: 30px; line-height: 30px; color: #fff; z-index: 20; border-radius: 50%; cursor: pointer; background: #009c96 url('../images/close.svg') no-repeat center; background-size: 12px; text-indent: -99px; } .phoneNavShow .close { display: block; } .proMenu.secondMenuDown { display: none !important; } /*菜单手机状态*/ .menuBox ul li a, .header .menuBox ul li.active > a { color: #333; } .menuBox ul { flex-wrap: wrap; margin-top: 90px; } .menuBox ul li { width: 100%; border-bottom: 1px solid #eee; } .menuBox ul li a { height: auto; line-height: 50px; } .header .secondMenu { position: relative; top: 0; left: 0; margin-left: 0; width: 100%; box-shadow: none; padding: 0 20px 20px 30px; } .header .menuBox a.item-a { position: relative; } .header .menuBox a.item-a i { width: 30px; height: 30px; pointer-events: none; } .header .secondMenu a, .header.active .menuBox ul .secondMenu a { text-align: left; line-height: 30px; height: auto; display: block; margin-top: 10px; } .header .secondMenu a:last-child { margin-bottom: 0; } .header.active .secondMenu { top: 0; } .header ul li { position: relative !important; } .header ul li > a { /*pointer-events: none;*/ } .header ul li i { content: ''; width: 50px; height: 50px; top: 0; right: 0; position: absolute; background: url('../images/close.svg') no-repeat center; filter: brightness(0.2); background-size: 12px; z-index: 10; transform: rotate(45deg); transition: all 0.5s; } .header ul li i.active { transform: rotate(90deg); transition: all 0.5s; } .pro-phone-two .item-two a { position: relative; } .pro-phone-two .item-two a i { width: 30px; height: 30px; pointer-events: none; } /*导航*/ /*轮播图*/ .banner .text, .banner .swiper-pagination { padding: 0 20px; } .banner .text { top: 40%; max-width: 100%; } .bannerLogo { width: 25%; margin-bottom: 10px; } .banner .text .title { font-size: 20px; margin-top: 0; } .banner .text .title p, .banner .text .title span, .banner .text .title div { font-size: 24px !important; } .banner .text .midTitle { font-size: 18px; margin-top: 10px; } .banner .text .subTitle { font-size: 12px; } .banner .text .bannerMore { display: none; } .banner .swiper-pagination { bottom: 20px !important; } .banner .swiper-pagination-bullet { width: 30px !important; height: 2px !important; display: inline-block; border-radius: 0 !important; } .bannerDown { display: none; } /*轮播图*/ .indexTitle { font-size: 20px; } .section { background-size: cover !important; } .about.sections, .news.sections { padding: 30px 20px; } .about .summary { margin-top: 10px; margin-bottom: 20px; font-size: 14px; } .aboutNumber { flex-wrap: wrap; } .aboutNumber .item { width: 25% !important; margin-bottom: 20px; } .aboutNumber .item .number { font-size: 16px; } .detailMore a { font-size: 12px; height: 40px; } .aboutNumber .item p { font-size: 12px; } .index-swiper .text .title { font-size: 16px; margin-top: 20px; } .index-swiper .text .summary { font-size: 12px; } .productMore .pro-hover { font-size: 12px; height: 40px; line-height: 40px; } .pro-list a { font-size: 12px; height: 30px; line-height: 30px; min-width: auto; width: auto; padding: 0 20px; margin-bottom: 10px; } .productMore-box { width: 100%; } .pro-list { top: 120%; width: 100%; } .index-swiper .swiper-slide { height: auto; /*height: 100vh;*/ } .sliderMenu { display: none; } .index-swiper .text-box { margin: 30px auto 100px; } .index-button-box { bottom: 100px; right: 20px; } .index-button { width: 100px; } .index-button .swiper-button-prev, .index-button .swiper-button-next { width: 40px; height: 40px; } .index-button .swiper-button-prev::after, .index-button .swiper-button-next::after { background-size: 20px; } #fp-nav ul li a { padding: 10px; } #fp-nav ul li a.active span, #fp-nav ul li:hover a.active span, .fp-slidesNav ul li a.active span, .fp-slidesNav ul li:hover a.active span { } .newsBox { flex-direction: column; margin-top: 20px; } .newsBox .newsLeft { margin-bottom: 20px; width: 100%; margin-right: 0; } .newsBox .newsRight { width: 100%; } .newsBox .item .text { padding: 20px !important; position: inherit !important; } .newsBox .item .text .title { font-size: 16px; } .newsBox .item .text .summary { font-size: 14px; margin-top: 10px; } .newsBox .item .text .sub { font-size: 14px; } .index-video { position: initial; background: rgba(0, 0, 0, 0.5) } .video-show-box { height: auto; } .index-video-top { padding-top: 20px; margin-bottom: 20px; max-width: 100%; } .index-video-top .title, .index-video-bottom .itemList .title { font-size: 16px; margin: 10px auto; } .index-video-top .summary, .index-video-bottom .itemList .summary { font-size: 14px; } .index-video-top a { height: 50px; line-height: 50px; font-size: 14px; } .index-video-bottom .itemList { flex-direction: column; max-width: 100%; } .index-video-bottom .itemList .item, .index-video-bottom .itemList .item:nth-child(2) { width: 100%; padding: 30px 0; border-bottom: 1px solid rgba(255, 255, 255, 0.3); } .index-video-bottom .itemList .text { padding: 0; } .index-video-bottom .itemList .item:nth-child(2) { border-left: none; border-right: none; } .index-video-top .number, .index-video-bottom .itemList .number { font-size: 20px; } /*底部样式*/ .footerBox { padding: 50px 20px; max-width: 100%; } .footerTop { flex-direction: column; margin-bottom: 0; } .footerLogo img { /*width: 50%;*/ } .footerLogo span { font-size: 16px; } .footerMenu { display: none; } .footerAdd { margin-top: 20px; } .footerMid { padding-top: 10px; flex-direction: column; align-items: flex-start; } .footerCode { margin-top: 30px; display: flex; flex-direction: column; } .footerCode .shares { margin-top: 30px; text-align: left; } .footerCode .shares .title, .footerCode .shares .titleNum { font-size: 20px; } .footerCode .shares .time { font-size: 18px; } .copyLink .sections { flex-direction: column; font-size: 14px; } .footerCode .shares .number { font-size: 32px; } .footerCode .wechat { width: 130px; } .footerCode .wechat p { font-size: 12px; } .footerAdd .item p, .footerAdd .item a { font-size: 18px; margin-top: 0; } .footerCode .item .showCode { left: 0; margin-left: 0; } .copyLink { flex-direction: column; align-items: flex-start; line-height: 2; } .copyRight a { display: block; margin-left: 0; padding-left: 0; font-size: 18px; } .copyRight a::after { display: none; } .copyLink a { font-size: 14px; } /*底部样式*/ .indexLink { display: none; } .menuBox ul li .secondMenu a::after { display: none; } .goTop { display: none; width: 50px; height: 50px; background-size: 20px; position: fixed; bottom: 50px; } .index-swiper-button .swiper-button-prev, .index-swiper-button .swiper-button-next { width: 40px; height: 40px; } .index-container .left, .index-container .right { width: 20px; height: 40px; } .index-container .leftcircle, .index-container .rightcircle { width: 40px; height: 40px; } .newsBox .newsRight .item { /*display: none;*/ } .newsBox .newsRight .item:first-child { display: block; } .aboutNumber .item .imgBoxs { width: 30px; height: 50px; } .more-box .detailMore { margin-left: auto; margin-right: auto; margin-top: 20px; } .index-swiper-button { max-width: 100%; } .header { background: #fff; box-shadow: 0 0 20px 10px rgba(0, 0, 0, 0.05); } .header .logo img { filter: none; } .header .language .search img { filter: brightness(0.5); } .header .phoneNav, .header .phoneNav:before, .header .phoneNav:after { background: #000; } .pageBanner { margin-top: 60px; } } @media only screen and (min-width: 769px) { } img[src='/mgmt'], img[src=''], img:not([src]) { display: none; }