body::-webkit-scrollbar {
	display: none;
}

:root {
	--normal: rgb(0, 0, 0);
	--primary: #0052d9;
	--light: rgba(80, 204, 255, 1);
	--gold: rgb(175, 150, 128);
	--gray: rgb(121, 121, 121);
	--gray-light: rgb(210, 210, 210);
	--silver: rgb(210, 210, 210);
	--link: rgb(221, 221, 221);
	--secondary: rgb(75, 75, 75);
	--muted: rgb(153, 153, 153);
	--muted-light: rgb(193, 193, 193);
	--white: white;
	--black: black;
	--dark: rgb(22, 22, 22);
	--top-nav: 3.75rem;
	--top-nav-sm: 3rem;
	--logo-size: 2.25rem;
	--left-pad: 6.75rem;
	--left-wide: 7rem;
	--left-sm: 20px;
	--fw-bold: 600;
	--fw-normal: normal;
	--fw-light: 200;
	--font-system: "MONO", "-apple-system", "Noto Sans", "Helvetica Neue", "Helvetica", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "微软雅黑", "Noto Sans CJK SC", "Segoe UI", "SegoeUI";
	--font-family: "MONO", "-apple-system", "Noto Sans", "Helvetica Neue", "Helvetica", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "微软雅黑", "Noto Sans CJK SC", "Segoe UI", "SegoeUI";
}

html {
	font-size: 100%;
	min-height: 100%
}

body,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
dl,
dt,
dd,
ol,
ul,
li,
form,
figure,
table,
th,
td,
caption,
hr,
input,
button,
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
main,
menu,
nav,
section,
summary {
	position: relative;
	margin: 0;
	padding: 0;
}

body {
	font-family: var(--font-family);
	color: var(--normal);
	font-size: .7rem;
	line-height: 1.8;
}

@media screen and (min-width:1200px) {
	html {
		font-size: 110%
	}
}

@media screen and (min-width:1400px) {
	html {
		font-size: 115%
	}
}

@media screen and (min-width:1600px) {
	html {
		font-size: 120%
	}
}

@media screen and (min-width:1900px) {
	html {
		font-size: 125%
	}
}

@media screen and (min-width:2500px) {
	html {
		font-size: 127.5%
	}
}

@media screen and (min-width:3000px) {
	html {
		font-size: 130%
	}
}

h1,
h2,
h3,
h4,
h5,
h6 {
	display: block;
	line-height: inherit;
	font-weight: inherit;
}

audio,
canvas,
progress,
video {
	display: inline-block;
	vertical-align: baseline;
}

audio:not([controls]) {
	display: none;
	height: 0;
}

video {
	width: 100%;
	vertical-align: top;
}

[hidden],
template {
	display: none;
}

a,
button {
	transition: all .5s cubic-bezier(.4, 0, .2, 1);
}

a {
	color: var(--link);
	text-decoration: none;
	display: inline-block;
	position: relative;
}

a:hover {
	text-decoration: none;
	color: var(--primary);
	outline: none;
}

a:focus,
a:active,
button:hover,
button:focus,
button:active,
input:focus,
textarea:focus,
li:focus,
video:active,
video:focus {
	text-decoration: none;
	color: inherit;
	outline: none;
}

button,
a {
	-webkit-transform: translateZ(0);
	transform: translateZ(0);
	border: 0;
	background: transparent;
	-webkit-transform-style: preserve-3d;
	-webkit-backface-visibility: hidden;
}

button {
	border-radius: 0;
}

button:hover {
	color: var(--primary);
}

a,
span,
div,
section,
dl,
dt,
dd,
i,
em,
label {
	font-style: normal;
	position: relative;
}

li {
	list-style: none;
}

input,
textarea,
button {
	font-family: var(--font-family)
}

input,
textarea {
	font-size: .7rem;
	width: 100%;
	resize: none;
	transition: border .5s cubic-bezier(.4, 0, .2, 1), background-color .5s cubic-bezier(.4, 0, .2, 1);
	border: 0;
	border-radius: 0;
	background: transparent;
	-webkit-appearance: none;
}

a:hover .no-hover {
	color: inherit;
	background: initial;
}

strong,
.strong {
	font-weight: bold;
	-webkit-font-smoothing: antialiased;
}

img {
	max-width: 100%;
	max-height: 100%;
	height: auto;
	vertical-align: top;
}

hr {
	margin-top: 1rem;
	margin-bottom: 1rem;
	border: 0;
	border-top: 1px solid var(--muted-light);
}

hr.min {
	margin-top: .25rem;
	margin-bottom: .25rem;
}

hr.primary {
	border-color: var(--primary);
}

dl,
dt,
dd {
	line-height: inherit;
}

small,
.small {
	font-size: 85%
}

a.block span:not([class*="flex"]) {
	position: relative;
	display: block;
}

.bold {
	font-weight: 700;
}

.ff-mono {
	font-family: "MONO";
}

.ff-normal {
	font-weight: normal;
	font-style: normal;
	font-size: initial;
}

.mobile-break {
	display: none;
}

.inline {
	position: relative;
	display: inline;
	vertical-align: top;
	letter-spacing: normal;
}

.block {
	position: relative;
	display: block;
}

.nowrap {
	white-space: nowrap;
}

.ellipsis {
	display: block;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}

.multi-ellipsis {
	display: -webkit-box !important;
	overflow: hidden;
	word-break: break-word;
	-webkit-box-orient: vertical;
}

.gray {
	color: var(--gray);
}

.gray-light {
	color: var(--gray-light);
}

.white,
.white a {
	color: white;
}

.normal {
	color: var(--normal);
}

.black {
	color: var(--black);
}

.primary {
	color: var(--primary);
}

.light {
	color: var(--light);
}

.muted {
	color: var(--muted);
}

.muted-light {
	color: var(--muted-light);
}

.dark {
	color: var(--dark);
}

.link {
	color: var(--link);
}

.secondary {
	color: var(--secondary);
}

.gold {
	color: var(--gold);
}

.bg-primary {
	background-color: var(--primary);
}

.bg-black {
	background-color: var(--black);
}

.bg-dark {
	background-color: var(--dark);
}

.bg-gray {
	background-color: var(--gray);
}

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

.none {
	display: none;
}

.empty {
	z-index: -9;
	width: 0;
	height: 0;
}

.noevent {
	pointer-events: none;
}

.full-size {
	position: relative;
	overflow: hidden;
	width: 100%;
	height: 100%;
}

.abs {
	position: absolute !important;
	top: 0;
	left: 0;
}

.bgs-cover,
.bgs-contain {
	background-repeat: no-repeat;
	background-position: center center;
}

.bgs-cover {
	background-size: cover;
}

.bgs-contain {
	background-size: contain;
}

.at-middle {
	display: flex !important;
	align-items: center;
	flex-wrap: wrap;
}

.rounded {
	border-radius: 1rem;
	overflow: hidden;
}

.shadow {
	box-shadow: 6px 6px 12px rgba(0, 0, 0, .08);
}

.fs-light,
.fs-light p {
	font-weight: 300;
}

.ff-system {
	font-family: var(--font-system)
}

.lsp-05 {
	letter-spacing: 0.05rem;
}

.lsp-15 {
	letter-spacing: 0.15rem;
}

.lh-1 {
	line-height: 1
}

.lh-11 {
	line-height: 1.1
}

.lh-12 {
	line-height: 1.2
}

.lh-13 {
	line-height: 1.3
}

.lh-14 {
	line-height: 1.4
}

.lh-15 {
	line-height: 1.5
}

.lh-16 {
	line-height: 1.6
}

.lh-17 {
	line-height: 1.7
}

.lh-18 {
	line-height: 1.8
}

.lh-19 {
	line-height: 1.9
}

.lh-2 {
	line-height: 2
}

.lh-21 {
	line-height: 2.1
}

.lh-22 {
	line-height: 2.2
}

.lh-23 {
	line-height: 2.3
}

.lh-24 {
	line-height: 2.4
}

.lh-25 {
	line-height: 2.5
}

.lh-3 {
	line-height: 3
}

.fs-9 {
	font-size: .45rem
}

.fs-10 {
	font-size: .5rem
}

.fs-11 {
	font-size: .55rem
}

.fs-12 {
	font-size: .6rem
}

.fs-13 {
	font-size: .65rem
}

.fs-14 {
	font-size: .7rem
}

.fs-15 {
	font-size: .75rem
}

.fs-16 {
	font-size: .8rem
}

.fs-17 {
	font-size: .85rem
}

.fs-18 {
	font-size: .9rem
}

.fs-19 {
	font-size: .95rem
}

.fs-20 {
	font-size: 1rem
}

.fs-21 {
	font-size: 1.05rem
}

.fs-22 {
	font-size: 1.1rem
}

.fs-23 {
	font-size: 1.15rem
}

.fs-24 {
	font-size: 1.2rem
}

.fs-25 {
	font-size: 1.25rem
}

.fs-26 {
	font-size: 1.3rem
}

.fs-27 {
	font-size: 1.35rem
}

.fs-28 {
	font-size: 1.4rem
}

.fs-29 {
	font-size: 1.45rem
}

.fs-30 {
	font-size: 1.5rem
}

.fs-31 {
	font-size: 1.55rem
}

.fs-32 {
	font-size: 1.6rem
}

.fs-33 {
	font-size: 1.65rem
}

.fs-34 {
	font-size: 1.7rem
}

.fs-35 {
	font-size: 1.75rem
}

.fs-36 {
	font-size: 1.8rem
}

.fs-37 {
	font-size: 1.85rem
}

.fs-38 {
	font-size: 1.9rem
}

.fs-39 {
	font-size: 1.95rem
}

.fs-40 {
	font-size: 2rem
}

.fs-42 {
	font-size: 2.1rem
}

.fs-44 {
	font-size: 2.2rem
}

.fs-46 {
	font-size: 2.3rem
}

.fs-48 {
	font-size: 2.4rem
}

.fs-50 {
	font-size: 2.5rem
}

.fs-52 {
	font-size: 2.6rem
}

.fs-54 {
	font-size: 2.7rem
}

.fs-56 {
	font-size: 2.8rem
}

.fs-58 {
	font-size: 2.9rem
}

.fs-60 {
	font-size: 3rem
}

.fs-62 {
	font-size: 3.1rem
}

.fs-64 {
	font-size: 3.2rem
}

.fs-66 {
	font-size: 3.3rem
}

.fs-68 {
	font-size: 3.4rem
}

.fs-70 {
	font-size: 3.5rem
}

.fs-72 {
	font-size: 3.6rem
}

.fs-74 {
	font-size: 3.7rem
}

.fs-76 {
	font-size: 3.8rem
}

.fs-78 {
	font-size: 3.9rem
}

.fs-80 {
	font-size: 4rem
}

.fs-82 {
	font-size: 4.1rem
}

.fs-84 {
	font-size: 4.2rem
}

.fs-86 {
	font-size: 4.3rem
}

.fs-88 {
	font-size: 4.4rem
}

.fs-90 {
	font-size: 4.5rem
}

.fs-92 {
	font-size: 4.6rem
}

.fs-94 {
	font-size: 4.7rem
}

.fs-96 {
	font-size: 4.8rem
}

.fs-98 {
	font-size: 4.9rem
}

.fs-100 {
	font-size: 5rem
}

