.ellipsis1 {
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    text-overflow: ellipsis;
    -webkit-line-clamp: 1
}

.ellipsis2 {
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    text-overflow: ellipsis;
    -webkit-line-clamp: 2
}

.ellipsis3 {
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    text-overflow: ellipsis;
    -webkit-line-clamp: 3
}

.banner {
    height: 100vh;
    clear: both;
    overflow: hidden;
    text-align: center;
    position: relative;
    z-index: 9
}

.banner .pc {
    width: 100%;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: top center;
    display: block
}

.banner .pc img {
    vertical-align: top;
    display: block;
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    max-height: initial;
    max-width: initial;
    width: 100%;
    object-fit: cover
}

.banner .ph {
    position: relative;
    display: none;
    text-align: center
}

.banner .ph img {
    width: 100%;
    width: auto;
    height: auto
}

.banner .box {
    display: block;
    position: relative;
    overflow: hidden;
    width: 100%
}

.banner .text {
    left: 0;
    top: 55%;
    z-index: 3;
    width: 100%;
    color: #fff;
    text-align: left;
    position: absolute;
    transform: translateY(-50%)
}

.banner .text-2 {
    top: 20rem;
    transform: translateY(0)
}

.banner .text-2 .item {
    padding-left: 0
}

.banner .item {
    text-align: center
}

.banner .banner-first-text {
    top: 13.625rem;
    transform: none
}

.banner .banner-title {
    color: #fff;
    font-size: 3.125rem;
    line-height: 3.375rem;
    font-weight: 700
}

.banner .banner-subtitle {
    min-width: 37.125rem;
    height: 3.625rem;
    margin-top: 1.25rem;
    padding: 0 1.375rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 1.5rem;
    line-height: 1.875rem;
    border-radius: 1.875rem 0 1.875rem 0;
    background: linear-gradient(90deg, rgba(12, 107, 199, 0.72), #0871cf 70%);
    box-sizing: border-box;
    background: url(../images/banner-1-line.png) no-repeat center center;
    background-size: cover
}

.banner .swiper-container {
    height: 100%;
    width: 100vw;
    max-width: none;
    margin-left: calc((100% - 100vw)/2)
}

.banner .swiper-slide {
    width: 100% !important;
    height: 100%;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center top
}

.banner .swiper-pagination {
    z-index: 9;
    width: 100%;
    bottom: 3.5rem;
    text-align: center
}

.banner .banner-pagination {
    display: none
}

.banner .swiper-pagination-bullet {
    width: 8px;
    height: 8px;
    border-radius: 0;
    background: #fff;
    border-radius: 50%;
    opacity: 1;
    vertical-align: middle;
    transition: all 500ms ease;
    margin: 0 5px
}

.banner .swiper-pagination-bullet-active {
    background: var(--main-color)
}

.banner .banner-prev,
.banner .banner-next {
    z-index: 10;
    width: 3.25rem;
    height: 3.25rem;
    margin-top: -1.625rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(255, 255, 255, 0.7);
    border-radius: 50%;
    background: rgba(4, 88, 154, 0.22);
    opacity: 0;
    visibility: hidden;
    cursor: pointer;
    transition: opacity .3s ease, visibility .3s ease, background-color .3s ease, transform .3s ease
}

.banner .banner-prev:after,
.banner .banner-next:after {
    display: none
}

.banner .banner-prev svg,
.banner .banner-next svg {
    width: 1.5625rem;
    height: 1.5625rem;
    fill: none;
    stroke: #fff;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round
}

.banner .banner-prev:hover,
.banner .banner-next:hover {
    background: var(--main-color);
    transform: scale(1.06)
}

.banner .banner-prev {
    left: 2.375rem
}

.banner .banner-next {
    right: 2.375rem
}

.banner:hover .banner-prev,
.banner:hover .banner-next {
    opacity: 1;
    visibility: visible
}

.banner .swiper-slide-active .title {
    animation: 1.5s titFadeup1 ease
}

.banner .swiper-slide-active .title-sub {
    animation: 1.6s titFadeup1 ease
}

.banner .swiper-slide-active .common-button {
    animation: 1.7s titFadeup1 ease
}

.banner .banner-product-text { top: (232rem/16); transform: none; }
.banner .banner-product-text .item { box-sizing: border-box; }
.banner .banner-chip-text .item { width: (680rem/16); margin-left: (160rem/16); }
.banner .banner-kicker {
	min-width: (210rem/16); height: (52rem/16); padding: 0 (30rem/16);
	display: inline-flex; align-items: center; justify-content: center;
	color: #fff; font-size: (20rem/16); line-height: (28rem/16); font-weight: 500;
	border-radius: (20rem/16) 0 (20rem/16) 0;
	background: linear-gradient(90deg, #0871cf, rgba(18,134,224,.72));
	box-sizing: border-box;
}
.banner .banner-product-title {
	margin: 0; color: #fff; font-size: (62rem/16); line-height: (72rem/16);
	font-weight: 700; text-shadow: 0 (3rem/16) (5rem/16) rgba(0,65,135,.2);
}
.banner .banner-chip-text .banner-product-title { margin-top: (2rem/16); }
.banner .banner-product-copy {
	margin-top: (5rem/16); color: #fff; font-size: (24rem/16); line-height: (31rem/16);
	font-weight: 500; text-shadow: 0 (2rem/16) (4rem/16) rgba(0,65,135,.16);
}
.banner .banner-zebrafish-text { top: (218rem/16); }
.banner .banner-zebrafish-text .item { width: (740rem/16); margin: 0 auto; transform: translateX(-(5rem/16)); }
.banner .banner-zebrafish-text .banner-product-title { font-size: (54rem/16); line-height: (64rem/16); }
.banner .banner-zebrafish-copy {
	min-height: (92rem/16); margin-top: (18rem/16); padding: (13rem/16) (35rem/16);
	display: flex; align-items: center; justify-content: center;
	border-radius: (46rem/16); background: rgba(0,104,204,.72); box-sizing: border-box;
}
@media (max-width:1024px) {
	.banner .banner-product-text { top: 82px; padding: 0 20px; }
	.banner .banner-chip-text .item { width: 100%; margin-left: 6%; }
	.banner .banner-kicker { min-width: 160px; height: 42px; padding: 0 22px; font-size: 17px; line-height: 24px; border-radius: 17px 0 17px 0; }
	.banner .banner-product-title { font-size: 42px; line-height: 50px; }
	.banner .banner-product-copy { margin-top: 5px; font-size: 18px; line-height: 25px; }
	.banner .banner-zebrafish-text { top: 72px; }
	.banner .banner-zebrafish-text .item { width: 620px; max-width: calc(100% - 40px); transform: none; }
	.banner .banner-zebrafish-text .banner-product-title { font-size: 39px; line-height: 48px; }
	.banner .banner-zebrafish-copy { min-height: 72px; margin-top: 14px; padding: 10px 26px; border-radius: 36px; }
}
@media (max-width:768px) {
	.banner .banner-product-text { top: 36px !important; padding: 0 16px; }
	.banner .banner-chip-text .item { width: 62%; margin-left: 0; }
	.banner .banner-kicker { min-width: 0; height: 34px; padding: 0 16px; font-size: 14px; line-height: 20px; border-radius: 14px 0 14px 0; }
	.banner .banner-product-title { font-size: 29px; line-height: 36px; }
	.banner .banner-product-copy { font-size: 14px; line-height: 20px; }
	.banner .banner-zebrafish-text { top: 34px !important; }
	.banner .banner-zebrafish-text .item { width: 100%; max-width: none; }
	.banner .banner-zebrafish-text .banner-product-title { font-size: 27px; line-height: 34px; }
	.banner .banner-zebrafish-copy { min-height: 54px; margin-top: 10px; padding: 8px 16px; border-radius: 27px; }
}
.banner .microfluidic-copy {
	position: absolute; z-index: 3; top: calc(234rem / 16); left: 22.35%;
	width: calc(660rem / 16); color: #fff; text-align: left;
	font-family: 'Outfit', sans-serif;
}
.banner .microfluidic-label {
	padding:0 calc(0 (10rem/16));
	display: flex; align-items: center; justify-content: center;
	width: calc(215rem / 16); height: calc(52rem / 16); margin-left: calc(343rem / 16);
	border-radius: calc(28rem / 16) calc(28rem / 16) calc(28rem / 16) calc(10rem / 16);
	background: radial-gradient(ellipse at 91% 112%, #b6ffff 0, #49caff 12%, transparent 35%), linear-gradient(110deg, #0870cd, #237ed5);
	text-align:center;
	font-size: calc(22rem / 16); line-height: calc(20rem / 16); font-weight: 400;
	background:url(../images/bline-2.png) no-repeat center center;
	background-size:cover;
}
.banner .microfluidic-title {
	margin: 0; color: #fff; font-size: calc(62rem / 16); line-height: calc(74rem / 16);
	font-weight: 700; letter-spacing: 0;
	text-shadow: calc(1rem / 16) calc(2rem / 16) 0 rgba(30, 104, 192, .65);
}
.banner .microfluidic-description {
	margin: calc(3rem / 16) 0 0; color: #fff;
	font-size: calc(25rem / 16); line-height: calc(32rem / 16); font-weight: 400;
}
@media (max-width: 1024px) {
	.banner .microfluidic-slide .pc { display: none; }
	.banner .microfluidic-slide .ph { display: block; }

	.banner .microfluidic-copy { top: 88px; left: 48px; width: calc(100% - 96px); max-width: 620px; }
	.banner .microfluidic-label { width: 180px; height: 44px; margin-left: 270px; border-radius: 24px 24px 24px 8px; font-size: 19px; line-height: 26px; }
	.banner .microfluidic-title { font-size: 48px; line-height: 58px; text-shadow: 1px 2px 0 rgba(30, 104, 192, .65); }
	.banner .microfluidic-description { max-width: 540px; margin-top: 6px; font-size: 21px; line-height: 28px; }
	.banner .microfluidic-description br { display: none; }
}
@media (max-width: 768px) {
	.banner .microfluidic-copy { top: 48px; left: 24px; width: calc(100% - 48px); max-width: 520px; }
	.banner .microfluidic-label { width: 158px; height: 38px; margin: 0 0 8px; border-radius: 20px 20px 20px 7px; font-size: 16px; line-height: 22px; }
	.banner .microfluidic-title { font-size: 36px; line-height: 44px; }
	.banner .microfluidic-description { max-width: 420px; margin-top: 8px; font-size: 18px; line-height: 25px; }
}
@media (max-width: 480px) {
	.banner .microfluidic-copy { top: 38px; left: 20px; width: calc(100% - 40px);}
	.banner .microfluidic-title { font-size: 30px; line-height: 38px; }
	.banner .microfluidic-description { margin-top: 7px; font-size: 16px; line-height: 23px;display:none; }
}

/* Third banner: values follow the 1920px artwork and are expressed as rem / 16. */
.banner .zebrafish-slide .banner-zebrafish-text {
	top: calc(202rem / 16);
	transform: none;
}
.banner .zebrafish-slide .banner-zebrafish-text .item {
	width: calc(740rem / 16);
	margin: 0 auto;
}
.banner .zebrafish-slide .banner-product-title {
	margin: 0;
	color: #fff;
	font-family: 'Outfit', sans-serif;
	font-size: calc(54rem / 16);
	line-height: calc(66rem / 16);
	font-weight: 700;
	letter-spacing: calc(-1rem / 16);
	text-shadow: 0 calc(3rem / 16) calc(5rem / 16) rgba(0, 65, 135, .22);
}
.banner .zebrafish-slide .banner-zebrafish-copy {
	position: relative;
	min-height: calc(94rem / 16);
	margin: calc(14rem / 16) 0 0;
	padding: calc(13rem / 16) calc(30rem / 16);
	display: flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	border-radius: calc(48rem / 16);
	color: #fff;
	background: linear-gradient(90deg, rgba(4, 104, 203, .78), rgba(18, 119, 216, .69) 72%, rgba(66, 163, 225, .63));
	font-family: 'Outfit', sans-serif;
	font-size: calc(24rem / 16);
	line-height: calc(30rem / 16);
	font-weight: 400;
	text-shadow: 0 calc(2rem / 16) calc(4rem / 16) rgba(0, 65, 135, .18);
	overflow: hidden;
	background: url(../images/bline-3-2.png) no-repeat center center / 100% 100%;
	background-size:cover;
}

@media (max-width: 1024px) {
	.banner .zebrafish-slide .pc { display: none; }
	.banner .zebrafish-slide .ph { display: block; }
	.banner .zebrafish-slide .ph img {
		display: block;
		width: 100%;
		height: auto;
		object-fit: cover;
		object-position: center top;
	}
	.banner .zebrafish-slide .banner-zebrafish-text { top: 54px; padding: 0 24px; }
	.banner .zebrafish-slide .banner-zebrafish-text .item { width: 100%; max-width: 100%; }
	.banner .zebrafish-slide .banner-product-title { font-size: 40px; line-height: 49px; letter-spacing: -1px; }
	.banner .zebrafish-slide .banner-zebrafish-copy {
		min-height: 72px; margin-top: 12px; padding: 10px 24px;
		border-radius: 38px; font-size: 19px; line-height: 25px;
	}
	.banner .zebrafish-slide .banner-zebrafish-copy::after { right: 20px; width: 180px; height: 11px; }
}
@media (max-width: 640px) {
	.banner .zebrafish-slide .banner-zebrafish-text { top: 28px !important; padding: 0 16px; }
	.banner .zebrafish-slide .banner-product-title { font-size:24px; line-height: 37px; letter-spacing: 0; }
	.banner .zebrafish-slide .banner-zebrafish-copy {
	
		min-height: 0; margin-top:0; padding: 5px 15px;
		border-radius: 30px; font-size: 12px; line-height: 16px;
	}
	.banner .zebrafish-slide .banner-zebrafish-copy::after { right: 14px; width: 140px; height: 8px; }
	.banner .zebrafish-slide .banner-zebrafish-copy br { display: none; }
}
		
@media (max-width:1024px) {
    .banner {
        padding-top: 0;
        margin-top: 60px;
        height: auto
    }

    .banner .banner-prev,
    .banner .banner-next {
        display: none
    }

    .banner .pc {
        height: auto
    }

    .banner .swiper-pagination {
        display: block;
        bottom: 20px
    }

    .banner .banner-first-text {
        top: 116px;
        transform: none
    }

    .banner .banner-title {
        font-size: 32px;
        line-height: 38px
    }

    .banner .banner-subtitle {
        min-width: 0;
        height: 44px;
        margin-top: 14px;
        padding: 0 18px;
        font-size: 17px;
        line-height: 22px;
        border-radius: 23px 0 23px 0;
        box-shadow: 0 6px 18px rgba(0, 93, 181, 0.12)
    }
}

@media (max-width:768px) {
    .banner {
        background: #000
    }

    .banner .pc {
        display: none
    }

    .banner .ph {
        display: block
    }

    .banner .common-button {
        display: none
    }

    .banner .text {
        top: 40px !important;
        transform: translateY(0) !important
    }

    .banner .banner-title {
        font-size: 22px;
		line-height: 32px;
    }

    .banner .banner-subtitle {
        /* display: none; */
        width: calc(100% - 20px);
        height: auto;
        min-height: 40px;
        margin-top: 12px;
        padding: 8px 14px;
        font-size: 14px;
        line-height: 20px;
        border-radius: 20px 0 20px 0;
        text-shadow: none
    }
}

@media (max-width:400px) {

    .banner .banner-title {
		font-size: 18px;
		line-height: 22px;
    }

    .banner .banner-subtitle {
        margin-top: 10px;
        padding: 4px 7px;
        font-size: 12px;
    }
}

.common-home-title h2 {
    color: #1e1f24;
    font-size: 3.25rem;
    line-height: 1;
    font-weight: 700
}

.common-home-more {
    color: #fff;
    min-width: 10.625rem;
    height: 2.875rem;
    border: 2px solid var(--main-color);
    box-sizing: border-box;
    border-radius: 1.5rem;
    padding-left: 1.625rem;
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    background: var(--main-color);
    font-size: 1rem;
    position: relative;
    overflow: hidden;
    isolation: isolate;
    transition: color .4s ease
}

.common-home-more:before {
    content: "";
    inset: 0;
    z-index: -1;
    position: absolute;
    border-radius: 1.25rem;
    background: #fff;
    transform: translateX(101%);
    transition: transform .45s cubic-bezier(.65, 0, .35, 1);
    will-change: transform
}

.common-home-more span,
.common-home-more i {
    z-index: 1;
    position: relative
}

.common-home-more i {
    width: 2.625rem;
    height: 2.625rem;
    border-radius: 50%;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform .3s ease
}

.common-home-more svg {
    width: 1.75rem;
    height: 1.75rem;
    fill: var(--main-color)
}

.common-home-more:hover {
    color: var(--main-color)
}

.common-home-more:hover:before {
    transform: translateX(0)
}

.common-home-more:hover i {
    transform: rotate(45deg)
}

@media (max-width:1024px) {
    .common-home-title h2 {
        font-size: 36px
    }

    .common-home-more {
        width: 160px;
        height: 44px;
        border-radius: 22px;
        padding-left: 22px;
        font-size: 15px
    }

    .common-home-more i {
        width: 40px;
        height: 40px
    }

    .common-home-more svg {
        width: 24px;
        height: 24px
    }
}

.about-warp {
    min-height: 100vh;
    overflow: hidden;
    background: #fff
}

.about-warp .about-container {
    height: 100vh;
    min-height: 47.5rem;
    position: relative;
    display: flex;
    align-items: center
}

.about-warp .about-copy {
    padding-top: 6.25rem;
    width: 35.625rem;
    position: relative;
    z-index: 3
}

.about-warp .common-home-title {
    margin-bottom: 2.375rem
}

.about-warp .about-copy>p {
    color: #3e4857;
    font-size: 1.125rem;
    line-height: 1.75rem
}

.about-warp .about-tabs {
    display: grid;
    grid-template-columns: repeat(2, max-content);
    column-gap: 2.375rem;
    row-gap: .9375rem;
    margin-top: 2.4375rem
}

.about-warp .about-tabs a {
    font-weight: 500;
    color: #333333;
    font-size: 1.25rem;
    display: flex;
    align-items: center;
    gap: .625rem;
    position: relative;
    transition: color .3s ease
}

.about-warp .about-tabs a:after {
    content: "";
    height: 2px;
    left: 3rem;
    right: 0;
    bottom: -0.25rem;
    position: absolute;
    background: var(--main-color);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .3s ease
}

.about-warp .about-tabs a.active,
.about-warp .about-tabs a:hover {
    color: var(--main-color)
}

.about-warp .about-tabs a.active:after,
.about-warp .about-tabs a:hover:after {
    transform: scaleX(1)
}

.about-warp .about-tabs img {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%
}

.about-warp .common-home-more {
    margin-top: 3.8125rem
}

.about-warp .about-visual {
    position: absolute;
    left: 39.375rem;
    top: 57%;
    width: 65.625rem;
    height: 43.75rem;
    transform: translateY(-50%)
}

.about-warp .about-ring {
    overflow: hidden;
    width: 43.75rem;
    height: 43.75rem;
    position: absolute;
    left: 0;
    top: 0
}

.about-warp .about-ring a {
    color: #fff;
    display: block
}

.about-warp .about-ring-mask-svg {
    position: absolute;
    z-index: 1;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
    pointer-events: none
}

.about-warp .about-ring-mask {
    fill: rgba(0, 70, 105, 0.7);
    transition: opacity .3s ease
}

.about-warp .about-ring.is-ring-qualifications .about-ring-mask-qualifications,
.about-warp .about-ring.is-ring-factory .about-ring-mask-factory,
.about-warp .about-ring.is-ring-partners .about-ring-mask-partners {
    opacity: .4
}

.about-warp .about-ring-highlight {
    position: absolute;
    z-index: 1;
    inset: 0;
    opacity: 0;
    pointer-events: none;
    transition: opacity .3s ease
}

.about-warp .about-ring.is-ring-qualifications .about-ring-highlight,
.about-warp .about-ring.is-ring-factory .about-ring-highlight,
.about-warp .about-ring.is-ring-partners .about-ring-highlight {
    opacity: 1
}

.about-warp .about-ring>img {
    width: 100%;
    height: 100%;
    display: block
}

.about-warp .ring-label {
    z-index: 2;
    color: #fff;
    font-size: 1.5rem;
    line-height: 1;
    font-weight: 700;
    position: absolute;
    cursor: default;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.25)
}

.about-warp .qualifications {
    left: 7.9375rem;
    top: 5.3125rem;
    transform: rotate(-35deg)
}

.about-warp .factory {
    left: 1.25rem;
    top: 21.25rem;
    transform: rotate(-95deg)
}

.about-warp .partners {
    left: 10.875rem;
    bottom: 5rem;
    transform: rotate(34deg)
}

.about-warp .about-stat {
    z-index: 2;
    left: 6.75rem;
    top: 18.75rem;
    width: 17.5rem;
    text-align: center;
    position: absolute;
    transition: opacity .15s ease, transform .15s ease
}

.about-warp .about-stat.changing {
    opacity: 0;
    transform: translateY(.5rem)
}

.about-warp .about-stat strong {
    color: var(--main-color);
    font-size: 3.75rem;
    line-height: 1;
    font-weight: 700;
    display: block
}

.about-warp .about-stat strong em {
    font-style: normal
}

.about-warp .about-stat span {
    color: #666;
    font-size: 1.25rem;
    line-height: 1.75rem;
    display: block;
    margin-top: .625rem
}

.about-warp .about-slogan {
    color: #082d59;
    position: absolute;
    left: 39.375rem;
    top: 0;
    font-size: 1.75rem;
    line-height: 2rem;
    font-weight: 500
}

.about-warp .about-video {
    width: 40.1875rem;
    height: 29.625rem;
    overflow: hidden;
    border-radius: .9375rem;
    position: absolute;
    left: 25.3125rem;
    top: 7.4375rem;
    animation: aboutVideoGlow 3.2s ease-in-out infinite
}

.about-warp .about-video::before {
    content: "";
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    position: absolute;
    background: rgba(0, 36, 71, 0.6)
}

.about-warp .about-video>img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block
}

.about-warp .about-play {
    z-index: 2;
    width: 5.625rem;
    height: 5.625rem;
    border-radius: 50%;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center
}

.about-warp .about-play img {
    max-height: 3.75rem
}

.about-warp .about-play:after {
    content: "";
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    z-index: -1;
    position: absolute;
    background: rgba(255, 255, 255, 0.6);
    border-radius: 50%;
    animation: aboutPlayHalo 2.2s ease-out infinite
}

@media (max-width:1024px) {
    .about-warp {
        min-height: 0;
        padding: 60px 0
    }

    .about-warp .about-container {
        height: auto;
        min-height: 0;
        display: block;
        max-width: 100% !important
    }

    .about-warp .about-copy {
        padding-top: 0;
        width: 100%;
        margin: 0
    }

    .about-warp .common-home-title {
        margin-bottom: 22px
    }

    .about-warp .about-copy>p {
        font-size: 16px;
        line-height: 26px
    }

    .about-warp .about-tabs {
        grid-template-columns: repeat(2, 1fr);
        gap: 14px 20px;
        margin-top: 28px
    }

    .about-warp .about-tabs a {
        font-size: 17px;
        gap: 8px
    }

    .about-warp .about-tabs a:after {
        left: 40px;
        bottom: -3px
    }

    .about-warp .about-tabs img {
        width: 34px;
        height: 34px
    }

    .about-warp .common-home-more {
        margin-top: 36px
    }

    .about-warp .about-visual {
        position: relative;
        left: auto;
        top: auto;
        width: 100%;
        height: auto;
        margin-top: 45px;
        transform: none;
        display: flex;
        align-items: center
    }

    .about-warp .about-ring {
        width: 52%;
        height: auto;
        aspect-ratio: 1;
        position: relative;
        flex: none;
        display: none
    }

    .about-warp .ring-label {
        font-size: 18px
    }

    .about-warp .qualifications {
        left: 18%;
        top: 15%
    }

    .about-warp .factory {
        left: 4%;
        top: 47%
    }

    .about-warp .partners {
        left: 22%;
        bottom: 10%
    }

    .about-warp .about-stat {
        left: 15%;
        top: 43%;
        width: 40%
    }

    .about-warp .about-stat strong {
        font-size: 42px
    }

    .about-warp .about-stat span {
        font-size: 16px;
        line-height: 22px;
        margin-top: 7px
    }

    .about-warp .about-slogan {
        display: none
    }

    .about-warp .about-video {
        width: 58%;
        height: auto;
        aspect-ratio: 1.35654008;
        left: auto;
        top: auto;
        margin-left: -10%;
        position: relative;
        border-radius: 12px
    }

    .about-warp .about-play {
        width: 68px;
        height: 68px
    }

    .about-warp .about-play:before {
        width: 40px;
        height: 40px;
        border-width: 2px
    }

    .about-warp .about-play i {
        margin-left: 4px;
        border-top-width: 8px;
        border-bottom-width: 8px;
        border-left-width: 12px
    }
}

@media (max-width:640px) {
    .about-warp {
        padding: 45px 0
    }

    .about-warp .common-home-more {
        display: none
    }

    .about-warp .about-tabs {
        grid-template-columns: 1fr
    }

    .about-warp .about-visual {
        display: block;
        margin-top: 38px
    }

    .about-warp .about-ring {
        width: 100%
    }

    .about-warp .about-video {
        width: 90%;
        margin: 0% auto 0
    }

    .about-warp .about-stat strong {
        font-size: 36px
    }

    .about-warp .about-stat span {
        font-size: 14px;
        line-height: 18px
    }

    .about-warp .ring-label {
        font-size: 15px
    }
}

@keyframes aboutVideoGlow {

    0%,
    100% {
        box-shadow: 0 .5rem 1.5625rem rgba(0, 52, 104, 0.08), 0 0 0 0 rgba(30, 145, 218, 0)
    }
}

@keyframes aboutPlayHalo {
    0% {
        opacity: .75;
        transform: scale(.85)
    }

    75%,
    100% {
        opacity: 0;
        transform: scale(2)
    }
}

@keyframes aboutWhiteShine {
    0% {
        opacity: 0;
        background-position: 160% 0
    }

    18% {
        opacity: 1
    }

    65% {
        opacity: 1
    }

    100% {
        opacity: 0;
        background-position: -70% 0
    }
}

.service-warp {
    height: 100vh;
    min-height: 50rem;
    padding-top: 5.375rem;
    overflow: hidden;
    background: linear-gradient(180deg, #dbe9f7 0, #fff 25%);
    display: flex;
    flex-direction: column;
    justify-content: flex-end
}

.service-warp .service-title {
    text-align: center
}

.service-warp .service-swiper {
    width: 100%;
    height: 40.625rem;
    margin-top: auto;
    flex: none;
    overflow: hidden;
    margin-top: 3.75rem
}

.service-warp .swiper-slide {
    height: 40.625rem;
    overflow: hidden;
    border-right: 1px solid rgba(255, 255, 255, 0.65);
    position: relative
}

.service-warp .swiper-slide>a {
    width: 100%;
    height: 100%;
    color: #fff;
    display: block;
    overflow: hidden;
    position: relative
}

.service-warp .swiper-slide>a:after {
    content: "";
    inset: 0;
    z-index: 1;
    position: absolute;
    background: rgba(3, 42, 63, 0.5);
    transition: background .45s ease
}

.service-warp .swiper-slide>a>img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    object-position: center center;
    transition: transform .7s ease
}

.service-warp .swiper-slide:hover>a>img {
    transform: scale(1.035)
}

.service-warp .service-info {
    left: 1.875rem;
    right: 1.5rem;
    bottom: 4.8125rem;
    z-index: 2;
    position: absolute;
    transition: all .45s ease
}

.service-warp h3 {
    color: #fff;
    font-size: 1.5625rem;
    line-height: 2.125rem;
    font-weight: 500
}

.service-warp .service-info p {
    height: 0;
    color: #fff;
    font-size: 1.0625rem;
    line-height: 1.375rem;
    overflow: hidden;
    opacity: 0;
    transform: translateY(.9375rem);
    transition: all .4s ease
}

.service-warp .common-home-more {
    display: none;
    margin-top: 1.875rem
}

.service-warp .service-current>a:after {
    background: rgba(72, 177, 231, 0.18)
}

.service-warp .service-current .service-info {
    top: 4.5625rem;
    bottom: auto
}

.service-warp .service-current h3 {
    font-size: 2rem;
    line-height: 2.6875rem;
    font-weight: 700;
    margin-bottom: .9375rem
}

.service-warp .service-current .service-info p {
    height: auto;
    max-width: 15rem;
    opacity: 1;
    overflow: visible;
    transform: none
}

.service-warp .service-current .common-home-more {
    display: inline-flex
}

.service-warp .service-prev,
.service-warp .service-next {
    width: 2.125rem;
    height: 3.5rem;
    margin-top: 0;
    top: 56%;
    z-index: 5;
    background: rgba(255, 255, 255, 0.18);
    transform: translateY(-50%)
}

.service-warp .service-prev {
    left: 0
}

.service-warp .service-next {
    right: 0
}

.service-warp .service-prev:after,
.service-warp .service-next:after {
    color: #fff;
    font-size: 1.0625rem;
    font-weight: 700
}

.service-warp .service-pagination {
    display: none
}

@media (max-width:1024px) {
    .service-warp {
        height: auto;
        min-height: 0;
        padding: 55px 0 75px;
        display: block
    }

    .service-warp .service-title {
        margin-bottom: 32px;
        padding: 0 20px
    }

    .service-warp .service-swiper {
        height: 560px;
        margin-top: 0;
        padding-bottom: 42px;
        overflow: hidden
    }

    .service-warp .swiper-slide {
        height: 510px;
        border-right: 1px solid rgba(255, 255, 255, 0.6)
    }

    .service-warp .service-info {
        left: 24px;
        right: 20px;
        bottom: 35px
    }

    .service-warp h3 {
        font-size: 23px;
        line-height: 30px
    }

    .service-warp .service-info p {
        font-size: 15px;
        line-height: 21px;
        transform: translateY(12px)
    }

    .service-warp .common-home-more {
        margin-top: 24px
    }

    .service-warp .service-current .service-info {
        top: 40px
    }

    .service-warp .service-current h3 {
        font-size: 30px;
        line-height: 38px;
        margin-bottom: 12px
    }

    .service-warp .service-current .service-info p {
        max-width: 230px
    }

    .service-warp .service-prev,
    .service-warp .service-next {
        width: 38px;
        height: 54px;
        top: 47%
    }

    .service-warp .service-prev:after,
    .service-warp .service-next:after {
        font-size: 16px
    }

    .service-warp .service-pagination {
        bottom: 0;
        display: block
    }

    .service-warp .service-pagination .swiper-pagination-bullet {
        width: 8px;
        height: 8px;
        margin: 0 5px;
        background: #8ca0b5;
        opacity: .45
    }

    .service-warp .service-pagination .swiper-pagination-bullet-active {
        width: 24px;
        border-radius: 5px;
        background: var(--main-color);
        opacity: 1
    }
}

@media (max-width:640px) {
    .service-warp {
        padding: 45px 0 65px
    }

    .service-warp .service-title {
        margin-bottom: 25px
    }

    .service-warp .service-swiper {
        height: 400px;
        padding-left: 20px;
        padding-bottom: 38px
    }

    .service-warp .swiper-slide {
        height: 340px;
        border-radius: 8px
    }

    .service-warp .service-prev,
    .service-warp .service-next {
        display: none
    }

    .service-warp .service-current .service-info {
        top: 34px
    }

    .service-warp .service-current h3 {
        font-size: 27px;
        line-height: 34px
    }
}

.news-warp .news-warp-title {
    margin-top: 8.75rem;
    display: flex;
    align-items: center;
    justify-content: space-between
}

.news-warp .news-warp-title h2 {
    text-align: left
}

.news-warp .news-warp-box {
    display: flex;
    gap: 2.125rem;
    padding-top: 3.125rem
}

.news-warp .pic {
    overflow: hidden;
    position: relative;
    background: #e8e8e8
}

.news-warp .pic img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: all 600ms ease
}

