.focusArea .tagItem,.planArea .planItem .btn,.planArea .planItem .item,.workArea .workTopPagination .swiper-pagination-bullet,.workArea .workTopSwiper .arrowBtn,.workArea .workTopSwiper .pic img,.serviceArea .tagList .tag,.popWindowArea .close::before,.popWindowArea .close::after,.popWindowArea .close {
	transition: all .5s ease-in-out
}

.bannerArea {
	position: relative;
	overflow: hidden;
	background: #fff;
	min-height: 100vh;
	min-height: 100dvh;
	padding: 60px 0 80px;
	display: flex;
	flex-direction: column;
	justify-content: center
}

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

@media(max-width: 768px) {
	.bannerArea {
		padding: 110px 0 50px
	}
}

.bannerArea .bannerGlow {
	position: absolute;
	top: -300px;
	left: -160px;
	width: 920px;
	height: 920px;
	z-index: 0;
	pointer-events: none;
	background: radial-gradient(circle, rgba(232, 54, 46, 0.3) 0%, rgba(232, 54, 46, 0.13) 34%, rgba(232, 54, 46, 0) 68%)
}

.bannerArea .bannerGlow::after {
	content: "";
	position: absolute;
	top: 120px;
	right: -720px;
	width: 620px;
	height: 620px;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(232, 54, 46, 0.16) 0%, rgba(232, 54, 46, 0) 70%)
}

.bannerArea .wrap {
	width: 100%;
	max-width: 1500px;
	margin: 0 auto;
	padding-left: 15px;
	padding-right: 15px
}

@media(max-width: 1180px) {
	.bannerArea .wrap {
		padding-left: 30px;
		padding-right: 30px
	}
}

@media(max-width: 768px) {
	.bannerArea .wrap {
		padding-left: 20px;
		padding-right: 20px
	}
}

.bannerArea .wrap {
	position: relative;
	z-index: 1;
	width: 100%
}

@media(max-width: 1440px) {
	.bannerArea .wrap {
		max-width: 92vw
	}
}

.bannerArea .bannerHead {
	text-align: center;
	max-width: 920px;
	margin: 0 auto
}

.bannerArea .bannerHead .title {
	font-size: clamp(28px,3.3vw,56px);
	font-weight: 700;
	line-height: 1.25;
	color: #202020;
	margin: 0
}