[data-clamp="1"] {
	display: -webkit-box;
	/* 必须结合的属性 */
	-webkit-box-orient: vertical;
	/* 必须结合的属性，设置垂直排列 */
	-webkit-line-clamp: 1;
	/* 限制显示的行数 */
	overflow: hidden;
	/* 隐藏溢出内容 */
	text-overflow: ellipsis;
	/* 超出部分显示省略号 */
}

[data-clamp="2"] {
	-webkit-line-clamp: 2;
	display: -webkit-box;
	/* 必须结合的属性 */
	-webkit-box-orient: vertical;
	/* 限制显示的行数 */
	overflow: hidden;
	/* 隐藏溢出内容 */
	text-overflow: ellipsis;
	/* 超出部分显示省略号 */
}

[data-clamp="3"] {
	display: -webkit-box;
	/* 必须结合的属性 */
	-webkit-box-orient: vertical;
	/* 必须结合的属性，设置垂直排列 */
	-webkit-line-clamp: 3;
	/* 限制显示的行数 */
	overflow: hidden;
	/* 隐藏溢出内容 */
	text-overflow: ellipsis;
	/* 超出部分显示省略号 */
}

[data-clamp="4"] {
	-webkit-line-clamp: 4;
	display: -webkit-box;
	/* 必须结合的属性 */
	-webkit-box-orient: vertical;
	overflow: hidden;
	/* 隐藏溢出内容 */
	text-overflow: ellipsis;
	/* 超出部分显示省略号 */
}

[data-clamp="5"] {
	-webkit-line-clamp: 5;
	display: -webkit-box;
	/* 必须结合的属性 */
	-webkit-box-orient: vertical;
	overflow: hidden;
	/* 隐藏溢出内容 */
	text-overflow: ellipsis;
	/* 超出部分显示省略号 */
}

[class*="icon-"] {
	display: inline-block;
	vertical-align: top;
}

.row {
	margin-right: 0;
	margin-left: 0;
	position: relative;
}

.row [class^="col"] {
	padding-right: 0;
	padding-left: 0;
}

.spacing-5 {
	margin-right: -.25rem;
	margin-left: -.25rem;
}

.spacing-5 [class^="col"] {
	padding-right: .25rem;
	padding-left: .25rem;
}

.spacing-10 {
	margin-right: -.5rem;
	margin-left: -.5rem;
}

.spacing-10 [class^="col"] {
	padding-right: .5rem;
	padding-left: .5rem;
}

.spacing-15 {
	margin-right: -.75rem;
	margin-left: -.75rem;
}

.spacing-15 [class^="col"] {
	padding-right: .75rem;
	padding-left: .75rem;
}

.spacing-20 {
	margin-right: -1rem;
	margin-left: -1rem;
}

.spacing-20 [class^="col"] {
	padding-right: 1rem;
	padding-left: 1rem;
}

.spacing-30 {
	margin-right: -1.5rem;
	margin-left: -1.5rem;
}

.spacing-30 [class^="col"] {
	padding-right: 1.5rem;
	padding-left: 1.5rem;
}

.spacing-40 {
	margin-right: -2rem;
	margin-left: -2rem;
}

.spacing-40 [class^="col"] {
	padding-right: 2rem;
	padding-left: 2rem;
}

.spacing-50 {
	margin-right: -2.5rem;
	margin-left: -2.5rem;
}

.spacing-50 [class^="col"] {
	padding-right: 2.5rem;
	padding-left: 2.5rem;
}

.text-hover a:hover,
.text-hover button:hover {
	transition: opacity .5s cubic-bezier(.4, 0, .2, 1);
	opacity: .3;
}

a.block span.inline {
	display: inline-block;
}

.about-waitBox {
	background-color: #000;
	background: url('../image/about/4.jpg') 0 0 no-repeat;
}

.btn-inline {
	line-height: 40px;
	width: 100%;
	height: 40px;
	transition: background .5s cubic-bezier(.4, 0, .2, 1);
	color: white;
	background-color: rgb(214, 216, 221);
}

.btn-inline:hover {
	background-color: rgb(56, 101, 199);
}

.ratio,
[class*="ratio-"] {
	position: relative;
	display: block;
	overflow: hidden;
}