.news-warp a:hover .pic img {
    transform: scale(1.04)
}

.news-warp a:hover h3,
.news-warp a:hover .more {
    color: var(--main-color)
}

.news-warp h3 {
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    text-overflow: ellipsis;
    -webkit-line-clamp: 2;
    color: #27282d;
    font-size: 1.375rem;
    font-weight: normal;
    height: 3.75rem;
    line-height: 1.875rem;
    transition: all 300ms ease
}

.news-warp .tag {
    color: #fff;
    display: inline-block;
    height: 1.375rem;
    padding: 0 .5rem;
    font-size: .75rem;
    line-height: 1.375rem;
    border-radius: .25rem;
    background: var(--main-color)
}

.news-warp .meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: #999;
    line-height: 1.625rem
}

.news-warp .more {
    color: var(--main-color);
    font-size: 1.125rem;
    display: inline-flex;
    align-items: center;
    gap: .875rem;
    transition: all 300ms ease
}

.news-warp .more i {
    width: .8125rem;
    height: .8125rem;
    display: inline-block;
    position: relative;
    transition: all 300ms ease
}

.news-warp .more i::before {
    content: "";
    top: .125rem;
    right: 0;
    width: .625rem;
    height: .625rem;
    position: absolute;
    border-top: 2px solid var(--main-color);
    border-right: 2px solid var(--main-color)
}

.news-warp .more i::after {
    content: "";
    top: .1875rem;
    right: .125rem;
    width: .75rem;
    height: 2px;
    position: absolute;
    background: var(--main-color);
    transform: rotate(-45deg);
    transform-origin: right center
}

.news-warp .news-main {
    flex: 0 0 45.875rem;
    background: #f8fbfd;
    border-radius: .625rem
}

.news-warp .news-main a {
    color: #27282d
}

.news-warp .news-main .pic {
    height: 25.625rem;
    border-radius: .625rem
}

.news-warp .news-main .txt {
    min-height: 12.8125rem;
    padding: 2.5rem 2rem 1.875rem;
    display: flex;
    flex-direction: column
}

.news-warp .news-main h3 {
    font-size: 1.625rem;
    line-height: 1.875rem;
    height: 3.75rem;
    margin-bottom: 1.25rem;
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    text-overflow: ellipsis;
    -webkit-line-clamp: 2
}

.news-warp .news-main .more {
    color: var(--main-color)
}

.news-warp .news-main .tag {
    align-self: flex-start
}

.news-warp .news-main .meta {
    margin-top: auto
}

.news-warp .news-side {
    flex: 1;
    margin-top: -0.1875rem
}

.news-warp .news-side-item:last-child {
    margin-bottom: 0
}

.news-warp .news-side-item {
    padding-bottom: 2.1875rem;
    margin-bottom: 1.9375rem;
    border-bottom: 1px solid #d8d9e2
}

.news-warp .news-side-item a {
    display: flex;
    gap: 1.5rem
}

.news-warp .news-side-item .pic {
    flex: 0 0 17.375rem;
    height: 9.75rem;
    border-radius: .625rem
}

.news-warp .news-side-item .txt {
    flex: 1;
    min-width: 0;
    min-height: 9.25rem;
    display: flex;
    padding-right: .75rem;
    flex-direction: column
}

.news-warp .news-side-item h3 {
    font-size: 1.5625rem;
    max-width: 100%;
    height: 5.625rem;
    margin-bottom: 1.0625rem;
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    text-overflow: ellipsis;
    -webkit-line-clamp: 3
}

.news-warp .news-side-item .tag {
    align-self: flex-start
}

.news-warp .news-side-item .meta {
    margin-top: auto
}

@media (max-width:1024px) {
    .news-warp {
        padding: 0 0 50px 0
    }

    .news-warp .container {
        max-width: 100%
    }

    .news-warp .news-warp-title {
        display: block;
        margin-top: 0;
        font-size: 32px;
        line-height: 42px
    }

    .news-warp .news-warp-title .common-home-more {
        flex: none;
        display: none
    }

    .news-warp .news-warp-box {
        display: block;
        padding-top: 28px
    }

    .news-warp .tag {
        height: 22px;
        padding: 0 8px;
        font-size: 12px;
        line-height: 22px;
        border-radius: 4px
    }

    .news-warp .meta {
        margin-top: 0 !important;
        font-size: 14px;
        line-height: 22px
    }

    .news-warp .more {
        gap: 10px;
        font-size: 14px
    }

    .news-warp .more i {
        width: 13px;
        height: 13px
    }

    .news-warp .more i::before {
        content: "";
        top: 2px;
        right: 0;
        width: 10px;
        height: 10px
    }

    .news-warp .more i::after {
        content: "";
        top: 3px;
        right: 2px;
        width: 12px
    }

    .news-warp .news-main {
        margin-bottom: 10px
    }

    .news-warp .news-main .pic {
        height: auto;
        padding-top: 47.72%;
        border-radius: 8px
    }

    .news-warp .news-main .txt {
        min-height: auto;
        padding: 18px 18px 24px
    }

    .news-warp .news-main h3 {
        font-size: 20px;
        line-height: 30px;
        margin-bottom: 16px;
        height: 60px
    }

    .news-warp .news-side {
        margin-top: 0
    }

    .news-warp .news-side-item {
        margin-bottom: 0;
        padding-bottom: 24px;
        border-bottom: 1px solid #d2d2d9
    }

    .news-warp .news-side-item a {
        gap: 18px;
        padding: 24px 0
    }

    .news-warp .news-side-item .pic {
        flex: 0 0 34%;
        height: auto;
        margin-top: 0;
        padding-top: 19.2%;
        border-radius: 8px
    }

    .news-warp .news-side-item .txt {
        min-height: 120px;
        padding-right: 0
    }

    .news-warp .news-side-item h3 {
        max-width: 100%;
        font-size: 18px;
        line-height: 25px;
        margin-bottom: 14px
    }
}

@media (max-width:640px) {
    .news-warp .news-side-item a {
        display: block
    }

    .news-warp .news-side-item .pic {
        width: 100%;
        margin-bottom: 16px;
        padding-top: 56.45%
    }

    .news-warp .news-side-item .txt {
        min-height: 0
    }

    .news-warp .news-side-item .meta {
        margin-top: 22px
    }
}

.message-warp {
    min-height: 100vh;
    position: relative;
    overflow: hidden;
    color: #fff;
    box-sizing: border-box;
    background: #56748e
}

.message-warp .message-background {
    position: absolute;
    z-index: 0;
    inset: 0;
    pointer-events: none
}

.message-warp .message-background img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center
}

.message-warp .message-container {
    height: 100vh;
    max-width: 102.5rem;
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: minmax(0, 46.6875rem) minmax(0, 51.6875rem);
    align-items: center;
    gap: 4.125rem
}

.message-warp .message-intro {
    padding-top: 8.125rem
}

.message-warp .message-logo {
    width: 19.375rem
}

.message-warp .message-logo img {
    display: block;
    width: 100%;
    height: auto
}

.message-warp .message-intro>h2 {
    margin-top: 2.75rem;
    font-size: 3.25rem;
    line-height: 1.12;
    font-weight: 700
}

.message-warp .message-intro>p {
    margin-top: .875rem;
    font-size: 1.3125rem;
    line-height: 2.125rem;
    font-weight: 400
}

.message-warp .message-contact-list {
    margin-top: 2.5625rem;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: .875rem
}

.message-warp .message-contact-item {
    height: 8.4375rem;
    padding: 1.3125rem .9375rem 1.0625rem;
    display: flex;
    color: #fff;
    flex-direction: column;
    box-sizing: border-box;
    border-radius: .3125rem;
    background: rgba(0, 147, 214, 0.9);
    transition: transform .3s ease, background-color .3s ease
}

.message-warp .message-contact-item:hover {
    color: #fff;
    transform: translateY(-0.25rem);
    background: #087ac9
}

.message-warp .message-contact-item strong {
    padding-top: .625rem;
    margin-top: auto;
    font-size: .875rem;
    line-height: 1.125rem;
    font-weight: 300
}

.message-warp .message-contact-title {
    display: flex;
    align-items: center;
    gap: .875rem
}

.message-warp .message-contact-title svg {
    width: 1.5625rem;
    height: 1.5625rem;
    flex: none;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.5;
    stroke-linecap: round;
    stroke-linejoin: round
}

.message-warp .message-contact-title b {
    font-size: .875rem;
    line-height: 1.5625rem;
    font-weight: 600
}

.message-warp .message-form-panel {
    margin-top: 8.125rem;
    min-height: 32.875rem;
    padding: 2.625rem 2.375rem 2.5rem;
    box-sizing: border-box;
    border: 1px solid rgba(255, 255, 255, 0.8);
    background: rgba(87, 106, 125, 0.47);
    backdrop-filter: blur(1px)
}

.message-warp .message-form-panel>h2 {
    margin-bottom: 2.1875rem;
    text-align: center;
    font-size: 1.875rem;
    line-height: 1.1;
    font-weight: 700
}

.message-warp .message-field-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.0625rem 1rem
}

.message-warp .message-field {
    height: 3.4375rem;
    display: flex;
    align-items: center;
    background: #fff;
    border: 1px solid #d9d9d9;
    box-sizing: border-box;
    transition: border-color .25s ease, box-shadow .25s ease
}

.message-warp .message-field:focus-within {
    border-color: #0c6bc7;
    box-shadow: 0 0 0 .125rem rgba(12, 107, 199, 0.14)
}

.message-warp .message-field svg {
    width: 1.375rem;
    height: 1.375rem;
    margin: 0 .875rem 0 1.375rem;
    flex: none;
    fill: none;
    stroke: #333;
    stroke-width: 1.35;
    stroke-linecap: round;
    stroke-linejoin: round
}

.message-warp .message-field input {
    width: 100%;
    height: 100%;
    min-width: 0;
    padding: 0 .9375rem 0 0;
    color: #222;
    font-family: inherit;
    font-size: .9375rem;
    line-height: 3.4375rem;
    border: 0;
    outline: 0;
    box-sizing: border-box;
    background: transparent
}

.message-warp .message-field input::placeholder {
    color: #999;
    opacity: 1
}

.message-warp .message-description {
    position: relative;
    height: 9.625rem;
    margin-top: 1.125rem;
    display: block;
    background: #fff;
    border: 1px solid #d9d9d9;
    box-sizing: border-box;
    transition: border-color .25s ease, box-shadow .25s ease
}

.message-warp .message-description i {
    top: 1.5625rem;
    left: 1.125rem;
    position: absolute;
    color: #f30;
    font-style: normal
}

.message-warp .message-description:focus-within {
    border-color: #0c6bc7;
    box-shadow: 0 0 0 .125rem rgba(12, 107, 199, 0.14)
}

.message-warp .message-description textarea {
    display: block;
    width: 100%;
    height: 100%;
    padding: 1.375rem 1.625rem;
    resize: none;
    color: #222;
    font-family: inherit;
    font-size: 1rem;
    line-height: 1.5rem;
    border: 0;
    outline: 0;
    box-sizing: border-box;
    background: transparent
}

.message-warp .message-description textarea::placeholder {
    color: #999999;
    opacity: 1
}

.message-warp .message-form-actions {
    margin-top: 1.25rem;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 8rem 8rem;
    gap: 1.5625rem
}

.message-warp .message-verification-slider {
    --verification-x: 0;
    height: 3.25rem;
    position: relative;
    display: flex;
    align-items: center;
    overflow: hidden;
    color: #999;
    background: #f4f4f4;
    border: 1px solid #d8d8d8;
    box-sizing: border-box
}

.message-warp .message-verification-slider:before {
    content: "";
    width: calc(var(--verification-x) + 52rem/16);
    position: absolute;
    z-index: 0;
    top: 0;
    bottom: 0;
    left: 0;
    background: rgba(12, 107, 199, 0.1)
}

.message-warp .message-verification-slider input {
    position: absolute;
    z-index: 3;
    inset: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    opacity: 0;
    cursor: ew-resize
}

.message-warp .message-verification-slider.is-resetting .message-verification-arrows {
    transition: left .28s ease
}

.message-warp .message-verification-slider.is-verified {
    border-color: var(--main-color)
}

.message-warp .message-verification-slider.is-verified .message-verification-arrows {
    color: #fff;
    border-color: var(--main-color);
    background: var(--main-color)
}

.message-warp .message-verification-slider.is-verified .message-verification-copy {
    color: var(--main-color);
    padding-left: 0 !important
}

.message-warp .message-verification-slider.is-validation-failed {
    animation: messageVerificationShake .35s ease;
    border-color: #d94545
}

.message-warp .message-verification-arrows {
    width: 3.25rem;
    height: 100%;
    position: absolute;
    z-index: 2;
    top: 0;
    left: var(--verification-x);
    display: flex;
    flex: none;
    align-items: center;
    justify-content: center;
    color: #d1d1d1;
    font-size: 1.5rem;
    letter-spacing: -0.625rem;
    border-right: 1px solid #ddd;
    background: #fff;
    box-sizing: border-box;
    will-change: left
}

.message-warp .message-verification-copy {
    width: 100%;
    position: relative;
    z-index: 1;
    text-align: center;
    font-size: .875rem;
    line-height: 1.125rem;
    box-sizing: border-box;
    padding-left: 2.5rem
}

.message-warp .message-reset,
.message-warp .message-submit {
    height: 3.25rem;
    padding: 0;
    cursor: pointer;
    font-family: inherit;
    font-size: 1.125rem;
    transition: color .3s ease, background-color .3s ease
}

.message-warp .message-reset {
    color: #0c6bc7;
    border: 1px solid var(--main-color);
    background: #fff
}

.message-warp .message-reset:hover {
    color: #fff;
    background: var(--main-color)
}

.message-warp .message-submit {
    color: #fff;
    border: 1px solid var(--main-color);
    background: var(--main-color)
}

.message-warp .message-submit:hover {
    color: var(--main-color);
    background: #fff
}

@media (max-width:1024px) {
    .message-warp {
        min-height: 0;
        padding: 64px 0
    }

    .message-warp .message-background img {
        object-position: center
    }

    .message-warp .message-container {
        height: auto;
        max-width: 760px !important;
        display: block
    }

    .message-warp .message-intro {
        padding-top: 0
    }

    .message-warp .message-logo {
        width: 250px
    }

    .message-warp .message-intro>h2 {
        margin-top: 30px;
        font-size: 40px;
        line-height: 46px
    }

    .message-warp .message-intro>p {
        margin-top: 10px;
        font-size: 18px;
        line-height: 29px
    }

    .message-warp .message-contact-list {
        margin-top: 30px;
        gap: 12px
    }

    .message-warp .message-contact-item {
        height: 130px;
        padding: 18px 14px 16px;
        border-radius: 5px
    }

    .message-warp .message-contact-item:hover {
        transform: translateY(-3px)
    }

    .message-warp .message-contact-item strong {
        font-size: 13px;
        line-height: 18px
    }

    .message-warp .message-contact-item:last-child strong {
        font-size: 11px
    }

    .message-warp .message-contact-title {
        gap: 10px
    }

    .message-warp .message-contact-title svg {
        width: 23px;
        height: 23px
    }

    .message-warp .message-contact-title b {
        font-size: 14px;
        line-height: 23px
    }

    .message-warp .message-form-panel {
        min-height: 0;
        margin-top: 42px;
        padding: 34px 28px 30px
    }

    .message-warp .message-form-panel>h2 {
        margin-bottom: 28px;
        font-size: 27px;
        line-height: 32px
    }

    .message-warp .message-field-grid {
        gap: 14px
    }

    .message-warp .message-field {
        height: 54px
    }

    .message-warp .message-field:focus-within {
        box-shadow: 0 0 0 2px rgba(12, 107, 199, 0.14)
    }

    .message-warp .message-field svg {
        width: 21px;
        height: 21px;
        margin: 0 13px 0 18px
    }

    .message-warp .message-field input {
        padding-right: 14px;
        font-size: 16px;
        line-height: 54px
    }

    .message-warp .message-description {
        height: 150px;
        margin-top: 14px
    }

    .message-warp .message-description:focus-within {
        box-shadow: 0 0 0 2px rgba(12, 107, 199, 0.14)
    }

    .message-warp .message-description textarea {
        padding: 19px 21px;
        font-size: 16px;
        line-height: 24px
    }

    .message-warp .message-form-actions {
        margin-top: 16px;
        grid-template-columns: minmax(0, 1fr) 112px 112px;
        gap: 15px
    }

    .message-warp .message-verification-slider {
        height: 50px
    }

    .message-warp .message-verification-slider:before {
        width: calc(var(--verification-x) + 50px)
    }

    .message-warp .message-verification-slider.is-verified .message-verification-copy {
        padding-right: 56px;
        padding-left: 56px
    }

    .message-warp .message-verification-arrows {
        width: 50px;
        font-size: 22px;
        letter-spacing: -9px;
        text-indent: -5px
    }

    .message-warp .message-verification-copy {
        padding: 0 10px;
        font-size: 12px;
        line-height: 17px
    }

    .message-warp .message-reset,
    .message-warp .message-submit {
        height: 50px;
        font-size: 16px
    }
}

@media (max-width:640px) {
    .message-warp {
        padding: 48px 0
    }

    .message-warp .message-logo {
        width: 205px
    }

    .message-warp .message-intro>h2 {
        margin-top: 24px;
        font-size: 34px;
        line-height: 40px
    }

    .message-warp .message-intro>p {
        font-size: 16px;
        line-height: 26px
    }

    .message-warp .message-intro>p br {
        display: none
    }

    .message-warp .message-contact-list {
        grid-template-columns: 1fr;
        margin-top: 26px;
        gap: 10px
    }

    .message-warp .message-contact-item {
        height: auto;
        min-height: 104px;
        padding: 17px 16px
    }

    .message-warp .message-contact-item strong {
        margin-top: 20px;
        font-size: 13px
    }

    .message-warp .message-contact-item:last-child strong {
        font-size: 12px
    }

    .message-warp .message-form-panel {
        margin-top: 32px;
        padding: 26px 16px 20px
    }

    .message-warp .message-form-panel>h2 {
        margin-bottom: 22px;
        font-size: 22px;
        line-height: 28px
    }

    .message-warp .message-field-grid {
        grid-template-columns: 1fr;
        gap: 20px
    }

    .message-warp .message-description {
        height: 140px;
        margin-top: 10px
    }

    .message-warp .message-form-actions {
        grid-template-columns: 1fr 1fr;
        gap: 20px;
        display: block
    }

    .message-warp .message-verification-slider {
        grid-column: inherit
    }

    .message-warp .message-verification-copy {
        font-size: 12px;
        padding-left: 60px
    }

    .message-warp .message-reset,
    .message-warp .message-submit {
        width: 100%;
        margin-top: 10px
    }

    .message-warp .message-verification-slider.is-verified .message-verification-copy {
        padding-left: 0 !important
    }
}

@keyframes messageVerificationShake {

    0%,
    100% {
        transform: translateX(0)
    }

    30% {
        transform: translateX(-5px)
    }

    60% {
        transform: translateX(5px)
    }
}

.message-warp-2 .message-intro {
    padding-right: 1.875rem
}

.message-warp-2 .message-intro h2 {
    padding-bottom: 1.25rem
}

.message-warp-2 .message-intro>p {
    font-size: 1.25rem;
    margin-top: 1.875rem
}

@media (max-width:1024px) {
    .message-warp-2 .message-intro h2 {
        margin-top: 0;
        padding-bottom: 0
    }

    .message-warp-2 .message-intro>p {
        display: none
    }
}

.contact-content {
    position: relative;
    padding: 6.25rem 0
}

.contact-content h1 {
    margin: 0 0 2.75rem;
    color: #1e1f24;
    font-size: 3.25rem;
    line-height: 1;
    font-weight: 700
}

.contact-content .contact-main {
    display: grid;
    grid-template-columns: minmax(0, 49.625rem) minmax(0, 45rem);
    gap: 4.875rem;
    align-items: start
}