.bannerArea .bannerHead .title.red {
	background: linear-gradient(90deg, #f04a43 0%, #c4252b 60%, #9c1419 100%);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: rgba(0,0,0,0);
	color: #e8362e
}

.bannerArea .bannerHead .desc {
	margin: 22px auto 0;
	max-width: 820px;
	font-size: clamp(14px,.8vw,16px);
	line-height: 1.9;
	color: #5a5a5a
}

@media(max-width: 768px) {
	.bannerArea .bannerHead .desc {
		font-size: 13px;
		line-height: 1.8
	}
}

.bannerArea .bannerStage {
	position: relative;
	width: 100%;
	max-width: 1460px;
	margin: 55px auto 0
}

@media(max-width: 1024px) {
	.bannerArea .bannerStage {
		margin-top: 40px
	}
}

.bannerArea .editorMock {
	position: relative;
	z-index: 2;
	width: min(72%,1060px);
	margin: 0 auto;
	background: #fff;
	border: 1px solid #ededed;
	border-radius: 16px;
	box-shadow: 0 36px 80px rgba(20,20,20,.14);
	overflow: hidden
}

@media(max-width: 1280px) {
	.bannerArea .editorMock {
		width: min(76%,1060px)
	}
}

@media(max-width: 1024px) {
	.bannerArea .editorMock {
		width: 100%
	}
}

.bannerArea .editorMock.layerHidden .edTree .edEye {
	color: #9aa0aa
}

.bannerArea .editorMock.layerHidden .edTree .edEye .eyeOn {
	display: none
}

.bannerArea .editorMock.layerHidden .edTree .edEye .eyeOff {
	display: inline
}

.bannerArea .editorMock.layerHidden .edScene video {
	opacity: 0
}

.bannerArea .editorMock .edTop {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 11px 16px;
	border-bottom: 1px solid #f1f1f1
}

@media(max-width: 768px) {
	.bannerArea .editorMock .edTop {
		padding: 9px 12px
	}
}

.bannerArea .editorMock .edTools {
	display: flex;
	align-items: center;
	gap: 13px
}

.bannerArea .editorMock .edTool {
	display: block;
	width: 15px;
	height: 15px;
	border-radius: 4px;
	background: #e2e2e2
}

.bannerArea .editorMock .edMenu {
	width: 16px;
	height: 10px;
	border-radius: 0;
	background: linear-gradient(#cfcfcf 2px, transparent 0) 0 0/100% 4px repeat-y;
	background-size: 100% 4px;
	background-image: linear-gradient(#cfcfcf 0 0),linear-gradient(#cfcfcf 0 0),linear-gradient(#cfcfcf 0 0);
	background-repeat: no-repeat;
	background-position: 0 0,0 4px,0 8px;
	background-size: 100% 2px
}

.bannerArea .editorMock .edTabs {
	display: flex;
	gap: 4px;
	padding: 4px;
	background: #f3f3f3;
	border-radius: 9px
}

.bannerArea .editorMock .edTabs span {
	font-size: 12px;
	color: #666;
	padding: 5px 14px;
	border-radius: 6px
}

.bannerArea .editorMock .edTabs span.active {
	background: #fff;
	color: #2a2a2a;
	box-shadow: 0 1px 3px rgba(0,0,0,.08)
}

@media(max-width: 768px) {
	.bannerArea .editorMock .edTabs {
		gap: 2px;
		padding: 3px
	}

	.bannerArea .editorMock .edTabs span {
		font-size: 11px;
		padding: 4px 9px
	}
}

@media(max-width: 560px) {
	.bannerArea .editorMock .edTabs {
		display: none
	}
}

.bannerArea .editorMock .edActions {
	display: flex;
	align-items: center;
	gap: 12px
}

.bannerArea .editorMock .edActions .edShare {
	font-size: 12px;
	color: #fff;
	background: #1b6fc2;
	padding: 6px 14px;
	border-radius: 8px;
	cursor: pointer;
	-webkit-user-select: none;
	-moz-user-select: none;
	user-select: none
}

@media(max-width: 768px) {
	.bannerArea .editorMock .edActions {
		gap: 8px
	}

	.bannerArea .editorMock .edActions .edShare {
		font-size: 11px;
		padding: 5px 11px
	}
}

.bannerArea .editorMock .edActions .edPlay {
	width: 0;
	height: 0;
	border-left: 11px solid #6f6f6f;
	border-top: 7px solid rgba(0,0,0,0);
	border-bottom: 7px solid rgba(0,0,0,0)
}

.bannerArea .editorMock .edBody {
	display: flex;
	height: 500px
}

@media(max-width: 1280px) {
	.bannerArea .editorMock .edBody {
		height: 380px
	}
}

@media(max-width: 560px) {
	.bannerArea .editorMock .edBody {
		height: 300px
	}
}

.bannerArea .editorMock .edPanel {
	flex-shrink: 0;
	padding: 14px 12px
}

.bannerArea .editorMock .edLayers {
	width: 188px;
	border-right: 1px solid #f1f1f1
}

@media(max-width: 900px) {
	.bannerArea .editorMock .edLayers {
		display: none
	}
}

.bannerArea .editorMock .edPanelTitle {
	font-size: 12px;
	color: #707070;
	margin-bottom: 12px;
	padding-left: 6px
}

.bannerArea .editorMock .edTree {
	list-style: none;
	margin: 0;
	padding: 0
}

.bannerArea .editorMock .edTree li {
	display: flex;
	align-items: center;
	gap: 7px;
	font-size: 12px;
	color: #6b6b6b;
	cursor: default;
	padding: 6px 8px;
	border-radius: 6px;
	margin-bottom: 1px
}

.bannerArea .editorMock .edTree li>svg {
	flex: none;
	width: 12px;
	height: 12px;
	color: #6b6b6b
}

.bannerArea .editorMock .edTree li.lv1 {
	padding-left: 18px
}

.bannerArea .editorMock .edTree li.lv2 {
	padding-left: 30px
}

.bannerArea .editorMock .edTree li.active {
	background: #ddf1ff;
	color: #2b5bd7
}

.bannerArea .editorMock .edTree li.active>svg {
	color: #2b5bd7
}

.bannerArea .editorMock .edTree .edLayerName {
	white-space: nowrap
}

.bannerArea .editorMock .edTree .edEye {
	flex: none;
	margin-left: auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 2px;
	border: 0;
	border-radius: 4px;
	background: rgba(0,0,0,0);
	color: #3b6cf6;
	line-height: 0;
	cursor: pointer;
	-webkit-user-select: none;
	-moz-user-select: none;
	user-select: none;
	transition: background .15s ease
}

.bannerArea .editorMock .edTree .edEye svg {
	width: 13px;
	height: 13px
}

.bannerArea .editorMock .edTree .edEye .eyeOff {
	display: none
}

.bannerArea .editorMock .edTree .edEye:hover {
	background: rgba(59,108,246,.14)
}

.bannerArea .editorMock .edCanvas {
	flex: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	margin: 12px;
	padding: 14px 0;
	border-radius: 10px;
	overflow: hidden
}

.bannerArea .editorMock .edCanvas .edCanvasTitle {
	flex: none;
	margin-bottom: 13px;
	font-size: 12px;
	font-weight: 600;
	color: #4a4a4a;
	white-space: nowrap
}

.bannerArea .editorMock .edCanvas .edScene {
	flex: 1;
	width: 95%;
	min-height: 0;
	border-radius: 8px;
	overflow: hidden;
	background: #eef0f3;
	-webkit-user-select: none;
	-moz-user-select: none;
	user-select: none
}

.bannerArea .editorMock .edCanvas video {
	display: block;
	width: 100%;
	height: 100%;
	-o-object-fit: cover;
	object-fit: cover;
	transform-origin: center;
	transition: opacity .35s ease
}

@media(max-width: 1100px) {
	.bannerArea .editorMock .edCanvas video {
		transform: none !important
	}
}

.bannerArea .editorMock .edDesign {
	width: 214px;
	border-left: 1px solid #f1f1f1
}

@media(max-width: 1100px) {
	.bannerArea .editorMock .edDesign {
		display: none
	}
}

.bannerArea .editorMock .edDesignTabs {
	display: flex;
	gap: 18px;
	margin-bottom: 16px
}

.bannerArea .editorMock .edDesignTabs span {
	font-size: 12px;
	color: #9a9a9a;
	padding-bottom: 5px
}

.bannerArea .editorMock .edDesignTabs span.active {
	color: #2a2a2a;
	font-weight: 600;
	border-bottom: 2px solid #2a2a2a
}

.bannerArea .editorMock .edGroup {
	margin-bottom: 16px
}

.bannerArea .editorMock .edGroupTitle {
	font-size: 11.5px;
	font-weight: 600;
	color: #3a3a3a;
	margin-bottom: 10px
}

.bannerArea .editorMock .edField {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	font-size: 11px;
	color: #6b6b6b;
	margin-bottom: 9px
}

.bannerArea .editorMock .edField b {
	font-weight: 500;
	color: #383838
}

.bannerArea .editorMock .edField .edSlider {
	flex: 1;
	position: relative;
	height: 4px;
	border-radius: 2px;
	background: #e9e9e9;
	cursor: grab;
	touch-action: none;
	-webkit-user-select: none;
	-moz-user-select: none;
	user-select: none
}

.bannerArea .editorMock .edField .edSlider:active {
	cursor: grabbing
}

.bannerArea .editorMock .edField .edSlider::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0;
	bottom: 0;
	width: var(--v, 50%);
	border-radius: 2px;
	background: #9a9a9a
}

.bannerArea .editorMock .edField .edSlider::after {
	content: "";
	position: absolute;
	left: var(--v, 50%);
	top: 50%;
	width: 11px;
	height: 11px;
	border-radius: 50%;
	background: #fff;
	border: 2px solid #9a9a9a;
	transform: translate(-50%, -50%)
}

.bannerArea .floatCard {
	position: absolute;
	z-index: 3;
	background: #fff;
	border-radius: 16px;
	box-shadow: 0 22px 55px rgba(20,20,20,.12);
	padding: 18px 20px
}

.bannerArea .floatCard .fcTop {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 10px
}

.bannerArea .floatCard .fcLabel {
	font-size: 13px;
	color: #8a8a8a
}

.bannerArea .floatCard .fcTitle {
	font-size: 14px;
	font-weight: 700;
	color: #202020
}

.bannerArea .floatCard .fcDelta {
	font-size: 12.5px;
	font-weight: 700;
	color: #e8362e;
	text-align: right;
	line-height: 1.3
}

.bannerArea .floatCard .fcDelta small {
	display: block;
	font-weight: 400;
	font-size: 10px;
	color: #aaa
}

.bannerArea .floatCard .fcChip {
	font-size: 10.5px;
	color: #888;
	background: #f2f2f2;
	border-radius: 6px;
	padding: 4px 9px;
	white-space: nowrap
}

.bannerArea .floatCard .fcBig {
	font-size: 34px;
	font-weight: 700;
	color: #202020;
	line-height: 1.1;
	margin-top: 4px
}

.bannerArea .floatCard .fcBig.red {
	color: #e8362e
}

.bannerArea .floatCard .fcNote {
	font-size: 12px;
	color: #9a9a9a
}

.bannerArea .cardViews {
	width: 252px;
	left: -10%;
	top: 5%
}

.bannerArea .cardViews .fcArea {
	display: block;
	width: 100%;
	height: 86px;
	margin-top: 14px
}

.bannerArea .cardViews .fcAxis {
	display: flex;
	justify-content: space-between;
	margin-top: 6px
}

.bannerArea .cardViews .fcAxis span {
	font-size: 8.5px;
	color: #bbb
}

.bannerArea .cardGauge {
	width: 218px;
	left: -5%;
	top: 60%;
	text-align: center
}

.bannerArea .cardGauge .fcTitle {
	display: block
}

.bannerArea .cardGauge .fcBig {
	margin: 6px 0 4px
}

.bannerArea .cardGauge .fcGauge {
	display: block;
	width: 150px;
	height: 90px;
	margin: 4px auto 8px
}

.bannerArea .cardGauge .fcAvatars {
	display: flex;
	align-items: center;
	justify-content: center;
	margin-top: 12px
}

.bannerArea .cardGauge .fcAvatars .fcAvatar {
	width: 30px;
	height: 30px;
	border-radius: 50%;
	border: 2px solid #fff;
	margin-left: -8px;
	background-size: cover;
	background-position: center
}

.bannerArea .cardGauge .fcAvatars .fcAvatar:first-child {
	margin-left: 0
}

.bannerArea .cardGauge .fcAvatars .fcAvatar.a1 {
	background: linear-gradient(135deg, #f3b7a1, #d98c6a)
}

.bannerArea .cardGauge .fcAvatars .fcAvatar.a2 {
	background: linear-gradient(135deg, #f0c0c0, #c98080)
}

.bannerArea .cardGauge .fcAvatars .fcAvatar.a3 {
	background: linear-gradient(135deg, #cfd6e6, #8b9bc0)
}

.bannerArea .cardGauge .fcAvatars .fcAvatar.a4 {
	background: linear-gradient(135deg, #e0c2a8, #b08a64)
}

.bannerArea .cardGauge .fcAvatars .fcMore {
	margin-left: 6px;
	font-size: 11px;
	font-weight: 600;
	color: #e8362e;
	background: #fbe3e3;
	border-radius: 14px;
	padding: 5px 9px
}

.bannerArea .cardSales {
	width: 214px;
	right: -5%;
	bottom: 15%
}

.bannerArea .cardSales .fcLine {
	display: block;
	width: 100%;
	height: 80px;
	margin-top: 8px
}

.bannerArea .cardSales .fcFoot {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-top: 10px
}

.bannerArea .cardSales .fcDots {
	display: flex;
	gap: 5px
}

.bannerArea .cardSales .fcDots i {
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: #ddd
}

.bannerArea .cardSales .fcDots i.on {
	background: #e8362e
}

.bannerArea .floatBadge {
	position: absolute;
	z-index: 4;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 18px
}

.bannerArea .floatBadge svg {
	width: 56%;
	height: 56%
}

.bannerArea .badgeImage {
	width: 66px;
	height: 66px;
	left: 5%;
	top: -25%;
	background: #e8362e;
	box-shadow: 0 14px 30px rgba(232,54,46,.35)
}

.bannerArea .badgeWand {
	width: 64px;
	height: 64px;
	right: 0;
	top: 22%;
	background: #e8362e;
	box-shadow: 0 14px 30px rgba(232,54,46,.35)
}

.bannerArea .badgeSearch {
	width: 60px;
	height: 60px;
	right: -4%;
	top: 18px;
	background: #fff;
	box-shadow: 0 14px 32px rgba(20,20,20,.12)
}

.bannerArea .spark {
	position: absolute;
	z-index: 4;
	width: 32px;
	height: 32px
}

.bannerArea .spark1 {
	left: 6.5%;
	top: -10%
}

.bannerArea .spark2 {
	right: 6.5%;
	top: -15%
}

.bannerArea .floatCard,.bannerArea .floatBadge,.bannerArea .spark {
	opacity: 0;
	animation: bannerFadeIn .8s ease both var(--in, 0.3s),bannerFloat var(--fdur, 7s) ease-in-out infinite calc(var(--in, 0.3s) + .8s)
}

.bannerArea .cardViews {
	--in: 0.35s;
	--fdur: 7.5s
}

.bannerArea .cardGauge {
	--in: 0.5s;
	--fdur: 8.5s
}

.bannerArea .cardSales {
	--in: 0.65s;
	--fdur: 7s
}

.bannerArea .badgeImage {
	--in: 0.55s;
	--fdur: 6.5s
}

.bannerArea .badgeWand {
	--in: 0.7s;
	--fdur: 7.8s
}

.bannerArea .badgeSearch {
	--in: 0.6s;
	--fdur: 6.8s
}

.bannerArea .spark1 {
	--in: 0.8s;
	--fdur: 5.5s
}

.bannerArea .spark2 {
	--in: 0.9s;
	--fdur: 6.2s
}

.bannerArea .editorMock {
	animation: bannerRiseSolid .9s cubic-bezier(0.2, 0.7, 0.2, 1) both
}

.bannerArea .bannerHead .title {
	animation: bannerRiseSolid .8s ease both
}

.bannerArea .bannerHead .desc {
	opacity: 0;
	animation: bannerRise .8s ease .2s both
}

@media(max-width: 1280px) {
	.bannerArea .cardViews {
		left: calc(12% - 260px)
	}

	.bannerArea .cardGauge {
		left: calc(12% - 226px)
	}

	.bannerArea .cardSales {
		right: calc(12% - 222px)
	}
}

@media(max-width: 1024px) {
	.bannerArea .cardViews {
		left: -10px;
		top: 40px
	}

	.bannerArea .cardGauge {
		left: -10px;
		top: 250px
	}

	.bannerArea .cardSales {
		right: -10px;
		bottom: 40px
	}

	.bannerArea .badgeImage {
		left: 6%
	}
}

@media(max-width: 900px) {
	.bannerArea .floatCard,.bannerArea .floatBadge,.bannerArea .spark {
		display: none
	}
}

@media(prefers-reduced-motion: reduce) {
	.bannerArea .floatCard,.bannerArea .floatBadge,.bannerArea .spark,.bannerArea .editorMock,.bannerArea .bannerHead .title,.bannerArea .bannerHead .desc {
		animation: none;
		opacity: 1
	}
}

.popWindowArea {
	position: fixed;
	left: 0;
	top: 0;
	z-index: 500;
	width: 100%;
	height: 100vh;
	height: 100dvh;
	font-size: 15px;
	line-height: 1.8;
	box-sizing: border-box;
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition: all .7s
}

.popWindowArea .popWindowMask {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100dvh;
	background-color: rgba(0,0,0,.7);
	opacity: 0;
	transition: all .7s
}

.popWindowArea .popWindowBox {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, 50%);
	width: 800px;
	max-width: 90%;
	height: 100%;
	max-height: 85vh;
	opacity: 0;
	background-color: #fff;
	transition: all .7s
}

.popWindowArea .popWindowContent {
	height: 100%;
	overflow-y: auto;
	overflow-x: clip
}

.popWindowArea img {
	display: block;
	max-width: 100%;
	height: auto;
	backface-visibility: hidden
}

.popWindowArea .Txt {
	padding: 30px
}

.popWindowArea .close {
	width: 46px;
	height: 46px;
	background-color: #c4252b;
	cursor: pointer;
	position: absolute;
	top: 0;
	right: 0;
	z-index: 1
}

.popWindowArea .close::before,.popWindowArea .close::after {
	content: "";
	position: absolute;
	left: 11px;
	top: 23px;
	width: 25px;
	height: 1px;
	background-color: #fff
}

.popWindowArea .close::before {
	transform: rotate(45deg)
}

.popWindowArea .close::after {
	transform: rotate(-45deg)
}

@media(min-width: 1181px) {
	.popWindowArea .close:hover {
		background-color: #c4252b
	}

	.popWindowArea .close:hover::before {
		transform: rotate(-30deg)
	}

	.popWindowArea .close:hover::after {
		transform: rotate(30deg)
	}
}

.popWindowArea.show {
	opacity: 1;
	visibility: visible;
	pointer-events: auto
}

.popWindowArea.show .popWindowMask,.popWindowArea.show .popWindowBox {
	opacity: 1
}

.popWindowArea.show .popWindowBox {
	transform: translate(-50%, -50%)
}

@media(max-width: 1180px) {
	.popWindowArea .popWindowContent {
		max-height: calc(100vh - 150px);
		max-height: calc(100dvh - 150px)
	}
}

section.workArea,section.aiFeatureArea,section.aiIntroArea,section.serviceArea,section.reviewArea,section.planArea,section.faqArea,section.focusArea {
	content-visibility: auto
}

section.workArea {
	contain-intrinsic-size: auto 3815px
}

section.aiFeatureArea {
	contain-intrinsic-size: auto 1557px
}

section.aiIntroArea {
	contain-intrinsic-size: auto 706px
}

section.serviceArea {
	contain-intrinsic-size: auto 863px
}

section.reviewArea {
	contain-intrinsic-size: auto 3290px
}

section.planArea {
	contain-intrinsic-size: auto 1362px
}

section.faqArea {
	contain-intrinsic-size: auto 1076px
}

section.focusArea {
	contain-intrinsic-size: auto 1879px
}

@media(min-width: 1025px) {
	section.workArea {
		contain-intrinsic-size: auto 4830px
	}

	section.aiFeatureArea {
		contain-intrinsic-size: auto 1084px
	}

	section.aiIntroArea {
		contain-intrinsic-size: auto 765px
	}

	section.serviceArea {
		contain-intrinsic-size: auto 1020px
	}

	section.reviewArea {
		contain-intrinsic-size: auto 3336px
	}

	section.planArea {
		contain-intrinsic-size: auto 861px
	}

	section.faqArea {
		contain-intrinsic-size: auto 1222px
	}

	section.focusArea {
		contain-intrinsic-size: auto 945px
	}
}

.clientArea {
	position: relative;
	overflow-x: clip;
	overflow-y: visible;
	padding: 60px 0 0
}

.clientArea .clientGlowCanvas {
	position: absolute;
	display: block;
	left: 0;
	top: -320px;
	width: 100%;
	height: calc(100% + 640px);
	z-index: 0;
	pointer-events: none;
	opacity: 0;
	transition: opacity .7s ease
}

.clientArea .clientGlowCanvas.is-ready {
	opacity: .5
}

.clientArea .clientList {
	position: relative;
	z-index: 1;
	overflow: hidden;
	white-space: nowrap;
	width: 100%;
	--item-width: 270px;
	--gap: 40px;
	--item-count: 7;
	--total-width: calc( var(--item-width) * var(--item-count) + var(--gap) * (var(--item-count) - 1) )
}

@media(max-width: 1580px) {
	.clientArea .clientList {
		--item-width: 200px
	}
}

.clientArea .clientScroll,.clientArea .clientScroll_02 {
	display: flex;
	gap: var(--gap);
	animation: 40s linear infinite scrollLeft
}

.clientArea .clientScroll_02 {
	animation: 50s linear infinite scrollRight
}

.clientArea .clientItem {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	width: var(--item-width)
}

.clientArea .clientItem img {
	display: block;
	max-width: 100%;
	margin: 0 auto;
	-o-object-fit: contain;
	object-fit: contain
}

.mainArea {
	background-color: #fff;
	padding: 0
}

@media(max-width: 640px) {
	.mainArea {
		overflow-x: clip;
		overflow-y: visible
	}
}

.numSr {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap
}

.numFlow {
	display: inline-flex;
	font-variant-numeric: tabular-nums;
	--numAlign: -0.158em
}

.numFlow .digitCol {
	display: inline-block;
	width: 1ch;
	height: 1em;
	overflow: hidden;
	vertical-align: var(--numAlign);
	-webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 0.12em, #000 calc(100% - 0.12em), transparent 100%);
	mask-image: linear-gradient(to bottom, transparent 0, #000 0.12em, #000 calc(100% - 0.12em), transparent 100%)
}

.numFlow .digitReel {
	display: flex;
	flex-direction: column;
	transform: translateY(0);
	transition: transform 1.8s cubic-bezier(0.22, 1, 0.36, 1)
}

.numFlow .digitReel span {
	display: block;
	height: 1em;
	line-height: 1;
	text-align: center
}

.numFlow.numFlowDown .digitReel {
	transform: translateY(calc(var(--roll) * -1em))
}

.isCounted .numFlow .digitReel {
	transform: translateY(calc(var(--roll) * -1em))
}

.isCounted .numFlow.numFlowDown .digitReel {
	transform: translateY(0)
}

@media(prefers-reduced-motion: reduce) {
	.numFlow .digitReel {
		transition: none
	}
}

.introArea {
	position: relative;
	overflow: hidden;
	padding: 30px 0;
	background-color: #fff;
}

@media(max-width: 768px) {
	.introArea {
		padding: 0px 0 0 0
	}
}

.introArea .introBeamCanvas {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	z-index: 0;
	pointer-events: none;
	opacity: 0;
	transition: opacity .6s ease
}

.introArea .introBeamCanvas.is-ready {
	opacity: 1
}

.introArea .wrap {
	position: relative;
	z-index: 1
}

.introArea .introContent {
	display: flex;
	flex-direction: column;
	gap: 60px;
	max-width: 990px;
	margin: 0 auto
}

@media(max-width: 768px) {
	.introArea .introContent {
		gap: 10px
	}
}

.introArea .titleBox {
	text-align: center;
	margin-bottom: 0
}

.introArea .titleBox .title {
	color: #c4252b;
	font-size: clamp(20px,2.0vw,35px)
}

.introArea .digitalList {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr))
}

@media(max-width: 820px) {
	.introArea .digitalList {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 30px
	}
}


@media(max-width: 639px) {
	.introArea .digitalList {
			display:block;
		grid-template-columns:0;
		gap: 0
	}
}


.introArea .digitalItem {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
}

@media(max-width: 820px) {
	.introArea .digitalItem {
		gap: 10px
	}
}

.introArea .digitalItem p{padding: 15px;font-size: 15px;}


.introArea .digitalItem .title {
	font-size: clamp(14px,.8vw,16px);
	font-weight: 700
}

.introArea .digitalItem .numBox {
	display: flex;
	align-items: baseline;
	gap: 5px
}

.introArea .digitalItem .num {
	font-family: "Roboto";
	font-size: clamp(30px,4.2vw,80px);
	font-weight: 700;
	color: #c4252b;
	text-box-edge: cap alphabetic;
	text-box-trim: trim-both
}

.introArea .digitalItem .unit {
	font-size: clamp(18px,.8.5vw,24px);
	color: #c4252b;
}

.introArea .desc {
	color: #3f3f3f;
	font-size: clamp(14px,.8vw,16px);
	line-height: 2;
	text-align: center
}

.serviceArea {
	padding: 60px 0 40px;
	width: 100%;
	background: url(../images/youshi_bg.jpg) no-repeat top right;
}

@media(max-width: 640px) {
	.serviceArea {
		padding: 30px 0 20px 0
	}
}

.serviceArea .topBox .wrap {
	width: 100%;
	max-width: 1300px;
	margin: 0 auto;
	padding-left: 50px;
	padding-right: 50px
}

@media(max-width: 1180px) {
	.serviceArea .topBox .wrap {
		padding-left: 30px;
		padding-right: 30px
	}
}

@media(max-width: 768px) {
	.serviceArea .topBox .wrap {
		padding-left: 20px;
		padding-right: 20px
	}
}

.serviceArea .topBox .wrap {
	display: flex;
	flex-wrap: wrap
}

@media(max-width: 1440px) {
	.serviceArea .topBox .wrap {
		max-width: 90vw
	}
}


@media(max-width: 768px) {
	.serviceArea .topBox .wrap {
		max-width: 100vw
	}
}

.serviceArea .leftItem {
	width: 100%;
	text-align: center
}

@media(max-width: 640px) {
	.serviceArea .leftItem .titleBox {
		margin-bottom: 20px
	}
}

.serviceArea .leftItem .titleBox .title {
	font-size: clamp(26px,2.08vw,40px);
	font-weight: 700;
	color: #202020;
	line-height: 1.4
}

.serviceArea .leftItem .titleBox .title span {
	color: #c4252b
}

.serviceArea .leftItem .titleBox .note {
	font-size: 16px
}

.serviceArea .leftItem .titleBox .note .text {
	position: relative;
	padding-bottom: 12px;
	margin-bottom: 12px;
	font-size: clamp(14px,.8vw,16px);
	line-height: 1.8;
	color: #3f3f3f;
}

.serviceArea .leftItem .titleBox .note .text::after {
	content: "";
	position: absolute;
	left: 50%;
	bottom: 0;
	margin-left: -5px;
	width: 10px;
	height: 3px;
	background-color: #bb1b21
}

.serviceArea .tagList {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	-moz-column-gap: 12px;
	column-gap: 12px;
	row-gap: 14px;
	max-width: 1200px;
	margin: 0 auto 10px
}

.serviceArea .tagList .tag {
	font-weight: 600;
	font-size: clamp(16px,.8.5vw,20px);
	color: #343434;
	border-radius: 168px;
	background: #fff;
	box-shadow: 0 0 5px 0 rgba(0,0,0,.13);
	padding: 10px 24px;
	cursor: pointer
}

@media(min-width: 1181px) {
	.serviceArea .tagList .tag:hover {
		color: #fff;
		background-color: #c4252b
	}
}

.serviceArea .tagList .tag.current {
	color: #fff;
	background-color: #c4252b
}

@media(max-width: 1024px) {
	.serviceArea .tagList {
		flex-wrap: nowrap;
		justify-content: flex-start;
		overflow-x: auto;
		overflow-y: hidden;
		-webkit-overflow-scrolling: touch;
		scroll-snap-type: x mandatory;
		scrollbar-width: none;
		max-width: 100%;
		padding: 4px 15px
	}

	.serviceArea .tagList::-webkit-scrollbar {
		display: none
	}

	.serviceArea .tagList .tag {
		flex: 0 0 auto;
		white-space: nowrap;
		scroll-snap-align: center
	}
}

.serviceArea .cardWrap {
	position: relative;
	max-width: 1280px;
	margin: 0 auto;
	overflow: hidden
}

.serviceArea .cardWrap .decoNum {
	position: absolute;
	right: 7%;
	bottom: 60px;
	z-index: 2;
	color: rgba(0,0,0,0);
	-webkit-text-stroke-width: 1px;
	-webkit-text-stroke-color: #ebebeb;
	font-family: Inter;
	font-size: clamp(100px,8vw,156px);
	font-weight: 600;
	letter-spacing: -3.12px;
	text-box-edge: cap alphabetic;
	text-box-trim: trim-both;
	pointer-events: none;
	-webkit-user-select: none;
	-moz-user-select: none;
	user-select: none
}

@media(max-width: 640px) {
	.serviceArea .cardWrap .decoNum {
		display: none
	}
}

.serviceArea .slick-list {
	padding: 40px
}

@media(max-width: 1024px) {
	.serviceArea .slick-list {
		padding: 40px 20px
	}
}

@media(max-width: 640px) {
	.serviceArea .slick-list {
		padding: 0;
		overflow: visible
	}
}

.serviceArea .cardSlider:not(.slick-initialized)>.itemCard:not(:first-child) {
	display: none
}

.serviceArea .navArrows {
	display: none
}

@media(max-width: 640px) {
	.serviceArea .navArrows {
		display: flex;
		justify-content: flex-end;
		gap: 12px;
		margin-top: 20px
	}
}

.serviceArea .navArrows .navArrow {
	width: 40px;
	height: 40px;
	border-radius: 50%;
	border: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	color: #fff;
	background-color: #8a8a8a
}

.serviceArea .navArrows .navArrow svg {
	display: block
}

.serviceArea .navArrows .navArrow:disabled {
	opacity: .4;
	cursor: not-allowed
}

@media(min-width: 1181px) {
	.serviceArea .navArrows .navArrow:hover {
		filter: brightness(0.95)
	}
}

.serviceArea .itemCard {
	max-width: 1280px
}

.serviceArea .itemCard .item {
	width: 100%;
	display: grid;
	grid-template-columns: 44% minmax(0, 1fr);
	align-items: center;
	min-height: 455px;
	border-radius: 34px;
	background: #fff;
	box-shadow: 0 0 35.9px 0 rgba(0,0,0,.07);
	position: relative;
	overflow: hidden
}

@media(max-width: 1024px) {
	.serviceArea .itemCard .item {
		grid-template-columns: 1fr
	}
}

@media(max-width: 640px) {
	.serviceArea .itemCard .item {
		background: hsla(0,0%,100%,.6);
		border: 1px solid rgba(0,0,0,.1);
		box-shadow: none
	}
}

.serviceArea .itemCard .Img {
	font-size: 0;
	height: 100%;
	border-radius: 34px 0 0 34px;
	border-radius: 34px 0 0 34px;
	background: linear-gradient(180deg, rgba(255, 255, 255, 0) 21.15%, #f5d2d2 100%)
}

@media(max-width: 1024px) {
	.serviceArea .itemCard .Img {
	
	}
}

.serviceArea .itemCard .Img img {
	-webkit-user-select: none;
	-moz-user-select: none;
	user-select: none;
	width: 100%;
	height: 100%;
	display: block;
	-o-object-fit: cover;
	object-fit: cover
}

.serviceArea .itemCard .Txt {
	padding: 50px 60px;
	height: 100%
}

@media(max-width: 1024px) {
	.serviceArea .itemCard .Txt {
		padding: 40px 60px
	}
}

@media(max-width: 640px) {
	.serviceArea .itemCard .Txt {
		padding: 10px 10px
	}
}

.serviceArea .itemCard .topBox {
	display: flex;
	align-items: center;
	gap: 20px;
	margin-bottom: 20px
}

.serviceArea .itemCard .topBox .icon {
	width: 88px;
	height: 88px;
	aspect-ratio: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: #cf253e;
	border-radius: 9px;
	-webkit-user-select: none;
	-moz-user-select: none;
	user-select: none
}

@media(max-width: 1024px) {
	.serviceArea .itemCard .topBox .icon {
		width: 66px;
		height: 66px
	}
}

@media(max-width: 640px) {
	.serviceArea .itemCard .topBox .icon {
		width: 40px;
		height: 40px
	}
}

@media(max-width: 640px) {
	.serviceArea .itemCard .topBox .icon img {
		max-width: 80%;
		height: auto
	}
}

.serviceArea .itemCard .topBox .title {
	color: #2a2a2a;
	font-size: clamp(20px,1.5vw,34px);
	font-weight: 700;
	line-height: 1.4
}

@media(min-width: 641px)and (max-width: 1024px) {
	.serviceArea .itemCard .topBox .title br {
		display: none
	}
}

.serviceArea .itemCard .subtitle {
	color: #606060;
	font-size: clamp(16px,1vw,20px);
	font-weight: 500;
	line-height: 25px;
	letter-spacing: 1px;
	margin-bottom: 20px
}

@media(max-width: 640px) {
	.serviceArea .itemCard .subtitle {
		margin-bottom: 10px
	}
}

.serviceArea .itemCard .text {
	color: #343434;
	font-size: clamp(14px,.8vw,16px);
	font-weight: 400;
	line-height: 1.6;
	font-size: 15px;
}

.serviceArea .itemCard .bottomBox {
	margin-top: 30px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	width: 120px;
	color: #939393;
	font-family: Inter;
	font-size: 14px;
	font-style: normal;
	font-weight: 600;
	letter-spacing: .28px
}

.serviceArea .itemCard .bottomBox .divider {
	flex-grow: 1;
	height: 1px;
	background-color: rgba(0,0,0,.2)
}

.workArea {
	padding: 100px 0
}

@media(max-width: 820px) {
	.workArea {
		padding: 20px 0
	}
}

.workArea .wrap {
	width: 100%;
	max-width: 1500px;
	margin: 0 auto;
	padding-left: 50px;
	padding-right: 50px
}

@media(max-width: 1180px) {
	.workArea .wrap {
		padding-left: 30px;
		padding-right: 30px
	}
}

@media(max-width: 768px) {
	.workArea .wrap {
		padding-left: 20px;
		padding-right: 20px
	}
}

.workArea .titleBox {
	text-align: center;
	margin-bottom: 60px
}

@media(max-width: 820px) {
	.workArea .titleBox {
		margin-bottom: 30px
	}
}

.workArea .titleBox .title {
	font-size: clamp(26px,2.08vw,40px);
	font-weight: 700;
	color: #202020;
	line-height: 1.4
}

.workArea .titleBox .title span {
	color: #c4252b
}

.workArea .titleBox .text {
	font-size: clamp(14px,.8vw,18px);
	color: #343434;
	line-height: 1.8;
	max-width: 900px;
	margin: 20px auto 0;
	padding-top: 0
}

.workArea .titleBox .text strong {
	color: #c4252b
}

.workArea .workTopArea {
	position: relative;
	margin-bottom: 60px
}

@media(max-width: 640px) {
	.workArea .titleBox .text{margin-top: 10px;line-height: 1.6;}
	.workArea .workTopArea {
		margin-bottom: 10px
	}
}

.workArea .workTopSwiper {
	width: 100%;
	padding-bottom: 30px;
	overflow: hidden
}

.workArea .workTopSwiper .swiper-wrapper {
	align-items: center
}

.workArea .workTopSwiper .swiper-slide {
	width: clamp(280px,56vw,817px);
	height: auto;
	opacity: .45;
	transform: scale(0.86);
	transition: transform .5s ease,opacity .5s ease
}

.workArea .workTopSwiper .swiper-slide.swiper-slide-active {
	opacity: 1;
	transform: scale(0.9)
}

@media(max-width: 820px) {
	.workArea .workTopSwiper .swiper-slide.swiper-slide-active {
		transform: scale(1)
	}
}

.workArea .workTopSwiper .card {
	background: #fff;
	border-radius: 15px;
	box-shadow: 0 4px 24px 5px rgba(0,0,0,.06);
	padding: clamp(14px,2vw,28px) clamp(16px,2.7vw,40px) 0;
	overflow: hidden
}

.workArea .workTopSwiper .pic {
	display: block;
	font-size: 0;
	aspect-ratio: 405/280;
	border-radius: 15px;
	overflow: hidden
}

.workArea .workTopSwiper .pic img {
	display: block;
	width: 100%;
	height: 100%;
	-o-object-fit: cover;
	object-fit: cover;
	-webkit-user-select: none;
	-moz-user-select: none;
	user-select: none
}

.workArea .workTopSwiper .info {
	display: grid;
	grid-template-rows: 0fr;
	margin-top: 0;
	padding: 0;
	border-top: 1px solid rgba(0,0,0,0);
	opacity: 0;
	visibility: hidden;
	transition: grid-template-rows .5s cubic-bezier(0.25, 1, 0.5, 1) .6s,margin-top .5s cubic-bezier(0.25, 1, 0.5, 1) .6s,padding .5s cubic-bezier(0.25, 1, 0.5, 1) .6s,border-color .3s ease,opacity .3s ease,visibility 0s 1.1s
}

.workArea .workTopSwiper .infoInner {
	min-height: 0;
	overflow: hidden;
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	
}

.workArea .workTopSwiper .swiper-slide-active .info {
	grid-template-rows: 1fr;
	margin-top: clamp(18px,2vw,28px);
	padding: clamp(12px,1vw,20px) 0 clamp(18px,2vw,40px);
	border-top-color: rgba(0,0,0,.1);
	opacity: 1;
	visibility: visible;
	transition: grid-template-rows .6s cubic-bezier(0.25, 1, 0.5, 1),margin-top .6s cubic-bezier(0.25, 1, 0.5, 1),padding .6s cubic-bezier(0.25, 1, 0.5, 1),border-color .3s ease,opacity .45s ease .15s,visibility 0s
}

@media(prefers-reduced-motion: reduce) {
	.workArea .workTopSwiper .info,.workArea .workTopSwiper .swiper-slide-active .info {
		transition: none
	}
}

.workArea .workTopSwiper .textBox {
	flex: 1 1 auto;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 12px;
	text-align: left
}

.workArea .workTopSwiper .tagList {
	display: flex;
	align-items: center;
	gap: 16px;
	color: #323232;
	font-size: clamp(15px,1vw,20px);
	line-height: 1.3;
	text-box-edge: cap alphabetic;
	text-box-trim: trim-both
}

.workArea .workTopSwiper .tagList span {
	white-space: nowrap
}

.workArea .workTopSwiper .tagList .sep {
	flex-shrink: 0;
	display: inline-flex;
	width: 1.1em;
	height: 1.1em;
	color: #c4252b
}

.workArea .workTopSwiper .tagList .sep svg {
	display: block;
	width: 100%;
	height: 100%
}

@media(max-width: 640px) {
	.workArea .workTopSwiper .tagList {
		gap: 8px
	}
}

.workArea .workTopSwiper .info .title {
	font-size: clamp(14px,1.25vw,24px);
	font-weight: 700;
	color: #000;
	line-height: 1;
	text-box-edge: cap alphabetic;
	text-box-trim: trim-both
}

.workArea .workTopSwiper .arrowBtn {
	flex: 0 0 auto;
	width: clamp(35px,4.53vw,60px);
	height: clamp(35px,4.53vw,60px);
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background-color: #c4252a;
	color: #fff;
	text-decoration: none
}

.workArea .workTopSwiper .arrowBtn svg {
	display: block;
	width: 50%;
	height: 50%
}

@media(min-width: 1181px) {
	.workArea .workTopSwiper .arrowBtn:hover {
		background-color: #a81d23
	}
}

.workArea .workTopPagination {
	position: static;
	margin-top: 20px;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 15px
}

.workArea .workTopPagination .swiper-pagination-bullet {
	width: 17px;
	height: 4px;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 4px;
	background-color: #d0d0d0;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	cursor: pointer;
	opacity: 1
}

.workArea .workTopPagination .swiper-pagination-bullet-active {
	width: 29px;
	background-color: #c4252a
}

.workArea .workTopPagination.swiper-pagination-lock {
	display: none
}

.workArea .workList {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: clamp(28px,3vw,45px) clamp(18px,2.4vw,36px);
	width: 100%;
	max-width: 1340px;
	margin: 0 auto;
	padding: 0 15px
}

@media(max-width: 768px) {
	.workArea .workList {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 30px 20px
	}
}

.workArea .workList .workItem {
	display: block;
	text-decoration: none
}

.workArea .workList .workItem .pic {
	display: block;
	border-radius: 10px;
	overflow: hidden;
	font-size: 0;
	aspect-ratio: 405/280;
	background-color: #e1e1e1;
	background-size: 400% 100%;
	background-image: linear-gradient(135deg, #e1e1e1, #e1e1e1, #e1e1e1, #e1e1e1, #f6f6f6, #e1e1e1, #e1e1e1, #e1e1e1, #e1e1e1);
	animation: imgLoading .9s ease infinite
}

.workArea .workList .workItem .pic.is-loaded {
	animation: none;
	background: none
}

.workArea .workList .workItem .pic img {
	display: block;
	width: 100%;
	height: 100%;
	-o-object-fit: cover;
	object-fit: cover;
	opacity: 0;
	transition: opacity .4s ease,transform .5s ease-in-out
}

.workArea .workList .workItem .pic img.is-loaded {
	opacity: 1
}

.workArea .workList .workItem .info {
	padding-top: 18px
}

.workArea .workList .workItem .info .title {
	font-size: clamp(16px,1vw,20px);
	font-weight: 500;
	color: #000;
	line-height: 1.3;
	text-box-edge: cap alphabetic;
	text-box-trim: trim-both
}

.workArea .workList .workItem .line {
	display: block;
	height: 1px;
	margin: 12px 0;
	background-color: rgba(0,0,0,.1)
}

.workArea .workList .workItem .tagList {
	display: flex;
	align-items: center;
	gap: 10px;
	color: #323232;
	font-size: clamp(14px,.8vw,16px);
	line-height: 1.3
}

.workArea .workList .workItem .tagList>span {
	white-space: nowrap
}

.workArea .workList .workItem .tagList .sep {
	flex: 0 0 auto;
	display: inline-flex;
	width: 1.1em;
	height: 1.1em;
	color: #c4252b
}

.workArea .workList .workItem .tagList .sep svg {
	display: block;
	width: 100%;
	height: 100%
}

@media(min-width: 1181px) {
	.workArea .workList .workItem:hover .pic img {
		transform: scale(1.05)
	}

	.workArea .workList .workItem:hover .info .title {
		color: #c4252b
	}
}

.workArea .workList+.btnBox {
	margin-top: 60px
}

@media(max-width: 820px) {
	.workArea .workList+.btnBox {
		margin-top: 30px
	}
}

.workArea .workList+.btnBox .btn {
	margin: 0 auto
}

.planArea {
	padding: 100px 0 140px;
	background-color: #fafafa;
	position: relative;
	overflow: hidden
}

@media(max-width: 820px) {
	.planArea {
		padding: 60px 0
	}
}

.planArea .planGlowCanvas {
	position: absolute;
	display: block;
	left: 0;
	top: -320px;
	width: 100%;
	height: calc(100% + 640px);
	z-index: 0;
	pointer-events: none;
	opacity: 0;
	transition: opacity .7s ease
}

.planArea .planGlowCanvas.is-ready {
	opacity: .5
}

.planArea .wrap {
	width: 100%;
	max-width: 1500px;
	margin: 0 auto;
	padding-left: 50px;
	padding-right: 50px
}

@media(max-width: 1180px) {
	.planArea .wrap {
		padding-left: 30px;
		padding-right: 30px
	}
}

@media(max-width: 768px) {
	.planArea .wrap {
		padding-left: 20px;
		padding-right: 20px
	}
}

.planArea .wrap {
	position: relative;
	z-index: 1
}

.planArea .titleBox {
	text-align: center;
	margin-bottom: 0
}

.planArea .titleBox .title {
	font-size: clamp(26px,2.08vw,40px);
	font-weight: 700;
	color: #202020;
	margin-bottom: 10px
}

.planArea .titleBox .title span {
	color: #c4252b
}

.planArea .titleBox .text {
	font-size: clamp(14px,.8vw,16px);
	text-align: center;
	color: #3f3f3f;
	line-height: 1.8;
	padding-top: 0
}

.planArea .planList {
	position: relative;
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	align-items: start;
	max-width: 1260px;
	margin: 60px auto 0;
	z-index: 5
}

@media(max-width: 1040px) {
	.planArea .planList {
		gap: 20px;
		margin: 30px auto 0
	}
}

@media(max-width: 640px) {
	.planArea .planList {
		gap: 0;
		grid-template-columns: minmax(0, 1fr)
	}
}

.planArea .planItem {
	padding: 0 15px;
	align-self: stretch
}

@media(max-width: 1040px) {
	.planArea .planItem {
		margin-bottom: 30px;
		padding: 0
	}
}

.planArea .planItem:nth-child(1) .item {
	background-image: linear-gradient(180deg, #fff 0%, #f3eff0 100%)
}

.planArea .planItem:nth-child(2) .item {
	background-image: linear-gradient(180deg, #fff 0%, #eef0f4 100%)
}

.planArea .planItem .item {
	height: 100%;
	padding: clamp(36px,3.6vw,55px) clamp(28px,4vw,60px);
	border-radius: 30px;
	box-shadow: 0 0 36px 0 rgba(0,0,0,.07);
	display: flex;
	flex-direction: column;
	justify-content: space-between
}

@media(max-width: 660px) {
	.planArea .planItem .item {
		padding: 36px 30px;
		border-radius: 20px
	}
}

.planArea .planItem .title {
	font-size: clamp(22px,1.5vw,30px);
	font-weight: 600;
	color: #202020;
	text-align: center;
	margin-bottom: 25px
}

.planArea .planItem .title u {
	color: #c4252b;
	text-decoration: none
}

.planArea .planItem .line {
	width: 100%;
	height: 1px;
	background-color: #e5e5e5;
	margin: 25px 0;
	position: relative
}

@media(max-width: 660px) {
	.planArea .planItem .line {
		margin: 18px 0
	}
}

.planArea .planItem .line--accent::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0;
	width: 33px;
	height: 1px;
	background-color: #c4252b
}

.planArea .planItem .priceRow {
	display: flex;
	align-items: center;
	gap: 20px
}

.planArea .planItem .price {
	flex-shrink: 0;
	display: flex;
	align-items: baseline;
	gap: 4px;
	font-family: Inter,sans-serif
}

.planArea .planItem .price .num {
	font-size: clamp(30px,2.6vw,54px);
	font-weight: 700;
	color: #c4252b
}

.planArea .planItem .price .num .numFlow {
	--numAlign: -0.14em
}

.planArea .planItem .price .unit {
	font-size: 15px;
	font-weight: 700;
	color: #a6a6a6;
	letter-spacing: .05em;
	white-space: nowrap
}

.planArea .planItem .highlight {
	flex: 1;
	min-width: 0;
	text-align: right
}

.planArea .planItem .highlight .headline {
	font-size: clamp(17px,1.2vw,22px);
	font-weight: 600;
	color: #2c2c2c;
	letter-spacing: .05em;
	margin-bottom: 6px
}

.planArea .planItem .highlight .sub {
	font-size: 14px;
	color: #353535;
	letter-spacing: .05em;
	line-height: 1.5
}

.planArea .planItem .text {
	font-size: clamp(14px,.8vw,16px);
	color: #616161;
	line-height: 1.8
}

.planArea .planItem .btnGroup {
	display: flex;
	gap: 10px;
	margin: 30px 40px 0
}

@media(max-width: 640px) {
	.planArea .planItem .btnGroup {
		flex-direction: column;
		margin: 20px 10px 0
	}
}

.planArea .planItem .btn {
	flex: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-width: 0;
	padding: 18px 10px;
	border: 1px solid rgba(0,0,0,0);
	border-radius: 10px;
	font-size: 16px;
	letter-spacing: .1em;
	text-align: center;
	text-decoration: none;
	white-space: nowrap
}

@media(max-width: 1040px) {
	.planArea .planItem .btn {
		font-size: 14px;
		letter-spacing: .02em;
		padding: 16px 6px
	}
}

.planArea .planItem .btnGhost {
	background-color: #e8e8e8;
	color: #000
}

@media(min-width: 1181px) {
	.planArea .planItem .btnGhost:hover {
		background-color: hsl(0,0%,85.9803921569%)
	}
}

.planArea .planItem .btnDark {
	background-color: #202020;
	border-color: #202020;
	color: #fff
}

@media(max-width: 640px) {
	.planArea .planItem .btnDark {
		background-color: #c4252b;
		border-color: #c4252b
	}
}

@media(min-width: 1181px) {
	.planArea .planItem .btnDark:hover {
		background-color: #c4252b;
		border-color: #c4252b
	}
}

.aiFeatureArea {
	padding: 100px 0;
	background: #fff;
	overflow: hidden
}

@media(max-width: 820px) {
	.aiFeatureArea {
		padding: 50px 0
	}
}

.aiFeatureArea .titleBox {
	text-align: center;
	max-width: 880px;
	margin: 0 auto clamp(40px,4vw,60px)
}

.aiFeatureArea .titleBox .title {
	font-size: clamp(26px,2.08vw,40px);
	font-weight: 700;
	line-height: 1.4;
	color: #c4252b;
	margin-bottom: 22px
}

.aiFeatureArea .titleBox .title .black {
	color: #000
}

.aiFeatureArea .titleBox .subTitle {
	font-size: clamp(15px,1.04vw,20px);
	line-height: 2;
	color: #3f3f3f
}

.aiFeatureArea .featList {
	display: flex;
	align-items: stretch;
	gap: clamp(20px,2.2vw,44px);
	max-width: 1310px;
	margin: 0 auto
}

@media(max-width: 900px) {
	.aiFeatureArea .featList {
		flex-direction: column;
		max-width: 645px
	}
}

.aiFeatureArea .featCard {
	position: relative;
	flex: 1 1 0;
	min-width: 0;
	display: flex;
	flex-direction: column;
	border-radius: 20px;
	padding: clamp(36px,3.4vw,55px) clamp(28px,3vw,45px) 0
}

.aiFeatureArea .cardHead {
	margin-bottom: 25px
}

.aiFeatureArea .cardTitle {
	font-size: clamp(22px,1.5vw,30px);
	font-weight: 700;
	line-height: 1.35;
	letter-spacing: 1.9px;
	margin-bottom: 15px
}

.aiFeatureArea .cardDesc {
	font-size: clamp(15px,.94vw,18px);
	line-height: 1.7
}

.aiFeatureArea .chips {
	display: flex;
	flex-wrap: wrap;
	gap: 13px 18px;
	margin-bottom: 28px
}

.aiFeatureArea .chips li {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	font-size: clamp(14px,.83vw,16px);
	font-weight: 500;
	letter-spacing: .32px
}

.aiFeatureArea .chips .check {
	flex: none;
	width: 20px;
	height: 20px
}

.aiFeatureArea .cardBtns {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-bottom: clamp(28px,2.8vw,40px)
}

.aiFeatureArea .cardBtns .btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 200px;
	height: 60px;
	padding: 0 28px;
	border-radius: 10px;
	font-size: clamp(15px,.94vw,18px);
	letter-spacing: 1.8px;
	white-space: nowrap;
	transition: background .25s ease,transform .25s ease
}

@media(min-width: 1181px) {
	.aiFeatureArea .cardBtns .btn:hover {
		transform: translateY(-2px)
	}
}

@media(max-width: 420px) {
	.aiFeatureArea .cardBtns .btn {
		min-width: 0;
		width: 100%
	}
}

.aiFeatureArea .cardVideo {
	margin-top: auto;
	overflow: hidden;
	background: rgba(0,0,0,.12)
}

.aiFeatureArea .cardVideo video {
	display: block;
	width: 100%;
	height: 100%;
	-o-object-fit: cover;
	object-fit: cover
}

.aiFeatureArea .featCard--seo {
	background: linear-gradient(180deg, #d52941 0%, #d52941 60%, #d8303f 100%);
	color: #fff
}

.aiFeatureArea .featCard--seo .cardTitle,.aiFeatureArea .featCard--seo .cardDesc {
	color: #fff
}

.aiFeatureArea .featCard--seo .chips .check {
	--checkBoxFill: #fff;
	--checkTickStroke: #d52941
}

.aiFeatureArea .featCard--seo .btn--white {
	background: #fff;
	color: #d12542
}

@media(min-width: 1181px) {
	.aiFeatureArea .featCard--seo .btn--white:hover {
		background: #f3e3e5
	}
}

.aiFeatureArea .featCard--seo .btn--dark {
	background: #000;
	color: #fff;
	border: 1px solid #000
}

@media(min-width: 1181px) {
	.aiFeatureArea .featCard--seo .btn--dark:hover {
		background: #232323
	}
}

.aiFeatureArea .featCard--seo .cardVideo {
	margin: auto clamp(8px,1.4vw,26px) clamp(22px,2.4vw,36px);
	aspect-ratio: 650/414;
	border-radius: 14px
}

.aiFeatureArea .featCard--backend {
	background: linear-gradient(180deg, #f6f6f6 0%, #f6f6f6 62%, #f8f8f6 100%);
	color: #000
}

.aiFeatureArea .featCard--backend .cardTitle {
	color: #000
}

.aiFeatureArea .featCard--backend .cardTitle .red {
	color: #c4252b
}

.aiFeatureArea .featCard--backend .cardDesc {
	color: #3f3f3f
}

.aiFeatureArea .featCard--backend .chips {
	color: #262626
}

.aiFeatureArea .featCard--backend .chips .check {
	--checkBoxFill: #c4252b;
	--checkTickStroke: #fff
}

.aiFeatureArea .featCard--backend .btn--red {
	background: #c4252b;
	color: #fff
}

@media(min-width: 1181px) {
	.aiFeatureArea .featCard--backend .btn--red:hover {
		background: #a81d23
	}
}

.aiFeatureArea .featCard--backend .cardVideo {
	width: 100%;
	aspect-ratio: 650/456;
	border-radius: 0 0 20px 20px
}

.aiFeatureArea .floatPill {
	position: absolute;
	left: -7%;
	bottom: 7%;
	z-index: 2;
	display: inline-flex;
	align-items: center;
	border-radius: 40px;
	background: #fff;
	box-shadow: 0 16px 36px rgba(0,0,0,.16);
	white-space: nowrap;
	gap: 0;
	padding: 9px;
	opacity: 0;
	transform: translateY(16px);
	transition: opacity .45s ease,transform .55s cubic-bezier(0.34, 1.5, 0.64, 1),gap .55s cubic-bezier(0.65, 0, 0.35, 1) .4s,padding .55s cubic-bezier(0.65, 0, 0.35, 1) .4s
}

.aiFeatureArea .floatPill.is-active {
	gap: 14px;
	padding: 9px 9px 9px 22px;
	opacity: 1;
	transform: translateY(0)
}

.aiFeatureArea .floatPill.is-active .pillText {
	max-width: 280px;
	opacity: 1
}

@media(max-width: 1180px) {
	.aiFeatureArea .floatPill {
		left: -3%
	}
}

@media(max-width: 900px) {
	.aiFeatureArea .floatPill {
		left: 3%;
		bottom: 4%
	}
}

@media(max-width: 560px) {
	.aiFeatureArea .floatPill {
		display: none
	}
}

.aiFeatureArea .floatPill .pillText {
	font-size: clamp(12px,.73vw,14px);
	color: #333;
	max-width: 0;
	opacity: 0;
	overflow: hidden;
	transition: max-width .55s cubic-bezier(0.65, 0, 0.35, 1) .4s,opacity .45s ease .55s
}

.aiFeatureArea .floatPill .pillArrow {
	flex: none;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	border-radius: 50%;
	background: #c4252b;
	color: #fff
}

.aiFeatureArea .floatPill .pillArrow svg {
	width: 16px;
	height: 16px
}

.aiFeatureArea .floatInsights {
	position: absolute;
	right: -14%;
	top: 50%;
	z-index: 2;
	width: clamp(210px,18vw,280px);
	height: auto;
	pointer-events: none;
	opacity: 0;
	transform: translateY(30px);
	transition: opacity .6s ease,transform .7s cubic-bezier(0.34, 1.3, 0.64, 1)
}

.aiFeatureArea .floatInsights.is-active {
	opacity: 1;
	transform: translateY(0)
}

@media(max-width: 1560px) {
	.aiFeatureArea .floatInsights {
		right: -2%
	}
}

@media(max-width: 1180px) {
	.aiFeatureArea .floatInsights {
		right: -2%;
		width: 240px
	}
}

@media(max-width: 900px) {
	.aiFeatureArea .floatInsights {
		right: 1%;
		top: auto;
		bottom: 4%
	}
}

@media(max-width: 560px) {
	.aiFeatureArea .floatInsights {
		display: none
	}
}

.aiIntroArea {
	position: relative;
	overflow: hidden;
	background: #262626;
	padding: 150px 0 180px
}

@media(max-width: 1024px) {
	.aiIntroArea {
		padding: 80px 0 100px
	}
}

.aiIntroArea::before,.aiIntroArea::after {
	content: "";
	position: absolute;
	border-radius: 50%;
	pointer-events: none;
	z-index: 0;
	filter: blur(160px)
}

.aiIntroArea::before {
	right: -10%;
	top: -40%;
	width: 720px;
	height: 720px;
	background: rgba(255,239,67,.11)
}

.aiIntroArea::after {
	left: -12%;
	bottom: -45%;
	width: 640px;
	height: 640px;
	background: rgba(255,74,67,.16)
}

.aiIntroArea .wrap {
	position: relative;
	z-index: 1
}

.aiIntroArea .aiVideoBox {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: clamp(28px,3.5vw,55px);
	max-width: 1340px;
	margin: 0 auto
}

@media(max-width: 1024px) {
	.aiIntroArea .aiVideoBox {
		flex-direction: column;
		gap: 56px;
		text-align: center
	}
}

@media(max-width: 820px) {
	.aiIntroArea .aiVideoBox {
		gap: 30px
	}
}

.aiIntroArea .leftCol {
	flex: 0 0 auto;
	width: clamp(300px,24vw,330px);
	color: #fff
}

@media(max-width: 1024px) {
	.aiIntroArea .leftCol {
		width: 100%;
		max-width: 520px
	}
}

.aiIntroArea .titleBox {
	margin-bottom: 30px
}

.aiIntroArea .titleBox .title {
	font-size: clamp(26px,2.08vw,40px);
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: 1px;
	margin-bottom: 20px;
	color: #fff
}

.aiIntroArea .titleBox .title span {
	color: #c4252b
}

.aiIntroArea .titleBox .desc {
	font-size: clamp(15px,.95vw,18px);
	line-height: 1.7;
	color: hsla(0,0%,100%,.78)
}

.aiIntroArea .featList {
	list-style: none;
	margin-bottom: 35px
}

.aiIntroArea .featList li {
	display: flex;
	align-items: center;
	gap: 9px;
	font-size: clamp(15px,.9vw,16px);
	font-weight: 500;
	letter-spacing: .3px;
	color: #fff
}

.aiIntroArea .featList li:not(:last-child) {
	margin-bottom: 14px
}

@media(max-width: 1024px) {
	.aiIntroArea .featList li {
		justify-content: center
	}
}

.aiIntroArea .featList .ic {
	flex: none;
	width: 20px;
	height: 20px;
	color: #c4252b
}

.aiIntroArea .featList .ic svg {
	display: block;
	width: 100%;
	height: 100%
}

@media(max-width: 1024px) {
	.aiIntroArea .btnBox {
		display: flex;
		justify-content: center
	}
}

.aiIntroArea .btnBox .btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 240px;
	height: 60px;
	padding: 0 30px;
	border-radius: 10px;
	background: #c4252b;
	color: #fff;
	font-size: 18px;
	letter-spacing: 1.8px;
	transition: background .25s ease,transform .25s ease
}

.aiIntroArea .btnBox .btn:hover {
	background: #a81d23;
	transform: translateY(-2px)
}

.aiIntroArea .rightCol {
	flex: 1 1 auto;
	min-width: 0;
	display: flex;
	justify-content: center
}

@media(max-width: 1024px) {
	.aiIntroArea .rightCol {
		width: 100%
	}
}

.aiIntroArea .deviceWrap {
	position: relative;
	width: 100%;
	max-width: 968px
}

@media(max-width: 1024px) {
	.aiIntroArea .deviceWrap {
		max-width: 560px
	}
}

.aiIntroArea .deviceFrame {
	position: relative;
	aspect-ratio: 906/483;
	padding: 12px;
	border-radius: 32px;
	border: 1px solid rgba(148,148,148,.18);
	background: hsla(0,0%,100%,.02);
	box-shadow: 0 30px 70px rgba(0,0,0,.45)
}

@media(max-width: 820px) {
	.aiIntroArea .deviceFrame {
		border-radius: 8px;
		padding: 8px
	}
}

.aiIntroArea .screen {
	width: 100%;
	height: 100%;
	border-radius: 22px;
	overflow: hidden;
	border: 1px solid rgba(148,148,148,.5);
	background: #111
}

@media(max-width: 820px) {
	.aiIntroArea .screen {
		border-radius: 8px
	}
}

.aiIntroArea .screen video {
	display: block;
	width: 100%;
	height: 100%;
	-o-object-fit: cover;
	object-fit: cover
}

.aiIntroArea .floatTimeline {
	position: absolute;
	left: -18%;
	bottom: -20%;
	width: 55%;
	min-width: 340px;
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 11px 16px;
	border-radius: 14px;
	background: #fafafb;
	box-shadow: 0 12px 34px rgba(0,0,0,.22)
}

@media(max-width: 1100px) {
	.aiIntroArea .floatTimeline {
		left: -8%
	}
}

@media(max-width: 560px) {
	.aiIntroArea .floatTimeline {
		min-width: 0;
		width: 80%;
		left: 4%;
		bottom: -24%;
		gap: 8px;
		padding: 8px 11px;
		border-radius: 11px
	}
}

.aiIntroArea .floatTimeline .tlIcon {
	flex: none;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: 9px;
	background: #f0f0f2;
	color: #404040
}

.aiIntroArea .floatTimeline .tlIcon svg {
	width: 20px;
	height: 20px
}

@media(max-width: 560px) {
	.aiIntroArea .floatTimeline .tlIcon {
		width: 30px;
		height: 30px
	}

	.aiIntroArea .floatTimeline .tlIcon svg {
		width: 15px;
		height: 15px
	}
}

.aiIntroArea .floatTimeline .tlWave {
	position: relative;
	flex: 1 1 auto;
	display: flex;
	align-items: center;
	gap: 2px;
	height: 30px;
	cursor: pointer;
	touch-action: none;
	-webkit-user-select: none;
	-moz-user-select: none;
	user-select: none
}

.aiIntroArea .floatTimeline .tlWave i {
	flex: 1 1 auto;
	min-width: 1px;
	height: calc(8px + var(--h)*22px);
	border-radius: 2px;
	background: #d4d4d6;
	transition: background .1s linear
}

.aiIntroArea .floatTimeline .tlWave i.on {
	background: rgba(196,37,43,.8)
}

.aiIntroArea .floatTimeline .tlPlayhead {
	position: absolute;
	left: 0;
	top: 50%;
	width: 2px;
	height: 30px;
	transform: translate(-50%, -50%);
	background: #c4252b;
	pointer-events: none
}

.aiIntroArea .floatTimeline .tlPlayhead::before {
	content: "";
	position: absolute;
	left: 50%;
	top: -3px;
	width: 7px;
	height: 7px;
	transform: translateX(-50%);
	border-radius: 50%;
	background: #c4252b
}

.aiIntroArea .floatTimeline .tlTime {
	flex: none;
	font-size: 13px;
	color: #555;
	white-space: nowrap
}

@media(max-width: 560px) {
	.aiIntroArea .floatTimeline .tlTime {
		font-size: 11px
	}
}

.aiIntroArea .floatBadge {
	position: absolute;
	right: -2%;
	top: 49%;
	width: 72px;
	height: 72px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 18px;
	background: #fdfdfd;
	box-shadow: 0 12px 30px rgba(0,0,0,.2)
}

@media(max-width: 900px) {
	.aiIntroArea .floatBadge {
		width: 56px;
		height: 56px;
		border-radius: 14px
	}
}

@media(max-width: 560px) {
	.aiIntroArea .floatBadge {
		display: none
	}
}

.aiIntroArea .floatBadge .badgeBox {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 60%;
	height: 60%;
	border: 1px dashed rgba(196,37,43,.45);
	border-radius: 7px;
	color: #c4252b;
	font-size: 20px;
	font-weight: 700
}

@media(max-width: 560px) {
	.aiIntroArea .floatBadge .badgeBox {
		font-size: 14px
	}
}

.aiIntroArea .floatBadge .badgeSpark {
	position: absolute;
	right: 11px;
	top: 13px;
	width: 11px;
	height: 11px;
	color: #c4252b
}

@media(max-width: 560px) {
	.aiIntroArea .floatBadge .badgeSpark {
		right: 7px;
		top: 8px;
		width: 8px;
		height: 8px
	}
}

.aiIntroArea .floatCard {
	position: absolute;
	right: 0;
	bottom: -16%;
	width: -moz-max-content;
	width: max-content;
	max-width: 420px;
	padding: 14px;
	border-radius: 16px;
	background: #fff;
	box-shadow: 0 18px 44px rgba(0,0,0,.28)
}

@media(max-width: 900px) {
	.aiIntroArea .floatCard {
		right: 0;
		bottom: -13%;
		padding: 11px;
		border-radius: 13px
	}
}

@media(max-width: 820px) {
	.aiIntroArea .floatCard {
		display: none
	}
}

.aiIntroArea .floatCard .fcHead {
	display: flex;
	align-items: center;
	gap: 9px;
	margin-bottom: 11px
}

.aiIntroArea .floatCard .fcLogo {
	flex: none;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	border-radius: 8px;
	background: linear-gradient(135deg, #f8625b, #c4252a);
	color: #fff
}

.aiIntroArea .floatCard .fcLogo svg {
	width: 14px;
	height: 14px
}

.aiIntroArea .floatCard .fcTitle {
	font-size: 14px;
	font-weight: 700;
	color: #222
}

@media(max-width: 560px) {
	.aiIntroArea .floatCard .fcTitle {
		font-size: 12px
	}
}

.aiIntroArea .floatCard .fcAssistant {
	display: flex;
	align-items: center;
	gap: 5px;
	margin-left: auto;
	font-size: 11px;
	color: #9a9a9a;
	white-space: nowrap
}

@media(max-width: 560px) {
	.aiIntroArea .floatCard .fcAssistant {
		display: none
	}
}

.aiIntroArea .floatCard .fcAssistant .fcBot {
	display: flex;
	width: 18px;
	height: 18px;
	color: #c4252a
}

.aiIntroArea .floatCard .fcAssistant .fcBot svg {
	width: 100%;
	height: 100%
}

.aiIntroArea .floatCard .fcInput {
	position: relative;
	padding: 13px 14px;
	border: 1px solid #eee;
	border-radius: 10px;
	font-size: 14px;
	color: #333;
	margin-bottom: 12px
}

@media(max-width: 560px) {
	.aiIntroArea .floatCard .fcInput {
		padding: 10px 11px;
		font-size: 12px
	}
}

.aiIntroArea .floatCard .fcCaret {
	display: inline-block;
	width: 1px;
	height: 1.1em;
	margin-left: 2px;
	vertical-align: -2px;
	background: #c4252b;
	animation: aiCaretBlink 1s steps(1) infinite
}

.aiIntroArea .floatCard .fcFoot {
	display: flex;
	align-items: center;
	gap: 8px
}

@media(max-width: 560px) {
	.aiIntroArea .floatCard .fcFoot {
		flex-wrap: wrap;
		row-gap: 8px
	}
}

.aiIntroArea .floatCard .fcChip {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	padding: 7px 10px;
	border-radius: 8px;
	background: #f4f4f5;
	font-size: 12px;
	color: #555;
	white-space: nowrap
}

.aiIntroArea .floatCard .fcChip svg {
	width: 15px;
	height: 15px
}

.aiIntroArea .floatCard .fcChip .fcCaretDown {
	width: 13px;
	height: 13px
}

@media(max-width: 900px) {
	.aiIntroArea .floatCard .fcChip {
		padding: 6px 8px;
		font-size: 11px
	}
}

.aiIntroArea .floatCard .fcGen {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin-left: auto;
	padding: 8px 14px;
	border-radius: 8px;
	background: #c4252b;
	color: #fff;
	font-size: 12px;
	white-space: nowrap
}

.aiIntroArea .floatCard .fcGen svg {
	width: 14px;
	height: 14px
}

@media(max-width: 560px) {
	.aiIntroArea .floatCard .fcGen {
		padding: 7px 10px
	}
}

.aiIntroArea .spark {
	position: absolute
}

.aiIntroArea .spark.spark1 {
	right: -13%;
	top: 64%;
	width: 22px;
	height: 22px;
	color: #828282
}

.aiIntroArea .spark.spark2 {
	left: -3%;
	top: 30%;
	width: 16px;
	height: 16px;
	color: #fff
}

@media(max-width: 900px) {
	.aiIntroArea .spark {
		display: none
	}
}

@keyframes aiCaretBlink {
	0%,50% {
		opacity: 1
	}

	51%,100% {
		opacity: 0
	}
}

.reviewArea .titleBox {
	text-align: center
}

.reviewArea .titleBox .title {
	font-size: clamp(20px,2.08vw,40px)
}

.reviewArea .btnBox {
	margin-top: 70px;
	display: flex;
	justify-content: center
}

@media(max-width: 640px) {
	.reviewArea .btnBox {
		margin-top: 50px
	}
}

.reviewArea .btnBox .btn {
	background-color: #fff;
	color: #c4252b
}

@media(min-width: 1181px) {
	.reviewArea .btnBox .btn:hover {
		background-color: #c4252b;
		color: #fff;
		box-shadow: inset 0 0 0 1px #fff
	}
}



.bannerTopArea .servicesBox {
	margin: 65px auto 0;
	padding-bottom: 10px;
}

@media (max-width:768px) {
	.bannerTopArea .servicesBox {
		margin: 20px auto 0;
		padding-bottom: 20px
	}
}

@media (min-width:1600px) {
.bannerTopArea .servicesBox .wrap {
	max-width: 1400px
}
}
@media (max-width:1667px) {
	
}

@media (max-width:768px) {
	.bannerTopArea .servicesBox .wrap {
		padding-left: 0px;
		padding-right: 0px
	}
}

.bannerTopArea .servicesBox .slick-dots {
	position: relative;
	bottom: 0;
	margin-top: 40px;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center
}

@media (max-width:768px) {
	.bannerTopArea .servicesBox .slick-dots {
		margin-top: 30px
	}
}

.bannerTopArea .servicesBox .slick-dots button:before {
	border: 1px solid #ffffff;
	background-color: transparent
}

.bannerTopArea .servicesBox .slick-dots .slick-active button:before {
	background-color: #ffffff
}

.bannerTopArea .servicesBox .servicesList {
	margin: 0 -15px
}

@media (min-width:1181px) {
	.bannerTopArea .servicesBox .servicesList {
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-ms-flex-wrap: wrap;
		flex-wrap: wrap
	}
}

@media (max-width:1180px) {
	.bannerTopArea .servicesBox .servicesList {
		margin: 0 -10px
	}
}

.bannerTopArea .servicesBox>.servicesItem:not(:first-child) {
	display: none
}

.bannerTopArea .servicesBox .servicesItem {
	padding: 0 15px
}



@media (max-width:768px) {
	.bannerTopArea .servicesBox .servicesItem {
		padding: 10px 30px;
	}
}

@media (min-width:1181px) {
	.bannerTopArea .servicesBox .servicesItem {
		width: 25%
	}

	.bannerTopArea .servicesBox .servicesItem:nth-child(2n) {
		margin-top: 53px
	}
}

@media (min-width:1181px) {
	.bannerTopArea .servicesBox .servicesItem:hover .item {
		-webkit-transform: translateY(53px);
		transform: translateY(53px);
		-webkit-box-shadow: 0 10px 21.8px 3px rgba(93,45,45,0.38);
		box-shadow: 0 10px 21.8px 3px rgba(93,45,45,0.38)
	}

	.bannerTopArea .servicesBox .servicesItem:hover .item:after {
		height: 100%
	}

	.bannerTopArea .servicesBox .servicesItem:hover .Img {
		border-color: #D6D6D6
	}

	.bannerTopArea .servicesBox .servicesItem:hover .Txt {
		color: #2B2B2B
	}
}

.bannerTopArea .servicesBox .item {
	border-radius: 27px;
	border: 1px solid rgba(255,255,255,0.29);
	padding: 25px 22px;
	position: relative;
	-webkit-box-shadow: none;
	box-shadow: none;
	overflow: hidden
}

.bannerTopArea .servicesBox .item:before {
	position: absolute;
	content: "";
	inset: 8px;
	margin: auto;
	border-radius: 23px;
	border: 1px solid rgba(255,255,255,0.64);
	background: rgba(255,255,255,0.18)
}

.bannerTopArea .servicesBox .item:after {
	position: absolute;
	left: 0;
	top: 0;
	content: "";
	width: 100%;
	height: 0;
	background-color: #ffffff
}

.bannerTopArea .servicesBox .Img {
	border-radius: 10px;
	-webkit-transform: translateZ(0);
	transform: translateZ(0);
	overflow: hidden;
	border: 1px solid transparent;
	position: relative;
	z-index: 1
}

.bannerTopArea .servicesBox .Img img {
	width: 100%
}

.bannerTopArea .servicesBox .Txt {
	color: #ffffff;
	padding: 32px 10px 36px;
	position: relative;
	z-index: 1
}

@media (max-width:768px) {
	.bannerTopArea .servicesBox .Txt {
		padding: 20px 10px
	}
}

.bannerTopArea .servicesBox .Txt .title {
	font-size: 27px;
	font-weight: 700;
	line-height: normal;
	letter-spacing: 0.81px
}

@media (max-width:1180px) {
	.bannerTopArea .servicesBox .Txt .title {
		font-size: 25px
	}
}

@media (max-width:768px) {
	.bannerTopArea .servicesBox .Txt .title {
		font-size: 23px
	}
}

.bannerTopArea .servicesBox .Txt .text {
	font-size: 16px;
	font-weight: 400;
	line-height: 1.8125;
	letter-spacing: 0.16px;
	margin-top: 20px;
	margin-left: -4px
}

@media (max-width:1180px) {
	.bannerTopArea .servicesBox .Txt .text {
		font-size: 15px;
		margin-top: 15px
	}
}

@media (max-width:768px) {
	.bannerTopArea .servicesBox .Txt .text {
		margin-top: 10px;font-size: 14px;line-height: 1.6;
	}
}



.bannerTopArea .servicesBox .Img,.bannerTopArea .servicesBox .Txt,.bannerTopArea .servicesBox .item,.bannerTopArea .servicesBox .item:after,.caseArea .caseList .item,.caseArea .caseList .num,.caseArea .caseList .title,.cooperateArea img,.technologyArea .detailList .item,.technologyArea .detailList .item:after,.technologyArea .innerList .dots,.technologyArea .innerList .dots:before,.technologyArea .technologyItem,svg {
	-webkit-transition: all 0.5s ease-in-out;
	transition: all 0.5s ease-in-out
}





.focusArea {
	padding: 50px 0;
	background: linear-gradient(180deg, #fff 0%, #fdf3ef 55%, #fbe9e3 100%)
}

@media(max-width: 820px) {
	.focusArea {
		padding: 20px 0
	}
}

.focusArea .wrap {
	max-width: 1500px
}

.focusArea .titleBox {
	text-align: center;
	max-width: 900px;
	margin: 0 auto clamp(20px,4vw,70px)
}





.focusArea .titleBox .title {
	font-size: clamp(26px,2.08vw,40px);
	font-weight: 700;
	line-height: 1.4;
	color: #c4252b;
	margin-bottom: 25px
}

.focusArea .titleBox .title .black {
	color: #000
}

.focusArea .titleBox .subTitle {
	font-size: clamp(15px,1.04vw,20px);
	line-height: 2;
	color: #3f3f3f
}

.focusArea .focusList {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: clamp(20px,2.4vw,35px)
}

@media(max-width: 820px) {
	.focusArea .focusList {
		grid-template-columns: minmax(0, 1fr);
		max-width: 560px;
		margin: 0 auto
	}
}

.focusArea .focusCard {
	background-color: #fff;
	border-radius: 20px;
	padding: clamp(15px,2.4vw,30px) clamp(10px,1vw,20px);
	box-shadow: 0 20px 50px rgba(196,37,42,.06)
}

.focusArea .focusCard img{max-width: 100%;border-radius: 15px;}


.focusArea .cardTitle {
	font-size: clamp(18px,1.5vw,26px);
	font-weight: 400;
	line-height: 1.6;
	color: #000;
	margin-bottom: 10px;
	margin-top: 15px;
	font-size:18px;
	overflow: hidden;
	  display: -webkit-box;
	  -webkit-line-clamp: 2;
	  -webkit-box-orient: vertical;
	
}

.focusArea .cardTitle .line {
	display: block
}

.focusArea .cardTitle .red {
	color: #c4252b
}

.focusArea .cardText {
	font-size: 15px;
	line-height: 1.8;
	color: #000;
	margin-bottom: 20px;
	overflow: hidden;
	  display: -webkit-box;
	  -webkit-line-clamp: 3;
	  -webkit-box-orient: vertical;
}



@media(max-width: 820px) {
	
	
	.focusArea .cardTitle {
		font-size: clamp(16px,1.5vw,26px);
	
		margin-top: 10px;
		font-size:16px;

		
	}
	
	
	.focusArea .cardText {
		font-size: 14px;
		line-height: 1.6;
		margin-bottom: 10px;	
	}
}



.focusArea .focusCard img.readmore{ display: inline-block; padding-right: 10px; }


.focusArea .tagList {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 13px
}

.focusArea .tagItem {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	max-width: 100%;
	padding: 13px 20px;
	border-radius: 12px;
	background-color: #e8e8e8;
	color: #262626;
	font-size: 16px;
	font-weight: 500;
	letter-spacing: .32px;
	line-height: 1.4;
	text-decoration: none
}

@media(max-width: 1024px) {
	.focusArea .tagItem {
		padding: 14px;
		font-size: 14px
	}
}

.focusArea .tagItem {
	--checkBoxFill: #c4252b;
	--checkTickStroke: #fff
}

.focusArea .tagItem svg {
	flex-shrink: 0;
	width: 20px;
	height: 20px
}

@media(max-width: 1024px) {
	.focusArea .tagItem svg {
		width: 16px;
		height: 16px
	}
}

@media(min-width: 1181px) {
	.focusArea .tagItem:hover {
		background-color: #c4252b;
		color: #fff;
		--checkBoxFill: #fff;
		--checkTickStroke: #c4252b
	}
}


.probox #box{}
	.probox .tabli{
	  padding: 0;
	  margin: 20px 0 10px 0px;
	  display:block;
	  justify-content: left;
	}
	.probox .tabli li{
	  box-sizing: border-box;
	  float: left;
	  text-align: center;
	  list-style: none;
	  cursor: pointer;
	  padding: 7px 10px;
	  margin: 5px 10px;
	  font-weight: normal;
	  font-size: 14px;
	  border-radius: 25px;
	  border: 1px solid #d9d9d9;
	}
	

@media(max-width: 1181px) {
	.probox .tabli{
	  padding: 0;
	  margin: 10px 0 10px 0px;
	  display: block;
	  justify-content: left;
	}
	
	.probox .tabli li{font-size: 14px;float: left;width: 48%;margin: 10px 1%;padding:5px 10px;min-height: 50px;}
	
	}
	
	
	
	.probox .choice{
	background-color: #c4252b; color: #fff;
	}
	.probox .tab-item{
	  display: none;
	  position: relative;
	}
	.probox .show{
	  display: block;
	}
	
	.probox .swiper{overflow: hidden;}
	.probox .swiper-button-next,.probox .swiper-button-prev {
	  position: absolute;
	  top: 50%;
	  width: 50px;
	  height: 50px;
	  margin-top: -50px;
	  z-index: 10;
	  cursor: pointer;
	  background-size: 100% 100%;
	  background-position: center;
	  background-repeat: no-repeat
	}
	
 	/* .probox .swiper-button-prev,.probox .swiper-container-rtl .swiper-button-next {
	  background-image: url("../images/inprobtl1.png")!important;
	  left: -102px;
	  right: auto
	}
	
	.probox .swiper-button-prev:hover,.probox .swiper-container-rtl .swiper-button-next:hover {
	  background-image: url("../images/inprobtl2.png")!important;
	}
	
	.probox .swiper-button-next,.probox .swiper-container-rtl .swiper-button-prev {
	  background-image: url("../images/inprobtr1.png")!important;
	  right: -102px;
	  left: auto
	}
	.probox .swiper-button-next:hover,.probox .swiper-container-rtl .swiper-button-prev:hover {
	  background-image: url("../images/inprobtr2.png")!important;
	} */
	
	.probox .swiper-slide{background-color: #fff;}
	.probox .swiper-slide:hover{background-color: #C4252B;border-radius: 15px;}
	.probox .swiper-slide .imgbox{ padding: 10px;}
	.probox .swiper-slide .imgbox .imgbg{background-origin:content-box;border-radius: 15px;}
	.probox .swiper-slide .imgbox img{background: linear-gradient(rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0.4));}
	.probox .swiper-slide:hover .imgbox{}
	.probox .swiper-slide:hover .imgbox img{background: linear-gradient(rgba(255, 255, 255,0), rgba(255, 255, 255,0));}
	
	.probox .swiper-slide .wordbox{display: flex; border-top: 2px solid #fff; margin: 10px 20px; font-size:1rem; line-height:1.6;color:#6c6c6c; justify-content: space-between; transition: all 0.3s;overflow: hidden;
	  display: -webkit-box;
	  -webkit-line-clamp: 3;
	  -webkit-box-orient: vertical;}
	.probox .swiper-slide:hover .wordbox{border-top: 2px solid #fff; color: #fff;}
	.probox .swiper-slide .wordbox span{display: flex; align-items: center; font-size:16px; color: #545454;}
	.probox .swiper-slide .wordbox span i{background: url("../images/inproicon1.png") no-repeat;height:50px;width:50px;margin-right: 5px;}
	.probox .swiper-slide:hover .wordbox span{color: #fff;}
	.probox .swiper-slide:hover .wordbox span i{background: url("../images/inproicon2.png") no-repeat; }
	
@media(max-width: 768px) {
.probox .swiper-slide .wordbox{ font-size: 14px; }
}

.page-footer{ clear: both;width: 100%; height: 400px;background: url("../images/foot_bg.jpg") no-repeat center top #c4252a;position: relative;}
.page-footer dl {
	float: left;
	width:50%;
	line-height:1.8;
	padding: 0;
	box-sizing: border-box;
}

.clean{ clear: both;}


.page-footer img{max-width: 100%;}


.page-footer dl dd a,.page-footer dl dd { opacity:0.9;color: #fff;padding:0;font-size:15px;line-height: 2;position: relative; width: 100%; float: left; }
.page-footer dl dd:hover{ opacity: 1;color: #fff;   }
.page-footer dl dt {font-size: 18px; color: #fff;line-height: 50px; display: block;margin-top: 35px; }


.page-footer dl dd p{ font-size:15px;width: 100%;  display: block;line-height: 28px; margin-top: 10px;}
.page-footer dl dd p span{display: inline-block; }
.page-footer dl dd p span.f_text1{max-width:80px;width: 25%; float: left; }
.page-footer dl dd p span.f_line1{padding-right:10px;color: #fff;float: left;}
.page-footer dl dd p span.f_text2{color: #fff;width: 70%;float: left;}


.foot_img{float: right;margin-left: 0; width: 30%; margin-top: 35px;  }
.foot_img H2{font-size: 18px; color: #fff;line-height: 50px; display: block; }
	
	.foot_img ul{display: block;}
	.foot_img ul li{ width: 40%; margin: 0 2.5%; float: left;	 }
	.foot_img ul li img{max-width: 100%; display: block; }
	.foot_img ul li p{ font-size:15px; text-align: center; width: 100%; color: #fff;  line-height: 1.8; padding-top: 8px; }
	
	
	@media screen and (max-width:639px) {
	.foot_img{ clear:both; width: 100%; max-width: 60%; float: none; margin: 15px auto;}
	}
	

@media screen and (max-width:1023px) {
.page-footer{ padding: 0 0 200px 0; height: auto!important;}
.page-footer dl{ width: 100%; float: none; }
.page-footer dl img{ max-width:30%;}


.page-footer dl .foot_img img{ max-width: 100%;}

.page-footer dl dd p span.f_line1{display: none; }
.page-footer dl dd p span.f_text1{ }
.page-footer dl dd p span.f_text1{max-width:100px;width: 100%; float: none; }
.page-footer dl dd p span.f_text2{color: #fff;width: 100%;float: none;font-size: 14px;line-height: 1.6;}
.foot_img H2{display: none;}
}

@media screen and (max-width:639px) {
.page-footer dl dd a, .page-footer dl dd{ clear:both; width: 100%;float: none;}
.foot_img ul li p{font-size: 14px;}
}


.banben{ clear: both;width: 100%; height: 60px; background: rgba(0,0,0,.3); line-height: 60px;text-align: center;position: absolute;bottom: 0; }
.banben p,.banben p a{font-size: 15px; color: #fff;}

@media screen and (max-width:639px) {
.banben p, .banben p a{ font-size: 14px; }

}