:root {
	--main-color: #003D8F;
	--point-color: #427CE8;
	--subtitle-color: #767676;
	--background-gray1: #F7F7FB;
	--background-deppgray: #f1f1f5;
	--banner-title: 85px;
	--title: 36px;
	--subtitle: 18px;
	--list-subtitle: 16px;
	--btn-font: 14px;
	--menu-font: 16px;
	--font-24: 24px;
}

body {
	display: flex;
	justify-content: center;
}

.letterSpcing {
	letter-spacing: 0px !important;
}

.flex-Start {
	align-items: flex-start;
}

.container {
	width: 100%;
}

/* ===== section  ===== */

section {
	display: flex;
	flex-direction: column;
	margin: 0 auto;
	align-items: center;
	gap: 40px 0;
	justify-content: center;
	padding: 120px 0;
}

section.one {
	height: inherit;
	width: calc((1400 / 1920)* 100%);
	padding: 150px 0;
}

section.one .textWrap {
	display: flex;
	flex-direction: column;
	justify-content: center;
	text-align: center;
	gap: 20px 0;
}

section .textWrap .title {
	font-size: var(--title);
	color: #111;
	font-weight: 600;
}

section .textWrap .subTitle {
	font-size: var(--subtitle);
	color: var(--subtitle-color);
	line-height: 1.5;
	font-weight: 400;
	letter-spacing: -1.2px;
}

.section .sectionConWrap {
	display: flex;
	flex-direction: column;
	gap: 24px 0;
}

.section .sectionInner {
	width: calc((1400 / 1920)* 100%);
	;
	display: flex;
	align-items: center;
	gap: 0 5%;
}


.section .sectionImg {
	width: 50%;
}

.section .sectionConWrap {
	width: 50%;
}

.section.one .sectionImg {
	width: 100%;
}

.sectionImg {
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
}

.sectionImg img {
	width: 80%;
}

.sectionImg .plusWrap {
	width: 780px;
	height: 500px;
	position: absolute;
	top: 0;
	left: 50%;
	transform: translateX(-50%);
}


.section.one .sectionImg img {
	width: 780px;
	height: 500px;
}

.sectionImg .plusWrap .plus {
	display: flex;
	align-items: center;
	justify-content: start;
	gap: 0 24px;
	position: absolute;
}

.sectionImg .plusWrap .plus:nth-child(1) {
	top: 12%;
	left: 18%;
}

.sectionImg .plusWrap .plus:nth-child(2) {
	top: 40%;
	right: 31%;
}

.sectionImg .plusWrap .plus:nth-child(3) {
	top: 57%;
	left: 65%;
}

.sectionImg .plusWrap .plus:nth-child(4) {
	top: 12%;
	right: 18%;
}


.sectionImg .plusWrap .plus span {
	background: var(--main-color) !important;
	border-radius: 6px;
	cursor: pointer;
	width: 36px;
	height: 36px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.sectionImg .plusWrap .plus span img {
	width: 16px;
	height: 16px;
}

.sectionImg .plusWrap .plus:hover>p.plusScript {
	display: block;
	opacity: 1;
	visibility: visible;
}

.sectionImg .plusWrap .plus p.plusScript {
	padding: 12px;
	width: 14vw;
	background-color: var(--main-color);
	color: #fff;
	border-radius: 13px;
	position: absolute;
	display: none;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.3s ease, visibility 0.3s ease;
	left: 60px;
	font-size: 14px;
	font-weight: 300;
	line-height: 1.5;
}

.sectionImg .plusWrap .plus p.plusScript::before {
	content: "";
	width: 0;
	height: 0;
	position: absolute;
	left: -16px;
	top: 50%;
	transform: translateY(-50%);
	border-style: solid;
	border-width: 10px 16px 10px 0px;
	border-color: transparent var(--main-color) transparent transparent;
}

/* ===== section one: 프로토콜 ===== */

section.one .sectionConWrap {
	width: 100%;
}

section.one .sectionConWrap {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 40px;
	margin-top: 20px;
}

.section.one .sectionConWrap .sectionCon {
	display: flex;
	flex-direction: column;
	align-items: start;
	background-color: #fff;
	border-radius: 6px;
	border: 1px solid #e5e5ec;
	padding: 24px;
}

.section.one .sectionConWrap .sectionCon:nth-child(2n) {
	background: #F3F6FF;
}

.section.one .sectionConWrap .sectionCon:hover {
	transform: translateY(-24px);
	transition: all 1s;
	border: 0;
	box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.3);
}