.contact-content .contact-form-card {
    border: solid .125rem #fff;
    min-height: 65.3125rem;
    padding: 4.1875rem 4.25rem 4.375rem;
    border-radius: 1.125rem;
    background: linear-gradient(180deg, #fff 0%, #f8fafa 58%, #f3f6f8 100%);
    box-shadow: 0 1.5rem 3.375rem rgba(37, 58, 76, 0.12);
    box-sizing: border-box
}

.contact-content .contact-form-card h2 {
    margin: 0 0 1.5rem;
    color: #08335d;
    font-size: 2.5rem;
    line-height: 1.15;
    font-weight: 700
}

.contact-content .contact-form-card p {
    max-width: 37.125rem;
    margin: 0;
    color: #666;
    font-size: 1.125rem;
    line-height: 2rem;
    font-weight: 300
}

.contact-content .contact-form-card p+p {
    margin-top: 2.125rem
}

.contact-content .contact-field-grid {
    margin-top: 4.875rem;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.625rem 1.375rem
}

.contact-content .contact-field {
    display: block;
    min-width: 0
}

.contact-content .contact-field span {
    display: block;
    margin-bottom: .625rem;
    color: #4e5359;
    font-size: 1.125rem;
    line-height: 1.5rem;
    font-weight: 300
}

.contact-content .contact-field span i {
    color: #ff2525;
    font-style: normal
}

.contact-content .contact-field input,
.contact-content .contact-field textarea {
    width: 100%;
    display: block;
    color: #222;
	border: 1px solid #999;
    font-family: inherit;
    font-size: 1rem;
    border: 0;
    background: #fff;
    box-sizing: border-box;
    transition: box-shadow .25s ease
}

.contact-content .contact-field input:focus,
.contact-content .contact-field textarea:focus {
    box-shadow: 0 0 0 .125rem rgba(12, 107, 199, 0.16)
}

.contact-content .contact-field input {
    height: 2.5rem;
    padding: 0 .875rem;
    line-height: 2.5rem
}

.contact-content .contact-field textarea {
    height: 9.375rem;
    padding: .875rem;
    resize: none;
    line-height: 1.5rem
}

.contact-content .contact-message {
    margin-top: 1.625rem
}

.contact-content .message-verification-slider {
    --verification-x: 0;
    height: 2.5rem;
    margin-top: 1.5rem;
    position: relative;
    display: flex;
    align-items: center;
    overflow: hidden;
    color: #777;
    background: #e9e9e9;
    box-sizing: border-box
}

.contact-content .message-verification-slider:before {
    content: "";
    width: calc(var(--verification-x) + 40rem/16);
    position: absolute;
    z-index: 0;
    top: 0;
    bottom: 0;
    left: 0;
    background: rgba(12, 107, 199, 0.1)
}

.contact-content .message-verification-slider input {
    font-size: 1rem;
    position: absolute;
    z-index: 3;
    inset: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    opacity: 0;
    cursor: ew-resize
}

.contact-content .message-verification-slider.is-resetting .message-verification-arrows {
    transition: left .28s ease
}

.contact-content .message-verification-slider.is-verified .message-verification-arrows {
    color: #fff;
    padding-left: 0 !important;
    background: var(--main-color)
}

.contact-content .message-verification-slider.is-verified .message-verification-copy {
    color: var(--main-color)
}

.contact-content .message-verification-slider.is-validation-failed {
    animation: messageVerificationShake .35s ease
}

.contact-content .message-verification-arrows {
    width: 2.625rem;
    height: 100%;
    position: absolute;
    z-index: 2;
    top: 0;
    padding-left: .625rem;
    left: var(--verification-x);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #b4b4b4;
    font-size: 1.25rem;
    line-height: 1;
    border: 1px solid #dfdfdf;
    background: #fff;
    box-sizing: border-box;
    will-change: left
}

.contact-content .message-verification-copy {
    width: 100%;
    position: relative;
    z-index: 1;
    text-align: center;
    color: #777;
    font-size: .875rem;
    line-height: 1.125rem;
    box-sizing: border-box
}

.contact-content .contact-actions {
    margin-top: 3.3125rem;
    display: flex;
    gap: 1.25rem
}

.contact-content .contact-actions button {
    width: 11.25rem;
    height: 3.25rem;
    padding: 0;
    cursor: pointer;
    font-family: inherit;
    font-size: 1.25rem;
    line-height: 3.25rem;
    font-weight: 700;
    border-radius: .25rem;
    transition: color .25s ease, border-color .25s ease, background-color .25s ease
}

.contact-content .contact-submit {
    color: #fff;
    border: 1px solid var(--main-color);
    background: var(--main-color)
}

.contact-content .contact-submit:hover {
    background: #187dde
}

.contact-content .contact-reset {
    color: #555;
    border: 1px solid #898989;
    background: transparent
}

.contact-content .contact-reset:hover {
    color: #fff;
    border-color: var(--main-color);
    color: var(--main-color)
}

.contact-content .contact-info-panel {
    padding-top: 0;
    color: #272a2f
}

.contact-content .contact-info-panel h2 {
    margin: 0 0 1.5rem;
    color: #333333;
    font-size: 2.5rem;
    line-height: 1.15;
    font-weight: 400
}

.contact-content .contact-info-panel>p {
    color: #666;
    margin: 0 0 2.625rem;
    font-size: 1.125rem;
    line-height: 2rem
}

.contact-content .contact-info-panel dl {
    margin: 0
}

.contact-content .contact-info-panel dt {
    margin-top: 2.5rem;
    color: #4f677e;
    font-size: 1.75rem;
    line-height: 2.125rem;
    font-weight: 500
}

.contact-content .contact-info-panel dt:first-child {
    margin-top: 0
}

.contact-content .contact-info-panel dd {
    margin: 1.1875rem 0 0;
    color: #333;
    font-size: 1.625rem;
    line-height: 2.4375rem;
    font-weight: 400
}

.contact-content .contact-info-panel dd a {
    display: block;
    color: #2d2e32
}

.contact-content .contact-info-panel dd a:hover {
    color: var(--main-color)
}

.contact-content .contact-code-list {
    margin: 3.75rem 0 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(3, 10.9375rem);
    gap: 1.25rem;
    list-style: none
}

.contact-content .contact-code-list li {
    text-align: center
}

.contact-content .contact-code-list img {
    border-radius: .625rem;
    width: 10.9375rem;
    height: 10.9375rem;
    display: block;
    object-fit: cover;
    background: #fff;
    box-shadow: 0 .3125rem 1rem rgba(25, 38, 54, 0.13)
}

.contact-content .contact-code-list span {
    display: block;
    margin-top: 1.0625rem;
    color: #666;
    font-size: 1.125rem;
    line-height: 1.375rem
}

@media (max-width:1024px) {
    .contact-content {
        padding: 54px 0 70px
    }

    .contact-content h1 {
        margin-bottom: 32px;
        font-size: 38px;
        line-height: 46px
    }

    .contact-content .contact-main {
        grid-template-columns: 1fr;
        gap: 52px
    }

    .contact-content .contact-form-card {
        min-height: 0;
        padding: 42px 34px;
        border-width: 1px;
        border-radius: 16px;
        box-shadow: 0 16px 38px rgba(37, 58, 76, 0.11)
    }

    .contact-content .contact-form-card h2 {
        margin-bottom: 18px;
        font-size: 32px;
        line-height: 39px
    }

    .contact-content .contact-form-card p {
        max-width: none;
        font-size: 16px;
        line-height: 28px
    }

    .contact-content .contact-form-card p+p {
        margin-top: 24px
    }

    .contact-content .contact-field-grid {
        margin-top: 38px;
        gap: 22px 18px
    }

    .contact-content .contact-field span {
        margin-bottom: 8px;
        font-size: 15px;
        line-height: 22px
    }

    .contact-content .contact-field input,
    .contact-content .contact-field textarea {
        font-size: 16px;
        border: 1px solid #edf0f2;
        border-radius: 4px
    }

    .contact-content .contact-field input:focus,
    .contact-content .contact-field textarea:focus {
        box-shadow: 0 0 0 2px rgba(12, 107, 199, 0.16)
    }

    .contact-content .contact-field input {
        height: 48px;
        padding: 0 14px;
        line-height: 48px
    }

    .contact-content .contact-field textarea {
        height: 150px;
        padding: 12px 14px;
        line-height: 24px
    }

    .contact-content .contact-message {
        margin-top: 22px
    }

    .contact-content .message-verification-slider {
        height: 46px;
        margin-top: 20px;
        border-radius: 3px
    }

    .contact-content .message-verification-slider:before {
        width: calc(var(--verification-x) + 46px)
    }

    .contact-content .message-verification-arrows {
        width: 46px;
        padding-left: 8px;
        font-size: 18px
    }

    .contact-content .message-verification-copy {
        padding: 0 52px;
        font-size: 13px;
        line-height: 18px
    }

    .contact-content .contact-actions {
        margin-top: 34px;
        gap: 14px
    }

    .contact-content .contact-actions button {
        width: 160px;
        height: 48px;
        font-size: 17px;
        line-height: 48px;
        border-radius: 4px
    }

    .contact-content .contact-info-panel {
        padding: 38px 0 0;
        border-top: 1px solid #e7ebee
    }

    .contact-content .contact-info-panel h2 {
        margin-bottom: 18px;
        font-size: 32px;
        line-height: 39px
    }

    .contact-content .contact-info-panel>p {
        margin-bottom: 32px;
        font-size: 16px;
        line-height: 28px
    }

    .contact-content .contact-info-panel dt {
        margin-top: 30px;
        font-size: 22px;
        line-height: 29px
    }

    .contact-content .contact-info-panel dd {
        margin-top: 10px;
        font-size: 19px;
        line-height: 31px;
        overflow-wrap: anywhere
    }

    .contact-content .contact-code-list {
        margin-top: 38px;
        grid-template-columns: repeat(3, 130px);
        gap: 24px
    }

    .contact-content .contact-code-list img {
        width: 130px;
        height: 130px;
        border-radius: 8px;
        box-shadow: 0 4px 14px rgba(25, 38, 54, 0.12)
    }

    .contact-content .contact-code-list span {
        margin-top: 12px;
        font-size: 15px;
        line-height: 21px
    }
}

@media (max-width:640px) {
    .contact-content {
        padding: 42px 0 54px
    }

    .contact-content h1 {
        margin-bottom: 24px;
        font-size: 30px;
        line-height: 38px
    }

    .contact-content .contact-main {
        gap: 42px
    }

    .contact-content .contact-form-card {
        padding: 28px 18px 30px;
        border-radius: 12px
    }

    .contact-content .contact-form-card h2 {
        margin-bottom: 15px;
        font-size: 27px;
        line-height: 34px
    }

    .contact-content .contact-form-card p {
        font-size: 15px;
        line-height: 25px
    }

    .contact-content .contact-form-card p+p {
        margin-top: 18px
    }

    .contact-content .contact-field-grid {
        grid-template-columns: 1fr;
        margin-top: 30px;
        gap: 17px
    }

    .contact-content .contact-field input {
        height: 46px;
        line-height: 46px
    }

    .contact-content .contact-field textarea {
        height: 132px
    }

    .contact-content .contact-message {
        margin-top: 18px
    }

    .contact-content .message-verification-slider {
        height: 42px;
        margin-top: 18px
    }

    .contact-content .message-verification-slider:before {
        width: calc(var(--verification-x) + 42px)
    }

    .contact-content .message-verification-arrows {
        width: 42px
    }

    .contact-content .message-verification-copy {
        padding: 0 47px;
        font-size: 12px;
        padding-left: 0px
    }

    .contact-content .contact-actions {
        margin-top: 28px;
        gap: 12px
    }

    .contact-content .contact-actions button {
        width: 50%;
        height: 46px;
        font-size: 15px;
        line-height: 46px
    }

    .contact-content .contact-info-panel {
        padding-top: 32px
    }

    .contact-content .contact-info-panel h2 {
        font-size: 28px;
        line-height: 35px
    }

    .contact-content .contact-info-panel>p {
        margin-bottom: 30px;
        font-size: 15px;
        line-height: 26px
    }

    .contact-content .contact-info-panel dt {
        margin-top: 28px;
        font-size: 21px;
        line-height: 28px
    }

    .contact-content .contact-info-panel dd {
        margin-top: 10px;
        font-size: 17px;
        line-height: 28px
    }

    .contact-content .contact-code-list {
        margin-top: 32px;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 10px
    }

    .contact-content .contact-code-list img {
        width: 100%;
        height: auto;
        aspect-ratio: 1
    }

    .contact-content .contact-code-list span {
        margin-top: 9px;
        font-size: 12px;
        line-height: 18px
    }
}

.contact-ditu {
    height: 58.75rem;
    position: relative;
    overflow: hidden;
    background: #eef2f6
}

.contact-ditu .contact-map-bg {
    position: absolute;
    z-index: 0;
    inset: 0
}

.contact-ditu .contact-map-bg img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    object-position: center center
}

.contact-ditu .contact-map-container {
    height: 100%;
    position: relative;
    z-index: 1
}

.contact-ditu .contact-map-card {
    width: 47.8125rem;
    min-height: 21.625rem;
    position: absolute;
    left: 8.125rem;
    top: 50%;
    display: grid;
    grid-template-columns: 18.75rem minmax(0, 1fr);
    gap: 1.25rem;
    align-items: center;
    padding: 2.8125rem 2.625rem 3rem 2.125rem;
    border-radius: 0 0 1.75rem 1.75rem;
    background: #fff;
    box-shadow: 0 1.5625rem 2.625rem rgba(0, 0, 0, 0.22);
    box-sizing: border-box;
    transform: translateY(-50%)
}

.contact-ditu .contact-map-card:before {
    content: "";
    width: 0;
    height: 0;
    position: absolute;
    right: -2.25rem;
    top: 50%;
    border-top: 2rem solid transparent;
    border-bottom: 2rem solid transparent;
    border-left: 2.25rem solid #fff;
    transform: translateY(-50%)
}

.contact-ditu .contact-map-copy {
    min-width: 0
}

.contact-ditu .contact-map-copy h2 {
    margin: 0;
    color: #333333;
    font-size: 1.875rem;
    line-height: 1.9375rem;
    font-weight: 500;
    letter-spacing: 0
}

.contact-ditu .contact-map-copy h2:after {
    content: "";
    width: 100%;
    height: 1px;
    display: block;
    margin: 1.1875rem 0 1.1875rem;
    background: #84afe2
}

.contact-ditu .contact-map-copy p {
    margin: 0;
    color: #333;
    font-size: 1.0625rem;
    line-height: 1.6875rem;
    font-weight: 400
}

.contact-ditu .contact-map-image {
    height: 14.75rem;
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden
}

.contact-ditu .contact-map-image img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    object-position: center center
}

.contact-ditu .contact-map-pin {
    width: 7.5rem;
    height: 7.5rem;
    position: absolute;
    left: 58.125rem;
    top: 50%;
    z-index: 2;
    transform: translateY(-51%)
}

.contact-ditu .contact-map-pin img {
    max-height: 7.5rem
}

@media (max-width:1024px) {
    .contact-ditu {
        height: auto;
        min-height: 620px;
        padding: 70px 0
    }

    .contact-ditu .contact-map-bg img {
        object-position: center center
    }

    .contact-ditu .contact-map-container {
        height: auto;
        max-width: 760px !important
    }

    .contact-ditu .contact-map-card {
        width: 100%;
        min-height: 0;
        position: relative;
        left: auto;
        top: auto;
        grid-template-columns: 280px minmax(0, 1fr);
        gap: 28px;
        padding: 34px 32px;
        border-radius: 0 0 22px 22px;
        box-shadow: 0 18px 35px rgba(0, 0, 0, 0.2);
        transform: none
    }

    .contact-ditu .contact-map-card:before {
        right: 110px;
        top: auto;
        bottom: -28px;
        border-left: 28px solid transparent;
        border-right: 28px solid transparent;
        border-top: 28px solid #fff;
        border-bottom: 0;
        transform: none
    }

    .contact-ditu .contact-map-copy h2 {
        font-size: 28px;
        line-height: 30px
    }

    .contact-ditu .contact-map-copy h2:after {
        margin: 16px 0
    }

    .contact-ditu .contact-map-copy p {
        font-size: 16px;
        line-height: 26px
    }

    .contact-ditu .contact-map-image {
        height: 210px
    }

    .contact-ditu .contact-map-pin {
        width: 62px;
        height: 90px;
        left: auto;
        right: 130px;
        top: 360px;
        filter: drop-shadow(0 10px 6px rgba(0, 0, 0, 0.34));
        transform: none
    }

    .contact-ditu .contact-map-pin:before {
        width: 62px;
        height: 62px;
        border-width: 3px
    }

    .contact-ditu .contact-map-pin:after {
        width: 28px;
        height: 28px;
        left: 17px;
        top: 17px;
        box-shadow: inset 0 0 0 4px #b40008
    }

    .contact-ditu .contact-map-pin i {
        width: 22px;
        height: 7px;
        left: 21px;
        bottom: 3px
    }
}

@media (max-width:640px) {
    .contact-ditu {
        min-height: 0;
        padding: 42px 0 160px
    }

    .contact-ditu .contact-map-bg img {
        object-position: 62% center
    }

    .contact-ditu .contact-map-card {
        display: block;
        padding: 26px 20px 22px;
        border-radius: 0 0 18px 18px
    }

    .contact-ditu .contact-map-card:before {
        right: 50px;
        bottom: -22px;
        border-left-width: 22px;
        border-right-width: 22px;
        border-top-width: 22px
    }

    .contact-ditu .contact-map-copy h2 {
        font-size: 25px;
        line-height: 27px
    }

    .contact-ditu .contact-map-copy h2:after {
        margin: 14px 0
    }

    .contact-ditu .contact-map-copy p {
        font-size: 15px;
        line-height: 24px
    }

    .contact-ditu .contact-map-image {
        height: auto;
        margin-top: 22px;
        aspect-ratio: 1.55
    }

    .contact-ditu .contact-map-pin {
        right: 58px;
        top: auto;
        bottom: 55px
    }
}

.partner-warp {
    min-height: 48.8125rem;
    padding: 5.875rem 0 5.5rem;
    position: relative;
    overflow: hidden;
    box-sizing: border-box;
    background: #f4f7fc
}

.partner-warp:before,
.partner-warp:after {
    content: "";
    width: 8.125rem;
    position: absolute;
    z-index: 3;
    top: 14.375rem;
    bottom: 4.375rem;
    pointer-events: none
}

.partner-warp:before {
    left: 0;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0.92) 0%, rgba(255, 255, 255, 0.58) 42%, rgba(255, 255, 255, 0) 100%)
}

.partner-warp:after {
    right: 0;
    background: linear-gradient(270deg, rgba(255, 255, 255, 0.92) 0%, rgba(255, 255, 255, 0.58) 42%, rgba(255, 255, 255, 0) 100%)
}

.partner-warp .partner-constellation__terrestrial-watermark {
    width: 100%;
    height: 100%;
    position: absolute;
    z-index: 0;
    inset: 0;
    pointer-events: none
}

.partner-warp .partner-constellation__terrestrial-watermark img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center
}

.partner-warp .partner-constellation__heading {
    position: relative;
    z-index: 2;
    margin-bottom: 6rem;
    text-align: center
}

.partner-warp .partner-constellation__interlaced-marquee-matrix {
    position: relative;
    z-index: 1;
    width: 100%;
    overflow-x: hidden
}

.partner-warp .partner-constellation__continuous-orbit {
    width: 100%;
    overflow: visible
}

.partner-warp .partner-constellation__continuous-orbit:not(:last-child) {
    margin-bottom: 1.875rem
}

.partner-warp .partner-constellation__continuous-orbit .swiper-wrapper {
    transition-timing-function: linear !important;
    align-items: center;
    backface-visibility: hidden;
    will-change: transform
}

.partner-warp .partner-constellation__continuous-orbit .swiper-slide {
    width: 13.125rem;
    height: 6.25rem;
    padding: 0 1.125rem;
    box-sizing: content-box;
    backface-visibility: hidden;
    transform: translateZ(0)
}

.partner-warp .partner-constellation__continuous-orbit--beta {
    transform: translateX(-6.75rem)
}

.partner-warp .partner-constellation__continuous-orbit--gamma {
    transform: translateX(-3.375rem)
}

.partner-warp .partner-constellation__emblem-vessel {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    overflow: hidden;
    border-radius: .5625rem;
    background: #fff;
    box-shadow: 0 .5rem 1.875rem rgba(31, 74, 125, 0.035)
}

.partner-warp .partner-constellation__emblem-vessel img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover
}

@media (max-width:1024px) {
    .partner-warp {
        min-height: 0;
        padding: 64px 0 70px
    }

    .partner-warp:before,
    .partner-warp:after {
        width: 70px;
        top: 135px;
        bottom: 45px
    }

    .partner-warp .partner-constellation__terrestrial-watermark {
        width: 100%;
        height: 100%
    }

    .partner-warp .partner-constellation__heading {
        margin-bottom: 55px
    }

    .partner-warp .partner-constellation__continuous-orbit:not(:last-child) {
        margin-bottom: 22px
    }

    .partner-warp .partner-constellation__continuous-orbit .swiper-slide {
        width: 190px;
        height: 92px;
        padding: 0 12px
    }

    .partner-warp .partner-constellation__continuous-orbit--beta {
        transform: translateX(-95px)
    }

    .partner-warp .partner-constellation__continuous-orbit--gamma {
        transform: translateX(-48px)
    }

    .partner-warp .partner-constellation__emblem-vessel {
        border-radius: 8px;
        box-shadow: 0 7px 24px rgba(31, 74, 125, 0.04)
    }
}

@media (max-width:640px) {
    .partner-warp {
        padding: 48px 0 52px
    }

    .partner-warp:before,
    .partner-warp:after {
        width: 32px;
        top: 105px;
        bottom: 30px
    }

    .partner-warp .partner-constellation__terrestrial-watermark {
        width: 100%;
        height: 100%
    }

    .partner-warp .partner-constellation__heading {
        margin-bottom: 38px
    }

    .partner-warp .partner-constellation__continuous-orbit:not(:last-child) {
        margin-bottom: 15px
    }

    .partner-warp .partner-constellation__continuous-orbit .swiper-slide {
        width: 145px;
        height: 74px;
        padding: 0 7px
    }

    .partner-warp .partner-constellation__continuous-orbit--beta {
        transform: translateX(-72px)
    }

    .partner-warp .partner-constellation__continuous-orbit--gamma {
        transform: translateX(-36px)
    }

    .partner-warp .partner-constellation__emblem-vessel {
        border-radius: 7px
    }
}

.proshow-1 {
    min-height: 48.125rem;
    padding-bottom: 8.125rem;
    position: relative;
    overflow: hidden;
    box-sizing: border-box;
    background-position: bottom center;
    background-repeat: no-repeat;
    background-size: cover
}

.proshow-1 .proshow-1-container {
    position: relative;
    z-index: 1;
    padding-top: 2.3125rem
}

.proshow-1 .proshow-1-breadcrumb {
    height: 1.875rem;
    display: flex;
    align-items: center;
    gap: .8125rem;
    color: #aeb9c4;
    font-size: 1.125rem;
    line-height: 1.875rem
}

.proshow-1 .proshow-1-breadcrumb a {
    display: flex;
    align-items: center;
    gap: .9375rem;
    color: #aeb9c4;
    transition: color .25s ease
}

.proshow-1 .proshow-1-breadcrumb a:hover {
    color: var(--main-color)
}

.proshow-1 .proshow-1-breadcrumb svg {
    width: 1.375rem;
    height: 1.375rem;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round
}

.proshow-1 .proshow-1-breadcrumb i {
    width: .5rem;
    height: .5rem;
    flex: none;
    border-top: 1px solid currentColor;
    border-right: 1px solid currentColor;
    transform: rotate(45deg)
}

.proshow-1 .proshow-1-breadcrumb>span {
    max-width: 24.375rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
}

.proshow-1 .proshow-1-main {
    width: 88.4375rem;
    margin: 4.75rem auto 0;
    display: grid;
    grid-template-columns: 40.375rem minmax(0, 1fr);
    gap: 5.625rem;
    align-items: start
}

.proshow-1 .proshow-1-product-visual {
    width: 40rem;
    height: 31.25rem;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border-radius: 1.875rem;
    background: #fff
}

.proshow-1 .proshow-1-product-visual img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center
}

.proshow-1 .proshow-1-product-copy {
    padding-top: 2.25rem
}

.proshow-1 .proshow-1-category {
    color: #4c7aa7;
    font-size: 1.875rem;
    line-height: 2.375rem;
    font-weight: 400
}

.proshow-1 .proshow-1-product-copy h1 {
    margin-top: .625rem;
    color: #052544;
    font-size: 3rem;
    line-height: 3.75rem;
    font-weight: 500
}

.proshow-1 .proshow-1-description {
    max-width: 40.625rem;
    margin-top: 1.4375rem;
    color: #4b5660;
    font-size: 1.375rem;
    line-height: 2.0625rem;
    font-weight: 400
}

.proshow-1 .proshow-1-actions {
    width: 33.5rem;
    height: 4.3125rem;
    margin-top: 3.5rem;
    display: grid;
    grid-template-columns: 1fr 1fr;
    overflow: hidden;
    border-radius: .5rem;
    background: #267bcd
}

.proshow-1 .proshow-1-actions a {
    min-width: 0;
    padding: 0 1.5rem 0 1.8125rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: #fff;
    font-size: 1.0625rem;
    line-height: 1.5rem;
    position: relative;
    transition: background-color .3s ease
}

.proshow-1 .proshow-1-actions a:first-child:after {
    content: "";
    width: 1px;
    height: 1.5625rem;
    position: absolute;
    top: 50%;
    right: 0;
    background: rgba(255, 255, 255, 0.28);
    transform: translateY(-50%)
}

.proshow-1 .proshow-1-actions a:hover {
    color: #fff;
    background: rgba(0, 74, 150, 0.25)
}

.proshow-1 .proshow-1-actions i {
    width: 2.75rem;
    height: 2.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: none;
    color: #1680d0;
    border-radius: 50%;
    background: #dceeff;
    transition: transform .3s ease
}

.proshow-1 .proshow-1-actions svg {
    width: 1.5625rem;
    height: 1.5625rem;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round
}

@media (max-width:1024px) {
    .proshow-1 {
        min-height: 0;
        margin-top: 60px;
        padding-bottom: 60px
    }

    .proshow-1 .proshow-1-container {
        padding-top: 28px;
        max-width: 760px !important
    }

    .proshow-1 .proshow-1-breadcrumb {
        height: 22px;
        gap: 10px;
        font-size: 14px;
        line-height: 22px;
        white-space: nowrap;
        overflow: hidden
    }

    .proshow-1 .proshow-1-breadcrumb a {
        gap: 9px
    }

    .proshow-1 .proshow-1-breadcrumb svg {
        width: 20px;
        height: 20px
    }

    .proshow-1 .proshow-1-breadcrumb i {
        width: 7px;
        height: 7px
    }

    .proshow-1 .proshow-1-breadcrumb>span {
        max-width: 300px
    }

    .proshow-1 .proshow-1-main {
        width: 100%;
        margin-top: 38px;
        display: block
    }

    .proshow-1 .proshow-1-product-visual {
        width: 100%;
        max-width: 646px;
        height: auto;
        margin: 0 auto;
        aspect-ratio: 1.292;
        border-radius: 22px
    }

    .proshow-1 .proshow-1-product-copy {
        padding-top: 38px
    }

    .proshow-1 .proshow-1-category {
        font-size: 24px;
        line-height: 32px
    }

    .proshow-1 .proshow-1-product-copy h1 {
        margin-top: 7px;
        font-size: 38px;
        line-height: 48px
    }

    .proshow-1 .proshow-1-description {
        max-width: 100%;
        margin-top: 24px;
        font-size: 18px;
        line-height: 31px
    }

    .proshow-1 .proshow-1-actions {
        width: 520px;
        max-width: 100%;
        height: 62px;
        margin-top: 34px;
        border-radius: 8px
    }

    .proshow-1 .proshow-1-actions a {
        padding: 0 20px 0 24px;
        font-size: 16px;
        line-height: 22px
    }

    .proshow-1 .proshow-1-actions a:first-child:after {
        height: 23px
    }

    .proshow-1 .proshow-1-actions i {
        width: 40px;
        height: 40px
    }

    .proshow-1 .proshow-1-actions a:hover i {
        transform: translateY(-2px)
    }

    .proshow-1 .proshow-1-actions svg {
        width: 23px;
        height: 23px
    }
}

@media (max-width:640px) {
    .proshow-1 {
        padding-bottom: 45px
    }

    .proshow-1 .proshow-1-container {
        padding-top: 22px
    }

    .proshow-1 .proshow-1-breadcrumb {
        font-size: 13px;
        gap: 8px
    }

    .proshow-1 .proshow-1-breadcrumb>span {
        max-width: 160px
    }

    .proshow-1 .proshow-1-main {
        margin-top: 28px
    }

    .proshow-1 .proshow-1-product-visual {
        border-radius: 16px
    }

    .proshow-1 .proshow-1-product-copy {
        padding-top: 28px
    }

    .proshow-1 .proshow-1-category {
        font-size: 20px;
        line-height: 28px
    }

    .proshow-1 .proshow-1-product-copy h1 {
        font-size: 30px;
        line-height: 38px
    }

    .proshow-1 .proshow-1-description {
        margin-top: 18px;
        font-size: 16px;
        line-height: 27px
    }

    .proshow-1 .proshow-1-actions {
        height: auto;
        margin-top: 27px;
        display: block;
        border-radius: 7px
    }

    .proshow-1 .proshow-1-actions a {
        height: 56px;
        padding: 0 15px 0 20px;
        font-size: 15px
    }

    .proshow-1 .proshow-1-actions a:first-child:after {
        width: auto;
        height: 1px;
        left: 18px;
        right: 18px;
        top: auto;
        bottom: 0;
        transform: none
    }

    .proshow-1 .proshow-1-actions i {
        width: 38px;
        height: 38px
    }

    .proshow-1 .proshow-1-actions svg {
        width: 22px;
        height: 22px
    }
}

.proshow-2 {
    padding: 3.75rem 0;
    overflow: hidden;
    box-sizing: border-box
}

.proshow-2 .proshow-2-title h2 {
    color: #1e1f24;
    font-size: 3rem;
    line-height: 1;
    font-weight: 400
}

.proshow-2 .proshow-2-title i {
    width: 10.5rem;
    height: .375rem;
    margin-top: .8125rem;
    display: block;
    border-radius: .1875rem;
    background: var(--main-color)
}

.proshow-2 .proshow-2-grid {
    margin-top: 3.25rem;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-auto-rows: 23.8125rem;
    gap: 1.875rem
}

.proshow-2 .proshow-2-card {
    padding: 1.9375rem 2.375rem 1.75rem;
    overflow: hidden;
    border-radius: 1.25rem;
    background: #fafafa;
    box-sizing: border-box;
    transition: transform .3s ease, box-shadow .3s ease, background-color .3s ease
}

.proshow-2 .proshow-2-card:hover {
    transform: translateY(-0.375rem);
    background: #fff;
    box-shadow: 0 1rem 2.625rem rgba(24, 75, 117, 0.1)
}

.proshow-2 .proshow-2-card h3 {
    margin-top: 1rem;
    color: #354351;
    font-size: 1.5rem;
    line-height: 1.9375rem;
    font-weight: 700
}

.proshow-2 .proshow-2-card p {
    margin-top: .75rem;
    color: #808991;
    font-size: 1.0625rem;
    line-height: 1.75rem;
    font-weight: 400
}

.proshow-2 .proshow-2-icon {
    width: 6rem;
    height: 6rem;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: none;
    overflow: hidden;
    border-radius: 50%;
    background: var(--main-color)
}

.proshow-2 .proshow-2-icon img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
    border-radius: 50%
}

.proshow-2 .proshow-2-peripherals {
    margin-top: 1.875rem
}

