:root { --tp-common-black: #1e1e1e; --tp-common-white: #ffffff; --tp-border-1: rgba(30, 30, 30, 0.1); --tp-common-red-3: #fa2837; --tp-theme-primary: #fa2837; --tp-grey-2: #f5f5f5; --tp-grey-4: #e8e8e8; --tp-ff-inter: inherit; --tp-ff-sequel-medium: inherit; --tp-ff-sequel-roman: inherit; --tp-ff-sequel-semi-bold: inherit; --tp-ff-sequel-bold-head: inherit; } .img-fluid { max-width: 100%; height: auto; } /* Override WP theme container that sets display:flex + max-width:1280px */ .container, .container-fluid, .container-lg, .container-md, .container-sm, .container-xl, .container-xxl { --bs-gutter-x: 30px; --bs-gutter-y: 0; width: 100%; max-width: 1750px; padding-right: calc(var(--bs-gutter-x) * .5); padding-left: calc(var(--bs-gutter-x) * .5); margin-left: auto; margin-right: auto; margin-top: 0; display: block; position: static; z-index: auto; align-items: unset; justify-content: unset; flex: unset; } .container-fluid { max-width: 100%; } @media (min-width: 576px) { .container { max-width: 540px; } } @media (min-width: 768px) { .container { max-width: 720px; } } @media (min-width: 992px) { .container { max-width: 960px; } } @media (min-width: 1200px) { .container { max-width: 1140px; } } @media (min-width: 1400px) { .container { max-width: 1750px; } } .container-1886 { max-width: 1886px; } .row { --bs-gutter-x: 30px; --bs-gutter-y: 0; margin-top: calc(-1 * var(--bs-gutter-y)); margin-right: calc(-.5 * var(--bs-gutter-x)); margin-left: calc(-.5 * var(--bs-gutter-x)); flex-wrap: wrap; display: flex; } .row > * { width: 100%; max-width: 100%; padding-right: calc(var(--bs-gutter-x) * .5); padding-left: calc(var(--bs-gutter-x) * .5); margin-top: var(--bs-gutter-y); flex-shrink: 0; } .row-cols-auto > * { flex: 0 0 auto; width: auto; } .row-cols-1 > * { flex: 0 0 auto; width: 100%; } .row-cols-2 > * { flex: 0 0 auto; width: 50%; } .row-cols-3 > * { flex: 0 0 auto; width: 33.3333%; } .row-cols-4 > * { flex: 0 0 auto; width: 25%; } .row-cols-5 > * { flex: 0 0 auto; width: 20%; } .row-cols-6 > * { flex: 0 0 auto; width: 16.6667%; } .col-4 { flex: 0 0 auto; width: 33.3333%; } /* Responsive grid columns */ .col-sm-6 { flex: 0 0 auto; width: 50%; } @media (min-width: 576px) { .col-sm-6 { flex: 0 0 auto; width: 50%; } .text-sm-end { text-align: right !important; } } @media (min-width: 768px) { .col-md-4 { flex: 0 0 auto; width: 33.3333%; } .col-md-6 { flex: 0 0 auto; width: 50%; } .text-md-end { text-align: right !important; } } @media (min-width: 992px) { .col-lg-3 { flex: 0 0 auto; width: 25%; } .col-lg-4 { flex: 0 0 auto; width: 33.3333%; } .col-lg-5 { flex: 0 0 auto; width: 41.6667%; } .col-lg-6 { flex: 0 0 auto; width: 50%; } .col-lg-7 { flex: 0 0 auto; width: 58.3333%; } .col-lg-8 { flex: 0 0 auto; width: 66.6667%; } } @media (min-width: 1200px) { .col-xl-2 { flex: 0 0 auto; width: 16.6667%; } .col-xl-3 { flex: 0 0 auto; width: 25%; } .col-xl-4 { flex: 0 0 auto; width: 33.3333%; } .col-xl-6 { flex: 0 0 auto; width: 50%; } .col-xl-7 { flex: 0 0 auto; width: 58.3333%; } .col-xl-9 { flex: 0 0 auto; width: 75%; } .col-xl-10 { flex: 0 0 auto; width: 83.3333%; } .col-xl-12 { flex: 0 0 auto; width: 100%; } } @media (min-width: 1400px) { .col-xxl-3 { flex: 0 0 auto; width: 25%; } .col-xxl-5 { flex: 0 0 auto; width: 41.6667%; } .col-xxl-7 { flex: 0 0 auto; width: 58.3333%; } .col-xxl-8 { flex: 0 0 auto; width: 66.6667%; } .col-xxl-10 { flex: 0 0 auto; width: 83.3333%; } .col-xxl-11 { flex: 0 0 auto; width: 91.6667%; } .offset-xxl-1 { margin-left: 8.3333%; } .offset-xxl-2 { margin-left: 16.6667%; } } .btn-check:checked + .btn, .btn.active, .btn.show, .btn:first-child:active, :not(.btn-check) + .btn:active { color: var(--bs-btn-active-color); background-color: var(--bs-btn-active-bg); border-color: var(--bs-btn-active-border-color); } .btn-check:checked + .btn:focus-visible, .btn.active:focus-visible, .btn.show:focus-visible, .btn:first-child:active:focus-visible, :not(.btn-check) + .btn:active:focus-visible { box-shadow: var(--bs-btn-focus-box-shadow); } .dropdown-item.active, .dropdown-item:active { color: var(--bs-dropdown-link-active-color); background-color: var(--bs-dropdown-link-active-bg); text-decoration: none; } .btn-group-vertical > .btn-check:checked + .btn, .btn-group-vertical > .btn-check:focus + .btn, .btn-group-vertical > .btn.active, .btn-group-vertical > .btn:active, .btn-group-vertical > .btn:focus, .btn-group-vertical > .btn:hover, .btn-group > .btn-check:checked + .btn, .btn-group > .btn-check:focus + .btn, .btn-group > .btn.active, .btn-group > .btn:active, .btn-group > .btn:focus, .btn-group > .btn:hover { z-index: 1; } .nav-tabs .nav-item.show .nav-link, .nav-tabs .nav-link.active { color: var(--bs-nav-tabs-link-active-color); background-color: var(--bs-nav-tabs-link-active-bg); border-color: var(--bs-nav-tabs-link-active-border-color); } .nav-pills .nav-link.active, .nav-pills .show > .nav-link { color: var(--bs-nav-pills-link-active-color); background-color: var(--bs-nav-pills-link-active-bg); } .tab-content > .active { display: block; } .navbar > .container, .navbar > .container-fluid, .navbar > .container-lg, .navbar > .container-md, .navbar > .container-sm, .navbar > .container-xl, .navbar > .container-xxl { flex-wrap: inherit; justify-content: space-between; align-items: center; display: flex; } .navbar-nav .nav-link.active, .navbar-nav .show > .nav-link { color: var(--bs-navbar-active-color); } .card-header-tabs .nav-link.active { background-color: var(--bs-card-bg); border-bottom-color: var(--bs-card-bg); } .breadcrumb-item.active { color: var(--bs-breadcrumb-item-active-color); } .active > .page-link, .page-link.active { z-index: 3; color: var(--bs-pagination-active-color); background-color: var(--bs-pagination-active-bg); border-color: var(--bs-pagination-active-border-color); } .list-group-item.active { z-index: 2; color: var(--bs-list-group-active-color); background-color: var(--bs-list-group-active-bg); border-color: var(--bs-list-group-active-border-color); } .list-group-item + .list-group-item.active { margin-top: calc(-1 * var(--bs-list-group-border-width)); border-top-width: var(--bs-list-group-border-width); } .list-group-horizontal > .list-group-item.active { margin-top: 0px; } .list-group-horizontal > .list-group-item + .list-group-item.active { margin-left: calc(-1 * var(--bs-list-group-border-width)); border-left-width: var(--bs-list-group-border-width); } .list-group-item-primary.list-group-item-action.active { color: rgb(255, 255, 255); background-color: rgb(8, 66, 152); border-color: rgb(8, 66, 152); } .list-group-item-secondary.list-group-item-action.active { color: rgb(255, 255, 255); background-color: rgb(65, 70, 75); border-color: rgb(65, 70, 75); } .list-group-item-success.list-group-item-action.active { color: rgb(255, 255, 255); background-color: rgb(15, 81, 50); border-color: rgb(15, 81, 50); } .list-group-item-info.list-group-item-action.active { color: rgb(255, 255, 255); background-color: rgb(5, 81, 96); border-color: rgb(5, 81, 96); } .list-group-item-warning.list-group-item-action.active { color: rgb(255, 255, 255); background-color: rgb(102, 77, 3); border-color: rgb(102, 77, 3); } .list-group-item-danger.list-group-item-action.active { color: rgb(255, 255, 255); background-color: rgb(132, 32, 41); border-color: rgb(132, 32, 41); } .list-group-item-light.list-group-item-action.active { color: rgb(255, 255, 255); background-color: rgb(99, 100, 100); border-color: rgb(99, 100, 100); } .list-group-item-dark.list-group-item-action.active { color: rgb(255, 255, 255); background-color: rgb(20, 22, 25); border-color: rgb(20, 22, 25); } .carousel-item-next, .carousel-item-prev, .carousel-item.active { display: block; } .active.carousel-item-end, .carousel-item-next:not(.carousel-item-start) { transform: translateX(100%); } .active.carousel-item-start, .carousel-item-prev:not(.carousel-item-end) { transform: translateX(-100%); } .carousel-fade .carousel-item-next.carousel-item-start, .carousel-fade .carousel-item-prev.carousel-item-end, .carousel-fade .carousel-item.active { z-index: 1; opacity: 1; } .carousel-fade .active.carousel-item-end, .carousel-fade .active.carousel-item-start { z-index: 0; opacity: 0; transition: opacity 0.6s; } .carousel-indicators .active { opacity: 1; } .fixed-top { z-index: 1030; position: fixed; top: 0px; left: 0px; right: 0px; } .fixed-bottom { z-index: 1030; position: fixed; bottom: 0px; left: 0px; right: 0px; } .d-inline-block { display: inline-block !important; } .d-flex { display: flex !important; } .w-100 { width: 100% !important; } .justify-content-center { justify-content: center !important; } .justify-content-between { justify-content: space-between !important; } .align-items-end { align-items: flex-end !important; } .align-items-center { align-items: center !important; } .text-center { text-align: center !important; } .text-uppercase { text-transform: uppercase !important; } .text-capitalize { text-transform: capitalize !important; } .mt-20 { margin-top: 20px; } .mt-30 { margin-top: 30px; } .mt-50 { margin-top: 50px; } .mt-75 { margin-top: 75px; } .mt-100 { margin-top: 100px; } .mt-200 { margin-top: 200px; } .mb-5 { margin-bottom: 5px !important; } .mb-10 { margin-bottom: 10px; } .mb-20 { margin-bottom: 20px; } .mb-30 { margin-bottom: 30px; } .mb-40 { margin-bottom: 40px; } .mb-50 { margin-bottom: 50px; } .mb-55 { margin-bottom: 55px; } .mb-65 { margin-bottom: 65px; } .mb-80 { margin-bottom: 80px; } .mb-100 { margin-bottom: 100px; } .mb-105 { margin-bottom: 105px; } .mb-200 { margin-bottom: 200px; } .ml-25 { margin-left: 25px; } .ml-40 { margin-left: 40px; } .ml-60 { margin-left: 60px; } .mr-20 { margin-right: 20px; } .mr-40 { margin-right: 40px; } .mr-60 { margin-right: 60px; } .mr-200 { margin-right: 200px; } .pt-30 { padding-top: 30px; } .pt-40 { padding-top: 40px; } .pt-90 { padding-top: 90px; } .pt-145 { padding-top: 145px; } .pt-150 { padding-top: 150px; } .pt-155 { padding-top: 155px; } .pb-90 { padding-bottom: 90px; } .pb-130 { padding-bottom: 130px; } .pb-140 { padding-bottom: 140px; } .pb-165 { padding-bottom: 165px; } .pb-280 { padding-bottom: 280px !important; } .st-hero-btn-icon, .ds-price-item-list ul li span, .tp-product-details-action-sm-btn svg, .tp-product-details-wishlist-btn svg, .tp-team-details-info-contact a svg, .postbox__comment-reply a span { transform: translateY(-2px); } .fix { overflow: hidden; } .gx-30 { --bs-gutter-x: 30px; } .gx-40 { --bs-gutter-x: 40px; } .p-relative { position: relative; } .img-cover { object-fit: cover; width: 100%; height: 100%; } .tp-ff-inter { font-family: var(--tp-ff-inter); } .tp-ff-sequel-medium { font-family: var(--tp-ff-sequel-medium); } .tp-ff-sequel-roman { font-family: var(--tp-ff-sequel-roman); } .tp-ff-sequel-bold-head { font-family: var(--tp-ff-sequel-bold-head); } .tp-ff-sequel-semi-bold { font-family: var(--tp-ff-sequel-semi-bold); } .fw-500 { font-weight: 500; } .tp-btn { letter-spacing: -0.05em; text-transform: capitalize; color: var(--tp-common-white); background-color: var(--tp-common-black); border-radius: 50px; justify-content: center; align-items: center; gap: 8px; padding: 17px 25px; font-size: 16px; font-weight: 600; line-height: 1; display: inline-flex; } .tp-btn:hover { color: var(--tp-common-white); } .tp-btn:hover span span.text-1 { transform: translateY(-150%); } .tp-btn:hover span span.text-2 { top: 50%; transform: translateY(-50%); } .tp-btn:hover i svg:first-child { transform: translate(16px, -16px); } .tp-btn:hover i svg:last-child { opacity: 1; visibility: visible; transform: translate(13px, -13px); } .tp-btn span { z-index: 1; display: inline-block; position: relative; overflow: hidden; } .tp-btn span span.text-1 { transition: 0.3s; display: block; position: relative; } .tp-btn span span.text-2 { transition: 0.3s; display: block; position: absolute; top: 100%; } .tp-btn i { width: 16px; height: 16px; margin-left: 4px; display: inline-flex; position: relative; overflow: hidden; } .tp-btn i svg { transition: 0.2s ease-out; position: absolute; bottom: -1px; left: 1px; transform: translateY(-2px); } .tp-btn i svg:last-child { opacity: 0; bottom: -12px; left: -12px; transform: translate(0px); } .tp-btn-grey { background: var(--tp-grey-2); color: var(--tp-common-black); } .tp-btn-grey:hover { color: var(--tp-common-black); } .tp-btn-grey-2 { background: var(--tp-grey-4); color: var(--tp-common-black); } .tp-btn-grey-2:hover { color: var(--tp-common-black); } .tp-btn-border { border: 1px solid var(--tp-border-1); color: var(--tp-common-black); background: none; } .tp-btn-border:hover { color: var(--tp-common-black); } .tp-btn-border-black { border: 2px solid var(--tp-common-black); color: var(--tp-common-black); background: none; gap: 3px; padding: 8px 18px; font-weight: 600; } .tp-btn-border-black:hover { color: var(--tp-common-black); } .tp-btn-border-white { background: none; border: 1px solid rgba(255, 255, 255, 0.1); } .tp-btn-white { background: var(--tp-common-white); color: var(--tp-common-black); } .tp-btn-white:hover { color: var(--tp-common-black); } .tp-btn-white-border { color: var(--tp-common-white); background: none; border: 1px solid rgba(255, 255, 255, 0.1); } .tp-btn-white-border:hover { color: var(--tp-common-white); } .tp-btn-switch-animation { transition: 0.3s ease-in-out; } .tp-btn-switch-animation span { overflow: visible; } .tp-btn-switch-animation .btn-text { z-index: 3; margin-left: -18px; transition: transform 0.6s cubic-bezier(0.1, 0.75, 0.25, 1) 0.125s; position: relative; } .tp-btn-switch-animation .btn-icon { z-index: 3; margin-left: 10px; line-height: 0; transition: opacity 0.4s cubic-bezier(0.1, 0.75, 0.25, 1) 0.25s, transform 0.6s cubic-bezier(0.1, 0.75, 0.25, 1) 0.25s; position: relative; } .tp-btn-switch-animation .btn-icon + .btn-icon { opacity: 0; order: -2; margin-left: 0px; transition-delay: 0s; transform: translateX(-10px); } .tp-btn-switch-animation:hover .btn-text { transition-delay: 0.1s; transform: translateX(23px); } .tp-btn-switch-animation:hover .btn-icon { opacity: 0; transition-delay: 0s; transform: translateX(10px); } .tp-btn-switch-animation:hover .btn-icon + .btn-icon { opacity: 1; transition-delay: 0.225s; transform: translateX(0px); } .tp-btn-xl { padding: 18px 32px; } .tp-btn-xxl { padding: 22px 32px; } .tp-btn-red { background-color: var(--tp-theme-primary); } .tp-btn-group { width: fit-content; display: flex; } .tp-btn-group > :first-child { margin-inline-end: -52px; transform: scale3d(0.5, 0.5, 1); } .tp-btn-group > :nth-child(2) { transform: scale3d(1, 1, 1); } .tp-btn-group > :nth-child(3) { margin-inline-start: 0px; transform: scale3d(1, 1, 1); } .tp-btn-group:hover > :first-child { background: var(--tp-common-black); margin-inline-end: 0px; transform: scale3d(1, 1, 1); } .tp-btn-group:hover > :nth-child(2) { background: var(--tp-common-black); transform: scale3d(1, 1, 1); } .tp-btn-group:hover > :nth-child(3) { background: var(--tp-common-black); margin-inline-start: -52px; transform: scale3d(0.5, 0.5, 1); } .tp-btn-group .tp-btn-circle { text-align: center; background-color: var(--tp-common-black); width: 50px; height: 50px; color: var(--tp-common-white); border-radius: 100%; justify-content: center; align-items: center; gap: 10px; font-size: 16px; font-weight: 500; line-height: 1.5; display: flex; } .tp-btn-group .tp-btn-circle i { transform: rotate(-45deg); } .tp-btn-group-transparent .tp-btn { background: var(--tp-common-white); color: var(--tp-common-black); border: 1px solid rgba(38, 38, 38, 0.1); } .tp-btn-group-transparent .tp-btn-circle { background-color: var(--tp-common-white); color: var(--tp-common-black); border: 1px solid rgba(38, 38, 38, 0.1); } .tp-btn-group-transparent:hover > :nth-child(2), .tp-btn-group-transparent:hover > :first-child { background: var(--tp-common-white); } .tp-btn-group-transparent-2 .tp-btn { color: var(--tp-common-black); background: rgb(255, 245, 243); border: 1px solid rgba(38, 38, 38, 0.1); } .tp-btn-group-transparent-2 .tp-btn-circle { color: var(--tp-common-black); background-color: rgb(255, 245, 243); border: 1px solid rgba(38, 38, 38, 0.1); } .tp-btn-group-transparent-2:hover > :nth-child(2), .tp-btn-group-transparent-2:hover > :first-child { background: rgb(255, 245, 243); } .tp-section-title { letter-spacing: -2.1px; font-size: 60px; line-height: 1.3; } .tp-section-title.fs-72 { font-size: 72px; } .tp-section-title.fs-92 { font-size: 92px; } .tp-section-title.fs-132 { font-size: 132px; } .tp-section-subtitle { letter-spacing: -0.02em; color: var(--tp-common-black); font-size: 16px; } .tp-section-subtitle.fs-20 { font-size: 20px; } /* reveal-text chars — color/opacity/transform 由 GSAP scrub 驱动，禁止 CSS transition 干扰 */ .reveal-text .char { display: inline-block; transition: none; } .tp-search-form-toggle.active { opacity: 1; transition-delay: 0s; transform: translateY(0%); } .tp-search-form-toggle.active .tp-search-form-input { opacity: 1; transition-delay: 0.3s; transform: translateY(0px); } .tp-search-body-overlay.active { transform: translateY(0px); } .tp-cart-list tr td.tp-cart-add-to-cart .tp-btn { border-radius: 0px; } .tp-order-details-item-wrapper .row [class*="col-"]:nth-child(2n) .tp-order-details-item { padding-left: 40px; } .tp-offcanvas-2-wrapper .tp-offcanvas-menu nav ul li .tp-megamenu .col-xl-4 { width: 100%; } .tp-offcanvas-menu ul li.active > a { color: var(--tp-common-black); } .tp-offcanvas-menu ul li.active > .tp-menu-close i { top: 10px; transform: rotate(90deg); } .mp-footer-style .tp-about-border { border-top: 1px solid rgba(255, 255, 255, 0.1); } .tp-about-border { border-top: 1px solid var(--tp-border-1); } .about-us-spacing { padding-top: 30px; } .tp-service-details-banner-area.about-us-spacing { padding-top: 200px; } .tp-service-details-banner-area.about-us-spacing .row { transform: translateY(-200px); } .inner-service-banner-area { position: relative; z-index: 3; background: #fff; } .about-us-title { font-size: 52px; line-height: 116%; font-weight: 900; transform: translateY(-30px); } .about-us-history-title { letter-spacing: -0.04em; color: var(--tp-theme-primary); font-size: 120px; line-height: 100%; font-weight: 900; } .tp-hero-scale-background .background-img.active { opacity: 1; } .tp-hero-scale-gallery .thumbs { cursor: pointer; will-change: width, height; border-radius: 6px; justify-content: center; align-items: center; display: flex; position: relative; } .tp-hero-scale-gallery .thumbs:hover { transform: translateY(-12px); } .tp-hero-scale-gallery .thumbs:hover::before { opacity: 1; visibility: visible; } .tp-hero-scale-gallery .thumbs::before { content: ""; background: var(--tp-common-white); opacity: 0; visibility: hidden; width: 19px; height: 2px; margin: 0px auto; transition: 0.4s; position: absolute; bottom: -12px; left: 0px; right: 0px; } .tp-hero-scale-gallery .thumbs img { object-fit: cover; border-radius: 6px; width: auto; height: 150px; display: block; } .tp-service-title { letter-spacing: -0.05em; text-transform: uppercase; transition: background-size 0.3s linear; background-image: linear-gradient(currentcolor, currentcolor), linear-gradient(currentcolor, currentcolor); background-position: 100% 100%, 0px 100%; background-repeat: no-repeat; background-size: 0px 6px, 0px 6px; font-size: 100px; line-height: 1.3; } .tp-service-title:hover { transition: background-size 0.3s linear; background-image: linear-gradient(currentcolor, currentcolor), linear-gradient(currentcolor, currentcolor); background-position: 100% 100%, 0px 100%; background-repeat: no-repeat; background-size: 0px 6px, 100% 6px; } .tp-service-title:hover a { opacity: 1; } .tp-service-title:hover .tp-service-icon { opacity: 1; visibility: visible; } .tp-service-title a { opacity: 0.3; } .tp-service-icon { opacity: 0; visibility: hidden; transition: 0.5s; transform: translateY(-25px); } .tp-service-img-wrapper { height: 380px; } .tp-service-img-wrapper.image-container { position: relative; overflow: hidden; } .tp-service-img-wrapper .hover-image { z-index: 0; border-radius: 16px; width: 100%; height: 100%; position: absolute; top: 0px; left: 0px; } .tp-service-img-wrapper .hover-image img { object-fit: cover; border-radius: 16px; width: 100%; height: 100%; display: block; } .shop-service-content .tp-btn { color: var(--tp-common-black); text-transform: none; letter-spacing: -0.02em; background: none; gap: 0px; padding: 0px; } .shop-service-content .tp-btn span { padding-right: 3px; } .inner-service-banner-bottom { position: relative; z-index: 3; background: #fff; border-top: 1px solid rgba(1, 1, 3, 0.1); padding: 13px 0px 3px; } .inner-service-banner-scroll a, .inner-service-banner-scroll span { color: var(--tp-common-black); font-size: 16px; } .inner-service-banner-scroll a span, .inner-service-banner-scroll span span { margin-left: 5px; display: inline-block; } .inner-service-banner-scroll a:hover, .inner-service-banner-scroll a:hover span { color: var(--tp-theme-primary); } .inner-service-gallery { position: relative; } .inner-service-gallery::before { content: ""; z-index: 1; background: rgba(0, 0, 0, 0.6); width: 100%; height: 100%; position: absolute; top: 0px; left: 0px; } .inner-service-gallery-item { z-index: 3; margin: 0px auto; position: absolute; top: 50%; left: 0px; right: 0px; } .tp-portfolio-inner-tab-wrap nav .nav-tabs .nav-link.active, .tp-portfolio-inner-tab-wrap nav .nav-tabs .nav-link:hover { color: var(--tp-common-white); background: var(--tp-common-black); } .mp-portfolio-tab ul li a.active { background: var(--tp-common-black); color: var(--tp-common-white); } .tp-animate-tab .tab-pane.active { pointer-events: auto; opacity: 1; visibility: visible; z-index: 2; transition-duration: 0.3s; transition-delay: 0.3s; transition-timing-function: ease-out; position: relative; transform: none; } .pp-porfolio-content ul li.active a { color: var(--tp-common-white); } .tp-portfolio-skew-wrap .slides-numbers span.text-1 { transform: translateX(-5px); } .tp-portfolio-skew-wrap .slides-numbers span.text-2 { transform-origin: 0px 100%; margin-left: 10px; transform: rotate(25deg); } .tp-banner-thumb { height: 100vh; min-height: 820px; position: relative; z-index: 1; margin-top: -80px; overflow: hidden; } .tp-banner-thumb img { width: 100%; height: 100%; display: block; object-fit: cover; } .tp-banner-zoom-wrap { width: 100%; height: 100%; } .tp-service-area { position: relative; z-index: 3; background: #fff; } @media (max-width: 1399px) { .tp-banner-thumb { height: 100vh; min-height: 620px; margin-top: -60px; } } @media (max-width: 991px) { .tp-banner-thumb { height: 420px; min-height: 420px; margin-top: -40px; } } .mg-gallery-area, .tp-cta-bottom-wrap { position: relative; z-index: 3; background: #fff; } .tp-gallery-wrapper { background: var(--tp-common-black); border-radius: 30px; height: 1110px; overflow: hidden; } @media (max-width: 1199px) { .tp-gallery-wrapper { height: 630px; } } @media (max-width: 767px) { .tp-gallery-wrapper { height: 430px; } } /* Fun Facts */ .tp-funfact-area { position: relative; z-index: 3; background: var(--tp-common-white); } .tp-funfact-title-wrap { margin-bottom: 30px; } @media (max-width: 1440px) { .tp-funfact-title-wrap { margin-left: 100px; } } .tp-funfact-content-wrap { margin-top: 0; } .tp-funfact-content-dec { margin-bottom: 80px; margin-left: 25px; } .tp-funfact-content-dec p { color: var(--tp-common-black); font-size: 18px; line-height: 1.6; font-weight: 600; } .tp-funfact-item-wrap { display: block; } .tp-funfact-item { padding-left: 84px; margin-right: -100px; position: relative; display: flex; align-items: center; } .tp-funfact-item:not(:last-child) { border-bottom: 1px solid rgba(0, 0, 0, 0.1); padding-bottom: 15px; margin-bottom: 30px; } .tp-funfact-item::before { content: ""; width: 20px; height: 20px; border-radius: 20px; background: var(--tp-common-black); position: absolute; top: 35%; left: 24px; } .tp-funfact-numbar { letter-spacing: -.05em; font-size: 132px; line-height: 100%; margin-right: 40px; margin-bottom: 20px; color: var(--tp-common-black); font-weight: 700; } .tp-funfact-info span { color: var(--tp-common-black); font-size: 16px; font-weight: 500; } .tp-funfact-info-title { letter-spacing: -.05em; font-size: 30px; color: var(--tp-common-black); } @media (max-width: 1399px) { .tp-funfact-numbar { font-size: 115px; } } @media (max-width: 767px) { .tp-funfact-numbar { font-size: 70px; } .tp-funfact-item { padding-left: 0; flex-direction: column; align-items: flex-start; } .tp-funfact-item::before { display: none; } .tp-funfact-info-title { font-size: 25px; } .tp-funfact-content-dec { margin-bottom: 30px; margin-left: 0; } } /* Service Area responsive */ @media (max-width: 1399px) { .tp-service-title { font-size: 100px; } } @media (max-width: 1199px) { .tp-service-title { font-size: 70px; } .tp-service-list-wrap { margin-left: 0; } .tp-service-content { margin-right: 0; } } @media (max-width: 767px) { .tp-service-img-wrapper { height: 300px; } .tp-service-title { font-size: 40px; } .tp-section-title { font-size: 45px; letter-spacing: -1px; } } /* About title responsive */ @media (max-width: 1199px) { .about-us-title { font-size: 46px; } } @media (max-width: 767px) { .about-us-title { font-size: 32px; transform: translateY(-90px); } } @media (max-width: 574.98px) { .about-us-spacing { padding-top: 140px; } } /* History title responsive */ @media (max-width: 1700px) { .about-us-history-title { font-size: 110px; } } @media (max-width: 1599px) { .about-us-history-title { font-size: 100px; } } @media (max-width: 767px) { .about-us-history-title { font-size: 50px; } } .tp-gallery-item { border-radius: 20px; overflow: hidden; } .tp-gallery-item:hover img { transform: scale(1.1); } .tp-gallery-item img { border-radius: 20px; transition: 0.6s; } .tp-product-details-thumb-wrapper .nav-tab .nav-links.active { border: 1px solid var(--tp-common-black); } .tp-product-details-variation-list button.tp-size-variation-btn:hover, .tp-product-details-variation-list button.tp-size-variation-btn.active { border-color: var(--tp-common-black); box-shadow: none; color: var(--tp-common-black); } .tp-product-details-variation-list button:hover, .tp-product-details-variation-list button.active { box-shadow: rgba(1, 15, 28, 0.2) 0px 1px 2px; } .tp-product-details-variation-list button:hover span, .tp-product-details-variation-list button.active span { transform: translate(-50%, -50%) scale(0.7); } .tp-product-details-tab-nav .nav-tabs .nav-link.active, .tp-product-details-tab-nav .nav-tabs .nav-link:hover { color: var(--tp-common-black); } .tp-product-details-tab-nav .nav-tabs .nav-link.active::after, .tp-product-details-tab-nav .nav-tabs .nav-link:hover::after { width: 100%; left: 0px; right: auto; } .tp-shop-popup-inputbox .tp-btn-black-square { text-transform: uppercase; color: var(--tp-common-white); background-color: var(--tp-common-black); border: 2px solid rgba(0, 0, 0, 0); border-radius: 8px; padding: 14px 34px; font-size: 18px; font-weight: 400; line-height: 1; } .tp-shop-popup-inputbox .tp-btn-black-square:hover { border-color: var(--tp-common-black); color: var(--tp-common-black); background-color: rgba(0, 0, 0, 0); } .ds-price-heading .tp-section-title { color: var(--tp-common-white); } .ds-price-item { background: var(--tp-grey-4); border-radius: 16px; padding: 50px 52px; } .ds-price-item-head { border-bottom: 1px solid rgba(1, 1, 3, 0.1); margin-bottom: 32px; padding-bottom: 32px; } .ds-price-item-head span { text-transform: uppercase; color: var(--tp-common-black); margin-bottom: 5px; font-size: 16px; font-weight: 600; display: inline-block; } .ds-price-item-head h4 { text-transform: capitalize; color: var(--tp-common-black); font-size: 62px; line-height: 1; font-family: var(--tp-ff-sequel-bold-head); margin-bottom: 0px; } .ds-price-item-head h4 i { font-size: 14px; font-style: normal; font-weight: 600; font-family: var(--tp-ff-inter); display: inline-block; transform: translateX(-10px); } .ds-price-item-head p { text-transform: capitalize; color: var(--tp-common-black); margin-bottom: 15px; font-size: 16px; font-weight: 400; } .ds-price-item-list { margin-bottom: 80px; display: block; } .ds-price-item-list-title { text-transform: capitalize; color: var(--tp-common-black); margin-bottom: 30px; font-size: 22px; font-weight: 500; } .ds-price-item-list ul li { text-transform: capitalize; color: var(--tp-common-black); margin-bottom: 8px; font-size: 16px; font-weight: 400; list-style: none; display: flex; } .ds-price-item-list ul li span { margin-right: 8px; display: inline-block; } .ds-price-item.active { position: relative; } .ds-price-item-tag { writing-mode: vertical-rl; position: absolute; top: 0px; right: 50px; transform: rotate(180deg); } .ds-price-item-tag span { text-transform: capitalize; color: var(--tp-common-white); background-color: var(--tp-theme-primary); clip-path: polygon(100% 0%, 100% 48%, 100% 100%, 0px 100%, 0px 0px, 50% 15.12%); padding: 35px 13px 25px; font-size: 14px; font-weight: 500; line-height: 1; display: inline-block; } .tp-pricing-nav-wrapper .tp-input-check { opacity: 0; z-index: 6; cursor: pointer; width: 100%; height: 100%; display: block; position: absolute; top: 0px; left: 0px; } .tp-pricing-nav-wrapper .tp-input-check:checked ~ .tp-switch-toggle { left: 4px; right: 57.3%; } .tp-pricing-nav-wrapper.cr-nav .tp-toggler-pre, .tp-pricing-nav-wrapper.cr-nav .tp-toggler-post { color: var(--tp-common-white); } .tp-pricing-nav-wrapper.cr-nav .tp-toggle-input-wrap { border-color: rgba(245, 247, 245, 0.1); } .tp-pricing-nav-wrapper.cr-nav .tp-switch-toggle { background: linear-gradient(rgb(255, 255, 255) 0%, rgb(255, 255, 255) 100%); } .tp-toggler-pre, .tp-toggler-post { cursor: pointer; color: var(--tp-common-black); font-size: 16px; font-weight: 500; line-height: 1; transition: 0.3s; } .tp-toggler-pre.is-active, .tp-toggler-post.is-active, .tp-toggler-pre:hover, .tp-toggler-post:hover { color: var(--tp-common-black); } .tp-toggler-pre { margin-right: 15px; } .tp-toggler-post { margin-left: 15px; } .tp-toggle-input-wrap { border: 1px solid rgba(1, 1, 3, 0.1); border-radius: 100px; width: 76px; height: 36px; position: relative; overflow: hidden; } .tp-switch-toggle { z-index: 1; background: linear-gradient(rgb(1, 1, 3) 0%, rgb(1, 1, 3) 100%); border-radius: 100%; transition: 0.25s cubic-bezier(0.785, 0.135, 0.15, 0.86); position: absolute; inset: 4px 4px 4px 57.3%; box-shadow: rgba(1, 17, 22, 0.24) 0px 4px 6px; } .tp-contact-us-btn .tp-btn-yellow-green { text-transform: capitalize; color: var(--tp-common-white); background-color: rgba(0, 0, 0, 0); border: 1px solid rgba(30, 30, 30, 0.1); border-radius: 30px; padding: 15px 10px; font-size: 16px; font-weight: 600; display: inline-block; } .tp-contact-us-btn .tp-btn-yellow-green.active { background-color: var(--tp-common-red-3); } .profile__tab nav .nav-tabs .nav-link.active { color: var(--tp-common-black); } .profile__tab nav .nav-tabs .nav-link.active::after { opacity: 1; visibility: visible; } .profile__ticket table tbody > tr .tp-btn { color: var(--tp-common-black); background-color: rgb(224, 226, 227); min-width: 90px; padding: 7px 18px; font-weight: 500; } .profile__ticket table tbody > tr .tp-btn:hover { color: var(--tp-common-white); background-color: var(--tp-common-black); } .profile__btn .tp-btn { border: 1px solid rgb(234, 234, 239); padding: 14px 39px; } .profile__btn .tp-btn-cart { text-align: center; text-transform: capitalize; height: 50px; color: var(--tp-common-white); background-color: var(--tp-common-black); border: 2px solid rgba(0, 0, 0, 0); border-radius: 8px; padding: 0px 30px; font-size: 16px; font-weight: 500; line-height: 45px; transition: 0.3s; display: inline-block; } .profile__btn .tp-btn-cart:hover { color: var(--tp-common-black); background-color: rgba(0, 0, 0, 0); border-color: rgb(77, 61, 48); } .cunnet-dark .tp-offcanvas .tp-offcanvas-menu ul li.active > a { color: var(--tp-theme-primary); } .cunnet-dark .tp-btn { background-color: var(--tp-common-white); color: var(--tp-common-black); } .cunnet-dark .tp-btn-grey { color: var(--tp-common-white); background: rgb(26, 27, 30); } .cunnet-dark .tp-section-title { color: var(--tp-common-white); } .cunnet-dark .tp-about-border { border-top: 1px solid rgba(255, 255, 255, 0.06); } .cunnet-dark .tp-section-subtitle, .cunnet-dark .tp-service-title { color: var(--tp-common-white); } .cunnet-dark .tp-btn-white-border, .cunnet-dark .tp-btn-border { color: var(--tp-common-white); background: none; border: 1px solid rgba(255, 255, 255, 0.08); } .cunnet-dark .tp-btn-border-black { border: 2px solid var(--tp-common-white); color: var(--tp-common-white); background: none; } .cunnet-dark .tp-btn-red { background-color: var(--tp-theme-primary); color: var(--tp-common-white); } .cunnet-dark .mp-portfolio-tab ul li a.active { background: var(--tp-common-white); color: var(--tp-common-black); } .cunnet-dark .tp-btn-group .tp-btn-circle { background-color: var(--tp-common-white); color: var(--tp-common-black); } .cunnet-dark .tp-btn-group:hover > :nth-child(2) { background: var(--tp-common-white); } .cunnet-dark .tp-btn-border-white { background: none; border: 1px solid rgba(255, 255, 255, 0.1); } .cunnet-dark .tp-btn-group-transparent .tp-btn { color: var(--tp-common-white); background: rgb(14, 15, 17); border: 1px solid rgba(255, 255, 255, 0.06); } .cunnet-dark .tp-btn-group-transparent .tp-btn-circle { color: var(--tp-common-white); background-color: rgb(14, 15, 17); border: 1px solid rgba(255, 255, 255, 0.06); } .cunnet-dark .tp-btn-group-transparent:hover > :nth-child(2) { background: rgb(14, 15, 17); } .cunnet-dark .shop-service-content .tp-btn { color: var(--tp-common-white); background: none; } .cunnet-dark .about-us-title, .cunnet-dark .postbox-title { color: var(--tp-common-white); } .cunnet-dark .profile__btn .tp-btn-cart { color: var(--tp-common-black); background-color: var(--tp-common-white); } .cunnet-dark .profile__btn .tp-btn-cart:hover { color: var(--tp-common-white); background: none; border-color: rgba(255, 255, 255, 0.08); } .cunnet-dark .inner-service-banner-scroll a, .cunnet-dark .inner-service-banner-scroll span { color: var(--tp-common-white); } .cunnet-dark .inner-service-banner-scroll a:hover { color: var(--tp-theme-primary); } .cunnet-dark .inner-service-banner-bottom { border-top: 1px solid rgba(255, 255, 255, 0.08); } .cunnet-dark .tp-portfolio-inner-tab-wrap nav .nav-tabs .nav-link.active, .cunnet-dark .tp-portfolio-inner-tab-wrap nav .nav-tabs .nav-link:hover { color: var(--tp-common-black); background: var(--tp-common-white); } .cunnet-dark .tp-portfoliom-m-title, .cunnet-dark .tp-toggler-pre, .cunnet-dark .tp-toggler-post { color: var(--tp-common-white); } .cunnet-dark .tp-switch-toggle { background: linear-gradient(rgb(255, 255, 255) 0%, rgb(255, 255, 255) 100%); } .cunnet-dark .tp-toggle-input-wrap { border: 1px solid rgba(255, 255, 255, 0.08); } .cunnet-dark .ds-price-item { background: rgb(30, 30, 30); } .cunnet-dark .ds-price-item-head span, .cunnet-dark .ds-price-item-head p, .cunnet-dark .ds-price-item-head h4 { color: var(--tp-common-white); } .cunnet-dark .ds-price-item-head { border-bottom: 1px solid rgba(255, 255, 255, 0.08); } .cunnet-dark .ds-price-item-list ul li, .cunnet-dark .inner-service-2-title { color: var(--tp-common-white); } .cunnet-dark .tp-service-details-dec, .cunnet-dark .tp-service-details-title, .cunnet-dark .tp-service-details-content ul li p, .cunnet-dark .tp-service-details-content ul li i, .cunnet-dark .ds-price-item-list-title { color: var(--tp-common-white); } .cunnet-dark .tp-product-details-tab-nav .nav-tabs .nav-link.active, .cunnet-dark .tp-product-details-tab-nav .nav-tabs .nav-link:hover { color: var(--tp-common-white); } .cunnet-dark .tp-product-details-thumb-wrapper .nav-tab .nav-links.active { border: 1px solid var(--tp-theme-primary); } .cunnet-dark .tp-error-content .tp-btn { background-color: var(--tp-common-white); color: var(--tp-common-black); } .cunnet-dark .tp-error-content .tp-btn:hover { color: var(--tp-common-white); border-color: var(--tp-common-white); background-color: rgba(0, 0, 0, 0); } .cunnet-dark .profile__tab nav .nav-tabs .nav-link.active { color: var(--tp-common-white); } .tp-benefit-box .row [class*="col"]:nth-child(4n) .tp-benefit-item { border-right-width: medium; border-right-style: none; border-right-color: currentcolor; } .tp-error-content .tp-btn { letter-spacing: 0.03em; z-index: 9; text-transform: capitalize; background-color: var(--tp-common-black); height: 60px; color: var(--tp-common-white); border: 2px solid rgba(0, 0, 0, 0); border-radius: 40px; padding: 0px 18px 0px 24px; font-size: 18px; font-weight: 500; line-height: 55px; transition: 0.3s; display: inline-block; position: relative; overflow: hidden; } .tp-error-content .tp-btn:hover { color: var(--tp-common-black); border-color: var(--tp-common-black); background-color: rgba(0, 0, 0, 0); } .tp-product-details-review-form-rating-icon i.active { color: rgb(255, 180, 0); } /* ===== 服务详情页 Hero 参考行（三栏布局） ===== */ .hero-ref-row { padding-bottom: 60px; } .hero-ref-subtitle { font-size: 14px; letter-spacing: 0.04em; color: var(--tp-common-black); } .hero-ref-subtitle svg { margin-left: 6px; vertical-align: -1px; } .hero-ref-links ul { list-style: none; padding: 0; margin: 0; } .hero-ref-links ul li { margin-bottom: 6px; } .hero-ref-links ul li a { font-size: 16px; font-weight: 500; color: var(--tp-common-black); text-decoration: none; position: relative; display: inline-block; transition: color 0.3s; } .hero-ref-links ul li a:hover { color: var(--tp-theme-primary); } .hero-ref-links ul li a::after { content: ''; position: absolute; bottom: 0; left: 0; width: 0; height: 1px; background: var(--tp-common-black); transition: width 0.3s; } .hero-ref-links ul li a:hover::after { width: 100%; } @media (max-width: 991.98px) { .hero-ref-row { padding-bottom: 30px; } .hero-ref-subtitle { margin-bottom: 15px !important; } } /* ===== 服务详情页区块通用 ===== */ .tp-service-details-banner-area { position: relative; } .tp-service-details-hero-title h2 { letter-spacing: -.03em; font-size: 92px; line-height: 98%; } @media (max-width: 991.98px) { .tp-service-details-hero-title h2 { font-size: 42px; } } .tp-service-details-hero-subtitle { font-size: 14px; letter-spacing: 0.04em; } .tp-service-details-hero-link ul { list-style: none; padding: 0; margin: 0; } .tp-service-details-hero-link ul li { margin-bottom: 6px; } .tp-service-details-hero-link ul li a { font-size: 16px; font-weight: 500; color: var(--tp-common-black); text-decoration: none; position: relative; display: inline-block; transition: color 0.3s; } .tp-service-details-hero-link ul li a:hover { color: var(--tp-theme-primary); } @media (max-width: 991.98px) { .tp-service-details-hero-title h2 { font-size: 32px; } .tp-service-details-hero-title.ml-115 { margin-left: 0 !important; } .tp-service-details-hero-link.ml-90 { margin-left: 0 !important; } .tp-service-details-hero-link.mt-90 { margin-top: 30px !important; } } /* ===== 服务概述区 ===== */ .tp-service-details-dec { font-size: 18px; line-height: 1.6; color: rgba(30,30,30,0.7); } .tp-service-details-title { font-size: 22px; font-weight: 600; color: var(--tp-common-black); } .tp-service-details-content ul { list-style: none; padding: 0; margin: 0; } .tp-service-details-content ul li { display: flex; align-items: flex-start; gap: 15px; margin-bottom: 20px; } .tp-service-details-content ul li i { color: var(--tp-theme-primary); font-size: 20px; margin-top: 2px; flex-shrink: 0; } .tp-service-details-content ul li p { font-size: 16px; line-height: 1.6; color: rgba(30,30,30,0.7); margin: 0; } /* ===== 流程区增强 ===== */ .tp-process-border { transform: translateY(32px); } .tp-process-border svg { width: 100%; height: auto; color: var(--tp-common-black); } .tp-process-count { width: 40px; height: 40px; color: var(--tp-common-white); background: var(--tp-common-black); border-radius: 50%; line-height: 40px; text-align: center; font-size: 16px; display: inline-block; } .tp-process-title { font-size: 24px; line-height: 117%; color: var(--tp-common-black); } .tp-process-dec { font-size: 18px; line-height: 144%; color: rgba(30,30,30,0.6); } .tp-process-bottom-para { color: var(--tp-common-black); border: 1px solid rgba(0,0,0,0.1); border-radius: 100px; padding: 8px 30px; font-size: 16px; font-weight: 500; display: inline-block; white-space: nowrap; } /* ===== FAQ 区 ===== */ .tp-faq-item { border-bottom: 1px solid var(--tp-border-1); padding: 25px 0; } .tp-faq-button { display: flex; align-items: center; width: 100%; padding: 15px 50px 15px 0; font-size: 28px; font-weight: 500; line-height: 1.2; letter-spacing: -.02em; color: var(--tp-common-black); background: transparent; border: 0; text-align: left; cursor: pointer; position: relative; } .tp-faq-button::after { content: '+'; position: absolute; right: 0; font-size: 24px; font-weight: 300; transition: transform 0.3s; } .tp-faq-button:not(.collapsed)::after { content: '\2212'; } .tp-faq-body { font-size: 16px; line-height: 1.625; padding: 0 112px 13px 0; } .tp-faq-body p { font-size: 18px; font-weight: 400; line-height: 1.56; color: var(--tp-common-black); margin: 0 0 20px; } .tp-service-details-faq { margin-left: 0; } @media (max-width: 1199.98px) { .tp-service-details-faq { margin-left: 0; } .tp-faq-body { padding-right: 0; } } /* ===== Scale-up 图片浮现 ===== */ /* 全部由 inline