:root {
	--blue: #ff1616;
	--navy: #091e4b;
	--muted: #64748b;
	--pale: #eef7ff;
	--line: #dce7f4;
	--shadow: 0 16px 44px #173e7514
}

* {
	box-sizing: border-box;list-style-type: none;padding: 0;margin: 0;
}

/* JS 只用 hidden 属性控制显隐（产品筛选、空状态等），确保不被布局样式覆盖 */
[hidden] {
	display: none !important
}

html {
	scroll-behavior: smooth;
	scroll-padding-top: 96px
}

body {
	margin: 0;
	font-family: Arial, 'Microsoft YaHei', 'PingFang SC', sans-serif;
	color: var(--navy);
	line-height: 1.75;
	background: white
}

h1,
h2,
h3,
p {
	margin: 0
}

h1,
h2,
h3 {
	line-height: 1.35
}

h1 {
	font-size: clamp(56px, 2vw, 24px);
	letter-spacing: .015em
}

h2 {
	font-size: clamp(25px, 2.3vw, 36px);
	font-weight: 750
}

h3 {
	font-size: 19px
}

p {
	color: var(--muted);
	margin-top: 14px
}

a {
	color: inherit;
	text-decoration: none
}

button,
input,
textarea {
	font: inherit
}

button,
a {
	-webkit-tap-highlight-color: transparent
}

button {
	cursor: pointer
}

img {
	display: block;
	max-width: 100%;
	height: auto;
}

svg {
	width: 24px;
	height: 24px;
	flex-shrink: 0
}

button {
	border: 0
}

a,
button,
input,
textarea {
	outline-offset: 5px
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible {
	outline: 2px solid var(--blue)
}

.container {
	width: min(1280px, 90%);
	margin-inline: auto
}

.section {
	padding-block: 70px
}

.pale {
	background: linear-gradient(120deg, #f3f9ff, #eaf5ff)
}
.ptm50{padding: 50px 0;}
.inbannerbox{width: 100%;margin: 0 auto;font-size: 0;}
.inbannerbox img{width: 100%;}
.section-heading {
	margin-bottom: 32px
}

.section-heading h2 {
	margin-top: 6px
}

.section-heading p {
	margin-top: 9px
}

.eyebrow {
	color: var(--blue);
	font-size: 13px;
	letter-spacing: .07em;
	display: block
}

.eyebrow.muted {
	color: #8593a8
}

.fine {
	font-size: 12px;
	color: #8793a6
}

.center {
	text-align: center
}

.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 18px;
	padding: 12px 26px;
	/*background: linear-gradient(110deg, #f17777, #ff1616);*/
	color: white;
	border: 1px solid transparent;
	border-radius: 5px;
	font-weight: 600;
	font-size: 14px;
	line-height: 1.5;
	transition: transform .25s, box-shadow .25s, background .25s;
	background: #ff1616;
}

.btn:hover {
	transform: translateY(-2px);
	box-shadow: 0 8px 20px #ff161635
}

.btn svg {
	width: 18px;
	height: 18px;
	transition: transform .25s
}

.btn:hover svg {
	transform: translateX(3px)
}

.btn.white {
	background: white;
	color: var(--blue)
}

.btn.outline {
	background: transparent;
	border-color: #ffffff88
}

.btn.text-btn {
	background: none;
	color: var(--blue);
	padding: 12px 0;
	border: 0
}

.picture {
	overflow: hidden;
	min-width: 0
}

.picture img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .7s cubic-bezier(.2, .7, .3, 1)
}

.picture:hover img {
	transform: scale(1.035)
}

.split {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 44px;
	align-items: center
}

.split>div {
	min-width: 0
}

.split h3 {
	margin-top: 22px
}

.split .picture {
	height: 100%;
	min-height: 290px
}

.split .btn {
	margin-top: 14px
}

.skip {
	position: fixed;
	top: -100px;
	left: 20px;
	padding: 10px;
	background: #fff;
	z-index: 200
}

.skip:focus {
	top: 10px
}

.site-header {
	position: fixed;
	top: 0;
	/* background: #fffffffa; */
	z-index: 100;
	/* border-bottom: 1px solid #eef2f7; */
	transition: box-shadow .3s;
	width: 100%;
}

.site-header.active{background: #fff;}
.site-header.scrolled {
	box-shadow: 0 4px 25px #061a4620
}

.header-inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	min-height: 84px
}