.proshow-2 .proshow-2-peripherals h2 {
    color: #1e1f24;
    font-size: 2.275rem;
    line-height: 2.25rem;
    font-weight: 500;
	margin-top: 1.25rem
}

.proshow-2 .proshow-2-peripherals h3 {
    color: #1e1f24;
    font-size: 1.875rem;
    line-height: 2.25rem;
    font-weight: 500
}

.proshow-2 .proshow-2-peripherals p {
    margin-top: 1.25rem;
    color: #1e1f24;
    font-size: 1.25rem;
    line-height: 2.25rem;
    font-weight: 400
}

.proshow-2 .proshow-2-peripherals table tr td,.proshow-2 .proshow-2-peripherals table tr th{
    color: #1e1f24;
    font-size: 1.25rem;
	padding:0.5em;
	
	border-width: 1px!important;
    border-style: solid!important;
    border-color: gainsboro!important;
}

.proshow-2 .proshow-2-peripherals ul li {
    margin-top: 1.25rem;
    color: #1e1f24;
    font-size: 1.25rem;
    line-height: 2.25rem;
    font-weight: 400
}

@media (max-width:1024px) {
    .proshow-2 {
        padding: 50px 0 46px
    }

    .proshow-2 .proshow-2-container {
        max-width: 760px !important
    }

    .proshow-2 .proshow-2-title h2 {
        font-size: 36px;
        line-height: 46px
    }

    .proshow-2 .proshow-2-title i {
        width: 130px;
        height: 5px;
        margin-top: 10px;
        border-radius: 3px
    }

    .proshow-2 .proshow-2-grid {
        margin-top: 38px;
        grid-template-columns: repeat(2, 1fr);
        grid-auto-rows: auto;
        gap: 18px
    }

    .proshow-2 .proshow-2-card {
        min-height: 330px;
        padding: 26px 25px;
        border-radius: 14px
    }

    .proshow-2 .proshow-2-card:hover {
        transform: translateY(-4px);
        box-shadow: 0 12px 32px rgba(24, 75, 117, 0.1)
    }

    .proshow-2 .proshow-2-card h3 {
        margin-top: 15px;
        font-size: 21px;
        line-height: 28px
    }

    .proshow-2 .proshow-2-card p {
        margin-top: 10px;
        font-size: 16px;
        line-height: 26px
    }

    .proshow-2 .proshow-2-icon {
        width: 82px;
        height: 82px
    }

    .proshow-2 .proshow-2-peripherals {
        margin-top: 30px
    }

	.proshow-2 .proshow-2-peripherals h2 {
		font-size: 33px;
		line-height: 42px
	}
	
    .proshow-2 .proshow-2-peripherals h3 {
        font-size: 25px;
        line-height: 33px
    }

    .proshow-2 .proshow-2-peripherals p {
        margin-top: 14px;
        font-size: 16px;
        line-height: 29px
    }
	
	.proshow-2 .proshow-2-peripherals ul li {
        margin-top: 14px;
        font-size: 16px;
        line-height: 29px
    }
	
	.proshow-2 .proshow-2-peripherals table tr td,.proshow-2 .proshow-2-peripherals table tr th{
		font-size: 16px;
		padding:10px;
	}
}

@media (max-width:640px) {
    .proshow-2 {
        padding: 42px 0 40px
    }

    .proshow-2 .proshow-2-title h2 {
        font-size: 30px;
        line-height: 39px
    }

    .proshow-2 .proshow-2-title i {
        width: 105px;
        height: 4px;
        margin-top: 8px
    }

    .proshow-2 .proshow-2-grid {
        margin-top: 30px;
        grid-template-columns: 1fr;
        gap: 14px
    }

    .proshow-2 .proshow-2-card {
        min-height: 0;
        padding: 23px 20px 25px;
        border-radius: 12px
    }

    .proshow-2 .proshow-2-card h3 {
        font-size: 20px;
        line-height: 27px
    }

    .proshow-2 .proshow-2-card p {
        font-size: 15px;
        line-height: 25px
    }

    .proshow-2 .proshow-2-icon {
        width: 74px;
        height: 74px
    }

    .proshow-2 .proshow-2-peripherals {
        margin-top: 26px
    }
	
	.proshow-2 .proshow-2-peripherals h2 {
		font-size: 30px;
		line-height: 38px
	}
	
    .proshow-2 .proshow-2-peripherals h3 {
        font-size: 23px;
        line-height: 31px
    }

    .proshow-2 .proshow-2-peripherals p {
        font-size: 15px;
        line-height: 27px
    }

	
	.proshow-2 .proshow-2-peripherals ul li {
        font-size: 15px;
    }
	
	.proshow-2 .proshow-2-peripherals table tr td,.proshow-2 .proshow-2-peripherals table tr th{
		font-size: 15px;
	}	
	
}

.proshow-3 {
    background-size: cover;
    background-repeat: no-repeat;
    background-position: top center;
    min-height: 50.9375rem;
    padding: 5.5rem 0 4.75rem;
    position: relative;
    overflow: hidden;
    box-sizing: border-box;
    background: #f4faff
}

.proshow-3 .proshow-3-container {
    position: relative;
    z-index: 1
}

.proshow-3 .proshow-3-container>h2 {
    color: #1e1f24;
    text-align: center;
    font-size: 3rem;
    line-height: 1;
    font-weight: 500
}

.proshow-3 .proshow-3-swiper {
    margin-top: 3rem;
    padding-bottom: 5.0625rem;
    overflow: hidden
}

.proshow-3 .swiper-slide {
    height: auto
}

.proshow-3 .proshow-3-card {
    background: url(../images/relatedpro-bg.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: top center;
    height: 28.125rem;
    display: block;
    position: relative;
    overflow: hidden;
    color: #082847;
    border-radius: .875rem;
    transition: transform .35s ease, box-shadow .35s ease
}

.proshow-3 .proshow-3-card:hover {
    color: #082847;
    box-shadow: 0 1.125rem 2.8125rem rgba(30, 95, 145, 0.14)
}

.proshow-3 .proshow-3-card:hover .proshow-3-image img {
    transform: scale(1.045)
}

.proshow-3 .proshow-3-card:hover .proshow-3-copy i {
    transform: rotate(45deg)
}

.proshow-3 .proshow-3-copy {
    padding: 2.6875rem 1.875rem 0;
    display: block;
    position: relative;
    z-index: 2;
    text-align: center
}

.proshow-3 .proshow-3-copy h3 {
    color: #072d51;
    font-size: 1.4375rem;
    line-height: 1.875rem;
    height: 1.875rem;
    font-weight: 500;
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    text-overflow: ellipsis;
    -webkit-line-clamp: 1
}

.proshow-3 .proshow-3-copy p {
    max-width: 22.5rem;
    margin: .5625rem auto 0;
    color: #818b95;
    font-size: 1rem;
    line-height: 1.5rem;
    height: 3rem;
    font-style: normal;
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    text-overflow: ellipsis;
    -webkit-line-clamp: 2
}

.proshow-3 .proshow-3-copy i {
    margin: 1.125rem auto 0;
    display: block
}

.proshow-3 .proshow-3-copy svg {
    width: 1.875rem;
    height: 1.875rem;
    fill: #aec3d8
}

.proshow-3 .proshow-3-image {
    margin-top: 1.5625rem;
    height: 13.75rem;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box
}

.proshow-3 .proshow-3-image img {
    display: block;
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    object-position: center;
    transition: transform .4s ease
}

.proshow-3 .proshow-3-pagination {
    bottom: 0
}

.proshow-3 .proshow-3-pagination .swiper-pagination-bullet {
    width: 1rem;
    height: 1rem;
    margin: 0 .5rem;
    opacity: 1;
    border-radius: 50%;
    background: #9fc9ea;
    transition: width .3s ease, border-radius .3s ease, background-color .3s ease
}

.proshow-3 .proshow-3-pagination .swiper-pagination-bullet-active {
    width: 1.875rem;
    border-radius: .5625rem;
    background: #2685d1
}

@media (max-width:1024px) {
    .proshow-3 {
        min-height: 0;
        padding: 55px 0 50px
    }

    .proshow-3 .proshow-3-container {
        max-width: 760px !important
    }

    .proshow-3 .proshow-3-container>h2 {
        font-size: 36px;
        line-height: 46px
    }

    .proshow-3 .proshow-3-swiper {
        margin-top: 36px;
        padding-bottom: 60px
    }

    .proshow-3 .proshow-3-card {
        height: 430px;
        border-radius: 12px
    }

    .proshow-3 .proshow-3-card:hover {
        transform: translateY(-5px);
        box-shadow: 0 14px 36px rgba(30, 95, 145, 0.14)
    }

    .proshow-3 .proshow-3-copy {
        padding: 35px 22px 0
    }

    .proshow-3 .proshow-3-copy h3 {
        font-size: 20px;
        line-height: 28px;
        height: 28px
    }

    .proshow-3 .proshow-3-copy p {
        max-width: 320px;
        margin-top: 8px;
        font-size: 15px;
        line-height: 24px;
        height: 48px
    }

    .proshow-3 .proshow-3-copy svg {
        width: 20px;
        height: 20px
    }

    .proshow-3 .proshow-3-pagination .swiper-pagination-bullet {
        width: 14px;
        height: 14px;
        margin: 0 7px
    }

    .proshow-3 .proshow-3-pagination .swiper-pagination-bullet-active {
        width: 28px;
        border-radius: 8px
    }
}

@media (max-width:640px) {
    .proshow-3 {
        padding: 44px 0 40px
    }

    .proshow-3 .proshow-3-container>h2 {
        font-size: 30px;
        line-height: 39px
    }

    .proshow-3 .proshow-3-swiper {
        margin-top: 28px;
        padding-bottom: 50px;
        overflow: visible
    }

    .proshow-3 .proshow-3-card {
        height: 400px;
        border-radius: 10px
    }

    .proshow-3 .proshow-3-copy {
        padding: 29px 18px 0
    }

    .proshow-3 .proshow-3-pagination .swiper-pagination-bullet {
        width: 12px;
        height: 12px;
        margin: 0 6px
    }

    .proshow-3 .proshow-3-pagination .swiper-pagination-bullet-active {
        width: 25px
    }
}

.proshow-4 {
    min-height: 98.125rem;
    padding: 6.25rem 0 8.125rem;
    position: relative;
    overflow: hidden;
    color: #fff;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: bottom center;
    box-sizing: border-box
}

.proshow-4 .proshow-4-container {
    position: relative;
    z-index: 1
}

.proshow-4 h2 {
    margin: 0 0 3.125rem;
    color: #fff;
    text-align: center;
    font-size: 3.25rem;
    line-height: 1;
    font-weight: 700
}

.proshow-4 fieldset {
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0
}

.proshow-4 legend {
    width: 100%;
    padding: 0;
    color: #fff
}

.proshow-4 input,
.proshow-4 button {
    font-family: inherit;
    box-sizing: border-box
}

.proshow-4 .proshow-4-panel {
    padding: 3.75rem 2rem 2.9375rem;
    border: 1px solid #a2c3e2;
    border-radius: 1.4375rem;
    background: rgba(0, 38, 74, 0.3);
    box-sizing: border-box;
    box-shadow: inset 0 0 2.8125rem rgba(255, 255, 255, 0.025);
    backdrop-filter: blur(.0625rem)
}

.proshow-4 .proshow-4-contact legend,
.proshow-4 .proshow-4-panel>h3 {
    padding-left: .875rem;
    position: relative;
    color: #fff;
    font-size: 1.625rem;
    line-height: 1.875rem;
    font-weight: 500;
    box-sizing: border-box
}

.proshow-4 .proshow-4-contact legend::before,
.proshow-4 .proshow-4-panel>h3::before {
    width: .25rem;
    height: 1.4375rem;
    position: absolute;
    top: .1875rem;
    left: 0;
    content: "";
    border-radius: .125rem;
    background: #218ce0
}

.proshow-4 .proshow-4-contact-grid {
    margin-top: 1.125rem;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: .9375rem
}

.proshow-4 .proshow-4-contact-grid label {
    display: block
}

.proshow-4 .proshow-4-contact-grid span {
    padding-left: 1.6875rem;
	padding-left: 0!important;
    display: block;
    position: relative;
    color: #fff;
    font-size: 1.25rem;
    line-height: 1.5625rem;
    font-weight: 500
}

.proshow-4 .proshow-4-contact-grid span:before {
    width: .875rem;
    height: .875rem;
    position: absolute;
    top: .25rem;
    left: .125rem;
    content: "";
    border: .0625rem solid rgba(255, 255, 255, 0.68);
    border-radius: 50%;
	display:none!important;
    box-sizing: border-box
}

.proshow-4 .proshow-4-contact-grid span.contact-phone::before {
    border-radius: .1875rem;
    transform: rotate(42deg)
}

.proshow-4 .proshow-4-contact-grid span.contact-email::before {
    border-radius: .0625rem
}

.proshow-4 .proshow-4-contact-grid span.contact-company::before {
    border-radius: 0;
    box-shadow: .25rem -0.25rem 0 -0.125rem rgba(255, 255, 255, 0.68)
}

.proshow-4 .proshow-4-contact-grid em {
    color: #ff1424;
    font-style: normal
}

.proshow-4 .proshow-4-contact-grid input {
    width: 100%;
    height: 3.75rem;
    margin-top: .625rem;
    padding: 0 .9375rem;
    color: #17364f;
    font-size: 1rem;
    line-height: 3.5rem;
    outline: 0;
    border: .125rem solid #bad5ef;
    background: rgba(238, 246, 252, 0.55);
    transition: background-color .25s ease, border-color .25s ease, box-shadow .25s ease
}

.proshow-4 .proshow-4-contact-grid input:focus {
    border-color: #fff;
    background: rgba(255, 255, 255, 0.92)
}

.proshow-4 .proshow-4-panel>h3 {
    margin: 2.75rem 0 1.5625rem
}

.proshow-4 .proshow-4-fields-box {
    width: 100%;
    box-sizing: border-box
}

.proshow-4 .proshow-4-specification-grid {
    padding: 0 .625rem;
    display: grid;
    grid-template-columns: 1fr 1.1fr 1.42fr;
    gap: 3.25rem
}

.proshow-4 .proshow-4-specification-grid .proshow-4-column>fieldset:last-child {
    margin-bottom: 0
}

.proshow-4 .proshow-4-column {
    min-width: 0
}

.proshow-4 .proshow-4-choice-group,
.proshow-4 .proshow-4-data-group {
    margin-bottom: 2.6875rem;
    color: rgba(255, 255, 255, 0.88);
    font-size: 1.25rem;
    line-height: 1.625rem
}

.proshow-4 .proshow-4-choice-group legend,
.proshow-4 .proshow-4-data-group legend {
    margin-bottom: 1.875rem;
    font-size: 1.375rem;
    line-height: 1.6875rem;
    font-weight: 400
}

.proshow-4 .proshow-4-choice-group legend em,
.proshow-4 .proshow-4-data-group legend em {
    color: #ff1424;
    font-style: normal
}

.proshow-4 .proshow-4-choice-group>label,
.proshow-4 .proshow-4-choice-group .proshow-4-process-grid label,
.proshow-4 .proshow-4-choice-group .proshow-4-utilities label {
    min-height: 1.625rem;
    margin-bottom: 1.25rem;
    display: flex;
    align-items: flex-start;
    position: relative;
    cursor: pointer;
    user-select: none
}

.proshow-4 .proshow-4-choice-group input[type="radio"],
.proshow-4 .proshow-4-choice-group input[type="checkbox"] {
    width: .875rem;
    height: .875rem;
    margin: .4375rem .625rem 0 0;
    position: relative;
    flex: 0 0 auto;
    appearance: none;
    outline: 0;
    border: 1px solid rgba(255, 255, 255, 0.5);
    background: rgba(255, 255, 255, 0.82);
    cursor: pointer;
    transition: border-color .2s ease, background-color .2s ease
}

.proshow-4 .proshow-4-choice-group input[type="radio"] {
    border-radius: 50%
}

.proshow-4 .proshow-4-choice-group input[type="radio"]:checked {
    border: .375rem solid #267bcd;
    background: #267bcd
}

.proshow-4 .proshow-4-choice-group input[type="checkbox"]:checked {
    border-color: #267bcd;
    width: .875rem;
    height: .875rem
}

.proshow-4 .proshow-4-choice-group input[type="checkbox"]:checked::after {
    width: .625rem;
    height: .3125rem;
    position: absolute;
    top: .1875rem;
    left: .125rem;
    content: "";
    border-left: .125rem solid #267bcd;
    border-bottom: .125rem solid #267bcd;
    transform: rotate(-45deg)
}

.proshow-4 .proshow-4-choice-group span {
    display: block
}

.proshow-4 .proshow-4-data-group label {
    margin-bottom: .6875rem;
    display: block;
    white-space: nowrap
}

.proshow-4 .proshow-4-data-group input {
    width: 4.625rem;
    height: 1.5625rem;
    padding: 0 .25rem;
    color: #fff;
    font-size: .9375rem;
    outline: 0;
    border: 0;
    transform: translateY(-0.375rem);
    border-bottom: 1px solid rgba(255, 255, 255, 0.68);
    background: transparent
}

.proshow-4 .proshow-4-data-group input:focus {
    border-color: #fff
}

.proshow-4 .proshow-4-filling-parameters input {
    width: 7.875rem
}

.proshow-4 .proshow-4-filling-parameters label:first-of-type input {
    width: 3rem
}

.proshow-4 .proshow-4-bottom-fields {
    margin-top: 2rem;
    padding: 0 .625rem;
    display: grid;
    grid-template-columns: 1fr 2.52fr;
    gap: 3.25rem
}

.proshow-4 .proshow-4-installation {
    margin-bottom: 0
}

.proshow-4 .proshow-4-installation input {
    width: 2.8125rem
}

.proshow-4 .proshow-4-process-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 1.25rem
}

.proshow-4 .proshow-4-mechanical {
    margin-top: 3.625rem;
    margin-bottom: 0
}

.proshow-4 .proshow-4-mechanical p {
    margin: 0 0 .625rem
}

.proshow-4 .proshow-4-mechanical p:nth-of-type(2) {
    margin-top: 1.9375rem
}

.proshow-4 .proshow-4-secondary-fields {
    width: 100%;
    margin-top: 2.5rem;
    padding: 0 .625rem;
    display: grid;
    grid-template-columns: 1fr 1.1fr 1.42fr;
    gap: 3.25rem;
    box-sizing: border-box
}

.proshow-4 .proshow-4-secondary-fields .proshow-4-secondary-column {
    min-width: 0
}

.proshow-4 .proshow-4-secondary-fields .proshow-4-secondary-column>fieldset:last-child {
    margin-bottom: 0
}

.proshow-4 .proshow-4-secondary-fields .proshow-4-mechanical {
    margin-top: 0
}

.proshow-4 .proshow-4-utilities {
    margin-bottom: 0
}

.proshow-4 .proshow-4-utilities>div {
    display: flex;
    align-items: center;
    gap: 1.375rem
}

.proshow-4 .proshow-4-utilities span {
    display: inline-block
}

.proshow-4 .proshow-4-utilities label {
    margin-bottom: 0
}

.proshow-4 .proshow-4-utilities .proshow-4-inline-input {
    width: 3.8125rem;
    height: 1.5625rem;
    margin-left: -1.225rem;
    color: #fff;
    font-size: .9375rem;
    outline: 0;
    border: 0;
    border-bottom: .0625rem solid rgba(255, 255, 255, 0.68);
    background: transparent
}

.proshow-4 .proshow-4-utilities input[type="checkbox"] {
    margin-top: -0.25rem !important
}

.proshow-4 .proshow-4-notice {
    margin: 1.625rem 1.5rem 0;
    color: #fff;
    font-size: 1.5rem;
    line-height: 2.25rem;
    font-weight: 500
}

.proshow-4 .proshow-4-notice a {
    color: #f61922
}

.proshow-4 .proshow-4-notice a:hover {
    color: #fff
}

.proshow-4 .proshow-4-actions {
    margin: 3.75rem 1.8125rem 0;
    display: flex;
    gap: 1.25rem
}

.proshow-4 .proshow-4-actions button {
    border-radius: .3125rem;
    min-width: 11.25rem;
    height: 3.125rem;
    color: #fff;
    font-size: 1.125rem;
    font-weight: 600;
    cursor: pointer;
    border: 1px solid #1283d8;
    background: #1283d8;
    transition: color .25s ease, background-color .25s ease, transform .25s ease
}

.proshow-4 .proshow-4-actions button:hover {
    transform: translateY(-0.125rem);
    background: #0870c1
}

.proshow-4 .proshow-4-actions button[type="reset"] {
    color: #0b78cb;
    background: transparent
}

.proshow-4 .proshow-4-actions button[type="reset"]:hover {
    color: #fff;
    background: #1283d8
}

@media (max-width:1024px) {
    .proshow-4 {
        min-height: 0;
        padding: 55px 0 60px
    }

    .proshow-4 .proshow-4-container {
        max-width: 920px !important
    }

    .proshow-4 h2 {
        margin-bottom: 32px;
        font-size: 36px;
        line-height: 46px
    }

    .proshow-4 .proshow-4-panel {
        padding: 32px 25px 36px;
        border-width: 1px;
        border-radius: 18px;
        backdrop-filter: blur(1px)
    }

    .proshow-4 .proshow-4-contact legend,
    .proshow-4 .proshow-4-panel>h3 {
        padding-left: 13px;
        font-size: 20px;
        line-height: 28px
    }

    .proshow-4 .proshow-4-contact legend::before,
    .proshow-4 .proshow-4-panel>h3::before {
        width: 4px;
        height: 22px;
        top: 3px;
        border-radius: 2px
    }

    .proshow-4 .proshow-4-contact-grid {
        margin-top: 17px;
        grid-template-columns: repeat(2, 1fr);
        gap: 17px 15px
    }

    .proshow-4 .proshow-4-contact-grid span {
        padding-left: 25px;
        font-size: 16px;
        line-height: 24px
    }

    .proshow-4 .proshow-4-contact-grid span::before {
        width: 14px;
        height: 14px;
        top: 4px;
        left: 2px;
        border-width: 1px
    }

    .proshow-4 .proshow-4-contact-grid span .contact-company::before {
        box-shadow: 4px -4px 0 -2px rgba(255, 255, 255, 0.68)
    }

    .proshow-4 .proshow-4-contact-grid input {
        height: 48px;
        margin-top: 8px;
        padding: 0 14px;
        font-size: 16px;
        line-height: 48px;
        border-width: 1px
    }

    .proshow-4 .proshow-4-contact-grid input:focus {
        box-shadow: 0 0 0 3px rgba(38, 133, 209, 0.25)
    }

    .proshow-4 .proshow-4-panel>h3 {
        margin: 36px 0 24px
    }

    .proshow-4 .proshow-4-specification-grid {
        padding: 0 6px;
        grid-template-columns: 1fr 1fr;
        gap: 10px 45px
    }

    .proshow-4 .proshow-4-column {
        display: contents
    }

    .proshow-4 .proshow-4-choice-group,
    .proshow-4 .proshow-4-data-group {
        margin-bottom: 30px;
        font-size: 16px;
        line-height: 25px
    }

    .proshow-4 .proshow-4-choice-group legend,
    .proshow-4 .proshow-4-data-group legend {
        margin-bottom: 13px;
        font-size: 18px;
        line-height: 26px
    }

    .proshow-4 .proshow-4-choice-group>label,
    .proshow-4 .proshow-4-choice-group .proshow-4-process-grid label,
    .proshow-4 .proshow-4-choice-group .proshow-4-utilities label {
        min-height: 25px;
        margin-bottom: 9px
    }

    .proshow-4 .proshow-4-choice-group input[type="radio"],
    .proshow-4 .proshow-4-choice-group input[type="checkbox"] {
        width: 14px;
        height: 14px;
        margin: 5px 9px 0 0;
        border-width: 1px
    }
	
		
	.proshow-4 .proshow-4-choice-group input[type="checkbox"]:checked {
		width: 14px;
        height: 14px;
	}

    .proshow-4 .proshow-4-choice-group input[type="radio"]:checked {
        border-width: 4px
    }

    .proshow-4 .proshow-4-choice-group input[type="checkbox"]:checked::after {
        width: 7px;
        height: 4px;
        top: 3px;
        left: 2px;
        border-width: 0 0 2px 2px
    }

    .proshow-4 .proshow-4-data-group label {
        margin-bottom: 10px
    }

    .proshow-4 .proshow-4-data-group input {
        width: 70px;
        height: 24px;
        padding: 0 4px;
        font-size: 16px;
        border-bottom-width: 1px
    }

    .proshow-4 .proshow-4-filling-parameters input {
        width: 120px
    }

    .proshow-4 .proshow-4-filling-parameters label:first-of-type input {
        width: 45px
    }

    .proshow-4 .proshow-4-bottom-fields {
        margin-top: 4px;
        padding: 0 6px;
        grid-template-columns: 1fr 1fr;
        gap: 45px
    }

    .proshow-4 .proshow-4-installation,
    .proshow-4 .proshow-4-mechanical,
    .proshow-4 .proshow-4-utilities {
        margin-top: 0;
        margin-bottom: 30px
    }

    .proshow-4 .proshow-4-installation input {
        width: 44px
    }

    .proshow-4 .proshow-4-process-grid {
        grid-template-columns: 1fr;
        gap: 0
    }

    .proshow-4 .proshow-4-mechanical p {
        margin-bottom: 9px
    }

    .proshow-4 .proshow-4-mechanical p:nth-of-type(2) {
        margin-top: 24px
    }

    .proshow-4 .proshow-4-secondary-fields {
        margin-top: 34px;
        padding: 0 6px;
        grid-template-columns: 1fr 1fr;
        gap: 30px 45px
    }

    .proshow-4 .proshow-4-secondary-fields .proshow-4-secondary-column {
        min-width: 0
    }

    .proshow-4 .proshow-4-secondary-fields .proshow-4-secondary-column:last-child {
        grid-column: -1
    }

    .proshow-4 .proshow-4-secondary-fields .proshow-4-mechanical {
        margin-bottom: 0
    }

    .proshow-4 .proshow-4-utilities>div {
        flex-wrap: wrap;
        gap: 8px 20px
    }

    .proshow-4 .proshow-4-utilities .proshow-4-inline-input {
        width: 60px;
        height: 24px;
        margin-left: -24px;
        font-size: 16px;
        border-bottom-width: 1px
    }

    .proshow-4 .proshow-4-notice {
        margin: 22px 10px 0;
        font-size: 16px;
        line-height: 27px
    }

    .proshow-4 .proshow-4-actions {
        margin: 30px 10px 0;
        gap: 14px
    }

    .proshow-4 .proshow-4-actions button {
        width: 145px;
        height: 44px;
        font-size: 16px;
        border-width: 1px
    }

    .proshow-4 .proshow-4-actions button:hover {
        transform: translateY(-2px)
    }
}