.ratio .inner,
[class*="ratio-"] .inner {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

.ratio-16-9 {
	padding-top: 56.25%;
}

.ratio-9-16 {
	padding-top: 177.7777%;
}

.ratio-1-1 {
	padding-top: 100%;
}

.ratio-2-1 {
	padding-top: 50%;
}

.ratio-3-1 {
	padding-top: 33.3333%;
}

.ratio-3-2 {
	padding-top: 66.6666%;
}

.ratio-2-3 {
	padding-top: 133.3333%;
}

.has-hover {
	overflow: hidden;
}

.hover-zoom {
	transition: all .5s cubic-bezier(.4, 0, .2, 1);
	-webkit-transform: translateZ(0);
	transform: translateZ(0);
	-webkit-transform-style: preserve-3d;
	-webkit-backface-visibility: hidden;
}

a:hover .hover-zoom,
.has-hover:hover .hover-zoom {
	-webkit-transform: scale(1.1);
	transform: scale(1.1);
}

.window-height {
	height: 100vh;
	transition: opacity .8s;
	opacity: 0;
}

.window-height.show-me {
	opacity: 1;
}

.wow {
	visibility: hidden;
	opacity: 0;
}

.wow-loaded .wow {
	opacity: 1;
}

.ani {
	transition: all .5s cubic-bezier(.4, 0, .2, 1) !important;
	-webkit-transform-style: preserve-3d;
	-webkit-backface-visibility: hidden;
}

.ani-slow {
	transition: all 0.65s cubic-bezier(0.05, 0.2, 0.1, 1);
}

.noani {
	transition: none !important;
}

.flex,
.flex-cc,
.flex-cs,
.flex-ce,
.flex-cb {
	display: flex;
}

.flex-cc {
	align-items: center;
	justify-content: center;
}

.flex-cs {
	align-items: center;
	justify-content: flex-start;
}

.flex-ce {
	align-items: center;
	justify-content: flex-end;
}

.flex-cb {
	align-items: center;
	justify-content: space-between;
}

.frame-full,
.frame-wide,
.frame-middle,
.frame-narrow,
.max-720,
.max-800,
.max-1000,
.max-1500 {
	position: relative;
	max-width: 100%;
	width: 100%;
	margin-right: auto;
	margin-left: auto;
}

.frame-full {
	padding-left: var(--left-pad);
	padding-right: var(--left-pad);
}

.frame-wide {
	padding-left: 3rem;
	padding-right: 3rem;
}

.frame-middle {
	padding-left: 3.5rem;
	padding-right: 3.5rem;
}

.frame-narrow {
	padding-left: 4rem;
	padding-right: 4rem;
}

.max-720 {
	max-width: 720px;
}

.max-800 {
	max-width: 800px;
}

.max-1000 {
	max-width: 1000px;
}

.max-1500 {
	max-width: 1500px;
}

@media screen and (min-width:1280px) {
	.frame-wide {
		padding-left: var(--left-pad);
		padding-right: var(--left-pad);
	}

	.frame-middle {
		padding-left: 0;
		padding-right: 0;
		max-width: 1100px;
	}

	.frame-narrow {
		padding-left: 0;
		padding-right: 0;
		max-width: 900px;
	}
}

@media screen and (min-width:1440px) {
	.frame-middle {
		max-width: 1050px;
	}

	.frame-narrow {
		max-width: 950px;
	}
}

@media screen and (min-width:1600px) {
	.frame-middle {
		max-width: 1200px;
	}

	.frame-narrow {
		max-width: 1100px;
	}
}

@media screen and (min-width:1900px) {
	.frame-middle {
		max-width: 1360px;
	}

	.frame-narrow {
		max-width: 1200px;
	}
}

@media screen and (min-width:2500px) {
	.frame-middle {
		max-width: 1520px;
	}
}

/* Main */
html:not(.transparent) body::before {
	content: "";
	width: 100%;
	height: var(--top-nav);
}

main {
	margin: 0;
}

main:after {
	display: table;
	clear: both;
	content: "";
}

.desktop body {
	overflow-y: scroll;
}

/* Heading Top Navigation */
.top-nav {
	position: sticky;
	z-index: 990;
	top: 0;
	left: 0;
	width: 100%;
	height: var(--top-nav);
	background-color: var(--black);
	transition: margin .15s ease, height .15s ease;
}

.main-nav-bar {
	margin-left: 2rem;
	transition: all .15s
}

.top-nav-menu {
	z-index: initial;
}

.tnm-con {
	width: 46vw;
	justify-content: space-between;
}

.top-nav-logo {
	display: flex;
	align-items: center;
	z-index: 9;
	height: 100%;
	width: auto;
	flex-grow: 1;
	padding: .25rem 0;
	transition: all .15s ease;
}

.top-nav-logo h1 {
	display: block;
	width: 100%;
	height: 100%;
	transition: all .15s
}

.top-nav-logo h1 a {
	display: inline-block;
	height: 100%;
}

.top-nav-logo h1 a span {
	position: absolute;
	left: 0;
	top: 0;
	display: block;
	width: 100%;
	height: 100%;
}

.top-nav-logo img {
	position: relative;
	left: 0;
	width: auto;
	height: 100%;
	transition: opacity .15s
}

.top-nav-logo img.logo-white {
	display: none;
	opacity: 0;
}

.top-nav-menu>.flex-ce,
.top-nav-menu dl,
.top-nav-menu dt {
	height: 100%;
}

.top-nav-menu dt {
	z-index: 11;
	padding-left: 1rem;
	padding-right: 1rem;
}

.top-nav-menu dt a {
	transition: none;
	position: relative;
	z-index: 3;
	color: var(--link);
	display: flex;
	align-items: center;
	justify-content: center;
	white-space: nowrap;
	height: 100%;
}

.top-nav-menu dt a>em {
	display: flex;
	align-items: center;
	height: 100%;
	transition: all .35s ease;
}

.top-nav-menu dl.active dt a em,
.top-nav-menu dt a:hover em {
	color: var(--white);
	font-weight: bold;
}

.top-nav-menu dl:hover .top-sub-menu,
.top-nav-menu dl:hover:after {
	pointer-events: initial;
	opacity: 1
}

.top-sub-menu {
	position: fixed;
	display: flex;
	justify-content: center;
	width: calc(35vw + var(--left-pad) - 0.5rem);
	height: calc(100vh - var(--top-nav));
	padding-top: 10vh;
	z-index: 3;
	top: var(--top-nav);
	right: 0;
	transition: all .25s linear;
	pointer-events: none;
	opacity: 0;
	/*transform: translateY(-100%); */
}

.top-sub-menu::-webkit-scrollbar {
	display: none;
}

.top-sub-menu a {
	font-size: 1.2rem;
	color: var(--black);
	padding-top: 1.5rem;
	margin-bottom: 1.5rem;
}

.top-sub-menu a:hover,
.top-sub-menu a.active {
	color: var(--primary);
}

.top-sub-nav {
	z-index: 4;
}

.top-sub-nav :not(.tsnc-footer) .btn-more {
	width: auto;
	padding-right: 1.8rem;
	margin-left: 1.8rem;
}

.top-sub-nav :not(.tsnc-footer) .btn-more>span>em {
	font-weight: normal;
}

.top-sub-nav :not(.tsnc-footer) .btn-more>span:before {
	content: "\e619";
	font-size: 1.2rem;
	width: 1rem;
}

.top-sub-nav :not(.tsnc-footer) .btn-more::before,
.top-sub-nav :not(.tsnc-footer) .btn-more>span:after {
	content: unset;
}

.tsn-prod {
	padding-left: 6rem;
	padding-right: 6rem;
}

.tsnp-nav {
	margin-bottom: 3rem;
}

.tsnp-nav a {
	font-size: .7rem;
	padding: 0;
	white-space: nowrap;
	margin: 0
}

.tsnp-nav a.active {
	font-weight: bold;
}

.tsnp-item {
	color: black;
	font-size: .7rem;
}

.tsnp-item:hover .tsnpi-title {
	color: var(--primary);
}

.tsnp-nav-panel a {
	padding: 0;
	margin: 0
}

.tsnpi-title em {
	display: inline-block;
	font-size: .6rem;
	line-height: 1rem;
	height: 1rem;
	padding: 0 .45rem;
	border-radius: .5rem;
	color: var(--primary);
	border: 1px solid var(--muted);
	margin-top: .35rem;
}

.top-sub-menu::before {
	content: "";
	position: fixed;
	width: 300vw;
	height: 100vw;
	left: -100vw;
	top: 0;
	background-color: rgba(0, 0, 0, .65);
	z-index: 1;
	pointer-events: none;
}

.top-sub-menu::after {
	content: "";
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	background-color: var(--white);
	z-index: 2;
}

.main-nav-bar {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	height: 100%;
}

.tnh-con {
	height: 1.8rem;
	display: flex;
	align-items: center;
	white-space: nowrap;
	justify-content: center;
	border-radius: .9rem;
	border: 1px solid var(--normal);
	padding: 0 1rem;
	color: var(--normal);
}

.tnh-con:hover {
	background-color: var(--white);
	color: var(--black) !important;
	border-color: var(--white);
}

.ani-menu {
	display: none
}

.top-nav-menu .visible-inline-xs {
	display: none
}

.top-toggle-nav>span {
	display: none;
}

.tnb-frame,
.tnb-con,
.row-nav {
	height: 100%;
}

.top-nav-menu dl.active dt .hover-border:before {
	transform-origin: 0% 50%;
	transform: scale(1, 1);
}

.transparent body:not(.fixed-tn) .top-nav {
	background-color: transparent;
}

.transparent.tn-light body:not(.fixed-tn) .tnh-con {
	border-color: white;
	color: var(--white);
}

.transparent.tn-light body:not(.fixed-tn) .top-nav-logo img.logo-color {
	opacity: 0;
	display: none;
}

.transparent.tn-light body:not(.fixed-tn) .top-nav-logo img.logo-white {
	opacity: 1;
	display: block;
}

.top-toggle-nav {
	display: none;
}

.top-search {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	width: 2rem;
	background: transparent;
	padding-left: .5rem;
	overflow: hidden;
}

.top-search input[type="text"] {
	font-size: .65rem;
	line-height: 1rem;
	width: 0;
	height: 1.6rem;
	padding: .25rem 2.5rem .25rem 1rem;
	opacity: 0;
	color: var(--link);
	border: 0;
	border-radius: 1rem;
	transition: all .5s;
	transform-origin: right center;
}

.top-search button {
	font-size: 1.05rem;
	position: absolute;
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 2rem;
	height: 1.6rem;
	color: var(--link);
	border: 0;
	background-color: transparent;
}

.top-search input[type="text"] {
	width: 100%;
	opacity: 1;
}


/* Button */
.btn-ani {
	line-height: 2.3rem;
	text-align: center;
	padding: 0 3rem;
	color: black;
	background-color: white;
	overflow: hidden;
	position: relative;
	border: 1px solid white;
}

.btn-ani:after,
.btn-ani:before {
	position: absolute;
	top: -1px;
	left: -1px;
	width: calc(100% + 2px);
	height: calc(100% + 2px);
	content: "";
	transition: all .3s ease;
}

.btn-ani:before {
	z-index: -2
}

.btn-ani:after {
	z-index: -1;
	left: calc(-100% - 2px);
	background: black;
}

.btn-ani:hover {
	color: white;
}

.btn-ani:hover:after {
	left: 0
}

.btn-ani:hover:before {
	left: calc(100% + 1px)
}

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

.btn-ani.btn-black:after {
	background-color: var(--primary);
}

.btn-ani.btn-primary {
	background-color: var(--primary);
	color: white;
	border: 0;
}

.btn-ani.btn-primary:after {
	background-color: var(--black);
}

.btn-more {
	overflow: hidden;
	width: 11rem;
	text-align: left;
	color: var(--primary);
	line-height: 2;
}

.btn-more>span {
	display: flex;
	justify-content: space-between;
	align-items: center;
	transition: transform 0.6s cubic-bezier(0.165, 0.84, 0.44, 1)
}

.btn-more>span>em {
	flex-grow: 1;
	text-align: left;
	padding-left: .8rem;
	font-family: "MONO";
	font-weight: bold;
}

.btn-more>span:before,
.btn-more>span:after {
	font-family: "iconfont";
	content: "\e619";
	display: block;
	width: 1.4rem;
	font-size: .8rem;
}

.btn-more>span:before {
	margin-left: -1.6rem;
}

.btn-more::before,
.btn-more::after {
	content: "";
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 1px;
	background: currentColor;
	transform-origin: right;
	transform: scaleX(1) translateZ(0);
	transition: transform 0.6s cubic-bezier(0.165, 0.84, 0.44, 1) 0.2s;
}

.btn-more::after {
	transform-origin: left;
	transform: scaleX(0) translateZ(0);
	transition: transform 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.btn-more:hover::before {
	transform: scaleX(0) translateZ(0);
	transition: transform 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.btn-more:hover::after {
	transform: scaleX(1) translateZ(0);
	transition: transform 0.6s cubic-bezier(0.165, 0.84, 0.44, 1) 0.2s;
}

.btn-more:hover>span {
	transform: translateX(1.6rem) translateZ(0);
}

.btn-more.muted-light {
	color: #fff;
}

.btn-more.muted {
	color: var(--muted);
}

.btn-more.btn-sm {
	width: 6rem;
	line-height: 1.8;
}

.btn-more.btn-sm>span:before {
	margin-left: -1.4rem;
}

.btn-more.btn-sm:hover>span {
	transform: translateX(1.4rem) translateZ(0);
}

/* .btn-more.btn-sm>span:before,
.btn-more.btn-sm>span:after {
	width: rem;
	font-size: .6rem;
} */

.btn-more.primary {
	color: var(--primary);
}

.btn-more.primary::before,
.btn-more.primary::after {
	background-color: var(--primary);
}

/* Home */
.slides-list,
.slides-list li,
.bx-wrapper,
.bx-viewport {
	position: relative;
	height: 100%;
}

.slick-list,
.slick-track {
	overflow: hidden;
	width: 100%;
	height: 100%;
}

.slick-dots {
	z-index: 3;
	bottom: 2.5rem;
	line-height: 1;
	font-size: 0;
	right: initial;
	left: initial;
	width: 100%;
}

.slick-dots li {
	width: auto;
	height: 20px;
	margin-right: 0;
	margin-left: 0;
	padding: 0 6px;
}

.slick-dots li button {
	width: auto;
	height: 100%;
	margin: 0;
	padding: 0;
	background-color: transparent;
	border: 0;
}

.slick-dots li button:before {
	width: .5rem;
	position: relative;
	display: block;
	background-color: var(--white);
	opacity: 1;
	font-size: 0;
	height: 2px;
	transition: all .25s ease;
}

.slick-dots li.slick-active button:before {
	width: 2.25rem;
	opacity: 1;
	background-color: var(--primary);
}

.slick-dotted.slick-slider {
	margin-bottom: 0;
	padding-bottom: 0;
}

.line-dots .slick-dots {
	margin-left: -4.25rem;
	width: auto;
	overflow: hidden;
	left: 50% !important;
	transform: translateX(-50%);
}

.line-dots .slick-dots li {
	margin: 0;
	pointer-events: none;
}

.line-dots .slick-dots li button:before {
	width: 2rem;
}

.line-dots .slick-dots li button:after {
	opacity: 0;
	z-index: 2;
	content: "";
	position: absolute;
	right: 0;
	top: 0;
	height: 100%;
	width: 100vw;
	background-color: var(--primary);
}

.line-dots .slick-dots li.slick-active button:after {
	opacity: 1;
}

.line-dots .slick-dots li.slick-active button:before {
	width: 2rem
}

/* animation */
.top-brand {
	pointer-events: none;
	height: 12rem;
	z-index: 10;
	position: fixed;
	width: 100%;
	left: 0;
	margin-top: -15.25rem;
}

.tbrand-name {
	font-family: "BL";
	font-weight: 300;
	letter-spacing: .12em;
	line-height: .825;
	font-size: 6rem;
}

.fixed-tn .top-brand {
	position: absolute;
	top: 5.5rem;
}

.homeban-front {
	display: block;
	width: 100%;
	height: 100vh;
	pointer-events: none;
}

.home-banner {
	height: calc(100vh);
	z-index: 5;
	background-color: var(--black);
	top: calc(-1 * var(--top-nav));
}

.home-slides {
	height: 100%;
	z-index: 0;
}

.home-slides .slick-arrow {
	transition: all .5s ease;
	opacity: 0;
	width: 15rem;
	height: 100%;
	z-index: 2;
	top: 0;
	background-color: rgba(0, 0, 0, .25);
	transform: none;
}

.home-slides .slick-arrow:before {
	display: none;
}

.home-slides .slick-prev {
	left: 0;
	background: linear-gradient(to right, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0) 100%);
}

.home-slides .slick-next {
	right: 0;
	background: linear-gradient(to left, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0) 100%);
}

.home-slides .slick-prev:hover,
.home-slides .slick-next:hover {
	opacity: 1;
}

.home-slides video {
	position: absolute;
	height: 100%;
	left: 0;
	top: 0;
	object-fit: cover;
}

.slides-info {
	padding-top: 8rem;
}

.hsi-title {
	letter-spacing: .15em;
	padding-left: .15em;
	line-height: 1;
	margin-bottom: .75rem;
}

.hsi-sub {
	letter-spacing: .3em;
	padding-left: .3em;
}

.hover-arrow:after {
	position: relative;
	margin-left: .25em;
	content: "→";
	display: inline-block;
	transition: margin .5s cubic-bezier(.4, 0, .2, 1);
}

.hover-arrow:hover:after {
	margin-left: 1em;
	transition: margin .5s cubic-bezier(.4, 0, .2, 1);
}

.hover-arrow:hover {
	color: inherit;
}

.ani-mask {
	z-index: 2;
	transition: all .65s ease .55s;
}

.hsl-mask {
	opacity: 0;
	transform: translateY(3rem);
}

.hoban-list.slick-end .slick-slide.slick-active .ani-mask {
	opacity: 1;
	transform: none;
}

.hsi-player {
	width: 100%;
	height: 100%;
	cursor: pointer;
}

.hsi-mask {
	opacity: 0;
	position: absolute;
	width: 100%;
	height: 100%;
	z-index: 2;
}

.hsi-mask span {
	border-radius: 6px;
	width: 2rem;
	height: 2rem;
	background-color: rgba(0, 0, 0, .7);
	color: var(--muted-light);
	display: flex;
	justify-content: center;
	align-items: center;
}

.hsi-mask span:hover {
	background-color: rgba(0, 0, 0, .95);
	color: var(--white);
}

.full-player .top-nav {
	transform: translateY(-150%);
}

.full-player .hsi-player {
	position: fixed;
	height: 100vh;
}

.full-player .hsi-mask {
	opacity: 1;
}

.full-player main {
	transform: translateY(50vh);
	opacity: 0;
	pointer-events: none;
}

a.cover-link {
	display: flex;
	position: absolute;
	z-index: 3;
	width: 100%;
	height: 100%;
	left: 0;
	top: 0;
}

.cover-img {
	overflow: hidden;
}

.cover-img>img {
	position: absolute;
	width: initial;
	height: initial;
	max-width: initial;
	max-height: initial;
	min-width: 100%;
	min-height: 100%;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
}

.sec-header {
	text-align: center;
	line-height: 1;
	padding-bottom: 2.5rem;
	padding-top: 4rem;
}

.sec-header dt {
	font-family: "BM";
	font-size: 3rem;
	letter-spacing: 0.05em;
	padding-left: 0.05em;
	margin-bottom: .75rem;
	line-height: .75;
	-webkit-font-smoothing: antialiased;
}

.sec-header dd {
	font-size: 1.25rem;
}

.hcom-overview {
	max-width: 33rem;
	padding-top: 1.75rem;
	padding-bottom: 3.25rem;
	line-height: 2.3;
	text-align: justify;
}

.hover-border {
	padding: .4rem 0;
	line-height: 1;
}

.hover-border:before {
	content: "";
	display: block;
	width: 100%;
	height: 2px;
	transform-origin: 100% 50%;
	transform: scale(0, 1);
	transition: transform 0.6s cubic-bezier(0.36, 0.14, 0, 1);
	position: absolute;
	bottom: 0;
	left: 0;
	background-color: var(--primary);
}

.hover-border.hb-normal:before {
	background-color: var(--primary);
}

.hover-link:hover .hover-border:before,
.hover-border:hover:before {
	transform-origin: 0% 50%;
	transform: scale(1, 1);
}

.hover-link {
	cursor: pointer;
}

.hover-border.hb-dark {
	color: var(--dark);
}

.slides-nav {
	position: absolute;
	height: 0;
	top: calc(50% - 3rem);
	left: 0;
	width: 100%;
	z-index: 9;
}

.slides-nav button {
	position: absolute;
	cursor: pointer;
	top: 0;
	font-size: 1.3rem;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--white);
	background: rgba(0, 0, 0, .25);
	padding: .5rem;
}

