.pic i { font-size: 20px; color: #2d74ba; } .navigation>a { flex: 1; } .navigation>.menu-button-right { flex: 2; } .whatsapp{ width: 24px; } .whatsapp1{ width: 30px; } .vs--disabled.v-select:not(.vs-open) .vs__dropdown-toggle { background: #ccc !important; } .vs--disabled .vs__clear, .vs--disabled .vs__dropdown-toggle, .vs--disabled .vs__open-indicator, .vs--disabled .vs__search, .vs--disabled .vs__selected { background-color: #ccc !important; } .homesechbtn{ padding: 24px 32px; } .vs__actions .vs__clear { padding: 0px 6px; } .vs__actions { padding: 4px 10px 0 3px !important; } .v-select:not(.vs-open) .vs__dropdown-toggle { padding: 0 0 0 10px !important; } .txt-block span { align-items: center; } .slick-slide img { height: 100%; width: auto; } #rental-slider,.rental-slide{ height: 480px; } .vehicle-card .title { font-size: 24px !important; display: -webkit-box; -webkit-line-clamp: 2; /* 限制显示行数 */ -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; min-height: 58px; } .breadcrumbs{ padding: clamp(21px, 1.667vw, 40px); background: #ecf3f9; font-weight: bold; color: #787878; } .breadcrumbs .txt-block{ display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; } .txt-block span{ gap: 1rem; display: inline-flex; padding: 0px 1px; } .as-nav-slider { margin: 24px 50px 0px !important; } .vehica-car-card__info .cus-btn{ height: 30px; padding: 0 11px; margin-right: 10px; border: 1px solid #f44336; background: #f44336; } .vehicle-card:hover .cus-btn { color: #f44336 !important; background: white; } .vehicle-card:hover .cus-btn span { color: #f44336; } .vehicle-card .cus-btn span:first-child { padding-bottom: 4px; } .detailsbtn{ display: flex; justify-content: space-around; gap: 20px; } .detailsbtn a{ flex: 1; } .seach .rowbg .row{ padding-left: 0px; } .ml0{ margin-left: 0px; } @media (max-width:576px) { .breadcrumbs{ padding: clamp(10px, 1.667vw, 40px); background: #ecf3f9; font-weight: bold; color: #787878; } .details .slider-arrows { top: 28% !important; } #rental-slider,.rental-slide{ height: 240px; } .as-nav-slider { margin: 24px 10px 0px !important; } .tag{ margin-left: 10px !important; } .toppic_content{ display: none !important; } .homesechbtn{ padding: 18px 32px; width: 100%; } .col-sm { flex: 1 0 0% } .row-cols-sm-auto>* { flex: 0 0 auto; width: auto } .row-cols-sm-1>* { flex: 0 0 auto; width: 100% } .row-cols-sm-2>* { flex: 0 0 auto; width: 50% } .row-cols-sm-3>* { flex: 0 0 auto; width: 33.3333333333% } .row-cols-sm-4>* { flex: 0 0 auto; width: 25% } .row-cols-sm-5>* { flex: 0 0 auto; width: 20% } .row-cols-sm-6>* { flex: 0 0 auto; width: 16.6666666667% } .col-sm-auto { flex: 0 0 auto; width: auto } .col-sm-1 { flex: 0 0 auto; width: 8.33333333% } .col-sm-2 { flex: 0 0 auto; width: 16.66666667% } .col-sm-3 { flex: 0 0 auto; width: 25% } .col-sm-4 { flex: 0 0 auto; width: 33.33333333% } .col-sm-5 { flex: 0 0 auto; width: 41.66666667% } .col-sm-6 { flex: 0 0 auto; width: 50% } .col-sm-7 { flex: 0 0 auto; width: 58.33333333% } .col-sm-8 { flex: 0 0 auto; width: 66.66666667% } .col-sm-9 { flex: 0 0 auto; width: 75% } .col-sm-10 { flex: 0 0 auto; width: 83.33333333% } .col-sm-11 { flex: 0 0 auto; width: 91.66666667% } .col-sm-12 { flex: 0 0 auto; width: 100% } .g-sm-0, .gx-sm-0 { --bs-gutter-x: 0 } .g-sm-0, .gy-sm-0 { --bs-gutter-y: 0 } .g-sm-1, .gx-sm-1 { --bs-gutter-x: 0.25rem } .g-sm-1, .gy-sm-1 { --bs-gutter-y: 0.25rem } .g-sm-2, .gx-sm-2 { --bs-gutter-x: 0.5rem } .g-sm-2, .gy-sm-2 { --bs-gutter-y: 0.5rem } .g-sm-3, .gx-sm-3 { --bs-gutter-x: 1rem } .g-sm-3, .gy-sm-3 { --bs-gutter-y: 1rem } .g-sm-4, .gx-sm-4 { --bs-gutter-x: 1.5rem } .g-sm-4, .gy-sm-4 { --bs-gutter-y: 1.5rem } .g-sm-5, .gx-sm-5 { --bs-gutter-x: 3rem } .g-sm-5, .gy-sm-5 { --bs-gutter-y: 3rem } } @media (max-width: 765px) { .hero-banner .seach img{ display: none; } .hero-banner .homesech{ min-height: 230px !important; } .seach .rowbg { top: 0px !important; width: 100% !important; justify-content: center; } .seach .rowbg .row { padding: 0px; } .hero-banner .seach{ min-height: 320px; } .find .input-type { height: 40px !important; } #privacy-content{ padding: 0px 5% !important; } } #privacy-content{ padding: 0px 20%; } @media (max-width: 1200px) { #menu-main>li.has_lv3>.sub-menu{ width: auto !important; padding: 0px !important; } .flex-layout{ max-height: 200px; overflow-y: scroll; } .navnone{ display: none !important; } } @media (max-width: 767px) { .txt .slider-arrows{ justify-content: space-between; } .cus-btns1{ width: 100%; } .mb-24 { margin-bottom: 10px !important; } .vs__selected-options { max-height: 40px !important; } .v-select:not(.vs-open) input{ min-height: 40px; } } .spinner { width: 35px; height: 34px; border-radius: 50%; color:none; background:none; background-repeat: no-repeat; animation: spinner-mu2ebf 1s infinite linear; position: relative; } @keyframes spinner-mu2ebf { to { transform: rotate(1turn); } } .header .navigation .menu-button-right .main-menu__nav .main-menu__list > li > a{ font-size: clamp(20px, 0.938vw, 30px); font-family: "metropolis"; } .header .navigation .menu-button-right .main-menu__nav .main-menu__list li ul li > a, .header .navigation .menu-button-right .main-menu__nav .stricky-header .main-menu__list li ul li > a { font-size: clamp(16px, 0.833vw, 28px); font-family: "metropolis"; } .clears{ display: flex; align-content: right; align-items: center; justify-content: right; } .container-fluid .input-group input { border: 0px; width: 100%; padding: 14px 10px; /* padding: clamp(14px, 1.042vw, 30px) clamp(16px, 1.25vw, 30px); */ border-radius: 12px; background: white; color: #2f3b48; font-size: 14px; } .wrapper-dropdown{ padding: 15px 24px !important; } .seach{ position: relative; /* background-image: url(../media/hero/hero-group.jpg); background-position: bottom left; background-repeat: no-repeat; background-size: cover; display: flex; align-items: center; min-height: 450px; */ } .seach .rowbg { display: flex; align-items: center; padding-top:24px; border-radius: 8px; background-color: #ecf3f9; justify-content: center; /* position: absolute; */ /* top: 33%; */ margin: 0px; /* width: 90%; */ } .wrapper-dropdown .selected-display { white-space: nowrap; overflow: hidden; width: 78%; } .vehica-car-card__separator { margin: 10px 0 18px 0; background: #fff; height: 1px; } .vehica-car-card__info { display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; min-height: 60px; } .vehica-car-card__info__single { display: inline-block; border-radius: 5px; font-size: 14px; font-weight: 500; color: #99a1b2; margin-right: 20px; line-height: 28px; } .vehica-car-card__info__single:first-child { padding: 0 11px; color: #fff; background: #ff4605; } .textarea{ width: 100%; min-height: 200px; border: none; border-radius: 10px; padding: 15px 24px; } .main-menu__right .pic{ display: flex; align-items: center; } .main-menu__right .pic i { font-size: 18px; color: #2d74ba; margin-right: 8px; } /* 搜索页 */ .clearbtn{ cursor: pointer; } .clearbtn:hover{ color: red; } .navs{ background: #ecf3f9; } .txtblock{ padding: 15px 0px; } .vehica-breadcrumbs__last{ color: #2d74ba; } .text-r{ text-align: right; } .text-c{ text-align: center; } .al-c{ align-items: center; } .find .input-type{ display: flex; gap: 11px; align-items: center; padding: 0px 24px; border-radius: 10px; background-color: #ffffff; position: relative; height: 52px; text-align: center; } .find .input-type input { background: transparent; width: 100%; border: none; padding: 0; font-size: 14px; color: #2f3b48; } input:focus { outline: none; box-shadow: 0 0 0 2px #fff; border-color: transparent; /* 可选,移除原始边框颜色 */ } .pagination #border-pagination li button { display: flex; align-items: center; justify-content: center; text-decoration: none; color: #2d74ba; width: clamp(36px, 2.448vw, 60px); height: clamp(36px, 2.448vw, 60px); border-radius: 4px; border: 1px solid #2d74ba; background: white; float: left; transition: all 0.5s ease-in-out; font-family: "metropolis"; font-size: clamp(16px, 0.938vw, 32px); font-style: normal; font-weight: 500; line-height: 150%; } /* 详情页 */ .img-box{ position: relative; } .tag{ font-size: 20px; font-weight: bold; /* background-color: rgb(45 116 186 / 50%); */ background: linear-gradient(to right, rgb(45 116 186 / 80%), rgb(236 243 249 / 80%)); text-align: center; position: absolute; padding: 10px; bottom: 3%; color: white; display: flex; align-items: center; justify-content: center; margin-left: 50px; } .alignCenter{ align-items: center; } .vehica-grid { display: flex; flex-direction: row; flex-wrap: wrap; margin-bottom: 12px; } .vehica-grid__element--1of2 { width: 50%; } .cus-btn1 { flex-shrink: 0; position: relative; overflow: hidden; border: 1px solid #2d74ba; display: inline-flex; justify-content: center; font-size: clamp(14px, 0.938vw, 32px); font-weight: 500; line-height: 120%; align-items: center; height: clamp(42px, 2.5vw, 84px); padding: 0 32px; text-decoration: none; border-radius: clamp(5px, 0.521vw, 20px); cursor: pointer; text-transform: capitalize; background: #fff; user-select: none; text-align: center; -webkit-user-select: none; touch-action: manipulation; span { svg { width: clamp(18px, 1.25vw, 32px); height: clamp(18px, 1.25vw, 32px); path { fill: #fff; } } &:first-child { color: #2d74ba; position: relative; transition: color 600ms cubic-bezier(0.48, 0, 0.12, 1); z-index: 10; } &:last-child { color: #fff; display: block; position: absolute; bottom: 0; transition: all 500ms cubic-bezier(0.48, 0, 0.12, 1); z-index: 100; opacity: 0; top: 42%; left: 50%; transform: translateY(225%) translateX(-50%); height: 14px; line-height: 13px; width: 100%; text-align: center; /* background-color:#2d74ba; */ svg { path { fill: #fff; } } } } &:after { content: ""; position: absolute; bottom: -50%; left: 0; width: 100%; height: 100%; background-color: #2d74ba; border: 0; transform-origin: bottom center; transition: transform 600ms cubic-bezier(0.48, 0, 0.12, 1); transform: skewY(9.3deg) scaleY(0); z-index: 50; } &:hover { border: 1px solid #2d74ba; &:after { transform-origin: bottom center; transform: skewY(6.3deg) scaleY(2); } span { &:last-child { transform: translateX(-50%) translateY(-50%); opacity: 1; transition: all 900ms cubic-bezier(0.48, 0, 0.12, 1); } } } } .banner-3 input { border: 0px; margin-bottom: 22px; width: 100%; padding: clamp(14px, 1.042vw, 30px) clamp(16px, 1.25vw, 30px); border-radius: 12px; background: #ecf3f9; } .banner-3 textarea{ background: #ecf3f9; } .cards .banner { height: 100%; } /* 轮播图 */ .slick-slide img{ margin: auto; } .as-nav-slider .img-box { width: 160px; height: 120px; } .vehicle-card img{ /* height: 300px; */ margin: auto; display: flex; height: 300px; width: 100%; object-fit: cover; object-position: center; } #rental-slider{ margin-top: -30px; } .details .slider-arrows { top: 35%; } /* newcar */ .alphabet-filter { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 15px; } .alphabet-item { padding: 2px 6px; font-size: 14px; line-height: 20px; border-radius: 2px; cursor: pointer; position: relative; } .alphabet-item.active { background: #2d74ba; color: white; } .brand { flex: 1; display: flex; flex-wrap: wrap; align-items: center; padding: 6px 12px; background-color: #f7f8fc; } .brand_brands{ /* width: 120px; */ padding: 2px 10px; flex: none; margin: 0px 0; font-size: 13px; line-height: 20px; overflow: hidden; cursor: pointer; } /* .brand_brands:hover{ color: #2d74ba; } */ .brand img{ width: 20px; height: 20px; } /* 新车页面 */ #menu-main>li.has_lv3 { position: static; } #menu-main>li.has_lv3>.sub-menu { gap: 0 1rem; /* left: calc(43vw - clamp(500px,calc(760px + 34.375vw),650px)/2); */ padding: 1rem 1.5rem; transform: translate(0); width: 125%; left: -12%; max-width: clamp(500px,calc(760px + 34.375vw),680px) } #menu-main>li.has_lv3>.sub-menu.flex-layout { display: grid; gap: 0 1rem; grid-template-columns: repeat(auto-fill,minmax(10rem,auto)) } #menu-main>li.has_lv3 .flex-layout .menu-item{ width: auto; } #menu-main>li.has_lv3 .flex-layout .menu-item img{ width: 22px; height: 22px; } #menu-main>li.has_lv3>.sub-menu>li>a { color: #333; display: inline-block; transition: all .3s ease; font-size: clamp(14px, 0.833vw, 24px); } #menu-main>li.has_lv3>.sub-menu>li:hover > a { color: #2d74ba; background: none; } #menu-main>li.has_lv3>.sub-menu>li>a:hover { color: #2d74ba; background: none; } #menu-main>li.has_lv3>.sub-menu .sub-menu { display: block } #menu-main>li.has_lv3>.sub-menu .sub-menu a { color: #666; display: block; font-size: 1.4rem; line-height: 1.8rem; padding: .8rem 2.4rem .8rem 1.6rem; transition: all .1s ease } #menu-main>li.has_lv3>.sub-menu .sub-menu a:hover { background: rgba(44,159,28,.15); color: #2d74ba } #menu-main>li.has_lv3 .current-menu-item>a { color: #2c9f1c!important } .sub-menu .menu-item{ font-size: clamp(15px, 0.833vw, 18px); font-weight: 400; } .features .info { height: 100%; } .error{ text-align: center; padding: 20px 0px 40px; } .ml8-i{ margin-left: 8px; vertical-align: middle; }