@media (max-width:640px) {
    .proshow-4 {
        padding: 43px 0 48px
    }

    .proshow-4 h2 {
        margin-bottom: 25px;
        font-size: 30px;
        line-height: 39px
    }

    .proshow-4 .proshow-4-panel {
        padding: 25px 16px 28px;
        border-radius: 14px
    }

    .proshow-4 .proshow-4-contact-grid {
        grid-template-columns: 1fr;
        gap: 14px
    }

    .proshow-4 .proshow-4-panel>h3 {
        margin: 31px 0 22px;
        font-size: 18px;
        line-height: 26px
    }

    .proshow-4 .proshow-4-specification-grid {
        padding: 0;
        display: block
    }

    .proshow-4 .proshow-4-column {
        display: block
    }

    .proshow-4 .proshow-4-choice-group,
    .proshow-4 .proshow-4-data-group {
        margin-bottom: 28px;
        font-size: 15px;
        line-height: 24px
    }

    .proshow-4 .proshow-4-choice-group legend,
    .proshow-4 .proshow-4-data-group legend {
        font-size: 17px;
        line-height: 25px
    }

    .proshow-4 .proshow-4-process-grid {
        grid-template-columns: 1fr 1fr;
        gap: 0 10px
    }

    .proshow-4 .proshow-4-data-group label {
        white-space: normal
    }

    .proshow-4 .proshow-4-secondary-fields {
        margin-top: 28px;
        padding: 0;
        grid-template-columns: 1fr;
        gap: 28px
    }

    .proshow-4 .proshow-4-secondary-fields .proshow-4-secondary-column:last-child {
        grid-column: auto
    }

    .proshow-4 .proshow-4-bottom-fields {
        margin-top: 2px;
        padding: 0;
        grid-template-columns: 1fr;
        gap: 0
    }

    .proshow-4 .proshow-4-installation,
    .proshow-4 .proshow-4-mechanical,
    .proshow-4 .proshow-4-utilities {
        margin-top: 0;
        margin-bottom: 28px
    }

    .proshow-4 .proshow-4-utilities>div {
        gap: 6px 10px
    }
	
	.proshow-4 .proshow-4-utilities .proshow-4-inline-input {
		margin-left: -8px;
	}

    .proshow-4 .proshow-4-notice {
        margin: 20px 2px 0;
        font-size: 14px;
        line-height: 23px
    }

    .proshow-4 .proshow-4-actions {
        margin: 25px 2px 0;
        gap: 10px
    }

    .proshow-4 .proshow-4-actions button {
        width: 50%;
        height: 44px
    }
}

.faq-content {
    padding: 5rem 0 7.5rem 0;
    overflow: hidden;
    background: #f5f7f8;
    box-sizing: border-box
}

.faq-content .faq-content-heading {
    text-align: center
}

.faq-content .faq-content-heading h2 {
    color: #1e1f24;
    font-size: 2.8125rem;
    line-height: 1;
    font-weight: 500
}

.faq-content .faq-content-heading p {
    color: #2a3b4c;
    font-size: 1.25rem;
    line-height: 1.6875rem;
    font-weight: 400;
    max-width: 62.5rem;
    margin: 0 auto;
    margin-top: 1.375rem
}

.faq-content .faq-content-search {
    width: 43.75rem;
    height: 4.375rem;
    margin: 2.375rem auto 0;
    padding: .25rem;
    display: flex;
    align-items: center;
    border: 1px solid #d8dde2;
    border-radius: 2.25rem;
    background: #fff;
    box-sizing: border-box;
    box-shadow: 0 .4375rem 1.5rem rgba(42, 69, 91, 0.025)
}

.faq-content .faq-content-search label {
    min-width: 0;
    height: 100%;
    display: block;
    flex: 1
}

.faq-content .faq-content-search input {
    width: 100%;
    height: 100%;
    padding: 0 1.5rem;
    color: #333b43;
    font-family: inherit;
    font-size: 1rem;
    line-height: 3.75rem;
    outline: 0;
    border: 0;
    background: transparent;
    box-sizing: border-box
}

.faq-content .faq-content-search input::placeholder {
    color: #bdc1c5
}

.faq-content .faq-content-search button {
    width: 3.75rem;
    height: 3.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: none;
    color: #fff;
    cursor: pointer;
    border: 0;
    border-radius: 50%;
    background: #087ad2;
    box-shadow: 0 .25rem .75rem rgba(8, 122, 210, 0.22);
    transition: transform .25s ease, background-color .25s ease
}

.faq-content .faq-content-search button:hover {
    transform: scale(1.045);
    background: #006bbd
}

.faq-content .faq-content-search button svg {
    width: 1.75rem;
    height: 1.75rem;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round
}

.faq-content .faq-content-sr-only {
    width: 1px;
    height: 1px;
    padding: 0;
    position: absolute;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0
}

.faq-content .faq-content-panel {
    margin-top: 3.75rem;
    padding: 2.625rem 5rem 5.625rem;
    overflow: hidden;
    border-radius: 2.5rem;
    background: #fff;
    box-sizing: border-box;
    box-shadow: 0 1.125rem 3.625rem rgba(29, 61, 88, 0.055)
}

.faq-content .faq-content-list {
    margin: 0;
    padding: 0;
    list-style: none
}

.faq-content .faq-content-list>li {
    padding: 2.625rem 0 2.625rem;
    border-bottom: 1px solid #c7c3bf;
    box-sizing: border-box
}

.faq-content .faq-content-question,
.faq-content .faq-content-answer {
    display: grid;
    grid-template-columns: 2.625rem minmax(0, 1fr);
    column-gap: 1.375rem;
    align-items: start
}

.faq-content .faq-content-question i,
.faq-content .faq-content-answer i {
    width: 2.25rem;
    height: 2.25rem;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 1.125rem;
    line-height: 2.25rem;
    font-style: normal;
    border-radius: 50%;
    background: #9cbbd9;
    box-sizing: border-box
}

.faq-content .faq-content-question {
    padding-right: 2.625rem;
    position: relative;
    cursor: pointer
}

.faq-content .faq-content-question h3 {
    color: #3f3e3c;
    font-size: 1.5rem;
    line-height: 1.875rem;
    font-weight: 500;
    transition: color .3s ease
}

.faq-content .faq-content-question>span {
    width: 1rem;
    height: .125rem;
    position: absolute;
    top: 1.0625rem;
    right: .25rem;
    background: #70757a;
    transition: background-color .3s ease, transform .3s ease
}

.faq-content .faq-content-question>span:after {
    content: "";
    width: .125rem;
    height: 1rem;
    position: absolute;
    left: 50%;
    top: 50%;
    background: inherit;
    transform: translate(-50%, -50%)
}

.faq-content .faq-content-list>li.active .faq-content-question h3 {
    color: var(--main-color)
}

.faq-content .faq-content-list>li.active .faq-content-question>span {
    background: var(--main-color)
}

.faq-content .faq-content-list>li.active .faq-content-question>span:after {
    display: none
}

.faq-content .faq-content-answer {
    margin-top: .8125rem
}

.faq-content .faq-content-answer i {
    background: #d3d3d3
}

.faq-content .faq-content-answer p {
    font-size: 1.125rem;
    padding-top: .125rem;
    color: #74797e;
    line-height: 1.75rem;
    font-weight: 400
}

.faq-content .faq-content-answer p em {
    color: #f13b34;
    font-style: normal;
    text-decoration: underline
}

.faq-content .faq-content-answer p strong {
    color: #f13b34;
    font-weight: 700
}

@media (max-width:1024px) {
    .faq-content {
        padding: 58px 0 64px
    }

    .faq-content .faq-content-container {
        max-width: 920px !important
    }

    .faq-content .faq-content-heading h2 {
        font-size: 36px;
        line-height: 46px
    }

    .faq-content .faq-content-heading p {
        margin-top: 16px;
        font-size: 16px;
        line-height: 26px
    }

    .faq-content .faq-content-search {
        width: 620px;
        max-width: 100%;
        height: 62px;
        margin-top: 30px;
        padding: 4px;
        border-width: 1px;
        border-radius: 32px;
        box-shadow: 0 6px 20px rgba(42, 69, 91, 0.025)
    }

    .faq-content .faq-content-search input {
        padding: 0 22px;
        font-size: 16px;
        line-height: 52px
    }

    .faq-content .faq-content-search button {
        width: 52px;
        height: 52px;
        box-shadow: 0 4px 11px rgba(8, 122, 210, 0.22)
    }

    .faq-content .faq-content-search button svg {
        width: 25px;
        height: 25px
    }

    .faq-content .faq-content-sr-only {
        width: 1px;
        height: 1px
    }

    .faq-content .faq-content-panel {
        margin-top: 46px;
        padding: 30px 38px 60px;
        border-radius: 28px;
        box-shadow: 0 15px 45px rgba(29, 61, 88, 0.055)
    }

    .faq-content .faq-content-list>li {
        padding: 25px 0 30px;
        border-bottom-width: 1px
    }

    .faq-content .faq-content-question,
    .faq-content .faq-content-answer {
        grid-template-columns: 38px minmax(0, 1fr);
        column-gap: 16px
    }

    .faq-content .faq-content-question i,
    .faq-content .faq-content-answer i {
        width: 34px;
        height: 34px;
        font-size: 15px;
        line-height: 34px
    }

    .faq-content .faq-content-question {
        padding-right: 34px
    }

    .faq-content .faq-content-question h3 {
        padding-top: 3px;
        font-size: 19px;
        line-height: 27px
    }

    .faq-content .faq-content-question>span {
        width: 14px;
        height: 2px;
        top: 16px;
        right: 3px
    }

    .faq-content .faq-content-answer {
        margin-top: 11px
    }

    .faq-content .faq-content-answer p {
        padding-top: 1px;
        font-size: 15px;
        line-height: 26px
    }
}

@media (max-width:640px) {
    .faq-content {
        padding: 43px 0 48px
    }

    .faq-content .faq-content-heading h2 {
        font-size: 29px;
        line-height: 38px
    }

    .faq-content .faq-content-heading p {
        margin-top: 13px;
        font-size: 15px;
        line-height: 24px
    }

    .faq-content .faq-content-heading p br {
        display: none
    }

    .faq-content .faq-content-search {
        height: 56px;
        margin-top: 25px;
        border-radius: 29px
    }

    .faq-content .faq-content-search input {
        padding: 0 13px;
        font-size: 16px;
        line-height: 48px
    }

    .faq-content .faq-content-search button {
        width: 48px;
        height: 48px
    }

    .faq-content .faq-content-panel {
        margin-top: 34px;
        padding: 17px 17px 38px;
        border-radius: 20px
    }

    .faq-content .faq-content-list>li {
        padding: 22px 0 25px
    }

    .faq-content .faq-content-question,
    .faq-content .faq-content-answer {
        grid-template-columns: 31px minmax(0, 1fr);
        column-gap: 11px
    }

    .faq-content .faq-content-question i,
    .faq-content .faq-content-answer i {
        width: 29px;
        height: 29px;
        font-size: 13px;
        line-height: 29px
    }

    .faq-content .faq-content-question {
        padding-right: 23px
    }

    .faq-content .faq-content-question h3 {
        padding-top: 1px;
        font-size: 17px;
        line-height: 24px
    }

    .faq-content .faq-content-question>span {
        width: 12px;
        top: 14px;
        right: 1px
    }
	.faq-content .faq-content-question > span:after{
        height: 12px;
		width: 2px;
    }

    .faq-content .faq-content-answer {
        margin-top: 10px
    }

    .faq-content .faq-content-answer p {
        font-size: 14px;
        line-height: 24px
    }
}

.faq-content-pagination {
    margin-top: 5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .875rem
}

.faq-content-pagination a {
    width: 2.5rem;
    height: 2.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #555c62;
    font-size: .75rem;
    line-height: 1;
    border: .0625rem solid #e0e5e9;
    border-radius: 50%;
    box-sizing: border-box;
    transition: color .25s ease, border-color .25s ease, background-color .25s ease
}

.faq-content-pagination a:hover,
.faq-content-pagination a.active {
    color: #fff;
    border-color: #087ad2;
    background: #087ad2
}

.faq-content-pagination .prev,
.faq-content-pagination .next {
    min-width: 6.625rem;
    gap: .6875rem;
    border-radius: 1.3125rem
}

.faq-content-pagination .prev i,
.faq-content-pagination .next i {
    width: .375rem;
    height: .375rem;
    border-bottom: .0625rem solid currentColor;
    border-left: .0625rem solid currentColor;
    transform: rotate(45deg)
}

.faq-content-pagination .next i {
    transform: rotate(225deg)
}

@media (max-width:1024px) {
    .faq-content-pagination {
        margin-top: 55px;
        gap: 11px
    }

    .faq-content-pagination a {
        width: 38px;
        height: 38px;
        font-size: 12px;
        border-width: 1px
    }

    .faq-content-pagination .prev,
    .faq-content-pagination .next {
        width: 96px;
        gap: 9px;
        border-radius: 20px
    }

    .faq-content-pagination .prev i,
    .faq-content-pagination .next i {
        width: 6px;
        height: 6px;
        border-width: 0 0 1px 1px
    }
}

@media (max-width:640px) {
    .faq-content-pagination {
        margin-top: 37px;
        gap: 7px
    }

    .faq-content-pagination a {
        width: 34px;
        height: 34px;
        font-size: 11px
    }

    .faq-content-pagination .prev,
    .faq-content-pagination .next {
        width: 68px;
        gap: 5px;
        font-size: 10px
    }
}

.about-content,
.company-hardware,
.honor-content,
.partner-content {
    scroll-margin-top: 8rem
}

@media (max-width:1024px) {

    .about-content,
    .company-hardware,
    .honor-content,
    .partner-content {
        scroll-margin-top: 70px
    }
}

.customized-content {
    min-height: 31.25rem;
    padding: 6.25rem 0;
    overflow: hidden;
    background: linear-gradient(180deg, #fff 0, #fff 76%, #edf4fb 100%);
    box-sizing: border-box
}

.customized-content .customized-heading {
    text-align: center
}

.customized-content h2 {
    color: #1e1f24;
    font-size: 3.25rem;
    line-height: 1.15;
    font-weight: 700
}

.customized-content .customized-heading p {
    margin: 1.25rem auto 0;
    color: #3e4857;
    font-size: 1.125rem;
    line-height: 1.875rem;
    font-weight: 400
}

.customized-content .customized-list {
    max-width: 79.375rem;
    margin: 2.8125rem auto 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    padding: 0 1.25rem;
    justify-content: space-between;
    grid-template-columns: repeat(7, 1fr);
    list-style: none;
    position: relative
}

.customized-content .customized-list:after {
    content: "";
    height: .0625rem;
    left: 0;
    right: 0;
    bottom: 0;
    position: absolute;
    background: #86b9eb
}

.customized-content .customized-list li {
    padding-bottom: 1.25rem;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative
}

.customized-content .customized-list li:after {
    content: "";
    width: .625rem;
    height: .625rem;
    left: 50%;
    bottom: -0.25rem;
    z-index: 1;
    position: absolute;
    border-radius: 50%;
    background: #0874ca;
    transform: translateX(-50%)
}

.customized-content .customized-list img {
    width: 3.75rem;
    height: 3.75rem;
    display: block;
    object-fit: contain
}

.customized-content .customized-list h3 {
    margin-top: .75rem;
    color: #244260;
    font-size: 1.25rem;
    line-height: 1.75rem;
    font-weight: 400;
    white-space: nowrap
}

@media (max-width:1024px) {
    .customized-content {
        min-height: 0;
        padding: 58px 0 64px
    }

    .customized-content h2 {
        font-size: 36px;
        line-height: 44px
    }

    .customized-content .customized-heading p {
        max-width: 900px;
        margin-top: 16px;
        font-size: 16px;
        line-height: 26px;
        text-align: center;
        text-align-last: auto
    }

    .customized-content .customized-heading p br {
        display: none
    }

    .customized-content .customized-list {
        max-width: 640px;
        margin-top: 42px;
        justify-content: flex-start;
        gap: 38px 18px
    }

    .customized-content .customized-list:after {
        display: none
    }

    .customized-content .customized-list li {
        width: 31%;
        padding-bottom: 20px;
        border-radius: 12px;
        background: rgba(255, 255, 255, 0.72);
        box-shadow: 0 8px 24px rgba(31, 91, 143, 0.07);
        box-sizing: border-box
    }

    .customized-content .customized-list li:before {
        content: "";
        height: 1px;
        left: 18px;
        right: 18px;
        bottom: 0;
        position: absolute;
        background: #86b9eb
    }

    .customized-content .customized-list li:after {
        width: 9px;
        height: 9px;
        bottom: -4px
    }

    .customized-content .customized-list li:last-child {
        grid-column: 2
    }

    .customized-content .customized-list img {
        width: 46px;
        height: 46px
    }

    .customized-content .customized-list h3 {
        margin-top: 10px;
        font-size: 17px;
        line-height: 24px
    }
}

@media (max-width:640px) {
    .customized-content {
        padding: 43px 0 48px
    }

    .customized-content h2 {
        font-size: 29px;
        line-height: 38px
    }

    .customized-content .customized-heading p {
        margin-top: 13px;
        font-size: 14px;
        line-height: 24px
    }

    .customized-content .customized-list li {
        width: 46%
    }

    .customized-content .customized-list img {
        width: 42px;
        height: 42px
    }

    .customized-content .customized-list h3 {
        margin-top: 8px;
        font-size: 15px;
        line-height: 22px
    }
}

.capabilities-content {
    padding: 6.875rem 0;
    overflow: hidden;
    background: #fff;
    box-sizing: border-box
}

.capabilities-content h2 {
    color: #1e1f24;
    font-size: 2.8125rem;
    line-height: 1.2;
    font-weight: 500;
    text-align: center
}

.capabilities-content .capabilities-list {
    margin: 2.6875rem 0 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    column-gap: 3.3125rem;
    row-gap: 3.125rem;
    list-style: none
}

.capabilities-content .capabilities-list li {
    min-width: 0;
    text-align: center
}

.capabilities-content .capabilities-image {
    width: 100%;
    height: 16.25rem;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border-radius: .9375rem;
    background: #f3f4f5
}

.capabilities-content .capabilities-image img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    object-position: center center
}

.capabilities-content h3 {
    margin-top: 1.875rem;
    color: #1e1f24;
    font-size: 1.5rem;
    line-height: 1.75rem;
    font-weight: 400
}

@media (max-width:1024px) {
    .capabilities-content {
        padding: 58px 0 65px
    }

    .capabilities-content h2 {
        font-size: 34px;
        line-height: 42px
    }

    .capabilities-content .capabilities-list {
        margin-top: 34px;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        column-gap: 22px;
        row-gap: 30px
    }

    .capabilities-content .capabilities-image {
        height: 190px;
        border-radius: 12px
    }

    .capabilities-content h3 {
        margin-top: 13px;
        font-size: 17px;
        line-height: 24px
    }
}

@media (max-width:640px) {
    .capabilities-content {
        padding: 43px 0 48px
    }

    .capabilities-content h2 {
        font-size: 29px;
        line-height: 38px
    }

    .capabilities-content .capabilities-list {
        margin-top: 28px;
        row-gap: 25px
    }

    .capabilities-content .capabilities-image {
        height: auto;
        aspect-ratio: 1.48;
        border-radius: 10px
    }

    .capabilities-content h3 {
        margin-top: 11px;
        font-size: 16px;
        line-height: 23px
    }
}

.download-search {
    padding: 4.375rem 0;
    background: #fff;
    box-sizing: border-box
}

.download-search .download-search-form {
    width: 100%
}

.download-search .download-search-fields {
    width: 100%;
    height: 3.75rem;
    display: grid;
    grid-template-columns: 29% 29% minmax(0, 1fr) 4.5rem;
    align-items: center;
    border: .0625rem solid #0874d1;
    border-radius: 1.9375rem;
    box-sizing: border-box
}

.download-search label {
    min-width: 0;
    height: 1.625rem;
    padding: 0 1.6875rem;
    display: flex;
    align-items: center;
    position: relative;
    box-sizing: border-box
}

.download-search label:not(:first-child):before {
    content: "";
    width: .0625rem;
    height: 1.5625rem;
    left: 0;
    top: 50%;
    position: absolute;
    background: #e0e3e7;
    transform: translateY(-50%)
}

.download-search .download-search-label {
    width: 1px;
    height: 1px;
    padding: 0;
    position: absolute;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0
}

.download-search select,
.download-search input {
    width: 100%;
    height: 100%;
    padding: 0;
    color: #aeb4bc;
    font-family: inherit;
    font-size: 1rem;
    line-height: 1.625rem;
    outline: 0;
    border: 0;
    background: transparent;
    box-sizing: border-box
}

.download-search select {
    padding-right: 1.75rem;
    cursor: pointer;
    appearance: none
}

.download-search .download-search-select:after {
    content: "";
    width: .4375rem;
    height: .4375rem;
    right: 1.75rem;
    top: .4375rem;
    position: absolute;
    pointer-events: none;
    border-right: .0625rem solid #555;
    border-bottom: .0625rem solid #555;
    transform: rotate(45deg)
}

.download-search input::placeholder {
    color: #aeb4bc;
    opacity: 1
}

.download-search .download-search-icon {
    width: 3.75rem;
    height: 3.625rem;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    border: 0;
    background: transparent
}

.download-search .download-search-icon i {
    width: 1.25rem;
    height: 1.25rem;
    display: block;
    position: relative;
    border: .125rem solid #0671cf;
    border-radius: 50%;
    box-sizing: border-box
}

.download-search .download-search-icon i:after {
    content: "";
    width: .5625rem;
    height: .125rem;
    right: -0.4375rem;
    bottom: -0.1875rem;
    position: absolute;
    border-radius: .0625rem;
    background: #0671cf;
    transform: rotate(48deg);
    transform-origin: left center
}

.download-search .download-search-actions {
    margin-top: 1.875rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 2rem
}

.download-search .download-search-actions a,.download-search .download-search-actions button {
    padding: 0 .9375rem;
    min-width: 13.125rem;
    height: 3.25rem;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #292d34;
    font-size: 1.125rem;
    line-height: 1;
    border: .125rem solid #fff;
    border-radius: 1.6875rem;
    box-sizing: border-box;
    box-shadow: 0 .375rem 1.25rem rgba(32, 72, 111, 0.08);
    transition: color .25s ease, background-color .25s ease, border-color .25s ease
}

.download-search .download-search-actions .download-search-submit {
    color: #fff;
    border-color: #1477ce;
    background: var(--main-color)
}

.download-search .download-search-actions .download-search-submit:hover {
    border-color: #0868bb;
    background: var(--main-color)
}

.download-search .download-search-actions .download-search-reset {
    background: #f6f7fa
}

.download-search .download-search-actions .download-search-reset:hover {
    color: #1477ce;
    border-color: var(--main-color);
    background: #f6f7fa
}

@media (max-width:1024px) {
    .download-search {
        padding: 50px 0 55px
    }

    .download-search .download-search-fields {
        height: auto;
        padding: 6px 20px;
        display: block;
        border-width: 1px;
        border-radius: 22px
    }

    .download-search label {
        height: 52px;
        padding: 0 12px;
        border-bottom: 1px solid #e2e6ea
    }

    .download-search label:not(:first-child):before {
        display: none
    }

    .download-search select,
    .download-search input {
        font-size: 15px;
        line-height: 52px
    }

    .download-search select {
        padding-right: 30px
    }

    .download-search .download-search-select:after {
        width: 7px;
        height: 7px;
        right: 15px;
        top: 20px;
        border-width: 0 1px 1px 0
    }

    .download-search .download-search-icon {
        width: 48px;
        height: 48px;
        margin: 7px auto 3px
    }

    .download-search .download-search-icon i {
        width: 20px;
        height: 20px;
        border-width: 2px
    }

    .download-search .download-search-icon i:after {
        width: 9px;
        height: 2px;
        right: -7px;
        bottom: -3px;
        border-radius: 1px
    }

    .download-search .download-search-actions {
        margin-top: 22px;
        gap: 16px
    }

    .download-search .download-search-actions a {
        width: 180px;
        height: 48px;
        font-size: 16px;
        border-width: 2px;
        border-radius: 25px;
        box-shadow: 0 5px 16px rgba(32, 72, 111, 0.08)
    }
}

@media (max-width:640px) {
    .download-search {
        padding: 40px 0 45px
    }

    .download-search .download-search-fields {
        padding: 5px 14px
    }

    .download-search label {
        height: 50px;
        padding: 0 9px
    }

    .download-search select,
    .download-search input {
        font-size: 14px;
        line-height: 50px
    }

    .download-search .download-search-actions {
        gap: 10px
    }
	
	.download-search .download-search-actions .download-search-submit{
        width: 50%;
        height: 46px;
		border-radius: 25px;
        font-size: 15px
    }

    .download-search .download-search-actions a {
        width: 50%;
        height: 46px;
        font-size: 15px
    }
}

.download-content {
    padding: 4.375rem 0 8.125rem;
    background: #f5f7f8;
    box-sizing: border-box
}

.download-content .download-list {
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 3.125rem 2.8125rem;
    list-style: none
}

.download-content .download-list>li {
    min-width: 0;
    height: 19.75rem;
    padding: 3.125rem;
    display: flex;
    align-items: center;
    gap: 2.8125rem;
    border-radius: 1.375rem;
    background: #fff;
    box-sizing: border-box;
    box-shadow: 0 .625rem 1.75rem rgba(44, 74, 99, 0.025)
}

.download-content .download-cover {
    width: 8.75rem;
    height: 12.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: none
}

.download-content .download-cover img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: contain;
    object-position: center center;
    box-shadow: .5rem .4375rem .75rem rgba(40, 52, 63, 0.18)
}

.download-content .download-info {
    min-width: 0;
    flex: 1
}

.download-content .download-info h2 {
    height: 3.375rem;
    color: #2b2c30;
    font-size: 1.375rem;
    line-height: 1.6875rem;
    font-weight: 400;
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    text-overflow: ellipsis;
    -webkit-line-clamp: 2
}

.download-content .download-info p {
    margin-top: 2.125rem;
    color: #a1a1a1;
    font-size: 1.0625rem;
    line-height: 1.5rem
}

.download-content .download-info a {
    width: 13.9375rem;
    height: 3.6875rem;
    margin-top: 2.0625rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 2.5rem;
    color: #0871cf;
    font-size: 1.4375rem;
    line-height: 1;
    border: .125rem solid #0871cf;
    box-sizing: border-box;
    transition: color .25s ease, background-color .25s ease
}

.download-content .download-info a:hover {
    color: #fff;
    background: #0871cf
}

.download-content .download-info i {
    display: block;
    position: relative
}

.download-content .download-info svg {
    width: 1.25rem;
    height: 1.25rem
}

@media (max-width:1024px) {
    .download-content {
        padding: 50px 0
    }

    .download-content .download-list {
        grid-template-columns: 1fr;
        gap: 24px
    }

    .download-content .download-list>li {
        height: 250px;
        padding: 30px 42px;
        gap: 42px;
        border-radius: 18px;
        box-shadow: 0 8px 22px rgba(44, 74, 99, 0.035)
    }

    .download-content .download-cover {
        width: 126px;
        height: 180px
    }

    .download-content .download-cover img {
        box-shadow: 7px 6px 10px rgba(40, 52, 63, 0.18)
    }

    .download-content .download-info h2 {
        height: 48px;
        font-size: 20px;
        line-height: 24px
    }

    .download-content .download-info p {
        margin-top: 22px;
        font-size: 16px;
        line-height: 22px
    }

    .download-content .download-info a {
        width: 210px;
        height: 52px;
        margin-top: 24px;
        gap: 36px;
        font-size: 20px;
        border-width: 2px
    }

    .download-content .download-info svg {
        width: 20px;
        height: 20px
    }
}

@media (max-width:640px) {
    .download-content {
        padding: 40px 0
    }

    .download-content .download-list {
        gap: 20px
    }

    .download-content .download-list>li {
        height: auto;
        padding: 26px 20px;
        display: block;
        text-align: center;
        border-radius: 15px
    }

    .download-content .download-cover {
        width: 112px;
        height: 160px;
        margin: 0 auto
    }

    .download-content .download-info h2 {
        margin-top: 22px;
        font-size: 18px;
        line-height: 23px
    }

    .download-content .download-info p {
        margin-top: 15px;
        font-size: 15px;
        line-height: 21px
    }

    .download-content .download-info a {
        width: 100%;
        height: 48px;
        margin-top: 20px;
        gap: 28px;
        font-size: 18px
    }
}

.news-top {
    padding: 6.25rem 0 1.25rem
}

.news-top .news-top-container {
    position: relative
}

.news-top .news-top-swiper {
    overflow: hidden;
    border-radius: .9375rem
}

.news-top .swiper-slide {
    height: 31.875rem;
    display: grid;
    grid-template-columns: 1fr 1fr;
    background: #f8fbff
}

.news-top .news-top-image {
    min-width: 0;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden
}

.news-top .news-top-image a {
    width: 100%;
    height: 100%;
    display: block
}

.news-top .news-top-image img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    object-position: center center
}