.slides-nav button:hover {
	color: var(--white);
	background-color: rgba(0, 0, 0, 1);
}

.slides-nav button:first-child {
	left: 0;
}

.slides-nav button:last-child {
	right: 0;
}

.slides-progress {
	position: absolute;
	width: 100%;
	height: 2px;
	line-height: 1;
	left: 0;
	bottom: 1.5rem;
	z-index: 2;
	pointer-events: none;
}

.slides-progress>span {
	height: 100%;
	background-color: currentColor;
}

.slides-progress em {
	display: block;
	height: 100%;
	background: currentColor;
	width: 0;
}

.home-main {
	z-index: 2;
	background-color: var(--white);
	margin-top: 20vw
}

.home-spacer {
	height: 100vh;
	width: 100%;
	pointer-events: none;
}

.home-hello {
	position: fixed;
	width: 100%;
	height: 100vh;
	left: 0;
	top: 0;
}

.hhel-bg-video {
	z-index: 0;
	position: absolute;
	width: 100%;
	height: 100%;
}

.hhel-left,
.hhel-right {
	z-index: 1;
}

.hhel-progress {
	position: absolute;
	width: 100%;
	height: 2px;
	left: 0;
	bottom: 0;
	background-color: var(--primary);
}

.hhel-circle {
	position: absolute;
	left: 5.15%;
	top: 23.25%;
	width: 8vw;
	height: 8vw;
}

@keyframes circle {
	0% {
		visibility: visible;
		-webkit-transform: rotate(0deg);
		transform: rotate(0deg)
	}

	100% {
		-webkit-transform: rotate(360deg);
		transform: rotate(360deg)
	}
}

.circle {
	animation: circle 5s linear infinite;
}

.common-title {
	text-align: center;
	line-height: 1.6;
}

.common-title>h3,
.common-title>h4 {
	font-size: 2.1rem;
}

.home-products,
.home-sci,
.home-os,
.home-app,
.home-support,
.home-partner,
.home-cooperation {
	padding-top: 9rem;
	padding-bottom: 5rem;
}

.pt-9 {
	padding-top: 9rem;
}

.pt-8 {
	padding-top: 8rem;
}

.pt-6 {
	padding-top: 5rem;
}

.pb-6 {
	padding-bottom: 5rem;
}

@keyframes scan {
	0% {
		background-size: 0 100%;
	}

	100% {
		background-size: 100% 100%;
	}
}

@media screen and (min-width: 1200px) {
	.about-waitBox {
		height: 70vh;
	}

	.about-wait-history {
		padding: 100px 0;
		position: relative;
	}

	.hpro-con {
		margin-left: var(--left-pad);
		overflow: hidden;
		background-color: var(--black);
	}

	.hpro-center {
		width: calc(200vw - var(--left-pad) - 60vw);
		margin-left: -.5rem;
		margin-right: -.5rem;
	}

	.hpro-center .slick-slide {
		padding-left: .5rem;
		padding-right: .5rem;
	}

	.hpro-info {
		z-index: 2;
		left: inherit;
		right: 14vw;
		width: 24vw;
		height: 100%;
	}

	.hpro-info:before {
		content: "";
		position: absolute;
		left: 0;
		top: 0;
		width: 100%;
		height: 100%;
		background-color: #0052d9;
	}

	.hproi-con {
		color: #fff;
		height: 100%;
		padding: 9rem 2.5rem 4.5rem 2.5rem;
		display: flex;
		justify-content: space-between;
		flex-direction: column;
	}

	.hproi-det {
		-webkit-line-clamp: 4;
	}

	.hpro-nav a {
		color: currentColor;
	}

	.hpro-nav a>span {
		background: currentColor -webkit-linear-gradient(left, var(--primary), var(--primary)) no-repeat 0 0;
		-webkit-text-fill-color: transparent;
		-webkit-background-clip: text;
		background-size: 0 100%;
	}

	.hpro-nav a.active {
		font-weight: bold;
	}

	.hpro-nav a.active>span {
		background-size: 100% 100%;
		animation: scan 6s linear;
	}

	.hfi-item {
		background-size: 0 0;
	}
}


.tiny-nav {
	position: absolute;
	left: 0;
	height: .75rem;
}

.tiny-nav>button {
	cursor: pointer;
	margin: 0 .25rem;
	border: 0;
	height: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
}

.tiny-nav>button:before {
	content: "";
	display: inline-block;
	width: .5rem;
	height: 2px;
	background-color: #fff;
	transition: width .5s ease;
}

.tiny-nav>button.active:before {
	width: 2.25rem;
	background-color: #ffffff;
}

.tiny-nav.at-bottom {
	bottom: 1rem;
}

:root {
	--hprioc-normal: 9.15vw;
	--hprioc-pad: 3rem;
	--hprooc-det: 16rem;
}

@media screen and (min-width: 1200px) {
	.hproc-list {
		height: 35rem;
	}

	.hproc-item {
		width: var(--hprioc-normal);
		height: 100%;
		padding: 2.5rem 0;
	}

	.hproc-item.active {
		flex-grow: 1;
	}

	.hproci-icon {
		height: 3.2rem;
	}

	.hproci-icon>img {
		width: 3.2rem;
		height: 100%;
		left: 50%;
		transform: translateX(calc(-50%));
	}

	.hproci-desc {
		margin-top: 9.5rem;
		width: 100%;
		height: calc(100% - 3.2rem - 9.5rem);
	}

	.hproci-desc dt {
		height: 3.2rem;
	}

	.hproci-desc dt>span {
		display: inline-block;
		white-space: nowrap;
		left: 50%;
		transform: translateX(calc(-50%));
	}

	.hproci-info {
		flex-grow: 1;
		font-size: .6rem;
		min-height: 5rem;
		padding-left: var(--hprioc-pad);
		opacity: 0;
		transform: translate3d(0, 2rem, 0);
		transition: all .5s ease;
	}

	.hprocii-con {
		width: var(--hprooc-det);
		text-align: justify;
	}

	.hproci-info hr {
		border-color: white;
		width: 1.15rem;
		margin-top: 1rem;
	}

	.hproci-footer {
		position: absolute;
		bottom: .5rem;
		width: calc(100% - var(--hprioc-pad) * 2);
		height: 2rem;
	}

	.hprocif-title {
		width: var(--hprooc-det);
		white-space: normal;
		flex-shrink: 0;
	}

	.hprocif-more {
		border-radius: 100%;
		width: 1.2rem;
		height: 1.2rem;
		background-color: var(--primary);
		color: white;
		transition: all .25s ease;
		margin: .2rem;
	}

	.hprocif-more:hover {
		width: 1.6rem;
		height: 1.6rem;
		margin: 0;
		color: white;
	}

	.hproc-item.active .hproci-desc dt {
		font-size: 1.8rem;
	}

	.hproc-item.active .hproci-icon>img,
	.hproc-item.active .hproci-desc dt>span {
		transform: translateX(var(--hprioc-pad));
		left: 0;
	}

	.hproc-item.active .hproci-info {
		transition-delay: .4s;
		opacity: 1;
		transform: unset;
	}

	.hfea-info .tns-item,
	.hfea-info .tns-outer,
	.hfea-info .tns-ovh,
	.hfea-info .tns-inner {
		height: 100%;
	}
}


.hpro-fancy {
	display: none;
	width: 50rem;
	height: 80vh;
	border-radius: .6rem;
	padding: 4vw 5vw;
}

.hprofan-title {
	font-size: 1.8rem;
	line-height: 1;
	margin-bottom: 1rem;
	padding-bottom: .5rem;
}

.hprofan-title::after {
	content: "";
	display: block;
	width: 100%;
	background-color: var(--muted-light);
	height: 1px;
	margin-top: 1.5rem;
}

.hprofan-icon img {
	width: 3.2rem;
}

.hpro-fancy dd h4 strong {
	display: inline-block;
	border: 1px solid black;
	line-height: 1;
	height: 1.2rem;
	padding: .2rem .5rem;
	border-radius: .6rem;
}

.hpro-fancy dd .col-left {
	flex: 0 0 55%;
	max-width: 55%;
}

.hpro-fancy dd .col-right {
	flex: 0 0 45%;
	max-width: 45%;
}

.hfeafan-title {
	line-height: 1.3;
}

.fancy-con .mCustomScrollbar:not(.mCS_no_scrollbar) {
	margin-right: -2.8rem;
}

.fancy-con .scroll-content {
	height: calc(80vh - 4vw * 2);
}

