@charset "UTF-8"; /* * 基础 * Body 内部 body-inner * 模拟滚动条 tt-smooth-scroll * Header头部 tt-header * Section主体 tt-section * 菜单导航 tt-main-menu * 菜单导航PC tt-overlay-menu * 页面 header page-header * 块标题 tt-heading * tt-Grid 图像网格 * Portfolio grid 项目网格 - * Portfolio List 项目列表 - * Portfolio slider 项目banner滚动 * Portfolio carousel 项目左右滚动 * 案例元素视差 tt-gallery * 视差背景 tt-image * content-carousel 分块滚动 * 图形 figure * 背景视频 tt-bg-video-wrap * 翻页 tt-pagination * 滑动侧边栏 tt-sliding-sidebar-wrap * 特色 characteristic * 关于我们 about * 产品中心 product * 案例 cases * 质保 warranty * 底部 tt-footer * 联系方式 contact * 经销商 sistributor * 质保 warranty * 详情页 tt-details * 报价 quotation */ /* ------------------------------------------------------------- * * 基础 /* --------------*/ * { box-sizing: border-box; } img { max-width: 100%; height: auto; } hr { width: 100%; height: 0; border: none; border-bottom: 1px solid rgb(144 144 144 / 30%); } .anim-image-parallax { transform: scale(1.2); transform-origin: 50% 100%; } /*居中*/ .boxcenter { display: flex; align-items: center; justify-content: center; } .fontcenter { display: flex; align-items: center; } /*居底*/ .boxbottom { display: flex; align-items: flex-end; justify-content: center; } /*topto*/ #back-to-top { position: fixed; word-wrap: break-word; z-index: 100; bottom: 1.5rem; right: 1.5rem; text-align: center; color: #fff; width: 45px; height: 45px; line-height: 40px; font-weight: 400; background: #dc3545; transition: 0.5s all; } /*SVG*/ .svg-icon svg { height: 1.3rem; width: 1.3rem } #back-to-top .svg-icon svg { width: 1.6rem; height: 1.6rem; } .svg-icon svg g [fill] { -webkit-transition: fill .3s ease; transition: fill .3s ease; fill: #b5b5c3 } .svg-icon svg:hover g [fill] { -webkit-transition: fill .3s ease; transition: fill .3s ease } .svg-icon.svg-icon-white svg g [fill] { -webkit-transition: fill .3s ease; transition: fill .3s ease; fill: #fff !important } .svg-icon.svg-icon-white svg:hover g [fill] { -webkit-transition: fill .3s ease; transition: fill .3s ease } #back-to-top:hover svg [fill] { -webkit-transition: fill .3s ease; transition: fill .3s ease; fill: #000 } @media (min-width: 1200px) { /* btn */ .btn:hover svg [fill] { -webkit-transition: fill .3s ease; transition: fill .3s ease; fill: #21252c } } .svg-icon .btn-group-lg > .btn svg, .svg-icon .btn-lg svg { height: 2rem; width: 2rem } /* 选择 */ ::selection { color: #fff; text-shadow: none; background: #dc3545; } ::-moz-selection { color: #fff; text-shadow: none; background: #dc3545; /* Firefox */ } ::-webkit-selection { color: #fff; text-shadow: none; background: #dc3545; /* Safari */ } /* 列表 */ .list-unstyled { padding-left: 0; list-style: none; } .list-inline { padding-left: 0; margin-left: -5px; list-style: none; } .list-inline > li { display: inline-block; padding-right: 5px; padding-left: 5px; } /* 禁用滚动 */ .tt-no-scroll { overflow-y: hidden !important; } /* ------------------------------------------------------------- * * Body 内部 /* ------------------------------------------------------------- */ #body-inner { position: relative; overflow: hidden; height: 100%; min-height: 100vh; } /* ------------------------------------------------------------- * * 模拟滚动条 * Source: https://github.com/idiotWu/smooth-scrollbar/ /* ------------------------------------------------------------- */ /* Hide default scrollbar */ body:not(.is-mobile).tt-smooth-scroll { overflow: hidden; } /* Scroll content (added if contain class "tt-smooth-scroll". Disabled on mobile devices!) */ body:not(.is-mobile).tt-smooth-scroll #scroll-container { width: auto; height: 100vh; overflow: auto; margin: 0; } /* Styling scrollbar */ .scrollbar-track { background: transparent !important; z-index: 99999 !important; } .scrollbar-track:hover { /*background: rgba(222, 222, 222, 0.1) !important;*/ } .scrollbar-thumb { background: #DDD !important; opacity: .25; transition: opacity 0.2s ease-in-out; } .scrollbar-track:hover .scrollbar-thumb { opacity: .5; } /* ------------------------------------------------------------- * * Header头部 /* ------------------------------------------------------------- */ #tt-header { position: absolute; height: 100px; top: 0; left: 0; width: 100%; color: #fff; z-index: 999; background: rgba(5, 5, 25, .2); pointer-events: none; padding: 0 6%; transition: 0.5s all; } /* header position fixed */ #tt-header.tt-header-fixed { position: fixed; } @media (min-width: 1200px) { #tt-header.other { background-color: transparent } } #tt-header.sticky-on { background: rgba(5, 5, 25, 1); } /* header inner */ .tt-header-inner { width: 100%; height: 100%; display: flex; align-items: center; } /* header for small screens */ @media (min-width: 1920px) { #tt-header { padding: 0 8% } } @media (max-width: 1200px) { #tt-header { height: 70px; padding: 0 4% } } @media (max-width: 540px) { #tt-header { height: 60px } } /* header columns */ .tt-header-col { display: flex; align-items: center; } .tt-header-col:first-child { margin-right: auto; } .tt-header-col:last-child { margin-left: auto; } /* Header logo =============== */ .tt-logo { margin-right: auto; line-height: 1; pointer-events: initial; } .tt-logo img { max-height: 50px; } .tt-othermenu { pointer-events: initial; } .tt-othermenu .btn { font-size: .913rem; padding: .8rem 2rem; } .tt-othermenu svg { position: relative; top: -1px; z-index: 1 } /* Logo for small screens */ @media (max-width: 1200px) { .tt-logo img { max-height: 35px; } .tt-othermenu .btn { font-size: .875rem; padding: .4rem 1rem; } .tt-othermenu.svg-icon svg { height: 1rem; width: 1rem; } } @media (max-width: 1025px) { .tt-header-col:last-child { margin-left: 1rem; } } @media (max-width: 540px) { .tt-logo img { max-height: 28px; } } /* ------------------------------------------------------------- * * Section主体 /* ------------------------------------------------------------- */ .tt-section { position: relative; padding: 80px 0; } .section-bg01 { background: url("../images/bg-2.png") left top no-repeat; background-size: 250px auto } .bg-gray { background: url(../images/product_shape.png) left top no-repeat; background-size: 20%; } @media (max-width: 1024px) { .tt-section { padding: 3rem 0; } } @media (max-width: 991px) { .tt-section { padding: 2rem 0; } .bg-gray { background-size: 35%; } } @media (max-width: 480px) { .tt-section { padding: 1rem 0; } } /* tt-section background image =============================== */ .tt-section-image { position: absolute; top: 0; left: 0; bottom: 0; right: 0; z-index: 1; overflow: hidden; } /* ------------------------------------------------------------- * * 菜单导航 /* ------------------------------------------------------------- */ /* Classic menu (desktop) ========================== */ @media (min-width: 1025px) { .tt-main-menu { pointer-events: initial; } .tt-main-menu-list { margin: 0; padding: 0; list-style: none; font-size: 0; /* inline list cap fix */ } .tt-main-menu-list > li { display: inline-block; font-size: inherit; /* inline list cap fix */ padding: 0 15px; transition: opacity 0.2s; } .tt-main-menu-list > li > a, .tt-main-menu-list > li > .tt-submenu-trigger > a { display: block; padding: 20px 5px; font-size: 16px; font-weight: 500; color: #FFF; transition: color 0.3s, opacity 0.3s; } /* Main menu hover */ .tt-main-menu-list.tt-mm-hover > li > a, .tt-main-menu-list.tt-mm-hover > li > .tt-submenu-trigger > a { opacity: .8; } .tt-main-menu-list.tt-mm-hover > li > a:hover, .tt-main-menu-list.tt-mm-hover > li > .tt-submenu-trigger > a:hover, .tt-main-menu-list.tt-mm-hover > li.active > a, .tt-main-menu-list.tt-mm-hover > li.active > .tt-submenu-trigger > a, .tt-main-menu-list.tt-mm-hover > li.tt-submenu-open > .tt-submenu-trigger > a { opacity: 1; color: #FFF; } .tt-main-menu-list.tt-mm-hover > li > a:hover, .tt-main-menu-list.tt-mm-hover > li > .tt-submenu-trigger > a:hover, .tt-main-menu-list > li.active > a, .tt-main-menu-list > li.active .tt-submenu-trigger a, .tt-main-menu-list.tt-mm-hover > li.tt-submenu-open.active > .tt-submenu-trigger > a { color: #ef3b4c; } /* Submenu ============ */ .tt-submenu-wrap { position: relative; } .tt-submenu { position: absolute; display: block !important; top: 100%; left: 0; width: 200px; background-color: #FFF; text-align: left; visibility: hidden; opacity: 0; z-index: 99999; border-radius: 3px; transform: translate3d(0, 10px, 0); transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out, transform 0.3s ease-in-out; } /* Open submenu on hover */ .tt-submenu-wrap.tt-submenu-open > .tt-submenu { visibility: visible; opacity: 1; transform: translate3d(0, 0, 0); transition-delay: 0.1s; } /* submenu links */ .tt-submenu-list { margin: 0; padding: 15px 0; list-style: none; } .tt-submenu-list li { width: 100%; } .tt-submenu-list li a { position: relative; display: block; padding: 10px 25px 10px 20px; text-decoration: none; font-size: 14px; font-weight: 400; line-height: 1.4; color: #111; transition: all 0.5s; } .tt-submenu-list li a::after { font-family: boxicons; content: "\ea50"; color: #fff; position: absolute; left: 15px; top: 8px; line-height: 25px; font-size: 17px; font-weight: 400; transition: .5s; opacity: 0; } .tt-submenu-list > li a:hover, .tt-submenu-list > li > .tt-submenu-trigger:hover a, .tt-submenu-list > li.active > a, .tt-submenu-list > li.active > .tt-submenu-trigger a { background-color: rgba(0, 0, 0, 0.05); } .tt-submenu-list > li a:hover, .tt-submenu-list > li > .tt-submenu-trigger:hover a { padding-left: 35px } .tt-submenu-list > li a:hover::after, .tt-submenu-list > li > .tt-submenu-trigger:hover a::after { opacity: 1; } /* Set submenu position to right on last menu list element */ .tt-main-menu-list > li:last-child > .tt-submenu { left: auto; right: 0; } /* Submenu toggle */ .tt-m-caret { display: none; } /* Sub-submenu */ .tt-submenu .tt-submenu-wrap > .tt-submenu { left: 100%; right: auto; margin-top: -50px; margin-left: 0; } /* Caret (requires FontAwesome: https://fontawesome.com/) */ .tt-submenu-trigger > a::after { margin-left: 10px; font-size: 14px; line-height: 0; font-family: "boxicons"; content: "\ea4a"; font-weight: 900; display: inline-block; font-style: normal; font-variant: normal; text-rendering: auto; -webkit-font-smoothing: antialiased; } /* Caret in sub-submenus */ .tt-submenu-wrap .tt-submenu-wrap .tt-submenu-trigger > a::after { position: absolute; right: 10px; top: 50%; transform: translate3d(0, -50%, 0) rotate(-90deg); } /* Hide ".tt-submenu-trigger-m" on desktop */ .tt-submenu-trigger .tt-submenu-trigger-m { display: none; } /* Submenu styles ================== */ /* Submenu dark style */ .tt-submenu-dark .tt-submenu { background-color: #21252c; color: #a9a9a9; } .tt-submenu-dark .tt-submenu .tt-submenu-list li a { color: #a9a9a9; } .tt-submenu-dark .tt-submenu .tt-submenu-list > li a:hover, .tt-submenu-dark .tt-submenu .tt-submenu-list > li > .tt-submenu-trigger:hover a, .tt-submenu-dark .tt-submenu .tt-submenu-list > li.active > a, .tt-submenu-dark .tt-submenu .tt-submenu-list > li.active > .tt-submenu-trigger a { color: #FFF; background-color: transparent; } } /* Mobile menu (for classic menu) ================================== */ @media (min-width: 1025px) { #tt-m-menu-toggle-btn-wrap { /* Hide on desktop */ display: none; } } @media (min-width: 1025px) and (max-width: 1366px) { .tt-main-menu-list > li { padding: 0 8px; } .tt-main-menu-list > li > a, .tt-main-menu-list > li > .tt-submenu-trigger > a { font-size: 15px; } } /* Show mobile menu on small screens only */ @media (max-width: 1024px) { .tt-main-menu { pointer-events: initial; position: fixed; top: 0; left: 0; width: 100%; height: 100vh; background-color: #0a0a0a; overflow: hidden; visibility: hidden; opacity: 0; z-index: 998 } .tt-main-menu-holder { position: relative; height: 100%; width: calc(100% + 17px); overflow-y: scroll; z-index: 2; } body.is-mobile .tt-main-menu-holder { padding-right: 17px; } .tt-main-menu-inner { display: table; width: 100%; height: 100%; padding: 15% 7%; } .tt-main-menu-content { height: 100%; display: table-cell; vertical-align: middle; padding-bottom: 3rem; } /* Mobile menu list */ .tt-main-menu-list { display: inline-block; margin: 0; padding: 0; list-style: none; } .tt-main-menu-list > li { margin-top: 15px; margin-bottom: 15px; } .tt-main-menu-list > li:first-child { margin-top: 0; } .tt-main-menu-list > li:last-child { margin-bottom: 0; } .tt-main-menu-list > li a { position: relative; display: inline-block; font-size: 22px; font-weight: 600; line-height: 1.8; color: #eaeaea; } @media (max-width: 767px) { .tt-main-menu-inner { padding-top: 10%; padding-bottom: 10%; } .tt-main-menu-list > li a { font-size: 18px; line-height: 1.5 } } /* Mobile menu list hover/active (master parent) */ .tt-main-menu-list > li a:hover, .tt-main-menu-list > li > .tt-submenu-trigger:hover a, .tt-main-menu-list > li > .tt-submenu-trigger:hover .tt-m-caret, .tt-main-menu-list > li.active > a, .tt-main-menu-list > li.active > .tt-submenu-trigger a, .tt-main-menu-list > li.active > .tt-submenu-trigger .tt-m-caret { color: #FFF; } /* Mobile submenu */ .tt-submenu-wrap { position: relative; } .tt-submenu-trigger { position: relative; display: inline-block; } .tt-submenu-trigger > a { position: relative; z-index: 1; } .tt-submenu-trigger .tt-submenu-trigger-m { position: absolute; display: block; top: 0; bottom: 0; left: 0; right: 0; z-index: 2; cursor: pointer; } .tt-submenu { display: none; position: relative; top: auto; left: 0 !important; min-width: 100%; background-color: transparent; margin-top: 15px; margin-bottom: 15px; color: #a9a9a9; } .tt-submenu-list { margin: 0 0 0 20px; padding: 0; list-style: none; } .tt-submenu-list .tt-submenu { margin-top: 10px; } .tt-submenu-list > li {} .tt-submenu-list > li a { display: inline-block; padding-top: 8px; padding-bottom: 8px; font-size: 16px; font-weight: normal; color: #AAA; -webkit-text-stroke: 0; } /* Mobile submenu list hover/active */ .tt-submenu-list > li a:hover, .tt-submenu-list > li > .tt-submenu-trigger:hover a, .tt-submenu-list > li > .tt-submenu-trigger:hover .tt-m-caret, .tt-submenu-list > li > .tt-submenu-trigger.tt-m-submenu-open a, .tt-submenu-list > li > .tt-submenu-trigger.tt-m-submenu-open .tt-m-caret, .tt-submenu-list > li.active > a, .tt-submenu-list > li.active > .tt-submenu-trigger a, .tt-submenu-list > li.active > .tt-submenu-trigger .tt-m-caret { color: #FFF; } /* Mobile submenu caret (requires FontAwesome: https://fontawesome.com/) */ .tt-m-caret { position: absolute; top: 55%; right: -35px; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; font-size: 20px; color: #eaeaea; cursor: pointer; z-index: 9; border-radius: 100%; transform: translate3d(0, -50%, 0); } .tt-m-caret::after { font-family: "boxicons"; content: "\ea4a"; font-weight: 900; display: inline-block; font-style: normal; font-variant: normal; text-rendering: auto; -webkit-font-smoothing: antialiased; transition: all 0.2s ease-in-out; } /* Mobile sub-submenu caret */ .tt-submenu-list > li > .tt-submenu-trigger .tt-m-caret { color: #8a8a8a; } /* Mobile menu toggle button */ #tt-m-menu-toggle-btn-wrap { position: relative; display: flex; align-items: center; pointer-events: initial; cursor: pointer; z-index: 999; } .tt-m-menu-toggle-btn-holder { float: left; } .tt-m-menu-toggle-btn { position: relative; display: block; width: 50px; height: 50px; } .tt-m-menu-toggle-btn span { position: absolute; display: block; top: 52%; left: 50%; height: 2px; width: 24px; background-color: transparent; transform: translate(-50%, -50%); transition: all 0.3s ease-in-out; } .tt-m-menu-toggle-btn span::before, .tt-m-menu-toggle-btn span::after { position: absolute; display: block; content: ''; height: 2px; width: 24px; background-color: #FFF; transition: all 0.3s ease-in-out; } .tt-m-menu-toggle-btn span::before { top: -4px; width: 24px; } .tt-m-menu-toggle-btn span::after { top: auto; bottom: -4px; width: 18px; } /* Toggle button text */ .tt-m-menu-toggle-btn-text { float: left; padding-right: 5px; overflow: hidden; text-align: right; font-size: 16px; } body.tt-m-menu-open .tt-m-menu-toggle-btn-text .tt-m-menu-text-menu { display: none; } /* Toggle button close */ body.tt-m-menu-open .tt-m-menu-toggle-btn span { width: 20px; background-color: transparent; } body.tt-m-menu-open .tt-m-menu-toggle-btn span::before { top: 0; width: 20px; transform: rotate(45deg); } body.tt-m-menu-open .tt-m-menu-toggle-btn span::after { bottom: 0; width: 20px; transform: rotate(-45deg); } .tt-m-menu-toggle-btn-text .tt-m-menu-text-close { display: none; } body.tt-m-menu-open .tt-m-menu-toggle-btn-text .tt-m-menu-text-close { display: block; } /* Disable menu toggle button click until the animations last */ body.tt-m-menu-toggle-no-click #tt-m-menu-toggle-btn-wrap { pointer-events: none; } /* Align mobile menu to center */ .tt-main-menu.tt-m-menu-center .tt-main-menu-content { text-align: center; } .tt-main-menu.tt-m-menu-center .tt-submenu-list { margin: 0; } } /* ------------------------------------------------------------- * * 菜单导航 /* ------------------------------------------------------------- */ /* Overlay menu ================ */ .tt-overlay-menu { position: fixed; top: 0; left: 0; width: 100%; height: 100vh; background-color: #0a0a0a; visibility: hidden; opacity: 0; pointer-events: initial; } .tt-ol-menu-holder { position: relative; height: 100%; width: calc(100% + 17px); padding-right: 17px; overflow-y: scroll; z-index: 2; } .tt-ol-menu-inner { display: table; width: 100%; height: 100%; padding-left: 0; padding-right: 0; } .tt-ol-menu-content { display: table-cell; vertical-align: middle; height: 100%; padding: 120px 5% 120px 5%; } @media (max-width: 767px) { .tt-ol-menu-content { padding-top: 25%; padding-bottom: 35%; padding-left: 15px; padding-right: 15px; } } /* Disable page scroll if overlay menu is open */ body:not(.tt-smooth-scroll).tt-ol-menu-open { overflow-y: hidden; } /* Hide smooth scrollbar if overlay menu is open */ body.tt-smooth-scroll.tt-ol-menu-open .scrollbar-track { display: none !important; } /* Overlay menu list */ .tt-ol-menu-list { display: inline-block; margin: 0; padding: 0; list-style: none; } .tt-ol-menu-list > li { position: relative; margin-top: 20px; margin-bottom: 20px; } @media (max-width: 767px) { .tt-ol-menu-list > li { margin-top: 15px; margin-bottom: 15px; } } .tt-ol-menu-list > li:first-child { margin-top: 0; } .tt-ol-menu-list > li:last-child { margin-bottom: 0; } /* Overlay menu list item counter */ @media (min-width: 992px) { .tt-overlay-menu.tt-ol-menu-count .tt-ol-menu-list { counter-reset: ol-menu-list-counter; } .tt-overlay-menu.tt-ol-menu-count .tt-ol-menu-list > li > a::before, .tt-overlay-menu.tt-ol-menu-count .tt-ol-menu-list > li > .tt-ol-submenu-trigger > a::before { position: absolute; counter-increment: ol-menu-list-counter; content: ""counter(ol-menu-list-counter, decimal-leading-zero); top: 5px; left: -30px; line-height: 1; font-size: 14px; font-weight: normal; color: #FFF; opacity: 0.4; } } /* Overlay menu list links (master parent) */ .tt-ol-menu-list > li > a, .tt-ol-menu-list > li > .tt-ol-submenu-trigger > a { position: relative; display: inline-block; font-size: clamp(34px, 3.2vw, 62px); font-weight: bold; font-weight: 600; line-height: 1.2; color: #eaeaea; transition: opacity 0.3s ease-in-out; } /* Overlay menu list hover/active (master parent). Note: no effect on mobile devices! */ body:not(.is-mobile) .tt-ol-menu-list.tt-ol-menu-hover > li > a, body:not(.is-mobile) .tt-ol-menu-list.tt-ol-menu-hover > li > .tt-ol-submenu-trigger > a, body:not(.is-mobile) .tt-ol-menu-list.tt-ol-menu-hover > li > .tt-ol-submenu-trigger .tt-ol-submenu-caret { opacity: .5; } body:not(.is-mobile) .tt-ol-menu-list > li.active > a, body:not(.is-mobile) .tt-ol-menu-list > li.active > .tt-ol-submenu-trigger > a, body:not(.is-mobile) .tt-ol-menu-list > li.active > .tt-ol-submenu-trigger .tt-ol-submenu-caret, body:not(.is-mobile) .tt-ol-menu-list > li > a:hover, body:not(.is-mobile) .tt-ol-menu-list > li > .tt-ol-submenu-trigger:hover > a, body:not(.is-mobile) .tt-ol-menu-list > li > .tt-ol-submenu-trigger:hover .tt-ol-submenu-caret, body:not(.is-mobile) .tt-ol-menu-list > li > .tt-ol-submenu-trigger.tt-ol-submenu-open > a, body:not(.is-mobile) .tt-ol-menu-list > li > .tt-ol-submenu-trigger.tt-ol-submenu-open .tt-ol-submenu-caret { opacity: 1; } /* Overlay menu submenu */ .tt-ol-submenu-wrap { position: relative; } .tt-ol-submenu-trigger { position: relative; display: inline-block; } .tt-ol-submenu { display: none; position: relative; height: auto; margin-left: 20px; color: #8a8a8a; } .tt-ol-menu-list > li > .tt-ol-submenu { margin-top: 20px; margin-bottom: 20px; } /* Overlay menu submenu list */ .tt-ol-submenu-list { padding: 0; list-style: none; } .tt-ol-submenu-list .tt-ol-submenu { margin-top: 15px; margin-bottom: 20px; } /* Overlay menu submenu list links */ .tt-ol-submenu-list > li a, .tt-ol-submenu-list > li > .tt-ol-submenu-trigger > a { display: inline-block; padding-top: 6px; padding-bottom: 6px; font-size: 19px; color: #AAA; transition: color 0.3s ease-in-out; } /* Overlay menu submenu list hover/active */ .tt-ol-submenu-list > li > .tt-ol-submenu-trigger.tt-ol-submenu-open > a, .tt-ol-submenu-list > li > .tt-ol-submenu-trigger.tt-ol-submenu-open .tt-ol-submenu-caret, .tt-ol-submenu-list > li.active > a, .tt-ol-submenu-list > li.active > .tt-ol-submenu-trigger > a, .tt-ol-submenu-list > li.active > .tt-ol-submenu-trigger .tt-ol-submenu-caret, .tt-ol-submenu-list > li a:hover, .tt-ol-submenu-list > li > .tt-ol-submenu-trigger:hover > a, .tt-ol-submenu-list > li > .tt-ol-submenu-trigger:hover .tt-ol-submenu-caret { color: #FFF; } /* Submenu caret (requires FontAwesome: https://fontawesome.com/) */ .tt-ol-submenu-caret-wrap { position: absolute; top: 60%; right: -40px; transform: translate3d(0, -50%, 0); } @media (max-width: 767px) { .tt-ol-submenu-caret-wrap { right: -40px; } } .tt-ol-submenu-caret { position: relative; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; font-size: 18px; color: #eaeaea; cursor: pointer; z-index: 2; border-radius: 100%; transition: opacity 0.3s ease-in-out; } .tt-ol-submenu-caret::after { font-family: "boxicons"; content: "\f107"; font-weight: 900; display: inline-block; font-style: normal; font-variant: normal; text-rendering: auto; -webkit-font-smoothing: antialiased; transition: all 0.2s ease-in-out; } .tt-ol-submenu-trigger.tt-ol-submenu-open .tt-ol-submenu-caret::after { transform: rotate(180deg); } /* Sub-submenu caret */ .tt-ol-menu-list > li li .tt-ol-submenu-caret-wrap { top: 50%; right: -40px; } .tt-ol-menu-list > li li .tt-ol-submenu-caret { font-size: 16px; color: #8a8a8a; } /* Overlay menu toggle button ============================== */ #tt-ol-menu-toggle-btn-wrap { position: relative; display: flex; align-items: center; pointer-events: initial; cursor: pointer; z-index: 9; } .tt-ol-menu-toggle-btn-holder { float: left; } /* Toggle button */ .tt-ol-menu-toggle-btn { position: relative; display: block; width: 50px; height: 50px; } .tt-ol-menu-toggle-btn span { position: absolute; display: block; top: 54%; left: 50%; height: 2px; width: 24px; background-color: transparent; transform: translate(-50%, -50%); transition: all 0.3s ease-in-out; } .tt-ol-menu-toggle-btn span::before, .tt-ol-menu-toggle-btn span::after { position: absolute; display: block; content: ''; height: 2px; width: 24px; background-color: #FFF; transition: all 0.3s ease-in-out; } .tt-ol-menu-toggle-btn span::before { top: -4px; width: 24px; } .tt-ol-menu-toggle-btn span::after { top: auto; bottom: -4px; width: 18px; } /* Toggle button text */ .tt-ol-menu-toggle-btn-text { float: left; padding-right: 5px; overflow: hidden; text-align: right; font-size: 15px; color: #FFF; } /* Toggle button text hover */ .tt-ol-menu-toggle-btn-text .text-menu { position: relative; display: inline-block; text-align: right; transition: transform 0.3s; } body.tt-ol-menu-open .tt-ol-menu-toggle-btn-text .text-menu { display: none; } body:not(.is-mobile) .tt-ol-menu-toggle-btn-text .text-menu::before { position: absolute; top: 100%; right: 0; content: attr(data-hover); } body:not(.is-mobile) #tt-ol-menu-toggle-btn-wrap:hover .tt-ol-menu-toggle-btn-text .text-menu { transform: translate3d(0, -100%, 0); } /* Toggle button close */ body.tt-ol-menu-open .tt-ol-menu-toggle-btn span { width: 20px; background-color: transparent; } body.tt-ol-menu-open .tt-ol-menu-toggle-btn span::before { top: 0; width: 20px; transform: rotate(45deg); } body.tt-ol-menu-open .tt-ol-menu-toggle-btn span::after { bottom: 0; width: 20px; transform: rotate(-45deg); } .tt-ol-menu-toggle-btn-text .text-close { display: none; } body.tt-ol-menu-open .tt-ol-menu-toggle-btn-text .text-close { display: block; } /* Disable menu toggle button click until the animations last */ body.olm-toggle-no-click .tt-ol-menu-toggle-btn-text, body.olm-toggle-no-click .tt-ol-menu-toggle-btn { pointer-events: none; } /* Overlay menu position center ================================ */ .tt-overlay-menu.tt-ol-menu-center .tt-ol-menu-content { text-align: center; } .tt-overlay-menu.tt-ol-menu-center .tt-ol-submenu { margin-left: 0; } /* ------------------------------------------------------------- * * 页面 header /* ------------------------------------------------------------- */ #page-header { position: relative; z-index: 1; } .page-header-inner, body.ph-image-on.ph-bg-image-on #page-header:not(.project-info-list-on) .page-header-inner { width: 100%; z-index: 2; } body.ph-image-on #page-header:not(.project-info-list-on) .page-header-inner { padding-top: 17vw; padding-bottom: 16vw; } @media (max-width: 1920px) { .page-header-inner { padding-top: 250px; padding-bottom: 140px; } body.ph-image-on #page-header:not(.project-info-list-on) .page-header-inner { padding-top: 300px; padding-bottom: 260px; } /* If page header image does not exist or project info list exist */ body:not(.ph-image-on) #page-header .page-header-inner, body.ph-image-on.ph-bg-image-on #page-header:not(.project-info-list-on) .page-header-inner { padding-top: 280px; padding-bottom: 160px; } } @media (max-width: 1024px) { body.ph-image-on #page-header:not(.project-info-list-on) .page-header-inner, body.ph-image-on.ph-bg-image-on #page-header:not(.project-info-list-on) .page-header-inner { padding-top: 160px; padding-bottom: 100px; } } @media (max-width: 768px) { .page-header-inner, body:not(.ph-image-on) #page-header .page-header-inner, body.ph-image-on.ph-bg-image-on #page-header:not(.project-info-list-on) .page-header-inner { padding-top: 130px; padding-bottom: 100px; } } @media (max-width: 540px) { .page-header-inner, body:not(.ph-image-on) #page-header .page-header-inner, body.ph-image-on.ph-bg-image-on #page-header:not(.project-info-list-on) .page-header-inner { padding-top: 120px; padding-bottom: 70px; } body.ph-image-on #page-header:not(.project-info-list-on) .page-header-inner { padding-top: 240px; padding-bottom: 40vw; } } /* Page header image ===================== */ .ph-image { position: absolute; top: 160px; right: 18vw; width: clamp(340px, 18vw, 800px); z-index: 2; line-height: 0; } @media (max-width: 1920px) { .ph-image { width: 380px; } #page-header.ph-full:not(.ph-center):not(.ph-bg-image) .ph-image { width: 480px; } } @media (max-width: 1600px) { .ph-image, #page-header.ph-full:not(.ph-center):not(.ph-bg-image) .ph-image { width: 320px; } } @media (max-width: 1024px) { .ph-image, #page-header.ph-full:not(.ph-center):not(.ph-bg-image) .ph-image { right: 10vw; } } @media (max-width: 540px) { .ph-image, #page-header.ph-full:not(.ph-center):not(.ph-bg-image) .ph-image { width: 50%; } } .ph-image-inner { position: relative; width: 100%; } /* Video */ #page-header:not(.ph-image-cropped) .ph-video-wrap { position: relative; padding-bottom: 140%; } .ph-video { position: absolute; top: 0; left: 0; right: 0; bottom: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; } #page-header.ph-bg-image .ph-video-wrap { position: absolute; top: 0; left: 0; right: 0; bottom: 0; } /* if class "ph-image-cropped" enabled (not for background image!) */ #page-header:not(.ph-bg-image).ph-image-cropped .ph-image-inner { position: relative; padding-bottom: 130%; } #page-header:not(.ph-bg-image).ph-image-cropped .ph-image-inner img { position: absolute; top: 0; left: 0; right: 0; bottom: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; } /* Make image to background image */ #page-header.ph-bg-image .ph-image { position: absolute; top: 0; right: 0; width: 100%; height: 100%; max-width: 100%; margin: 0; z-index: -1; transform: none; overflow: hidden; } #page-header.ph-bg-image.ph-image-shadow:after { position: absolute; content: ''; bottom: -1px; left: 0; width: 100%; height: 35vh; z-index: 3; pointer-events: none; background: rgb(32, 35, 39); background: -moz-linear-gradient(0deg, rgba(32, 35, 39, 1) 0%, rgba(32, 35, 39, 0) 100%); background: -webkit-linear-gradient(0deg, rgba(32, 35, 39, 1) 0%, rgba(32, 35, 39, 0) 100%); background: linear-gradient(0deg, rgba(32, 35, 39, 1) 0%, rgba(32, 35, 39, 0) 100%); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#21252c", endColorstr="#21252c", GradientType=1); } #page-header.ph-bg-image.ph-image-shadow.page-header-warranty:after { display: none; } #page-header.ph-bg-image .ph-image-inner { width: 100%; height: 100%; } #page-header.ph-bg-image .ph-image img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; } #page-header.ph-bg-image .ph-video-wrap { padding-bottom: 0; } /* Page header caption ======================= */ .ph-caption { position: relative; } /* page header caption title */ .ph-caption-title { position: relative; margin: 0; font-size: clamp(40px, 5vw, 94px); font-weight: bold; font-weight: 500; color: #FFF; line-height: 1.3; z-index: 9; } /* page header caption title ghost */ .ph-caption-title-ghost { position: absolute; display: flex; align-items: center; top: 0; bottom: 0; left: -6%; padding-top: 8%; font-size: calc(16px + 9vw); font-weight: bold; font-weight: 600; color: #FFF; white-space: nowrap; line-height: 1; opacity: .1; z-index: 1; } /* page header caption subtitle */ .ph-caption-subtitle { position: relative; margin-top: 40px; font-size: calc(15px + 0.5vw); font-weight: 600; color: #e4e4e4; z-index: 9; } #page-header:not(.ph-center):not(.ph-bg-image) .ph-caption-subtitle { color: #777; } .ph-caption svg { width: 30px; height: 30px; } .ph-caption .svg-icon { position: relative } .ph-caption .svg-icon::after, .ph-caption .svg-icon::before { position: absolute; content: ""; width: 200px; height: 1px; top: 52%; transform: translateY(-50%); background: rgba(255, 255, 255, .6); } .ph-caption .svg-icon::after { right: -210px } .ph-caption .svg-icon::before { left: -210px } .ph-caption-Wtitle { font-size: clamp(30px, 4vw, 50px); color: #fff; } .ph-caption-Wsubtitle { font-size: 1rem; color: #e4e4e4; } .ph-caption-form { width: 60%; max-width: 800px; margin: 3rem auto; padding: .3rem .5rem; border: 1px solid #efecf3; border-radius: 2rem; background-color: #fff; box-shadow: 0 0.125rem 0.125rem -0.125rem rgb(0 0 0 / 20%), 0 0.25rem 0.75rem rgb(0 0 0 / 20%); } .ph-caption-form .input-group-text { background-color: transparent; border: 0; font-size: 1.5rem } .ph-caption-form .form-control { color: #333; padding-left: 0; } .ph-caption-form .btn:before { background: #000; } .ph-caption-form .btn:hover { color: #fff !important; } .ph-caption-form .form-control::-webkit-input-placeholder { color: rgba(255, 255, 255, .8); opacity: 1 } .ph-caption-form .form-control::-moz-placeholder { color: #666; opacity: 1 } .ph-caption-form .form-control:-ms-input-placeholder { color: #666; opacity: 1 } .ph-caption-form .form-control::-ms-input-placeholder { color: #666; opacity: 1 } .ph-caption-form .form-control::placeholder { color: #666; opacity: 1 } @media (max-width: 1024px) { .ph-caption .svg-icon::after, .ph-caption .svg-icon::before { width: 100px; } .ph-caption .svg-icon::after { right: -110px } .ph-caption .svg-icon::before { left: -110px } .ph-caption-form { margin: 2rem auto } } @media (max-width: 768px) { .ph-caption-form { width: 80% } .ph-caption-title { font-size: 35px; } } @media (max-width: 540px) { .ph-caption-form { width: 90%; padding:.2rem 0.3rem; } .ph-caption-form .form-control{ height: 40px; } .ph-caption-Wsubtitle { padding: 0 10% } .ph-caption-form .btn { padding:.1rem 1.5rem !important; height: 40px; } } /* page header caption category */ .ph-categories { position: relative; margin-bottom: 15px; z-index: 9; } .ph-category { position: relative; display: inline-block; font-size: calc(15px + 0.1vw); color: #FFF; line-height: 1.4; } a.ph-category:hover { opacity: .8; } .ph-category ~ .ph-category:not(:empty)::before { content: ", "; margin-left: -4px; } /* page header caption meta */ .ph-meta { position: relative; display: inline-flex; margin-top: 40px; font-size: 16px; color: #cacaca; font-weight: normal; z-index: 9; } .ph-meta-published {} .ph-meta-posted-by { margin-left: 10px; font-weight: normal; } .ph-meta-posted-by a { position: relative; color: #cacaca; } .ph-meta-posted-by a:hover { opacity: .8; } /* page header caption description */ .ph-caption-description { position: relative; max-width: 900px; margin-top: 50px; z-index: 9; } /* page header caption paragraph */ .ph-caption > p { position: relative; max-width: 900px; z-index: 9; } .ph-caption .ph-caption-title + p, .ph-caption .ph-caption-title-ghost + p, .ph-caption .ph-caption-subtitle + p { margin-top: 50px; } .ph-caption > p:last-child { margin-bottom: 0; } /* Project info list ===================== */ .project-info-list { position: relative; z-index: 9; } #page-header .project-info-list { margin-top: 60px; } .project-info-list > ul { list-style: none; margin: 0; padding: 0; } .project-info-list > ul > li { position: relative; display: inline-block; max-width: 70%; vertical-align: top; padding: 0px 30px 0 0; margin: 15px 25px 15px 0; } @media (max-width: 1023px) { #page-header:not(.ph-center) .project-info-list > ul > li { display: block; width: 100%; max-width: 100%; padding: 0; margin: 15px 0 25px 0; } #page-header .project-info-list { margin-top: 20px; } } .project-info-list > ul > li:last-child { padding-right: 0; margin-right: 0; } .project-info-list > ul > li::after { position: absolute; display: block; content: ""; top: 24px; right: 0; width: 1px; height: 70px; margin-top: -18px; background-color: rgb(255 255 255 / 40%); } .project-info-list > ul > li:last-child::after { display: none; } @media (max-width: 768px) { #page-header:not(.ph-center) .project-info-list > ul > li::after { display: none; } } /* project info list if align senter */ .text-center .project-info-list > ul > li, .project-info-list.text-center > ul > li { padding: 0px 40px 0 30px; margin: 15px 0 15px 0; } /* project info list heading */ .project-info-list .pi-list-heading { margin-bottom: 5px; font-weight: normal; opacity: .8; } /* project info list content */ .project-info-list .pi-list-cont { font-size: calc(14px + 0.1vw); line-height: 1.7; opacity: .8; } .project-info-list .pi-list-cont span { font-weight: 700; font-size: 2rem } .project-info-list .social-buttons { display: inline-block; margin-top: -5px; margin-left: -10px; } .project-info-list .social-buttons > ul > li { margin-right: 15px; } .project-info-list .social-buttons > ul > li a { width: 45px; height: 45px; font-size: 15px; } /* project info list icon */ .project-info-list .pi-list-icon { position: relative; display: inline-block; bottom: 2px; margin-left: 10px; font-size: 13px; transform: rotate(-45deg); } /* Scroll down circle ====================== */ .scroll-down-circle { position: absolute; display: block; left: 2%; bottom: -50px; width: 250px; height: 250px; z-index: 100; visibility: inherit; } .scroll-down-circle i { font-size: 2rem; visibility: inherit; } @media (max-width: 1024px) { .scroll-down-circle { display: none; } } @media (min-width: 2560px) { .scroll-down-circle { display: none; } } #page-header:not(.ph-full) .scroll-down-circle { /* Display only on full scren page header! */ display: none; } /* Scroll down circle icon */ .scroll-down-circle .sdc-icon { position: absolute; display: block; left: 50%; top: 50%; font-size: 16px; color: #999; transform: translate(-50%, -50%); } #page-header.ph-bg-image .scroll-down-circle .sdc-icon { color: #FFF; } /* Scroll down circle svg */ .scroll-down-circle svg { width: 100%; animation: sdc-rotation 8s infinite linear; } .scroll-down-circle rect { fill: #FFF; } .scroll-down-circle text { font-size: 33px; font-weight: normal; text-transform: uppercase; letter-spacing: 25px; fill: #BBB; transition: fill .2s; } .scroll-down-circle:hover text { fill: #FFF; } #page-header.ph-bg-image .scroll-down-circle text {} /* Scroll down circle animation */ @keyframes sdc-rotation { 0% { transform: rotate(0deg); } 100% { transform: rotate(-360deg); } } /* Page header full screen */ @media (min-width: 1025px) { #page-header.ph-full { display: flex; align-items: center; min-height: 100vh; } #page-header.ph-full .page-header-inner { padding-top: 5% !important; padding-bottom: 5% !important; } #page-header.ph-full .ph-image { position: absolute; display: flex; align-items: center; top: 0; bottom: 0; height: 100%; } #page-header.ph-full:not(.ph-bg-image).ph-image-cropped .ph-image-inner { padding-bottom: 140%; } } /* Page header image cover opasity */ [class*="ph-image-cover-"] .ph-image-inner::before, [class*="cover-opacity-"]::before { position: absolute; display: block; content: ""; top: -1px; left: -1px; bottom: -1px; right: -1px; background-color: #040404; z-index: 1; opacity: 0; } .ph-image-cover-2 .ph-image-inner::before, .cover-opacity-2::before { opacity: .2; } .ph-image-cover-4 .ph-image-inner::before, .cover-opacity-4::before { opacity: .4; } /* Page header positions ========================= */ /* Position center */ #page-header.ph-center { text-align: center; } @media (min-width: 1025px) { #page-header.ph-center .page-header-inner { max-width: 100%; padding-left: 4% !important; padding-right: 4% !important; } } #page-header.ph-center .ph-caption, #page-header.ph-center .ph-caption-title, #page-header.ph-center .ph-caption-subtitle { margin-left: auto; margin-right: auto; text-align: center; } #page-header.ph-center .ph-caption-title-ghost { left: 50%; transform: translate3d(-50%, 0, 0); } #page-header.ph-center .ph-caption-description, #page-header.ph-center .ph-caption > p { margin-left: auto; margin-right: auto; } #page-header.ph-center:not(.ph-bg-image) .ph-image { right: 50%; transform: translate(50%, 0); } #page-header.ph-center .project-info-list .social-buttons { margin-left: 0; } /* Position inline (for a single project page only! No effect with class "ph-center"!) */ @media (min-width: 1025px) { #page-header:not(.ph-center).ph-inline .page-header-inner { display: flex; } #page-header:not(.ph-center).ph-inline .ph-caption { -ms-flex: 0 0 75%; flex: 0 0 75%; max-width: 75%; align-self: center; padding-right: 10%; } #page-header:not(.ph-center).ph-inline .project-info-list { -ms-flex: 0 0 25%; flex: 0 0 25%; max-width: 25%; align-self: center; margin: 0; } #page-header:not(.ph-center).ph-inline .project-info-list > ul > li { position: relative; display: block; width: 100%; max-width: 100%; padding: 0; margin: 0 0 25px 0; } #page-header:not(.ph-center).ph-inline .project-info-list > ul > li:last-child { margin: 0; } #page-header:not(.ph-center).ph-inline .project-info-list > ul > li::after { display: none; } } /* If page header background image is light (class "ph-bg-image-is-light") ============================================ */ /* Make page header caption dark */ body.ph-bg-image-light-on .ph-category, body.ph-bg-image-light-on .ph-caption-title, body.ph-bg-image-light-on .ph-caption-subtitle { color: #111; } body.ph-bg-image-light-on #page-header.ph-stroke .ph-caption-title { -webkit-text-stroke-color: #111; } /* Make page header project info list dark */ body.ph-bg-image-light-on #page-header .project-info-list, body.ph-bg-image-light-on #page-header .project-info-list .pi-list-cont a { color: #111; font-weight: 500; } body.ph-bg-image-light-on #page-header .project-info-list > ul > li::after { background-color: rgb(92 92 92 / 40%); } /* Make header logo dark */ body.ph-bg-image-light-on #tt-header .tt-logo-light { display: none; } body.ph-bg-image-light-on #tt-header .tt-logo-dark { display: block; } /* Make overlay menu toggle button dark */ body.ph-bg-image-light-on:not(.tt-ol-menu-open) .tt-ol-menu-toggle-btn-text { color: #111; } body.ph-bg-image-light-on:not(.tt-ol-menu-open) .tt-ol-menu-toggle-btn span::before, body.ph-bg-image-light-on:not(.tt-ol-menu-open) .tt-ol-menu-toggle-btn span::after { background-color: #111; } /* Make classic menu links dark */ @media (min-width: 1025px) { body.ph-bg-image-light-on .tt-main-menu-list > li > a, body.ph-bg-image-light-on .tt-main-menu-list > li > .tt-submenu-trigger > a { color: #111; } } @media (max-width: 1024px) { body.ph-bg-image-light-on:not(.tt-m-menu-open) .tt-m-menu-toggle-btn-text { color: #111; } body.ph-bg-image-light-on:not(.tt-m-menu-open) .tt-m-menu-toggle-btn span::before, body.ph-bg-image-light-on:not(.tt-m-menu-open) .tt-m-menu-toggle-btn span::after { background-color: #111; } } /* Make scroll down circle dark */ body.ph-bg-image-light-on #page-header:not(.ph-image-shadow) .scroll-down-circle text { fill: #111; } body.ph-bg-image-light-on #page-header:not(.ph-image-shadow) .scroll-down-circle .sdc-icon { color: #555; } /* ------------------------------------------------------------- * * 区块标题 /* ------------------------------------------------------------- */ .tt-heading { margin-bottom: 100px; } .tt-heading .tt-heading-title { font-weight: bold; font-weight: 800; letter-spacing: 5px; padding-left: 5px; position: relative } .tt-heading .tt-heading-title:before { position: absolute; content: ''; height: 3px; width: 65px; bottom: -25px; left: 50%; transform: translateX(-50%); background-image: url("../images/bg-8.png"); } @media (max-width: 1024px) { .tt-heading { margin-bottom: 80px; } .tt-heading .tt-heading-title { font-size: 2.2rem } .tt-heading .tt-heading-subtitle { font-size: .913rem } } @media (max-width: 540px) { .tt-heading { margin-bottom: 50px; } .tt-heading .tt-heading-title { font-size: 1.5rem; margin-top: .6rem !important } .tt-heading .tt-heading-subtitle { font-size: .75rem } .tt-heading .tt-heading-title:before { bottom: -1.2rem; } } /* ------------------------------------------------------------- * * tt-Grid 图像风格 /* ------------------------------------------------------------- */ .tt-grid { position: relative; } .tt-grid::after { content: ""; display: table; clear: both; } /* tt-Grid top content ======================= */ .tt-grid-top { position: relative; padding-bottom: 40px; text-align: right; } body:not(.tt-boxed) .tt-section-inner.tt-wrap .tt-grid:not([class*="ttgr-gap-"]) .tt-grid-top, .tt-section-inner:not(.tt-wrap) .tt-grid:not([class*="ttgr-gap-"]) .tt-grid-top { padding-left: 3vw; padding-right: 3vw; } /* tt-Ggrid categories/filter ============================== */ .tt-grid-categories { position: relative; } /* tt-Ggrid categories/filter trigger ====================================== */ .ttgr-cat-trigger-wrap { position: relative; padding-left: 15px; font-size: 16px; color: #FFF; z-index: 999; } .ttgr-cat-trigger { position: relative; display: inline-flex; align-items: center; cursor: pointer; } .ttgr-cat-trigger:hover {} .ttgr-cat-text { float: left; min-width: 60px; text-align: right; overflow: hidden; } .ttgr-cat-text > span { position: relative; display: inline-block; width: 100%; transition: transform 0.3s; } body:not(.is-mobile) .ttgr-cat-trigger-wrap:hover .ttgr-cat-text > span { transform: translate3d(0, -100%, 0); } body:not(.is-mobile) .ttgr-cat-text > span::before { position: absolute; top: 100%; right: 0; content: attr(data-hover); } .ttgr-cat-icon { float: left; } .ttgr-cat-icon span { width: 50px; height: 50px; display: flex; justify-content: center; align-items: center; line-height: 1; font-size: 17px; } /* If "ttgr-cat-nav" is open */ @media (min-width: 768px) { body.ttgr-cat-nav-open .ttgr-item-inner { transition: transform 0.6s; } } /* tt-Ggrid categories trigger position fixed */ .ttgr-cat-trigger-wrap.ttgr-cat-fixed { position: fixed; bottom: 5%; right: 4%; padding: 10px 0 10px 10px; z-index: 9; opacity: 0; visibility: hidden; } /* tt-Ggrid categories/filter nav ================================== */ .ttgr-cat-nav { position: fixed; top: 0; left: 0; width: 100%; height: 100vh; background-color: rgb(0 0 0 / 50%); pointer-events: initial; z-index: 998; visibility: hidden; opacity: 0; } .ttgr-cat-list-holder { position: relative; height: 100%; width: calc(100% + 17px); padding-right: 17px; overflow-y: scroll; z-index: 2; } .ttgr-cat-list-inner { display: table; width: 100%; max-width: 1282px; height: 100%; margin-left: auto; margin-right: auto; padding-left: 15px; padding-right: 15px; } .ttgr-cat-list-content { display: table-cell; vertical-align: middle; height: 100%; padding: 160px 5% 120px 10%; } /* tt-Ggrid categories list */ .ttgr-cat-list { display: inline-block; margin: 0; padding: 0; list-style: none; } .ttgr-cat-list > li { position: relative; } .ttgr-cat-list > li > a { position: relative; display: inline-block; padding-top: 12px; padding-bottom: 12px; font-size: calc(26px + 1.2vw); font-weight: bold; font-weight: 700; line-height: 1.2; color: #BBB; transition: color 0.3s ease-in-out; } .ttgr-cat-list > li > a:hover, .ttgr-cat-list > li > a:focus, .ttgr-cat-list > li > a.active { color: #FFF; } .ttgr-cat-list > li:first-child > a { padding-top: 0; } .ttgr-cat-list > li:last-child > a { padding-bottom: 0; } /* tt-Ggrid categories list item counter */ @media (min-width: 992px) { .ttgr-cat-list { counter-reset: ttgr-cat-list-counter; } .ttgr-cat-list .ttgr-cat-item::before { position: absolute; counter-increment: ttgr-cat-list-counter; content: ""counter(ttgr-cat-list-counter, decimal-leading-zero); top: 5px; left: -40px; line-height: 1; font-size: 14px; font-weight: normal; color: #FFF; opacity: 0.4; } } /* tt-Ggrid categories list close (for mobile devises) */ .ttgr-cat-close { margin-bottom: 25px; font-size: calc(13px + 0.6vw); } body:not(.is-mobile) .ttgr-cat-close { display: none; } /* tt-Grid items ================= */ .tt-grid-items-wrap {} /* tt-Grid item */ .tt-grid-item { position: relative; float: left; width: 100%; } .ttgr-item-inner { position: relative; } /* tt-Grid height class ("ttgr-height"). Use it on an element inside "ttgr-item-inner". ======================================== */ .ttgr-height { position: relative; padding-bottom: 35%; } @media (max-width: 768px) { .ttgr-height { position: relative; padding-bottom: 60%; } } body.tt-boxed .tt-wrap .ttgr-height { padding-bottom: 60%; } /* if class "ttgr-layout-*" enabled */ .tt-grid[class*="ttgr-layout-"] .ttgr-height { padding-bottom: 60%; } .tt-grid[class*="ttgr-layout-"].ttgr-portrait:not(.ttgr-layout-creative-1):not(.ttgr-layout-creative-2) .ttgr-height { padding-bottom: 140%; } /* tt-Grid layouts =================== */ /* layout-2 */ @media (min-width: 768px) { .tt-grid.ttgr-layout-2 .tt-grid-item { width: 50%; } } .tt-grid.ttgr-layout-2 .ttgr-height { padding-bottom: 65%; } .tt-grid.ttgr-layout-2.ttgr-portrait .ttgr-height, .tt-grid.ttgr-layout-2.ttgr-portrait-half .tt-grid-item:nth-child(4n+3) .ttgr-height, .tt-grid.ttgr-layout-2.ttgr-portrait-half .tt-grid-item:nth-child(4n+4) .ttgr-height { padding-bottom: 140%; } /* layout-3 */ @media (min-width: 768px) { .tt-grid.ttgr-layout-3 .tt-grid-item { width: 50%; } } @media (min-width: 1200px) { .tt-grid.ttgr-layout-3 .tt-grid-item { width: 33.33333%; } } .tt-grid.ttgr-layout-3 .ttgr-height { padding-bottom: 70%; } .tt-grid.ttgr-layout-3.ttgr-portrait .ttgr-height, .tt-grid.ttgr-layout-3.ttgr-portrait-half .tt-grid-item:nth-child(6n+4) .ttgr-height, .tt-grid.ttgr-layout-3.ttgr-portrait-half .tt-grid-item:nth-child(6n+5) .ttgr-height, .tt-grid.ttgr-layout-3.ttgr-portrait-half .tt-grid-item:nth-child(6n+6) .ttgr-height { padding-bottom: 140%; } /* layout-4 */ @media screen and (min-width: 768px) and (max-width: 1024px) { .tt-grid.ttgr-layout-4 .tt-grid-item { width: 50%; } } @media screen and (min-width: 1025px) and (max-width: 1399px) { .tt-grid.ttgr-layout-4 .tt-grid-item { width: 33.33333%; } } @media (min-width: 1400px) { .tt-grid.ttgr-layout-4 .tt-grid-item { width: 25%; } } .tt-grid.ttgr-layout-4 .ttgr-height { padding-bottom: 60%; } .tt-grid.ttgr-layout-4.ttgr-portrait .ttgr-height, .tt-grid.ttgr-layout-4.ttgr-portrait-half .tt-grid-item:nth-child(3n+5) .ttgr-height, .tt-grid.ttgr-layout-4.ttgr-portrait-half .tt-grid-item:nth-child(6n+7) .ttgr-height, .tt-grid.ttgr-layout-4.ttgr-portrait-half .tt-grid-item:nth-child(9n+6) .ttgr-height { padding-bottom: 140%; } /* layout-1-2 */ @media (min-width: 768px) { .tt-grid.ttgr-layout-1-2 .tt-grid-item { width: 50%; } } .tt-grid.ttgr-layout-1-2 .tt-grid-item:nth-child(3n+1) { width: 100%; } .tt-grid.ttgr-layout-1-2 .ttgr-height { padding-bottom: 60%; } @media (min-width: 768px) { .tt-grid.ttgr-layout-1-2 .tt-grid-item:nth-child(3n+1) .ttgr-height { padding-bottom: calc(60% - 20%); } } .tt-grid.ttgr-layout-1-2.ttgr-portrait .ttgr-height, .tt-grid.ttgr-layout-1-2.ttgr-portrait-half .ttgr-height { padding-bottom: 120%; } .tt-grid.ttgr-layout-1-2.ttgr-portrait .tt-grid-item:nth-child(3n+1) .ttgr-height { padding-bottom: 100%; } /* layout-2-1 */ @media (min-width: 768px) { .tt-grid.ttgr-layout-2-1 .tt-grid-item { width: 50%; } } .tt-grid.ttgr-layout-2-1 .tt-grid-item:nth-child(3n+0) { width: 100%; } .tt-grid.ttgr-layout-2-1 .ttgr-height { padding-bottom: 60%; } @media (min-width: 768px) { .tt-grid.ttgr-layout-2-1 .tt-grid-item:nth-child(3n+0) .ttgr-height { padding-bottom: calc(60% - 20%); } } .tt-grid.ttgr-layout-2-1.ttgr-portrait .ttgr-height, .tt-grid.ttgr-layout-2-1.ttgr-portrait-half .ttgr-height { padding-bottom: 120%; } .tt-grid.ttgr-layout-2-1.ttgr-portrait .tt-grid-item:nth-child(3n+0) .ttgr-height { padding-bottom: 100%; } /* layout-2-3 */ @media screen and (min-width: 768px) and (max-width: 1199px) { .tt-grid.ttgr-layout-2-3 .tt-grid-item { width: 50%; } .tt-grid.ttgr-layout-2-3 .tt-grid-item:nth-child(3n+1) { width: 100%; } .tt-grid.ttgr-layout-2-3 .ttgr-height { padding-bottom: 70% !important; } .tt-grid.ttgr-layout-2-3 .tt-grid-item:nth-child(3n+1) .ttgr-height { padding-bottom: calc(60% - 20%) !important; } } @media (min-width: 1200px) { .tt-grid.ttgr-layout-2-3 .tt-grid-item { width: 33.33333%; } .tt-grid.ttgr-layout-2-3 .tt-grid-item:nth-child(5n+1), .tt-grid.ttgr-layout-2-3 .tt-grid-item:nth-child(5n+2) { width: 50%; } } .tt-grid.ttgr-layout-2-3 .ttgr-height { padding-bottom: 70%; } .tt-grid.ttgr-layout-2-3 .tt-grid-item:nth-child(5n+1) .ttgr-height, .tt-grid.ttgr-layout-2-3 .tt-grid-item:nth-child(5n+2) .ttgr-height { padding-bottom: 60%; } .tt-grid.ttgr-layout-2-3.ttgr-portrait .ttgr-height, .tt-grid.ttgr-layout-2-3.ttgr-portrait .tt-grid-item:nth-child(5n+1) .ttgr-height, .tt-grid.ttgr-layout-2-3.ttgr-portrait .tt-grid-item:nth-child(5n+2) .ttgr-height, .tt-grid.ttgr-layout-2-3.ttgr-portrait-half .ttgr-height { padding-bottom: 120%; } /* layout-3-2 */ @media screen and (min-width: 768px) and (max-width: 1199px) { .tt-grid.ttgr-layout-3-2 .tt-grid-item { width: 50%; } .tt-grid.ttgr-layout-3-2 .tt-grid-item:nth-child(3n+0) { width: 100%; } .tt-grid.ttgr-layout-3-2 .ttgr-height { padding-bottom: 70% !important; } .tt-grid.ttgr-layout-3-2 .tt-grid-item:nth-child(3n+0) .ttgr-height { padding-bottom: calc(60% - 20%) !important; } } @media (min-width: 1200px) { .tt-grid.ttgr-layout-3-2 .tt-grid-item { width: 33.33333%; } .tt-grid.ttgr-layout-3-2 .tt-grid-item:nth-child(5n+4), .tt-grid.ttgr-layout-3-2 .tt-grid-item:nth-child(5n+5) { width: 50%; } } .tt-grid.ttgr-layout-3-2 .ttgr-height { padding-bottom: 70%; } .tt-grid.ttgr-layout-3-2 .tt-grid-item:nth-child(5n+4) .ttgr-height, .tt-grid.ttgr-layout-3-2 .tt-grid-item:nth-child(5n+5) .ttgr-height { padding-bottom: 60%; } .tt-grid.ttgr-layout-3-2.ttgr-portrait .ttgr-height, .tt-grid.ttgr-layout-3-2.ttgr-portrait .tt-grid-item:nth-child(5n+4) .ttgr-height, .tt-grid.ttgr-layout-3-2.ttgr-portrait .tt-grid-item:nth-child(5n+5) .ttgr-height, .tt-grid.ttgr-layout-3-2.ttgr-portrait-half .ttgr-height { padding-bottom: 120%; } /* layout-3-4 */ @media screen and (min-width: 768px) and (max-width: 1024px) { .tt-grid.ttgr-layout-3-4 .tt-grid-item { width: 50%; } .tt-grid.ttgr-layout-3-4 .tt-grid-item:nth-child(3n+1) { width: 100%; } .tt-grid.ttgr-layout-3-4 .ttgr-height { padding-bottom: 70% !important; } .tt-grid.ttgr-layout-3-4 .tt-grid-item:nth-child(3n+1) .ttgr-height { padding-bottom: calc(60% - 20%) !important; } } @media screen and (min-width: 1025px) and (max-width: 1399px) { .tt-grid.ttgr-layout-3-4 .tt-grid-item { width: 33.33333%; } .tt-grid.ttgr-layout-3-4 .tt-grid-item:nth-child(5n+1), .tt-grid.ttgr-layout-3-4 .tt-grid-item:nth-child(5n+2) { width: 50%; } .tt-grid.ttgr-layout-3-4 .ttgr-height { padding-bottom: 70% !important; } .tt-grid.ttgr-layout-3-4 .tt-grid-item:nth-child(5n+1) .ttgr-height, .tt-grid.ttgr-layout-3-4 .tt-grid-item:nth-child(5n+2) .ttgr-height { padding-bottom: 60% !important; } } @media (min-width: 1400px) { .tt-grid.ttgr-layout-3-4 .tt-grid-item { width: 25%; } .tt-grid.ttgr-layout-3-4 .tt-grid-item:nth-child(7n+1), .tt-grid.ttgr-layout-3-4 .tt-grid-item:nth-child(7n+2), .tt-grid.ttgr-layout-3-4 .tt-grid-item:nth-child(7n+3) { width: 33.33333%; } } .tt-grid.ttgr-layout-3-4 .ttgr-height { padding-bottom: 70%; } .tt-grid.ttgr-layout-3-4 .tt-grid-item:nth-child(7n+1) .ttgr-height, .tt-grid.ttgr-layout-3-4 .tt-grid-item:nth-child(7n+2) .ttgr-height, .tt-grid.ttgr-layout-3-4 .tt-grid-item:nth-child(7n+3) .ttgr-height { padding-bottom: 60%; } .tt-grid.ttgr-layout-3-4.ttgr-portrait .ttgr-height, .tt-grid.ttgr-layout-3-4.ttgr-portrait .tt-grid-item:nth-child(7n+1) .ttgr-height, .tt-grid.ttgr-layout-3-4.ttgr-portrait .tt-grid-item:nth-child(7n+2) .ttgr-height, .tt-grid.ttgr-layout-3-4.ttgr-portrait .tt-grid-item:nth-child(7n+3) .ttgr-height, .tt-grid.ttgr-layout-3-4.ttgr-portrait-half .ttgr-height { padding-bottom: 140%; } /* layout-4-3 */ @media screen and (min-width: 768px) and (max-width: 1024px) { .tt-grid.ttgr-layout-4-3 .tt-grid-item { width: 50%; } .tt-grid.ttgr-layout-4-3 .tt-grid-item:nth-child(3n+0) { width: 100%; } .tt-grid.ttgr-layout-4-3 .ttgr-height { padding-bottom: 70% !important; } .tt-grid.ttgr-layout-4-3 .tt-grid-item:nth-child(3n+0) .ttgr-height { padding-bottom: calc(60% - 20%) !important; } } @media screen and (min-width: 1025px) and (max-width: 1399px) { .tt-grid.ttgr-layout-4-3 .tt-grid-item { width: 33.33333%; } .tt-grid.ttgr-layout-4-3 .tt-grid-item:nth-child(5n+4), .tt-grid.ttgr-layout-4-3 .tt-grid-item:nth-child(5n+5) { width: 50%; } .tt-grid.ttgr-layout-4-3 .ttgr-height { padding-bottom: 70% !important; } .tt-grid.ttgr-layout-4-3 .tt-grid-item:nth-child(5n+4) .ttgr-height, .tt-grid.ttgr-layout-4-3 .tt-grid-item:nth-child(5n+5) .ttgr-height { padding-bottom: 60% !important; } } @media (min-width: 1400px) { .tt-grid.ttgr-layout-4-3 .tt-grid-item { width: 25%; } .tt-grid.ttgr-layout-4-3 .tt-grid-item:nth-child(7n+5), .tt-grid.ttgr-layout-4-3 .tt-grid-item:nth-child(7n+6), .tt-grid.ttgr-layout-4-3 .tt-grid-item:nth-child(7n+7) { width: 33.33333%; } } .tt-grid.ttgr-layout-4-3 .ttgr-height { padding-bottom: 70%; } .tt-grid.ttgr-layout-4-3 .tt-grid-item:nth-child(7n+5) .ttgr-height, .tt-grid.ttgr-layout-4-3 .tt-grid-item:nth-child(7n+6) .ttgr-height, .tt-grid.ttgr-layout-4-3 .tt-grid-item:nth-child(7n+7) .ttgr-height { padding-bottom: 60%; } .tt-grid.ttgr-layout-4-3.ttgr-portrait .ttgr-height, .tt-grid.ttgr-layout-4-3.ttgr-portrait .tt-grid-item:nth-child(7n+5) .ttgr-height, .tt-grid.ttgr-layout-4-3.ttgr-portrait .tt-grid-item:nth-child(7n+6) .ttgr-height, .tt-grid.ttgr-layout-4-3.ttgr-portrait .tt-grid-item:nth-child(7n+7) .ttgr-height, .tt-grid.ttgr-layout-4-3.ttgr-portrait-half .ttgr-height { padding-bottom: 140%; } /* layout-creative-1 */ @media (min-width: 768px) { .tt-grid.ttgr-layout-creative-1 .tt-grid-item:nth-of-type(6n+1), .tt-grid.ttgr-layout-creative-1 .tt-grid-item:nth-of-type(6n+5) { width: 60%; } .tt-grid.ttgr-layout-creative-1 .tt-grid-item:nth-of-type(6n+2), .tt-grid.ttgr-layout-creative-1 .tt-grid-item:nth-of-type(6n+4) { width: 40%; padding-top: 12vw; } .tt-grid.ttgr-layout-creative-1 .tt-grid-item:nth-child(3n+3) { width: 100%; padding: 0 14vw; } .tt-grid.ttgr-layout-creative-1:not(.ttgr-portrait):not(.ttgr-not-cropped) .tt-grid-item:nth-child(3n+3) .ttgr-height { padding-bottom: 55%; } } /* layout-creative-2 */ @media (min-width: 768px) { .tt-grid.ttgr-layout-creative-2 .tt-grid-item:nth-of-type(6n+1), .tt-grid.ttgr-layout-creative-2 .tt-grid-item:nth-of-type(6n+4), .tt-grid.ttgr-layout-creative-2 .tt-grid-item:nth-of-type(6n+5) { width: 58%; } .tt-grid.ttgr-layout-creative-2 .tt-grid-item:nth-of-type(6n+4) { padding-top: 1vw; } .tt-grid.ttgr-layout-creative-2 .tt-grid-item:nth-of-type(6n+2), .tt-grid.ttgr-layout-creative-2 .tt-grid-item:nth-of-type(6n+3), .tt-grid.ttgr-layout-creative-2 .tt-grid-item:nth-of-type(6n+6) { width: 42%; padding-top: 9vw; } .tt-grid.ttgr-layout-creative-2 .tt-grid-item:last-child:nth-child(odd) { width: 100%; padding: 0 14vw; } .tt-grid.ttgr-layout-creative-2:not(.ttgr-portrait):not(.ttgr-not-cropped) .tt-grid-item:last-child:nth-child(odd) .ttgr-height { padding-bottom: 55%; } } @media (min-width: 1920px) { .tt-grid.ttgr-layout-creative-2 .tt-grid-item:nth-of-type(6n+3) { padding-top: 8vw; } } /* tt-grid items shifted ========================= */ @media screen and (min-width: 768px) and (max-width: 1024px) { .tt-grid.ttgr-layout-4.ttgr-shifted .tt-grid-item:nth-child(2) .ttgr-item-inner { margin-top: 15vw; } .tt-grid.ttgr-layout-creative-2 .tt-grid-item:nth-of-type(6n+2) { padding-top: 10vw; } .tt-grid.ttgr-layout-creative-2 .tt-grid-item:nth-of-type(6n+4) { padding-top: 2vw; } } @media screen and (min-width: 1025px) and (max-width: 1399px) { .tt-grid.ttgr-layout-4.ttgr-shifted .tt-grid-item:nth-child(2) .ttgr-item-inner { margin-top: 10vw; } } @media (min-width: 1400px) { .tt-grid.ttgr-layout-4.ttgr-shifted .tt-grid-item:nth-child(2) .ttgr-item-inner, .tt-grid.ttgr-layout-4.ttgr-shifted .tt-grid-item:nth-child(4) .ttgr-item-inner { margin-top: 8vw; } } /* tt-grid item gaps ===================== */ .tt-grid.ttgr-gap-6, .tt-grid.ttgr-gap-6 .tt-grid-top { margin-left: 7vw; margin-right: 7vw; } body.tt-boxed .tt-wrap .tt-grid.ttgr-gap-6 { margin-left: -7vw; margin-right: -7vw; } @media (min-width: 1920px) { .tt-grid.ttgr-gap-6, .tt-grid.ttgr-gap-6 .tt-grid-top { margin-left: 10vw; margin-right: 10vw; } body.tt-boxed .tt-wrap .tt-grid.ttgr-gap-6 { margin-left: -10vw; margin-right: -10vw; } } @media (min-width: 1200px) { .tt-grid.ttgr-gap-6 .ttgr-item-inner { margin: 0 4vw 8vw 4vw; } } @media (max-width: 1199px) { .tt-grid.ttgr-gap-6, .tt-grid.ttgr-gap-6 .tt-grid-top { margin-left: 3vw; margin-right: 3vw; } .tt-grid.ttgr-gap-6 .ttgr-item-inner { margin: 0 3vw 5vw 3vw; } } @media (max-width: 540px) { .tt-grid.ttgr-gap-6 .ttgr-item-inner { margin: 0 0 18px 0; } .tt-grid.ttgr-gap-6, .tt-grid.ttgr-gap-6 .tt-grid-top { margin-left: 4vw; margin-right: 4vw; } } /* tt-grid item image not cropped ================================== */ .tt-grid.ttgr-not-cropped:not([class*="ttgr-layout-"]) .ttgr-height:not(.tt-gallery-video-wrap):not(.pgi-video-wrap), .tt-grid.ttgr-layout-2.ttgr-not-cropped .ttgr-height:not(.tt-gallery-video-wrap):not(.pgi-video-wrap), .tt-grid.ttgr-layout-3.ttgr-not-cropped .ttgr-height:not(.tt-gallery-video-wrap):not(.pgi-video-wrap), .tt-grid.ttgr-layout-4.ttgr-not-cropped .ttgr-height:not(.tt-gallery-video-wrap):not(.pgi-video-wrap) { padding-bottom: 0; line-height: 0; } .tt-grid.ttgr-not-cropped:not([class*="ttgr-layout-"]) .ttgr-height img, .tt-grid.ttgr-layout-2.ttgr-not-cropped .ttgr-height img, .tt-grid.ttgr-layout-3.ttgr-not-cropped .ttgr-height img, .tt-grid.ttgr-layout-4.ttgr-not-cropped .ttgr-height img { position: relative; top: unset; left: unset; width: auto; height: auto; object-fit: unset; object-position: unset; } .tt-grid.ttgr-not-cropped:not([class*="ttgr-layout-"]) .ttgr-height.tt-gallery-video-wrap, .tt-grid.ttgr-not-cropped:not([class*="ttgr-layout-"]) .ttgr-height.pgi-video-wrap { padding-bottom: 60%; } /* ------------------------------------------------------------- * * Portfolio grid 项目网格 /* ------------------------------------------------------------- */ #portfolio-grid { position: relative; margin: 0 auto } /* Portfolio grid item */ .portfolio-grid-item { position: relative; } /* Portfolio grid item image ============================= */ .pgi-image-wrap { position: relative; display: block; overflow: hidden; z-index: 1; line-height: 1; } .pgi-image { position: relative; } .pgi-image img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; } /* video */ .pgi-video-wrap { position: relative; } video.pgi-video { position: absolute; top: 0; right: 0; bottom: 0; left: 0; overflow: hidden; width: 100%; height: 100%; object-fit: cover; } /* Portfolio grid item caption =============================== */ .pgi-caption { width: 100%; max-width: 900px; padding: 20px 3%; } .pgi-title { margin: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: calc(19px + 1.5vw); font-weight: bold; font-weight: 600; color: #FFF; line-height: 1.5; } @media (max-width: 767px) { .pgi-title { font-size: calc(19px + 1.5vw); } } @media (max-width: 540px) { .pgi-title { font-size: 20px; } } /* Portfolio grid item categories */ .pgi-categories-wrap { position: relative; margin-top: 8px; white-space: nowrap; overflow: hidden; line-height: 1.2; } .pgi-category { position: relative; display: inline-block; font-size: calc(13px + 0.1vw); color: #FFF; opacity: .5; } .pgi-category ~ .pgi-category { margin-left: -4px; } .pgi-category ~ .pgi-category:not(:empty)::before { content: ", "; } .pgi-category ~ .pgi-category ~ .pgi-category ~ .pgi-category { visibility: hidden; width: 0; } .pgi-category ~ .pgi-category ~ .pgi-category ~ .pgi-category ~ .pgi-category { display: none; } .pgi-category + .pgi-category + .pgi-category + .pgi-category::before { content: "..."; margin-left: 5px; visibility: visible; } @media (max-width: 1024px) { .pgi-categories-wrap { margin-top: 0; } } /* Portfolio grid item caption sizes ===================================== */ @media (min-width: 768px) { .ttgr-layout-2 .pgi-title, .ttgr-layout-1-2 .pgi-title, .ttgr-layout-2-1 .pgi-title, .ttgr-layout-creative-1 .pgi-title, .ttgr-layout-creative-2 .pgi-title { font-size: calc(19px + 0.4vw); } .ttgr-layout-3 .pgi-title, .ttgr-layout-2-3 .pgi-title, .ttgr-layout-3-2 .pgi-title { font-size: calc(19px + 0.3vw); } .ttgr-layout-4 .pgi-title, .ttgr-layout-3-4 .pgi-title, .ttgr-layout-4-3 .pgi-title { font-size: calc(19px + 0.2vw); } } /* Portfolio grid item caption positions ========================================= */ /* Position inside */ #portfolio-grid.pgi-cap-inside .pgi-caption { position: absolute; left: 0; bottom: 10%; padding: 0 8%; z-index: 2; } #portfolio-grid.pgi-cap-inside .pgi-category { opacity: 1; } /* Position center */ #portfolio-grid.pgi-cap-center .pgi-caption { text-align: center; margin-left: auto; margin-right: auto; } #portfolio-grid.pgi-cap-center .pgi-caption-inner { text-align: center; } #portfolio-grid.pgi-cap-inside.pgi-cap-center .pgi-caption { left: 50%; bottom: 50%; transform: translate(-50%, 50%) !important; } /* Portfolio grid item caption styles ====================================== */ /* If light image used (effect only if "pgi-cap-inside" enabled) */ @media (min-width: 1025px) { #portfolio-grid.pgi-cap-inside .pgi-image-is-light .pgi-title { color: #111; } #portfolio-grid.pgi-cap-inside .pgi-image-is-light .pgi-category { color: #111; } #portfolio-grid.pgi-cap-inside .pgi-image-is-light .pgi-image-holder[class*="cover-opacity-"]::before { display: none !important; } } /* Portfolio grid item hover ============================= */ /* Clip path (effect only with gaps) */ /* Caption hover */ body:not(.is-mobile) #portfolio-grid.pgi-cap-inside.pgi-cap-hover .pgi-title { transform: translate3d(0, 15px, 0); transition: all 0.25s ease-out; transition-delay: 0.1s; } body:not(.is-mobile) #portfolio-grid.pgi-cap-inside.pgi-cap-hover .portfolio-grid-item:hover .pgi-title { transform: translate3d(0, 0, 0); } body:not(.is-mobile) #portfolio-grid.pgi-cap-inside.pgi-cap-hover .pgi-categories-wrap { opacity: 0; visibility: hidden; transform: translate3d(0, 20px, 0); transition: all 0.25s ease-out; transition-delay: 0.1s; } body:not(.is-mobile) #portfolio-grid.pgi-cap-inside.pgi-cap-hover .portfolio-grid-item:hover .pgi-categories-wrap { opacity: 1; visibility: visible; transform: translate3d(0, 0, 0); } /* ------------------------------------------------------------- * * Portfolio List 项目列表 /* ------------------------------------------------------------- */ .portfolio-list { position: relative; } /* Portfolio list item ======================= */ .portfolio-list-item { position: relative; margin-bottom: 20px; } .portfolio-list-item:last-child { margin-bottom: 0 !important; } @media (min-width: 768px) { .portfolio-list-item { margin-bottom: 8%; } } /* Portfolio list item inner */ .pli-inner { position: relative; } @media (min-width: 768px) { .pli-inner { display: flex; } } /* Portfolio list item image ============================= */ .pli-image-col { line-height: 0; } .pli-image-link { display: block; overflow: hidden; } .pli-video { width: 100%; } @media (min-width: 768px) { .pli-image-col { -ms-flex: 0 0 60%; flex: 0 0 60%; max-width: 60%; z-index: 1; } /* Image hover */ .pli-hover .pli-image-link { transition: all 0.8s cubic-bezier(0.07, 0.72, 0.29, 0.96); clip-path: inset(0 0 0 0); } .pli-hover .pli-image-col:hover .pli-image-link { clip-path: inset(3% 3% 3% 3%); } .pli-hover .pli-image .pli-image-hover-zoom { transition: all 1s cubic-bezier(0.07, 0.72, 0.29, 0.96); } .pli-hover .pli-image-col:hover .pli-image .pli-image-hover-zoom { transform: scale(1.05); } } /* Portfolio list item image cropped ===================================== */ .portfolio-list.pli-cropped .pli-image img, .portfolio-list.pli-cropped .pli-video { width: 100%; height: 33vw; object-fit: cover; object-position: 50% 50%; } .portfolio-list.pli-cropped .pli-image img, .portfolio-list.pli-cropped .pli-video { height: 30vw; } @media (max-width: 1024px) { .portfolio-list.pli-cropped .pli-image img, .portfolio-list.pli-cropped .pli-video, .portfolio-list.pli-cropped .pli-image img, .portfolio-list.pli-cropped .pli-video { height: 46vw; } } @media (max-width: 767px) { .portfolio-list.pli-cropped .pli-image img, .portfolio-list.pli-cropped .pli-video, .portfolio-list.pli-cropped .pli-image img, .portfolio-list.pli-cropped .pli-video { height: 60vw; } } /* Portfolio list item info ============================ */ .pli-info-col { position: relative; } @media (min-width: 768px) { .pli-info-col { -ms-flex: 0 0 40%; flex: 0 0 40%; max-width: 40%; } } @media (max-width: 767px) { .pli-info-col { background: #424a58; padding: 25px 25px 30px; } } .pli-info { position: relative; line-height: 1; } @media (min-width: 768px) { .pli-info { position: absolute; top: 50%; left: 0; width: 100%; padding-left: 15%; transform: translate3d(0, -50%, 0); } } .pli-title { margin: 0; font-size: calc(16px + 2vw); font-weight: bold; font-weight: 500; color: #FFF; line-height: 1.3; } .pli-title .split-line-wrap { line-height: 1.3; } .pli-title a { display: inline; color: #FFF; } .pli-categories-wrap { position: relative; margin-top: 40px; } @media (max-width: 1023px) { .pli-categories-wrap { margin-top: 30px; } } @media (max-width: 540px) { .pli-categories-wrap { margin-top: 15px; } } .pli-category { position: relative; display: inline-block; font-size: calc(15px + 0.15vw); color: #FFF; line-height: 2; } .portfolio-list:not(.pli-info-overlay) .pli-category { opacity: .7; } @media (max-width: 1023px) { .pli-category { max-height: 90px; overflow: hidden } } @media (max-width: 540px) { .pli-category { line-height: 1.5; } } /* Portfolio list item counter =============================== */ .portfolio-list { counter-reset: pli-counter; } .pli-counter { position: absolute; display: inline-block; top: -60px; left: 15%; color: #FFF; opacity: 0.4; } .pli-counter::before { counter-increment: pli-counter; content: ""counter(pli-counter, decimal-leading-zero); line-height: 1; font-size: calc(17px + 0.2vw); font-weight: normal; z-index: 99999; } @media (min-width: 768px) { .portfolio-list.pl-alter .portfolio-list-item:nth-child(even) .pli-counter { right: 15%; left: auto; } .portfolio-list.pli-info-overlay .pli-counter { left: 53%; } .portfolio-list.pl-alter.pli-info-overlay .portfolio-list-item:nth-child(even) .pli-counter { right: 53%; left: auto; } .portfolio-list.pl-alter .portfolio-list-item:nth-child(even) .pli-counter::before, .portfolio-list.pl-alter.pli-info-overlay .portfolio-list-item:nth-child(even) .pli-counter::before { left: auto; right: 0; } } @media (max-width: 767px) { .pli-counter { display: none; } } /* Portfolio list alternative layout ===================================== */ @media (min-width: 768px) { .portfolio-list.pl-alter .portfolio-list-item { margin-bottom: 10%; } .portfolio-list.pl-alter .portfolio-list-item:nth-child(even) .pli-inner { flex-direction: row-reverse; } .portfolio-list.pl-alter .portfolio-list-item:nth-child(even) .pli-info { right: auto; left: 0; padding-left: 0; padding-right: 15%; text-align: right; } } @media (min-width: 768px) { .portfolio-list.pli-info-lg .pli-title { font-size: calc(16px + 2vw); } } /* ------------------------------------------------------------- * * Portfolio slider (项目banner滚动) /* ------------------------------------------------------------- */ .tt-portfolio-slider { position: relative; width: 100%; background-color: #21252c; } .tt-portfolio-slider .swiper-container { height: calc(100vh + 50px); max-height: 1200px } @media (max-width: 1024px) { .tt-portfolio-slider .swiper-container { height: calc(40vh + 50px); } } @media (min-width: 540px) and (max-width: 767px) { .tt-portfolio-slider .swiper-container { height: calc(100vh + 50px); } } /* Portfolio slider slide */ .tt-portfolio-slider .swiper-slide { position: relative; overflow: hidden; background-color: #000; } /* Portfolio slider item ========================= */ .tt-portfolio-slider-item { position: relative; height: 100%; } .tt-portfolio-slider-item::before, .aboutbg::before, .caseslist::before, .warranty .bg::before { position: absolute; display: block; content: ""; top: 0; left: 0; right: 0; bottom: 0; z-index: 9; opacity: 1; background-color: rgba(0, 0, 0, .4); transition: all 0.5s; } img.tt-psi-image { width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; } /* Slide opasity cover (for prev/next slides) */ .tt-portfolio-slider-item::after { position: absolute; display: block; content: ""; top: 0; left: 0; right: 0; bottom: 0; z-index: 9; opacity: 0; visibility: hidden; background-color: #000; transition: 0.5s ease-in-out; } .swiper-slide-prev .tt-portfolio-slider-item::after, .swiper-slide-next .tt-portfolio-slider-item::after { opacity: .7; visibility: visible; } /* Portfolio slider caption ============================ */ .tt-portfolio-slider-caption { position: absolute; top: 50%; left: 50%; width: 1200px; margin: 0 auto; color: #FFF; z-index: 998; pointer-events: initial; transform: translate3d(0, -50%, 0) translateX(-50%); } @media (max-width: 1200px) { .tt-portfolio-slider-caption { width: 100%; padding: 0 4%; } } .tt-ps-caption-inner { text-shadow: 2px 2px 5px rgba(0, 0, 0, .2); } /* Portfolio slider caption title */ .tt-ps-caption-title { margin: 0; font-size: 55px; font-weight: bold; font-weight: 550; letter-spacing: 5px; line-height: 1.2; } .tt-ps-caption-title a { display: inline; color: #FFF; } .tt-ps-caption-category { margin: 0 0 20px 0; font-size: 35px; font-style: italic; font-weight: 600; letter-spacing: 5px; padding-right: 15px; font-family: "Barlow Condensed", sans-serif; } .tt-ps-caption-category img { max-height: 50px; } /* Portfolio slider caption position ===================================== */ /* Position center */ .tt-portfolio-slider-caption.psc-center { top: 50%; left: 50%; width: 90%; margin: 0; padding-left: 15px; padding-right: 15px; text-align: center; transform: translate(-50%, -50%); } @media (min-width: 1920px) { .tt-ps-caption-category { margin: 0 0 30px 0; font-size: 50px; } .tt-ps-caption-title { font-size: 65px; letter-spacing: 5px; } .tt-ps-caption-category img { max-height: 60px; } } @media (max-width: 1200px) { .tt-portfolio-slider-caption.psc-left { text-align: center; } } @media (max-width: 1024px) { .tt-ps-caption-category { margin: 0 0 15px 0; font-size: 28px; } .tt-ps-caption-category img { max-height: 35px; } .tt-ps-caption-title { font-size: 40px; letter-spacing: 3px; } } @media (max-width: 540px) { .tt-ps-caption-category { margin: 0 0 10px 0; font-size: 20px; } .tt-ps-caption-category img { max-height: 25px; } .tt-ps-caption-title { font-size: 28px; letter-spacing: 1px; } } /* Portfolio slider caption styles =================================== */ /* Style stroke */ .tt-portfolio-slider-caption.psc-stroke .tt-ps-caption-title { font-weight: bold; font-weight: 800; -webkit-text-stroke-width: 2px; -webkit-text-stroke-color: #FFF; -webkit-text-fill-color: transparent; } @media (max-width: 1200px) { .tt-portfolio-slider-caption.psc-stroke .tt-ps-caption-title { -webkit-text-stroke-width: 1px; } } @media (max-width: 991px) { .tt-portfolio-slider-caption.psc-stroke .tt-ps-caption-title { -webkit-text-stroke-width: 1px; } } /* Portfolio slider navigation =============================== */ .tt-portfolio-slider-navigation { position: absolute; display: flex; justify-content: center; align-items: center; bottom: 7%; left: 50%; width: 300px; height: 60px; z-index: 1; transform: translate3d(-50%, 0, 0); } @media (max-width: 1024px) { .tt-portfolio-slider-navigation { width: 95%; } } .tt-ps-nav-prev, .tt-ps-nav-next { position: absolute; top: 0; z-index: 20; } .tt-ps-nav-prev { left: 0; } .tt-ps-nav-next { right: 0; } .tt-ps-nav-arrow { position: relative; display: flex; justify-content: center; align-items: center; width: 60px; height: 60px; font-size: 18px; color: #FFF; cursor: pointer; outline: none; } body:not(.tt-magic-cursor) .tt-ps-nav-arrow:hover { opacity: .5; } .tt-ps-nav-arrow-prev::after, .tt-ps-nav-arrow-next::after { line-height: 0; font-family: "boxicons"; font-weight: 900; display: inline-block; font-style: normal; font-variant: normal; text-rendering: auto; -webkit-font-smoothing: antialiased; } .tt-ps-nav-arrow-prev::after { content: "\ed38"; } .tt-ps-nav-arrow-next::after { content: "\ed3b"; } .tt-ps-nav-arrow.tt-ps-nav-arrow-disabled { /* opacity: .5; */ cursor: auto; pointer-events: none; } .tt-portfolio-slider .swiper-button-lock { display: none; } /* Portfolio slider pagination =============================== */ .tt-ps-nav-pagination {} .tt-portfolio-slider .swiper-pagination-lock { display: none; } /* Portfolio slider pagination bullets */ .tt-ps-nav-pagination-bullets { font-size: 0; } .tt-ps-nav-pagination-bullets .swiper-pagination-bullet { display: inline-block; width: 10px; height: 10px; background-color: transparent; margin: 8px; opacity: 1; border-radius: 100%; border: 2px solid #fff; } .tt-ps-nav-pagination-bullets .swiper-pagination-bullet-active { background: #FFF; opacity: 1; } /* Portfolio slider pagination dynamic bullets */ .tt-ps-nav-pagination-bullets-dynamic { position: absolute; left: 50%; transform: translate3d(-50%, 0, 0); white-space: nowrap; overflow: hidden; font-size: 0; } .tt-ps-nav-pagination-bullets-dynamic .swiper-pagination-bullet { transform: scale(.33); position: relative; transition: .2s transform, .2s left; } .tt-ps-nav-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev { transform: scale(.66); } .tt-ps-nav-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev-prev { transform: scale(.33); } .tt-ps-nav-pagination-bullets-dynamic .swiper-pagination-bullet-active-next { transform: scale(.66); } .tt-ps-nav-pagination-bullets-dynamic .swiper-pagination-bullet-active-next-next { transform: scale(.33); } .tt-ps-nav-pagination-bullets-dynamic .swiper-pagination-bullet-active-main { transform: scale(1); } /* Portfolio slider pagination fraction */ .tt-ps-nav-pagination-fraction { position: relative; font-size: 14px; font-weight: 600; color: #FFF; line-height: 1; } .tt-ps-nav-pagination-fraction .swiper-pagination-current { position: relative; top: -4px; } .tt-ps-nav-pagination-fraction .swiper-pagination-total { position: relative; bottom: -4px; } /* Portfolio slider pagination progressbar */ .tt-ps-nav-pagination-progressbar { position: absolute; left: 70px; right: 70px; width: auto; max-width: 100%; height: 2px; background-color: rgba(255, 255, 255, 0.3); } .tt-ps-nav-pagination-progressbar .swiper-pagination-progressbar-fill { position: absolute; left: 0; top: 0; width: 100%; height: 100%; background-color: #FFF; transform: scale(0); transform-origin: left top; } /* If portfolio slider item image is light (class "psi-image-is-light") =========================================== */ /* Make slider caption dark */ body.psi-light-image-on .tt-ps-caption-category, body.psi-light-image-on .tt-ps-caption-title a { color: #111; } body.psi-light-image-on .tt-portfolio-slider-caption.psc-stroke .tt-ps-caption-title { -webkit-text-stroke-color: #111; } /* Make slider navigation dark */ body.psi-light-image-on .tt-ps-nav-pagination-fraction, body.psi-light-image-on .tt-ps-nav-arrow { color: #111; } body.psi-light-image-on .tt-ps-nav-pagination-progressbar { background-color: rgb(0 0 0 / 20%); } body.psi-light-image-on .tt-ps-nav-pagination-progressbar .swiper-pagination-progressbar-fill { background-color: #111; } body.psi-light-image-on .tt-ps-nav-pagination-bullets .swiper-pagination-bullet { border-color: #111; } body.psi-light-image-on .tt-ps-nav-pagination-bullets .swiper-pagination-bullet-active { background: #111; } /* Make header logo dark */ body.psi-light-image-on #tt-header .tt-logo-light { display: none; } body.psi-light-image-on #tt-header .tt-logo-dark { display: block; } /* Make overlay menu toggle button dark */ body.psi-light-image-on:not(.tt-ol-menu-open) .tt-ol-menu-toggle-btn-text { color: #111; } body.psi-light-image-on:not(.tt-ol-menu-open) .tt-ol-menu-toggle-btn span::before, body.psi-light-image-on:not(.tt-ol-menu-open) .tt-ol-menu-toggle-btn span::after { background-color: #111; } /* Make classic menu links dark */ @media (min-width: 1025px) { body.psi-light-image-on .tt-main-menu-list > li > a, body.psi-light-image-on .tt-main-menu-list > li > .tt-submenu-trigger > a { color: #111; } body.psi-light-image-on .tt-main-menu-list.tt-mm-hover > li > a:hover, body.psi-light-image-on .tt-main-menu-list.tt-mm-hover > li > .tt-submenu-trigger > a:hover, body.psi-light-image-on .tt-main-menu-list.tt-mm-hover > li.active > a, body.psi-light-image-on .tt-main-menu-list.tt-mm-hover > li.active > .tt-submenu-trigger > a, body.psi-light-image-on .tt-main-menu-list.tt-mm-hover > li.tt-submenu-open > .tt-submenu-trigger > a { opacity: 1; color: #000; } } @media (max-width: 1024px) { body.psi-light-image-on:not(.tt-m-menu-open) .tt-m-menu-toggle-btn-text { color: #111; } body.psi-light-image-on:not(.tt-m-menu-open) .tt-m-menu-toggle-btn span::before, body.psi-light-image-on:not(.tt-m-menu-open) .tt-m-menu-toggle-btn span::after { background-color: #111; } } /* Make footer dark (if position is absolute) */ @media (min-width: 1025px) { body.psi-light-image-on #tt-footer.footer-absolute, body.psi-light-image-on #tt-footer.footer-absolute a, body.psi-light-image-on #tt-footer.footer-absolute .tt-btn-link > *, body.psi-light-image-on #tt-footer.footer-absolute .tt-btn-link > *::after { color: #111; } body.psi-light-image-on #tt-footer.footer-absolute .tt-btn-link::after { background-color: #111; } } /* ------------------------------------------------------------- * * Portfolio carousel 项目分个滚动 /* ------------------------------------------------------------- */ .tt-portfolio-carousel { position: relative; } .tt-portfolio-carousel .swiper-wrapper { position: relative; display: flex; align-items: center; height: 100vh; } .page-details .tt-portfolio-carousel .swiper-wrapper { height: calc(100vh - 100px); } .tt-portfolio-carousel .swiper-wrapper.swtr-smooth { /* Add transition when windows resize or orientation change */ transition: transform 0.8s !important; } .tt-portfolio-carousel .swiper-slide { height: auto; } @media (min-width: 1025px) { .tt-portfolio-carousel .swiper-slide { width: auto; } } @media (max-width: 1025px) { .page-details .tt-portfolio-carousel .swiper-wrapper { height: 40vh; } } @media (max-width: 540px) { .page-details .tt-portfolio-carousel .swiper-wrapper { height: 260px; } } .tt-pc-ghost { position: absolute; font-size: calc(16px + 24vw); font-weight: 600; color: #FFF; opacity: .02; line-height: 1; z-index: -1; } .tt-pc-ghost span { display: block; } /* Portfolio carousel item =========================== */ .tt-portfolio-carousel-item { position: relative; display: flex; line-height: 0; } @media (min-width: 1025px) { .tt-portfolio-carousel-item { margin-left: 7vw; margin-right: 7vw; } } .tt-pci-image-wrap { position: relative; width: 100%; z-index: 2; overflow: hidden; } .tt-pci-image, .tt-portfolio-carousel-item .tt-pci-video { position: relative; } video.tt-pci-video { width: 100%; height: 100%; object-fit: cover; } @media (min-width: 1025px) { .tt-pci-image, .tt-portfolio-carousel-item .tt-pci-video { height: 30vw; } .tt-pci-image { width: auto; } .tt-portfolio-carousel-item .tt-pci-video { width: 48vw; } } @media (max-width: 1024px) { .tt-pci-image, .tt-portfolio-carousel-item .tt-pci-video { width: 100%; height: 60vw; object-fit: cover; object-position: 50% 50%; } } /* Portfolio carousel item hover ================================= */ @media (min-width: 1025px) { .pci-hover .tt-slide-active .tt-portfolio-carousel-item .tt-pci-image-wrap, .pci-hover .tt-slide-active .tt-portfolio-carousel-item .tt-pci-caption-front { clip-path: inset(0 0 0 0); transition: all 0.8s cubic-bezier(0.07, 0.72, 0.29, 0.96); } .pci-hover .tt-slide-active .tt-portfolio-carousel-item:hover .tt-pci-image-wrap, .pci-hover .tt-slide-active .tt-portfolio-carousel-item:hover .tt-pci-caption-front { clip-path: inset(3% 3% 3% 3%); } .pci-hover .tt-slide-active-start .tt-portfolio-carousel-item:hover .tt-pci-image-wrap, .pci-hover .tt-slide-active-start .tt-portfolio-carousel-item:hover .tt-pci-caption-front { clip-path: inset(0 0 0 0); } .pci-hover .tt-pci-image { transition: all 1s cubic-bezier(0.07, 0.72, 0.29, 0.96); } .pci-hover .tt-portfolio-carousel-item:hover .tt-pci-image { transform: scale(1.05); } } /* Slide disabled (for non active slides) ================== */ .tt-portfolio-carousel-item { transition: all 0.5s ease-in-out; } .swiper-slide.tt-pcs-disabled .tt-portfolio-carousel-item { cursor: auto; pointer-events: none; opacity: .3; transform: scale(0.9); } /* Portfolio carousel item caption =================================== */ .tt-pci-caption { position: absolute; top: 50%; width: 100%; } .tt-pci-caption-inner { position: relative; } .tt-pci-title { margin: 0; font-size: calc(16px + 3.2vw); font-weight: bold; font-weight: 500; color: #FFF; line-height: 1.2; } .tt-pci-categories { position: relative; margin-top: 30px; } .tt-pci-category { position: relative; display: inline-block; font-size: calc(13px + 0.1vw); color: #FFF; line-height: 1.2; } .tt-pci-category ~ .tt-pci-category { margin-left: -4px; } .tt-pci-category ~ .tt-pci-category:not(:empty)::before { content: ", "; } .tt-pci-category ~ .tt-pci-category ~ .tt-pci-category ~ .tt-pci-category { visibility: hidden; width: 0; } .tt-pci-category ~ .tt-pci-category ~ .tt-pci-category ~ .tt-pci-category ~ .tt-pci-category { display: none; } .tt-pci-category + .tt-pci-category + .tt-pci-category + .tt-pci-category::before { content: "..."; margin-left: 5px; visibility: visible; } @media (min-width: 1025px) { .tt-pci-caption { left: 0; transform: translate3d(-100px, -50%, 0); } .tt-pci-caption-front { position: absolute; top: 0; left: -1px; right: 0; bottom: 0; width: 100%; height: 100%; z-index: 3; overflow: hidden; } .tt-pci-caption-back { left: -1px; z-index: 1; } } @media (max-width: 1024px) { .tt-pci-caption { top: 40%; left: 5%; right: 5%; padding-left: 15px; padding-right: 15px; } .tt-pci-caption-back { display: none; } .tt-pci-caption-front { z-index: 9; } } /* Portfolio carousel caption animation ======================================== */ .swiper-slide .tt-pci-caption-inner, .swiper-slide .tt-pci-categories { opacity: 0; visibility: hidden; transition: 1s cubic-bezier(0.22, 0.61, 0.36, 1); } .swiper-slide.swiper-slide-prev .tt-pci-caption-inner, .swiper-slide.swiper-slide-next .tt-pci-caption-inner, .swiper-slide.swiper-slide-prev .tt-pci-categories, .swiper-slide.swiper-slide-next .tt-pci-categories { transition: all 0.3s ease-out; } .swiper-slide.swiper-slide-active .tt-pci-caption-inner, .swiper-slide.swiper-slide-active .tt-pci-categories { opacity: 1; visibility: visible; transform: translate3d(0, 0, 0); } /* Offset */ .swiper-slide.swiper-slide-prev .tt-pci-caption-inner { transform: translate3d(-100px, 0, 0) skewX(10deg); } .swiper-slide.swiper-slide-next .tt-pci-caption-inner { transform: translate3d(100px, 0, 0) skewX(-10deg); } .swiper-slide.swiper-slide-prev .tt-pci-categories { transform: translate3d(-30px, 0, 0); } .swiper-slide.swiper-slide-next .tt-pci-categories { transform: translate3d(30px, 0, 0); } /* Delay */ .swiper-slide.swiper-slide-active .tt-pci-caption-inner { transition-delay: 0.6s; } .swiper-slide.swiper-slide-active .tt-pci-categories { transition-delay: 0.7s; } /* Portfolio carousel caption position ======================================= */ /* Position center */ @media (min-width: 1025px) { .pci-caption-center .swiper-slide.tt-slide-active .tt-pci-caption-front { width: auto; margin-left: -10vw; margin-right: -10vw; pointer-events: none; } } .pci-caption-center .tt-pci-caption-front { overflow: visible; } .pci-caption-center .tt-pci-caption { top: 50%; left: 50%; padding: 0 5%; text-align: center; transform: translate3d(-50%, -50%, 0); } .pci-caption-center .tt-pci-title { font-weight: 600; } .pci-caption-center .tt-pci-caption-back { display: none !important; } /* Portfolio carousel caption styles ===================================== */ /* Style stroke */ @media (min-width: 1025px) { .pci-caption-stroke.pci-caption-center .tt-pci-caption-front .tt-pci-title, .pci-caption-stroke .tt-pci-caption-back .tt-pci-title { -webkit-text-stroke-width: 1px; -webkit-text-stroke-color: #FFF; -webkit-text-fill-color: transparent; } .pci-caption-stroke .tt-pci-title { font-weight: bold; font-weight: 700; } .pci-caption-stroke.pci-caption-center .tt-pci-caption-front .tt-pci-title, .pci-caption-stroke.pci-caption-center .tt-pci-caption-back .tt-pci-title { -webkit-text-stroke-width: 2px; font-weight: bold; font-weight: 800; } /* If Firefox */ body.is-firefox .pci-caption-stroke.pci-caption-center .tt-pci-caption-front .tt-pci-title, body.is-firefox .pci-caption-stroke .tt-pci-caption-back .tt-pci-title { -webkit-text-stroke-width: 2px; } } /* If item background image is light */ @media (min-width: 1025px) { .pci-image-is-light .tt-pci-caption-front .tt-pci-title { color: #111; } .pci-image-is-light .tt-pci-caption-front .tt-pci-category { color: #111; } .pci-image-is-light .tt-pci-image-wrap[class*="cover-opacity-"]::before { display: none !important; } } /* Portfolio carousel navigation ================================= */ .tt-pc-navigation { position: absolute; display: flex; justify-content: center; align-items: center; bottom: 4%; left: 50%; width: 300px; height: 60px; z-index: 1; transform: translate3d(-50%, 0, 0); } @media (max-width: 767px) { .tt-pc-navigation { width: 90%; } } .tt-pc-nav-prev, .tt-pc-nav-next { position: absolute; top: 0; z-index: 20; } .tt-pc-nav-prev { left: 0; } .tt-pc-nav-next { right: 0; } .tt-pc-arrow { position: relative; display: flex; justify-content: center; align-items: center; width: 60px; height: 60px; font-size: 18px; color: #FFF; cursor: pointer; outline: none; } .tt-pc-arrow-prev::after, .tt-pc-arrow-next::after { line-height: 0; font-family: "boxicons"; font-weight: 900; display: inline-block; font-style: normal; font-variant: normal; text-rendering: auto; -webkit-font-smoothing: antialiased; } .tt-pc-arrow-prev::after { content: "\ed38"; } .tt-pc-arrow-next::after { content: "\ed3b"; } .tt-pc-arrow.tt-pc-arrow-disabled { cursor: auto; pointer-events: none; } .tt-portfolio-carousel .swiper-button-lock { display: none; } /* Portfolio carousel pagination ================================= */ .tt-pc-pagination {} .tt-portfolio-carousel .swiper-pagination-lock { display: none; } /* Portfolio carousel pagination bullets */ .tt-pc-pagination-bullets { font-size: 0; } .tt-pc-pagination-bullets .swiper-pagination-bullet { display: inline-block; width: 10px; height: 10px; background-color: transparent; margin: 8px; opacity: 1; border-radius: 100%; border: 2px solid #fff; } .tt-pc-pagination-bullets .swiper-pagination-bullet-active { background: #FFF; opacity: 1; } /* Portfolio carousel pagination dynamic bullets */ .tt-pc-pagination-bullets-dynamic { position: absolute; left: 50%; transform: translate3d(-50%, 0, 0); white-space: nowrap; overflow: hidden; font-size: 0; } .tt-pc-pagination-bullets-dynamic .swiper-pagination-bullet { transform: scale(.33); position: relative; transition: .2s transform, .2s left; } .tt-pc-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev { transform: scale(.66); } .tt-pc-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev-prev { transform: scale(.33); } .tt-pc-pagination-bullets-dynamic .swiper-pagination-bullet-active-next { transform: scale(.66); } .tt-pc-pagination-bullets-dynamic .swiper-pagination-bullet-active-next-next { transform: scale(.33); } .tt-pc-pagination-bullets-dynamic .swiper-pagination-bullet-active-main { transform: scale(1); } /* Portfolio carousel pagination fraction */ .tt-pc-pagination-fraction { position: relative; font-size: 14px; font-weight: 600; color: #FFF; line-height: 1; } .tt-pc-pagination-fraction .swiper-pagination-current { position: relative; top: -4px; } .tt-pc-pagination-fraction .swiper-pagination-total { position: relative; bottom: -4px; } /* Portfolio carousel pagination progressbar */ .tt-pc-pagination-progressbar { position: absolute; left: 70px; right: 70px; width: auto; max-width: 100%; height: 2px; background-color: rgba(255, 255, 255, 0.3); } .tt-pc-pagination-progressbar .swiper-pagination-progressbar-fill { position: absolute; left: 0; top: 0; width: 100%; height: 100%; background-color: #FFF; transform: scale(0); transform-origin: left top; } /* ------------------------------------------------------------- * * content-carousel 分块滚动 /* ------------------------------------------------------------- */ .tt-content-carousel { position: relative; } .tt-content-carousel .swiper-wrapper {} .tt-content-carousel-item { position: relative; display: block; overflow: hidden; line-height: 1; } @media (min-width: 1025px) { .tt-content-carousel .swiper-slide { height: 100%; width: auto; } .tt-content-carousel-item { margin-left: 4vw; margin-right: 4vw; } .product .tt-content-carousel-item, .tt-list-carousel .tt-content-carousel-item { margin-left: 0; margin-right: 0; } .tt-content-carousel .tt-cc-image, .tt-list-carousel .tt-cc-image, .tt-content-carousel .swiper-slide .tt-cc-video { position: relative; width: 100%; height: 28vw; width: auto; } .product .tt-content-carousel .tt-cc-image { height: 380px; } .tt-list-carousel .tt-cc-image { height: 260px; } .product .tt-content-carousel .tt-cc-image, .tt-list-carousel .tt-cc-image { object-fit: cover; object-position: 50% 50%; } } @media (max-width: 1024px) { .tt-content-carousel-item { margin-left: 2vw; margin-right: 2vw; } .product .tt-content-carousel-item, .tt-list-carousel .tt-content-carousel-item { margin-left: 0; margin-right: 0; } .tt-content-carousel .tt-cc-image, .tt-content-carousel .swiper-slide .tt-cc-video { position: relative; width: 100%; height: 60vw; object-fit: cover; object-position: 50% 50%; } .product .tt-content-carousel .tt-cc-image { height: 300px; } .tt-list-carousel .tt-cc-image { height: 200px; } } @media (max-width: 540px) { .tt-list-carousel .tt-cc-image { height: 220px; } } /* Content carousel navigation =============================== */ .tt-cc-nav-prev, .tt-cc-nav-next { position: absolute; top: 50%; z-index: 20; transform: translateY(-50%); } .tt-cc-nav-prev { left: 2%; } .tt-cc-nav-next { right: 2%; } .tt-cc-nav-arrow { position: relative; display: flex; justify-content: center; align-items: center; width: 50px; height: 50px; font-size: 21px; color: #FFF; cursor: pointer; outline: none; } .tt-cc-nav-prev .tt-cc-nav-arrow::after, .tt-cc-nav-next .tt-cc-nav-arrow::after { position: relative; line-height: 0; font-family: "boxicons"; font-weight: 900; display: inline-block; font-style: normal; font-variant: normal; text-rendering: auto; -webkit-font-smoothing: antialiased; } .tt-cc-nav-prev .tt-cc-nav-arrow::after { content: "\ed38"; } .tt-cc-nav-next .tt-cc-nav-arrow::after { content: "\ed3b"; } .tt-cc-nav-prev.tt-cc-nav-arrow-disabled .tt-cc-nav-arrow, .tt-cc-nav-next.tt-cc-nav-arrow-disabled .tt-cc-nav-arrow { opacity: .3; cursor: auto; pointer-events: none; } /* Hide content carousel navigation*/ .tt-content-carousel.cc-hide-navigation .tt-cc-nav-prev, .tt-content-carousel.cc-hide-navigation .tt-cc-nav-next { display: none !important; } /* Content carousel pagination =============================== */ .tt-cc-pagination, .tt-li-pagination { position: absolute; display: flex; justify-content: center; align-items: center; bottom: 5%; left: 50%; z-index: 1; transform: translate3d(-50%, 0, 0); } /* Content carousel pagination bllets */ .tt-cc-pagination-bullets, .tt-li-pagination-bullets { font-size: 0; } .tt-cc-pagination-bullets .swiper-pagination-bullet, .tt-li-pagination-bullets .swiper-pagination-bullet { display: inline-block; width: 10px; height: 10px; background-color: transparent; margin: 8px; opacity: 1; border-radius: 100%; border: 2px solid #fff; } .tt-cc-pagination-bullets .swiper-pagination-bullet-active, .tt-li-pagination-bullets .swiper-pagination-bullet-active { background: #FFF; opacity: 1; } /* Content carousel pagination dynamic bullets */ .tt-cc-pagination-bullets-dynamic, .tt-li-pagination-bullets-dynamic { position: absolute; left: 50%; transform: translate3d(-50%, 0, 0); white-space: nowrap; overflow: hidden; font-size: 0; } .tt-cc-pagination-bullets-dynamic .swiper-pagination-bullet, .tt-li-pagination-bullets-dynamic .swiper-pagination-bullet { transform: scale(.33); position: relative; transition: .2s transform, .2s left; } .tt-cc-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev, .tt-li-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev { transform: scale(.66); } .tt-cc-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev-prev, .tt-li-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev-prev { transform: scale(.33); } .tt-cc-pagination-bullets-dynamic .swiper-pagination-bullet-active-next, .tt-li-pagination-bullets-dynamic .swiper-pagination-bullet-active-next { transform: scale(.66); } .tt-cc-pagination-bullets-dynamic .swiper-pagination-bullet-active-next-next, .tt-li-pagination-bullets-dynamic .swiper-pagination-bullet-active-next-next { transform: scale(.33); } .tt-cc-pagination-bullets-dynamic .swiper-pagination-bullet-active-main, .tt-li-pagination-bullets-dynamic .swiper-pagination-bullet-active-main { transform: scale(1); } /* Content carousel pagination fraction */ .tt-cc-pagination-fraction { font-size: 14px; font-weight: 600; color: #FFF; letter-spacing: 2px; } .tt-cc-pagination-fraction .swiper-pagination-current { position: relative; top: -4px; } .tt-cc-pagination-fraction .swiper-pagination-total { position: relative; bottom: -4px; } /* Content carousel pagination progressbar */ .tt-cc-pagination-progressbar { width: 100%; max-width: 200px; height: 2px; background-color: rgba(255, 255, 255, 0.3); } @media (max-width: 768px) { .tt-cc-pagination-progressbar { max-width: 90%; } } .tt-cc-pagination-progressbar .swiper-pagination-progressbar-fill { position: absolute; left: 0; top: 0; width: 100%; height: 100%; background-color: #FFF; transform: scale(0); transform-origin: left top; } /* Content carousel pagination position outside */ .tt-content-carousel.cc-pagination-outside { overflow: visible; margin-bottom: 80px; } .tt-content-carousel.cc-pagination-outside .tt-cc-pagination, .tt-li-pagination { bottom: -55px; } /* Hide content carousel pagination (for desktop only!) */ body:not(.is-mobile) .tt-content-carousel.cc-hide-pagination .tt-cc-pagination { display: none !important; } /* Content carousel shifted style (no effect on small screens!) ================================== */ @media (min-width: 1025px) { .tt-content-carousel.cc-shifted .swiper-slide:nth-child(2n) { padding-top: 7%; } .tt-li-pagination { display: none; } } /* ------------------------------------------------------------- * * Blog interactive /* ------------------------------------------------------------- */ .blog-interactive-item { position: relative; margin-bottom: 100px; } @media (max-width: 1400px) { .blog-interactive-item { padding-left: 3%; padding-right: 3%; } } @media (max-width: 768px) { .blog-interactive-item { padding-left: 0; padding-right: 0; margin-bottom: 20px; } } /* Blog interactive item counter */ .blog-interactive { counter-reset: bi-item-counter; } .blog-interactive-item::before { position: absolute; counter-increment: bi-item-counter; content: ""counter(bi-item-counter, decimal-leading-zero); top: 45%; right: 0; line-height: 1; font-size: clamp(40px, 12vw, 180px); font-weight: normal; color: #FFF; opacity: 0.1; z-index: -1; transform: translateY(-50%); } @media (max-width: 1023px) { .blog-interactive-item::before { font-size: 40px; } } @media (max-width: 767px) { .blog-interactive-item::before { font-size: 16px; top: 10%; } } @media (max-width: 1400px) { .blog-interactive-item::before { right: 3%; } } /* Blog interactive item image */ .bi-item-image { position: relative; display: block; overflow: hidden; } .bi-item-image img { width: 100%; height: 100%; object-fit: cover; } @media (min-width: 769px) { .blog-interactive-item .bi-item-image { display: none; } #ball .bi-item-image { position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: -1; } #ball .bi-item-image::before { position: absolute; display: block; content: ""; top: -1px; left: -1px; bottom: -1px; right: -1px; background-color: #040404; opacity: .2; } } @media (max-width: 768px) { .bi-item-image { display: block; margin-bottom: 30px; padding-bottom: 60%; } .bi-item-image img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; } } /* Blog interactive item categories */ .bi-item-categories { position: relative; display: inline-block; margin-bottom: 15px; font-size: 16px; color: #555; } /* Blog interactive item title */ .bi-item-title { margin-bottom: 30px; font-size: clamp(28px, 3vw, 40px); font-weight: bold; font-weight: 600; color: #FFF; line-height: 1.4; } @media (min-width: 769px) { .blog-interactive-item:not(.bi-item-image-on) .bi-item-title { padding-right: 23%; } } @media (max-width: 768px) { .bi-item-title { margin-bottom: 15px; font-size: 1.3rem } } .bi-item-title a { display: block; color: #FFF; } .blog-interactive-item:not(.bi-item-image-on) .bi-item-title a { color: #FFF; display: inline; background-repeat: no-repeat; background-image: -o-linear-gradient(transparent calc(100% - 1px), currentColor 1px); background-image: linear-gradient(transparent calc(100% - 1px), currentColor 1px); background-image: -ms-linear-gradient(transparent 96%, currentColor 1px); transition: 0.6s cubic-bezier(.215, .61, .355, 1); background-size: 0 96%; } .blog-interactive-item:not(.bi-item-image-on) .bi-item-title a:hover { background-size: 100% 96%; color: #FFF; } @media (min-width: 769px) { .blog-interactive-item.bi-item-image-on .bi-item-title a { padding-right: 23%; } } /* Blog interactive item meta */ .bi-item-meta { font-size: 15px; color: #999; } .bi-item-meta a { position: relative; padding-bottom: 2px; color: #999; } .bi-item-meta a:hover { opacity: .8; } /* Magic cursor behavior */ #magic-cursor.blog-interactive-hover-on { z-index: -1; } #magic-cursor.blog-interactive-hover-on #ball { overflow: hidden; border: none !important; } /* Blog interactive item styles ================================ */ /* Borders */ .blog-interactive.bi-borders .blog-interactive-item { border-bottom: 1px solid rgb(144 144 144 / 35%); padding-bottom: 20px } @media (min-width: 769px) { .blog-interactive.bi-borders .blog-interactive-item { margin: 0; padding-top: 60px; padding-bottom: 60px; } } /* ------------------------------------------------------------- * * 案例元素视差 /* ------------------------------------------------------------- */ .tt-gallery { position: relative; } /* tt-Gallery item =================== */ .tt-gallery-item { position: relative; display: block; overflow: hidden; z-index: 1; } .tt-gallery-image { position: relative; } .tt-gallery-image img { position: absolute; top: 0; left: 0; right: 0; bottom: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; } /* Image parallax and hover zoom pseudo wraps (added by .js) */ .tt-grid:not(.ttgr-not-cropped) .tt-gallery-image .anim-image-parallax-wrap, .tt-grid:not(.ttgr-not-cropped) .tt-gallery-image .anim-image-parallax-inner, .tt-grid:not(.ttgr-not-cropped) .tt-gallery-image .tt-gallery-image-hover-zoom, .tt-grid .tt-gallery-video-wrap .anim-image-parallax-wrap, .tt-grid .tt-gallery-video-wrap .anim-image-parallax-inner, .tt-grid .tt-gallery-video-wrap .tt-gallery-image-hover-zoom { position: absolute; top: 0; left: 0; right: 0; bottom: 0; width: 100%; height: 100%; } .anim-zoomin-wrap, .tt-gallery-image-wrap, .tt-gallery-image, .tt-gallery-image-hover-zoom { height: 100%; } /* tt-Gallery video */ .tt-gallery-video-wrap { position: relative; } .tt-gallery-video-wrap::before { position: absolute; bottom: 15px; right: 20px; font-size: 19px; color: #FFF; z-index: 2; opacity: .3; /* Font Awesome */ content: "\ee8f"; font-family: boxicons; font-weight: 900; display: inline-block; font-style: normal; font-variant: normal; text-rendering: auto; -webkit-font-smoothing: antialiased; } .tt-gallery-video { position: absolute; top: 0; left: 0; right: 0; bottom: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; } /* tt-Gallery item hover ========================= */ @media (min-width: 768px) { /* Clip path (effect only with gaps) */ .tt-gallery.ttga-hover [class*="ttgr-gap-"]:not(.ttgr-gap-1) .tt-gallery-item-inner { clip-path: inset(0 0 0 0); overflow: hidden; transition: clip-path 0.8s cubic-bezier(0.07, 0.72, 0.29, 0.96); } .tt-gallery.ttga-hover [class*="ttgr-gap-"]:not(.ttgr-gap-1) .tt-gallery-item:hover .tt-gallery-item-inner { clip-path: inset(3% 3% 3% 3%); } /* Image zoom (".tt-gallery-image-hover-zoom" is added by .js) */ .tt-gallery.ttga-hover .tt-gallery-image-hover-zoom { transition: all 1s cubic-bezier(.165, .84, .44, 1); } .tt-gallery.ttga-hover .tt-gallery-item:hover .tt-gallery-image-hover-zoom { transform: scale(1.05); } } /* ------------------------------------------------------------- * * 视差背景 /* ------------------------------------------------------------- */ .tt-image { overflow: hidden; } /* tt-image fixed height */ @media (min-width: 1025px) { .tt-image.tti-fixed-height img { width: 100%; height: 80vh; object-fit: cover; object-position: 50% top; } .aboutbg.tt-image.tti-fixed-height img { height: 700px; } .subabout .aboutbg.tt-image.tti-fixed-height img { height: 500px; } .sistributo-bg .tt-image.tti-fixed-height img { max-height: 75vh; } } @media (max-width: 1024px) { .sistributo-bg .tt-image.tti-fixed-height img { height: 400px; } } @media (max-width: 768px) { .sistributo-bg .tt-image.tti-fixed-height img { height: 300px; } } @media (max-width: 540px) { .subabout .anim-image-parallax { transform: scale(2); transform-origin: 35% 10%; } .subabout .aboutbg.tt-image.tti-fixed-height img { height: 240px; object-fit: contain; object-position: 50% top; } .sistributo-bg .tt-image.tti-fixed-height img { height: auto; } } /* ------------------------------------------------------------- * * 图形 /* ------------------------------------------------------------- */ figure { position: relative; margin: 0; } /* figure image */ figure img { width: 100%; height: auto; } /* figure caption */ figcaption { position: relative; max-width: 600px; padding: 15px; font-size: 14px; font-style: italic; color: #FFF; z-index: 9; opacity: .8; } @media (min-width: 1025px) { figcaption { position: absolute; right: 5%; bottom: 5%; background-color: rgba(0, 0, 0, 0.7); } } figcaption a { border-bottom: 1px dotted; } figcaption a:hover { opacity: .9; } /* -------------------------------------------------------------------- * * 背景视频 * Note: position "relative" or "absolute" required on parent element! /* -------------------------------------------------------------------- */ .tt-bg-video-wrap { position: absolute; top: 0; right: 0; bottom: 0; left: 0; overflow: hidden; } video.tt-bg-video { width: 100%; height: 100%; object-fit: cover; } /* ------------------------------------------------------------- * *翻页 /* ------------------------------------------------------------- */ .tt-pagination { display: flex; padding: 100px 0% 35px; } .tt-pagination .pagination{ width: 100%; margin: 0; } .tt-grid .tt-pagination { padding: 0 4% 35px } .portfolio-list .tt-pagination { padding: 0 0 35px; } .tt-pagin-numbers { display: flex; flex-wrap: wrap; justify-content: center; } .tt-pagin-item, .tt-pagination .page-item .page-link { min-width: 40px; height: 50px; display: flex; justify-content: center; align-items: center; line-height: 1; font-size: 28px; font-weight: bold; color: #FFF; opacity: .4; padding:0 .8rem; margin: 0; background-color: transparent; border: 0; font-family: Baskerville, "Palatino Linotype", Palatino, "Century Schoolbook L", "Times New Roman", "serif"; transition: opacity 0.3s; } .tt-pagin-item:hover, .tt-pagin-item.active, .tt-pagination .page-item:hover .page-link, .tt-pagination .page-item.active .page-link{ opacity: 1; background-color: transparent; } .tt-pagination .page-item.disabled .page-link{ background-color: transparent; } .tt-pagin-prev { margin-right: 3%; } .tt-pagin-prev .tt-pagin-item { font-size: 35px; } .tt-pagin-next { margin-left: 3%; } .tt-pagin-next .tt-pagin-item { font-size: 35px; } .pagination .page-item:first-child{ margin-right: 2rem; } .pagination .page-item:last-child{ margin-left: 2rem; } .tt-pagination .pagination .page-item:first-child .page-link, .tt-pagination .pagination .page-item:last-child .page-link{ position: relative; top:-3px; font-size: 35px; } /* Align center */ .tt-pagination.tt-pagin-center { justify-content: space-between; text-align: center; } @media (max-width: 1024px) { .tt-pagination { padding: 1rem 0 0; } .tt-grid .tt-pagination { padding: 0 1rem 0; } } @media (max-width: 540px) { .tt-pagination.tt-pagin-center { justify-content: center } .tt-pagination, .tt-grid .tt-pagination, .portfolio-list .tt-pagination { padding: 0; } .tt-grid .tt-pagination, .portfolio-list .tt-pagination { margin-bottom: -.5rem } .tt-pagin-numbers { display: none } .tt-pagin-next .tt-pagin-item, .tt-pagin-prev .tt-pagin-item { font-size: 25px; margin: 0 } .tt-pagination .pagination .page-item{ display: none; } .tt-pagination .pagination .page-item:first-child, .tt-pagination .pagination .page-item:last-child{ display: inline-block; } } /* ------------------------------------------------------------- * * 滑动侧边栏 /* ------------------------------------------------------------- */ /* Sliding sidebar */ .tt-sliding-sidebar-wrap { position: relative; z-index: 9999; } .tt-sliding-sidebar { position: fixed; top: 0; left: 0; width: 400px; height: 100vh; z-index: 21; background-color: #aa313d; overflow: hidden; transform: translate3d(-100%, 0, 0); transition: all 0.4s ease-in-out; } @media (max-width: 768px) { .tt-sliding-sidebar { width: 70%; } .tt-sliding-sidebar.productoffer { width: 80%; } } body.tt-sliding-sidebar-open .tt-sliding-sidebar { opacity: 1; visibility: visible; transform: translate3d(0, 0, 0); } .tt-sliding-sidebar-inner { height: 100%; overflow-y: auto; padding: 10% 8%; } body:not(.is-mobile) .tt-sliding-sidebar-inner { width: calc(100% + 17px); margin-right: 17px; } .tt-sliding-sidebar-close { position: fixed; content: ""; top: 0; left: 0; right: 0; width: 100%; height: 100%; background-color: rgb(0 0 0 / 65%); z-index: 20; opacity: 0; visibility: hidden; transition: opacity 0.3s, visibility 0.3s; } body.tt-sliding-sidebar-open .tt-sliding-sidebar-close, .tt-sliding-sidebar-close.cursor-close { opacity: 1; visibility: visible; } @media (max-width: 768px) { .tt-sliding-sidebar-inner { padding-bottom: 25%; } } /* Sliding sidebar trigger =========================== */ .tt-sliding-sidebar-trigger { position: fixed; display: flex; align-items: center; justify-content: center; top: 0; left: 0; width: 40px; height: 100vh; text-align: center; background-color: #111; font-size: 20px; color: #ef3b4c; cursor: pointer; transition: background-color 0.3s, color 0.3s, width 0.3s; } .choicebut{ position: fixed; left: inherit; right:0; top:50%; height: auto; padding: 1.5rem 0; color: #fff; text-align: center; cursor: pointer; width:50px; line-height: 120%; background: #cc2235; border-radius: 15px 0 0 15px; box-shadow: 0 0 15px rgb(0 0 0 / 50%); transform: translateY(-50%); z-index: 10; cursor: pointer; transition: background-color 0.3s, color 0.3s, width 0.3s; } .tt-sliding-sidebar-trigger:hover, .choicebut:hover{ width: 60px; background-color: #000; color: #FFF; } .tt-sliding-sidebar-trigger.choicebut:hover, .choicebut:hover{ background-color: #26274e; } .tt-sliding-sidebar-trigger .tt-ss-icon p, .choicebut p { margin: 0 auto; font-size: 1rem; padding: 0 30%; } .tt-sliding-sidebar-trigger .tt-ss-icon-close { display: none; } /* Sliding sidebar trigger on mobile devices and small screens */ @media (max-width: 768px) { .tt-sliding-sidebar-trigger.casebut { top: auto; left: auto; right: 1.5rem !important; bottom: 1.5rem !important; width: auto !important; height: 45px !important; color: #FFF; border-radius: 100px; z-index: 21; } .tt-sliding-sidebar-trigger.choicebut{ width: 45px; } .tt-sliding-sidebar-trigger.choicebut:hover{ background-color: #cc2235; } body.tt-sliding-sidebar-open .tt-sliding-sidebar-trigger.casebut .tt-ss-icon { display: none; } body.tt-sliding-sidebar-open .tt-sliding-sidebar-trigger.casebut .tt-ss-icon-close { display: block; } .tt-sliding-sidebar-trigger.casebut .tt-ss-icon { height: 100% !important; width: 120px !important; border-radius: 25px 0 0 25px; display: flex; align-items: center; margin-right: -1.5rem; justify-content: center; background-color: #dc3545 !important; } .tt-sliding-sidebar-trigger.choicebut .tt-ss-icon{ background-color: transparent!important; border-radius:0; line-height: 110%; width: 20px !important; } .tt-sliding-sidebar-trigger .tt-ss-icon p { padding: 0; margin: 0 0 0 5px; font-size: .913rem } .tt-sliding-sidebar-trigger .tt-ss-icon-close { float: right; width: 45px; height: 100%; line-height: 48px; border-radius: 50%; font-size: 1.5rem; background-color: #dc3545 !important; } } /* Sliding sidebar position right ================================== */ .tt-ss-right .tt-sliding-sidebar { left: auto; right: 0; transform: translate3d(100%, 0, 0); } .tt-ss-right .tt-sliding-sidebar-trigger { left: auto; right: 0; } .sidebar-widget { margin-bottom: 60px; } /* Sidebar headings */ .sidebar-heading { position: relative; margin-bottom: 40px; font-size: 24px; font-weight: 700; color: #fff; } .sidebar-heading:after { position: absolute; display: block; content: ""; left: 0; bottom: -15px; width: 35px; height: 2px; background-color: rgba(255, 255, 255, .5); } @media (max-width: 768px) { .sidebar-heading { font-size: 20px; } .sidebar-widget { margin-bottom: 40px; } } /* Sidebar search ================== */ .sidebar-search { padding-right: 20px; } .sidebar-search .form-control, .sidebar-search .btn, .brandstyle .form-control, .brandstyle .btn{ border-radius: 0; background-color: transparent; height: calc(1.5em + 1rem + 2px); color: rgba(255, 255, 255, .8); border: 1px solid rgba(255, 255, 255, .8); } .sidebar-search .btn:hover { color: #fff !important; } .sidebar-search .btn::before { display: none; } /* Sidebar categories ====================== */ .sidebar-categories > ul > li { padding: 0; } .sidebar-categories > ul > li > a { display: block; text-decoration: none; font-size: 16px; font-weight: normal; color: rgba(255, 255, 255, .7); line-height: 1; padding: 10px 0px; transition: all 0.2s ease-in-out 0s; } .sidebar-categories > ul > li > a:hover, .sidebar-categories > ul > li.active > a { color: rgba(255, 255, 255, 1); } .sidebar-categories > ul > li.active > a { font-weight: 700; } .sidebar-categories > ul > li > a span { float: right; padding: 0 9px; text-align: center; font-size: 22px; font-weight: normal; color: #CCC; overflow: hidden; z-index: 1; border-radius: 100px; transition: all .2s ease-in-out; } @media (max-width: 768px) { .sidebar-categories > ul > li > a { font-size: 16px; padding: 8px 0px; } .sidebar-categories > ul > li > a span { font-size: 18px; padding-right: 0; } .sidebar-search { padding-right: 10px; } } /* Sidebar tags ================ */ .sidebar-tags-list::after { /* Clear */ content: ""; display: table; clear: both; } .sidebar-tags-list > ul { display: flex; flex-wrap: wrap; list-style: none; padding: 0; margin: 0; } .sidebar-tags-list > ul > li { margin: 3px; } .sidebar-tags-list a { position: relative; display: block; background-color: rgb(255 255 255 / 10%); padding: 2px 10px; font-size: 13px; font-weight: 300; color: rgba(255 255 255 / 80%); overflow: hidden; z-index: 1; border-radius: 50px; transition: all .2s ease-in-out; } .sidebar-tags-list a:hover { background-color: rgb(255 255 255 / 25%); color: rgba(255 255 255 / 100%); } /* ------------------------------------------------------------- * * 特色 /* ------------------------------------------------------------- */ .characteristic { height: 380px; top: -50px; background: url("../images/bg-3.png") right center no-repeat; background-size: contain; position: relative; z-index: 2; overflow: hidden; } .subcharacteristicbox .characteristic { top: 0; } .characteristic .cc-img { width: 120px; height: 120px; margin: 0 auto; margin-bottom: 2rem; position: relative; } .characteristic .cc-img div { transition: .5s; transition-delay: 0.1s; } .characteristic p, .characteristic h4 { transition: .5s; } @media (min-width: 1201px) { .characteristic::before { position: absolute; content: ''; left: 0; top: 0; right: 0; bottom: 0; opacity: 0; transition: .5s; background-image: url(../images/bg-5.png); transform: translateY(-50px); z-index: -1; } .characteristic:hover::before { opacity: 1; background-color: #dc3545; transform: translateY(0px); } .characteristic:hover h4, .characteristic:hover p { color: #fff !important } .characteristic:hover p { opacity: .6; } .characteristic:hover .cc-img div { transform: rotateY(360deg); } } @media (max-width: 1024px) { .characteristic { height: 300px; top: -30px; } .subcharacteristicbox .characteristic { top: 0; } .characteristic .cc-img { width: 100px; height: 100px; } .characteristic .cc-img img { height: 40px; } .characteristic p { padding: 0 1rem } } @media (max-width: 768px) { .characteristic { height: 260px; } .characteristic h4 { font-size: 1.2rem; } .characteristic p { font-size: .913rem; } } @media (max-width: 540px) { .characteristic { height: 200px; border-bottom: 1px solid #f5f5f5 } .characteristic .cc-img { width: 65px; height: 65px; margin-bottom: 1rem } .characteristic .cc-img img { height: 25px; } .characteristic h4 { font-size: 1.1rem; } .characteristic p { font-size: .875rem; margin-bottom: .5rem } } /* ------------------------------------------------------------- * * 关于我们 /* ------------------------------------------------------------- */ .aboutbg, .aboutbox { position: absolute; top: 0; width: 100%; z-index: 10 } .subabout .aboutbg { position: inherit; } .aboutbox { top: 220px; z-index: 10 } .aboutfont { height: 620px; padding: 5rem; line-height: 2.2; font-size: 1.2rem } .aboutfont h1 { margin: 2rem 0 3rem; font-weight: 600; color: #dc3545 } .aboutbox .btn { padding: 1.8rem 0; font-size: 1.2rem } .aboutbox .btn-hover-img, .aboutbox .btn:hover .btn-img { display: none } .aboutbox .btn:hover .btn-hover-img, .aboutbox .btn-img { display: inherit } .aboutbox .btn img { height: 20px; } .sub-aboutfont { height: auto; color: #fff; padding: 3rem 0 0 5rem } .aboutvideo { position: absolute; left: 0; top: 0; bottom: 0; z-index: 100; } .aboutvideo h2 { line-height: 1.6; font-weight: 600; letter-spacing: 5px } .video-one__video-icon { position: relative; display: flex; align-items: center; justify-content: center; width: 100px; height: 100px; line-height: 100px; text-align: center; font-size: 25px; color: #fff; cursor: pointer; background-color: #dc3545; border-radius: 50%; margin: 0 auto; transition: all 0.5s ease; -moz-transition: all 0.5s ease; -webkit-transition: all 0.5s ease; -ms-transition: all 0.5s ease; -o-transition: all 0.5s ease; } .video-one__video-icon:hover { background-color: #fff; color: #dc3545; } .video-one__video-link .ripple, .video-one__video-icon .ripple:before, .video-one__video-icon .ripple:after { position: absolute; top: 50%; left: 50%; width: 100px; height: 100px; transform: translate(-50%, -50%); -ms-box-shadow: 0 0 0 0 rgba(220, 55, 70, 0.6); -o-box-shadow: 0 0 0 0 rgba(220, 55, 70, 0.6); box-shadow: 0 0 0 0 rgba(220, 55, 70, 0.6); -webkit-animation: ripple 3s infinite; animation: ripple 3s infinite; border-radius: 50%; } .video-one__video-icon .ripple:before { -webkit-animation-delay: 0.9s; animation-delay: 0.9s; content: ""; position: absolute; } .video-one__video-icon .ripple:after { -webkit-animation-delay: 0.6s; animation-delay: 0.6s; content: ""; position: absolute; } .animated { -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-fill-mode: both; animation-fill-mode: both; } .animated.infinite { -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; } @-webkit-keyframes ripple { 70% { box-shadow: 0 0 0 40px rgba(220, 55, 70, 0); } 100% { box-shadow: 0 0 0 0 rgba(220, 55, 70, 0); } } @keyframes ripple { 70% { box-shadow: 0 0 0 40px rgba(220, 55, 70, 0); } 100% { box-shadow: 0 0 0 0 rgba(10, 165, 205, 0); } } .modal-video .modal-content { border-radius: 0; box-shadow: 0 0 8px rgb(0 0 0 / 60%); } .modal-video .modal-header { width: 100%; border-bottom: 0; position: absolute; top: -50px; } .modal-video .close { color: #fff; padding: 0; margin: 0 -1rem 0 auto; opacity: 1; } .modal-video .modal-body { padding: 0; } .sub-service { max-width: 1450px; } .sub-service::before { position: absolute; content: ''; left: 0; bottom: 0; top: 20%; right: 0; background-image: url("../images/bg-9.png"); background-repeat: no-repeat; background-position: center; } .process-block .inner-box { position: relative; max-width: 320px; margin: 0 auto; margin-bottom: 30px; padding: 60px 0; transition: .3s; } .process-block .inner-box:hover { transform: translateY(10px); } .process-block .count { position: absolute; top: 0; left: 50%; transform: translateX(-50%); height: 120px; width: 120px; border-radius: 50%; color: #fff; font-size: 30px; font-weight: 400; text-align: center; padding-top: 14px; background-color: #dc3545; } .process-block .content { position: relative; max-width: 320px; border-radius: 50%; box-shadow: 0px 8px 40px 0px rgba(0, 0, 0, 0.1); padding: 60px 20px 53px; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; text-align: center; z-index: 9; background-color: #fff; margin: 0 auto; min-height: 320px; } .process-block .content:before { position: absolute; content: ''; left: 10px; top: 10px; right: 10px; bottom: 10px; border: 1px solid #ddd; border-radius: 50%; } .process-block hr { border-top: 4px solid #9faab3; width: 30px; } .process-block h4 { position: relative; font-size: 26px; font-weight: 700; transition: .5s; } .process-block .text { position: relative; padding: 0 30px; color: #999; line-height: 1.8 } .process-block:nth-child(2) { margin-top: 45px; } @media only screen and (min-width:768px) { .process-block:nth-child(2) .count { top: auto; bottom: 0; padding-top: 64px; } } .process-block.active .content { background-color: #dc3545; } .process-block.active .content:before { border: 9px solid rgb(255 255 255 / 0.20); } .process-block.active hr { border-top: 4px solid #fff; } .process-block.active h4 { color: #fff; } .process-block.active .text { color: #fff; } .process-block.active .count { background: #fff; color: #222; box-shadow: 0px 8px 40px 0px rgba(0, 0, 0, 0.1); } @media (min-width: 1200px) { .about { height: 880px } .subabout { margin: 120px 0; padding: 0; } .subabout { height: 500px } } @media (max-width: 1199px) { .about { margin-bottom: -30px } .aboutbg, .aboutbox { position: relative } .aboutbox { top: -50px; width: auto; } .aboutfont { height: auto; padding: 4rem 4rem 2.5rem; } .aboutbox > .col-12 { padding: 0 !important } .aboutfont h1 { margin: 1.5rem 0 2rem; } .aboutbox .btn { padding: 1.4rem 0; } .aboutvideo h2 { font-size: 1.6rem; } .video-one__video-link .ripple, .video-one__video-icon .ripple:before, .video-one__video-icon .ripple:after, .video-one__video-icon { width: 80px; height: 80px; line-height: 85px; } .subabout { margin: 10px 0; } .process-block .content { padding: 40px inherit } .process-block .text { line-height: 1.5; padding: 0 15px; font-size: .913rem } .sub-aboutfont { padding: 1rem 0 0 0 } .sub-aboutfont h1, .sub-aboutfont h5 { /* text-align: center;*/ color: #fff; } } @media (max-width: 768px) { .aboutfont { padding: 3rem 3rem 1.5rem; line-height: 1.8; font-size: 1.15rem; } .aboutvideo h2 { margin-top: 2rem !important } .process-block h4 { font-size: 22px; } .process-block .text { padding: 0; } .sub-aboutfont { padding: 1rem 0 0 0 } } @media (max-width: 540px) { .about { margin-bottom: 0px } .aboutbox { top: -30px; } .aboutfont { padding: 2rem 2rem .6rem; line-height: 2; font-size: 1.05rem; } .aboutfont h1 { font-size: 1.6rem; margin: .8rem 0 1rem } .aboutfont h5 { font-size: 1.1rem; } .aboutbox .btn { font-size: 1rem; padding: 1rem 0; } .aboutbox .btn img { height: 15px; } .video-one__video-link .ripple, .video-one__video-icon .ripple:before, .video-one__video-icon .ripple:after, .video-one__video-icon { width: 60px; height: 60px; line-height: 65px; } .subabout { margin: 10px 0 20px; } .aboutvideo h2 { margin-top: 1.5rem !important; font-size: 1.2rem; margin-bottom: 0; line-height: 1.4 } .process-block .text { padding: 0 20px; } .process-block:nth-child(2) { margin-top: 0; } .process-block .inner-box { margin-bottom: 0; padding: 20px 0; margin-top: 10px } .sub-adoutimg { margin-bottom: 1.5rem } .sub-aboutfont { padding: 1rem .5rem 0 } .sub-aboutfont h1 { margin-bottom: 2rem } } /* ------------------------------------------------------------- * * 产品中心+新闻 product /* ------------------------------------------------------------- */ .productlist, .newslist { height: 540px; background: #fff; } .newslist { height: 480px; } .productlist-caption, .newslist-caption { background: #fff; width: 100%; padding: 30px 20px 30px 72px; transition: all 0.5s; transform: translateY(0px); position: absolute; } .newslist-caption { padding: 30px 35px } .productlist:hover .productlist-caption { background: #dc3545; transform: translateY(-30px); } .productlist .productlist-caption h3, .newslist-caption h3 { margin-bottom: 15px; line-height: 1.2; position: relative; transition: all 0.5s; } .newslist-caption h3 { line-height: 1.6 } .productlist .productlist-caption h3 a, .newslist-caption h3 a { color: #222222; font-weight: 700; font-size: 24px; display: block; transition: all 0.5s; } .productlist:hover .productlist-caption h3 a { color: #fff; } .productlist .productlist-caption h3::before { position: absolute; content: ""; width: 35px; height: 2px; top: 0; left: -46px; top: 50%; transform: translateY(-50%); background: #dc3545; transition: all 0.5s; } .productlist:hover .productlist-caption h3::before { background: #fff; transition: all 0.5s; } .productlist .productlist-caption .pera1, .productlist .productlist-caption .pera2 { line-height: 1.8; color: #7f7f7f; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; } .productlist .productlist-caption .pera2 { -webkit-line-clamp: 3; } .productlist:hover .productlist-caption .pera2 { display: -webkit-box; } .productlist .productlist-caption .pera2, .productlist:hover .productlist-caption .pera1 { display: none; } .productlist:hover .productlist-caption .pera2 { color: #fff; } .newslist .newslist-caption h3 a { display: inline; } .newslist-caption .more { text-transform: capitalize; color: #dc3545; position: relative; padding-left: 50px; margin-top: 20px } .newslist-caption .more::before { position: absolute; content: ""; width: 35px; height: 2px; left: 0px; top: 50%; transform: translateY(-50%); background: #dc3545; } @media (min-width: 1200px) { .newslist .newslist-caption h3 a { background-repeat: no-repeat; background-image: -o-linear-gradient(transparent calc(100% - 1px), currentColor 1px); background-image: linear-gradient(transparent calc(100% - 1px), currentColor 1px); background-image: -ms-linear-gradient(transparent 96%, currentColor 1px); transition: 0.6s cubic-bezier(.215, .61, .355, 1); background-size: 0 100%; } .newslist:hover .newslist-caption h3 a { color: #dc3545; background-size: 100% 100%; } .newslist-caption .more a { color: #dc3545; } .newslist:hover .newslist-caption .more a { color: #21252c } .newslist:hover .newslist-caption .more::before { background: #21252c; } } .newslist:hover .newslist-img img { transform: scale(1.15); } .pb-nlist { margin-bottom: 2rem } @media (max-width: 1024px) { .productlist { height: 460px; } .newslist { height: 380px; } .newslist-caption h3 { line-height: 1.2 } .newslist-caption p { margin-bottom: .5rem !important } .newslist-caption h3 a { font-size: 20px; } .newslist-caption .more { margin-top: 0; } } @media (max-width: 540px) { .news{ margin-bottom:1.5rem; } .newslist-caption { padding: 25px; } .newslist-caption h3 { line-height: 1 } .pb-nlist { margin-bottom: 1rem; } .subnews .newslist-caption, .subnews .newslist { background: #424a58; } .subnews .iconfont, .subnews .iconfont i { color: rgba(255, 255, 255, .5) !important; } .subnews .newslist .newslist-caption h3 a { color: #fff; } .subnews .newslist-caption .more a { color: rgba(255, 255, 255.7); } } /* ------------------------------------------------------------- * *案例 /* ------------------------------------------------------------- */ .caseslist { height: 650px; margin-bottom: 30px } .caseslist .tt-gallery-image-hover-zoom { height: 650px; } .caseslist.other, .caseslist.other .tt-gallery-image-hover-zoom { height: 400px; } .caseslist .font { width: 100%; height: 100%; position: absolute; left: 15px; bottom: -2rem; z-index: 10; padding: 3rem 6%; opacity: 0; transition: all 0.5s; } .caseslist .font .col-auto:first-child { width: calc(100% - 55px); } .caseslist:hover .font { opacity: 1; bottom: 0 } .caseslist::before { opacity: 0; } .caseslist:hover::before { opacity: 1; } .caseslist a { color: #fff; cursor: pointer; } .caseslist .more { width: 55px; height: 55px; font-size: 2rem; margin-top: 5px; transition: all 0.5s; } .caseslist .more:hover { background: #11141a !important } @media (min-width: 2560px) { .caseslist, .caseslist .tt-gallery-image-hover-zoom { height: 850px; } } @media (max-width: 1200px) { .cases { width: 92%; margin: 0 auto } .caseslist, .caseslist .tt-gallery-image-hover-zoom { height: 280px; } .caseslist .font { padding: 5% } .caseslist .font h3 { font-size: 24px; } .tt-details .cases { width: 100%; } .caseslist.other, .caseslist.other .tt-gallery-image-hover-zoom { height: 300px; } .caseslist.other .font { opacity: 1; bottom: 0 } .caseslist.other::before { opacity: 1; } } @media (max-width: 768px) { .caseslist, .caseslist .tt-gallery-image-hover-zoom { height: 220px; } .caseslist .more { width: 45px; height: 45px; } } @media (max-width: 540px) { .cases { width: 94%; margin-bottom: 1rem } .cases .col-6 { padding-left: 8px; padding-right: 8px; } .caseslist { height: 120px; margin-bottom: 15px } .col-12 .caseslist{ height: 180px; } .caseslist .tt-gallery-image-hover-zoom { height: 120px; } .caseslist .font { padding: 4%; opacity: 1; bottom: 0 } .caseslist .font h3 { font-size: 16px; } .caseslist::before { opacity: 1; } .caseslist .more, .caseslist .font p { display: none } .caseslist .font .col-auto:first-child { width: 100%; } } @media (max-width: 374px) { .caseslist .font h3 { font-size: 14px; } } /* ------------------------------------------------------------- * * 质保 /* ------------------------------------------------------------- */ .warranty { height: 300px; } .warranty h3 { line-height: 2; } .warranty .row { z-index: 10; position: relative } .warranty .bg { position: absolute; left: 0; top: 0; width: 100%; height: 100% } .warranty .bg::before { background: rgba(200, 25, 50, .9) } .warrantyresult { padding: 100px 0; } .warrantyresult h2 { line-height: 1.8; letter-spacing: 3px; } .warrantyresult .table-responsive { margin-left: auto; margin-right: auto; } @media (max-width: 1024px) { .warranty h3 { line-height: 1.8; font-size: 24px } .warranty { height: 250px; } .subwarranty { height: auto; padding: 2rem 0 } .subwarranty p { margin-bottom: .5rem } .warrantyresult .table-responsive { width: 90% !important } } @media (max-width: 768px) { .warranty { height: 200px; } .warranty h3 { line-height: 1.6; font-size: 20px } .subwarranty { height: auto; } .warrantyresult { padding: 60px 0; } .warrantyresult h2 { font-size: 20px } } @media (max-width: 540px) { .warranty h3 { line-height: 1.5; font-size: 16px } .warranty { height: 200px; margin-top: 1rem; } .warranty .btn { font-size: 16px; padding-top: .5rem !important; padding-bottom: .5rem !important; } .warranty .text-white { padding: 10% 6% 1rem; } .warranty .h-100 { height: auto !important } .warranty .svg-icon .mr-2 { margin-left: .5rem !important } .svg-icon .btn-group-lg > .btn svg, .svg-icon .btn-lg svg { height: 1.2rem; width: 1.2rem; } .subwarranty { height: auto; } .subwarranty .text-white { padding: 0 1rem; } .warrantyresult { padding: 30px 0 10px 0; } .warrantyresult h2 { font-size: 20px; letter-spacing: 2px; } .warrantyresult .table-responsive { margin-top: 1rem !important } } /* ------------------------------------------------------------- * * 底部 tt-footer /* ------------------------------------------------------------- */ #tt-footer { color: #bdbdbd; background: #11141a url("../images/bg-7.png") left center no-repeat; background-size: contain } #tt-footer a { color: #bdbdbd; } #tt-footer .tt-footer-info { line-height: 1.8 } #tt-footer .hottel { font-size: 35px; font-family: Constantia, "Lucida Bright", "DejaVu Serif", Georgia, "serif"; font-style: italic } #tt-footer .hottel svg { width: 45px; height: 45px; } #tt-footer .tt-footer-ul { padding-top: 1rem } #tt-footer .tt-footer-ul ul li a { transition: .5s; position: relative; display: inline-block; line-height: 2 } #tt-footer .tt-footer-ul ul li a:hover { padding-left: 24px; } #tt-footer .tt-footer-ul ul li a:after { font-family: boxicons; content: "\ea47"; color: #dc3545; position: absolute; left: 0; top: 4px; line-height: 25px; font-size: 17px; font-weight: 400; transition: .5s; opacity: 0; } #tt-footer .tt-footer-ul ul li a:hover:after { opacity: 1; } #tt-footer .tt-footer-code img { width: 110px; height: 110px; } #tt-footer .copyright { line-height: 60px; } @media (min-width: 1025px) { #tt-footer .tt-footer-info { padding-right: 8%; } #tt-footer .tt-footer-ul { padding-left: 5%; } } @media (max-width: 1024px) { #tt-footer .tt-footer-ul { padding-left: 5%; } #tt-footer .tt-footer-info .mb-4.mt-4 { margin-top: 1rem !important; margin-bottom: 0 !important } } @media (max-width: 540px) { #tt-footer { font-size: .913rem } #tt-footer .tt-footer-info { padding: 1rem 2rem } #tt-footer .tt-footer-code img { width: 90px; height: 90px; } #tt-footer .tt-logo img { max-height: 50px; } #tt-footer .copyright { line-height: 1.5; padding: 1rem } } /* ------------------------------------------------------------- * * 联系方式 contact /* ------------------------------------------------------------- */ .contact { height: 100vh; max-height: 800px } .contact .mapbox { height: 85%; position: relative; } .contact .map { background: #fff; height: 100%; border-radius: 50px; overflow: hidden; } .contact .mapfont { width: 38%; height: 50%; padding: 3rem; background: #fff; border-radius: 30px; position: absolute; color: #7c858c; right: 10%; top: 50%; transform: translateY(-50%); box-shadow: 0px 10px 60px 0px rgb(0, 0, 0, .1); } .contact .mapfont ul li { line-height: 30px; margin-bottom: .5rem } .contact .mapfont ul li i { width: 30px; height: 30px; background: #dc3545; line-height: 30px; text-align: center; color: #fff; border-radius: 50%; } @media (max-width: 1200px) { .contact { height: 80vh; align-items: stretch !important; } .contact .mapbox { height: 90%; } .contact .mapfont { width: 45%; right: 8%; } } @media (max-width:1023px) { .contact, .contact .mapbox { height: 100% } .contact .mapbox { margin-bottom: 40px } .contact .map { background: #424a58; height: 300px; border-radius: 30px 30px 0 0; } #allmap{ border-radius: 30px 30px 0 0; } .contact .mapfont { width: 100%; position: inherit; right: inherit; top: inherit; transform: translateY(0); border-radius: 0 0 30px 30px; padding: 2rem 2.5rem; background: #424a58; } .contact .mapfont h3 { font-size: 1.4rem; } .contact .mapfont h3, .contact .mapfont li, .contact .mapfont a { color: #FFFFFF !important } } @media (max-width:540px) { .contact { height: 100%; margin-bottom: 30px } .contact .mapbox { margin-bottom: 0; } .contact .map { height: 260px; } .contact .mapfont { padding: 1.5rem 2rem; margin-bottom: 0; } .contact .mapfont h3 { font-size: 1.2rem; } .contact .mapfont ul li i { width: 25px; line-height: 25px; height: 25px; margin-right: .5rem !important } .contact .mapfont hr { margin-top: 1rem !important; margin-bottom: 1rem !important } } /* ------------------------------------------------------------- * * 经销商 sistributor /* ------------------------------------------------------------- */ .sistributor { padding-top: 100px; } .sistributor-title { height: 420px; line-height: 2; letter-spacing: 2px } .sistributor-box { height: 100%; } .sistributor-login { width: 38%; position: absolute; z-index: 10; color: #fff; top: -220px; border-radius: 30px; right: 20px; padding: 5rem 4.5rem } .sistributor-login .form-group { margin-bottom: 1.5rem; } .sistributor-login .form-check-input[type=checkbox] { border: 1px solid #111; background-color: #111; } @media (min-width:2560px) { .sistributor-title { height: 500px; } .sistributor-login { top: -300px; } } @media (max-width:1200px) { .sistributor { padding-top: 70px; } .sistributor-title { height: 350px; } .sistributor-title .text-white { margin-bottom: 2rem !important; } .sistributor-login { width: 45%; padding: 3.5rem 3rem } } @media (max-width:1023px) { .sistributor-title { height: 300px; line-height: 1.6 } .sistributor-login { padding: 3rem 3rem; top: -180px; } .sistributor-login h1, .sistributor-title .text-white { font-size: 1.8rem; margin-bottom: 1.5rem !important } .sistributor-login .form-group { margin-bottom: 1rem; } } @media (max-width:540px) { .sistributor-login h1, .sistributor-title .text-white { font-size: 1.5rem; margin-bottom: 1.5rem !important } .sistributor-title { height: auto; margin: 2rem 0; text-align: center; } .sistributor-box { height: 200px } .sistributor-login { top: -200px; right: 5%; width: 90%; border-radius: 20px; padding: 2rem 2.5rem; margin-bottom: 30px; } .sistributor-login .form-control { height: calc(1.5em + 0.75rem + 2px); } } /* ------------------------------------------------------------- * * 详情页 tt-details /* ------------------------------------------------------------- */ .tt-details { background: #fff; } .tt-details #tt-header, .tt-quotation #tt-header { background: rgba(5, 5, 25, 1) } .page-details { padding-top: 140px; } .page-details .content { font-size: 1.2rem; line-height: 220%; } /* .page-details .content > p, .page-details .content > div { text-indent: 2rem; } */ .page-details .content img { max-width: 100%; /* margin-left: -2rem;*/ } .prodinfo { width: 100%; max-width: 1270px; left: 50%; transform: translateX(-50%); height: 80vh; position: absolute; z-index: 100; color: #fff; } .prodinfo ul { background: rgba(0, 0, 0, .4); padding: 1.5rem 3rem; margin-bottom: 0; } .prodinfo li { font-size: 1.1rem; padding: .4rem 0; } .prodinfo-two { background: #f5f5f5; margin: 2rem 0; padding: 2rem; } .prodinfo-two li { float: left; padding: .2rem 0; } @media (max-width:1200px) { .page-details { padding-top: 100px; } .page-details .d-flex.text-muted { margin-bottom: 2rem !important } .page-details .content { margin-bottom: 2rem !important; margin-top: .5rem !important } .prodinfo-two li { width: 50%; } } @media (max-width:768px) { .page-details .h1 { margin: .5rem 0 1rem 0 !important; font-size: 1.8rem; line-height: 1.6 } } @media (max-width:540px) { .page-details { padding-top: 80px; } .page-details .d-flex.text-muted { margin-bottom: 1.5rem !important; font-size: .913rem; } .page-details .content { margin-bottom: 1rem !important; margin-top: 0 !important } .page-details .h1 { margin: 0 0 1rem 0 !important; font-size: 1.5rem; line-height: 1.5 } .page-details .content { font-size: 1.1rem; line-height: 1.8; } .prodinfo-two { margin: 1rem 0; } .prodinfo-two li { width: 100%; } } /* ------------------------------------------------------------- * * 报价 quotation /* ------------------------------------------------------------- */ /*.tt-quotation{*/ /* background: #08071f;*/ /*}*/ .page-quotation{ background: url("../images/bg-12.png") bottom center no-repeat; background-size: cover; padding: 150px 0 80px; } .q-price{ height: 105px; background: rgba(22,22,80,.8); border: 1px solid rgba(22,22,80,.8); position: relative; cursor: pointer; margin-top: 1.5rem; font-size: 1.1rem; transition: 0.5s all; } @media (min-width:1200px) { .q-price:hover{ background: rgba(20,55,125,.8); border: 1px solid #3b5a91; } } .q-price.active{ background: rgba(50,36,120,.8); border: 1px solid #4c4fa7; } .q-price .image{ width: 40%; text-align: center } .q-price img{ max-height: 80px; max-width: inherit; } .q-price::before, .q-price::after, .title-price::before, .title-price::after{ content: ''; position: absolute; width: 30px; height: 30px; background: url("../images/bg-13.png") left top no-repeat; } .title-price::before, .title-price::after{ background: url("../images/bg-14.png") no-repeat; } .q-price::before, .title-price::before{ left:0; top:0 } .q-price::after, .title-price::after{ right:0; bottom:0; -moz-transform:rotate(180deg); -webkit-transform:rotate(180deg); } .title-price{ width: 280px; height: 60px; line-height: 60px; background: rgba(190,45,60,.9); position: relative; color: #fff; text-align: center; font-size: 20px; margin: 1rem auto 0; box-shadow: 0 0 15px rgb(0 0 0 / 50%); } #car { position: relative; width: 408px; margin: 0 auto; } #car .car-part { position: absolute; top: 0; bottom: 0; left: 0; right: 0; z-index: 8; } #car #zhengche { position: absolute; top: 0; bottom: 0; left: 0; right: 0; } #car .car-part-whole{ position: inherit; } #car .car-part-whole img{ width: 100%; } #car .car-part img{ width: 100%; } @media (max-width:1200px) { .page-quotation { padding: 100px 0 60px; } .title-price{ width: calc(100% - 24px); margin-top: 2rem } .page-quotation .col-xl-4.mt-5{ margin-top: 0!important } } @media (max-width:540px) { .page-quotation { padding: 60px 0 40px; background-position: 25% } .page-quotation .h2{ font-size: 1.5rem; padding: 0 1.4rem; } .q-price{ margin: 0 0 1rem 0; height: 80px; background: rgba(22,22,80,.9); } .q-price img { max-height: 60px; } .title-price-mob{ width: 100%; height: 55px; line-height: 55px; background: rgba(190,45,60,1); color: #fff; text-align: center; position:fixed; bottom:0; background: rgba(190,45,60,1); margin: 0; font-size: 1.1rem; box-shadow: 0 0 15px rgb(0 0 0 / 50%); z-index: 10; } .choicebut{ font-size: .913rem; top:55%; } } /*侧栏分类*/ .slinky-menu { overflow: hidden; padding-bottom: 50px; padding-right: 20px; transform: translateZ(0); transition: all 300ms ease; -webkit-transform: translateZ(0); -webkit-transition: all 300ms ease; } .slinky-menu > ul { left: 0; position: relative; transform: translateZ(0); transition: all 300ms ease; -webkit-transform: translateZ(0); -webkit-transition: all 300ms ease; } .slinky-menu li ul { display: none; left: 100%; position: absolute; top: 0; width: 100%; } .slinky-menu h2 { font-weight: 500; color: #fff; font-size: 1.5rem; } .slinky-menu h5 { text-transform: uppercase; font-weight: 500; color: #fff; font-size: 1.05rem; text-align: right; line-height: 3.5rem; margin-bottom: 0 !important } .slinky-menu hr { border-bottom: 1px solid rgb(255 255 255 / 20%); } .slinky-menu ul li > a { display: block; outline: none; color: rgba(255, 255, 255, .7); font-size: 1.05rem; padding: 0.5rem 0; } .slinky-menu ul li > a:hover { color: rgba(255, 255, 255, 1.00); } .slinky-menu ul li.subslinky a { font-size: 1.2rem; margin-top: .5rem; color: rgba(255, 255, 255, 1.00); } .slinky-menu ul li .next::after, .slinky-menu ul li > .next::before { font-family: boxicons !important; font-weight: 400; } .slinky-menu ul li > .next::before { display: inline-block; content: "- "; margin-right: .5rem } .slinky-menu ul li .next::after { content: "\ea50"; margin-left: 1rem; float: right; } .slinky-menu .back { position: absolute; width: auto; display: block; outline: none; color: #fff; text-transform: uppercase; font-weight: 500; line-height: 100%; top: .5rem; } .slinky-menu .back::before { font-family: boxicons !important; font-weight: 400; content: '\ea4d'; font-size: 1.5rem; position: relative; top: .3rem } .slinky-menu .back:hover { color: #fff; } .slinky-menu .brandimg { height: 70px; padding: 0 0 1rem; border-bottom: 1px solid rgb(255 255 255 / 20%) } .slinky-menu .brandimg > div:first-child { width: 70px; margin-right: 1.5rem; text-align: center; } .slinky-menu .brandimg img { width: auto; height: auto; max-width: 70px; max-height: 50px; } .slinky-menu ul li ul .next::before, .slinky-menu ul li ul .next::after { display: none } .slinky-menu .brandlist { background: rgb(255 255 255 / 10%); margin-top: 1rem; line-height: 50px; padding: 0 1.5rem; } .slinky-menu .input-group { margin: .5rem 0; } .slinky-menu .input-group input { border-radius: 0; } @media (max-width:1201px) { .slinky-menu { padding-right: 0; } .quoted { min-height: 50vh; } .tt-sliding-sidebar-trigger-other { padding: 0 0 0.2rem; height: 3rem; line-height: 2.5rem; } } @media (max-width: 561px) { .tt-sliding-sidebar-trigger-other { height: 2.5rem; line-height: 2rem; font-size: 1rem } .quoted .quoted-logo img { height: 80px; } .quoted .tt-heading .tt-heading-title { padding: 0 6%; line-height: 150%; } .quoted-btn { height: 2.8rem; line-height: 2.4rem; padding: 0; } .ui-content .basicinfo { margin-top: 20px; padding-bottom: 20px; } .table h4 { font-size: 1.2rem } .table h5 { font-size: 1rem } .slinky-menu h2 { font-size: 1.2rem } .slinky-menu hr { margin: .7rem 0 !important } .slinky-menu h5 { line-height: 2.5rem; } .slinky-menu .back { top: .2rem; left: -.5rem } .slinky-menu ul li.subslinky a { font-size: 1.05rem; } .slinky-menu ul li > a { font-size: 1rem; padding: 0.3rem 0; } .slinky-menu .brandimg { height: 60px; padding-bottom: .5rem; } .slinky-menu .brandimg > div:first-child { width: 60px; } .slinky-menu .brandimg img { max-width: 60px; max-height: 45px; } .slinky-menu .brandlist { padding: 0 1rem; line-height: 45px; } }