.news-top .news-top-info {
    min-width: 0;
    padding: 5rem 4.375rem;
    box-sizing: border-box
}

.news-top .news-top-info time {
    color: #aac0d5;
    font-size: 1.25rem;
    line-height: 1.625rem;
    font-weight: 500
}

.news-top .news-top-info h2 {
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    text-overflow: ellipsis;
    -webkit-line-clamp: 1;
    margin-top: 1.25rem;
    font-size: 1.5rem;
    line-height: 2.375rem;
    height: 4.75rem;
    font-weight: 700
}

.news-top .news-top-info h2 a {
    color: #252525
}

.news-top .news-top-info p {
    margin-top: .9375rem;
    color: #555;
    font-size: 1.125rem;
    line-height: 1.875rem;
    height: 5.625rem;
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    text-overflow: ellipsis;
    -webkit-line-clamp: 2
}

.news-top .news-top-info .common-home-more {
    margin-top: 3.125rem
}

.news-top .news-top-prev {
    left: calc((100vw - 100%)/-2 + 5rem/16)
}

.news-top .news-top-prev i {
    left: 1.4375rem;
    border-left: .4375rem solid #666
}

.news-top .news-top-next {
    right: calc((100vw - 100%)/-2 + 5rem/16)
}

.news-top .news-top-next i {
    right: 1.4375rem;
    border-right: .4375rem solid #666;
    transform: rotate(-45deg)
}

.news-top .news-top-controls {
    width: 56.875rem;
    height: 2.1875rem;
    margin: 3.125rem auto 0;
    display: flex;
    align-items: center;
    gap: 1.25rem
}

.news-top .news-top-control-prev,
.news-top .news-top-control-next {
    width: 2.125rem;
    height: 2.125rem;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: none;
    cursor: pointer;
    border: 1px solid #e0e0e0;
    border-radius: 50%;
    background: #fff
}

.news-top .news-top-control-prev svg,
.news-top .news-top-control-next svg {
    color: #333;
    vertical-align: middle;
    width: 1.25rem;
    height: 1.25rem;
    margin-bottom: .125rem
}

.news-top .news-top-control-prev:hover,
.news-top .news-top-control-next:hover {
    border-color: var(--main-color)
}

.news-top .news-top-control-prev:hover svg,
.news-top .news-top-control-next:hover svg {
    color: var(--main-color)
}

.news-top .news-top-control-next {
    transform: rotate(-180deg)
}

.news-top .news-top-progress {
    height: .125rem;
    position: relative;
    flex: 1;
    background: #ddd
}

.news-top .news-top-progress .swiper-pagination-progressbar-fill {
    background: var(--main-color);
    height: .25rem;
    margin-top: -1px
}

@media (max-width:1024px) {
    .news-top {
        padding: 58px 0 55px
    }

    .news-top .news-top-swiper {
        border-radius: 12px
    }

    .news-top .swiper-slide {
        height: auto;
        display: block
    }

    .news-top .news-top-image {
        height: auto;
        aspect-ratio: 1.44
    }

    .news-top .news-top-info {
        padding: 34px 30px 38px
    }

    .news-top .news-top-info time {
        font-size: 15px;
        line-height: 22px
    }

    .news-top .news-top-info h2 {
        margin-top: 13px;
        font-size: 18px;
        line-height: 30px;
        height: 60px
    }

    .news-top .news-top-info p {
        margin-top: 12px;
        font-size: 15px;
        line-height: 24px;
        height: 48px
    }

    .news-top .news-top-info .common-home-more {
        margin-top: 27px
    }

    .news-top .news-top-prev,
    .news-top .news-top-next {
        display: none
    }

    .news-top .news-top-controls {
        width: 82%;
        height: 32px;
        margin-top: 28px;
        gap: 14px
    }

    .news-top .news-top-control-prev,
    .news-top .news-top-control-next {
        width: 32px;
        height: 32px;
        border-width: 1px
    }

    .news-top .news-top-control-prev svg,
    .news-top .news-top-control-next svg {
        width: 20px;
        height: 20px
    }

    .news-top .news-top-progress {
        height: 3px
    }
}

@media (max-width:640px) {
    .news-top {
        padding: 20px 0 20px
    }

    .news-top .news-top-info {
        padding: 26px 20px 30px
    }

    .news-top .news-top-info .common-home-more {
        margin-top: 22px
    }

    .news-top .news-top-controls {
        width: 100%;
        margin-top: 22px
    }
}

.news-bot {
    padding: 4.6875rem 0 6.25rem;
    box-sizing: border-box
}

.news-bot .news-bot-list {
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 3.125rem 2.5rem;
    list-style: none
}

.news-bot .news-bot-list>li {
    min-width: 0
}

.news-bot .news-bot-list>li>a {
    display: block;
    color: inherit
}

.news-bot .news-bot-image {
    width: 100%;
    height: 17.6875rem;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border-radius: .9375rem;
    background: #f3f6f8
}

.news-bot .news-bot-image img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    object-position: center center;
    transition: transform .5s ease
}

.news-bot li:hover .news-bot-image img {
    transform: scale(1.035)
}

.news-bot li:hover h2 {
    color: var(--main-color)
}

.news-bot li:hover .news-bot-more {
    transform: rotate(45deg)
}

.news-bot h2 {
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    text-overflow: ellipsis;
    -webkit-line-clamp: 2;
    height: 3.75rem;
    margin: 1.4375rem 1rem 0;
    font-size: 1.4375rem;
    line-height: 1.875rem;
    font-weight: 400;
    color: #27282d;
    transition: color .25s ease
}

.news-bot .news-bot-meta {
    margin: 1.125rem 1rem 0;
    display: flex;
    align-items: center;
    justify-content: space-between
}

.news-bot .news-bot-meta time {
    color: #999;
    line-height: 1.375rem
}

.news-bot .news-bot-more {
    width: 2.25rem;
    height: 2.25rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--main-color);
    transition: transform .25s ease, background-color .25s ease
}

.news-bot .news-bot-more svg {
    width: 1.25rem;
    height: 1.25rem;
    fill: #fff;
    margin-bottom: .1875rem;
    vertical-align: middle
}

.news-bot .news-bot-more:hover {
    background: #0065b7;
    transform: translateX(.1875rem)
}

.news-bot .news-bot-pagination {
    margin-top: 4.875rem
}

@media (max-width:1024px) {
    .news-bot {
        padding: 0 0 65px
    }

    .news-bot .news-bot-list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 36px 22px
    }

    .news-bot .news-bot-image {
        height: auto;
        aspect-ratio: 1.65;
        border-radius: 12px
    }

    .news-bot h2 {
        height: 52px;
        margin: 16px 10px 0;
        font-size: 18px;
        line-height: 26px
    }

    .news-bot h2 br {
        display: none
    }

    .news-bot .news-bot-meta {
        margin: 12px 10px 0
    }

    .news-bot .news-bot-meta time {
        font-size: 13px;
        line-height: 20px
    }

    .news-bot .news-bot-more {
        width: 30px;
        height: 30px
    }

    .news-bot .news-bot-more svg {
        width: 20px;
        height: 20px
    }

    .news-bot .news-bot-pagination {
        margin-top: 55px
    }
}

@media (max-width:640px) {
    .news-bot {
        padding: 0 0 48px
    }

    .news-bot .news-bot-list {
        grid-template-columns: 1fr;
        gap: 30px
    }

    .news-bot h2 {
        min-height: 0;
        margin-top: 14px;
        font-size: 16px
    }

    .news-bot .news-bot-meta {
        margin-top: 10px
    }

    .news-bot .news-bot-pagination {
        margin-top: 42px
    }
}

.product-content {
    padding: 6.25rem 0 8.125rem;
    background: #f5f7f8
}

.product-content .product-container {
    display: grid;
    grid-template-columns: 25.625rem minmax(0, 1fr);
    gap: 4.375rem;
    align-items: start
}

.product-content .product-sidebar {
    position: sticky;
    top: 6.875rem;
    background: #fff;
    border-radius: 0 0 .75rem .75rem;
    box-shadow: 0 .5rem 1.625rem rgba(27, 52, 75, 0.06);
    overflow: hidden;
    border-top: .3125rem solid var(--main-color)
}

.product-content .product-sidebar h2 {
    height: 6.625rem;
    margin: 0;
    padding: 0 1.75rem;
    display: flex;
    align-items: center;
    gap: 1.0625rem;
    font-size: 2.8125rem;
    color: #333333
}

.product-content .product-sidebar h2 i {
    width: .5rem;
    height: .5rem;
    border-radius: 50%;
    background: var(--main-color)
}

.product-content .product-categories {
    margin: 0;
    padding: 0 .75rem 1.125rem;
    list-style: none
}

.product-content .product-categories>li {
    margin-bottom: .5rem
}

.product-content .product-categories .product-category-title {
    height: 4.125rem;
    padding-left: 1.875rem;
    padding-right: 1rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #f0f4f7;
    color: #2c3948;
    font-size: 1.375rem;
    font-weight: 500;
    transition: .25s
}

.product-content .product-categories .product-category-title i {
    position: relative;
    width: 1.25rem;
    height: 1.25rem;
    border-radius: 50%;
    background: #d3dde7
}

.product-content .product-categories .product-category-title i:before,
.product-content .product-categories .product-category-title i:after {
    content: "";
    position: absolute;
    left: .4375rem;
    top: .625rem;
    width: .4375rem;
    height: 1px;
    background: #444546;
    transition: .25s
}

.product-content .product-categories .product-category-title i:after {
    transform: rotate(90deg)
}

.product-content .product-categories .active>.product-category-title {
    background: #2683cb;
    color: #fff
}

.product-content .product-categories .active>.product-category-title i {
    background: #fff
}

.product-content .product-categories .active>.product-category-title i:before,
.product-content .product-categories .active>.product-category-title i:after {
    background: #2683cb
}

.product-content .product-categories .active>.product-category-title i:after {
    transform: rotate(0)
}

.product-content .product-category-child {
    display: none;
    margin: 0;
    padding: 0;
    list-style: none;
    background: #fff
}

.product-content .product-category-child>li>a {
    min-height: 4rem;
    padding: 0 1.875rem;
    display: flex;
    align-items: center;
    color: #545c66;
    font-size: 1.25rem;
    font-weight: 500;
    background: #fafcfe
}

.product-content .product-category-child ul {
    margin: 0;
    padding: .875rem 1.125rem .8125rem 2.625rem;
    list-style: none
}

.product-content .product-category-child ul li a {
    position: relative;
    display: block;
    padding: .8125rem 0;
    color: #747c86;
    font-size: 1.0625rem;
    line-height: 1.25rem
}

.product-content .product-category-child ul li a:before {
    content: "·";
    position: absolute;
    left: -0.875rem;
    color: #1681d3
}

.product-content .product-category-child ul li a:hover {
    color: var(--main-color)
}

.product-content .product-categories>li.active>.product-category-child {
    display: block
}

.product-content .product-toolbar {
    height: 3.375rem;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: 1.125rem
}

.product-content .product-result {
    display: flex;
    align-items: center;
    height: 2rem;
    font-size: 1.125rem;
    color: #9ba0a5
}

.product-content .product-result svg {
    width: 2.375rem;
    height: 2.375rem;
    margin-right: .75rem;
    fill: var(--main-color)
}

.product-content .product-result h2 {
    color: #292d31;
    font-size: 1.5rem
}

.product-content .product-result i {
    width: 1px;
    height: 1.375rem;
    margin: 0 1rem;
    background: #dce1e5
}

.product-content .product-result span {
    font-size: 1.5rem;
    font-weight: 300
}

.product-content .product-result b {
    margin-right: .5rem;
    color: #268bd8
}

.product-content .product-search {
    width: 18.75rem;
    height: 2.625rem;
    display: flex;
    border-bottom: 1px solid #738093
}

.product-content .product-search input {
    width: 100%;
    border: 0;
    padding-left: .9375rem;
    background: transparent;
    outline: 0;
    font-size: 1.25rem;
    color: #444
}

.product-content .product-search input::placeholder {
    color: #a9afb4
}

.product-content .product-search button {
    margin-right: .625rem;
    width: 2.625rem;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: pointer
}

.product-content .product-search button svg {
    width: 1.875rem;
    height: 1.875rem;
    fill: none;
    stroke: var(--main-color);
    stroke-width: 2
}

.product-content .product-list {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 3.75rem 2.1875rem;
    margin: 0;
    padding: 0;
    list-style: none
}

.product-content .product-list li {
    min-width: 0
}

.product-content .product-list a {
    height: 28.125rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    overflow: hidden;
    border-radius: .9375rem;
    padding-bottom: 2.5rem;
    background: linear-gradient(180deg, #dceefa 0, #f7fbfe 36%, #fff 70%, #e9f7ff 100%);
    color: #17334a;
    text-align: center;
    transition: transform .3s, box-shadow .3s;
    background: url(../images/relatedpro-bg.jpg) no-repeat top center;
    background-size: cover
}

.product-content .product-list a:hover {
    box-shadow: 0 .875rem 2.1875rem rgba(41, 106, 154, 0.14)
}

.product-content .product-list a:hover .product-image img {
    transform: scale(1.04)
}

.product-content .product-list a:hover .product-arrow {
    color: var(--main-color);
    transform: rotate(45deg)
}

.product-content .product-list h3 {
    color: #072d51;
    margin: 2.5rem .75rem .4375rem;
    font-size: 1.375rem;
    line-height: 1.875rem;
    height: 1.875rem;
    font-weight: 400;
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    text-overflow: ellipsis;
    -webkit-line-clamp: 1
}

.product-content .product-list p {
    margin: 0;
    color: #79838d;
    height: 3rem;
    line-height: 1.5rem;
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    text-overflow: ellipsis;
    -webkit-line-clamp: 2
}

.product-content .product-list .product-arrow {
    margin-top: .625rem;
    color: #aec3d8;
    font-size: 1.75rem;
    line-height: 1.5rem;
    font-style: normal;
    font-weight: 100;
    transition: all 500ms ease
}

.product-content .product-list .product-image {
    height: 13.75rem;
    width: 100%;
    margin-top: auto;
    display: flex;
    align-items: center;
    justify-content: center
}

.product-content .product-list .product-image img {
    max-width: 100%;
    max-height: 100%;
    display: block;
    object-fit: contain;
    transition: transform .4s
}

@media (max-width:1024px) {
    .product-content {
        padding: 45px 0 60px
    }

    .product-content .product-container {
        grid-template-columns: 100% minmax(0, 1fr);
        gap: 28px
    }

    .product-content .product-sidebar {
        top: 80px;
        border-top-width: 4px;
        border-radius: 0 0 10px 10px;
        display: none
    }

    .product-content .product-sidebar h2 {
        height: 72px;
        padding: 0 20px;
        gap: 12px;
        font-size: 25px
    }

    .product-content .product-sidebar h2 i {
        width: 5px;
        height: 5px
    }

    .product-content .product-categories {
        padding: 0 8px 12px
    }

    .product-content .product-categories>li {
        margin-bottom: 6px
    }

    .product-content .product-categories .product-category-title {
        height: 50px;
        padding: 0 18px;
        font-size: 15px
    }

    .product-content .product-categories .product-category-title i {
        width: 17px;
        height: 17px
    }

    .product-content .product-categories .product-category-title i:before,
    .product-content .product-categories .product-category-title i:after {
        left: 6px;
        top: 8px;
        width: 5px;
        height: 1px
    }

    .product-content .product-category-child>li>a {
        min-height: 44px;
        padding: 0 20px;
        font-size: 14px
    }

    .product-content .product-category-child ul {
        padding: 10px 12px 10px 30px
    }

    .product-content .product-category-child ul li a {
        padding: 6px 0;
        font-size: 12px;
        line-height: 18px
    }

    .product-content .product-category-child ul li a:before {
        left: -11px
    }

    .product-content .product-toolbar {
        height: auto;
        min-height: 48px;
        margin-bottom: 30px
    }

    .product-content .product-result {
        height: 32px;
        font-size: 15px
    }

    .product-content .product-result span {
        font-size: 16px
    }

    .product-content .product-result h2 {
        font-size: 16px
    }

    .product-content .product-result svg {
        width: 24px;
        height: 24px;
        margin-right: 8px
    }

    .product-content .product-result strong {
        font-size: 17px
    }

    .product-content .product-result i {
        height: 20px;
        margin: 0 10px
    }

    .product-content .product-result b {
        margin-right: 5px;
        font-size: 18px
    }

    .product-content .product-search {
        width: 210px;
        height: 36px
    }

    .product-content .product-search input {
        font-size: 14px
    }

    .product-content .product-search button {
        width: 36px
    }

    .product-content .product-search button svg {
        width: 21px;
        height: 21px
    }

    .product-content .product-list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 24px 18px
    }

    .product-content .product-list a {
        height: 330px;
        border-radius: 10px
    }

    .product-content .product-list h3 {
        margin-top: 25px;
        font-size: 16px;
        line-height: 24px;
        height: 24px
    }

    .product-content .product-list p {
        font-size: 14px;
        line-height: 24px;
        height: 48px
    }

    .product-content .product-list .product-arrow {
        margin-top: 6px;
        font-size: 22px;
        line-height: 22px
    }

    .product-content .product-list .product-image {
        height: 205px
    }
}

@media (max-width:700px) {
    .product-content {
        padding: 32px 0 45px
    }

    .product-content .product-container {
        display: block
    }

    .product-content .product-sidebar {
        position: relative;
        top: auto;
        margin-bottom: 28px
    }

    .product-content .product-toolbar {
        align-items: center;
        gap: 15px
    }

    .product-content .product-search {
        width: 150px
    }

    .product-content .product-list {
        gap: 18px 12px
    }

    .product-content .product-list a {
        height: 400px
    }

    .product-content .product-list .product-image {
        height: 180px
    }
}

@media (max-width:460px) {
    .product-content .product-toolbar {
        display: block
    }

    .product-content .product-search {
        width: 100%;
        margin-top: 10px
    }

    .product-content .product-list {
        grid-template-columns: 1fr
    }

    .product-content .product-list .product-image {
        height: 210px
    }
}

.process-section {
    min-height: 40.5rem;
    display: flex;
    align-items: center;
    padding: 4.375rem 0;
    color: #fff;
    background: #0870c7 url(../images/process-bg.jpg) center center / cover no-repeat
}

.process-section .process-container {
    display: grid;
    grid-template-columns: 50.375rem minmax(0, 1fr);
    align-items: center;
    gap: 4.125rem;
    max-width: 105.25rem
}

.process-section .process-image {
    height: 29.125rem;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border-radius: 1.125rem
}

.process-section .process-image img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    object-position: center
}

.process-section .process-content {
    min-width: 0
}

.process-section .process-content h2 {
    margin: 0 0 2rem;
    color: #fff;
    font-size: 3rem;
    line-height: 1.15;
    font-weight: 700
}

.process-section .process-content h3 {
    margin: 0 0 1.125rem;
    color: #fff;
    font-size: 2.25rem;
    line-height: 1.2;
    font-weight: 500
}

.process-section .process-content p {
    margin: 0 0 1rem;
    color: #fff;
    font-size: 1.125rem;
    line-height: 1.875rem
}

.process-section .process-contact {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    margin-top: 4.625rem;
    color: #fff;
    font-size: 1rem;
    line-height: 1.625rem;
    font-weight: 500
}

.process-section .process-contact a {
    font-weight: 600;
    font-size: 1.0625rem;
    margin-right: .1875rem;
    color: #ff1d16;
    text-decoration: underline;
    text-underline-offset: .1875rem
}

.process-section .process-contact a:hover {
    color: #fff
}

@media (max-width:1024px) {
    .process-section {
        min-height: 0;
        padding: 56px 0;
        background-position: center center
    }

    .process-section .process-container {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        gap: 36px;
        max-width: none
    }

    .process-section .process-image {
        height: 360px;
        border-radius: 14px
    }

    .process-section .process-content h2 {
        margin-bottom: 24px;
        font-size: 34px
    }

    .process-section .process-content h3 {
        margin-bottom: 16px;
        font-size: 28px
    }

    .process-section .process-content p {
        margin-bottom: 14px;
        font-size: 16px;
        line-height: 26px
    }

    .process-section .process-contact {
        margin-top: 34px;
        font-size: 15px;
        line-height: 24px
    }

    .process-section .process-contact a {
        font-size: 15px;
        margin-right: 3px;
        text-underline-offset: 3px
    }
}

@media (max-width:760px) {
    .process-section {
        padding: 42px 0 46px
    }

    .process-section .process-container {
        grid-template-columns: 1fr;
        gap: 30px
    }

    .process-section .process-image {
        height: auto;
        aspect-ratio: 1.72961373;
        border-radius: 12px
    }

    .process-section .process-content h2 {
        margin-bottom: 20px;
        font-size: 30px;
        line-height: 38px
    }

    .process-section .process-content h3 {
        font-size: 25px;
        line-height: 32px
    }

    .process-section .process-contact {
        margin-top: 28px
    }
}

@media (max-width:480px) {
    .process-section {
        padding: 34px 0 38px
    }

    .process-section .process-container {
        gap: 24px
    }

    .process-section .process-content h2 {
        font-size: 26px;
        line-height: 34px
    }

    .process-section .process-content h3 {
        font-size: 22px;
        line-height: 30px
    }

    .process-section .process-content p {
        font-size: 15px;
        line-height: 25px
    }
}

.process-list {
    padding: 4.5rem 0 5.125rem;
    background: #fff
}

.process-list .process-accordion {
    border-top: 1px solid #919191
}

.process-list .process-item {
    border-bottom: 1px solid #919191
}

.process-list .process-item-head {
    width: 100%;
    min-height: 5.375rem;
    display: grid;
    grid-template-columns: 3.875rem minmax(0, 1fr) 1.875rem;
    align-items: center;
    gap: 0;
    margin: 0;
    padding: 0 1.125rem 0 .3125rem;
    border: 0;
    color: #414141;
    background: transparent;
    text-align: left;
    cursor: pointer
}

.process-list .process-item-head i {
    position: relative;
    width: 1rem;
    height: .125rem;
	background: #70757a;
    justify-self: end
}

.process-list .process-item-head i:before {
    content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    width: .125rem;
    height: 1rem;
    background: #838383;
    transition: transform .3s ease;
    transform: translate(-50%, -50%);
}

.process-list .process-item.active .process-item-head i:before{
	display:none;
}

.process-list .process-number,
.process-list .process-name {
    color: #3f3e3c;
    font-size: 1.5rem;
    line-height: 1.875rem;
    font-weight: 300;
    font-family: "Outfit SemiBold"
}

.process-list .process-name {
    transition: color .3s ease
}

.process-list .process-item-body {
    padding: 0 4.375rem 1.9375rem 4.1875rem
}

.process-list .process-item-body p {
    font-weight: 300;
    margin: 0 0 .3125rem;
    color: #666;
    font-size: 1.125rem;
    line-height: 1.75rem
}

.process-list .process-item-body p:last-child {
    margin-bottom: 0
}

.process-list .process-item-body a {
    color: #f20d0d;
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: .125rem
}

.process-list .process-item-body a:hover {
    color: var(--main-color)
}

.process-list .process-list-more {
    text-align: center;
    position: relative;
    margin-top: 1.875rem
}

.process-list .process-list-more img {
    max-height: 4.625rem
}

@media (max-width:1024px) {
    .process-list {
        padding: 48px 0 58px
    }

    .process-list .process-list-container {
        max-width: none
    }

    .process-list .process-item-head {
        min-height: 76px;
        grid-template-columns: 54px minmax(0, 1fr) 28px;
        padding: 0 10px 0 2px
    }

    .process-list .process-item-head i {
        width: 16px;
        height: 2px
    }

    .process-list .process-item-head i:before {
        width: 2px;
        height: 16px;
        margin-top: -1px
    }

    .process-list .process-number,
    .process-list .process-name {
        font-size: 20px;
        line-height: 28px
    }

    .process-list .process-item-body {
        padding: 0 42px 26px 56px
    }

    .process-list .process-item-body p {
        margin-bottom: 5px;
        font-size: 16px;
        line-height: 26px
    }

    .process-list .process-item-body a {
        text-underline-offset: 2px
    }
}

@media (max-width:640px) {
    .process-list {
        padding: 34px 0 42px
    }

    .process-list .process-item-head {
        min-height: 68px;
        grid-template-columns: 42px minmax(0, 1fr) 22px;
        padding-right: 4px
    }

    .process-list .process-number {
        align-self: start;
        padding-top: 20px;
        font-size: 17px;
        line-height: 24px
    }

    .process-list .process-name {
        padding: 16px 8px 16px 0;
        font-size: 17px;
        line-height: 24px
    }

    .process-list .process-item-body {
        padding: 0 26px 22px 42px
    }

    .process-list .process-item-body p {
        font-size: 14px;
        line-height: 23px
    }
}

.our-advantages {
    padding: 6.25rem 0;
    background: #f6f8fa
}

.our-advantages .advantages-heading {
    margin-bottom: 2.625rem
}

.our-advantages .advantages-heading h2 {
    margin: 0 0 1.25rem;
    color: #222222;
    font-family: "Outfit SemiBold";
    font-size: 3rem;
    line-height: 3.625rem;
    font-weight: 400
}

.our-advantages .advantages-heading p {
    max-width: 78.125rem;
    margin: 0;
    color: #101010;
    line-height: 1.875rem;
    font-weight: 300
}

.our-advantages .advantages-list {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 2.25rem
}

.our-advantages .advantage-item {
    min-width: 0;
    min-height: 27.4375rem;
    padding: 2.0625rem 1.6875rem 2.125rem;
    overflow: hidden;
    border-radius: .9375rem;
    background: #fff;
    text-align: center;
    box-shadow: .625rem .625rem 1.5625rem rgba(23, 75, 111, 0.06)
}

.our-advantages .advantage-item .advantage-icon {
    width: 6.875rem;
    height: 6.875rem;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1.375rem;
    border-radius: 50%;
    background: var(--main-color)
}

.our-advantages .advantage-item .advantage-icon img {
    max-width: 100%;
    max-height: 100%;
    display: block;
    object-fit: contain;
    object-position: center
}

.our-advantages .advantage-item h3 {
    min-height: 3.625rem;
    margin: 0 0 .9375rem;
    color: #073663;
    font-family: "Outfit SemiBold";
    font-size: 1.5rem;
    line-height: 1.8125rem;
    font-weight: 400
}

.our-advantages .advantage-item p {
    margin: 0;
    color: #666;
    font-size: 1.125rem;
    line-height: 1.875rem;
    font-weight: 300
}

@media (max-width:1024px) {
    .our-advantages {
        padding: 68px 0 74px
    }

    .our-advantages .advantages-container {
        max-width: none
    }

    .our-advantages .advantages-heading {
        margin-bottom: 34px
    }

    .our-advantages .advantages-heading h2 {
        margin-bottom: 16px;
        font-size: 40px;
        line-height: 48px
    }

    .our-advantages .advantages-heading p {
        max-width: none;
        font-size: 16px;
        line-height: 28px
    }

    .our-advantages .advantages-list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 24px
    }

    .our-advantages .advantage-item {
        min-height: 390px;
        padding: 30px 28px 32px;
        border-radius: 14px;
        box-shadow: 8px 8px 22px rgba(23, 75, 111, 0.06)
    }

    .our-advantages .advantage-item .advantage-icon {
        width: 100px;
        height: 100px;
        margin-bottom: 20px
    }

    .our-advantages .advantage-item h3 {
        min-height: 56px;
        margin-bottom: 14px;
        font-size: 23px;
        line-height: 28px
    }

    .our-advantages .advantage-item p {
        font-size: 16px;
        line-height: 27px
    }
}