.hscii-con {
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.hscii-con>dt {
	width: 40%;
	flex-shrink: 0;
	color: var(--muted-light);
}

.hscii-con>dd {
	flex-grow: 1;
	overflow: hidden;
}

.hsci-item:nth-child(odd) dt {
	padding-left: 10rem;
}

.hsci-item:nth-child(even) dt {
	padding-right: 10rem;
	order: 2;
}

.hscii-video .icon-play {
	border: 1px solid currentColor;
	border-radius: 2rem;
}

.hscii-video:hover .icon-play {
	color: white;
}

.hscii-link a.btn-more {
	max-width: 8rem;
}

.home-smart {
	padding-top: 0;
}

.home-smart .common-title {
	padding-top: 9rem;
}

.home-smart .common-title:before {
	content: "";
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: calc(100% + 6rem);
	background-color: #fff;
}

.hsma-item dl {
	max-width: 28rem;
	margin-left: 12%;
}

.hsma-center {
	overflow: hidden;
}

.hsma-mask {
	position: absolute;
	top: 0;
	left: -1px;
	width: 14vw;
	height: 100%;
	z-index: 2;
	border-top: 6rem solid #fff;
	background-color: white;
	transform-origin: left top;
}

.hsma-mask:last-child {
	left: unset;
	right: -1px;
	transform-origin: right top;
}

.happ-con {
	overflow: hidden;
}

.happ-list {
	margin-right: -5rem;
}

.happ-item {
	padding: 1rem .75rem;
}

.happi-con {
	padding-top: 140%;
}

.happi-con>dl {
	position: absolute;
	left: 0;
	top: 0;
	height: 100%;
	width: 100%;
}

.happ-center {
	padding-left: var(--left-pad);
	padding-bottom: 4.25rem;
	width: 100%;
}

.happ-list .slick-dots {
	bottom: -4.25rem;
	left: -6rem;
}

.muted-slick-dots .slick-dots li button:before {
	background-color: var(--muted);
}

.muted-slick-dots .slick-dots li.slick-active button:before {
	background-color: var(--primary);
}

.happi-con dt {
	height: 60%;
}

.happi-con dd {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	padding: 94% 1.5rem 1.25rem 1.5rem;
	z-index: 2;
	background: url("../image/home/home-app-bg.png") repeat-x left bottom;
	background-size: auto 100%;
}

.hover-auto .happ-item:not(.no-zoom):hover {
	transform: scale(1.1);
}

.happ-item:hover .happi-link a {
	color: var(--primary);
}

.home-innovation {
	padding-bottom: 5rem
}

.hinn-con {
	overflow: hidden;
}

.hinn-center {
	background-color: var(--muted-light);
}

.hinn-list {
	margin-bottom: -1px;
	margin-right: -1px;
}

.hinn-col {
	flex: 1;
}

.hinn-col.active {
	flex: 0
}

.hinn-item {
	height: 7.5rem;
	background-color: rgb(239, 239, 239);
	margin-right: 1px;
	margin-bottom: 1px;
}

.hinni-title,
.hinnm-title {
	line-height: 1;
	margin-bottom: 2.75rem;
	font-size: .9rem;
	white-space: nowrap;
}

.hinni-icon {
	height: 1.2rem;
}

.hinn-col.active {
	flex: 1.8 !important;
}

.hinn-col.active .hinn-item:not(.active) {
	pointer-events: none;
}

.hinni-mask {
	position: absolute;
	width: 100%;
	height: 100%;
	left: 0;
	top: 0;
	z-index: 2;
	opacity: 0;
	background-color: #0052d9;
}

.hinn-col .hinn-item:last-child .hinni-mask {
	top: initial;
	bottom: 0;
}

.hinn-item.active .hinni-mask {
	height: 15rem;
	opacity: 1;
}

.hinnm-con {
	width: 12rem;
	overflow: hidden;
}

.hinnm-img {
	position: absolute;
	width: 11rem;
	top: 0;
	right: 1rem;
	top: 0;
	transform: translateY(-2rem);
	transition: opacity .25s;
	opacity: 0;
}

.hinn-item.active .hinnm-img {
	transition: opacity .35s ease .35s;
	opacity: 1;
}

.home-support {
	background-color: var(--black);
	background-size: 100% auto;
	background-position: center top;
	background-repeat: no-repeat;
}

.home-support:before {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	width: 100%;
	height: 5rem;
	z-index: 0;
	background-color: var(--dark);
}

.common-title.zoom-2x h3>strong {
	font-size: 200%;
	line-height: 1;
	display: inline-block;
	margin-right: .75rem;
	vertical-align: bottom;
}

.hsup-frame {
	padding-left: var(--left-pad);
}

.hsup-con {
	padding: 4rem 10rem;
}

.hsup-con:after {
	content: "";
	clear: both;
}

.hsupc-box {
	overflow: hidden;
}

.hsupc-nav {
	width: 16rem;
	display: block;
	float: left;
	padding-top: 2.5rem;
	padding-bottom: 2.5rem;
	color: var(--secondary);
}

.hsupc-main {
	margin-left: 16rem;
	padding-left: 10rem;
	padding-right: 5rem;
	padding-top: 3rem;
}

.hover-auto .hsupc-nav:after {
	content: "";
	position: absolute;
	right: 0;
	height: 200%;
	top: 0;
	width: 1px;
	background-color: var(--muted-light);
}

.hsupc-nav a {
	display: block;
	line-height: 3.5;
	z-index: 2;
}

.hsupc-nav a:after {
	content: "";
	position: absolute;
	width: 3px;
	height: 80%;
	top: 10%;
	right: -1px;
	background-color: var(--primary);
	transition: all .25s linear;
	transform: scale(0);
}

.hover-auto .hsupc-nav a:hover {
	padding-left: 1.5rem;
}

.hsupc-nav a.active:after {
	transform: none;
}

.hpar-con {
	width: 100%;
	max-width: 60rem;
	height: 18rem;
	margin: auto;
}

.hpar-con:after {
	position: absolute;
	z-index: 5;
	left: 0;
	width: 100%;
	height: 10rem;
	content: "";
	top: 0;
	background: linear-gradient(to bottom, rgba(22, 22, 22, 1) 0%, rgba(22, 22, 22, 0) 100%);
}

.hpar-con .fh {
	height: 100%;
	overflow: hidden;
}

.btn-apply {
	width: 26rem;
	max-width: 80%;
	background-color: white;
	color: black;
	border: 1px solid white;
}

.conLine {
	width: 1.5rem;
	height: 1px;
	margin-top: .5rem;
	margin-bottom: .5rem;
	background-color: var(--primary);
}

.btn-apply:hover {
	background-color: black;
	color: white;
}

.bgW {
	background-color: rgba(0, 0, 0, 0.3);
}

.home-news {
	background: #fff;
	padding: 3rem 0;
}

@keyframes slide-show {
	0% {
		transform: translateY(100%);
		visibility: hidden;
	}

	100% {
		transform: translateY(0);
		visibility: visible;
	}
}

@keyframes slide-hide {
	0% {
		transform: translateY(0);
		visibility: visible;
	}

	100% {
		transform: translateY(100%);
		visibility: hidden;
	}
}

.fancy-box {
	position: fixed;
	left: 0;
	top: var(--top-nav);
	width: 100%;
	height: 100%;
	overflow: hidden;
	pointer-events: none;
	z-index: 99;
	/* padding-top: var(--top-nav); */
	transition: all .75s cubic-bezier(0.76, 0, 0.24, 1);
	transform: translateY(100%);
	background-color: rgba(0, 0, 0, 0);
}

.fancy-box.active {
	transform: none;
	background-color: rgba(0, 0, 0, .5);
	pointer-events: unset;
}

.fancy-box-con {
	background-color: white;
	border-top-left-radius: .5rem;
	border-top-right-radius: .5rem;
}

.cfp-item {
	min-height: 5rem;
}

.cfp-item label {
	font-size: .7rem;
	transition: 150ms;
	position: absolute;
	top: 1rem;
	left: 0;
	transform-origin: left top;
}

.cfpi-input {
	width: 100%;
	padding-top: 20px;
	padding-bottom: 12px;
	padding-left: 50px;
	border-style: solid;
	border-width: 0 0 1px;
	border-color: black black #ddd;
	-webkit-transition: background-color 150ms, border-color 150ms, border-width;
	transition: background-color 150ms, border-color 150ms, border-width;
}

.cfpi-input:focus {
	border-bottom-color: black;
}

.cfpi-input:focus+label,
.cfpi-input:not(:placeholder-shown)+label {
	color: var(--muted);
	transform: scale(.75);
	top: 0;
}

.cfpi-input::placeholder {
	color: transparent !important;
	z-index: -1;
}

/* Sub Page */
.breadcrumb {
	margin-top: 5.75rem;
}

.breadcrumb a,
.breadcrumb span {
	margin-right: .5rem;
	flex-shrink: 0;
	color: var(--muted);
	font-size: .6rem;
}

.breadcrumb a:hover {
	color: black;
}

.sub-banner .subban-item {
	height: calc(100vh - var(--top-nav));
	max-height: 75vw;
}

.vline-1 {
	display: inline-block;
	line-height: 1;
	width: 1px;
	height: 100%;
	background-color: currentColor;
}

.vline-1:before {
	content: "-";
	font-size: 0;
	color: transparent;
}

.hline-1 {
	display: inline-block;
	line-height: 1;
	width: 1em;
	height: 1px;
	background-color: #fff;
}

.hline-1:before {
	content: "-";
	font-size: 0;
	color: transparent;
}

/* About */
.intro-trinity .happi-con {
	padding-top: 57%;
}

.intro-trinity .happ-list {
	margin-right: -18vw;
}

.intro-trinity .line-dots .slick-dots {
	margin-left: initial;
	padding-right: calc(18vw + var(--left-pad));
}

.inabi-con {
	top: initial;
	bottom: 0;
	min-height: 7.5rem;
	padding: 3rem;
}

.intro-works .happ-list {
	margin-right: -25vw;
}

.intro-works .happi-con {
	padding-top: 62.5%;
}

.inwork-con {
	overflow: hidden;
}

.intro-works .line-dots .slick-dots {
	display: flex;
	width: calc(100vw - var(--left-pad));
	bottom: -2rem;
	margin-left: 0;
	margin-right: 0;
	left: 1rem !important;
	transform: none;
}

.intro-works .line-dots .slick-dots li {
	flex: 1;
}

.intro-works .line-dots .slick-dots li button {
	width: 100%;
}

.intro-works .line-dots .slick-dots li button:before {
	width: 100%;
}

.inwork-progress {
	padding-left: calc(var(--left-pad) + 0.75rem);
}

.inwork-progress>span {
	width: 100%;
}

.insupi-icon {
	width: 2rem;
	flex-shrink: 0;
	margin-right: 6.5vw;
}

.insup-item {
	padding-top: 30%;
}

.insupi-det h4 strong {
	width: 3.25rem;
}

.insupid-con {
	padding-left: 3.4rem;
}

.culban-circle {
	left: -3.75rem;
	top: -3.75rem;
}

.culsli-center {
	padding-left: 10.5rem;
}

.culsli-left {
	padding-right: 6rem;
}

.culsli-right {
	overflow: hidden;
}

.culsli-list {
	margin-left: -.5rem;
}

.culsli-item {
	padding-left: .5rem;
	padding-right: .5rem;
	padding-top: .5rem;
}

.culslii-con {
	padding-top: 58%;
}

.top-arrows .slick-arrow {
	transform: none;
	margin: 0;
	top: 0rem;
	width: 2rem;
	height: auto;
	z-index: 2;
	text-align: center;
}

.top-arrows .slick-arrow::before {
	font-family: "icon";
	font-size: 1.1rem;
	color: var(--muted-light);
}

.top-arrows .slick-prev {
	left: 35vw;
}

.top-arrows .slick-next {
	left: calc(35vw + 4rem);
	right: initial;
}

.top-arrows .slick-prev::before {
	content: "\e91a";
}

.top-arrows .slick-next::before {
	content: "\e91b";
}

.top-arrows .slick-arrow:hover:before {
	color: var(--primary);
}

.about-comnav {
	padding-top: 5rem;
	padding-bottom: 5rem;
}

.about-comnav li {
	margin: 0 1.5rem;
}

.about-comnav li a {
	color: black;
}

.about-comnav li.active a em {
	color: var(--primary);
}

.about-comnav li.active a em::before {
	transform-origin: 0% 50%;
	transform: scale(1, 1);
}


/* support */
.comban-icon.zoom-strong strong {
	display: inline-block;
	margin-right: .25rem;
	font-size: 130%;
}

.supcon-nav {
	width: 15rem;
	flex-shrink: 0;
	float: left;
	left: auto;
	margin-right: -15rem;
	z-index: 9;
}

.supcon-main {
	flex-grow: 1;
	width: 100%;
	padding-left: 15rem;
}

.supcon-nav a {
	color: var(--muted);
	display: block;
	line-height: 2;
	padding-top: .5rem;
	padding-bottom: .5rem;
}

.supcon-nav a:hover,
.supcon-nav a.active {
	color: var(--primary);
}

.supcon-nav a.active {
	transform: translateX(1rem);
}

.supci-no {
	line-height: 1.5;
}

.supci-right {
	overflow: hidden;
}

.supci-icon {
	width: 3.2rem;
	height: 3.2rem;
}

.supcon-item,
.support-download {
	padding-left: 3.5rem;
	margin-bottom: 4.25rem;
}

.suplicon {
	border-radius: .6rem;
	background-color: rgb(245, 245, 245);
	overflow: hidden;
}

.supci-download {
	position: absolute;
	bottom: 1.25rem;
}

.suplicon dt {
	padding-left: 2.5rem !important;
}

.btn-download {
	height: 3.75rem;
	border-radius: .6rem;
	border: 1px solid var(--silver);
	padding-left: 1rem;
	padding-right: 1rem;
	color: currentColor;
}

.btn-download:hover {
	border-color: var(--dark);
}

.supdow-item a.btn-download>i {
	width: 1.6rem;
	height: 1.6rem;
	overflow: hidden;
	flex-shrink: 0;
}

.btn-download:hover>i>img {
	margin-left: 1.6rem;
	filter: drop-shadow(-1.6rem 0px var(--primary));
}

.btn-download>em {
	margin-left: .75rem;
	margin-right: .75rem;
}

/* common footer */
.main-footer {
	background-color: var(--dark);
	z-index: 2;
	color: var(--muted);
}

.main-footer,
.main-footer a {
	color: var(--muted);
}

.footer-row {
	padding-top: 5rem;
	padding-bottom: 5rem;
}

.go-top {
	position: absolute;
	right: 0;
	bottom: 0;
	width: 2rem;
	height: 5.6rem;
	font-size: 5.6rem;
	color: white;
	overflow: hidden;
}

.go-top i {
	position: absolute;
	left: 50%;
	top: 0;
	margin-left: -2.6rem;
	cursor: pointer;
}

.go-top:hover {
	color: var(--primary);
}

.footer-nav-menu a {
	white-space: nowrap;
	text-overflow: ellipsis;
	overflow: hidden;
}

.footer-nav-menu dl {
	margin-right: 2rem;
	max-width: 15%;
}

.footer-nav-menu dl:last-child {
	margin-right: 0
}

.footer-nav-menu a {
	display: block;
}

.footer-nav-menu dt a {
	font-size: .8rem;
	font-weight: bold;
	line-height: 1.5;
	padding-bottom: 1rem;
	margin-bottom: 1.5rem;
	color: var(--muted-light);
	margin-bottom: .5rem;
}

.footer-nav-menu dd a {
	font-size: .7rem;
	line-height: 2.2;
}

.footer-nav-menu a:hover {
	color: var(--primary);
}

.tncq-social a {
	width: 2rem;
}

.tncq-social a em {
	display: block;
}

.tncq-social a em img {
	transition: opacity .25s ease;
}

.tncq-social a em .csoimg-1 {
	opacity: .5;
}

.tncq-social a:hover em .csoimg-1 {
	opacity: 1;
}

.social-image>span {
	display: block;
	position: absolute;
	width: 5rem;
	border-radius: 6px;
	transition: all .25s;
	top: 0;
	left: 50%;
	transform: translate3d(-50%, -100%, 0);
	opacity: 0;
	pointer-events: none
}

.social-image:hover>span {
	top: -1.25rem;
	opacity: 1
}

.mmspacer {
	position: absolute;
	height: 0;
	bottom: -4.5rem;
	width: 100%;
	left: 0;
	z-index: -1;
	pointer-events: none;
	opacity: 0;
}

/* products */

/* pager */
.pager-list a {
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--dark);
	margin-left: .25rem;
	margin-right: .25rem;
	font-size: .9rem;
	min-width: 1.6rem;
	height: 1.6rem;
}