.logo {
	display: inline-flex;
	flex-direction: column;
	line-height: 1.1;
	white-space: nowrap
}
.logo_b{display: none;}
.logo_w{display: block;}
.site-header.active .logo_w{display: none;}
.site-header.active .logo_b{display: block;}
.logo b {
	font-size: 28px;
	font-style: italic;
	letter-spacing: -1px;
	color: #fff;
}
.site-header.active .logo b{color: #091e4b;}
.logo small {
	font-size: 13px;
	letter-spacing: 4px;
	margin-top: 5px;
	font-weight: bold;color: #fff;
}
.site-header.active .logo small{color: #091e4b;}
.site-header nav {
	display: flex;
	gap: 23px;
	align-items: center
}

.site-header nav a {
	font-size: 18px;
	position: relative;
	padding: 10px 22px;
	color: #fff;
	white-space: nowrap;
	font-weight:bolder;
}
.site-header.active nav a{color: #091e4b;}
.site-header nav a:after {
	content: '';
	position: absolute;
	bottom: 3px;
	left: 0;
	width: 100%;
	height: 2px;
	background: var(--blue);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform .25s
}

.site-header nav a:hover,
.site-header nav a[aria-current] {
	color: var(--blue)
}

.site-header nav a:hover:after,
.site-header nav a[aria-current]:after {
	transform: scaleX(1)
}

/*mMenu*/
.m_header{width: 100%;}
.sp_header{height:70px;overflow:hidden;background:#fff;position:fixed;z-index:999;width:100%;display: none;top: 0;align-items: center;justify-content: space-between;}
.sp_logo{height:70px;display: flex;justify-content: center;align-items: center;padding-left: 10px;}
.sp_logo img{margin:auto;max-height:50px;}
.sp_nav{width:50px;position:relative;cursor:pointer;height:30px;}
/* 横杠 */
.sp_nav 
span{display:block;background:#000000;width:30px;height:3px;position:absolute;left:10px;transition:all ease 0.35s}
.sp_nav span:nth-of-type(1){top:0px}
.sp_nav span:nth-of-type(2){top:10px}
.sp_nav span:nth-of-type(3){top:20px}
.sp_nav_se span:nth-of-type(1){top:10px;transform:rotate(45deg)}
.sp_nav_se span:nth-of-type(2){width:0}
.sp_nav_se span:nth-of-type(3){top:10px;transform:rotate(-45deg)}
.sjj_nav{position:fixed;z-index:9999;background:#fff;width:100%;height:calc(100% - 70px);font-size:14px;line-height:40px;top:70px;left:0;overflow:auto;overflow-x:hidden;transition:top ease 0.35s;display: none;transition:all ease 0.35s}
.nav_show{display: block;}
.sjj_nav ul li i{position:absolute;top:5px;right:0px;height:30px;padding:0px 7px 0 7px;}
.sjj_nav ul li i svg{transform:rotate(-90deg);transition:all ease 0.35s}
.sjj_nav ul li .sjj_nav_i_se svg{transform:rotate(0deg)}
.sjj_nav ul li{border-bottom: 1px dashed #ddd;;position:relative;line-height:45px;font-size:16px}
.sjj_nav>ul >li:last-child{border-bottom: 1px dashed #ddd;}
.sjj_nav ul li ul{display:none}
.sjj_nav ul li a{color:#333;width:100%;padding: 0 20px;display: block;box-sizing: border-box;}
.sjj_nav ul li a:hover{color: #000000;}
.sjj_nav ul li ul li a{color:#333;display:block;text-align:left;}
.sjj_nav ul li i svg{width:25px;height:25px;fill:#333;}
.sjj_nav ul li .sjj_nav_i_se svg{fill:#333;}
.sjj_nav ul li ul li>ul{margin-left:10px}
.sjj_nav ul li ul li{border-top: none;}
.sjj_nav ul li ul li a{padding: 0 30px;}




.header-cta {
	white-space: nowrap;
	padding: 10px 18px
}

.menu-toggle {
	display: none;
	background: none;
	color: var(--navy);
	padding: 12px
}

.inner-hero {
	background-image: linear-gradient(90deg, #031730 8%, #062346bc 45%, #08254522 100%), var(--hero);
	background-size: cover;
	background-position: center, right center;
	color: white;
	padding: 200px 0;
	min-height: 500px
}
.inner-hero .container{text-align: center;}

.inner-hero span {
	font-size: 14px;
	letter-spacing: .16em;
	color: #a7ceff
}

.inner-hero h1 {
	margin: 10px 0 6px
}

.inner-hero p {
	font-size: clamp(16px, 1.7vw, 24px);
	color: white
}

.breadcrumb {
	display: flex;
	gap: 12px;
	padding-block: 18px;
	font-size: 13px;
	color: #8795a8;
	border-bottom: 1px solid #f0f3f8
}

.breadcrumb a:hover {
	color: var(--blue)
}

.hero-slider {
	position: relative;
	background: #03162f;
	color: white
}

.slides {
	position: relative;
	height: clamp(440px, 38vw, 600px);
	overflow: hidden
}

.slide {
	position: absolute;
	inset: 0;
	background-image: linear-gradient(90deg, #02152ee8 0%, #052447b0 42%, #07294d22), var(--hero);
	background-size: cover;
	background-position: center, right center;
	opacity: 0;
	visibility: hidden;
	transition: opacity .8s, visibility .8s
}

.slide.active {
	opacity: 1;
	visibility: visible
}

.slide-copy {
	height: 100%;
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding-bottom: 25px;
	text-align: center;
	/* align-items: flex-start */
}

/* .slide h1 {
	max-width: 730px
} */

.slide p {
	font-size: 22px;
	color: white;
	margin: 18px 0 28px
}

.hero-actions {
	display: flex;
	gap: 18px;
	justify-content: center;
}

.slider-controls {
	position: absolute;
	bottom: 25px;
	left: 50%;
	transform: translateX(-50%);
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 14px
}

.slider-controls button {
	color: #fff;
	background: #ffffff16;
	border: 1px solid #ffffff55;
	min-height: 32px;
	min-width: 32px;
	border-radius: 4px
}

.slider-controls .dots {
	display: flex;
	gap: 10px
}

.dots button {
	min-height: 28px;
	min-width: 34px;
	border: 0;
	background: transparent;
	position: relative
}

.dots button:after {
	content: '';
	height: 3px;
	left: 0;
	right: 0;
	top: 13px;
	background: #ffffff66;
	position: absolute;
	transition: background .3s
}

.dots button[aria-pressed=true]:after {
	background: #ff1616
}

/* 播放 / 暂停图形由 aria-pressed 决定显隐，文案与图形都写在 HTML 里 */
.slide-pause .i-play {
	display: none
}

.slide-pause[aria-pressed=true] .i-play {
	display: inline
}

.slide-pause[aria-pressed=true] .i-pause {
	display: none
}

.year {
	display: flex;
	gap: 28px;
	align-items: center;
	margin-top: 30px
}

.year strong {
	font-size: 28px
}

.year span {
	border-left: 1px solid #a5b8ce;
	padding-left: 25px;
	font-size: 13px;
	color: #7d8ba3
}

.brand-grid {
	display: grid;
	grid-template-columns: repeat(6, 1fr);
	gap: 40px
}

.brand-card {
	display: flex;
	min-height: 120px;
	background: #fff;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	gap: 8px;
	border: 1px solid #fff;
	border-radius: 15px;
	transition: box-shadow .3s, transform .3s;
	font-size: 0;
}

.brand-card img{max-width: 100%;width: auto;}
.brand-card:hover {
	box-shadow: var(--shadow);
	transform: translateY(-5px)
}

.brand-card svg {
	width: 30px;
	height: 30px;
	color: #8593a3
}

.brand-card span {
	font-size: 12px;
	color: #78859c
}

.brand-word {
	font-size: 28px;
	font-style: italic
}

.home-app-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px
}

.home-app-card {
	border: 1px solid var(--line);
	border-radius: 4px;
	overflow: hidden;
	transition: box-shadow .3s
}

.home-app-card:hover {
	box-shadow: var(--shadow)
}

.home-app-card .picture {
	aspect-ratio: 1.94
}

.home-app-card>div:last-child {
	padding: 16px 20px 20px;
	position: relative
}

.home-app-card h3 {
	font-size: 19px
}

.home-app-card p {
	font-size: 13px;
	margin-top: 8px;
	padding-right: 22px
}

.home-app-card svg {
	position: absolute;
	right: 16px;
	bottom: 21px;
	color: var(--blue);
	width: 20px
}

.why {
	/*background: #041a38;*/
	color: white;
	padding: 50px 0;text-align: center;
}

.why .eyebrow {
	color: #b6d3f6
}

.why .picture {
	min-height: 290px
}

.why h2 {
	margin: 7px 0 26px
}

.reasons {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 28px;
	max-width: 500px;
	margin: 0 auto;
}

.reasons>div {
	position: relative;
	padding-left: 46px
}

.reasons svg {
	position: absolute;
	left: 0;
	top: 4px;
	color: #19c7ff;
	width: 32px;
	height: 32px
}

.reasons h3 {
	margin: 0;
	font-size: 17px
}

.reasons p {
	font-size: 13px;
	color: #b7c8de;
	margin-top: 5px
}

.strength-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 20px
}

.strength {
	border: 1px solid var(--line);
	border-top: 3px solid var(--blue);
	padding: 25px 20px;
	text-align: center;
	position: relative;
	transition: box-shadow .3s;
	border-radius: 20px;
}

.strength:hover {
	box-shadow: var(--shadow)
}

.strength>span {
	position: absolute;
	left: 14px;
	top: 4px;
	font-size: 60px;
	font-weight: bold;
	color: #eaf1fc
}

.strength svg {
	width: 40px;
	height: 40px;
	color: var(--blue);
	position: relative;
	margin: 8px 0 16px
}

.strength p {
	font-size: 13px;
	margin-top: 10px
}

.company-title {
	font-size: 28px
}

.profile-stats {
	background: #eff6ff;
	display: grid;
	grid-template-columns: 1fr 1.5fr;
	margin-top: 28px;
	padding: 22px;
	gap: 20px
}

.profile-stats strong {
	display: block;
	font-size: 22px
}

.profile-stats span {
	display: block;
	font-size: 13px;
	color: #7d8ba1
}

.culture-row,
.application-row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	align-items: stretch;
	background: white
}

.culture-row+.culture-row {
	margin-top: 18px
}

.reverse .picture {
	order: 2
}

.culture-copy {
	padding: 40px;
	position: relative
}

.culture-copy h3 {
	font-size: 25px;
	padding-top: 8px;
	position: relative
}

.culture-copy p {
	position: relative
}

.big-number {
	font-size: 66px;
	font-weight: bold;
	color: #e2edff;
	line-height: 1
}

.culture-tags {
	display: flex;
	align-items: center;
	gap: 18px;
	margin-top: 26px;
	color: var(--blue)
}

.culture-tags svg {
	width: 30px;
	height: 30px
}

.quote {
	padding: 22px;
	background: #e0f0ff;
	text-align: center;
	font-size: 23px;
	color: var(--blue);
	margin-top: 18px
}

.quote small {
	display: block;
	font-size: 12px;
	color: #8a9aae;
	margin-top: 6px
}

.application-row {
	background: #eff7ff
}

.application-row .picture {
	min-height: 310px
}

.application-copy {
	padding: 45px clamp(25px, 4vw, 65px);
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: flex-start
}

.application-copy h2 {
	font-size: 28px;
	color: var(--blue);
	display: flex;
	align-items: center;
	gap: 16px
}

.application-copy h2 svg {
	width: 38px;
	height: 38px;
	padding: 8px;
	box-sizing: content-box;
	background: var(--blue);
	color: white;
	border-radius: 50%
}

.application-copy h3 {
	font-size: 17px;
	margin-top: 20px
}

.application-copy p {
	margin: 18px 0 22px;
	font-size: 15px
}

.application-copy .btn {
	border-radius: 30px
}

.transport-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 24px
}

.transport-card {
	border: 1px solid #d3e3f4;
	border-radius: 4px;
	padding: 15px;
	transition: box-shadow .3s
}

.transport-card:hover {
	box-shadow: var(--shadow)
}

.transport-card .picture {
	aspect-ratio: 2.3
}

.transport-copy {
	padding: 18px 10px 10px
}

.transport-copy h2 {
	font-size: 30px
}

.transport-copy p {
	font-size: 15px
}

.transport-tags {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	border-top: 1px solid var(--line);
	margin-top: 22px;
	padding-top: 24px
}

.transport-tags span {
	display: flex;
	align-items: center;
	flex-direction: column;
	gap: 10px;
	text-align: center;
	font-size: 14px
}

.transport-tags span+span {
	border-left: 1px solid var(--line)
}

.transport-tags svg {
	color: var(--blue);
	width: 32px;
	height: 32px
}

.goal {
	padding-bottom: 0
}

.goal .picture {
	min-height: 0
}

.map {
	margin: 0
}

.map img {
	width: 100%;
	border: 1px solid #c4d6e6
}

.map figcaption {
	font-size: 12px;
	color: #8191a6;
	text-align: center;
	margin-top: 10px
}

.map-end {
	font-size: 23px;
	text-align: center;
	color: var(--navy);
	margin-top: 25px
}

.catalog {
	display: grid;
	grid-template-columns: 220px minmax(0, 1fr);
	gap: 34px;
	align-items: start
}

.catalog-sidebar {
	position: sticky;
	top: 110px
}

.catalog-sidebar h2 {
	background: #ff1616;
	color: #fff;
	font-size: 23px;
	text-align: center;
	padding: 18px 8px
}

.category-list {
	margin-top: 10px;
	border: 1px solid #edf1f6
}

.cat {
	display: block;
	width: 100%;
	padding: 15px 20px;
	text-align: left;
	background: #fff;
	color: var(--navy);
	border-bottom: 1px solid #edf1f6;
	line-height: 1.5;
	transition: background .2s
}

.cat.selected,
.cat:hover {
	color: var(--blue);
	background: #edf4ff
}

.cat.selected {
	box-shadow: inset 3px 0 var(--blue)
}

.catalog-toolbar {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 20px
}

.catalog-toolbar form {
	display: flex;
	max-width: 350px;
	min-width: 0
}

.catalog-toolbar input {
	width: 100%;
	min-width: 0;
	border: 1px solid var(--line);
	padding: 10px 14px;
	border-radius: 4px 0 0 4px;
	font-size: 13px
}

.catalog-toolbar .btn {
	border-radius: 0 4px 4px 0;
	padding: 10px 14px
}

.product-grid {
	display: grid;
	grid-template-columns: repeat(6, minmax(0, 1fr));
	gap: 30px 15px;
	margin: 22px 0 40px
}

.product-card {
	min-width: 0;
	text-align: center
}

.product-card button {
	background: none;
	padding: 0;
	color: var(--navy);
	width: 100%;
	text-align: center
}

.product-card .product-image {
	display: block;
	overflow: hidden;
	border: 1px solid #e2e7ef;
	aspect-ratio: 180/198;
	background: #fff;
	transition: box-shadow .3s
}

.product-card img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	transition: transform .4s
}

.product-card button:hover img {
	transform: scale(1.045)
}

.product-card button:hover .product-image {
	box-shadow: var(--shadow)
}

.product-card strong {
	display: block;
	margin: 12px 0 4px;
	font-size: 15px
}

.product-card span {
	font-size: 13px;
	color: #7d8ba1
}

.empty {
	grid-column: 1/-1;
	text-align: center;
	padding: 60px 15px
}

.email-list {
	display: grid;
	gap: 18px
}

.email-row {
	background: linear-gradient(125deg, #eff8ff 10%, #e0edff);
	border-left: 5px solid var(--blue);
	padding: 35px 40px;
	display: grid;
	grid-template-columns: 150px minmax(0, 1fr) auto;
	gap: 30px;
	align-items: center;
	border-radius: 5px
}

.mail-icon {
	width: 110px;
	height: 110px;
	border: 14px solid #dbeaff;
	border-radius: 50%;
	background: #f1f9ff;
	color: var(--blue);
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 5px 12px #ff16160d
}

.mail-icon svg {
	width: 46px;
	height: 46px
}

.email-row>div {
	border-left: 1px solid #c4d7ef;
	padding-left: 30px;
	min-width: 0
}

.email-row h2 {
	color: var(--blue);
	font-size: clamp(22px, 2.6vw, 40px);
	overflow-wrap: anywhere
}

.email-row p {
	margin-top: 7px
}

.message-form {
	padding: 32px;
	background: white;
	border: 1px solid #cde0f6;
	border-radius: 5px
}

.form-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 22px 35px
}

.form-grid label {
	display: block;
	font-size: 14px;
	font-weight: 600;
	min-width: 0
}

.form-grid input,
.form-grid textarea {
	display: block;
	width: 100%;
	border: 1px solid #cad5e5;
	border-radius: 4px;
	padding: 12px 15px;
	margin-top: 8px;
	font-size: 14px;
	color: var(--navy);
	font-weight: 400;
	transition: border-color .2s, box-shadow .2s
}

.form-grid input:focus,
.form-grid textarea:focus {
	border-color: var(--blue);
	box-shadow: 0 0 0 3px #ff161610
}

.form-grid input::placeholder,
.form-grid textarea::placeholder {
	color: #9ca8b9
}

.form-grid .wide {
	grid-column: 1/-1
}

.form-grid textarea {
	resize: vertical;
	min-height: 130px
}

.consent {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	font-size: 13px;
	color: #7f8ba0;
	margin-top: 20px
}

.consent input {
	width: 17px;
	height: 17px;
	margin-top: 3px;
	flex-shrink: 0
}

.message-form em {
	font-style: normal;
	color: #dc3434
}

.message-form .btn {
	margin-top: 16px
}

.cta {
	padding: 10px 0;
	/*background: linear-gradient(115deg, #f17777, #ff1616);*/
	color: white;
	background: #ff1616;
}

.cta>.container {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 45px
}

.cta h2 {
	font-size: 22px
}

.site-footer {
	background: #03172e;
	color: white;
	padding: 18px 0
}

.footer-grid {
	display: grid;
	grid-template-columns: 1.2fr 1fr 1fr;
	gap: 45px
}
.f_left{display: flex;align-items: center;}
.site-footer .f_left p{font-size: 18px;color: #fff;font-weight: bold;padding-left: 20px;}
.site-footer p {
	font-size: 13px;
	color: #b4c4d9
}

.site-footer nav {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 9px 20px;
	border-left: 1px solid #43617a;
	padding-left: 45px;
	font-size: 14px
}

.site-footer a:hover {
	color: #85b7ff
}

.back-top {
	position: fixed;
	bottom: 24px;
	right: 24px;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: var(--blue);
	color: #fff;
	font-size: 22px;
	z-index: 80;
	box-shadow: 0 4px 16px #00134430;
	opacity: 0;
	visibility: hidden;
	transition: opacity .25s, transform .25s
}

.back-top.visible {
	opacity: 1;
	visibility: visible
}

.back-top:hover {
	transform: translateY(-4px)
}

dialog {
	max-width: min(500px, 90vw);
	padding: 32px;
	border: 1px solid #d2e2f4;
	border-radius: 10px;
	color: var(--navy)
}

dialog::backdrop {
	background: #001b4688
}

dialog h2 {
	font-size: 24px
}

dialog .btn {
	margin-top: 24px
}

.dialog-close {
	position: absolute;
	right: 9px;
	top: 7px;
	background: none;
	font-size: 28px;
	color: #65728a
}

.reveal-ready .reveal {
	opacity: 0;
	transform: translateY(22px);
	transition: opacity .65s ease, transform .65s ease
}

.reveal-ready .reveal.visible {
	opacity: 1;
	transform: none
}

@media(min-width:1600px) {
	.container {
		width: min(1440px, 88%)
	}

	.section {
		padding-block: 85px
	}
}

@media(max-width:1150px) {
	.header-inner {
		gap: 16px
	}
	.site-header {
		display: none;
	}
	.sp_header{ display:flex;}
	.height{height:70px}
	.site-header nav {
		gap: 15px
	}

	.site-header nav a {
		font-size: 13px
	}

	.header-cta {
		display: none
	}

	.product-grid {
		grid-template-columns: repeat(3, minmax(0, 1fr))
	}

	.catalog {
		grid-template-columns: 190px minmax(0, 1fr);
		gap: 26px
	}

	.email-row {
		grid-template-columns: 105px minmax(0, 1fr) auto;
		padding: 25px;
		gap: 20px
	}

	.mail-icon {
		width: 90px;
		height: 90px
	}

	.email-row>div {
		padding-left: 20px
	}

	.email-row .btn {
		padding: 12px 18px
	}

	.application-copy {
		padding: 30px
	}

	.split {
		gap: 30px
	}
}

@media(max-width:900px) {
	.header-inner {
		min-height: 72px
	}

	.menu-toggle {
		display: flex
	}

	.site-header nav {
		position: absolute;
		left: 0;
		right: 0;
		top: 100%;
		background: #fff;
		display: none;
		flex-direction: column;
		align-items: stretch;
		padding: 15px 5% 24px;
		gap: 0;
		box-shadow: 0 15px 24px #03162f15;
		max-height: calc(100dvh - 72px);
		overflow-y: auto
	}

	.site-header.nav-open nav {
		display: flex
	}

	.site-header nav a {
		padding: 13px;
		font-size: 16px
	}

	.site-header nav a:after {
		display: none
	}

	.site-header nav a[aria-current] {
		background: #f0f6ff
	}

	.section {
		padding-block: 48px
	}

	.strength-grid {
		grid-template-columns: repeat(2, 1fr)
	}

	.home-app-grid {
		grid-template-columns: repeat(2, 1fr)
	}

	.brand-grid {
		gap: 14px
	}

	.split {
		gap: 26px
	}

	.culture-copy {
		padding: 26px
	}

	.culture-copy h3 {
		font-size: 22px
	}

	.big-number {
		font-size: 44px
	}

	.culture-row .picture img {
		height: 100%
	}

	.application-copy h2 {
		font-size: 23px;
		gap: 10px
	}

	.application-copy h2 svg {
		width: 25px;
		height: 25px
	}

	.application-copy h3 {
		font-size: 15px
	}

	.application-copy p {
		font-size: 14px
	}

	.application-row .picture {
		min-height: 280px
	}

	.catalog-toolbar {
		flex-wrap: wrap
	}

	.catalog-toolbar form {
		max-width: none;
		width: 100%
	}

	.catalog {
		grid-template-columns: 165px minmax(0, 1fr);
		gap: 22px
	}

	.cat {
		font-size: 14px;
		padding: 12px
	}

	.product-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr))
	}

	.email-row {
		grid-template-columns: 75px minmax(0, 1fr);
		gap: 20px
	}

	.mail-icon {
		width: 74px;
		height: 74px;
		border-width: 9px
	}

	.mail-icon svg {
		width: 34px
	}

	.email-row .btn {
		grid-column: 2;
		justify-self: start
	}

	.email-row>div {
		padding-left: 0;
		border: 0
	}

	.footer-grid {
		grid-template-columns: 1fr 1fr
	}

	.footer-grid>div:last-child {
		grid-column: 1/-1
	}

	.transport-copy {
		padding: 16px 3px
	}

	.transport-copy p {
		font-size: 14px
	}
}

@media(max-width:600px) {
	html {
		scroll-padding-top: 85px
	}

	.container {
		width: 90%
	}

	h1 {
		font-size: 36px
	}

	h2 {
		font-size: 26px
	}

	.logo b {
		font-size: 25px
	}

	.logo small {
		font-size: 11px
	}

	.header-inner {
		min-height: 68px
	}

	.inner-hero {
		padding: 55px 0;
		min-height: 250px;
		background-position: center, 65% center
	}

	.inner-hero p {
		max-width: 90%;
		font-size: 16px
	}

	.inner-hero span {
		font-size: 11px
	}

	.slides {
		height: 460px
	}

	.slide {
		background-position: center, 65% center
	}

	.slide h1 {
		font-size: 35px;
		line-height: 1.4
	}

	.slide p {
		font-size: 16px;
		max-width: 95%
	}

	.hero-actions {
		gap: 10px;
		flex-wrap: wrap
	}

	.hero-actions .btn {
		padding: 11px 20px
	}

	.section {
		padding-block: 38px
	}

	.section-heading {
		margin-bottom: 24px
	}

	.section-heading p {
		font-size: 14px
	}

	.split {
		grid-template-columns: 1fr;
		gap: 26px
	}

	.split .picture {
		min-height: 0;
		aspect-ratio: 1.6
	}

	.split h3 {
		font-size: 17px
	}

	.split p {
		font-size: 14px
	}

	.brand-grid {
		grid-template-columns: repeat(2, 1fr);
		gap: 12px
	}

	.brand-card {
		min-height: 100px
	}

	.brand-word {
		font-size: 25px
	}

	.home-app-grid {
		gap: 15px
	}

	.home-app-card>div:last-child {
		padding: 12px
	}

	.home-app-card h3 {
		font-size: 16px
	}

	.home-app-card p {
		font-size: 12px;
		padding-right: 0
	}

	.home-app-card svg {
		display: none
	}

	.why {
		padding: 35px 0
	}

	.reasons {
		gap: 25px 16px
	}

	.reasons>div {
		padding-left: 35px
	}

	.reasons h3 {
		font-size: 16px
	}

	.reasons svg {
		width: 26px;
		height: 26px
	}

	.reasons p {
		font-size: 12px
	}

	.strength-grid {
		gap: 12px
	}

	.strength {
		padding: 20px 10px
	}

	.strength h3 {
		font-size: 16px
	}

	.strength>span {
		font-size: 44px
	}

	.strength p {
		font-size: 12px
	}

	.company-title {
		font-size: 24px
	}

	.profile-stats {
		padding: 18px;
		gap: 14px
	}

	.profile-stats strong {
		font-size: 18px
	}

	.culture-row,
	.application-row {
		grid-template-columns: 1fr
	}

	.reverse .picture {
		order: 0
	}

	.culture-copy {
		padding: 25px
	}

	.culture-row .picture {
		aspect-ratio: 2
	}

	.culture-row .picture img {
		height: 100%
	}

	.quote {
		font-size: 18px;
		padding: 18px
	}

	.application-row+.application-row {
		margin-top: 22px
	}

	.application-row .picture {
		min-height: 0;
		aspect-ratio: 1.8
	}

	.application-copy {
		padding: 25px
	}

	.application-copy h2 {
		font-size: 23px
	}

	.application-copy h3 {
		margin-top: 16px
	}

	.application-copy p {
		margin-top: 12px
	}

	.application-copy .btn {
		padding: 10px 24px
	}

	.transport-grid {
		grid-template-columns: 1fr;
		gap: 24px
	}

	.transport-copy h2 {
		font-size: 26px
	}

	.transport-tags span {
		font-size: 13px
	}

	.goal {
		padding-bottom: 0
	}

	.goal .picture {
		aspect-ratio: 2.2
	}

	.map-end {
		font-size: 18px
	}

	.map figcaption {
		font-size: 11px
	}

	.catalog {
		display: block
	}

	.catalog-sidebar {
		position: static;
		margin-bottom: 28px
	}

	.catalog-sidebar h2 {
		font-size: 20px;
		text-align: left;
		padding: 13px 18px
	}

	.category-list {
		display: flex;
		flex-wrap: wrap;
		gap: 8px;
		border: 0;
		margin-top: 13px
	}

	.cat {
		width: auto;
		border: 1px solid var(--line);
		border-radius: 4px;
		padding: 8px 11px;
		font-size: 12px;
		max-width: 100%
	}

	.cat.selected {
		box-shadow: none;
		border-color: var(--blue)
	}

	.catalog-toolbar h2 {
		font-size: 25px
	}

	.product-grid {
		gap: 24px 12px;
		margin-top: 20px
	}

	.product-card strong {
		font-size: 14px
	}

	.product-card span {
		font-size: 12px
	}

	.email-row {
		grid-template-columns: 55px minmax(0, 1fr);
		padding: 22px 16px;
		gap: 14px
	}

	.mail-icon {
		width: 54px;
		height: 54px;
		border-width: 6px
	}

	.mail-icon svg {
		width: 28px;
		height: 28px
	}

	.email-row h2 {
		font-size: 22px
	}

	.email-row p {
		font-size: 12px
	}

	.email-row .btn {
		font-size: 13px;
		padding: 9px 19px
	}

	.message-form {
		padding: 22px 18px
	}

	.form-grid {
		grid-template-columns: 1fr;
		gap: 17px
	}

	.form-grid input,
	.form-grid textarea {
		font-size: 16px;
		padding: 11px
	}

	.form-grid label {
		font-size: 14px
	}

	.message-form .btn {
		width: 100%
	}

	.cta>.container {
		flex-direction: column;
		gap: 18px;
		text-align: center
	}

	.cta h2 {
		font-size: 24px
	}

	.cta {
		padding: 30px 0
	}

	.footer-grid {
		grid-template-columns: 1fr;
		gap: 28px
	}

	.site-footer {
		padding: 35px 0
	}

	.site-footer nav {
		border-left: 0;
		padding-left: 0
	}

	.footer-grid>div:last-child {
		grid-column: auto
	}

	.back-top {
		bottom: 16px;
		right: 16px;
		width: 40px;
		height: 40px
	}

	.breadcrumb {
		font-size: 12px
	}
}

@media(prefers-reduced-motion:reduce) {
	html {
		scroll-behavior: auto
	}

	*,
	*:before,
	*:after {
		animation: none !important;
		transition: none !important
	}

	.reveal-ready .reveal {
		opacity: 1;
		transform: none
	}
}







/* prolinebox */
.prolinebox{width: 100%;margin: 0 auto;padding: 50px 0;}
.proline{width: 100%;margin: 0 auto;}
.pl_tit{width: 100%;margin-bottom: 30px;text-align: center;}
.pl_tit h1{font-size: 30px;color: #333;}
.pl_content{width: 100%;margin: 0 auto;}
.pl_content ul{display: grid;grid-template-columns: repeat(6, minmax(0, 1fr));gap:40px;}
.pl_content ul li{}
.pl_content ul li a{display: flex;font-size: 0;align-items: center;justify-content: center;background: #fff;border-radius: 10px;overflow: hidden;    min-height: 100px;}
.pl_content ul li a img{max-width: 100%;width: auto; height: 100px;}



.i1_swiper{overflow: hidden;position: relative;}
.i1_swiper .swiper-slide{font-size: 0;overflow: hidden;}
.i1_swiper .swiper-slide img{width: 100%;transition: all 0.5s;}
.i1_swiper .swiper-slide:hover img{transform: scale(1.1);}




@media(max-width:600px) {
	.pl_tit h1{font-size: 25px;}
	.pl_content ul{display: grid;grid-template-columns: repeat(3, minmax(0, 1fr));gap:20px 20px;}

}