@media (max-width:640px) {
    .our-advantages {
        padding: 46px 0 50px
    }

    .our-advantages .advantages-heading {
        margin-bottom: 28px
    }

    .our-advantages .advantages-heading h2 {
        margin-bottom: 12px;
        font-size: 32px;
        line-height: 40px
    }

    .our-advantages .advantages-heading p {
        font-size: 14px;
        line-height: 24px
    }

    .our-advantages .advantages-list {
        grid-template-columns: 1fr;
        gap: 18px
    }

    .our-advantages .advantage-item {
        min-height: 0;
        padding: 28px 22px 30px;
        border-radius: 12px
    }

    .our-advantages .advantage-item .advantage-icon {
        width: 92px;
        height: 92px;
        margin-bottom: 18px
    }

    .our-advantages .advantage-item h3 {
        min-height: 0;
        margin-bottom: 12px;
        font-size: 21px;
        line-height: 27px
    }

    .our-advantages .advantage-item p {
        font-size: 15px;
        line-height: 25px
    }
}

.warranty-content {
    z-index: 10;
    margin-top: -10rem;
    position: relative;
    color: #666
}

.warranty-content .warranty-container {
    padding-bottom: 8.125rem;
    padding-top: 6.25rem;
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0.1), #fff, #fff, #fff, #fff, #fff, #fff, #fff, #fff, #fff, #fff, #fff, #fff, #fff, #fff, #fff, #fff, #fff, #fff)
}

.warranty-content .warranty-heading {
    margin-bottom: 4rem;
    text-align: center
}

.warranty-content .warranty-heading h2 {
    margin: 0 0 .75rem;
    color: #202020;
    font-size: 3.25rem;
    line-height: 1;
    font-weight: 700
}

.warranty-content .warranty-heading h3 {
    padding-top: 1.25rem;
    margin: 0 0 1.4375rem;
    color: #0d2e4e;
    font-size: 1.875rem;
    line-height: 2rem;
    font-weight: 400
}

.warranty-content .warranty-heading p {
    margin: 0;
    color: #2a3b4c;
    font-size: 1.25rem;
    line-height: 1.875rem
}

.warranty-content .warranty-cards {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 4rem;
    margin-bottom: 3rem
}

.warranty-content .warranty-card {
    min-height: 34.25rem;
    position: relative;
    padding: 14.5rem 2.375rem 2.125rem;
    overflow: hidden;
    border-radius: 0 4.375rem 0 0;
    background: #edf2f7
}

.warranty-content .warranty-card .warranty-card-number {
    position: absolute;
    top: 3.75rem;
    right: 2.625rem;
    color: #d9e2ea;
    font-size: 3rem;
    line-height: 1;
    font-family: "Outfit SemiBold"
}

.warranty-content .warranty-card .warranty-card-icon {
    width: 10.625rem;
    height: 10.625rem;
    position: absolute;
    top: 2.5rem;
    left: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transform: translateX(-50%)
}

.warranty-content .warranty-card .warranty-card-icon img {
    max-width: 100%;
    max-height: 100%;
    display: block;
    object-fit: contain
}

.warranty-content .warranty-card h3 {
    margin: 0 0 .9375rem;
    color: #051728;
    font-size: 1.3125rem;
    line-height: 1.875rem;
    font-weight: 600
}

.warranty-content .warranty-card ul {
    margin: 0
}

.warranty-content .warranty-card li {
    position: relative;
    margin-bottom: .625em;
    line-height: 1.5rem;
    padding-left: .9375rem
}

.warranty-content .warranty-card li::before {
    top: .5625rem;
    left: 0;
    content: "";
    width: .25rem;
    height: .25rem;
    border-radius: 50%;
    position: absolute;
    background: #051728
}

.warranty-content .warranty-block {
    margin-top: 2.1875rem
}

.warranty-content .warranty-block>p {
    max-width: 77.5rem;
    margin: 1.25rem 0 1.0625rem;
    color: #2a3b4c;
    font-size: 1.375rem;
    line-height: 2.25rem
}

.warranty-content .warranty-block ol {
    margin: 1.5625rem 0 0
}

.warranty-content .warranty-block li {
    margin-bottom: .625rem;
    font-size: 1.125rem;
    line-height: 1.5rem
}

.warranty-content .warranty-label {
    min-width: 0;
    width: fit-content;
    height: 3.375rem;
    display: inline-flex;
    align-items: center;
    margin: 0;
    padding: 0 1.375rem;
    color: #fff;
    font-size: 1.5625rem;
    padding-right: 11.25rem;
    font-weight: 600;
    padding-bottom: .75rem;
    background: url(../images/repair-line.png) left center / 100% 100% no-repeat
}

.warranty-content .warranty-costs {
    margin-top: 3.125rem
}

.warranty-content .warranty-costs .warranty-label {
    padding-right: 15.625rem
}

.warranty-content .warranty-status-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 3.125rem;
    margin: 3.125rem 0 2.625rem
}

.warranty-content .warranty-status {
    min-height: 13.625rem;
    position: relative;
    padding: 7.1875rem 2.375rem 1.5625rem;
    border: 1px solid #c9dbe8;
    border-radius: .9375rem
}

.warranty-content .warranty-status>img {
    width: 4.375rem;
    height: 4.375rem;
    position: absolute;
    top: 1.875rem;
    left: 2.375rem;
    object-fit: contain;
    object-position: center
}

.warranty-content .warranty-status h3 {
    margin: 0 0 .625rem;
    color: var(--main-color);
    font-family: "Outfit SemiBold";
    font-size: 1.375rem;
    font-weight: 400
}

.warranty-content .warranty-status ol {
    margin: 0
}

.warranty-content .warranty-status li {
    color: #5c6570
}

.warranty-content .warranty-exclusions {
    margin-top: 0
}

.warranty-content .warranty-contact {
    min-height: 18.25rem;
    margin-top: 2.8125rem;
    padding: 3.75rem 4.375rem;
    padding-bottom: 1.875rem;
    overflow: hidden;
    border-radius: .9375rem;
    color: #fff;
    background: #0872c8 url(../images/service-bg.jpg) center center / cover no-repeat
}

.warranty-content .warranty-contact h2 {
    margin: 0 0 1.375rem;
    color: #fff;
    font-size: 2.375rem;
    line-height: 2.5rem;
    padding-bottom: 1.25rem
}

.warranty-content .warranty-contact p {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    margin: 0 0 1.25rem;
    color: #fff;
    font-size: 1.5625rem;
    line-height: 1.875rem;
    font-weight: 500
}

.warranty-content .warranty-contact a {
    color: #fff
}

.warranty-content .warranty-contact a:hover {
    text-decoration: underline
}

.warranty-content .warranty-contact .warranty-contact-icon {
    width: 2.25rem;
    height: 2.25rem;
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center
}

.warranty-content .warranty-contact .warranty-contact-icon img {
    opacity: .6;
    max-height: 2.25rem
}

@media (max-width:1024px) {
    .warranty-content {
        padding: 50px 0 65px;
		margin-top: 0;
    }

    .warranty-content .warranty-container {
        max-width: none
    }

    .warranty-content .warranty-heading {
        margin-bottom: 48px
    }

    .warranty-content .warranty-heading h2 {
        margin-bottom: 10px;
        font-size: 38px;
        line-height: 48px
    }

    .warranty-content .warranty-heading h3 {
        margin-bottom: 18px;
        font-size: 22px;
        line-height: 30px
    }

    .warranty-content .warranty-heading p {
        font-size: 15px;
        line-height: 26px
    }

    .warranty-content .warranty-cards {
        gap: 22px;
        margin-bottom: 40px
    }

    .warranty-content .warranty-card {
        min-height: 510px;
        padding: 202px 24px 28px;
        border-radius: 0 52px 0 0
    }

    .warranty-content .warranty-card .warranty-card-number {
        top: 30px;
        right: 25px;
        font-size: 32px;
        line-height: 40px
    }

    .warranty-content .warranty-card .warranty-card-icon {
        width: 145px;
        height: 145px;
        top: 31px
    }

    .warranty-content .warranty-card h3 {
        margin-bottom: 13px;
        font-size: 17px;
        line-height: 24px
    }

    .warranty-content .warranty-card ul {
        padding-left: 17px
    }

    .warranty-content .warranty-card li {
        margin-bottom: 8px;
        font-size: 14px;
        line-height: 22px
    }

    .warranty-content .warranty-block {
        margin-top: 30px
    }

    .warranty-content .warranty-block>p {
        max-width: none;
        margin: 18px 0 15px;
        font-size: 16px;
        line-height: 27px
    }

    .warranty-content .warranty-block ol {
        margin-top: 15px;
        padding-left: 24px
    }

    .warranty-content .warranty-block li {
        margin-bottom: 6px;
        padding-left: 2px;
        font-size: 14px;
        line-height: 23px
    }

    .warranty-content .warranty-label {
        width: fit-content;
        height: 48px;
        padding: 0 20px;
        font-size: 18px;
        line-height: 24px
    }

    .warranty-content .warranty-status-list {
        gap: 24px;
        margin: 36px 0
    }

    .warranty-content .warranty-status {
        min-height: 230px;
        padding: 92px 26px 23px;
        border-radius: 12px
    }

    .warranty-content .warranty-status>img {
        width: 60px;
        height: 60px;
        top: 20px;
        left: 26px
    }

    .warranty-content .warranty-status h3 {
        margin-bottom: 7px;
        font-size: 17px;
        line-height: 24px
    }

    .warranty-content .warranty-status ol {
        padding-left: 18px
    }

    .warranty-content .warranty-status li {
        font-size: 13px;
        line-height: 20px
    }

    .warranty-content .warranty-contact {
        min-height: 250px;
        margin-top: 38px;
        padding: 42px 48px;
        border-radius: 12px
    }

    .warranty-content .warranty-contact h2 {
        margin-bottom: 20px;
        font-size: 29px;
        line-height: 37px
    }

    .warranty-content .warranty-contact p {
        gap: 10px;
        margin-bottom: 14px;
        font-size: 16px;
        line-height: 24px
    }

    .warranty-content .warranty-contact .warranty-contact-icon {
        width: 26px;
        height: 26px;
        font-size: 15px
    }
}

@media (max-width:760px) {
    .warranty-content {
        padding: 40px 0 50px
    }

    .warranty-content .warranty-heading {
        margin-bottom: 36px
    }

    .warranty-content .warranty-heading h2 {
        font-size: 32px;
        line-height: 40px
    }

    .warranty-content .warranty-heading h3 {
        font-size: 19px;
        line-height: 27px
    }

    .warranty-content .warranty-heading p br {
        display: none
    }

    .warranty-content .warranty-cards {
        grid-template-columns: 1fr;
        gap: 20px
    }

    .warranty-content .warranty-card {
        min-height: 0;
        padding: 180px 24px 28px
    }

    .warranty-content .warranty-card .warranty-card-icon {
        width: 130px;
        height: 130px;
        top: 28px
    }

    .warranty-content .warranty-status-list {
        grid-template-columns: 1fr;
        gap: 18px
    }

    .warranty-content .warranty-status {
        min-height: 0
    }

    .warranty-content .warranty-contact {
        min-height: 240px;
        padding: 34px 28px;
        background-position: 62% center
    }

    .warranty-content .warranty-contact h2 {
        font-size: 26px;
        line-height: 34px
    }

    .warranty-content .warranty-contact p {
        align-items: flex-start;
        font-size: 14px;
        line-height: 22px
    }
}

@media (max-width:480px) {
    .warranty-content .warranty-label {
        width: fit-content;
        max-width: 100%;
        height: 45px;
        padding: 0 17px;
        font-size: 16px
    }

    .warranty-content .warranty-contact {
        padding: 30px 20px
    }
}

.about-content {
    padding: 6.25rem 0;
    background: linear-gradient(to bottom, #fff, #fff, #fff, #eef5fb)
}

.about-content .about-intro-grid {
    display: grid;
    grid-template-columns: 42.75rem minmax(0, 1fr);
    align-items: start;
    gap: 13.75rem
}

.about-content .about-intro-visual h2 {
    margin: 0 0 3rem;
    color: #202126;
    font-family: "Outfit SemiBold";
    font-size: 3.25rem;
    line-height: 3.875rem;
    font-weight: 400
}

.about-content .about-intro-image {
    width: 42.75rem;
    height: 25rem;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border-radius: 1.25rem;
    position: relative
}

.about-content .about-intro-image::before {
    z-index: 1;
    content: "";
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    position: absolute;
    background: rgba(0, 36, 71, 0.6)
}

.about-content .about-intro-image>img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    object-position: center
}

.about-content .about-intro-image .about-play {
    z-index: 2;
    width: 5.625rem;
    height: 5.625rem;
    border-radius: 50%;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center
}

.about-content .about-intro-image .about-play img {
    max-height: 3.75rem
}

.about-content .about-intro-image .about-play:after {
    content: "";
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    z-index: -1;
    position: absolute;
    background: rgba(255, 255, 255, 0.6);
    border-radius: 50%;
    animation: aboutPlayHalo 2.2s ease-out infinite
}

.about-content .about-intro-copy h2 {
    margin: 0 0 1.625rem;
    color: #073566;
    font-size: 2.1875rem;
    line-height: 2.6875rem;
    font-weight: 400
}

.about-content .about-intro-copy p {
    margin: 0 0 1.0625rem;
    color: #3e4857;
    font-size: 1.125rem;
    line-height: 1.875rem;
    font-weight: 400
}

.about-content .about-intro-copy p:last-child {
    margin-bottom: 0
}

.about-content .about-counter-list {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 4.375rem;
    margin-top: 5.625rem;
    padding: 0 4.375rem
}

.about-content .about-counter-item {
    min-width: 0
}

.about-content .about-counter-item p {
    margin: .3125rem 0 0 .25rem;
    color: #242424;
    font-size: 1.1875rem;
    line-height: 1.6875rem
}

.about-content .about-counter-value {
    display: flex;
    align-items: center;
    gap: 1.125rem
}

.about-content .about-counter-value img {
    width: 3.75rem;
    height: 3.75rem;
    flex: 0 0 auto;
    display: block;
    object-fit: contain;
    object-position: center
}

.about-content .about-counter-value strong {
    display: flex;
    align-items: baseline;
    color: #287bd1;
    font-family: "Outfit SemiBold";
    font-size: 4.25rem;
    line-height: 4.5rem;
    font-weight: 400;
    white-space: nowrap
}

.about-content .about-counter-value strong i {
    font-style: normal
}

@media (max-width:1024px) {
    .about-content {
        padding: 56px 0 72px
    }

    .about-content .about-content-container {
        max-width: none
    }

    .about-content .about-intro-grid {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        gap: 44px
    }

    .about-content .about-intro-visual h2 {
        margin-bottom: 32px;
        font-size: 42px;
        line-height: 52px
    }

    .about-content .about-intro-image {
        width: 100%;
        height: auto;
        aspect-ratio: 1.71;
        border-radius: 14px
    }

    .about-content .about-intro-image .about-play {
        width: 104px;
        height: 104px
    }

    .about-content .about-intro-image .about-play img {
        max-height: 54px
    }

    .about-content .about-intro-copy {
        padding-top: 3px
    }

    .about-content .about-intro-copy h2 {
        margin-bottom: 20px;
        font-size: 29px;
        line-height: 37px
    }

    .about-content .about-intro-copy p {
        margin-bottom: 14px;
        font-size: 15px;
        line-height: 25px
    }

    .about-content .about-counter-list {
        gap: 30px;
        margin-top: 58px;
        padding: 0 15px
    }

    .about-content .about-counter-item p {
        margin: 4px 0 0 3px;
        font-size: 17px;
        line-height: 25px
    }

    .about-content .about-counter-value {
        gap: 12px
    }

    .about-content .about-counter-value img {
        width: 50px;
        height: 50px
    }

    .about-content .about-counter-value strong {
        font-size: 49px;
        line-height: 56px
    }
}

@media (max-width:760px) {
    .about-content {
        padding: 42px 0 54px
    }

    .about-content .about-intro-grid {
        grid-template-columns: 1fr;
        gap: 34px
    }

    .about-content .about-intro-visual h2 {
        margin-bottom: 24px;
        font-size: 36px;
        line-height: 44px
    }

    .about-content .about-intro-copy h2 {
        font-size: 27px;
        line-height: 35px
    }

    .about-content .about-intro-copy h2 br {
        display: none
    }

    .about-content .about-counter-list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 32px 22px;
        margin-top: 44px;
        padding: 0
    }
}

@media (max-width:420px) {
    .about-content .about-intro-visual h2 {
        font-size: 32px;
        line-height: 40px
    }

    .about-content .about-intro-image .about-play {
        width: 88px;
        height: 88px
    }

    .about-content .about-intro-image .about-play img {
        max-height: 48px
    }

    .about-content .about-counter-value {
        gap: 9px
    }

    .about-content .about-counter-value img {
        width: 43px;
        height: 43px
    }

    .about-content .about-counter-value strong {
        font-size: 40px;
        line-height: 48px
    }
}

.company-hardware {
    padding: 6.25rem 0 .6875rem;
    overflow: hidden;
    background: #fff;
    position: relative
}

.company-hardware .company-hardware-heading {
    margin: 0 auto;
    padding: 0 1.25rem;
    margin-bottom: 2.625rem;
    text-align: center;
    max-width: 51.25rem
}

.company-hardware .company-hardware-heading h2 {
    margin: 0 0 .8125rem;
    color: #1e1f24;
    font-size: 3.25rem;
    line-height: 1
}

.company-hardware .company-hardware-heading p {
    margin: 0;
    color: #3e4857;
    font-size: 1.125rem;
    font-weight: 300
}

.company-hardware .company-hardware-gallery {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: .625rem
}

.company-hardware .company-hardware-mobile {
    display: none
}

.company-hardware .company-hardware-caption {
    min-height: 6.5rem;
    position: absolute;
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: .9375rem 3.125rem;
    color: #fff;
    background: rgba(23, 144, 205, 0.4);
    font-size: 2.625rem;
    line-height: 3.125rem;
    font-weight: 600;
    text-align: center;
    top: 50%;
    left: 50%;
    width: 67.5rem;
    transform: translate(-50%, -50%)
}

.company-hardware .company-hardware-row {
    min-width: max-content;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .75rem
}

.company-hardware .company-hardware-image {
    height: 23.75rem;
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border-radius: 1.25rem
}

.company-hardware .company-hardware-image img {
    width: 100%;
    max-width: 100%;
    height: auto;
    display: block;
    object-fit: contain;
    object-position: center
}

@media (max-width:1024px) {
    .company-hardware {
        padding-bottom: 10px
    }

    .company-hardware .company-hardware-heading {
        padding: 0 20px;
        margin-bottom: 34px
    }

    .company-hardware .company-hardware-heading h2 {
        margin-bottom: 11px;
        font-size: 42px;
        line-height: 52px
    }

    .company-hardware .company-hardware-heading p {
        font-size: 16px;
        line-height: 25px
    }

    .company-hardware .company-hardware-gallery {
        display: none
    }

    .company-hardware .company-hardware-mobile {
        width: calc(100% - 40px);
        margin: 0 20px;
        position: relative;
        display: block;
        overflow: hidden
    }

    .company-hardware .company-hardware-mobile .swiper-wrapper {
        align-items: center
    }

    .company-hardware .company-hardware-mobile .swiper-slide {
        height: 220px;
        display: flex;
        align-items: center;
        justify-content: center
    }

    .company-hardware .company-hardware-caption {
        width: min(760px, calc(100vw - 48px));
        min-height: 76px;
        position: absolute;
        padding: 12px 30px;
        font-size: 29px;
        line-height: 38px;
        white-space: normal
    }

    .company-hardware .company-hardware-row {
        justify-content: flex-start;
        gap: 9px
    }

    .company-hardware .company-hardware-image {
        width: 100%;
        height: 220px;
        border-radius: 13px
    }

    .company-hardware .company-hardware-image img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center
    }
}

@media (max-width:640px) {
    .company-hardware .company-hardware-heading {
        margin-bottom: 26px
    }

    .company-hardware .company-hardware-heading h2 {
        font-size: 34px;
        line-height: 42px
    }

    .company-hardware .company-hardware-heading p {
        font-size: 14px;
        line-height: 23px
    }

    .company-hardware .company-hardware-heading p br {
        display: none
    }

    .company-hardware .company-hardware-image {
        height: 155px;
        border-radius: 11px
    }

    .company-hardware .company-hardware-mobile {
        width: calc(100% - 32px);
        margin: 0 16px
    }

    .company-hardware .company-hardware-mobile .swiper-slide {
        height: 155px
    }

    .company-hardware .company-hardware-caption {
        width: calc(100vw - 36px);
        min-height: 62px;
        padding: 10px 18px;
        font-size: 21px;
        line-height: 28px
    }
}

.cnc-content {
    --cnc-left-space: 102rem/16;
    position: relative;
    padding: 3.375rem 0 8.4375rem;
    overflow: hidden;
    background: #fff
}

.cnc-content:before {
    content: '';
    width: var(--cnc-left-space);
    height: 31.25rem;
    position: absolute;
    z-index: 3;
    left: 0;
    top: 3.375rem;
    background: #fff;
    pointer-events: none
}

.cnc-content .cnc-swiper {
    width: 100%;
    padding: 0 0 4.5rem var(--cnc-left-space);
    overflow: visible
}

.cnc-content .swiper-slide {
    height: auto
}

.cnc-content .cnc-card {
    height: 27.375rem;
    display: flex;
    flex-direction: column;
    padding: 1.5rem 1.5rem 2.125rem;
    overflow: hidden;
    border-radius: 1.5rem;
    background: #fff;
    box-shadow: 0 .25rem 1.5rem rgba(28, 58, 88, 0.055)
}

.cnc-content .cnc-image {
    width: 100%;
    height: 20.375rem;
    display: flex;
    align-items: center;
    justify-content: center
}

.cnc-content .cnc-image img {
    max-width: 100%;
    max-height: 100%;
    display: block;
    object-fit: contain;
    object-position: center
}

.cnc-content h3 {
    position: relative;
    margin: auto 0 0;
    padding-left: 1rem;
    color: #33373c;
    font-size: 1.22rem;
    line-height: 1.8125rem;
    font-weight: 400;
}

.cnc-content h3:before {
    content: '';
    width: .3125rem;
    height: .3125rem;
    position: absolute;
    left: .0625rem;
    top: .75rem;
    border-radius: 50%;
    background: #2782db
}

.cnc-content .cnc-scrollbar {
    width: calc(100% - var(--cnc-left-space));
    height: 1px;
    left: var(--cnc-left-space);
    bottom: 0;
    border-radius: 0;
    background: #a9b1ba
}

.cnc-content .cnc-scrollbar .swiper-scrollbar-drag {
    height: .5125rem;
    top: -0.225rem;
    border-radius: .25rem;
    background: #287ed1
}

@media (max-width:1024px) {
    .cnc-content {
        --cnc-left-space: 24px;
        padding: 42px 0 82px
    }

    .cnc-content:before {
        width: var(--cnc-left-space);
        height: 390px;
        top: 42px
    }

    .cnc-content .cnc-swiper {
        padding: 0 0 54px var(--cnc-left-space)
    }

    .cnc-content .cnc-card {
        height: 390px;
        padding: 24px 24px 28px;
        border-radius: 20px;
        box-shadow: 0 4px 20px rgba(28, 58, 88, 0.055)
    }

    .cnc-content .cnc-image {
        height: 290px
    }

    .cnc-content h3 {
        padding-left: 19px;
        font-size: 18px;
        line-height: 26px
    }

    .cnc-content h3:before {
        width: 5px;
        height: 5px;
        left: 1px;
        top: 10px
    }

    .cnc-content .cnc-scrollbar {
        width: calc(100% - var(--cnc-left-space));
        height: 2px;
        left: var(--cnc-left-space)
    }

    .cnc-content .cnc-scrollbar .swiper-scrollbar-drag {
        height: 5px;
        top: -2px;
        border-radius: 4px
    }
}

@media (max-width:640px) {
    .cnc-content {
        --cnc-left-space: 18px;
        padding: 34px 0 64px
    }

    .cnc-content:before {
        height: 350px;
        top: 34px
    }

    .cnc-content .cnc-swiper {
        padding: 0 0 44px var(--cnc-left-space)
    }

    .cnc-content .cnc-card {
        height: 350px;
        padding: 20px 20px 25px;
        border-radius: 16px
    }

    .cnc-content .cnc-image {
        height: 260px
    }

    .cnc-content h3 {
        white-space: normal;
        font-size: 16px;
        line-height: 23px
    }

    .cnc-content .cnc-scrollbar {
        width: calc(100% - var(--cnc-left-space));
        left: var(--cnc-left-space)
    }
}