.pager-list a.active {
	color: var(--primary);
	pointer-events: none;
}

.pager-list a:hover {
	color: var(--primary);
}

.pager-list .pager-prev,
.pager-list .pager-next {
	background-color: transparent;
	margin-left: .25rem;
	margin-right: .25rem;
	font-size: .9rem;
}

/* news  */
.newstic-title em {
	position: absolute;
	display: block;
	padding: .15rem .2rem;
	top: .25rem;
	right: .5rem;
	line-height: 1;
	background-color: red;
	color: white;
	font-size: .5rem;
	border-radius: 4px;
}

.newstic-title em.muted {
	background-color: var(--link);
	color: var(--dark);
}

.newstic-title em.inline {
	position: relative;
	display: inline-block;
	margin-left: 2rem;
}

.sub-nav a {
	padding: .5rem 1.5rem;
	background-color: white;
	color: var(--dark);
	cursor: pointer;
	margin: 0;
	line-height: 1;
}

.sub-nav a:not(:last-child) {
	border-right: 1px solid var(--link);
}

.sub-nav a:not(.active):hover {
	color: var(--primary);
}

.sub-nav a.active {
	background: var(--primary);
	color: white;
}

.newstic-img {
	overflow: hidden;
	background-size: 0 0;
}

.newsd-body p {
	margin-bottom: 15px;
}

.newsdet-frame {
	width: 65vw;
	;
	margin-left: 0;
}

.news-related {
	background-color: var(--dark);
	padding-top: 5rem;
	padding-bottom: 5rem;
}

/* search */
.search-title {
	padding-bottom: 1.5rem;
	margin-bottom: 1.5rem;
	border-bottom: 1px dashed var(--primary)
}

.search-title h3 {
	font-family: "ikeasbi";
	font-size: 1.7rem;
}

.search-products .subject {
	margin-top: .5rem;
	color: var(--primary);
	display: inline-block;
	line-height: 1.5rem;
	border-radius: .75rem;
	padding-left: 1.5rem;
	padding-right: 1.5rem;
	font-size: .85rem;
	border: 1px solid var(--primary);
}

.search-products .overview {
	color: var(--primary);
	font-family: var(--font-system);
	font-size: .7rem;
}

.search-list a {
	margin-top: 1rem;
	margin-bottom: 1rem;
	padding-bottom: 1rem;
}

.search-list a:hover {
	background-color: rgb(248, 248, 248);
	box-shadow: .35rem .35rem .75rem rgba(0, 0, 0, .1)
}

.search-list a:hover .subject,
.search-list a:hover .overview {
	color: var(--muted);
	border-color: var(--muted);
}

.search-count {
	align-items: flex-end;
	justify-content: space-between;
}

.badge {
	font-size: 75%;
	line-height: 1;
	white-space: nowrap;
}

/* contact */
.consto-map {
	height: 25rem;
	width: 95%;
}

#map img {
	max-width: initial;
	max-height: initial;
	height: initial;
	vertical-align: initial;
}

#map label {
	max-width: unset;
}

.consto-list li {
	border-bottom: 1px solid var(--dark);
}

.consto-icon>a {
	color: var(--dark);
}

.consto-icon>a:hover {
	color: var(--primary);
}

.conser-tab a {
	color: var(--gray);
}

.conser-tab a:hover,
.conser-tab a.active {
	color: var(--primary);
}

.conser-tab-panel table tr td:first-child {
	padding-right: 1.5rem;
}

.tab-panel::-webkit-scrollbar {
	display: none;
}

/* media */
.media-nav a {
	color: var(--secondary);
	margin-left: .5rem;
	margin-right: .5rem;
	line-height: 2;
	border-bottom: 1px solid transparent;
	white-space: nowrap;
}

.media-nav a:hover {
	color: var(--primary);
}

.media-nav a.active {
	color: var(--primary);
	border-color: currentColor;
}

.jcc {
	justify-content: center;
}

.smart-Five {
	display: grid;
	gap: 1.25em;
	grid-template-columns: repeat(5, 1fr);
	padding-left: calc(50% - 640px);
	padding-right: calc(50% - 640px);
	color: #fff;
}

.smart-Five .hpro-item {
	align-items: center;
	background-size: cover;
	border-radius: 18px;
	display: flex;
	flex-direction: column;
	height: 31.25em;
	justify-content: flex-start;
	overflow: hidden;
	padding: 4.8em 10px;
	position: relative;
	text-align: center;
	transition: all .3s ease;
	width: 100%;
}

.smart-Five .hpro-item h4 {
	letter-spacing: 2px;
	-webkit-box-orient: vertical;
	display: -webkit-box;
	flex-grow: 0;
	font-weight: 600;
	flex-shrink: 0;
	font-size: 2em;
	height: 3.4em;
	line-height: 1.5;
	overflow: hidden;
	text-transform: capitalize;
	width: 100%;
}

.smart-Five .five-line {
	background-color: #ffffff4d;
	border-radius: 10px;
	flex-shrink: 0;
	height: .25em;
	margin-bottom: 4em;
	width: 2.5em;
}

.about_ent {
	position: relative;
}

.ent_img img {
	width: 100%;
}

.flex {
	display: flex;
	align-items: center;
}

.ent_box {
	position: absolute;
	display: flex;
	overflow: hidden;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
}

.ent_line {
	width: 1px;
	height: 100%;
	background-color: #999;
}


.ent_all {
	flex: 1;
	justify-content: center;
}

.ent_all .ent_line {
	width: 10%;
	height: 2px;
	margin: 20px auto;
	background-color: #fff;
}

.ent_alls {
	text-align: center;
	transition: transform 0.3s ease;
}

.ent_p1 {
	color: #fff;
}

.ent_p2 {
	color: #e0e0e0;
}

.img_m {
	margin: 0 auto;
	width: 10vw;
	display: none;
}

.ent_all:hover {
	background-color: rgba(0, 0, 0, 0.3);
}

.ent_all:hover .ent_alls {
	transform: scale(1.1);
	transition: all linear 0.3s;
	-webkit-transform: scale(1.1);
}

.ent_all:hover .img_m {
	display: block;
	transform: scale(0.5);
	transition: all linear 0.3s;
	-webkit-transform: scale(0.5);
}

.smart-Five .five-text {
	font-size: 1.125em;
	line-height: 1.8em;
}

@media screen and (max-width: 1439px) and (min-width: 1025px) {
	.smart-Five {
		padding-left: 80px;
		padding-right: 80px;
	}
}

