/* 演示版样式,非项目必要 */ .themed-grid-col { padding-top: 15px; padding-bottom: 15px; background-color: rgba(86, 61, 124, .15); border: 1px solid rgba(86, 61, 124, .2); } .bd-example { position: relative; padding: 1rem; border: 2px solid #f8f9fa; } .highlight { padding: 1rem; margin-top: 1rem; margin-bottom: 1rem; background-color: #f8f9fa; -ms-overflow-style: -ms-autohiding-scrollbar; } .h-705 { min-height: 705px; } /* 按项目所需,重定义bootcss必要元素样式 */ /****** ****** Global ******/ body { font-size: 14px; } p { margin-bottom: 35px; line-height: 1.8; } p:last-child { margin-bottom: 0; } h1 { font-size: 24px; } h2 { font-size: 20px; } h3 { font-size: 18px; } h4 { font-size: 16px; } h5 { font-size: 14px; } h6 { font-size: 13px; } h1, h2, h3, h4, h5 { color: #222; font-weight: bold; letter-spacing: 5px; } @media (min-width: 768px) { .container-sm { max-width: 900px; } p { font-size: 14px; } h1 { font-size: 36px; } h2 { font-size: 30px; } h3 { font-size: 22px; } h4 { font-size: 18px; } h5 { font-size: 16px; } h6 { font-size: 14px; } } @media (min-width: 1200px) { .container-lg { max-width: 1080px; } .container { max-width: 880px; } p { font-size: 13px; } h1 { font-size: 38px; } h2 { font-size: 26px; } h3 { font-size: 20px; } h4 { font-size: 17px; } h5 { font-size: 15px; } h6 { font-size: 14px; } .min-width-xl-150 { min-width: 150px; } .pre-scrollable-xl { max-height: 340px; overflow-y: scroll; } .min-height-xl-600 { min-height: 600px; } .max-width-xl-400 { max-width: 400px; } .max-width-xl-500 { max-width: 500px; } .h-xl-500 { min-height: 500px; } .font-size-xl-30 { font-size: 30px !important; } .max-height-xl-160 { max-height: 160px; } .w-xl-auto { width: auto !important; } } @media (min-width: 1680px) { .my-xxl-auto { margin-top: auto !important; margin-bottom: auto !important; } .w-xxl-50 { width: 50% !important; } .min-height-xxl-710 { min-height: 710px; } .mt-xxl-auto, .my-xxl-auto { margin-top: auto !important; } .h-xxl-705 { min-height: 705px; } .pre-scrollable-xxl-none { max-height: none; overflow-y: visible; } .max-width-xxl-none { max-width: -webkit-fill-available; } .max-height-xxl-none { max-height: -webkit-fill-available; } .container-lg { max-width: 1480px; } .container { max-width: 1140px; } p { font-size: 16px; } h1 { font-size: 40px; } h2 { font-size: 32px; } h3 { font-size: 24px; } h4 { font-size: 20px; } h5 { font-size: 18px; } h6 { font-size: 16px; } .text-huge { font-size: 90px !important; } .text-huge-2 { font-size: 50px !important; } .text-huge-3 { font-size: 40px !important; } .font-size-12 { font-size: 12px !important; } .font-size-14 { font-size: 14px !important; } .font-size-15 { font-size: 15px !important; } .font-size-22 { font-size: 22px !important; } .font-size-30 { font-size: 30px !important; } .font-size-34 { font-size: 34px !important; } .font-size-38 { font-size: 38px !important; } .font-size-40 { font-size: 40px !important; } .font-size-44 { font-size: 44px !important; } .font-size-60 { font-size: 60px !important; } .font-size-77 { font-size: 77px !important; } .font-size-80 { font-size: 80px !important; } .min-width-xxl-200 { min-width: 200px; } } @media (min-width: 1680px) { .min-height-lg-700 { min-height: 700px; } .m-xxl-0 { margin: 0 !important; } .mt-xxl-0, .my-xxl-0 { margin-top: 0 !important; } .mr-xxl-0, .mx-xxl-0 { margin-right: 0 !important; } .mb-xxl-0, .my-xxl-0 { margin-bottom: 0 !important; } .ml-xxl-0, .mx-xxl-0 { margin-left: 0 !important; } .m-xxl-1 { margin: 0.25rem !important; } .mt-xxl-1, .my-xxl-1 { margin-top: 0.25rem !important; } .mr-xxl-1, .mx-xxl-1 { margin-right: 0.25rem !important; } .mb-xxl-1, .my-xxl-1 { margin-bottom: 0.25rem !important; } .ml-xxl-1, .mx-xxl-1 { margin-left: 0.25rem !important; } .m-xxl-2 { margin: 0.5rem !important; } .mt-xxl-2, .my-xxl-2 { margin-top: 0.5rem !important; } .mr-xxl-2, .mx-xxl-2 { margin-right: 0.5rem !important; } .mb-xxl-2, .my-xxl-2 { margin-bottom: 0.5rem !important; } .ml-xxl-2, .mx-xxl-2 { margin-left: 0.5rem !important; } .m-xxl-3 { margin: 1rem !important; } .mt-xxl-3, .my-xxl-3 { margin-top: 1rem !important; } .mr-xxl-3, .mx-xxl-3 { margin-right: 1rem !important; } .mb-xxl-3, .my-xxl-3 { margin-bottom: 1rem !important; } .ml-xxl-3, .mx-xxl-3 { margin-left: 1rem !important; } .m-xxl-4 { margin: 1.5rem !important; } .mt-xxl-4, .my-xxl-4 { margin-top: 1.5rem !important; } .mr-xxl-4, .mx-xxl-4 { margin-right: 1.5rem !important; } .mb-xxl-4, .my-xxl-4 { margin-bottom: 1.5rem !important; } .ml-xxl-4, .mx-xxl-4 { margin-left: 1.5rem !important; } .m-xxl-5 { margin: 3rem !important; } .mt-xxl-5, .my-xxl-5 { margin-top: 3rem !important; } .mr-xxl-5, .mx-xxl-5 { margin-right: 3rem !important; } .mb-xxl-5, .my-xxl-5 { margin-bottom: 3rem !important; } .ml-xxl-5, .mx-xxl-5 { margin-left: 3rem !important; } .p-xxl-0 { padding: 0 !important; } .pt-xxl-0, .py-xxl-0 { padding-top: 0 !important; } .pr-xxl-0, .px-xxl-0 { padding-right: 0 !important; } .pb-xxl-0, .py-xxl-0 { padding-bottom: 0 !important; } .pl-xxl-0, .px-xxl-0 { padding-left: 0 !important; } .p-xxl-1 { padding: 0.25rem !important; } .pt-xxl-1, .py-xxl-1 { padding-top: 0.25rem !important; } .pr-xxl-1, .px-xxl-1 { padding-right: 0.25rem !important; } .pb-xxl-1, .py-xxl-1 { padding-bottom: 0.25rem !important; } .pl-xxl-1, .px-xxl-1 { padding-left: 0.25rem !important; } .p-xxl-2 { padding: 0.5rem !important; } .pt-xxl-2, .py-xxl-2 { padding-top: 0.5rem !important; } .pr-xxl-2, .px-xxl-2 { padding-right: 0.5rem !important; } .pb-xxl-2, .py-xxl-2 { padding-bottom: 0.5rem !important; } .pl-xxl-2, .px-xxl-2 { padding-left: 0.5rem !important; } .p-xxl-3 { padding: 1rem !important; } .pt-xxl-3, .py-xxl-3 { padding-top: 1rem !important; } .pr-xxl-3, .px-xxl-3 { padding-right: 1rem !important; } .pb-xxl-3, .py-xxl-3 { padding-bottom: 1rem !important; } .pl-xxl-3, .px-xxl-3 { padding-left: 1rem !important; } .p-xxl-4 { padding: 1.5rem !important; } .pt-xxl-4, .py-xxl-4 { padding-top: 1.5rem !important; } .pr-xxl-4, .px-xxl-4 { padding-right: 1.5rem !important; } .pb-xxl-4, .py-xxl-4 { padding-bottom: 1.5rem !important; } .pl-xxl-4, .px-xxl-4 { padding-left: 1.5rem !important; } .p-xxl-5 { padding: 3rem !important; } .pt-xxl-5, .py-xxl-5 { padding-top: 3rem !important; } .pr-xxl-5, .px-xxl-5 { padding-right: 3rem !important; } .pb-xxl-5, .py-xxl-5 { padding-bottom: 3rem !important; } .pl-xxl-5, .px-xxl-5 { padding-left: 3rem !important; } .m-xxl-n1 { margin: -0.25rem !important; } .mt-xxl-n1, .my-xxl-n1 { margin-top: -0.25rem !important; } .mr-xxl-n1, .mx-xxl-n1 { margin-right: -0.25rem !important; } .mb-xxl-n1, .my-xxl-n1 { margin-bottom: -0.25rem !important; } .ml-xxl-n1, .mx-xxl-n1 { margin-left: -0.25rem !important; } .m-xxl-n2 { margin: -0.5rem !important; } .mt-xxl-n2, .my-xxl-n2 { margin-top: -0.5rem !important; } .mr-xxl-n2, .mx-xxl-n2 { margin-right: -0.5rem !important; } .mb-xxl-n2, .my-xxl-n2 { margin-bottom: -0.5rem !important; } .ml-xxl-n2, .mx-xxl-n2 { margin-left: -0.5rem !important; } .m-xxl-n3 { margin: -1rem !important; } .mt-xxl-n3, .my-xxl-n3 { margin-top: -1rem !important; } .mr-xxl-n3, .mx-xxl-n3 { margin-right: -1rem !important; } .mb-xxl-n3, .my-xxl-n3 { margin-bottom: -1rem !important; } .ml-xxl-n3, .mx-xxl-n3 { margin-left: -1rem !important; } .m-xxl-n4 { margin: -1.5rem !important; } .mt-xxl-n4, .my-xxl-n4 { margin-top: -1.5rem !important; } .mr-xxl-n4, .mx-xxl-n4 { margin-right: -1.5rem !important; } .mb-xxl-n4, .my-xxl-n4 { margin-bottom: -1.5rem !important; } .ml-xxl-n4, .mx-xxl-n4 { margin-left: -1.5rem !important; } .m-xxl-n5 { margin: -3rem !important; } .mt-xxl-n5, .my-xxl-n5 { margin-top: -3rem !important; } .mr-xxl-n5, .mx-xxl-n5 { margin-right: -3rem !important; } .mb-xxl-n5, .my-xxl-n5 { margin-bottom: -3rem !important; } .ml-xxl-n5, .mx-xxl-n5 { margin-left: -3rem !important; } .m-xxl-auto { margin: auto !important; } .mt-xxl-auto, .my-xxl-auto { margin-top: auto !important; } .mr-xxl-auto, .mx-xxl-auto { margin-right: auto !important; } .mb-xxl-auto, .my-xxl-auto { margin-bottom: auto !important; } .ml-xxl-auto, .mx-xxl-auto { margin-left: auto !important; } } .font-size-17-fixed { font-size: 17px !important; } .font-size-60-fixed { font-size: 60px !important; } .font-size-80-fixed { font-size: 80px !important; } .font-size-90-fixed { font-size: 90px !important; } a { color: #000; cursor: pointer; outline: none; } a:hover, a:focus { color: #333; text-decoration: none; transition: all 0.5s; } /* 按钮样式 */ /* .btn{ border-radius: 0; } */ /* 主按钮(暗色#333主题) */ .btn-primary { color: #fff; background-color: #E96442; border-color: #E96442; } .btn-primary:hover, .btn-primary:not(:disabled):not(.disabled):active, .btn-primary:not(:disabled):not(.disabled).active, .show>.btn-primary.dropdown-toggle { background-color: #000; border-color: #000; } .btn-primary:focus, .btn-primary.focus { background-color: #000; border-color: #000; box-shadow: 0 0 0 0.2rem rgba(0, 0, 0, 0.1); } .btn-primary:not(:disabled):not(.disabled):active:focus, .btn-primary:not(:disabled):not(.disabled).active:focus, .show>.btn-primary.dropdown-toggle:focus { box-shadow: 0 0 0 0.2rem rgba(0, 0, 0, 0.1); } .btn-primary.disabled, .btn-primary:disabled { background-color: #333; border-color: #333; } .bd-example-border-utils [class^="border"] { display: inline-block; width: 5rem; height: 5rem; margin: .25rem; background-color: #f5f5f5 } css.loader-ellips { font-size: 20px; position: relative; width: 40px; height: 10px; margin: 10px auto; } .loader-ellips__dot { display: block; width: 10px; height: 10px; border-radius: 5px; background: #44cef6; /* change color here */ position: absolute; animation-duration: 0.5s; animation-timing-function: ease; animation-iteration-count: infinite; } .loader-ellips__dot:nth-child(1), .loader-ellips__dot:nth-child(2) { left: 0; } .loader-ellips__dot:nth-child(3) { left: 15px; } .loader-ellips__dot:nth-child(4) { left: 30px; } @keyframes reveal { from { transform: scale(0.001); } to { transform: scale(1); } } @keyframes slide { to { transform: translateX(15px); } } .loader-ellips__dot:nth-child(1) { animation-name: reveal; } .loader-ellips__dot:nth-child(2), .loader-ellips__dot:nth-child(3) { animation-name: slide; } .loader-ellips__dot:nth-child(4) { animation-name: reveal; animation-direction: reverse; } .page-load-status { display: none; padding-top: 20px; color: #333; text-align: center; } /* 公共样式 */ @media (min-width: 992px) { .m-lg-250 { margin: 250px !important; } .mt-lg-250, .my-lg-250 { margin-top: 250px !important; } .mr-lg-250, .mx-lg-250 { margin-right: 250px !important; } .mb-lg-250, .my-lg-250 { margin-bottom: 250px !important; } .ml-lg-250, .mx-lg-250 { margin-left: 250px !important; } .m-lg-300 { margin: 300px !important; } .mt-lg-300, .my-lg-300 { margin-top: 300px !important; } .mr-lg-300, .mx-lg-300 { margin-right: 300px !important; } .mb-lg-300, .my-lg-300 { margin-bottom: 300px !important; } .ml-lg-300, .mx-lg-300 { margin-left: 300px !important; } .p-lg-100 { padding: 100px !important; } .pt-lg-100, .py-lg-100 { padding-top: 100px !important; } .pr-lg-100, .px-lg-100 { padding-right: 100px !important; } .pb-lg-100, .py-lg-100 { padding-bottom: 100px !important; } .pl-lg-100, .px-lg-100 { padding-left: 100px !important; } .p-lg-150 { padding: 150px !important; } .pt-lg-150, .py-lg-150 { padding-top: 150px !important; } .pr-lg-150, .px-lg-150 { padding-right: 150px !important; } .pb-lg-150, .py-lg-150 { padding-bottom: 150px !important; } .pl-lg-150, .px-lg-150 { padding-left: 150px !important; } .p-lg-170 { padding: 170px !important; } .pt-lg-170, .py-lg-170 { padding-top: 170px !important; } .pr-lg-170, .px-lg-170 { padding-right: 170px !important; } .pb-lg-170, .py-lg-170 { padding-bottom: 170px !important; } .pl-lg-170, .px-lg-170 { padding-left: 170px !important; } .p-lg-250 { padding: 250px !important; } .pt-lg-250, .py-lg-250 { padding-top: 250px !important; } .pr-lg-250, .px-lg-250 { padding-right: 250px !important; } .pb-lg-250, .py-lg-250 { padding-bottom: 250px !important; } .pl-lg-250, .px-lg-250 { padding-left: 250px !important; } .max-height-lg-660 { max-height: 660px; } .text-lg-white { color: #ffffff !important; } .w-lg-75 { width: 75% !important; } .min-height-lg-700 { min-height: 700px; } } .max-height-660 { max-height: 660px; } .pb-350 { padding-bottom: 350px !important; } .max-height-36 { max-height: 36px; } .min-height-400 { min-height: 400px; } .max-width-760 { max-width: 760px; } .min-width-48 { min-width: 48px; } .line-height-1 { line-height: 1 !important; } .text-shadow { text-shadow: 1px 1px black; } .text-primary { color: #E96442 !important; } .text-yellow { color: #FFC62C !important; } .text-purple { color: #43CCFF !important; } .text-dark { color: #666666 !important; } .text-grey { color: #CCCCCC !important; } .bg-dark { background-color: #00000000 !important; } .bg-white-50 { background-color: rgba(255, 255, 255, 0.9) !important; } .bg-black { background-color: #000000 !important; } .border-top-2 { border-top: 2px solid #000000 !important; } .border-bottom-2 { border-bottom: 2px solid #000000 !important; } .border-bottom-primary { border-bottom: 1px solid #E96442 !important; } .border-top-primary { border-top: 1px solid #E96442 !important; } .border-top-radius-60 { border-top-left-radius: 60px; border-top-right-radius: 60px; } .broder-primary-rounded { border: 1.5px solid #E96442; border-radius: 2.25rem; } .broder-white-10 { border: 10px solid #ffffff; box-shadow: 0px 20px 50px #00000033; } .box-shadow { box-shadow: 0px 20px 50px #00000033; } .broder-primary-rounded-3 { border: 3px solid #E96442; border-radius: 2.25rem; } .border-radius-50 { border-radius: 50% !important; } .img-border::after { content: ""; border: 20px solid #E96442 !important; top: 50%; left: 53%; z-index: -1; position: absolute; width: 324px; height: 324px; transform: translate(-50%, -50%); display: block; border-radius: 50%; } @media (min-width: 992px) { .img-border::after { width: 75%; height: 100%; } } .rounded-lg { border-radius: 20px !important; } .btn-rounded-lg { border-radius: 2.25rem !important; } .rounded-left-lg { border-top-left-radius: 20px; border-bottom-left-radius: 20px; } .rounded-right-lg { border-top-right-radius: 20px; border-bottom-right-radius: 20px; } .w-fit-content { width: fit-content !important; } .btn-dark { background-color: #000000; border-color: #ffffff; } .btn-dark:hover { border-color: #ffffff; } .white-space-nowrap { white-space: nowrap; } /* fullpage */ .fp-slidesNav { left: auto !important; right: 0; top: 50%; } .fp-slidesNav ul li { display: block; } .bg-primary { background-color: #E96442 !important; } .section3 .table th, .section3 .table td { padding: 0rem 0.75rem; } #fp-nav ul, .fp-slidesNav ul { background-color: rgba(0, 0, 0, 0.5); border-radius: 2rem; padding-top: 10px; padding-bottom: 10px; } #fp-nav ul li a span, .fp-slidesNav ul li a span { background: #fff; width: 10px; height: 10px; margin: -6px 0 0 -6px; } #fp-nav ul li a.active span, .fp-slidesNav ul li a.active span, #fp-nav ul li:hover a.active span, .fp-slidesNav ul li:hover a.active span { background-color: #E96442; width: 10px; height: 10px; } #fp-nav.fp-right { right: 50px; } /* home */ .table-borderless tr { margin-bottom: 30px !important; } /* 企业实力 */ .section-swiper-time ul li { list-style: none; margin-bottom: 20px; } /* swiper */ .section-swiper-time .swiperhomepagenew1 .swiper-wrapper::before { content: ""; border-top: 2px dashed #D3D3D3; top: 50%; width: 500%; left: 0; right: 0; position: absolute; } .section-swiper-time .homepage-swiper-circular-up { top: 50%; } .section-swiper-time .homepage-swiper-circular-down { bottom: 50%; } .section-swiper-time .swiperhomepagenew1 .swiper-wrapper .swiper-slide::before { content: ""; background-color: #E96442; width: 14px; height: 14px; border-radius: 100%; position: absolute; left: 16px; top: 50%; margin-left: -7px; margin-top: -7px; z-index: 1; } .swiper-button-next:after, .swiper-button-prev:after { background-color: rgba(0, 0, 0, 0.50); border-radius: 50%; padding: 10px 15px; color: #fff; } /* footer */ .footer-menu ul { list-style: none; } .footer-menu .menu { display: block; padding-left: 0; } .footer-menu ul .menu-item-has-children { margin-bottom: 16px; margin-right: 3.25rem; } .footer-menu .sub-menu li { margin-bottom: 8px; } .footer .footer-tel a { font-size: 24px; } .footer-menu ul .menu-item-has-children { min-width: 100px; display: inline-grid; } @media (min-width:992px) { .footer-menu ul .menu-item-has-children { margin-right: 1rem; } .footer-menu ul .menu-item-has-children { margin-right: 6.2rem; min-width: auto; } } @media (min-width:1680px) { .footer .footer-tel a { font-size: 38px; } } .menu-footer-menu-container a { color: rgba(0, 0, 0, 0.5); } .menu-footer-menu-container a:hover { color: rgba(0, 0, 0, 0.8); } .menu-footer-menu-container>ul>li>a { font-weight: 500; color: #E96442; margin-bottom: 1rem; } .footer-menu ul li ul { padding-left: 0; display: inherit; } .footer-copyright, .footer-copyright a { color: rgba(0, 0, 0, 0.5); } .font-family-anton { font-family: Anton, Helvetica, sans-serif; } /* 鼠标动画 */ .scrolldown-wrapper { padding: 2rem 1rem; pointer-events: none; } .downarrow { margin: auto; padding: 8px; border-radius: 100px; width: 62px; height: 62px; background-color: rgba(255, 255, 255, 0.2); box-shadow: 0 0 50px rgba(0, 0, 0, 0.2); } .scrolldown { border: 2px solid #000; border-radius: 30px; height: 46px; margin: auto; text-align: center; width: 30px; pointer-events: none; } .scrolldown-p1, .scrolldown-p2 { animation-duration: 1.5s; animation-name: scrolldown; animation-iteration-count: infinite; fill: #000; } .scrolldown-p2 { animation-delay: .75s; } @keyframes scrolldown { 0% { opacity: 0; transform: translate(0, -8px); } 50% { opacity: 1; transform: translate(0, 0); } 100% { opacity: 0; transform: translate(0, 8px); } } .section { overflow: hidden; }