.honor-content {
    min-height: 47.5rem;
    padding: 6.25rem 0 6.25rem 0;
    overflow: hidden;
    background: linear-gradient(to bottom, #f2f7fc, #fafbfc);
    position: relative
}

.honor-content::after {
    z-index: 1;
    bottom: -0.625rem;
    left: 0;
    content: "";
    width: 100%;
    height: 3.75rem;
    position: absolute;
    background: url(../images/honor-line.png) no-repeat top center;
    background-size: cover
}

.honor-content .honor-heading {
    position: relative;
    z-index: 4;
    text-align: center
}

.honor-content .honor-heading h2 {
    margin: 0 0 .875rem;
    color: #1e1f24;
    font-size: 3.25rem;
    line-height: 1
}

.honor-content .honor-tabs {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .875rem
}

.honor-content .honor-tabs button {
    min-width: 11.625rem;
    height: 3.125rem;
    padding: 0 1.5625rem;
    border: 0;
    border-radius: 1.75rem;
    color: #45494e;
    background: #e6edf2;
    font-size: 1.5rem;
    line-height: 1.875rem;
    cursor: pointer;
    transition: color .3s ease, background-color .3s ease
}

.honor-content .honor-tabs button.active {
    color: #fff;
    background: #287fd2;
    font-family: "Outfit SemiBold"
}

.honor-content .honor-slider-wrap {
    height: 31.5625rem;
    position: relative;
    display: none;
    margin-top: 1.5625rem
}

.honor-content .honor-slider-wrap.active {
    display: block
}

.honor-content .honor-swiper {
    width: 100%;
    height: 100%;
    overflow: visible
}

.honor-content .honor-swiper .swiper-wrapper {
    height: 100%;
    position: relative;
    align-items: flex-end
}

.honor-content .honor-swiper .swiper-slide {
    width: 12.8125rem;
    height: 24.6875rem;
    position: absolute;
    left: 50%;
    bottom: 0;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    transform: translateX(-50%);
    transform-origin: center bottom;
    opacity: 0;
    visibility: hidden;
    transition: left .7s cubic-bezier(.22, .61, .36, 1), width .7s cubic-bezier(.22, .61, .36, 1), transform .7s cubic-bezier(.22, .61, .36, 1), opacity .45s ease, visibility .45s ease;
    will-change: left, width, transform, opacity
}

.honor-content .honor-swiper .swiper-slide img {
    filter: drop-shadow(0 1.0625rem 1.0625rem rgba(54, 74, 90, 0.12))
}

.honor-content .honor-swiper .swiper-slide.honor-visible {
    opacity: 1;
    visibility: visible
}

.honor-content .honor-swiper .swiper-slide.honor-pos--2 {
    left: calc(50% - 713rem/16);
    transform: translateX(-50%)
}

.honor-content .honor-swiper .swiper-slide.honor-pos--1 {
    left: calc(50% - 440rem/16);
    transform: translateX(-50%)
}

.honor-content .honor-swiper .swiper-slide.honor-pos-1 {
    left: calc(50% + 440rem/16);
    transform: translateX(-50%)
}

.honor-content .honor-swiper .swiper-slide.honor-pos-2 {
    left: calc(50% + 713rem/16);
    transform: translateX(-50%)
}

.honor-content .honor-swiper .swiper-slide.honor-landscape {
    width: 205px
}

.honor-content .honor-swiper .swiper-slide.honor-landscape.swiper-slide-active {
    width: 33.4375rem
}

.honor-content .honor-swiper .swiper-slide.honor-landscape:not(.swiper-slide-active) .honor-image img {
    width: 100%;
    height: auto
}

.honor-content .honor-swiper .swiper-slide:not(.swiper-slide-active) .honor-image img {
    width: 100%;
    height: auto
}

.honor-content .honor-swiper .swiper-slide.swiper-slide-active {
    width: 18.75rem;
    left: 50%;
    z-index: 2;
    opacity: 1;
    transform: translateX(-50%) scale(1)
}

.honor-content .honor-image {
    width: 100%;
    height: 24.6875rem;
    display: flex;
    align-items: flex-end;
    justify-content: center
}

.honor-content .honor-image img {
    width: auto;
    max-width: none;
    height: 100%;
    display: block;
    object-fit: contain;
    object-position: center
}

.honor-content .honor-current-title {
    position: absolute;
    z-index: 4;
    left: 50%;
    top: 2.8125rem;
    margin: 0;
    color: #2e3338;
    font-size: 1.25rem;
    line-height: 1.75rem;
    font-weight: 400;
    transform: translateX(-50%);
    white-space: nowrap
}

.honor-content .honor-side {
    position: absolute;
    z-index: 5;
    top: 1rem;
    display: flex;
    align-items: center;
    gap: 1.75rem
}

.honor-content .honor-side>div {
    display: flex;
    flex-direction: column;
    gap: .5rem
}

.honor-content .honor-side span {
    color: #96999c;
    font-size: 1.0625rem;
    line-height: 1.4375rem
}

.honor-content .honor-side strong {
    max-width: 15.3125rem;
    overflow: hidden;
    color: #34383d;
    font-size: 1.125rem;
    line-height: 1.5625rem;
    font-weight: 400;
    text-overflow: ellipsis;
    white-space: nowrap
}

.honor-content .honor-side-prev {
    left: 7.8125rem
}

.honor-content .honor-side-next {
    right: 7.8125rem;
    text-align: right
}

.honor-content .honor-prev,
.honor-content .honor-next {
    width: 4.25rem;
    height: 4.25rem;
    position: relative;
    flex: 0 0 auto;
    padding: 0;
    border: 1px solid #cfd5da;
    border-radius: 50%;
    color: #aab1b7;
    background: transparent;
    cursor: pointer;
    transition: color .3s ease, border-color .3s ease
}

.honor-content .honor-prev:before,
.honor-content .honor-next:before,
.honor-content .honor-prev:after,
.honor-content .honor-next:after {
    content: '';
    position: absolute;
    border-radius: 50%
}

.honor-content .honor-prev:before,
.honor-content .honor-next:before {
    inset: .4375rem;
    border: 1px solid #c1c8ce
}

.honor-content .honor-prev:after,
.honor-content .honor-next:after {
    inset: .9375rem;
    border: .125rem solid #bbc3ca
}

.honor-content .honor-prev i,
.honor-content .honor-next i {
    width: .5625rem;
    height: .5625rem;
    position: absolute;
    z-index: 2;
    left: 50%;
    top: 50%;
    border-top: .125rem solid currentColor;
    border-right: .125rem solid currentColor
}

.honor-content .honor-prev:hover,
.honor-content .honor-next:hover {
    color: #087be1;
    border-color: #a8cff1
}

.honor-content .honor-prev:hover:before,
.honor-content .honor-next:hover:before {
    border-color: #63a9e7
}

.honor-content .honor-prev:hover:after,
.honor-content .honor-next:hover:after {
    border-color: #087be1
}

.honor-content .honor-prev i {
    transform: translate(-35%, -50%) rotate(-135deg)
}

.honor-content .honor-next i {
    transform: translate(-65%, -50%) rotate(45deg)
}

@media (max-width:1024px) {
    .honor-content {
        min-height: 650px;
        padding: 58px 0 42px
    }

    .honor-content .honor-heading h2 {
        margin-bottom: 13px;
        font-size: 42px;
        line-height: 52px
    }

    .honor-content .honor-tabs {
        gap: 12px
    }

    .honor-content .honor-tabs button {
        min-width: 165px;
        height: 46px;
        padding: 0 22px;
        border-radius: 25px;
        font-size: 20px;
        line-height: 27px
    }

    .honor-content .honor-slider-wrap {
        height: 440px;
        margin-top: 22px
    }

    .honor-content .honor-swiper .swiper-slide {
        width: 205px;
        height: 330px
    }

    .honor-content .honor-swiper .swiper-slide.honor-landscape {
        width: 205px
    }

    .honor-content .honor-swiper .swiper-slide.honor-landscape.swiper-slide-active {
        width: 447px
    }

    .honor-content .honor-swiper .swiper-slide.honor-landscape:not(.swiper-slide-active) .honor-image img {
        max-width: 100%
    }

    .honor-content .honor-swiper .swiper-slide.swiper-slide-active {
        width: 250px
    }

    .honor-content .honor-swiper .swiper-slide.honor-pos--2 {
        left: calc(50% - 548px);
        transform: translateX(-50%)
    }

    .honor-content .honor-swiper .swiper-slide.honor-pos--1 {
        left: calc(50% - 367px);
        transform: translateX(-50%)
    }

    .honor-content .honor-swiper .swiper-slide.honor-pos-1 {
        left: calc(50% + 367px);
        transform: translateX(-50%)
    }

    .honor-content .honor-swiper .swiper-slide.honor-pos-2 {
        left: calc(50% + 548px);
        transform: translateX(-50%)
    }

    .honor-content .honor-image {
        height: 330px;
        align-items: center
    }

    .honor-content .honor-image img {
        width: 100% !important;
        max-width: 100%;
        height: 100% !important;
        max-height: 100%;
        object-fit: contain;
        object-position: center center;
        filter: drop-shadow(0 14px 14px rgba(54, 74, 90, 0.12))
    }

    .honor-content .honor-current-title {
        top: 24px;
        width: calc(100% - 360px);
        max-width: 420px;
        overflow: visible;
        font-size: 18px;
        line-height: 26px;
        text-align: center;
        text-overflow: clip;
        white-space: normal
    }

    .honor-content .honor-side {
        top: 13px;
        gap: 16px
    }

    .honor-content .honor-side span {
        font-size: 15px;
        line-height: 21px
    }

    .honor-content .honor-side strong {
        max-width: 150px;
        font-size: 16px;
        line-height: 23px
    }

    .honor-content .honor-side-prev {
        left: 24px
    }

    .honor-content .honor-side-next {
        right: 24px
    }

    .honor-content .honor-prev,
    .honor-content .honor-next {
        width: 58px;
        height: 58px
    }

    .honor-content .honor-prev:before,
    .honor-content .honor-next:before {
        inset: 6px
    }

    .honor-content .honor-prev:after,
    .honor-content .honor-next:after {
        inset: 13px;
        border-width: 2px
    }

    .honor-content .honor-prev i,
    .honor-content .honor-next i {
        width: 8px;
        height: 8px;
        border-width: 2px
    }
}

@media (max-width:760px) {
    .honor-content {
        min-height: 590px;
        padding: 44px 0 34px
    }

    .honor-content .honor-heading {
        padding: 0 18px
    }

    .honor-content .honor-heading h2 {
        font-size: 34px;
        line-height: 42px
    }

    .honor-content .honor-tabs button {
        min-width: 0;
        height: 42px;
        padding: 0 20px;
        font-size: 17px
    }

    .honor-content .honor-slider-wrap {
        height: 350px;
        margin-top: 18px
    }

    .honor-content .honor-swiper {
        padding-top: 58px
    }

    .honor-content .honor-swiper .swiper-slide {
        width: 205px;
        height: 276px
    }

    .honor-content .honor-swiper .swiper-slide.honor-landscape {
        width: 205px
    }

    .honor-content .honor-swiper .swiper-slide.honor-landscape.swiper-slide-active {
        width: 374px
    }

    .honor-content .honor-swiper .swiper-slide.honor-landscape:not(.swiper-slide-active) .honor-image img {
        max-width: 100%
    }

    .honor-content .honor-swiper .swiper-slide.swiper-slide-active {
        width: 210px
    }

    .honor-content .honor-swiper .swiper-slide.honor-pos--2 {
        left: calc(50% - 434px);
        transform: translateX(-50%)
    }

    .honor-content .honor-swiper .swiper-slide.honor-pos--1 {
        left: calc(50% - 286px);
        transform: translateX(-50%)
    }

    .honor-content .honor-swiper .swiper-slide.honor-pos-1 {
        left: calc(50% + 286px);
        transform: translateX(-50%)
    }

    .honor-content .honor-swiper .swiper-slide.honor-pos-2 {
        left: calc(50% + 434px);
        transform: translateX(-50%)
    }

    .honor-content .honor-image {
        height: 220px
    }

    .honor-content .honor-side {
        top: 0
    }

    .honor-content .honor-side>div {
        display: none
    }

    .honor-content .honor-side-prev {
        left: 18px
    }

    .honor-content .honor-side-next {
        right: 18px
    }

    .honor-content .honor-current-title {
        top: 15px;
        width: calc(100% - 140px);
        max-width: none;
        overflow: visible;
        font-size: 15px;
        line-height: 22px;
        text-overflow: clip;
        white-space: normal
    }

    .honor-content .honor-prev,
    .honor-content .honor-next {
        width: 48px;
        height: 48px
    }

    .honor-content .honor-prev:before,
    .honor-content .honor-next:before {
        inset: 5px
    }

    .honor-content .honor-prev:after,
    .honor-content .honor-next:after {
        inset: 11px
    }
}

.partner-content {
    background-color: #fafbfc
}

.news-show {
    color: #27282d;
    padding: 3.125rem 0 6.25rem;
    background: linear-gradient(to bottom, #f6f7f8, #ffffff 1%)
}

.news-show .news-show-breadcrumb {
    font-size: 1.125rem;
    height: 1.875rem;
    color: #aeb7c1;
    line-height: 1.875rem;
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    text-overflow: ellipsis;
    -webkit-line-clamp: 1;
    color: #b4bbc1
}

.news-show .news-show-breadcrumb a {
    color: #b4bbc1
}

.news-show .news-show-breadcrumb a:hover {
    color: var(--main-color)
}

.news-show .news-show-breadcrumb svg {
    margin-bottom: .25rem;
    vertical-align: middle;
    width: 1.375rem;
    height: 1.375rem;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round
}

.news-show .news-show-breadcrumb i {
    font-style: normal
}

.news-show .news-show-layout {
    margin-top: 4.6875rem;
    display: grid;
    grid-template-columns: minmax(0, 93.125rem) 6.875rem;
    gap: 5rem;
    align-items: start
}

.news-show .news-show-header h1 {
    max-width: 68.75rem;
    margin: 0;
    color: #222f3d;
    font-size: 2.875rem;
    line-height: 3.75rem;
    font-family: "Outfit SemiBold";
    font-weight: normal;
    letter-spacing: 0
}

.news-show .news-show-meta {
    min-height: 4.375rem;
    margin-top: 2.375rem;
    padding: 0 .25rem;
    border-top: .0625rem dashed #ccd0d5;
    display: flex;
    align-items: flex-end;
    gap: 2.125rem;
    color: #999;
    font-size: 1rem;
    line-height: 1.5rem
}

.news-show .news-show-meta span {
    display: inline-flex;
    align-items: center;
    gap: .8125rem
}

.news-show .news-show-meta svg {
    width: 1.375rem;
    height: 1.375rem;
    fill: none;
    stroke: #087be1;
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round
}

.news-show .news-show-body {
    margin-top: 3.375rem;
    color: #25272d;
    font-size: 1.125rem;
    line-height: 1.875rem
}

.news-show .news-show-body p {
    margin: 0 0 1.0625rem
}

.news-show .news-show-body a {
    color: var(--main-color)
}

.news-show .news-show-body h2 {
    margin: 1rem 0 1.0625rem;
    color: #24262b;
    font-size: 1.125rem;
    line-height: 1.75rem;
    font-family: "Outfit SemiBold";
    font-weight: normal
}

.news-show .news-show-body img {
    width: 75.625rem;
    max-width: 100%;
    height: auto;
    margin: 1.6875rem auto 2.0625rem;
    display: block
}

.news-show .news-show-body strong {
    font-family: "Outfit SemiBold";
    font-weight: normal
}

.news-show .news-show-company {
    margin-top: .625rem
}

.news-show .news-show-company h2 {
    margin: 0 0 .125rem
}

.news-show .news-show-company p {
    margin-top: .3125rem
}

.news-show .news-show-labels {
    font-size: 1.375rem;
    margin-top: 3.4375rem;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .4375rem;
    color: #333
}

.news-show .news-show-labels>span {
    margin-right: .1875rem
}

.news-show .news-show-labels a {
    padding: .1875rem .625rem;
    color: #333;
    font-family: inherit;
    line-height: 1.625rem;
    border-radius: .25rem;
    background: #cee1f4;
    transition: color .3s ease, background .3s ease
}

.news-show .news-show-labels a:hover {
    color: #fff;
    background: var(--main-color)
}

.news-show .news-show-pager {
    margin-top: 2.625rem;
    border-top: 1px solid #aeb3b9;
    border-bottom: 1px solid #aeb3b9
}

.news-show .news-show-pager a {
    min-height: 4.1875rem;
    display: flex;
    align-items: center;
    color: #333;
    font-size: 1.25rem;
    border-bottom: 1px solid #e4e6e8;
    font-weight: 100
}

.news-show .news-show-pager a:last-child {
    border-bottom: 0
}

.news-show .news-show-pager a:hover strong {
    color: var(--main-color)
}

.news-show .news-show-pager span {
    font-weight: 100;
    min-width: 10rem;
    flex: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-right: 2.125rem;
    font-weight: normal
}

.news-show .news-show-pager i {
    width: 0;
    height: 0;
    border-left: .25rem solid transparent;
    border-right: .25rem solid transparent;
    border-bottom: .3125rem solid #222
}

.news-show .news-show-pager a:last-child i {
    border-top: .3125rem solid #222;
    border-bottom: 0
}

.news-show .news-show-pager strong {
    font-family: inherit;
    font-weight: normal;
    transition: color .3s ease
}

.news-show .news-show-share {
    position: relative;
    align-self: stretch;
    height: 100%;
    min-height: 21.4375rem
}

.news-show .news-show-share-inner {
    top: 8.75rem;
    position: sticky;
    width: 6.875rem;
    min-height: 21.4375rem;
    padding: 2.375rem 0 2.125rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    background: #fff;
    box-shadow: 0 .5rem 2rem rgba(24, 43, 66, 0.1)
}

.news-show .news-show-share-inner h2 {
    margin: 0 0 .875rem;
    color: #172641;
    font-size: 1.25rem;
    line-height: 1.75rem;
    font-weight: normal
}

.news-show .news-show-share-inner>a:not(.news-show-back) {
    width: 2.5rem;
    height: 2.5rem;
    margin-bottom: .6875rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    background: #69748c;
    transition: background .3s ease, transform .3s ease
}

.news-show .news-show-share-inner>a:not(.news-show-back):hover {
    background: #087be1;
    transform: translateY(-0.125rem)
}

.news-show .news-show-share-inner>a:not(.news-show-back) svg {
    width: 1.4375rem;
    height: 1.4375rem;
    fill: currentColor
}

.news-show .news-show-share-line {
    width: 3.75rem;
    height: .0625rem;
    margin: .4375rem 0 1.5rem;
    background: #e5e7ea
}

.news-show .news-show-share-inner .news-show-back {
    width: 3.25rem;
    height: 3.25rem;
    border: .1875rem solid #087be1;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #087be1;
    transition: color .3s ease, background .3s ease
}

.news-show .news-show-share-inner .news-show-back:hover {
    color: #fff;
    background: #087be1
}

.news-show .news-show-share-inner .news-show-back svg {
    width: 1.6875rem;
    height: 1.6875rem;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round
}

@media (max-width:1200px) {
    .news-show {
        margin-top: 7.1875rem
    }

    .news-show .news-show-layout {
        grid-template-columns: minmax(0, 1fr) 5.625rem;
        gap: 2.1875rem
    }

    .news-show .news-show-share-inner {
        top: 8rem;
        width: 5.625rem
    }
}

@media (max-width:1024px) {
    .news-show {
        margin-top: 60px;
        padding: 24px 0 64px
    }

    .news-show .news-show-breadcrumb {
        height: 26px;
        font-size: 14px;
        line-height: 26px
    }

    .news-show .news-show-breadcrumb svg {
        width: 18px;
        height: 18px;
        margin: 0 5px 2px 0
    }

    .news-show .news-show-breadcrumb i {
        margin: 0 7px
    }

    .news-show .news-show-layout {
        margin-top: 36px;
        display: block
    }

    .news-show .news-show-header h1 {
        max-width: none;
        font-size: 32px;
        line-height: 42px
    }

    .news-show .news-show-meta {
        min-height: 0;
        margin-top: 25px;
        padding: 18px 0 0;
        align-items: center;
        flex-wrap: wrap;
        gap: 12px 24px;
        font-size: 14px;
        line-height: 22px
    }

    .news-show .news-show-meta span {
        gap: 9px
    }

    .news-show .news-show-meta svg {
        width: 19px;
        height: 19px
    }

    .news-show .news-show-body {
        margin-top: 32px;
        font-size: 16px;
        line-height: 28px
    }

    .news-show .news-show-body p {
        margin-bottom: 16px
    }

    .news-show .news-show-body h2 {
        margin: 18px 0 12px;
        font-size: 17px;
        line-height: 27px
    }

    .news-show .news-show-body img {
        margin: 24px auto 28px
    }

    .news-show .news-show-company {
        margin-top: 12px
    }

    .news-show .news-show-company h2 {
        margin-bottom: 3px
    }

    .news-show .news-show-company p {
        margin-top: 6px
    }

    .news-show .news-show-labels {
        margin-top: 38px;
        gap: 8px;
        font-size: 16px
    }

    .news-show .news-show-labels>span {
        margin-right: 2px
    }

    .news-show .news-show-labels a {
        padding: 4px 9px;
        line-height: 23px;
        border-radius: 4px
    }

    .news-show .news-show-pager {
        margin-top: 32px
    }

    .news-show .news-show-pager a {
        min-height: 60px;
        font-size: 16px
    }

    .news-show .news-show-pager span {
        min-width: 125px;
        padding-right: 24px
    }

    .news-show .news-show-pager i {
        border-left-width: 4px;
        border-right-width: 4px;
        border-bottom-width: 5px
    }

    .news-show .news-show-pager a:last-child i {
        border-top-width: 5px;
        border-bottom: 0
    }

    .news-show .news-show-share {
        height: auto;
        min-height: 0;
        margin-top: 34px
    }

    .news-show .news-show-share-inner {
        width: 100%;
        min-height: 0;
        padding: 14px 18px;
        position: static;
        flex-direction: row;
        gap: 10px;
        border: 1px solid #edf0f3;
        box-shadow: 0 8px 24px rgba(24, 43, 66, 0.08)
    }

    .news-show .news-show-share-inner h2 {
        margin: 0 8px 0 0;
        font-size: 17px;
        line-height: 24px
    }

    .news-show .news-show-share-inner>a:not(.news-show-back) {
        margin: 0
    }

    .news-show .news-show-share-inner>a:not(.news-show-back) {
        width: 40px;
        height: 40px
    }

    .news-show .news-show-share-inner>a:not(.news-show-back) svg {
        width: 22px;
        height: 22px
    }

    .news-show .news-show-share-line {
        width: 1px;
        height: 38px;
        margin: 0 6px
    }

    .news-show .news-show-share-inner .news-show-back {
        width: 44px;
        height: 44px;
        margin-left: auto;
        border-width: 2px
    }

    .news-show .news-show-share-inner .news-show-back svg {
        width: 23px;
        height: 23px
    }
}

@media (max-width:640px) {
    .news-show {
        padding: 18px 0 48px
    }

    .news-show .news-show-breadcrumb {
        height: 24px;
        font-size: 13px;
        line-height: 24px
    }

    .news-show .news-show-breadcrumb svg {
        width: 17px;
        height: 17px
    }

    .news-show .news-show-breadcrumb i {
        margin: 0 5px
    }

    .news-show .news-show-layout {
        margin-top: 28px
    }

    .news-show .news-show-header h1 {
        font-size: 26px;
        line-height: 34px
    }

    .news-show .news-show-header h1 br {
        display: none
    }

    .news-show .news-show-meta {
        margin-top: 20px;
        padding-top: 15px;
        gap: 8px 18px;
        font-size: 13px
    }

    .news-show .news-show-body {
        margin-top: 28px;
        font-size: 15px;
        line-height: 26px
    }

    .news-show .news-show-body p {
        margin-bottom: 15px
    }

    .news-show .news-show-body h2 {
        margin: 16px 0 10px;
        font-size: 16px;
        line-height: 25px
    }

    .news-show .news-show-body img {
        margin: 20px auto 24px
    }

    .news-show .news-show-labels {
        margin-top: 30px;
        gap: 7px;
        font-size: 14px
    }

    .news-show .news-show-labels a {
        padding: 3px 8px;
        line-height: 22px
    }

    .news-show .news-show-pager {
        margin-top: 26px
    }

    .news-show .news-show-pager a {
        min-height: 66px;
        align-items: flex-start;
        flex-direction: column;
        justify-content: center;
        gap: 3px;
        padding: 9px 0;
        font-size: 14px;
        line-height: 22px
    }

    .news-show .news-show-pager span {
        min-width: 0;
        width: auto;
        gap: 9px;
        padding-right: 0;
        color: #777
    }

    .news-show .news-show-share-inner {
        padding: 12px;
        gap: 8px
    }

    .news-show .news-show-share-inner h2 {
        display: none
    }

    .news-show .news-show-share-inner>a:not(.news-show-back) {
        width: 38px;
        height: 38px
    }

    .news-show .news-show-share-line {
        height: 34px;
        margin: 0 2px
    }

    .news-show .news-show-share-inner .news-show-back {
        width: 40px;
        height: 40px
    }
}

.recommended-news {
    min-height: 49.25rem;
    padding: 5.625rem 0 6.875rem;
    overflow: hidden;
    background: #f7fbfe url('../images/recommended-bg.jpg') center center / cover no-repeat
}

.recommended-news .recommended-news-title {
    margin: 0 0 2.9375rem;
    color: #1e1f24;
    text-align: center;
    font-size: 3rem;
    line-height: 1;
    font-weight: 500
}

.recommended-news .recommended-news-item {
    min-width: 0;
    padding: 0 1rem
}

.recommended-news .recommended-news-image {
    width: 100%;
    height: 20rem;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border-radius: 1.25rem;
    background: #e8f1f6
}

.recommended-news .recommended-news-image img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    object-position: center center;
    transition: transform .55s ease
}

.recommended-news .recommended-news-item:hover .recommended-news-image img {
    transform: scale(1.04)
}

.recommended-news h3 {
    height: 3.75rem;
    margin: 1.6875rem 1.375rem 0;
    font-size: 1.5rem;
    line-height: 1.875rem;
    font-weight: 400;
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    text-overflow: ellipsis;
    -webkit-line-clamp: 2
}

.recommended-news h3 a {
    color: #25282c;
    transition: color .3s ease
}

.recommended-news .recommended-news-item:hover h3 a {
    color: var(--main-color)
}

.recommended-news .recommended-news-item:hover .recommended-news-more {
    transform: rotate(45deg)
}

.recommended-news .recommended-news-meta {
    margin: 1.1875rem 1.375rem 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: #999;
    font-size: 1.0625rem;
    line-height: 2.5rem
}

.recommended-news .recommended-news-more {
    width: 2.5rem;
    height: 2.5rem;
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    border-radius: 50%;
    background: var(--main-color);
    transition: transform .3s ease, background .3s ease
}

.recommended-news .recommended-news-more svg {
    width: 1.375rem;
    height: 1.375rem;
    fill: currentColor
}

.recommended-news .recommended-news-more:hover {
    background: #075aa8;
    transform: rotate(45deg)
}

@media (max-width:1024px) {
    .recommended-news {
        min-height: 0;
        padding: 58px 0 72px
    }

    .recommended-news .recommended-news-title {
        margin-bottom: 36px;
        font-size: 38px;
        line-height: 48px
    }

    .recommended-news .recommended-news-item {
        padding: 0
    }

    .recommended-news .recommended-news-image {
        height: auto;
        aspect-ratio: 1.65625;
        border-radius: 14px
    }

    .recommended-news h3 {
        height: 56px;
        margin: 20px 12px 0;
        font-size: 20px;
        line-height: 28px
    }

    .recommended-news .recommended-news-meta {
        margin: 14px 12px 0;
        font-size: 14px;
        line-height: 36px
    }

    .recommended-news .recommended-news-more {
        width: 36px;
        height: 36px
    }

    .recommended-news .recommended-news-more svg {
        width: 20px;
        height: 20px
    }
}

@media (max-width:640px) {
    .recommended-news {
        padding: 45px 0 58px
    }

    .recommended-news .recommended-news-title {
        margin-bottom: 28px;
        font-size: 30px;
        line-height: 40px
    }

    .recommended-news h3 {
        height: auto;
        min-height: 56px;
        margin-top: 18px
    }
}

.active.about-warp .about-copy {
    animation: 1.5s ease fadeInLeft2
}

.active.about-warp .about-slogan {
    animation: 1.6s ease fadeInRight2
}

.active.message-warp .message-intro {
    animation: 1.5s ease fadeInLeft2
}

.active.message-warp .message-form-panel {
    animation: 1.6s ease fadeInRight2
}

/* Site search */
.site-search-page {
    background: #f7f8fa;
    padding: 180px 0 110px;
    min-height: 70vh
}

.site-search-container {
     
}

.site-search-heading {
     
    margin: 0 auto 54px;
    text-align: center
}

.site-search-eyebrow {
    margin: 0 0 12px;
    color: #287fd2;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .16em
}

.site-search-heading h1 {
    margin: 0 0 28px;
    color: #17231f;
    font-size: 48px;
    line-height: 1.1
}

.site-search-form {
    display: flex;
    border: 1px solid #d7deda;
    background: #fff
}

.site-search-form label {
    flex: 1
}

.site-search-form input {
    box-sizing: border-box;
    width: 100%;
    height: 58px;
    padding: 0 19px;
    border: 0;
    color: #1a2722;
    font-size: 16px;
    outline: 0
}

.site-search-form button {
    min-width: 126px;
    border: 0;
    background: #287fd2;
    color: #fff;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer
}

.site-search-summary {
    
    margin: 0 auto 18px;
    color: #53615b;
    font-size: 15px
}

.site-search-summary strong {
    color: #17231f
}

.site-search-results {
   
    margin: auto;
    background: #fff;
    border: 1px solid #e2e7e4
}

.site-search-result {
    position: relative;
    min-height: 112px;
    padding: 25px 150px 25px 28px;
    border-bottom: 1px solid #e5e9e7
}

.site-search-result:last-child {
    border-bottom: 0
}

.site-search-category {
    margin: 0 0 6px;
    color: #287fd2;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase
}

.site-search-result h2 {
    margin: 0 0 8px;
    font-size: 20px;
    line-height: 1.35
}

.site-search-result h2 a {
    color: #17231f
}

.site-search-excerpt {
    margin: 0;
    color: #65716c;
    font-size: 14px;
    line-height: 1.7
}

.site-search-image {
    position: absolute;
    top: 26px;
    right: 28px;
    width: 92px;
    height: 82px
}

.site-search-image img {
    width: 100%;
    height: 100%;
    object-fit: cover
}

.site-search-more {
    display: inline-block;
    margin-top: 12px;
    color: #287fd2;
    font-size: 13px;
    font-weight: 600
}

.site-search-more i {
    font-style: normal;
    margin-left: 5px
}

.site-search-sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0)
}

@media(max-width:767px) {
    .site-search-page {
        padding: 125px 0 60px
    }

    .site-search-heading h1 {
        font-size: 35px
    }

    .site-search-form input {
        height: 52px
    }

    .site-search-form button {
        min-width: 96px
    }

    .site-search-result {
        padding: 20px
    }

    .site-search-image {
        display: none
    }
}
@media (max-width: 480px) {
  .warranty-content .warranty-label {
    width: fit-content;
    max-width: 100%;
    height: 45px;
    padding: 0 17px;
    padding-right: 17px;
    font-size: 16px;
    background: var(--main-color);

    width: 100%;
    padding-right: 0 !important;
  }
}