@media screen and (max-width: 1200px) and (min-width: 575px) {
	.about-waitBox {
		height: 520px;
	}
}

@media screen and (max-width: 1024px) and (min-width: 785px) {
	.smart-Five {
		padding-left: 3.75em;
		padding-right: 3.75em;
	}

	.hpro-item h4 {
		font-size: 1.5em;
	}

	.five-text {
		font-size: 1em;
		line-height: 1.5em;
	}
}

@media (max-width: 784px) {
	.smart-Five {
		gap: 1.5em;
		grid-template-columns: repeat(1, 1fr);
		padding-left: 2em;
		padding-right: 2em;
	}

	.smart-Five .hpro-item {
		flex-direction: row;
		height: 12em;
		padding: 0 2.25em;
		text-align: left;
	}

	.smart-Five .hpro-item h4 {
		margin-bottom: unset;
		font-size: 2em;
		height: unset;
		width: 5em;
	}

	.smart-Five .five-line {
		height: 2.5em;
		margin-right: 2em;
		margin-bottom: 0;
		width: .25em;
	}

	.smart-Five .five-text {
		font-size: 1.125em;
		line-height: 1.3em;
	}

	.hpro-item {
		flex-direction: row;
		height: 12em;
		padding: 0 2.25em;
		text-align: left;
	}

	.hpro-item h4 {
		margin-bottom: unset;
		font-size: 2em;
		height: unset;
		width: 7em;
	}

	.five-line {
		height: 2.5em;
		margin-right: 4.5em;
		width: .25em;
	}

	.five-text {
		font-size: 1.75em;
		line-height: 1.33em;
	}
}

.medi-mask {
	position: absolute;
	z-index: 2;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
	background-color: rgba(255, 255, 255, .15);
	opacity: 0;
}

.medi-mask>i {
	border-radius: 50%;
	background-color: var(--primary);
	opacity: .65;
}

.media-item:hover .medi-mask {
	opacity: 1;
}

.media-fancybox {
	height: calc(100vh - var(--top-nav));
	top: var(--top-nav);
}

.media-fancybox .fancybox-bg {
	background: white;
	opacity: 1;
}

/* cooperation */
.coodig-con {
	z-index: 2;
}

.coocho-item dl {
	padding-top: 1.5rem;
}

.coocho-item dd {
	border-radius: .75rem;
	overflow: hidden;
}

.coop-row .com-ani-txt p.empty-line {
	line-height: 1;
}


/* products */
.prohn-item {
	flex: 1;
}

.prohnii-con {
	width: 2.25rem;
	height: 2.25rem;
}

.prohnii-con img {
	width: 100%;
}

.prohnii-con img.front {
	opacity: 0;
}

.prohn-item:hover .prohnii-con img.back,
.prohn-item.active .prohnii-con img.back {
	opacity: 0;
}

.prohn-item:hover .prohnii-con img.front,
.prohn-item.active .prohnii-con img.front {
	opacity: 1;
}

.prohn-item:hover {
	color: var(--primary);
}

body:not([data-view="phone"]) .prohn-item.active {
	background-color: rgb(236, 236, 236);
	color: var(--primary);
}

.prohci-box dt.ratio {
	padding-top: 85%;
}

.prodet-nav {
	background-color: white;
	height: 2.5rem;
	z-index: 6;
}

.pronav-tab a {
	margin-left: 2rem;
	color: var(--secondary);
}

.pronav-tab a:hover,
.pronav-tab a.active {
	color: var(--primary);
}

.prodet-fullscreen {
	min-height: calc(100vh - 2.5rem - var(--top-nav));
}

.prodet-exterior {
	background-color: rgb(245, 245, 245);
}

.prodet-parameter {
	background-color: rgb(229, 229, 229);
}

.proext-con {
	flex-shrink: 0;
	max-width: 100%;
}

.prodet-parameter table {
	width: 100%;
}

.prodet-parameter table tr td:first-child {
	width: 8rem;
	padding-right: 1rem;
}

.prodet-fullscreen .slick-dots {
	bottom: -1rem;
}


/* light */
.liglam-item dl {
	flex-shrink: 0;
	padding: .35rem;
}

.liglam-item dt {
	overflow: hidden;
	border-radius: .8rem;
}

.liglam-item dt img {
	height: 12rem;
	max-width: unset;
	width: auto;
}

.liglam-item dd {
	text-align: center;
	padding: 1.25rem 1.5rem;
	overflow: hidden;
	font-size: .8rem;
}

.ligctr-list li {
	flex-shrink: 0;
}

.ligctr-list li div {
	height: 25rem;
	width: 25rem;
	border-radius: .8rem;
	overflow: hidden;
}

.ligpre-list li {
	flex-shrink: 0;
}

.ligpre-list li div {
	height: 5rem;
}

.ligcom-move {
	overflow: hidden;
	max-width: 100%;
}

.ligdes-item dt img {
	height: 23rem;
}

.ligvip-list li>dl {
	line-height: 1;
	border: 1px solid rgb(40, 40, 40);
	background-color: black;
	padding: .5rem;
	height: 4.4rem;
	border-radius: .6rem;
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: .65rem;
}

.ligvip-list li>dl>dt {
	color: white;
	font-size: 1.6rem;
	width: 4.5rem;
	text-align: center;
}

.ligvip-list li>dl>dd {
	color: var(--muted);
	font-size: 1.4rem;
	flex-grow: 1;
	padding-left: 6rem;
	padding-right: 2rem;
}

.btn-ani.light-apply {
	padding-left: 4rem;
	padding-right: 4rem;
}

.btn-ani.light-apply:hover {
	color: var(--dark);
}

.btn-ani.light-apply:after {
	background-color: var(--white);
}

.smadim-con {
	top: initial;
	bottom: 4rem;
}

.smart-slogan .com-ani-txt .mfs-l {
	font-size: 2.8rem;
}

.zhomeos-intro {
	padding-top: 14vw;
}

.zosint-title {
	padding-bottom: 10rem;
}

.zosint-title h3 {
	font-size: 4.9rem;
}

.zosint-list li {
	flex-basis: auto;
	margin-bottom: 1rem;
	color: white;
}

.zosint-list li:nth-child(-n+3) {
	width: 33.3333%;
}

.zosint-list li:nth-child(n+4) {
	width: 50%;
}

.zosint-list li:nth-child(n+4) dl {
	padding-top: 3rem;
}

.zosint-list li dl {
	height: 17.5rem;
	border-radius: .6rem;
	padding: 4rem 2.5rem;
	z-index: 2;
	overflow: hidden;
}

.zosint-list li dt {
	width: 100%;
	height: 100%;
	z-index: 0;
}

.zosint-list li dd {
	font-size: .9rem;
}

.zosint-list li dd h4 {
	font-size: 2.6rem;
	line-height: 1;
	margin-bottom: 1.5rem;
}

.zosapp-con dd {
	background: unset;
	height: auto;
	top: initial;
	bottom: 0;
	padding: 1.5rem;
	font-size: 1.8rem;
	color: white;
}

/* scenes */
.scenes-home-nav {
	z-index: 3;
}

.scehom-nav {
	z-index: 2;
}

.scehom-nav a {
	color: var(--gray);
	line-height: 1;
}

.scehom-nav a>em {
	line-height: 5rem;
	white-space: nowrap;
	display: block;
	margin-bottom: -2px;
}

.scehom-nav a>em::before {
	height: 3px;
	z-index: 2;
}

.scehom-nav a.active>em::before {
	transform-origin: 0% 50%;
	transform: scale(1, 1);
}

.scehcc-frame {
	background-color: white;
	border-radius: 2.5rem;
	padding: 1.75rem 4rem;
}

.com-ani-txt {
	z-index: 2;
	font-weight: 300;
}

.com-ani-txt .mfs-l {
	font-weight: normal;
	font-size: 2.1rem;
	line-height: 1.5;
}


/* othes */
.fancybox-toolbar {
	right: 1rem;
}

.fancybox-content {
	background-color: white !important;
}

.fancybox-button {
	width: 3rem;
	height: 3rem;
	padding: .25rem;
	color: black;
}

.fancybox-button svg {
	background-color: var(--muted-light);
	border-radius: 100%;
	padding: 5px;
}

.fancybox-slide--html .fancybox-close-small,
.fancybox-button--close {
	padding: 13px;
}

.fancybox-button,
.fancybox-button:link,
.fancybox-button:visited {
	background-color: transparent;
}

/* Form */
::-webkit-input-placeholder {
	color: rgb(157, 157, 157);
}

:-moz-placeholder {
	color: rgb(157, 157, 157);
}

::-moz-placeholder {
	color: rgb(157, 157, 157);
}

:-ms-input-placeholder {
	color: rgb(157, 157, 157);
}

.form-message {
	font-size: 0;
	line-height: 0;
	z-index: -9;
	display: none;
	visibility: hidden;
	height: 0;
}

input[type="radio"],
input[type="checkbox"] {
	display: inline-block;
}

input[type="checkbox"],
input[type="radio"] {
	margin: 0;
	position: relative;
	width: .65rem;
	height: .65rem;
	padding: 0;
	vertical-align: middle;
	border: 0;
	background: transparent;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
}

input[type="checkbox"]:before,
input[type="radio"]:before {
	transition: all .5s cubic-bezier(.4, 0, .2, 1);
	font-family: "icon";
	font-size: .75rem;
	line-height: .75rem;
	border: 1px solid rgb(128, 128, 128);
	position: absolute;
	top: -.05rem;
	left: 0;
	display: block;
	overflow: hidden;
	width: 100%;
	height: 100%;
	content: "";
	text-align: center;
}

input[type="checkbox"]:checked:before,
input[type="radio"]:checked:before {
	content: "";
	color: white;
	background-color: var(--primary);
	border: 0;
}

input[type="checkbox"]:disabled:before,
input[type="radio"]:disabled:before {
	color: rgb(103, 134, 157);
	background-color: rgb(235, 240, 242);
}

input:focus::-webkit-input-placeholder {
	color: rgba(0, 0, 0, .35);
}

input:focus:-moz-placeholder {
	color: rgba(0, 0, 0, .35);
}

input:focus::-moz-placeholder {
	color: rgba(0, 0, 0, .35);
}

input:focus:-ms-input-placeholder {
	color: rgba(0, 0, 0, .35);
}

textarea:focus::-webkit-input-placeholder {
	color: rgba(0, 0, 0, .35);
}

textarea:focus:-moz-placeholder {
	color: rgba(0, 0, 0, .35);
}

textarea:focus::-moz-placeholder {
	color: rgba(0, 0, 0, .35);
}

textarea:focus:-ms-input-placeholder {
	color: rgba(0, 0, 0, .35);
}

::selection {
	background: var(--red);
	color: white;
}

::selection {
	background: rgba(255, 87, 20, .8);
	color: white;
}

input[type="text"],
textarea {
	transition: all .5s cubic-bezier(.4, 0, .2, 1);
	line-height: 1;
	z-index: 1;
}

::-webkit-input-placeholder {
	color: var(--muted);
	opacity: .85;
}

::-moz-placeholder {
	color: var(--muted);
	opacity: .85;
}

::-ms-input-placeholder {
	color: var(--muted);
	opacity: .85;
}

.desktop .compensate-for-scrollbar {
	/*margin-right: 0!important;*/
	overflow: hidden;
}

