.orico_Page_index { width: 100%; position: relative; height: auto; padding-bottom: 3.75rem; overflow-y: auto; overflow-x: hidden; background: #f2f2f2; } .orico_Page_index .pageMain { width: 100%; position: relative; } .orico_Page_index .pageMain .bannerswiper { width: 100%; height: auto; position: relative; margin-top: 3.75rem; } .orico_Page_index .pageMain .bannerswiper .swiper-slide img { width: 100%; height: 100%; } .orico_Page_index .pageMain .bannerswiper .swiper-button-next { right: 9%; top: 53%; } .orico_Page_index .pageMain .bannerswiper .swiper-button-prev { left: 9%; top: 53%; } .orico_Page_index .pageMain .bannerswiper .swiper-horizontal>.swiper-pagination-bullets, .orico_Page_index .pageMain .bannerswiper .swiper-pagination-bullets.swiper-pagination-horizontal { bottom: 5%; } .orico_Page_index .pageMain .bannerswiper .swiper-button-next, .orico_Page_index .pageMain .bannerswiper .swiper-button-prev { color: #fff; } .orico_Page_index .pageMain .bannerswiper .swiper-pagination-bullet-active { width: 1.5rem !important; border-radius: 10px; color: #ffffff !important; background-color: #ffffff !important; } .orico_Page_index .pageMain .catMain { width: 100%; display: flex; flex-direction: row; justify-content: center; height: 14.375rem; background: #fff; } .orico_Page_index .pageMain .catMain .catit { min-width: 15%; display: flex; flex-direction: column; align-items: center; justify-content: center; } .orico_Page_index .pageMain .catMain .catit .catIcoImg { height: 4.6875rem; width: 4.6875rem; } .orico_Page_index .pageMain .catMain .catit .catName { padding-top: 1rem; font-size: 1rem; font-weight: bold; } .orico_Page_index .pageMain .featuredtopicsMain { width: 100%; position: relative; margin-top: 24px; overflow: hidden; padding-top: 3vw; display: flex; justify-content: center; } .orico_Page_index .pageMain .featuredtopicsMain .ftcontent { width: 85%; display: flex; flex-direction: column; } .orico_Page_index .pageMain .featuredtopicsMain .ftcontent .ftItme { width: 100%; max-height: 30rem; display: flex; flex-direction: row; background: #fff; justify-content: space-between; border-radius: 1.625rem; margin-bottom: 1.5rem; overflow: hidden; } .orico_Page_index .pageMain .featuredtopicsMain .ftcontent .ftItme .ftItme_left { width: 53%; display: flex; flex-direction: column; justify-content: center; text-align: center; align-items: center; } .orico_Page_index .pageMain .featuredtopicsMain .ftcontent .ftItme .ftItme_left p { font-size: 2.625rem; line-height: 2.8125rem; font-weight: 600; height: 5.9375rem; } .orico_Page_index .pageMain .featuredtopicsMain .ftcontent .ftItme .ftItme_left .subtitle { font-size: 1.125rem; font-weight: 600; display: flex; flex-direction: row; align-items: center; } .orico_Page_index .pageMain .featuredtopicsMain .ftcontent .ftItme .ftItme_left .subtitle .tpicture { width: 1.375rem; height: 1.375rem; background: url('/static/index/pc/images/more2.png') no-repeat; background-position: -26px 0px; margin-left: 1.625rem; } .orico_Page_index .pageMain .featuredtopicsMain .ftcontent .ftItme .ftItme_left .subtitle:hover { color: #004bfa; } .orico_Page_index .pageMain .featuredtopicsMain .ftcontent .ftItme .ftItme_left .subtitle:hover .tpicture { background-position: 0 0; } .orico_Page_index .pageMain .featuredtopicsMain .ftcontent .ftItme .ftItme_right { width: 47%; overflow: hidden; position: relative; } .orico_Page_index .pageMain .featuredtopicsMain .ftcontent .ftItme .ftItme_right img { width: 100%; transition: transform 0.3s ease-in-out; border-start-end-radius: 1.625rem; border-end-end-radius: 1.625rem; } .orico_Page_index .pageMain .featuredtopicsMain .ftcontent .ftItme .ftItme_right img:hover { transform: scale(1.09); } .orico_Page_index .pageMain .featuredtopicsMain .ftcontent .ftItme:nth-child(even) .ftItme_right img { border-start-end-radius: 0; border-end-end-radius: 0; border-start-start-radius: 1.625rem; border-end-start-radius: 1.625rem; } .orico_Page_index .pageMain .featuredProducts { position: relative; } .orico_Page_index .pageMain .featuredProducts .biaoti { font-size: 2rem; font-weight: 600; line-height: 6rem; margin-top: 42px; margin-bottom: 14px; width: 85%; margin: 0 auto; } .orico_Page_index .pageMain .featuredProducts .fpSwiper { width: 100%; margin-left: 6%; position: relative; } .orico_Page_index .pageMain .featuredProducts .fpSwiper .swiper-wrapper .picture { display: block; width: 21.875rem; height: 29.375rem; background: #ffffff; border-radius: 1.625rem; text-align: center; font-size: 1.125rem; display: flex; flex-direction: column; } .orico_Page_index .pageMain .featuredProducts .fpSwiper .swiper-wrapper .picture .primg { width: 13.5rem; height: 12.875rem; display: block; position: absolute; left: 50%; top: 30%; margin-left: -6.75rem; margin-top: -6.4375rem; background-repeat: no-repeat; transition: transform 0.3s ease-in-out; } .orico_Page_index .pageMain .featuredProducts .fpSwiper .swiper-wrapper .picture .primg img { width: 13.5rem; height: 12.875rem; } .orico_Page_index .pageMain .featuredProducts .fpSwiper .swiper-wrapper .picture .primg img:hover { transform: scale(1.1); } .orico_Page_index .pageMain .featuredProducts .fpSwiper .swiper-wrapper .picture .fpptitle { font-size: 1.25rem; text-align: center; line-height: 1.5rem; font-weight: 700; margin-top: 18rem; padding: 0 1.875rem; max-height: 3.0625rem; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } .orico_Page_index .pageMain .featuredProducts .fpSwiper .swiper-wrapper .picture .subtitle { text-align: center; line-height: 1.125rem; font-size: medium; width: 80%; margin: auto; margin-top: 1rem; margin-bottom: 1.25rem; max-height: 33px; overflow: hidden; font-weight: 600; } .orico_Page_index .pageMain .featuredProducts .fpSwiper .swiper-wrapper .picture .more { font-size: 0.8rem; position: absolute; bottom: 10%; left: 50%; color: #004bfa; margin-left: -40px; font-weight: 600; } .orico_Page_index .pageMain .featuredProducts .fpSwiper .swiperasd { display: flex; width: 83%; position: relative; height: 6.25rem; margin-left: 2%; } .orico_Page_index .pageMain .featuredProducts .fpSwiper .swiperasd .swiper-container1 { width: 85%; } .orico_Page_index .pageMain .featuredProducts .fpSwiper .swiperasd .swiper-container1 .swiper-pagination-progressbar .swiper-pagination-progressbar-fill { background-color: #555 !important; margin-top: 0px; height: 2px !important; } .orico_Page_index .pageMain .featuredProducts .fpSwiper .swiperasd .swiper-container1 .slideshow-pag { width: 86%; right: 3%; top: 50%; height: 1px; } .orico_Page_index .pageMain .featuredProducts .fpSwiper .swiperasd .swi1 { width: 15%; margin: 0; position: relative; overflow: hidden; list-style: none; padding: 0; z-index: 1; } .orico_Page_index .pageMain .featuredProducts .fpSwiper .swiperasd .swi1 .slideshow-btn { height: 2.5rem; width: 2.5rem; } .orico_Page_index .pageMain .featuredProducts .fpSwiper .swiperasd .swi1 .swiper-button-next, .orico_Page_index .pageMain .featuredProducts .fpSwiper .swiperasd .swi1 .swiper-rtl .swiper-button-prev { position: static !important; margin-left: 95px; margin-top: 24px; } .orico_Page_index .pageMain .featuredProducts .fpSwiper .swiperasd .swi1 .swiper-button-prev, .orico_Page_index .pageMain .featuredProducts .fpSwiper .swiperasd .swi1 .swiper-rtl .swiper-button-next { position: static !important; margin-left: 40px; margin-top: -40px; } .orico_Page_index .pageMain .hotProduct { position: relative; margin: 0 auto; } .orico_Page_index .pageMain .hotProduct .hotvideo { width: 100%; height: 50rem; overflow: hidden; transform-origin: center center; transform: scale(1); transition: transform 0.3s ease-in-out; background-size: 100% 100%; background-position: center center; animation: breath 4s linear infinite; } .orico_Page_index .pageMain .hotProduct .hotImg { position: relative; width: 100%; height: 100%; } .orico_Page_index .pageMain .sceneIntroduction { width: 100%; background: #fff; position: relative; display: flex; flex-direction: row; flex-wrap: wrap; justify-content: space-between; padding-top: 1%; overflow: hidden; } .orico_Page_index .pageMain .sceneIntroduction .sceneitem { overflow: hidden; width: 49.5%; display: block; position: relative; display: flex; flex-direction: column; align-items: center; height: 37rem; margin-bottom: 1%; } .orico_Page_index .pageMain .sceneIntroduction .sceneitem .sceneInfo { width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; } .orico_Page_index .pageMain .sceneIntroduction .sceneitem .sceneInfo .scenetitle { font-size: 1.875rem; text-align: center; font-weight: bold; max-height: 5.5rem; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; padding-top: 5%; z-index: 10; } .orico_Page_index .pageMain .sceneIntroduction .sceneitem .sceneInfo .subtitle { font-size: 1rem; text-align: center; line-height: 1.4em; margin-top: 0.3125rem; max-height: 1.5rem; z-index: 999; overflow: hidden; display: -webkit-box; margin-bottom: 0.3125rem; -webkit-line-clamp: 1; -webkit-box-orient: vertical; z-index: 10; } .orico_Page_index .pageMain .sceneIntroduction .sceneitem .sceneInfo .sceneMore { font-size: 1rem; color: #004bfa; text-align: center; z-index: 10; } .orico_Page_index .pageMain .sceneIntroduction .sceneitem .sceneimg { height: 100%; width: 100%; position: absolute; z-index: -1; background-size: 100% 100%; z-index: 9; } .orico_Page_index .pageMain .sceneIntroduction .sceneitem .sceneimg:hover { transform: scale(1.09); /* background-size: auto 120%; */ } .orico_Page_index .pageMain .oricoTechnology { display: flex; flex-direction: column; position: relative; padding-top: 6rem; padding-bottom: 1.25rem; justify-content: center; align-items: center; text-align: center; padding-bottom: 120px; background: #fff; } .orico_Page_index .pageMain .oricoTechnology .ottitle { font-weight: 700; font-size: 3.5rem; } .orico_Page_index .pageMain .oricoTechnology .otsbtitle { font-weight: 400; font-size: 1.375rem; padding-top: 1.25rem; padding-bottom: 5rem; width: 30%; margin: 0 auto; } .orico_Page_index .pageMain .oricoTechnology .beforeafter { width: 85%; margin: 0 auto; max-height: 53.75rem; position: relative; border-radius: 1.75rem; } .orico_Page_index .pageMain .oricoTechnology #after { position: absolute; top: 0px; left: 0px; background-image: url('/static/index/pc/images/indeximg1.jpg'); width: 100%; height: 53.75rem; background-repeat: no-repeat; background-size: cover; border-radius: 1.75rem; } .orico_Page_index .pageMain .oricoTechnology #before { position: absolute; top: 0px; left: 0px; border-right: 0.25rem solid rgba(255, 255, 255, 0.5019607843); background-image: url('/static/index/pc/images/indeximg2.jpg'); width: 50%; height: 53.75rem; background-repeat: no-repeat; background-size: cover; border-start-start-radius: 1.75rem; border-end-start-radius: 1.75rem; } .orico_Page_index .pageMain .oricoTechnology .drag-circle { left: 50%; transform: translateY(-50%); position: absolute; top: 50%; width: 48px; height: 48px; margin: -24px 0 0 -24px; content: ''; display: flex; align-items: center; justify-content: center; background: #fff url('/static/index/pc/images/ba-arrow.png') center center/22px 22px no-repeat; border: 1px solid #fff; border-radius: 50%; transition: all 0.3s ease; transform: scale(1); z-index: 5; } .orico_Page_index .pageMain .brandStory { padding: 0 7%; position: relative; margin: 0 auto; background: #fff; } .orico_Page_index .pageMain .brandStory .brandStoryswiper { padding-bottom: 1.25rem; } .orico_Page_index .pageMain .brandStory .swiper-wrapper { position: relative; } .orico_Page_index .pageMain .brandStory .swiper-wrapper .bsitem { display: flex; width: 100%; height: 43.75rem; background: #ffffff; border-radius: 26px 26px 26px 26px; text-align: center; } .orico_Page_index .pageMain .brandStory .swiper-wrapper .bsitem .itmImg { width: 50%; text-align: left; border-radius: 1.625rem; /* height: 42.625rem; */ transition: transform 0.3s ease-in-out; display: flex; justify-content: center; align-items: center; } .orico_Page_index .pageMain .brandStory .swiper-wrapper .bsitem .itmImg .bsImg { margin-left: 1%; border-radius: 26px 26px 26px 26px; width: 98%; height: 41.625rem; } .orico_Page_index .pageMain .brandStory .swiper-wrapper .bsitem .bsinf { width: 50%; display: flex; flex-direction: column; margin-left: 10%; justify-content: center; } .orico_Page_index .pageMain .brandStory .swiper-wrapper .bsitem .bsinf .bstitle { font-size: 3rem; text-align: left; line-height: 4rem; font-weight: bolder; } .orico_Page_index .pageMain .brandStory .swiper-wrapper .bsitem .bsinf .bssubtitle { font-size: 1.25rem; text-align: left; line-height: 1.575rem; width: 80%; margin-bottom: 5%; margin-top: 1.25rem; } .orico_Page_index .pageMain .brandStory .swiper-wrapper .bsitem .bsinf .bsmore { font-size: 1rem; text-align: left; width: 80%; font-family: Montserrat !important; color: #004bfa; } .orico_Page_index .pageMain .brandStory .bs_swiperasd { position: relative; height: 6.25rem; display: flex; } .orico_Page_index .pageMain .brandStory .bs_swiperasd .bs_swcontainer { width: 85%; } .orico_Page_index .pageMain .brandStory .bs_swiperasd .bs_swcontainer hr { z-index: -1; width: 85%; position: absolute; top: 2.6875rem; left: 1rem; height: 0; color: inherit; border-top-width: 1px; } .orico_Page_index .pageMain .brandStory .bs_swiperasd .bs_swcontainer .bs_pagination { bottom: 3rem; width: 86%; } .orico_Page_index .pageMain .brandStory .bs_swiperasd .bs_swcontainer .bs_pagination .swiper-pagination-bullet { margin-right: 28%; width: 1.25rem; height: 1.25rem; border-radius: 50%; background-color: #fff; cursor: pointer; opacity: 1; border: 1px solid #cccccc; float: left; } .orico_Page_index .pageMain .brandStory .bs_swiperasd .bs_swcontainer .bs_pagination .swiper-pagination-bullet-active { background-color: #000; } .orico_Page_index .pageMain .brandStory .bs_swiperasd .bs_swcontainer span { font-weight: bold; } .orico_Page_index .pageMain .brandStory .bs_swiperasd .bs_swcontainer .time { position: absolute; top: 3.4375rem; height: 2px; } .orico_Page_index .pageMain .brandStory .bs_swiperasd .bs_swcontainer .swiper-container { width: 15%; } .orico_Page_index .pageMain .brandStory .bs_swiperasd .bs_bts { width: 15%; } .orico_Page_index .pageMain .brandStory .bs_swiperasd .bs_bts .slideshow-btn { z-index: 9999; width: 2.5rem; height: 2.5rem; } .orico_Page_index .pageMain .brandStory .bs_swiperasd .bs_bts .swiper-button-next { position: static; margin-left: 5.9375rem; margin-top: 1.5rem; } .orico_Page_index .pageMain .brandStory .bs_swiperasd .bs_bts .swiper-button-prev { position: static; margin-left: 2.5rem; margin-top: -2.5rem; } .orico_Page_index .pageMain .oricoDataStatistics { background-color: #004bf9; width: 100%; } .orico_Page_index .pageMain .oricoDataStatistics .odsmain { justify-content: center; align-items: center; flex-direction: row; display: flex; margin: 0 10%; justify-content: space-between; } .orico_Page_index .pageMain .oricoDataStatistics .odsmain .odsItem { color: #fff; padding: 5.625rem 0; text-align: center; width: 30%; } .orico_Page_index .pageMain .oricoDataStatistics .odsmain .odsItem h1 { font-size: 3.125rem; animation: number-scroll 1s ease-in-out forwards; } .orico_Page_index .pageMain .oricoDataStatistics .odsmain .odsItem h3 { font-size: 1.25rem; padding-top: 0.5rem; font-weight: 500; } .orico_Page_index .pageMain .oricoDataStatistics .odsmain .odsItem:nth-child(2) { margin: 0 18%; } .orico_Page_index .pageMain .oricoPub { max-width: 84%; background-color: #fff; position: relative; margin: 0 auto; } .orico_Page_index .pageMain .oricoPub .pubswiper { padding-top: 3.5em; overflow: hidden; } .orico_Page_index .pageMain .oricoPub .pubswiper .pubSwitem { position: relative; display: flex; width: 31%; height: 100%; background: #ffffff; border-radius: 26px; text-align: center; position: relative; overflow: hidden; max-height: 43.75rem; } .orico_Page_index .pageMain .oricoPub .pubswiper .pubSwitem .pubimgdiv { background-repeat: no-repeat; transition: transform 0.3s ease-in-out; background-size: 100% 100%; max-height: 300px; } .orico_Page_index .pageMain .oricoPub .pubswiper .pubSwitem .pubimgdiv img { width: 100%; height: 100%; display: block; border-radius: 1.625rem; object-fit: cover; vertical-align: middle; } .orico_Page_index .pageMain .oricoPub .pubswiper .pubSwitem .pubinfo { position: absolute; left: 5%; bottom: 5%; color: white; width: 90%; font-weight: 600; } .orico_Page_index .pageMain .oricoPub .pubswiper .pubSwitem .pubinfo span { width: 100%; height: 3.75rem; font-size: 1.5rem; display: -webkit-box; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; color: #fff; -webkit-line-clamp: 2; -webkit-box-orient: vertical; text-wrap: auto; } .orico_Page_index .pageMain .oricoPub .pubswiperasd { position: relative; width: 55%; margin-left: 22.5%; height: 6rem; display: flex; } .orico_Page_index .pageMain .oricoPub .pubswiperasd .swiper-container { margin: 0; right: 0; width: auto; position: absolute; } .orico_Page_index .pageMain .oricoPub .pubswiperasd .swiper-container .slideshow-btn { width: 2.5rem; height: 2.5rem; } .orico_Page_index .pageMain .oricoPub .pubswiperasd .swiper-container .swiper-button-next, .orico_Page_index .pageMain .oricoPub .pubswiperasd .swiper-container .swiper-container-rtl .swiper-button-prev { background-image: none; } .orico_Page_index .pageMain .oricoPub .pubswiperasd .swiper-container .swiper-button-next, .orico_Page_index .pageMain .oricoPub .pubswiperasd .swiper-container .swiper-rtl .swiper-button-prev { margin-left: 4.875rem; margin-top: 1.5625rem; position: static; } .orico_Page_index .pageMain .oricoPub .pubswiperasd .swiper-container .swiper-button-prev, .orico_Page_index .pageMain .oricoPub .pubswiperasd .swiper-container .swiper-rtl .swiper-button-next { position: static; margin-left: 1.75rem; margin-top: -2.5rem; } .orico_Page_index .pageMain .oricoFQA { width: 85%; margin: 0 auto; margin-top: 4.5rem; display: flex; flex-direction: row; background-color: white; border-radius: 1.625rem; align-items: baseline; box-shadow: 5px 5px 30px 5px #d6d6de; } .orico_Page_index .pageMain .oricoFQA .fqaleft { width: 40%; display: flex; flex-direction: column; } .orico_Page_index .pageMain .oricoFQA .fqaleft h1.title { font-size: 3.5rem; text-align: left; font-weight: bold; width: 75%; margin-left: 15%; margin-top: 10%; overflow: hidden; } .orico_Page_index .pageMain .oricoFQA .fqaleft .dec { font-size: 1.5rem; text-align: left; width: 75%; margin-left: 15%; font-weight: 400; margin-top: 1%; padding: 1% 0; line-height: 1.7rem; } .orico_Page_index .pageMain .oricoFQA .fqaleft .sudec { font-size: 1rem; text-align: left; width: 75%; margin-left: 15%; margin-top: 2%; margin-bottom: 10%; line-height: 1.5rem; } .orico_Page_index .pageMain .oricoFQA .fqaright { width: 60%; display: flex; margin-bottom: 7%; } .orico_Page_index .pageMain .oricoFQA .fqaright ul.accordion { margin-top: 10%; margin-bottom: auto; margin-left: 3%; width: 90%; border: 1px solid #d6d6d6; border-radius: 0.625rem; display: flex; flex-direction: column; padding: 3% 0; } .orico_Page_index .pageMain .oricoFQA .fqaright ul.accordion li.fqali { margin-left: 5%; margin-top: 1%; width: 90%; margin-bottom: 0.625rem; border-bottom: 1px solid #d6d6d6; } .orico_Page_index .pageMain .oricoFQA .fqaright ul.accordion li.fqali .fqa-question { font-size: 1rem; display: flex; justify-content: space-between; align-items: center; padding: 10px; cursor: pointer; overflow: hidden; } .orico_Page_index .pageMain .oricoFQA .fqaright ul.accordion li.fqali .fqa-question .xiala { height: 1.875rem; text-align: center; } .orico_Page_index .pageMain .oricoFQA .fqaright h3{ word-break: break-all; } .orico_Page_index .pageMain .oricoFQA .fqaright ul.accordion li.fqali .fqa-answer { font-size: 1rem; font-weight: 400; padding: 0.625rem; display: none; } .orico_Page_index .pageMain .oricoFQA .fqaright ul.accordion li.fqali .fqa-answer p { line-height: 1.75rem; word-break: break-all; } .orico_Page_index .pageMain .oricoFQA .fqaright ul.accordion li.fqali:last-child { border-bottom: none; } .orico_Page_index .pageMain .oricofixd-info { height: 88px; background-color: #333; width: 100%; position: fixed; bottom: 0; z-index: 9999; color: white; display: flex; flex-direction: row; align-items: center; width: var(--max-width); } .orico_Page_index .pageMain .oricofixd-info .ofiinfo { width: 80%; text-wrap: wrap; margin-left: 7%; } .orico_Page_index .pageMain .oricofixd-info .ofiinfo p { font-weight: 400; } .orico_Page_index .pageMain .oricofixd-info .ofibt { width: 10%; } .orico_Page_index .pageMain .oricofixd-info .ofibt button { width: 9.375rem; height: 3.125rem; border: 1px solid grey; border-radius: 1.5625rem; color: white; background-color: #333; cursor: pointer; } .orico_Page_index .pageMain .oricofixd-info .oficlose { width: 10%; margin-right: 7%; } .orico_Page_index .pageMain .oricofixd-info .oficlose .close-btn { font-size: 1.875rem; color: white; cursor: pointer; float: right; width: 1.25rem; } .orico_Page_index .ba-slider .handle { background: #dcdbd9; cursor: pointer; } .orico_Page_index .ba-slider .handle:after { position: absolute; top: 50%; width: 48px; height: 48px; margin: -24px 0 0 -24px; content: ''; display: flex; align-items: center; justify-content: center; background: #fff url('/static/index/pc/images/ba-arrow.png') center center / 22px 22px no-repeat; border: 1px solid #fff; border-radius: 50%; transition: all 0.3s ease; transform: scale(1); z-index: 5; box-shadow: none; } .orico_Page_index .ba-slider .handle.ba-draggable:after { transform: scale(.8) } /*屏幕兼容性*/ @media screen and (min-width:750px) and (max-width:1280px) {} @media screen and (min-width:1281px) and (max-width:1360px) {} @media screen and (min-width:1361px) and (max-width:1460px) {} @media screen and (min-width:1461px) and (max-width:1660px) {} @media screen and (min-width:1661px) and (max-width:1760px) {} @media screen and (min-width:1761px) and (max-width:1960px) {} @media screen and (min-width:1980px) {}