.section.one .sectionConWrap .sectionCon .icon {
	width: 80px;
	height: 80px;
	background: linear-gradient(to right, #004FB9, #003D8F);
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-left: auto;
}

.section.one .sectionConWrap .sectionCon .icon img {
	width: 42px;
}

.section.one .sectionConWrap .sectionCon .iconTitle {
	text-align: left;
	letter-spacing: -1.2px;
}

.section.one .sectionConWrap .sectionCon .iconTitle a {
	font-size: var(--subtitle);
	color: #111;
	font-weight: 500;
}

.section.one .sectionConWrap .sectionCon .iconSubtitle {
	font-size: var(--list-subtitle);
	color: var(--subtitle-color);
	font-weight: 300;
	text-align: left;
	margin-top: 12px;
	letter-spacing: -1.2px;
	width: 90%;
}

/* ===== section Anthoer */
section.antherone {
	width: 100%;
	height: auto;
	min-height: 0;
}

.antherone .sectionInner {
	background-color: #F3F6FF;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	padding: 48px 0;
}

.sectionInner .sectionContWrap {
	width: calc((1400 / 1920)* 100%);
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: row;
	gap: 0 60px;
}

.sectionContWrap .TextCon {
	display: flex;
	flex-direction: column;
	gap: 40px 0;
	width: 50%;
}

.textWrap .subTitleCenter {
	font-size: var(--subtitle);
	color: var(--subtitle-color);
	font-weight: 400;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	gap: 0;
	line-height: 0.8;
	letter-spacing: -1.2px;
}

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

.TextCon .titleBox {
	font-size: var(--title);
	font-weight: 600;
	color: #111;
	line-height: 1.5;
}

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

.TextCon .BtnBox {
	display: flex;
	justify-content: start;
	align-items: center;
	gap: 0 24px;
}

.BtnBox a {
	display: flex;
	align-items: center;
	justify-content: start;
	text-decoration: none;
	color: inherit;
}

.BtnBox .DemoText {
	color: var(--point-color);
	font-weight: 600;
	transition: 0.3s all;
}

.BtnBox .DemoText:hover {
	color: #111;
}

.BtnBox a .Btn {
	background-color: var(--point-color);
	padding: 20px 80px;
	border-radius: 10px;
	color: #fff;
	display: flex;
	position: relative;
	align-items: center;
	justify-content: center;
	transition: 0.3s all;
	cursor: pointer;
}

.BtnBox a .Btn:hover {
	background-color: #111;
}

.Btn .BtnText {
	position: absolute;
	left: 24px;

}

.Btn .BtnIcon {
	position: absolute;
	right: 24px;
}

.sectionContWrap .ImgCon {
	width: 50%;
	background: url(../../images/Architecture/isometric/Layer.svg);
	background-size: contain;
	background-position: center;
}

.ImgCon .ImgConWrap {
	display: flex;
	flex-direction: column;
	justify-content: center;
}

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

.LineImgCon:nth-child(1),
.LineImgCon:nth-child(3) {
	justify-content: start;

}

.LineImgCon:nth-child(2),
.LineImgCon:nth-child(4) {
	justify-content: end;
}

.LineImgCon .ImgBox {
	width: 100px;
	height: 100px;
	background-color: #fff;
	border-radius: 50px;
	border: solid 1px #111;
	display: flex;
	justify-content: center;
	align-items: center;
}

.LineImgCon .ImgBox img {
	animation: scaleAnimation 2s infinite alternate;
}


.LineImgCon .LineBox {
	width: 75px;
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
}

@keyframes scaleAnimation {
	0% {
		transform: scale(0.85);
	}

	100% {
		transform: scale(0.9);
	}
}

.LineBox .Line {
	width: 100%;
	height: 1px;
	background-color: #111;
	position: absolute;
}

.LineBox .Round {
	width: 10px;
	height: 10px;
	border: solid 1px #111;
	background-color: #fff;
	border-radius: 5px;
	position: absolute;
	animation: RoundMove 2s infinite alternate;
}

@keyframes RoundMove {
	0% {
		transform: translateX(-30px);
	}

	100% {
		transform: translateX(30px);
	}
}

@keyframes imgScale {
	0% {
		transform: (-30px);
	}

	100% {
		transform: translateX(30px);
	}
}

.LineImgCon .TextBox {
	padding: 14px 24px;
	border-radius: 50px;
}

.LineImgCon .TextBox p {
	color: #fff;
	font-weight: 600;
}

.LineImgCon:nth-child(1) .TextBox,
.LineImgCon:nth-child(3) .TextBox {
	background-color: rgba(0, 61, 143, 0.8);

}

.LineImgCon:nth-child(2) .TextBox,
.LineImgCon:nth-child(4) .TextBox {
	background-color: rgba(66, 129, 238, 0.8);
}

/* ===== section anthertwo ===== */
.anthertwo .sectionContWrap {
	width: calc((1400 / 1920)* 100%);
	display: flex;
	align-items: center;
	flex-direction: column;
	justify-content: center;
	gap: 100px 0;
	height: 80vh;
}

.sectionContWrap .AsToConWarp {
	display: flex;
	flex-direction: column;
	gap: 24px 0;
	justify-content: flex-start;
	align-items: center;
	width: 100%;
	height: 100%;
}

.AsToConWarp .AsToCon {
	flex-direction: row;
	display: flex;
	gap: 0 100px;
	align-items: center;
	transition: all 0.5s ease-in-out;
	opacity: 0;
	filter: blur(10px);
	margin-top: 5%;
	position: absolute;
}

.AsToConWarp .AsToCon.Active {
	display: flex;
	filter: blur(0);
	opacity: 1;

}

.AsToCon .AsCon {
	display: flex;
	flex-direction: column;
	padding: 24px;
	border: 1px solid rgba(25, 25, 25, 0.2);
	align-items: center;
	justify-content: start;
	border-radius: 13px;
	gap: 36px;
	width: 398px;
	height: 348px;
	position: relative;
}

.AsToCon .TobeCon {
	display: flex;
	flex-direction: column;
	padding: 24px;
	border: 1px solid rgba(25, 25, 25, 0.2);
	align-items: center;
	justify-content: start;
	border-radius: 13px;
	gap: 36px;
	width: 432px;
	height: 378px;
	position: relative;
	box-shadow: 0 0 20px rgba(20, 20, 20, 0.2);
}

.AsToCon .TobeCon {
	background-color: var(--main-color);
	border: none;
}

.AsCon .AsBoxTitle {
	font-size: var(--font-24);
	color: rgba(25, 25, 25, 0.5);
	font-weight: 600;
}

.TobeCon .TobeBoxTitle {
	font-size: var(--font-24);
	color: #fff;
	font-weight: 600;
}

.AsCon .AsBox,
.TobeCon .TobeBox {
	display: flex;
	flex-direction: column;
	gap: 12px 0;
	width: 100%;

}

.AsToCon .arrowBox {
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
}

.AsToCon .arrowBox img {
	animation: moveLeftToRight 1s infinite alternate;
	transition: all 0.5s ease-in-out;
}

@keyframes moveLeftToRight {
	0% {
		transform: translateX(-20px);
	}

	100% {
		transform: translateX(20px);
	}
}

.arrowBox .arrowtext {
	color: var(--main-color);
	;
	font-weight: 400;
}

.AsToConWarp .selectCon {
	display: flex;
	align-content: center;
	justify-content: center;
}

.selectCon .selector {
	display: flex;
	justify-content: start;
	align-items: center;
	cursor: pointer;
	flex-direction: column;
	gap: 4px 0;
}

.selector .Text {
	width: 100%
}

.selector .Line {
	width: 100%;
}

.Text .selectText {
	font-size: var(--font-24);
	font-weight: 400;
	color: rgba(25, 25, 25, 0.5);
	padding: 12px 24px;
	text-align: center;
}

.Text .selectText:hover {
	font-weight: 600;
}

.selector.Active .Line {
	background-color: var(--main-color);
	;
	transition: all 0.3s ease-in-out;
}

.selector.Active .Text .selectText {
	color: var(--main-color);
	;
	transition: all 0.3s ease-in-out;
}

.selector .Line {
	width: 100%;
	height: 2px;
	background-color: rgba(25, 25, 25, 0.2);
}

.AsToCon .AsLine,
.TobeBox .ToLine {
	display: flex;
	gap: 0 12px;
	align-items: baseline;

}

.AsLine .AsText {
	color: rgba(25, 25, 25, 0.5)
}

.ToLine .ToText {
	color: #fff;
}

/* ===== srction last */
.sectionCondiv {
	display: grid;
	grid-template-columns: repeat(6, 1fr);
	gap: 40px;
	margin-top: 20px;
}


section.four .sectionWrap {
	display: flex;
	flex-direction: column;
	gap: 40px 0;
	width: 100%;
}

section.four .sectionCondiv {
	display: grid;
	width: 100%;
	grid-template-columns: repeat(3, 1fr);
	gap: 0 40px;
	justify-content: center;
}

section.four .sectionCondiv .sectionCon {
	display: flex;
	justify-content: center;
	flex-direction: column;
	align-items: center;
	gap: 24px 0;
}

section.four .sectionCondiv .sectionCon .sectionConImg {
	background: #f4f4f4;
	width: 100%;
	height: 400px;
	display: flex;
	justify-content: center;
	align-items: center;
}

section.four .sectionCondiv .sectionCon .sectionConImg:hover {
	transform: scale(1.1);
	transition: all 1s;
}

section.four .sectionCondiv .sectionCon .modelName,
section.four .sectionCondiv.icon .sectionCon.icon .iconName {
	font-size: var(--subtitle);
	font-weight: 500;
}

.textWrap .TextConWarp {
	display: flex;
	flex-direction: column;
	gap: 24px 0;
	margin-top: 24px;
}

.TextConWarp .Cloud .title,
.TextConWarp .Database .title {
	font-size: var(--font-24);
	font-weight: 600;
	color: var(--main-color)
}

.TextConWarp .Cloud ul,
.TextConWarp .Database ul {
	margin-top: 12px;
	font-size: var(--font);
	font-weight: 300;
	display: flex;
	gap: 0 12px;
}

/* 기본 스타일 */
.sectionCondiv.icon {
	display: flex;
	justify-content: space-between;
	width: calc((1400 / 1920)* 100%);
	;
	gap: 0 40px;
	margin-top: 48px;
	position: relative;
	gap: 0;
	align-items: flex-start;
}

.sectionCondiv.icon::before {
	content: "";
	position: absolute;
	top: 32%;
	left: 40px;
	/* 위치 설정*/
	width: calc(100% - 240px);
	height: 2px;
	/* 두께 */
	background: linear-gradient(to right, #e5e5ec 40%, transparent 40%, transparent 80%, #e5e5ec 80%);
	background-size: 20px 100%;
	/* 대시 크기 */
	background-repeat: repeat;
	/* 대시 반복 */
	z-index: -2;
	left: 120px;
}


.sectionCondiv.icon::after {
	content: "";
	position: absolute;
	top: 30%;
	left: 120px;
	/* 50%에서 왼쪽 끝으로 이동*/
	width: 0%;
	/* 애니메이션 시작 시 너비는 0% */
	height: 8px;
	/*background: #003D8F;*/
	background: linear-gradient(to right, #003D8F 40%, transparent 40%, transparent 80%, #003D8F 80%);
	background-size: 20px 100%;
	/* 대시 크기와 간격 */
	background-repeat: repeat;
	/* 대시 반복 */
	animation: changeBorderColor 8s ease-in-out infinite;
	z-index: -1;
	border-radius: 3px;
}

/* 각 아이콘 설정 */
.sectionCondiv.icon .sectionCon.icon {
	display: flex;
	justify-content: center;
	flex-direction: column;
	align-items: center;
	gap: 24px 0;
	z-index: 9;
	align-items: center;
}

.sectionCondiv.icon .sectionCon.icon:nth-child(2),
.sectionCondiv.icon .sectionCon.icon:nth-child(3) {
	align-items: center;
}

.sectionCondiv.icon .sectionCon.icon:nth-child(4) {
	align-items: center;
}


/* 아이콘 스타일 */
.sectionCondiv.icon .sectionCon.icon span {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 80px;
	height: 80px;
	border-radius: 10px;
	font-size: 40px;
	color: #e5e5ec;
	background-color: #e5e5ec;
	z-index: 9;
}

.sectionCondiv.icon .sectionCon.icon.active span {
	background: linear-gradient(to right, #004FB9, #003D8F);
	color: #fff;
	border: 0;
	opacity: 1;
}

.sectionCondiv.icon .sectionCon.icon span img {
	width: 24px;
}

.sectionCon .iconName {
	font-size: var(--font);
	font-weight: 400;
	text-align: center;
}

/* ===== section two: 프로토콜 ===== */

.section.two {
	width: 100%;
	background-color: var(--point-color);
}

section.two .textWrap .title {
	font-size: var(--title);
	color: #fff;
}

section.two .textWrap .subTitle {
	font-size: var(--subtitle);
	color: #fff;
	line-height: 1.5;
	font-weight: 400;
	letter-spacing: -1.2px;
}

.section.three .sectionInner,
.section.five .sectionInner {
	flex-direction: row-reverse;
	unicode-bidi: plaintext;
}

.section.three .sectionConWrap,
.section.five .sectionConWrap {
	text-align: left;
}

.section .textWrap {
	display: flex;
	flex-direction: column;
	gap: 24px 0;
}

.protocolTitle {
	font-size: 20px;
	color: #fff;
	font-weight: 400;
	margin-top: 16px;
}

.sectionCon.protocol {
	display: flex;
	gap: 0 120px;
}

.sectionCon.protocol ul {
	display: flex;
	flex-direction: column;
	gap: 12px 0;
}

.sectionCon.protocol ul li label a {
	color: rgba(255, 255, 255, 0.8);
}

.sectionCon.protocol ul li label a::before {
	content: "- "
}

.strong {
	color: var(--main-color);
	font-size: var(--font-24);
	margin-top: 16px;
	letter-spacing: -1.2px;
	font-weight: 600;
}

/* ===== section.four : 모니터링 ===== */

.section.four {
	background-color: #f7f7fb;
}

.imageWidth img {
	width: 100% !important;
}