.mCSB_scrollTools .mCSB_draggerRail {
	background-color: rgba(0, 0, 0, .15);
}

.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar {
	background-color: rgba(0, 0, 0, .25);
}

.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar {
	background-color: rgba(0, 0, 0, .5);
	padding-left: 0;
	padding-right: 0;
}

.sod_select:before {
	content: none;
}

.sod_select:after {
	top: 50%;
	bottom: initial;
	transform: translateY(-50%);
	font-size: .8em;
}

:root {
	--quick-bottom: 13vh;
	--quick-right: 20px;
}

#YSF-BTN-HOLDER {
	bottom: var(--quick-bottom) !important;
	right: var(--quick-right) !important;
	max-width: initial !important;
	max-height: initial !important;
	z-index: 99 !important;
}

#YSF-BTN-HOLDER .YSF-CUSTOM-ENTRY {
	width: 45px;
	height: 150px;
	background: url("../image/home/icon-pc-feedback.svg") no-repeat;
	background-size: contain;
	border-radius: 22px !important;
}

#YSF-BTN-HOLDER .YSF-CUSTOM-ENTRY>img {
	display: none;
}

.tns-hot {
	position: fixed;
	top: var(--top-nav);
	right: 0;
	height: calc(100vh - var(--top-nav));
	background: white;
	z-index: -999;
	opacity: 0;
	pointer-events: none;
	box-shadow: 0 0 15px rgba(0, 0, 0, .05)
}

.top-search.active+.tns-hot,
.tns-hot:hover,
.tns-hot:active {
	z-index: 99;
	opacity: 1;
	pointer-events: unset;
}

.tns-hot {
	width: 26rem;
	max-width: 100%;
	color: var(--dark);
	padding: 3rem 0;
}

.tnsh-item a,
.tnsh-item h5 {
	font-size: .8rem;
}

.tnsh-item a {
	display: block;
	color: var(--dark);
	line-height: 2.4;
}

.tnsh-item a:hover {
	color: #0052d9;
	background-color: rgba(240, 240, 240, 0.3);
}

.tnsh-item h5>span {
	display: inline-block;
	padding: 0 1rem;
	height: 1.2rem;
	line-height: 1.2rem;
	border-radius: .6rem;
	border: 1px solid var(--primary)
}

.search-home {
	background: rgb(245, 245, 245)
}

.search-home .top-search {
	padding-left: 0;
}

.seares-words {
	max-width: 40rem;
	width: 100%;
}

.seares-words>input[name="keywords"] {
	width: 100%;
	border: 1px solid var(--primary);
	font-size: 1rem;
	color: var(--muted);
	height: 3rem;
	border-radius: 1.5rem;
	padding-left: 2.25rem;
}

.seares-words.top-search button {
	height: 3rem;
	width: 3rem;
	font-size: 1.5rem;
	color: var(--dark)
}

.ressub-nav.sub-nav a {
	color: var(--dark);
	background: transparent;
	border: 0;
	padding: 0;
}

.ressub-nav.sub-nav a.active {
	color: var(--primary);
}


.fancy-modal {
	display: none;
}

.fancy-contact {
	width: 50rem;
	border-radius: .6rem;
}

.cqf-contact .cfp-item {
	min-height: 3.5rem;
}

.tsn-coop .tsnc-nav .btn-more {
	padding-top: 0;
	margin-left: 0rem;
	margin-right: 2.5rem;
}

.tsn-coop .tsnpi-title {
	color: initial;
}

.tsn-coop .tsnc-item img {
	/* aspect-ratio: 16/9; */
	width: 50%;
	height: 10rem;
}

.tsn-coop .btn-more.tsncf-more {
	margin: 0;
	padding-top: 0
}

.tsn-coop .tsnc-footer {
	flex-grow: 1;
	padding-bottom: 3rem;
}

.ccbs-list {
	aspect-ratio: 19/7
}

.ccbs-list .slick-prev,
.ccbs-list .slick-next {
	z-index: 9;
	transition: opacity .5s;
	opacity: 0;
}

.ccbs-list .slick-prev:before,
.ccbs-list .slick-next:before {
	font-family: "icon";
	font-size: 1.2rem;
}

.ccbs-list .slick-prev {
	left: 2vw;
}

.ccbs-list .slick-next {
	right: 2vw;
}

.ccbs-list .slick-prev:before {
	content: "\e928"
}

.ccbs-list .slick-next:before {
	content: "\e924"
}

.ccbs-list:hover .slick-prev,
.ccbs-list:hover .slick-next {
	opacity: 1;
}

.coopch-nav {
	margin-left: -1rem;
	margin-right: -1rem;
}

.coopch-nav a {
	color: var(--normal);
	margin-left: 1rem;
	margin-right: 1rem;
}

.quick-nav {
	position: fixed;
	display: flex;
	flex-direction: column;
	align-items: center;
	width: 45px;
	bottom: calc(var(--quick-bottom) - 60px);
	right: var(--quick-right);
	z-index: 99;
}

.quick-nav>img {
	z-index: 9;
}

.quick-nav a {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	font-size: 2rem;
	color: var(--gray);
	box-shadow: 0px 6px 10px 0px rgb(0 0 0 / 25%);
	border-radius: 22px;
	overflow: hidden;
}

.quick-nav a:hover {
	color: var(--muted-light);
}

.quick-nav.hide-me a.quick-top {
	pointer-events: none;
	opacity: 0;
}

.quick-nav svg .cls-1 {
	fill: var(--primary)
}

.quick-contact {
	width: 45px;
	height: 150px;
	background: url('../image/home/icon-pc-feedback.svg') no-repeat;
	background-size: 100% auto;
	border-radius: 22px !important;
}

@keyframes fadeUpDown {

	0%,
	100% {
		-webkit-transform: translate3d(0, -10%, 0);
		transform: translate3d(0, -10%, 0);
		opacity: 1
	}

	70% {
		-webkit-transform: translate3d(0, 10%, 0);
		transform: translate3d(0, 10%, 0)
	}
}

.fadeUpDown {
	-webkit-animation-name: fadeUpDown;
	animation-name: fadeUpDown;
	-webkit-animation-iteration-count: infinite;
	animation-iteration-count: infinite;
	-webkit-animation-duration: 2s;
	animation-duration: 2s
}

@media only screen and (max-width:991px) {
	.quick-nav {
		transform: scale(.8);
		transform-origin: right top;
	}

	.quick-contact {
		height: 45px;
	}
}

@media screen and (min-width:768px) {}

@media screen and (min-width:1024px) {}

@media screen and (min-width:1200px) {
	:root {
		--left-pad: 3rem;
	}

	.tnm-con {
		width: 60vw;
	}

	.top-sub-menu {
		width: calc(60vw + var(--left-pad));
	}

	.tsm-products {
		padding-top: 2.5rem;
	}

	.mfcn-left {
		flex: 0 0 30%;
		max-width: 30%;
	}

	.mfcn-right {
		flex: 0 0 70%;
		max-width: 70%;
	}

	.mfcb-left {
		flex: 0 0 30%;
		max-width: 30%;
	}

	.mfcb-right {
		flex: 0 0 70%;
		max-width: 70%;
	}

	.tsm-cooperation {
		padding-top: 3rem;
	}

	.pt-xl-9 {
		padding-top: 9rem !important;
	}

	.pt-xl-8 {
		padding-top: 8rem !important;
	}

	.pt-xl-6 {
		padding-top: 5rem !important;
	}

	.pb-xl-6 {
		padding-bottom: 5rem !important;
	}

	.tns-hot {
		padding: 1.5rem 0;
	}
}

@media screen and (min-width:1400px) {
	.main-footer .mfcon>.col-6:nth-child(odd) {
		flex: 0 0 40%;
		max-width: 40%;
	}

	.main-footer .mfcon>.col-6:nth-child(even) {
		flex: 0 0 60%;
		max-width: 60%;
	}

	.footer-nav-menu dl {
		margin-right: 1rem;
	}

	.top-nav-menu dt {
		padding-left: .5rem;
		padding-right: .5rem;
	}

	.tnm-con {
		width: 54vw;
	}

	.top-sub-menu {
		width: calc(54vw + var(--left-pad) - 0.5rem);
	}

	.tsm-cooperation {
		padding-top: 2rem;
	}

	.tsm-products {
		padding-top: 3.5rem;
	}

	.tsn-prod {
		padding: 0 5.5rem;
	}

	.tsnp-nav {
		margin-bottom: 2rem;
	}

	.tns-hot {
		padding: 2rem 0;
	}
}

@media screen and (min-width:1900px) {
	:root {
		--left-pad: 6.75rem;
		--hprioc-normal: 9.15vw;
		--hprioc-pad: 6rem;
	}

	.tnm-con {
		width: 46vw;
	}

	.top-sub-menu {
		width: calc(46vw + var(--left-pad) - 0.5rem);
	}

	.tsnp-item {
		margin-bottom: 2vh;
	}

	.tsm-cooperation {
		padding-top: 0rem;
	}

	.tns-hot {
		padding: 3rem 0;
	}
}

@media screen and (min-width:2500px) {
	:root {
		--hprioc-normal: 9.5vw;
		--hprooc-det: 20rem;
	}

	.tsm-cooperation {
		padding-top: 0rem;
	}

	.happi-con dd {
		padding: 82% 2rem 1.25rem 2rem
	}

	.happi-title {
		margin-top: 2rem;
		margin-bottom: 2rem !important;
	}

	.happi-det {
		margin-bottom: 2rem;
	}

	.tsnp-item {
		margin-bottom: 6vh;
	}
}

@media screen and (max-width:1440px) {
	.hproi-con {
		padding: 8.5rem 2.25rem 3.5rem 2.25rem;
	}

	.hsci-item:nth-child(odd) dt {
		padding-left: 6rem;
	}

	.hsci-item:nth-child(even) dt {
		padding-right: 6rem;
	}

	.hsupc-nav {
		width: 13rem;
	}

	.hsupc-main {
		margin-left: 13rem;
		padding-left: 6rem;
		padding-right: 2rem;
	}

	.supci-det {
		font-size: 14px;
	}

	:root {
		--quick-right: 5px;
	}
}

@media screen and (max-width:1280px) {
	.fs-17 {
		font-size: .775rem
	}

	.fs-34 {
		font-size: 1.4rem;
	}

	.fs-36 {
		font-size: 1.45rem;
	}

	.fs-56 {
		font-size: 2.4rem;
	}

	.pt-9 {
		padding-top: 5rem;
	}

	.hproi-con {
		padding: 7rem 2.25rem 3.5rem 2.25rem;
	}

	.smart-slogan .com-ani-txt .mfs-l {
		font-size: 2.4rem;
	}
}

ins[data-type="screen"] {
	display: none;
	content: "xs";
	quotes: auto;
}

@media (hover:none) {
	ins[data-type="screen"] {
		quotes: none;
	}
}

ins[data-type="screen"] {
	display: none;
	content: "xs";
}

@media (min-width:768px) {
	ins[data-type="screen"] {
		content: "xs sm";
	}
}

@media (min-width:992px) {
	ins[data-type="screen"] {
		content: "xs sm md";
	}
}

@media (min-width:1200px) {
	ins[data-type="screen"] {
		content: "xs sm md lg";
	}
}

@media (min-width:1400px) {
	ins[data-type="screen"] {
		content: "xs sm md lg xl";
	}
}