508 lines
11 KiB
CSS
508 lines
11 KiB
CSS
@font-face {
|
|
font-family: 'Oswald';
|
|
src: url('./fonts/Oswald-Regular.ttf') format('truetype');
|
|
font-weight: 400;
|
|
font-style: normal;
|
|
}
|
|
|
|
@font-face {
|
|
font-family: 'Oswald';
|
|
src: url('./fonts/Oswald-Medium.ttf') format('truetype');
|
|
font-weight: 500;
|
|
font-style: normal;
|
|
}
|
|
|
|
@font-face {
|
|
font-family: 'Oswald';
|
|
src: url('./fonts/Oswald-SemiBold.ttf') format('truetype');
|
|
font-weight: 600;
|
|
font-style: normal;
|
|
}
|
|
|
|
@font-face {
|
|
font-family: 'Oswald';
|
|
src: url('./fonts/Oswald-Bold.ttf') format('truetype');
|
|
font-weight: 700;
|
|
font-style: normal;
|
|
}
|
|
|
|
@font-face {
|
|
font-family: 'Source Han Sans CN';
|
|
src: url('./fonts/Source_Han_Sans_SC_Light_Light.otf') format('otruetype');
|
|
font-weight: 350;
|
|
font-style: normal;
|
|
}
|
|
|
|
@font-face {
|
|
font-family: 'Source Han Sans CN';
|
|
src: url('./fonts/Source_Han_Sans_SC_Regular.otf') format('otruetype');
|
|
font-weight: 400;
|
|
font-style: normal;
|
|
}
|
|
|
|
@font-face {
|
|
font-family: 'Source Han Sans CN';
|
|
src: url('./fonts/Source_Han_Sans_SC_Medium_Medium.otf') format('otruetype');
|
|
font-weight: 500;
|
|
font-style: normal;
|
|
}
|
|
|
|
@font-face {
|
|
font-family: 'Source Han Sans CN';
|
|
src: url('./fonts/Source_Han_Sans_SC_Bold.otf') format('otruetype');
|
|
font-weight: 700;
|
|
font-style: normal;
|
|
}
|
|
|
|
@font-face {
|
|
font-family: 'Source Han Sans CN';
|
|
src: url('./fonts/Source_Han_Sans_SC_Heavy_Heavy.otf') format('otruetype');
|
|
font-weight: 900;
|
|
font-style: normal;
|
|
}
|
|
|
|
:root {
|
|
/* --font-family: 'Source Han Sans CN', sans-serif; */
|
|
/* --title-font-family: 'Oswald', sans-serif; */
|
|
--source-font-family: 'Source Han Sans CN', sans-serif;
|
|
--page-padding: calc((100vw - 1600px) / 2);
|
|
--font-size-64: max(2rem, 32px);
|
|
--font-size-56: max(1.75rem, 28px);
|
|
--font-size-50: max(1.5625rem, 26px);
|
|
--font-size-48: max(1.5rem, 24px);
|
|
--font-size-46: max(1.4375rem, 22px);
|
|
--font-size-44: max(1.375rem, 20px);
|
|
--font-size-42: max(1.3125rem, 22px);
|
|
--font-size-40: max(1.25rem, 20px);
|
|
--font-size-36: max(1.125rem, 18px);
|
|
--font-size-32: max(1rem, 18px);
|
|
--font-size-30: max(0.9375rem, 16px);
|
|
--font-size-28: max(0.875rem, 14px);
|
|
--font-size-26: max(0.8125rem, 14px);
|
|
--font-size-24: max(0.75rem, 14px);
|
|
--font-size-22: max(0.6875rem, 14px);
|
|
--font-size-20: max(0.625rem, 14px);
|
|
--font-size-18: max(0.5625rem, 14px);
|
|
--font-size-16: max(0.5rem, 12px);
|
|
}
|
|
|
|
.container {
|
|
max-width: 1630px;
|
|
}
|
|
|
|
/* Button Styles */
|
|
.yuedong-btn {
|
|
width: fit-content;
|
|
color: #FFF;
|
|
font-size: 0.5rem;
|
|
font-weight: 400;
|
|
line-height: normal;
|
|
padding: 0.4063rem 1.3438rem;
|
|
background-color: var(--color-primary);
|
|
border-radius: var(--button-radius);
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
.yuedong-btn-svg {
|
|
width: fit-content;
|
|
color: #FFF;
|
|
font-size: max(14px, 0.5rem);
|
|
font-weight: 400;
|
|
line-height: normal;
|
|
padding: 0.625rem 1.5rem;
|
|
background-color: var(--color-primary);
|
|
border-radius: var(--button-radius);
|
|
text-transform: uppercase;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 1.125rem;
|
|
}
|
|
|
|
.yuedong-btn-host {
|
|
width: fit-content;
|
|
color: #666;
|
|
font-size: max(14px, 0.5rem);
|
|
font-weight: 400;
|
|
line-height: normal;
|
|
padding: 0.5625rem 1.7188rem;
|
|
background-color: transparent;
|
|
border-radius: var(--button-radius);
|
|
text-transform: uppercase;
|
|
border: 1px solid #666;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.9375rem;
|
|
}
|
|
|
|
.yuedong-btn-host:hover {
|
|
background-color: var(--color-primary);
|
|
color: #fff;
|
|
border: 1px solid var(--color-primary);
|
|
}
|
|
|
|
.yuedong-btn-host:hover svg path {
|
|
fill: #fff;
|
|
}
|
|
|
|
.yuedong-btn:hover,
|
|
.yuedong-btn-host:hover{
|
|
color: #fff;
|
|
}
|
|
|
|
|
|
/* Swiper Button Styles */
|
|
.swiper-button-prev:after,
|
|
.swiper-button-next:after {
|
|
display: none !important;
|
|
}
|
|
|
|
.swiper-button-prev {
|
|
width: fit-content !important;
|
|
height: fit-content !important;
|
|
left: -0.8438rem !important;
|
|
transform: translateX(-100%) !important;
|
|
}
|
|
|
|
.swiper-button-next {
|
|
width: fit-content !important;
|
|
height: fit-content !important;
|
|
right: -0.8438rem !important;
|
|
transform: translateX(100%) !important;
|
|
}
|
|
|
|
.swiper-button-prev:hover svg path,
|
|
.swiper-button-next:hover svg path,
|
|
.swiper-button-prev.active svg path,
|
|
.swiper-button-next.active svg path {
|
|
stroke: var(--color-primary) !important;
|
|
}
|
|
|
|
/* Swiper Pagination Styles */
|
|
.swiper-pagination .swiper-pagination-bullet {
|
|
width: 12px;
|
|
height: 12px;
|
|
background: #E4E4E4;
|
|
margin: 0 9px;
|
|
border-radius: 50%;
|
|
opacity: 1;
|
|
}
|
|
|
|
.swiper-pagination .swiper-pagination-bullet-active {
|
|
position: relative;
|
|
background: var(--color-primary);
|
|
margin: 0 14px;
|
|
opacity: 1;
|
|
}
|
|
|
|
.swiper-pagination .swiper-pagination-bullet-active::after {
|
|
content: "";
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 50%;
|
|
transform: translate(-50%, -50%);
|
|
width: 12px;
|
|
height: 12px;
|
|
border: 10px solid rgba(59, 198, 249, 0.31);
|
|
border-radius: 50%;
|
|
}
|
|
|
|
.swiper-pagination2 .swiper-pagination-bullet {
|
|
width: 12px;
|
|
height: 12px;
|
|
background: transparent;
|
|
border: 1px solid var(--color-primary);
|
|
margin: 0 9px;
|
|
border-radius: 50%;
|
|
opacity: 1;
|
|
}
|
|
|
|
.swiper-pagination2 .swiper-pagination-bullet-active {
|
|
background: var(--color-primary);
|
|
opacity: 1;
|
|
transform: scale(1.2);
|
|
}
|
|
.swiper-pagination2.swiper-pagination-bullets.swiper-pagination-horizontal {
|
|
position: absolute;
|
|
}
|
|
.swiper-pagination-bullets.swiper-pagination-horizontal {
|
|
text-align: center !important;
|
|
bottom: 2.1875rem !important;
|
|
}
|
|
|
|
|
|
|
|
|
|
/* Pagination Styles */
|
|
#pagesize ul {
|
|
display: flex;
|
|
justify-content: center;
|
|
gap: .6875rem;
|
|
}
|
|
|
|
#pagesize ul li a {
|
|
width: 40px;
|
|
height: 40px;
|
|
border-radius: 50%;
|
|
border: 1px solid #ADADAD;
|
|
background-color: #fff;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
cursor: pointer;
|
|
|
|
color: #464646;
|
|
font-size: max(12px, .4375rem);
|
|
font-weight: 400;
|
|
line-height: 1.5;
|
|
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
#pagesize ul li:has(span) {
|
|
align-self: flex-end;
|
|
}
|
|
|
|
#pagesize ul li span {
|
|
color: #464646;
|
|
font-size: max(12px, .4375rem);
|
|
font-weight: 400;
|
|
line-height: 1.5;
|
|
}
|
|
|
|
#pagesize ul li a:has(svg) {
|
|
color: black;
|
|
}
|
|
|
|
#pagesize ul li a svg {
|
|
width: 7px;
|
|
aspect-ratio: 7 / 13;
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
#pagesize ul li a:not(.disabled).active {
|
|
border-color: var(--color-primary);
|
|
color: var(--color-primary);
|
|
}
|
|
|
|
#pagesize ul li a:not(.disabled):hover {
|
|
border-color: var(--color-primary);
|
|
background-color: var(--color-primary);
|
|
color: #fff;
|
|
}
|
|
|
|
#pagesize ul li a.disabled {
|
|
opacity: 0.5;
|
|
cursor: not-allowed;
|
|
}
|
|
|
|
|
|
/* Form Input Styles */
|
|
.inqury-form .phone-wrap .bootstrap-select {
|
|
display: none !important;
|
|
}
|
|
.inqury-form .phone-wrap .phone_number{
|
|
border: 1px solid #D9D9D9 !important;
|
|
border-radius: 5px !important;
|
|
}
|
|
.custom-pop-inquiry{
|
|
z-index: 9999 !important;
|
|
}
|
|
.inqury-form .phone-wrap .bootstrap-select,
|
|
.click-popup.custom-pop-inquiry .inqury-form .phone-wrap .bootstrap-select,
|
|
.yuedong_home_inquiry .yuedong_home_inquiry_form .inqury-form .phone-wrap .bootstrap-select,
|
|
.yuedong_contact_inquiry .yuedong_contact_inquiry__right .inqury-form .phone-wrap .bootstrap-select{
|
|
width: 4.6875rem !important;
|
|
}
|
|
|
|
.inqury-form .phone-wrap .crmForm-error{
|
|
top: 102% !important;
|
|
}
|
|
.inqury-form .one-line-input,
|
|
.inqury-form .phone_number,
|
|
.inqury-form .phone-wrap .bootstrap-select>.dropdown-toggle.bs-placeholder,
|
|
.inqury-form .phone-wrap .bootstrap-select>.dropdown-toggle {
|
|
height: 1.6875rem !important;
|
|
}
|
|
|
|
.inqury-form .dropdown-toggle .filter-option-inner-inner,
|
|
.bootstrap-select .dropdown-menu li a span.text {
|
|
font-size: var(--font-size-16);
|
|
}
|
|
.inqury-form .phone-wrap .bootstrap-select>.dropdown-toggle.bs-placeholder,
|
|
.inqury-form .phone-wrap .bootstrap-select>.dropdown-toggle {
|
|
padding-top: 0 !important;
|
|
padding-bottom: 0 !important;
|
|
}
|
|
|
|
.bootstrap-select .dropdown-toggle .filter-option-inner-inner {
|
|
line-height: 1.6875rem !important;
|
|
}
|
|
|
|
.inqury_submit {
|
|
width: 100% !important;
|
|
height: 1.875rem !important;
|
|
padding: 0 !important;
|
|
border-radius: 0.25rem !important;
|
|
background: var(--color-primary) !important;
|
|
color: #fff !important;
|
|
font-size: 0.6875rem !important;
|
|
font-weight: 500 !important;
|
|
line-height: 1.27 !important;
|
|
transition: all 0.3s ease !important;
|
|
}
|
|
|
|
.inqury_submit:hover {
|
|
background: var(--color-primary) !important;
|
|
color: #fff !important;
|
|
}
|
|
|
|
.inqury-form .textarea-input {
|
|
height: 4.125rem !important;
|
|
}
|
|
|
|
.one-line-input:focus,
|
|
.one-line-input:hover,
|
|
.inqury-form .phone_number:focus,
|
|
.inqury-form .phone-wrap .bootstrap-select>.dropdown-toggle.bs-placeholder:focus,
|
|
.inqury-form .phone_number:hover,
|
|
.inqury-form .phone-wrap .bootstrap-select>.dropdown-toggle.bs-placeholder:hover {
|
|
border-color: var(--color-primary) !important;
|
|
}
|
|
|
|
.one-line-input:focus::placeholder,
|
|
.one-line-input:hover::placeholder,
|
|
.inqury-form .phone_number:focus::placeholder,
|
|
.inqury-form .phone_number:hover::placeholder {
|
|
color: var(--color-primary) !important;
|
|
}
|
|
|
|
.textarea-input:focus,
|
|
.textarea-input:hover {
|
|
border-color: var(--color-primary) !important;
|
|
}
|
|
|
|
.textarea-input:focus::placeholder,
|
|
.textarea-input:hover::placeholder {
|
|
color: var(--color-primary) !important;
|
|
}
|
|
|
|
|
|
/* Title Text Styles */
|
|
.color-primary {
|
|
color: var(--color-primary);
|
|
}
|
|
|
|
.color-second {
|
|
color: var(--color-second);
|
|
}
|
|
|
|
.color-white {
|
|
color: #fff;
|
|
}
|
|
|
|
.color-title {
|
|
color: var(--title-text-color);
|
|
}
|
|
|
|
.color-text {
|
|
color: var(--text-color);
|
|
}
|
|
|
|
|
|
@media screen and (max-width:1630px) {
|
|
:root {
|
|
--page-padding: calc((100vw - 1400px) / 2);
|
|
}
|
|
|
|
.container {
|
|
max-width: 1400px;
|
|
}
|
|
}
|
|
|
|
@media screen and (max-width:1500px) {
|
|
:root {
|
|
--page-padding: calc((100vw - 1200px) / 2);
|
|
}
|
|
|
|
.container {
|
|
max-width: 1200px;
|
|
}
|
|
}
|
|
|
|
@media screen and (max-width:1280px) {
|
|
:root {
|
|
--page-padding: calc((100vw - 1200px) / 2);
|
|
}
|
|
|
|
.container {
|
|
max-width: 1120px;
|
|
}
|
|
}
|
|
|
|
@media screen and (max-width:1200px) {
|
|
:root {
|
|
--page-padding: calc((100vw - 930px) / 2);
|
|
}
|
|
|
|
.container {
|
|
max-width: 960px;
|
|
}
|
|
}
|
|
|
|
@media screen and (max-width:991px) {
|
|
:root {
|
|
--page-padding: calc((100vw - 720px) / 2);
|
|
}
|
|
|
|
.container {
|
|
max-width: 720px;
|
|
}
|
|
}
|
|
|
|
@media screen and (max-width:768px) {
|
|
:root {
|
|
--page-padding: calc((100vw - 540px) / 2);
|
|
}
|
|
|
|
.container {
|
|
max-width: 540px;
|
|
}
|
|
|
|
#pagesize ul li a {
|
|
width: 30px;
|
|
height: 30px;
|
|
}
|
|
|
|
#pagesize ul li a svg {
|
|
width: 5px;
|
|
}
|
|
}
|
|
|
|
@media screen and (max-width:576px) {
|
|
:root {
|
|
--page-padding: calc((100vw - 450px) / 2);
|
|
}
|
|
|
|
.container {
|
|
max-width: 450px;
|
|
}
|
|
}
|
|
|
|
@media screen and (max-width:480px) {
|
|
:root {
|
|
--page-padding: calc((100vw - 360px) / 2);
|
|
}
|
|
|
|
.container {
|
|
max-width: 360px;
|
|
}
|
|
|
|
#pagesize ul li a {
|
|
width: 24px;
|
|
height: 24px;
|
|
}
|
|
|
|
#pagesize ul {
|
|
gap: .5rem;
|
|
}
|
|
} |