/* 서브 비주얼 이미지 */
#visual .bg1{ background: url("/img/sub/product_bg.png") no-repeat center center / cover; }
#visual .bg2{ background: url("/img/sub/service_bg.png") no-repeat top center / cover; }
#visual .bg3{ background: url("/img/sub/case_bg.png") no-repeat top center / cover; }
#visual .bg4{ background: url("/img/sub/community_bg.png") no-repeat top center / cover; }
#visual .bg5{ background: url("/img/sub/community_bg.png") no-repeat top center / cover; }
#visual .bg6{ background: url("/img/sub/company_bg.png") no-repeat top center / cover; }
#visual .bg10{ background: url("/img/sub/service_bg.png") no-repeat top center / cover; }


/* visual */
#visual{ text-align: center; position: relative; overflow: hidden; }
#visual .bg{ min-height: 270px; padding-bottom: 37.9405%; }
#visual .text-box{ position: absolute; top: 50%; left: 0; right: 0; transform: translateY(-50%); }
#visual .text-box h2{ font-family: var(--engFont); font-size: 11rem; font-weight: 600; color: #000; margin: 20px 0 60px; animation: textClip 1s 0.3s both; }
#visual .text-box h2 em{ --before: 20px; --after: 0; animation: letterSpacing 1s 1.3s both; }


/* lnb */
#lnb{ animation: textClip 1s 0.3s both; }
#lnb ul{ display: flex; justify-content: center; align-items: center; margin: -5px 0; }
#lnb ul li{ position: relative; }
#lnb ul li::after{ content: ""; width: 1px; height: 16px; background: #CCC; position: absolute; top: 50%; right: 0; transform: translate(50%, -50%) rotate(45deg); }
#lnb ul li:last-of-type::after{ display: none; }
#lnb a{ display: inline-block; font-family: var(--engFont); font-size: 20px; font-weight: 400; color: #666; padding: 5px 20px; }
#lnb .home a{ display: flex; transform: translateY(-2px); }
#lnb svg{ width: auto; height: auto; }


/* tab */
#tab{ animation: textClip 1s 0.3s both; }  
#tab ul{ display: flex; flex-wrap: wrap; justify-content: center; padding: 25px 0; margin: -35px; }
#tab ul li{ margin: 10px; }
#tab ul li a{ display: inline-block; background: #FFF; border-radius: 60px; font-size: 20px; font-weight: 500; color: var(--mainColor); letter-spacing: -0.03em; line-height: 1; padding: 15px 30px; box-shadow: 0 0 25px rgba(166, 8, 17, 0.1); }
#tab ul li.on a{ background: var(--mainColor); color: #FFF; }
#tab.none{ opacity: 0; pointer-events: none; }


/* common */
#sub{
	--subPt: 150px;
	--subPb: 200px;
	--redBg: #FDF7F8;
	--gradiBg: linear-gradient(to bottom, var(--redBg), #FFF, #F5F5F5);
	--shadow: 0 0 30px rgba(0, 0, 0, 0.1);
}

#header .logo svg .fill{ fill: #3E3A39; }
#header .logo svg .stroke{ stroke: #3E3A39; }
#header .depth01 > li > a{ color: #111; }
#header .right button svg path{ fill: #000; stroke: #000; }
#header .lang ul li a{ color: #000; }
#header .menu span{ background: #000; }

#footer{ border-top: 1px solid #DDD; }

.sub-content{ padding: 0 0 var(--subPb); }
.eng{ font-family: var(--engFont) !important; letter-spacing: 0 !important; }
.redBg{ background: var(--redBg); }


/* 간격 */
.subPt{ padding-top: var(--subPt); }
.subPb{ padding-bottom: var(--subPb); }

.pt100{ padding-top: 100px; }
.pb100{ padding-bottom: 100px; }
.pt150{ padding-top: 150px; }
.pb150{ padding-bottom: 150px; }


/* page-title */
.page-title{ text-align: center; margin-bottom: 150px; }
.page-title.mb30{ margin-bottom: 30px !important; }
.page-title.mb100{ margin-bottom: 100px; }
.page-title i{ height: 50px; display: block; background: url("/img/sub/title_symbol.svg") no-repeat center center / contain; margin-bottom: 10px; }
.page-title span{ display: block; font-family: var(--engFont); font-size: 22px; font-weight: 500; color: var(--mainColor); margin-bottom: 30px; }
.page-title h3{ font-size: 6rem; font-weight: 600; color: #000; letter-spacing: -0.03em; }
.page-title p{ font-size: 22px; font-weight: 300; color: #333; letter-spacing: -0.03em; line-height: 1.6363; margin-top: 30px; }


/* sec-title */
.sec-title{ text-align: center; margin-bottom: 60px; }
.sec-title > *:not(:last-child){ margin-bottom: 30px; }
.sec-title span{ display: block; font-size: 24px; font-weight: 600; color: #AAA; letter-spacing: -0.03em; }
.sec-title i{ display: block; }
.sec-title h3{ font-size: 6rem; font-weight: 600; color: #111; letter-spacing: -0.03em; line-height: 1.3333; }
.sec-title h4{ font-size: 5rem; font-weight: 600; color: #111; letter-spacing: -0.03em; line-height: 1.4; }
.sec-title p{ font-size: 24px; font-weight: 400; color: #111; letter-spacing: -0.03em; line-height: 1.6666; }
.sec-title em{  color: transparent; background: linear-gradient(to right, var(--mainColor) 0 50%, #111 50% 100%); background-clip: text; -webkit-background-clip: text; background-size: 200% 100%; background-position: 100% 0; transition: background-position 0.5s 1s; }
.sec-title.aos-animate em{ background-position: 0 0; }


/* sub-title */
.sub-title{ text-align: center; margin-bottom: 60px; }
.sub-title h4{ font-family: var(--engFont); font-size: 46px; font-weight: 600; color: #000; }
.sub-title p{ font-size: 22px; font-weight: 400; color: #333; letter-spacing: -0.03em; line-height: 1.6363; margin-top: 20px; }


/* shadow-box */
.shadow-box{ display: flex; flex-wrap: wrap; text-align: center; margin-top: -15px; }
.shadow-box .item{ width: calc((100% - 30px) / 3); min-height: 300px; display: flex; flex-direction: column; justify-content: center; background: #FFF; border-radius: 30px; box-shadow: var(--shadow); font-size: 20px; font-weight: 500; color: #222; letter-spacing: -0.03em; margin-right: 15px; margin-top: 15px; padding: 20px; position: relative; }
.shadow-box .item:nth-of-type(3n){ margin-right: 0; }
.shadow-box dl dt{ font-family: var(--engFont); font-size: 6rem; font-weight: 700; color: #000; letter-spacing: 0; }
.shadow-box dl dd{ font-weight: 300; color: #333; line-height: 1.6; margin-top: 15px; }

.shadow-box.check{ margin-top: -15px; }
.shadow-box.check .item{ margin-top: 35px; }
.shadow-box.check .item::before{ content: ""; height: 40px; background: url("/img/sub/service/consulting_check.svg") no-repeat center center / contain; position: absolute; top: 0; left: 0; right: 0; transform: translateY(-50%); }


/* tab-menu */
.tab-menu ul{ max-width: max-content; width: 100%; display: flex; flex-wrap: wrap; border: 2px solid #EEE; border-radius: 60px; padding: 3px; }
.tab-menu ul li a{ display: inline-block; border-radius: 60px; font-family: var(--engFont); font-size: 20px; font-weight: 500; color: #333; text-align: center; padding: 12px 30px; }
.tab-menu ul li.on a{ background: #2E2E2E; color: #FFF; }

.page-title .tab-menu{ margin-top: 30px; }
.page-title .tab-menu ul{ margin: 0 auto; }


/* viewBtn */
.viewBtn{
	--icon: 45px;
}
.viewBtn{ max-width: max-content; display: flex; justify-content: center; align-items: center; background: #EEE; border-radius: 70px; font-size: 20px; font-weight: 600; color: #111; padding: 10px; position: relative; overflow: hidden; margin: 0 auto; transition: color 0.3s 0.3s; }
.viewBtn .hover{ width: 0; height: 0; background: var(--mainColor); border-radius: 50%; position: absolute; top: 0; left: 0; transform: translate(-50%, -50%); transition: width 0.5s, height 0.5s; }
.viewBtn i{ display: inline-block; width: var(--icon); height: var(--icon); background: var(--mainColor); border-radius: 50%; position: relative; z-index: 10; transition: background 0.3s 0.3s; }
.viewBtn i::before{ content: ""; display: block; height: 100%; background: url("/img/board/list_icon.svg") no-repeat center center / contain; filter: invert(1) brightness(4); -webkit-filter: invert(1) brightness(4); transition: filter 0.3s 0.3s; }
.viewBtn span{ display: inline-block; padding-left: 45px; padding-right: 70px; position: relative; z-index: 10; }

.viewBtn.demo{
	--icon: 30px;
}
.viewBtn.demo{ background: #DDD; font-family: var(--engFont); font-size: 18px; }
.viewBtn.demo i::before{ background-image: url("/img/board/video_icon.svg"); }
.viewBtn.demo span{ padding-left: 20px; padding-right: 30px; }

@media screen and (hover: hover){
	.viewBtn:hover{ color: #FFF; transition-delay: unset; }
	.viewBtn:hover .hover{ width: 70vw; height: 70vw; }
	.viewBtn:hover i{ background: #FFF; transition-delay: unset; }
	.viewBtn:hover i::before{ filter: unset; -webkit-filter: unset; transition-delay: unset; }
}


/* target-figure */
.target-figure{ position: relative; }
.target-figure figure{ pointer-events: auto; }
.target-figure a{ display: none; position: absolute; top: 0; right: 0; bottom: 0; left: 0; }
.target-figure i{ width: 40px; height: 40px; border-radius: 50%; display: flex; justify-content: center; align-items: center; background: #000; position: absolute; bottom: 15px; right: 15px; }
.target-figure i::before{ content: ""; display: inline-block; width: 24px; height: 24px; background: url("/img/sub/scale_icon.svg") no-repeat center center / contain; }


/* figcaption */
.figcaption{ box-shadow: var(--shadow); overflow: hidden; position: relative; border-radius: 30px; }
.figcaption figcaption{ max-width: calc(100% - 20px); background: #000; border-radius: 25px; font-size: 16px; font-weight: 600; color: #FFF; padding: 4px 10px; position: absolute; bottom: 10px; left: 10px; z-index: 10; }


/* infinite-box */
.infinite-box{
	--width: 320px;
	--innerP: 13px;
	--txtW: 5.9%;
	--txtH: 13%;
	--tp: 3px;
	--lr: 2px;
}
.infinite-box{ text-align: center; position: relative; }
.infinite-box .mobile{ display: none; }
.infinite-box .diagram{ width: calc(100% - (var(--width) * 2)); position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);padding: 0 15px; }
.infinite-box .diagram .inner{ border: 2px dashed rgba(195, 8, 19, 0.1); border-radius: 400px; padding: var(--innerP); position: relative; }
.infinite-box .diagram .inner::before{ content: ""; display: block; background: url("/img/sub/product/ribbon.svg") no-repeat center center / contain; padding-bottom: 45%; }

.infinite-box .diagram .grid{ display: grid; grid-template-columns: var(--txtW) auto auto auto var(--txtW); grid-template-rows: var(--txtH) auto var(--txtH); padding: var(--innerP); position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 10; }
.infinite-box .diagram .grid > div{ display: flex; justify-content: center; align-items: center; }
.infinite-box .diagram .grid span{ display: inline-block; font-family: var(--engFont); font-size: 18px; font-weight: 700; color: #FFF; line-height: 1; }
.infinite-box .diagram .grid .cir{ position: relative; }
.infinite-box .diagram .grid .cir::before{ content: ""; display: block; padding-bottom: 100%; background: #FFF; border-radius: 50%; box-shadow: 0 0 30px rgba(195, 8, 19, 0.1); }
.infinite-box .diagram .grid p{ font-family: var(--engFont); font-size: 40px; font-weight: 700; color: var(--mainColor); position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }

.infinite-box .diagram .grid .t1{ grid-column: 2 / 3; transform: translate(calc(var(--txtW) * -0.5), var(--tp)); }
.infinite-box .diagram .grid .t2{ grid-column: 4 / 5; transform: translate(calc(var(--txtW) * -0.5), var(--tp)); }
.infinite-box .diagram .grid .t3{ grid-row: 2 / 3; transform: translateX(var(--lr)); }
.infinite-box .diagram .grid .t4{ grid-column: 3 / 4; grid-row: 2 / 3; transform: translate(calc(var(--tp) * -1), calc(var(--lr) * -1)); }
.infinite-box .diagram .grid .t5{ grid-column: 5 / 6; grid-row: 2 / 3; transform: translateX(calc(var(--lr) * -1)); }
.infinite-box .diagram .grid .t6{ grid-column: 2 / 3; grid-row: 3 / 4; transform: translate(calc(var(--txtW) * 0.5), calc(var(--tp) * -0.5)); }
.infinite-box .diagram .grid .t7{ grid-column: 4 / 5; grid-row: 3 / 4; transform: translate(calc(var(--txtW) * -0.5), calc(var(--tp) * -0.5)); }

.infinite-box .diagram .grid .t3 span{ writing-mode: vertical-lr; transform: scale(-1); }
.infinite-box .diagram .grid .t4 span{ transform: rotate(-45deg); }
.infinite-box .diagram .grid .t5 span{ writing-mode: vertical-lr; }

.infinite-box .diagram .grid .c1{ grid-column: 2 / 3; grid-row: 2 / 3; padding-left: 20px; }
.infinite-box .diagram .grid .c2{ grid-column: 4 / 5; grid-row: 2 / 3; padding-right: 20px; }

.infinite-box .dl{ display: grid; grid-template-columns: var(--width) var(--width); justify-content: space-between; align-items: center; }
.infinite-box .dl dl{ background: #FFF; box-shadow: var(--shadow); border-radius: 30px; padding: 30px 10px; }
.infinite-box .dl dl:not(:last-of-type){ margin-bottom: 10px; }
.infinite-box .dl dl dt{ font-size: 22px; font-weight: 500; color: #222; letter-spacing: -0.03em; margin-bottom: 20px; }
.infinite-box .dl ul{ display: flex; flex-wrap: wrap; justify-content: center; margin: -5px; }
.infinite-box .dl ul li{ background: #F5F5F5; border-radius: 30px; font-size: 18px; font-weight: 300; color: #666; letter-spacing: -0.03em; padding: 8px 20px; margin: 5px; }


/* plus-ins */
.plus-ins{
	--gap: 120px;
	--cir1: var(--gap) / 2;
	--cir2: var(--gap) / 4;
	--dot: 10px;
}
.plus-ins{ display: grid; grid-template-columns: 32.5% 35% 32.5%; align-items: center; margin: calc(var(--gap) * -0.5); }
.plus-ins > div{ margin: calc(var(--gap) / 2); }
.plus-ins .side{ position: relative; }
.plus-ins .side::before{ content: ""; width: 1px; height: 100%; border-right: 2px dashed var(--mainColor); position: absolute; top: 0; }
.plus-ins .side ul{ position: relative; z-index: 10; }
.plus-ins .side ul li{ position: relative; }
.plus-ins .side ul li::before{ content: ""; width: calc(var(--cir1)); height: 50%; background: var(--redBg); position: absolute; }
.plus-ins .side ul li:last-child::before{ bottom: 0; }
.plus-ins .side ul li:not(:first-child, :last-child)::before{ display: none; }
.plus-ins .side ul li > div{ display: flex; align-items: center; background: #FFF; box-shadow: 0 0 20px rgba(0, 0, 0, 0.1); border-radius: 30px; padding: 20px 40px; position: relative; }
.plus-ins .side ul li > div::before{ content: ""; width: var(--dot); height: var(--dot); background: var(--mainColor); border-radius: 50%; position: absolute; top: 50%; }
.plus-ins .side ul li > div::after{ content: ""; width: calc(var(--cir1)); height: 1px; border-bottom: 2px dashed var(--mainColor); position: absolute; top: 50%; }
.plus-ins .side ul li:not(:last-of-type){ margin-bottom: 10px; }
.plus-ins .side .icon{ width: 90px; height: 90px; display: flex; justify-content: center; align-items: center; background: #F5F5F5; box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.15); border-radius: 50%; padding: 15px; }
.plus-ins .side p{ width: calc(100% - 90px); display: flex; flex-wrap: wrap; align-items: center; font-size: 20px; font-weight: 500; color: #333; letter-spacing: -0.03em; padding-left: 30px; }
.plus-ins .side p span{ display: inline-block; background: #AAA; border-radius: 25px; font-family: var(--engFont); font-size: 16px; font-weight: 500; color: #FFF; padding: 2px 10px; margin-left: 20px; }

.plus-ins .side:first-child::before{ right: calc((var(--cir1)) * -1); }
.plus-ins .side:first-child ul li::before{ right: 0; transform: translate(100%); }
.plus-ins .side:first-child ul li > div::before{ right: 0; transform: translate(50%, -50%); }
.plus-ins .side:first-child ul li > div::after{ right: 0; transform: translate(100%, -50%); }

.plus-ins .side:last-child::before{ left: calc(((var(--cir1)) * -1) - 1px); }
.plus-ins .side:last-child ul li::before{ left: 0; transform: translateX(-100%); }
.plus-ins .side:last-child ul li > div::before{ left: 0; transform: translate(-50%, -50%); }
.plus-ins .side:last-child ul li > div::after{ left: 0; transform: translate(-100%, -50%); }

.plus-ins .center{ position: relative; }
.plus-ins .center::before,
.plus-ins .center::after{ content: ""; width: var(--gap); height: 1px; border-bottom: 2px dashed var(--mainColor); position: absolute; top: 50%; z-index: 100; }
.plus-ins .center::before{ left: 0; transform: translate(-50%, -50%); }
.plus-ins .center::after{ right: 0; transform: translate(50%, -50%); }
.plus-ins .circle{ background: rgba(255, 255, 255, 0.6); border-radius: 50%; padding: calc(var(--cir1) + var(--cir2)); box-shadow: 0 0 30px rgba(195, 8, 19, 0.1); position: relative; }
.plus-ins .circle::before{ content: ""; width: calc(100% - (var(--cir1) * 2)); height: calc(100% - (var(--cir1) * 2)); background: linear-gradient(150deg, var(--orange), var(--mainColor)); box-shadow: 0 30px 30px rgba(0, 0, 0, 0.1); border-radius: inherit; opacity: 0.1; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }
.plus-ins .circle .inner{ background: linear-gradient(150deg, var(--orange), var(--mainColor)); box-shadow: 0 30px 30px rgba(0, 0, 0, 0.1); border-radius: inherit; padding-bottom: 100%; position: relative; z-index: 10; }
.plus-ins .circle .inner::before,
.plus-ins .circle .inner::after{ content: ""; width: var(--dot); height: var(--dot); background: var(--mainColor); border-radius: 50%; position: absolute; top: 50%; }
.plus-ins .circle .inner::before{ left: calc(var(--cir2) * -1); transform: translate(-50%, -50%); }
.plus-ins .circle .inner::after{ right: calc(var(--cir2) * -1); transform: translate(50%, -50%); }
.plus-ins .circle .txt{ font-family: var(--engFont); font-size: 30px; font-weight: 600; color: #FFF; text-align: center; padding: 0 20px; position: absolute; top: 55%; left: 0; right: 0; transform: translateY(-50%); }
.plus-ins .circle .txt svg{ max-width: 100%; width: auto; height: auto; }
.plus-ins .circle .txt p{ margin-top: 10px; }


/* popup */
#popup{ width: 100%; height: 100%; background: rgba(0, 0, 0, 0.5); position: fixed; top: 0; left: 0; z-index: 1000; display: none; }
#popup .blank{ width: 100%; height: 100%; }
#popup .inner{ width: 95%; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }


@media screen and (max-width: 1600px){
	/* lnb */
	#lnb a{ font-size: 18px; }
	#lnb svg{ width: 20px; }

	/* common */
	#sub{
		--subPt: 100px;
		--subPb: 150px;
	}

	/* tab */
	#tab ul li a{ font-size: 18px; }

	/* 간격 */
	.pt100{ padding-top: 80px; }
	.pb100{ padding-bottom: 80px; }
	.pt150{ padding-top: 120px; }
	.pb150{ padding-bottom: 120px; }

	/* page-title */
	.page-title{ margin-bottom: 100px; }
	.page-title.mb100{ margin-bottom: 70px; }
	.page-title span{ font-size: 20px; }
	.page-title p{ font-size: 20px; }

	/* sec-title */
	.sec-title{ margin-bottom: 40px; }
	.sec-title span{ font-size: 20px; }
	.sec-title p{ font-size: 20px; }

	/* sub-title */
	.sub-title{ margin-bottom: 40px; }
	.sub-title h4{ font-size: 40px; }
	.sub-title p{ font-size: 20px; }

	/* shadow-box */
	.shadow-box .item{ min-height: 260px; font-size: 18px; }

	/* tab-menu */
	.tab-menu ul li a{ font-size: 18px; padding: 12px 25px; }

	/* viewBtn */
	.viewBtn{ font-size: 18px; }
	.viewBtn span{ padding-left: 30px; padding-right: 55px; }

	.viewBtn.demo{ font-size: 17px; }

	/* infinite-box */
	.infinite-box .dl dl{ padding: 20px 10px; }
	.infinite-box .dl dl dt{ font-size: 20px; }
	.infinite-box .dl ul li{ font-size: 16px; padding: 6px 15px; }
	.infinite-box .diagram .grid span{ font-size: 16px; }
	.infinite-box .diagram .grid p{ font-size: 36px; }


	/* plus-ins */
	.plus-ins{
		--gap: 100px;
	}
	.plus-ins{ grid-template-columns: 30% 40% 30%; }
	.plus-ins .circle .txt{ font-size: 26px; }
	.plus-ins .side ul li > div{ padding: 15px; }
	.plus-ins .side .icon{ width: 80px; height: 80px; }
	.plus-ins .side p{ width: calc(100% - 80px); font-size: 18px; padding-left: 15px; }
	.plus-ins .side p span{ font-size: 15px; margin-left: 10px; }
}

@media screen and (max-width: 1350px){
	/* infinite-box */
	.infinite-box{
		--width: 280px;
	}
}

@media screen and (max-width: 1280px){
	/* visual */
	#visual .text-box h2{ font-size: 9rem; margin: 10px 0 30px; }
	#visual .text-box h2 em{ --before: 10px; }

	/* lnb */
	#lnb ul li::after{ height: 13px; }
	#lnb a{ font-size: 16px; padding: 5px 15px; }
	#lnb svg{ width: 18px; }

	/* tab */
	#tab ul li a{ font-size: 17px; padding: 12px 25px; }

	/* common */
	#sub{
		--subPt: 60px;
		--subPb: 100px;
	}

	/* 간격 */
	.pt100{ padding-top: 60px; }
	.pb100{ padding-bottom: 60px; }
	.pt150{ padding-top: 90px; }
	.pb150{ padding-bottom: 90px; }

	/* page-title */
	.page-title{ margin-bottom: 60px; }
	.page-title.mb30{ margin-bottom: 20px !important; }
	.page-title.mb100{ margin-bottom: 30px; }
	.page-title span{ font-size: 20px; }
	.page-title p{ font-size: 18px; margin-top: 15px; }

	/* sec-title */
	.sec-title{ margin-bottom: 30px; }
	.sec-title > *:not(:last-child){ margin-bottom: 20px; }
	.sec-title span{ font-size: 18px; }
	.sec-title p{ font-size: 18px; }

	/* sub-title */
	.sub-title{ margin-bottom: 30px; }
	.sub-title h4{ font-size: 36px; }
	.sub-title p{ font-size: 18px; margin-top: 10px; }

	/* shadow-box */
	.shadow-box .item{ min-height: 220px;  font-size: 17px; }
	.shadow-box dl dd{ margin-top: 7px; }
	.shadow-box.check .item{ margin-top: 30px; }
	.shadow-box.check .item::before{ height: 30px; }

	/* tab-menu */
	.tab-menu ul li a{ font-size: 17px; padding: 10px 20px; }

	/* viewBtn */
	.viewBtn{
		--icon: 40px;
	}
	.viewBtn{ font-size: 16px; padding: 7px; }
	.viewBtn span{ padding-left: 20px; padding-right: 40px; }

	.viewBtn.demo{ font-size: 16px; }
	.viewBtn.demo span{ padding-left: 10px; padding-right: 20px; }

	/* figcaption */
	.figcaption figcaption{ font-size: 15px; }

	/* infinite-box */
	.infinite-box .dl dl dt{ font-size: 18px; margin-bottom: 10px; }    
	.infinite-box .diagram .grid p{ font-size: 32px; }
	
	/* plus-ins */
	.plus-ins{
		--gap: 70px;
		--dot: 7px;
	}
	.plus-ins{ grid-template-columns: 32% 36% 32%; }
	.plus-ins .circle .txt{ font-size: 22px; }
	.plus-ins .side .icon{ width: 65px; height: 65px; }
	.plus-ins .side p{ width: calc(100% - 65px); }
}

@media screen and (max-width: 1200px){
	/* infinite-box */
	.infinite-box .pc{ display: none; }
	.infinite-box .mobile{ display: block; }
	.infinite-box .diagram{ max-width: 700px; width: 100%; position: static; transform: unset; padding: 0; margin: 0 auto; margin-bottom: 20px; }
	.infinite-box .dl{ grid-template-columns: repeat(3, 1fr); align-items: unset; }
	.infinite-box .dl > div{ display: grid; grid-template-columns: repeat(3, 1fr); margin: 0 -5px; }
	.infinite-box .dl dl{ display: flex; flex-direction: column; padding: 15px 5px; margin: 5px; }
	.infinite-box .dl dl:not(:last-of-type){ margin-bottom: 5px; }
	.infinite-box .dl dl dd{ flex: 1 0 auto; align-content: center; }
}

@media screen and (max-width: 1000px){
	/* visual */
	#visual .text-box{ padding-top: var(--headerH); }
	#visual .text-box h2{ margin-bottom: 0; }

	/* tab */
	#tab{ display: none; }

	/* page-title */
	.page-title span{ font-size: 18px; margin-bottom: 10px; }
	.page-title p{ font-size: 17px; }
}

@media screen and (max-width: 900px){
	/* visual */
	#visual .bg{ background-size: contain !important; }

	/* page-title */
	.page-title h3{ font-size: 6.5rem; }
	.page-title{ margin-bottom: 30px; }

	/* sec-title */
	.sec-title > *:not(:last-child){ margin-bottom: 15px; }

	/* sub-title */
	.sub-title h4{ font-size: 28px; }
	.sub-title p{ font-size: 17px; }

	/* target-figure */
	.target-figure a{ display: block; }

	/* shadow-box */
	.shadow-box .item{ width: 100%; min-height: auto; padding: 25px 0; margin-right: 0 !important; transition-delay: unset !important; }

	/* infinite-box */
	.infinite-box{
		--innerP: 8px;
	}
	.infinite-box .dl{ grid-template-columns: repeat(2, 1fr); }
	.infinite-box .diagram .grid p{ font-size: 28px; }
	.infinite-box .dl ul li{ font-size: 15px; padding: 5px 12px; }

	/* plus-ins */
	.plus-ins{
		--gap: 40px;
	}
	.plus-ins{ grid-template-columns: repeat(1, 1fr); }
	.plus-ins .center{ width: 300px; margin-left: auto; margin-right: auto; }
	.plus-ins .center::before, 
	.plus-ins .center::after{ width: 1px; height: var(--gap); border: none; border-right: 2px dashed var(--mainColor); left: calc(50% - 1px); right: auto; }
	.plus-ins .center::before{ top: 0; transform: translate(-50%, -50%); }
	.plus-ins .center::after{ top: unset; bottom: 0; transform: translate(-50%, 50%); }
	.plus-ins .circle .inner::before, 
	.plus-ins .circle .inner::after{ left: 50%; right: unset; }
	.plus-ins .circle .inner::before{ top: calc(var(--cir2) * -1); bottom: unset; }
	.plus-ins .circle .inner::after{ top: unset; bottom: calc(var(--cir2) * -1); transform: translate(-50%, 50%); }

	.plus-ins .side:first-child{ transform: translateY(var(--aosMinus)); }
	.plus-ins .side:last-child{ transform: translateY(var(--aosPlus)); }
	.plus-ins .side.aos-animate{ transform: translateY(0) !important; }
	.plus-ins .side::before{ width: calc(50% + 10px); height: 1px; border: none; border-bottom: 2px dashed var(--mainColor); }
	.plus-ins .side ul{ display: flex; flex-wrap: wrap; justify-content: space-between; margin-bottom: -20px; }
	.plus-ins .side ul li{ width: calc((100% - 20px) / 2); margin-bottom: 20px; }
	.plus-ins .side ul li::before{ display: none; }
	.plus-ins .side ul li:not(:last-of-type){ margin-bottom: 20px; }
	.plus-ins .side ul li > div::after{ width: 1px; height: calc(var(--cir1)); border: none; border-right: 2px dashed var(--mainColor); }

	.plus-ins .side:first-child::before{ top: calc(100% +  (var(--cir1)) - 1px); right: 50%; transform: translateX(50%); }
	.plus-ins .side:first-child ul li > div::before{ top: 100%; right: 50%; transform: translate(50%, -50%); }
	.plus-ins .side:first-child ul li > div::after{ top: 100%; right: calc(50% + 1px); transform: translateX(50%); }

	.plus-ins .side:last-child::before{ top: calc((var(--cir1) * -1) - 1px); left: 50%; transform: translateX(-50%); }
	.plus-ins .side:last-child ul li > div::before{ top: 0; left: 50%; transform: translate(-50%, -50%); }
	.plus-ins .side:last-child ul li > div::after{ top: 0; left: calc(50% - 1px); transform: translate(-50%, -100%); }
}

@media screen and (max-width: 650px){
	/* plus-ins */
	.plus-ins .center{ max-width: 250px; }
}

@media screen and (max-width: 600px){
	/* infinite-box */
	.infinite-box{
		--innerP: 3px;
	}
	.infinite-box .diagram .grid span{ font-size: 14px; }
	.infinite-box .diagram .grid .c1{ padding-left: 10px; }
	.infinite-box .diagram .grid .c2{ padding-right: 10px; }

	.infinite-box .diagram .grid .t4{ transform: translate(calc(var(--tp) * -0.5), calc(var(--lr) * -0.5)); }

	/* plus-ins */
	.plus-ins .side ul li > div{ flex-direction: column; }
	.plus-ins .side p{ width: 100%; justify-content: center; padding-left: 0; padding-top: 10px; }
}

@media screen and (max-width: 550px){
	/* tab-menu */
	.tab-menu{ width: 100%; }
	.tab-menu ul{ max-width: 100%; }
	.tab-menu ul li{ flex-grow: 1; }
	.tab-menu ul li a{ width: 100%; }
}


/* 제품 - E-GENE™ No-Code Platform */
#platform{ overflow: hidden; }
#platform .step-title{ text-align: center; margin-bottom: 60px; position: relative; z-index: 100; }
#platform .step-title p{ font-size: 24px; font-weight: 500; color: var(--mainColor); letter-spacing: -0.03em; margin-bottom: 20px; }
#platform .step-title p span{ display: inline-block; width: 30px; height: 30px; background: var(--mainColor); border-radius: 50%; font-family: var(--engFont); font-size: 16px; font-weight: 700; color: #FFF; line-height: 30px; vertical-align: middle; margin-right: 10px; transform: translateY(-1px); }
#platform .step-title h4{ font-size: 34px; font-weight: 600; color: #111; letter-spacing: -0.03em; line-height: 1.4705; }


#platform .step-box{
	--gap: 90px;
}
#platform .step-box{ display: flex; flex-wrap: wrap; text-align: center; }
#platform .step-box h6{ font-size: 26px; font-weight: 500; color: #222; margin-bottom: 30px; }
#platform .step-box .radius-list{ margin-top: 30px; }
#platform .step-box .radius-list li{ background: #FFF; border-radius: 50px; font-size: 20px; font-weight: 400; color: #666; letter-spacing: -0.03em; padding: 12px; }
#platform .step-box .radius-list li:not(:last-of-type){ margin-bottom: 10px; }

#platform .step-box > dl{ width: calc((100% - 180px) / 3); display: flex; flex-direction: column; margin-right: var(--gap); margin-bottom: var(--gap); }
#platform .step-box > dl:nth-of-type(3n){ margin-right: 0; }
#platform .step-box > dl > dt{ max-width: max-content; display: inline-block; border-radius: 40px; font-family: var(--engFont); font-size: 18px; font-weight: 700; line-height: 1; padding: 9px 20px; margin: 0 auto; margin-bottom: 20px; }
#platform .step-box > dl > dd{ flex: 1 0 auto; border-radius: 30px; padding: 50px; position: relative; }
#platform .step-box > dl > dd::after{ content: ""; width: 50px; height: 50px; background: #FFF url("/img/sub/product/step_arrow.svg") no-repeat center center / contain; border: 1px solid #DDD; border-radius: 50%; position: absolute; top: 50%; right: calc((var(--gap) / 2) * -1); transform: translate(50%, -50%); }
#platform .step-box > dl:last-child > dd::after{ display: none; }

#platform .step-box > dl:nth-of-type(1) dt{ border: 2px dashed var(--orange); color: var(--orange); }
#platform .step-box > dl:nth-of-type(1) dd{ background: rgba(234, 117, 55, 0.1); }
#platform .step-box > dl:nth-of-type(2) dt{ border: 2px dashed #D73E25; color: #D73E25; }
#platform .step-box > dl:nth-of-type(2) dd{ background: rgba(215, 62, 37, 0.1); }
#platform .step-box > dl:nth-of-type(3) dt{ border: 2px solid var(--mainColor); background: var(--mainColor); color: #FFF; }
#platform .step-box > dl:nth-of-type(3) dd{ background: linear-gradient(137deg, var(--orange), var(--mainColor)); }

#platform .step-box > dl:last-of-type h6{ color: #FFF; }
#platform .step-box > dl:last-of-type .radius-list li{ font-weight: 500; color: var(--mainColor); }


#platform .workflow{
	--width: 31.5%;
	--gap: 120px;
	--lr: 60px;
	--cir1: 30px;
	--cir2: 100px;
}
#platform .workflow{ overflow: hidden; }
#platform .workflow .diagram{ position: relative; }
#platform .workflow .center{ padding: 0 var(--width); }
#platform .workflow .center .inner{ position: relative; }

#platform .workflow .border{ position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); border: 2px dotted #fff; background: linear-gradient(var(--redBg) 0 0) padding-box, linear-gradient(145deg, var(--orange), var(--mainColor)) border-box; border-radius: 50%; opacity: 0.1; }
#platform .workflow .border::before{ content: ""; width: 100%; height: 100%; border: 2px dashed #FFF; border-radius: 100%; }
#platform .workflow .b1{ width: calc(100% + 150px); height: calc(100% + 150px); }
#platform .workflow .b2{ width: calc(100% + 400px); height: calc(100% + 400px); }

#platform .workflow .circle{ position: relative; background: #FFF; border-radius: 50%; padding: var(--cir1); }
#platform .workflow .circle::before,
#platform .workflow .circle::after{ content: ""; border-radius: 50%; }
#platform .workflow .circle::before{ display: block; padding-bottom: 100%; background: url("/img/sub/product/platform_workflow.svg") no-repeat center center / contain; box-shadow: 0 0 50px rgba(195, 8, 19, 0.2); }
#platform .workflow .circle .text{ text-align: center; position: absolute; top: 50%; left: 0; right: 0; z-index: 100; transform: translateY(-50%); }
#platform .workflow .circle .text span{ font-size: 22px; font-weight: 500; color: #222; letter-spacing: -0.02em; shape-outside: circle(50%); -webkit-shape-outside: circle(50%); }
#platform .workflow .circle .text h5{ font-family: var(--engFont); font-size: 40px; font-weight: 700; color: var(--mainColor); padding: 0 calc(var(--cir2) + 30px); margin-top: 10px; }

#platform .workflow .line{ position: absolute; top: 50%; left: 0; right: 0; transform: translateY(-50%); }
#platform .workflow .line ul{ display: grid; grid-template-columns: var(--width) calc(100% - (var(--width) * 2)) var(--width); align-items: center; margin: -15px; }
#platform .workflow .line ul li{ position: relative; margin: 15px; transition: transform 1s; transition-delay: inherit; margin-bottom: 30px; }
#platform .workflow .line ul li:nth-child(odd){ grid-column: 1 / 2; }
#platform .workflow .line ul li:nth-child(even){ grid-column: 3 / 4; }
#platform .workflow .line ul li::before,
#platform .workflow .line ul li::after{ content: ""; position: absolute; top: 50%; }
#platform .workflow .line ul li::before{ width: 10px; height: 10px; background: var(--mainColor); border-radius: 50%; }
#platform .workflow .line ul li::after{ width: var(--gap); height: 1px; border-bottom: 2px dashed var(--mainColor); transform: translateY(100%); }
#platform .workflow .line .box{ background: #FFF; box-shadow: 0 0 30px rgba(195, 8, 19, 0.1); border-radius: 30px; padding: 25px; text-align: center; }
#platform .workflow .line .box span{ font-family: var(--engFont); font-size: 28px; font-weight: 500; color: #222; }
#platform .workflow .line .box p{ font-size: 18px; font-weight: 400; color: #333; letter-spacing: -0.03em; margin-top: 10px; }

#platform .workflow .line ul li:nth-child(odd){ padding-right: var(--gap); transform: translateX(var(--aosMinus)); left: var(--lr); }
#platform .workflow .line ul li:nth-child(odd)::before{ right: var(--gap); transform: translateX(50%); }
#platform .workflow .line ul li:nth-child(odd)::after{ right: 0; mask-image: linear-gradient(to right, #000, transparent); -webkit-mask-image: linear-gradient(to right, #000, transparent); }

#platform .workflow .line ul li:nth-child(even){ padding-left: var(--gap); transform: translateX(var(--aosPlus)); right: var(--lr); }
#platform .workflow .line ul li:nth-child(even)::before{ left: var(--gap); transform: translateX(-50%); }
#platform .workflow .line ul li:nth-child(even)::after{ left: 0; mask-image: linear-gradient(to left, #000, transparent); -webkit-mask-image: linear-gradient(to left, #000, transparent); }

#platform .workflow .line ul li:nth-of-type(3){ left: 0; }
#platform .workflow .line ul li:nth-of-type(4){ right: 0; }

#platform .workflow .line.aos-animate ul li{ transform: translateX(0) !important; }


#platform .step01 .grid{ display: grid; grid-template-columns: repeat(auto-fit, minmax(480px, auto)); text-align: center; margin: -15px; }
#platform .step01 .grid > div{ background: #FFF; box-shadow: var(--shadow); border-radius: 30px; margin: 15px; }
#platform .step01 .left{ align-content: center; padding: 30px 40px; }
#platform .step01 .top{ background: #EDEDED; position: relative; border-radius: 30px; padding: 30px; }
#platform .step01 .top::before{ content: ""; width: 100%; height: 100%; background: linear-gradient(130deg, rgba(224, 47, 57, 0.3), transparent); border-radius: inherit; position: absolute; top: 0; left: 0; }
#platform .step01 .top figure,
#platform .step01 .top figure img{ width: 100%; }
#platform .step01 .top figure{ border-radius: 20px; overflow: hidden; box-shadow: var(--shadow); position: relative; z-index: 10; }
#platform .step01 .bottom{ padding: 40px 30px; }
#platform .step01 .bottom dl dt{ font-size: 24px; font-weight: 500; color: #222; letter-spacing: -0.03em; margin-bottom: 20px; }
#platform .step01 .bottom ul{ display: grid; grid-template-columns: repeat(2, 1fr); margin: -5px; }
#platform .step01 .bottom ul li{ background: var(--redBg); border-radius: 20px; font-size: 20px; font-weight: 400; color: #333; letter-spacing: -0.03em; padding: 15px 10px; margin: 5px; }


#platform .step02{ text-align: center; }
#platform .step02 .diagram .center{ margin-bottom: 60px; position: relative; }
#platform .step02 .diagram .center::before,
#platform .step02 .diagram .center::after{ content: ""; max-width: 700px; width: 70%; height: 270px; background: linear-gradient(to bottom, transparent, var(--mainColor)); opacity: 0.2; position: absolute; bottom: 0; left: 50%; transform: translate(-50%, 80%); clip-path: polygon(50% 100%, 0 0, 100% 0); -webkit-clip-path: polygon(50% 100%, 0 0, 100% 0); }
#platform .step02 .diagram .center::before{ transform: translate(-50%, 50%); }
#platform .step02 .diagram .center figure{ position: relative; z-index: 10; }
#platform .step02 .diagram .center figure img{ border-radius: 30px; }
#platform .step02 .diagram .center figure::after{ content: ""; width: 100%; height: 100px; background: url("/img/sub/product/platform_red_arrow.svg") no-repeat center center / contain; position: absolute; bottom: 0; left: 0; z-index: 20; transform: translateY(50%); }

#platform .step02 .diagram .grid-box{ display: grid; grid-template-columns: repeat(2, 1fr); margin: -10px; position: relative; z-index: 10; }
#platform .step02 .diagram .grid-box .item{ background: #FFF; box-shadow: 0 0 30px rgba(195, 8, 19, 0.1); border-radius: 30px; padding: 40px 50px; margin: 10px; }
#platform .step02 .diagram .item .grid{ display: grid; grid-template-columns: repeat(2, 1fr); position: relative; }
#platform .step02 .diagram .item .tit{ margin-bottom: 30px; }
#platform .step02 .diagram .item .tit ul{ display: flex; flex-wrap: wrap; justify-content: center; margin: 7px -5px -3px; }
#platform .step02 .diagram .item .tit ul li{ border: 1px solid #DDD; border-radius: 25px; font-size: 16px; font-weight: 500; color: #666; letter-spacing: -0.03em; line-height: 1; padding: 3px 10px; margin: 3px 5px; }
#platform .step02 .diagram .item h6{ font-size: 22px; font-weight: 500; color: #222; letter-spacing: -0.03em; }
#platform .step02 .diagram .item dl{ border: 1px solid #E79CA1; border-radius: 20px; overflow: hidden; }
#platform .step02 .diagram .item dl dt{ background: #E79CA1; font-size: 18px; font-weight: 500; color: #FFF; letter-spacing: -0.03em; padding: 12px; }
#platform .step02 .diagram .item dl dd{ min-height: 135px; display: flex; flex-direction: column; justify-content: center; padding: 15px; }

#platform .step02 .diagram .item01 .grid{ margin: -15px; }
#platform .step02 .diagram .item01 .grid > div{ margin: 15px; }
#platform .step02 .diagram .item01 dl{ border: 1px solid var(--mainColor); }
#platform .step02 .diagram .item01 dl dt{ background: var(--mainColor); }
#platform .step02 .diagram .item01 dl dt::before{ content: ""; display: inline-block; width: 25px; height: 25px; background: url("/img/sub/product/platform_icon01.png") no-repeat center center / contain; vertical-align: middle; margin-right: 5px; transform: translateY(-2px); }
#platform .step02 .diagram .item01 p{ font-size: 18px; font-weight: 300; color: #666; letter-spacing: -0.03em; text-align: left; }
#platform .step02 .diagram .item01 p:not(:last-child){ margin-bottom: 10px; }
#platform .step02 .diagram .item01 p span{ display: inline-block; background: #E79CA1; border-radius: 25px; font-family: var(--engFont); font-size: 16px; font-weight: 500; color: #FFF; letter-spacing: 0; vertical-align: bottom; padding: 2px 10px; margin-right: 10px; }

#platform .step02 .diagram .item02 .grid{ margin: -33px; }
#platform .step02 .diagram .item02 dl{ margin: 33px; }
#platform .step02 .diagram .item02 p{ font-size: 18px; font-weight: 400; color: #666; letter-spacing: -0.03em; margin-top: 15px; }
#platform .step02 .diagram .item02 .plus{ width: 110px; height: 110px; display: flex; flex-direction: column; justify-content: center; background: #FFF; border: 2px dashed var(--mainColor); box-shadow: 0 0 30px rgba(195, 8, 19, 0.1); border-radius: 50%; font-size: 16px; font-weight: 500; color: var(--mainColor); letter-spacing: -0.03em; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }
#platform .step02 .diagram .item02 .plus span{ display: block; margin-top: 5px; }
 

#platform .step03 figure{ border-radius: 20px; box-shadow: var(--shadow); overflow: hidden; }
#platform .step03 .flex{ display: flex; justify-content: center; align-items: center; }
#platform .step03 .txt{ padding-left: 20px; }
#platform .step03 .txt p{ font-size: 20px; font-weight: 400; color: #333; letter-spacing: -0.03em; line-height: 1.5; text-align: left; }
#platform .step03 .txt p:not(:last-child){ margin-bottom: 20px; }
#platform .step03 .txt p span{ display: block; font-size: 18px; font-weight: 300; color: #666; letter-spacing: -0.03em; }


#platform .step04{ text-align: center; }
#platform .step04 .dl-box{ display: flex; flex-wrap: wrap; border: 2px dashed var(--mainColor); border-radius: 30px; padding: 30px; margin-bottom: 60px; position: relative; z-index: 10; }
#platform .step04 .dl-box::before,
#platform .step04 .dl-box::after{ content: ""; position: absolute; bottom: -60px; left: 50%; }
#platform .step04 .dl-box::before{ width: 1px; height: 60px; border-right: 2px dashed var(--mainColor); left: calc(50% - 2px); }
#platform .step04 .dl-box::after{ width: 10px; height: 10px; background: var(--mainColor); border-radius: 50%; transform: translate(-50%, 75%); }
#platform .step04 .dl-box dl{ width: calc((100% - 180px) / 4); box-shadow: 0 0 30px rgba(195, 8, 19, 0.1); border-radius: 20px; overflow: hidden; margin-right: 60px; display: flex; flex-direction: column; position: relative; }
#platform .step04 .dl-box dl::after{ content: ""; width: 16px; height: 12px; background: url("/img/sub/product/gray_arrow.svg") no-repeat center center / contain; position: absolute; top: 50%; right: -30px; transform: translate(50%, -50%); }
#platform .step04 .dl-box dl:last-of-type::after{ display: none; }
#platform .step04 .dl-box dl:nth-of-type(4n){ margin-right: 0; }
#platform .step04 .dl-box dl dt{ background: var(--bg); font-size: 20px; font-weight: 500; color: #FFF; letter-spacing: -0.03em; padding: 12px; }
#platform .step04 .dl-box dl dd{ flex: 1 0 auto; background: #FFF; padding: 30px; }
#platform .step04 .dl-box h6{ min-height: 70px; display: flex; flex-direction: column; justify-content: center; border: 2px solid #D12E20; border-radius: 10px; font-size: 18px; font-weight: 500; color: #D12E20; padding: 10px; }

#platform .step04 .dl-box .dl01 dd{ padding-top: 20px; }
#platform .step04 .dl01 ul{ background: rgba(234, 117, 55, 0.1); border-radius: 15px; padding: 10px; }
#platform .step04 .dl01 ul:not(:last-child){ margin-bottom: 10px; }
#platform .step04 .dl01 ul li{ background: #FFF; border-radius: 10px; font-size: 18px; font-weight: 400; color: #333; letter-spacing: -0.03em; padding: 10px; }
#platform .step04 .dl01 ul li:not(:last-of-type){ margin-bottom: 5px; }

#platform .step04 .dl02 ul{ display: flex; flex-wrap: wrap; justify-content: space-between; margin-top: 20px; }
#platform .step04 .dl02 ul li{ width: calc((100% - 5px) / 2); }
#platform .step04 .dl02 img{ border-radius: 10px; }

#platform .step04 .dl03 .arrow{ padding: 20px 0; position: relative; }
#platform .step04 .dl03 .arrow::before{ content: ""; width: 1px; height: 100%; border-right: 2px dashed var(--bg); position: absolute; top: 0; left: calc(50% - 1px); transform: translateX(-50%); }
#platform .step04 .dl03 .arrow::after{ content: ""; width: 11px; height: 10px; background: var(--bg); position: absolute; bottom: 0; left: 50%; transform: translate(-50%, 50%); clip-path: polygon(50% 100%, 0 0, 100% 0); -webkit-clip-path: polygon(50% 100%, 0 0, 100% 0); }
#platform .step04 .dl03 .arrow span{ display: inline-block; background: var(--mainColor); border-radius: 25px; font-family: var(--engFont); font-size: 16px; font-weight: 500; color: #FFF; padding: 3px 10px 2px; position: relative; z-index: 10; }
#platform .step04 .dl03 ul{ display: flex; flex-wrap: wrap; justify-content: space-between; margin-bottom: -5px; }
#platform .step04 .dl03 ul li{ width: calc((100% - 5px) / 2); background: rgba(209, 46, 32, 0.1); border-radius: 10px; padding: 15px 10px; margin-bottom: 5px; }
#platform .step04 .dl03 ul li p{ font-size: 16px; font-weight: 400; color: #333; letter-spacing: -0.03em; margin-top: 5px; }

#platform .step04 .dl04 dd{ align-content: center; }
#platform .step04 .dl04 dd img{ filter: drop-shadow(0 0 20px rgba(0, 0, 0, 0.15)); -webkit-filter: drop-shadow(0 0 20px rgba(0, 0, 0, 0.15)); }

#platform .step04 .flex-box{ display: flex; background: #FFF; box-shadow: 0 0 30px rgba(195, 8, 19, 0.1); border-radius: 30px; }
#platform .step04 .flex-box > div{ width: 50%; border-radius: 30px; padding: 50px 80px; }
#platform .step04 .flex-box .img{ align-content: center; background: #EDEDED; border-radius: 30px; position: relative; }
#platform .step04 .flex-box .img::before{ content: ""; width: 100%; height: 100%; background: linear-gradient(to right, rgba(224, 47, 57, 0.3), transparent); position: absolute; top: 0; left: 0; border-radius: inherit; }
#platform .step04 .flex-box .img figure{ position: relative; z-index: 10; }
#platform .step04 .flex-box .img figure img{ border-radius: 30px; box-shadow: var(--shadow); }
#platform .step04 .flex-box dl{ height: 100%; display: flex; flex-direction: column; }
#platform .step04 .flex-box dl dt{ font-size: 24px; font-weight: 500; color: #222; letter-spacing: -0.03em; margin-bottom: 20px; }
#platform .step04 .flex-box dl dd{ flex: 1 0 auto; align-content: center; }
#platform .step04 .flex-box ul{ display: flex; flex-wrap: wrap; margin-bottom: -10px; }
#platform .step04 .flex-box ul li{ flex-grow: 1; display: flex; justify-content: center; align-items: center; width: calc((100% - 20px) / 3); min-height: 120px; background: #F5F5F5; border-radius: 20px; font-size: 20px; font-weight: 400; color: #333; letter-spacing: -0.03em; margin-right: 10px; margin-bottom: 10px; }
#platform .step04 .flex-box ul li:last-of-type{ margin-right: 0; }
#platform .step04 .flex-box ul li:nth-of-type(3n){ margin-right: 0; }


#platform .step05 figure{ border-radius: 20px; overflow: hidden; box-shadow: var(--shadow); }
#platform .step05 .figure figure:not(:last-of-type){ margin-bottom: 30px; }
#platform .step05 .flex{ display: flex; flex-wrap: wrap; justify-content: space-between; margin-bottom: -10px; }
#platform .step05 .flex li{ width: calc((100% - 10px) / 2); display: flex; align-items: center; background: #FFF; border-radius: 20px; box-shadow: var(--shadow); padding: 9px; margin-bottom: 10px; }
#platform .step05 .flex li figure{ width: 50px; overflow: hidden; border: 1px solid #DDD; border-radius: 50%; box-shadow: unset; }
#platform .step05 .flex li p{ width: calc(100% - 50px); font-size: 15px; font-weight: 400; color: #333; letter-spacing: -0.03em; text-align: left; padding-left: 10px; }


#platform .step06{ text-align: center; }
#platform .step06 .diagram{
	--tb: 50px;
	--gap: 60px;
	--cir1: 50px;
}
#platform .step06 .diagram{ position: relative; z-index: 10; }
#platform .step06 .diagram .flex{ display: flex; }
#platform .step06 .diagram .flex > *{ width: calc((100% - (var(--gap) * 3)) / 4); margin-right: var(--gap); position: relative; }
#platform .step06 .diagram figure{ width: 100%; background: #FFF; box-shadow: 0 0 20px rgba(195, 8, 19, 0.1); border-radius: 10px; padding: 5px; }

#platform .step06 .diagram .dl{ align-items: flex-end; }
#platform .step06 .diagram .dl dl:nth-of-type(4n){ margin-right: 0; }
#platform .step06 .diagram .dl dl:first-child,
#platform .step06 .diagram .dl dl:last-child{ bottom: calc(var(--tb) * -1); }
#platform .step06 .diagram .dl dl dt{ background: #ECAFB4; border-radius: 0 0 20px 20px; font-size: 20px; font-weight: 500; color: #FFF; letter-spacing: -0.03em; padding: 7px; }
#platform .step06 .diagram .dl dl dd{ border: 1px solid rgba(195, 8, 19, 0.3); border-radius: 20px 20px 0 0; padding: 10px; }
#platform .step06 .diagram .dl dl dd figure:not(:last-of-type){ margin-bottom: 10px; }

#platform .step06 .diagram .center{ margin: -20px 0; position: relative; z-index: -1; }
#platform .step06 .diagram .circle{ max-width: 380px;  margin: 0 auto; position: relative; padding: var(--cir1); }
#platform .step06 .diagram .circle::before{ content: ""; width: 100%; height: 100%; background: linear-gradient(145deg, var(--orange), var(--mainColor)); opacity: 0.1; border-radius: 50%; position: absolute; top: 0; left: 0; }
#platform .step06 .diagram .circle::after{ content: ""; display: block; padding-bottom: 100%; background: linear-gradient(145deg, var(--orange), var(--mainColor)); border-radius: 50%; }
#platform .step06 .diagram .circle .border{ width: calc(100% + 200px); height: calc(100% + 200px); border: 2px dashed var(--mainColor); border-radius: 50%; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); opacity: 0.1; }
#platform .step06 .diagram .circle .border::before{ content: ""; width: calc(100% + 320px); height: calc(100% + 320px); border: 2px dashed var(--mainColor); border-radius: 50%; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }
#platform .step06 .diagram .circle .text{ position: absolute; top: 50%; left: 0; right: 0; transform: translateY(-50%); z-index: 10; padding: 0 calc(var(--tb) + 20px); }
#platform .step06 .diagram .circle .text p{ font-family: var(--engFont); font-size: 30px; font-weight: 600; color: #FFF; margin-bottom: 20px; }
#platform .step06 .diagram .circle .text svg{ width: auto; height: auto; }

#platform .step06 .diagram .item figure{ border-radius: 20px; padding: 15px 5px; }
#platform .step06 .diagram .item div:first-child,
#platform .step06 .diagram .item div:last-child{ top: calc(var(--tb) * -1); }
#platform .step06 .diagram .item div:nth-of-type(4n){ margin-right: 0; }

#platform .step06 .dl-box{ display: flex; flex-wrap: wrap; justify-content: center; position: relative; z-index: 10; margin-top: 100px; }
#platform .step06 .dl-box > *{ width: calc((100% - 60px) / 3); display: flex; flex-direction: column; background: #FFF; border: 1px solid #ECAFB4; border-radius: 30px; padding: 30px; margin-right: 30px; }
#platform .step06 .dl-box > *:nth-of-type(3n){ margin-right: 0; }
#platform .step06 .dl-box dl dt{ font-size: 24px; font-weight: 600; color: #111; letter-spacing: -0.03em; margin-bottom: 20px; }
#platform .step06 .dl-box dl dd{ flex: 1 0 auto; }

#platform .step06 .dl01 .line{ display: grid; grid-template-columns: 53% 47%; align-items: center; margin: -10px -30px; font-size: 18px; font-weight: 400; color: #333; }
#platform .step06 .dl01 .line > *{ margin: 10px 30px; }
#platform .step06 .dl01 .tit{ display: flex; align-items: center; background: #EEE; border-radius: 60px; padding: 10px; position: relative; }
#platform .step06 .dl01 .tit::after{ content: ""; width: 16px; height: 12px; background: url("/img/sub/product/gray_arrow.svg") no-repeat center center / contain; position: absolute; top: 50%; right: -30px; transform: translate(50%, -50%); }
#platform .step06 .dl01 .tit p{ width: calc(100% - 40px); padding-left: 15px; text-align: left; }
#platform .step06 .dl01 .icon{ width: 40px; height: 40px; display: flex; justify-content: center; align-items: center; background: var(--mainColor); border-radius: 50%; }
#platform .step06 .dl01 span{ display: block; padding: 6px 10px; border: 1px solid #DDD; border-radius: 60px; color: #666; }
#platform .step06 .dl01 .line span:not(:last-child){ margin-bottom: 10px; }

#platform .step06 .dl02 p{ font-size: 20px; font-weight: 500; color: #333; letter-spacing: -0.03em; }
#platform .step06 .dl02 .grid{ display: grid; grid-template-columns: auto 120px auto; }
#platform .step06 .dl02 .grid .icon{ border: 1px solid #DDD; border-radius: 20px; padding: 30px 15px; }
#platform .step06 .dl02 .grid .icon p{ margin-top: 20px; }
#platform .step06 .dl02 .grid .reset{ display: flex; flex-direction: column; justify-content: center; position: relative; padding: 0 15px; }
#platform .step06 .dl02 .grid .reset::before{ content: ""; width: calc(100% + 5px); height: 1px; border-bottom: 2px dashed var(--mainColor); position: absolute; top: calc(50% - 2px); left: calc(50% - 5px); transform: translateX(-50%); }
#platform .step06 .dl02 .grid .reset::after{ content: ""; width: 10px; height: 12px; background: var(--mainColor); position: absolute; top: 50%; right: -5px; transform: translateY(-50%); clip-path: polygon(100% 50%, 0 0, 0 100%); -webkit-clip-path: polygon(100% 50%, 0 0, 0 100%); }
#platform .step06 .dl02 .grid .reset .cir{ position: relative; }
#platform .step06 .dl02 .grid .reset .cir::before{ content: ""; display: block; padding-bottom: 100%; background: var(--mainColor); border-radius: 50%; }
#platform .step06 .dl02 .grid .reset .txt{ color: #FFF; position: absolute; top: 50%; left: 0; right: 0; transform: translateY(-50%); }
#platform .step06 .dl02 .grid .reset .txt span{ display: block; font-size: 18px; font-weight: 500; letter-spacing: -0.03em; margin-top: 5px; }
#platform .step06 .dl02 dd > p{ color: var(--mainColor); margin-top: 20px; }

#platform .step06 .dl03 .grid{ display: grid; margin: -4px; }
#platform .step06 .dl03 .grid > *{ margin: 4px; }
#platform .step06 .dl03 .icon{ grid-template-columns: repeat(3, 1fr); }
#platform .step06 .dl03 .icon > div{ border: 1px solid #DDD; border-radius: 20px; padding: 10px 15px; position: relative; }
#platform .step06 .dl03 .icon > div::before{ content: ""; width: 16px; height: 12px; background: url("/img/sub/product/gray_arrow.svg") no-repeat center center / contain; position: absolute; top: 50%; left: -4px; transform: translate(-50%, -50%); }
#platform .step06 .dl03 .icon > div:first-child::before{ display: none; }
#platform .step06 .dl03 .icon span{ display: inline-block; background: #AAA; border-radius: 30px; padding: 3px 10px 2px; font-family: var(--engFont); font-size: 14px; font-weight: 500; color: #FFF; }
#platform .step06 .dl03 .icon figure{ display: block; margin: 10px 0 5px; }
#platform .step06 .dl03 .icon p{ font-size: 18px; font-weight: 500; color: #333; letter-spacing: -0.03em; }
#platform .step06 .dl03 .icon > div:last-child span{ background: #000; }

#platform .step06 .dl03 .txt{ grid-template-columns: repeat(4, 1fr); margin-top: 15px; }
#platform .step06 .dl03 .txt p{ align-content: center; background: #F9E6E8; border-radius: 10px; min-height: 60px; font-size: 16px; font-weight: 400; color: #333; letter-spacing: -0.03em; padding: 5px; }


#platform .step07 .graph{
	--gap: 100px;
}
#platform .step07 .graph{ display: grid; grid-template-columns: auto 640px; align-items: center; text-align: center; }
#platform .step07 .graph figure{ position: relative; overflow: hidden; }
#platform .step07 .txt{ padding-left: var(--gap); position: relative; }
#platform .step07 .txt ul::before{ content: ""; width: 1px; height: 100%; border-right: 2px dashed #000; position: absolute; top: 0; left: calc(var(--gap) / 2); }
#platform .step07 .txt ul li{ position: relative; z-index: 10; }
#platform .step07 .txt ul li::before{ content: ""; width: calc(var(--gap) / 2); height: 50%; background: #FFF; position: absolute; left: 0; transform: translateX(-100%); }
#platform .step07 .txt ul li:first-child::before{ top: 0; }
#platform .step07 .txt ul li:last-child::before{ bottom: 0; }
#platform .step07 .txt ul li:not(:first-child, :last-child)::before{ display: none; }
#platform .step07 .txt ul li:not(:last-of-type){ margin-bottom: 10px; }
#platform .step07 .txt dl{ background: #F5F5F5; border: 1px solid #DDD; border-radius: 30px; padding: 30px; position: relative; }
#platform .step07 .txt dl::before{ content: ""; width: 10px; height: 10px; background: #000; border-radius: 50%; position: absolute; top: 50%; left: 0; transform: translate(-50%, -50%); }
#platform .step07 .txt dl::after{ content: ""; width: calc(var(--gap) / 2); height: 1px; border-bottom: 2px dashed #000; position: absolute; top: 50%; left: 0; transform: translate(-100%, -50%); }
#platform .step07 .txt ul li:nth-of-type(2) dl::after{ width: var(--gap); }
#platform .step07 .txt dl dt{ font-size: 22px; font-weight: 400; color: #111; letter-spacing: -0.03em; margin-bottom: 20px; }
#platform .step07 .txt dl dt strong{ font-weight: 600; }
#platform .step07 .txt dl dt span{ display: block; font-size: 16px; color: #666; margin-top: 5px; }
#platform .step07 .txt dl dd{ display: grid; grid-template-columns: repeat(2, 1fr); margin: -5px; }
#platform .step07 .txt figure{ display: block; background: #FFF; box-shadow: 0 0 20px rgba(0, 0, 0, 0.1); border-radius: 10px; padding: 5px; margin: 5px; }


#platform .bridge .grid-box{ display: grid; grid-template-columns: 640px auto; align-items: center; }
#platform .bridge .txt{ padding-right: 100px; }
#platform .bridge .sub-title{ text-align: left; margin-bottom: 40px; }
#platform .bridge .viewBtn{ margin: 30px 0 0; }
#platform .bridge dl dt{ display: inline-block; background: var(--mainColor); border-radius: 25px; font-size: 18px; font-weight: 600; color: #FFF; letter-spacing: -0.03em; padding: 8px 20px; margin-bottom: 20px; }
#platform .bridge ul{ display: grid; grid-template-columns: repeat(5, 1fr); margin: -5px; }
#platform .bridge ul li{ margin: 5px; }
#platform .bridge ul li figure{ display: block; background: #FFF; border-radius: 10px; box-shadow: 3px 3px 3px rgba(195, 8, 19, 0.1); text-align: center; padding: 10px; }


#platform .devops .banner{ display: flex; flex-wrap: wrap; justify-content: space-between; margin-top: 80px; }
#platform .devops .banner > div{ width: calc((100% - 20px) / 2); display: flex; justify-content: space-between; align-items: center; border-radius: 30px; padding: 40px 80px; overflow: hidden; }
#platform .devops .banner dl{ width: calc(100% - 200px); }
#platform .devops .banner dl dt{ font-size: 28px; font-weight: 600; letter-spacing: -0.03em; margin-bottom: 20px; }
#platform .devops .banner dl dd{ font-size: 20px; font-weight: 300; color: #333; letter-spacing: -0.03em; position: relative; padding-left: 12px; }
#platform .devops .banner dl dd:not(:last-of-type){ margin-bottom: 10px; }
#platform .devops .banner dl dd::before{ content: ""; width: 4px; height: 4px; background: #AAA; border-radius: 50%; position: absolute; top: calc(1.3em / 2); left: 0; transform: translateY(-50%); }
#platform .devops .banner .icon{ width: 158px; height: 158px; display: flex; justify-content: center; align-items: center; background: #FFF; box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.1); border-radius: 50%; padding: 20px; position: relative; }
#platform .devops .banner .icon::before{ content: ""; width: 100%; height: 200%; transform: rotate(-45deg); transform-origin: top; position: absolute; top: 50%; left: 0; z-index: -5; }

#platform .devops .banner .red{ background: rgba(195, 8, 19, 0.05); }
#platform .devops .banner .red dt{ color: var(--mainColor); }
#platform .devops .banner .red .icon::before{ background: #F9E6E8; }

#platform .devops .banner .orange{ background: rgba(234, 117, 55, 0.08); }
#platform .devops .banner .orange dt{ color: var(--orange); }
#platform .devops .banner .orange .icon::before{ background: #FBE3D7; }


#platform .module{ overflow: hidden; }


#platform .built{
	--top: 30px;
	--width: (100% - 60px) / 4;
}
#platform .built{ text-align: center; }
#platform .built .center{ max-width: 520px; display: flex; position: relative; margin: 0 auto; }
#platform .built .center svg{ max-width: 100%; width: auto; height: auto; }
#platform .built .center svg .cloud03{ filter: drop-shadow(0 0 50px rgba(195, 8, 19, 0.1)); -webkit-filter: drop-shadow(0 0 50px rgba(195, 8, 19, 0.1)); }
#platform .built .center svg .arrow{ filter: drop-shadow(0 0 30px rgba(0, 0, 0, 0.2)); -webkit-filter: drop-shadow(0 0 30px rgba(0, 0, 0, 0.2)); }
#platform .built .center .txt{ position: absolute; top: 50%; left: 0; right: 0; transform: translateY(-50%); }
#platform .built .center p{ font-family: var(--engFont); font-size: 36px; font-weight: 600; color: #FFF; letter-spacing: -0.03em; }

#platform .built .line{ display: flex; flex-wrap: wrap; justify-content: center; padding-top: var(--top); position: relative; }
#platform .built .line::before{ content: ""; width: calc(100% - (var(--width))); height: 1px; border-bottom: 1px dashed #000; position: absolute; top: -1px; left: 50%; transform: translate(-50%); }
#platform .built .line:not(:last-of-type){ margin-bottom: var(--top); }
#platform .built .item{ width: calc(var(--width)); padding: 30px; padding-top: 40px; margin-right: 20px; position: relative; z-index: 10; }
#platform .built .item:nth-of-type(4n){ margin-right: 0; }
#platform .built .item:last-child{ margin-right: 0 !important; }
#platform .built .item::before{ content: ""; background: #FFF; box-shadow: var(--shadow); border-radius: 30px; position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: -1; }
#platform .built .item .border{ width: calc(50% + 20px); height: var(--top); background: #FFF; border-right: 1px dashed #000; position: absolute; top: 0; left: -20px; z-index: -5; transform: translateY(-100%); }
#platform .built .item:not(:first-child, :last-child) .border{ height: calc(var(--top) - 1px); }
#platform .built .item:first-child .border{ left: -20px;}
#platform .built .item:last-child .border{ left: auto; right: -20px; border-right: none; border-left: 1px dashed #000; }
#platform .built .item > span{ width: 30px; height: 30px; display: inline-block; background: var(--bg); border-radius: 50%; font-family: var(--engFont); font-size: 16px; font-weight: 700; color: #FFF; line-height: 30px; margin: 0 auto; }
#platform .built .item h6{ font-family: var(--engFont); font-size: 28px; font-weight: 500; color: #222; margin: 10px 0 5px; }
#platform .built .item p{ font-size: 18px; font-weight: 400; color: #333; letter-spacing: -0.03em; }
#platform .built .item figure{ border-radius: 20px; overflow: hidden; margin-top: 25px; }
#platform .built .item .viewBtn{ background: #F5F5F5; margin-top: 8px; }

@media screen and (max-width: 1600px){
	#platform .step-title{ margin-bottom: 40px; }
	#platform .step-title p{ font-size: 20px; }
	#platform .step-title p span{ font-size: 15px; }
	#platform .step-title h4{ font-size: 30px; }

	
	#platform .step-box > dl > dt{ font-size: 17px; padding: 7px 15px; }
	#platform .step-box h6{ font-size: 22px; }
	#platform .step-box > dl > dd{ padding: 40px; }
	#platform .step-box .radius-list li{ font-size: 18px; }


	#platform .workflow{
		--width: 30%;
		--gap: 90px;
		--lr: 40px;
	}
	#platform .workflow .circle .text span{ font-size: 20px; }
	#platform .workflow .circle .text h5{ font-size: 36px; }

	#platform .workflow .line .box{ padding: 20px; }
	#platform .workflow .line .box span{ font-size: 24px; }
	#platform .workflow .line .box p{ font-size: 17px; }


	#platform .step01 .bottom dl dt{ font-size: 22px; }
	#platform .step01 .bottom ul li{ font-size: 18px; }


	#platform .step02 .diagram .grid-box .item{ padding: 30px 40px; }
	#platform .step02 .diagram .item h6{ font-size: 20px; }
	#platform .step02 .diagram .item dl dt{ font-size: 17px; }
	#platform .step02 .diagram .item01 p span{ font-size: 16px; }
	#platform .step02 .diagram .item01 p{ font-size: 17px; }
	#platform .step02 .diagram .item02 p{ font-size: 17px; }


	#platform .step03 .txt p{ font-size: 18px; }
	#platform .step03 .txt p span{ font-size: 16px; }


	#platform .step04 .dl-box{ padding: 20px; }
	#platform .step04 .dl-box dl dt{ font-size: 18px; }
	#platform .step04 .dl-box dl dd{ padding: 20px; }
	#platform .step04 .dl-box h6{ font-size: 17px; }
	#platform .step04 .dl01 ul li{ font-size: 17px; }
	#platform .step04 .dl03 .arrow{ padding: 15px 0; }
	#platform .step04 .dl03 ul li{ padding: 10px; }

	#platform .step04 .flex-box > div{ padding: 40px; }
	#platform .step04 .flex-box dl dt{ font-size: 22px; }
	#platform .step04 .flex-box ul li{ min-height: 90px; font-size: 18px; }


	#platform .step06 .diagram{
		--gap: 30px;
	}
	#platform .step06 .diagram .circle .text p{ font-size: 26px; }
	#platform .step06 .diagram .dl dl dt{ font-size: 18px; }

	#platform .step06 .dl-box{ margin-top: 60px; }
	#platform .step06 .dl-box dl dt{ font-size: 22px; } 
	#platform .step06 .dl01 .line{ font-size: 17px; }
	#platform .step06 .dl02 .grid .icon{ padding: 15px; }
	#platform .step06 .dl02 p{ font-size: 18px; }
	#platform .step06 .dl02 .grid .reset .txt span{ font-size: 17px; }
	#platform .step06 .dl03 .icon p{ font-size: 17px; }


	#platform .step07 .txt dl dt{ font-size: 20px; }


	#platform .bridge dl dt{ font-size: 17px; }


	#platform .devops .banner{ margin-top: 60px; }
	#platform .devops .banner > div{ padding: 30px 50px; }
	#platform .devops .banner dl dt{ font-size: 24px; }
	#platform .devops .banner dl dd{ font-size: 18px; }

	
	#platform .built .center{ max-width: 450px; }
	#platform .built .center p{ font-size: 32px; }
	#platform .built .item{ padding: 25px; }
	#platform .built .item h6{ font-size: 24px; }
	#platform .built .item p{ font-size: 17px; }
}

@media screen and (max-width: 1500px){
	#platform .step02 .diagram .item .grid{ grid-template-columns: repeat(1, 1fr); }
	#platform .step02 .diagram .item dl dt{ padding: 10px; }
	#platform .step02 .diagram .item dl dd{ min-height: 120px; }
	#platform .step02 .diagram .item02 .grid{ margin: -45px; }
	#platform .step02 .diagram .item02 dl{ margin: 45px; }
	#platform .step02 .diagram .item02 .plus{ width: 100px; height: 100px; font-size: 15px; }


	#platform .step06 .dl03 .icon > div{ padding: 0 15px 15px; }
	#platform .step06 .dl03 .icon span{ width: calc(100% + 32px); margin-left: -16px; border-radius: 15px 15px 0 0; }


	#platform .bridge .grid-box{ grid-template-columns: repeat(2, 1fr); }
	#platform .bridge .txt{ padding-right: 50px; }
}

@media screen and (max-width: 1400px){
	#platform .step04 .dl-box dl{ width: calc((100% - 120px) / 4); margin-right: 40px; }
	#platform .step04 .dl-box dl::after{ right: -20px; }

	#platform .step07 .graph{ grid-template-columns: repeat(2, 1fr); }
}

@media screen and (max-width: 1280px){
	#platform .step-title{ margin-bottom: 25px; }
	#platform .step-title p{ font-size: 18px; margin-bottom: 10px; }
	#platform .step-title p span{ width: 25px; height: 25px; font-size: 14px; line-height: 25px; }
	#platform .step-title h4{ font-size: 26px; }

	#platform .step-box{
		--gap: 60px;
	}
	#platform .step-box > dl{ width: calc((100% - 120px) / 3); }
	#platform .step-box > dl > dt{ font-size: 15px; padding: 5px 10px; margin-bottom: 15px; }
	#platform .step-box > dl > dd{ padding: 25px; }
	#platform .step-box > dl > dd::after{ width: 40px; height: 40px; }
	#platform .step-box h6{ font-size: 20px; margin-bottom: 20px; }
	#platform .step-box .radius-list{ margin-top: 10px; }
	#platform .step-box .radius-list li{ font-size: 16px; padding: 10px; }


	#platform .workflow{
		--width: 28%;
		--gap: 60px;
		--lr: 30px;
		--cir1: 20px;
		--cir2: 70px;
	}
	#platform .workflow .circle .text span{ font-size: 18px; }
	#platform .workflow .circle .text h5{ font-size: 32px; }

	#platform .workflow .line ul li::before{ width: 8px; height: 8px; }
	#platform .workflow .line .box{ padding: 15px; }
	#platform .workflow .line .box span{ font-size: 20px; }
	#platform .workflow .line .box p{ font-size: 16px; margin-top: 5px; }


	#platform .step01 .grid{ grid-template-columns: 60% 40%; margin: -10px; }
	#platform .step01 .grid > div{ margin: 10px; }
	#platform .step01 .left{ padding: 25px; }
	#platform .step01 .top{ padding: 25px; }
	#platform .step01 .bottom{ padding: 25px; }
	#platform .step01 .bottom dl dt{ font-size: 20px; }
	#platform .step01 .bottom ul li{ font-size: 16px; padding: 10px; }


	#platform .step02 .diagram .item .tit{ margin-bottom: 15px; }
	#platform .step02 .diagram .grid-box .item{ padding: 25px 30px; }
	#platform .step02 .diagram .item .tit ul{ margin: 7px -3px -3px; }
	#platform .step02 .diagram .item .tit ul li{ margin: 3px; }
	#platform .step02 .diagram .item dl dt{ font-size: 16px; }
	#platform .step02 .diagram .item02 p{ font-size: 16px; margin-top: 10px; }


	#platform .step04 .dl-box{ padding: 15px; margin-bottom: 30px; }
	#platform .step04 .dl-box::before, 
	#platform .step04 .dl-box::after{ bottom: -30px; }
	#platform .step04 .dl-box::before{ height: 30px; }
	#platform .step04 .dl-box dl dt{ font-size: 17px; }
	#platform .step04 .dl-box dl dd{ padding: 15px 20px; }
	#platform .step04 .dl-box h6{ font-size: 16px; }
	#platform .step04 .dl01 ul li{ font-size: 16px; padding: 7px; }
	#platform .step04 .dl03 .arrow span{ font-size: 15px; }

	#platform .step04 .flex-box > div{ padding: 30px; }
	#platform .step04 .flex-box dl dt{ font-size: 20px; margin-bottom: 15px; }
	#platform .step04 .flex-box ul li{ min-height: 75px; font-size: 17px; }


	#platform .step06 .diagram{
		--gap: 20px;
		--cir1: 40px;
	}
	#platform .step06 .diagram figure{ padding: 5px 10px; }
	#platform .step06 .diagram .item figure{ padding: 10px 15px; }
	#platform .step06 .diagram .circle{ max-width: 300px; }
	#platform .step06 .diagram .circle .border{ width: calc(100% + 150px); height: calc(100% + 150px); }
	#platform .step06 .diagram .circle .text p{ font-size: 22px; margin-bottom: 10px; }
	#platform .step06 .diagram .dl dl dt{ font-size: 17px; }


	#platform .step06 .dl-box{ margin-top: 30px; margin-bottom: -20px; }
	#platform .step06 .dl-box > *{ width: calc((100% - 20px) / 2); margin-right: 20px; margin-bottom: 20px; padding: 20px; }
	#platform .step06 .dl-box > *:nth-of-type(2n){ margin-right: 0; }
	#platform .step06 .dl-box dl dt{ font-size: 20px; margin-bottom: 10px; }
	#platform .step06 .dl01 .line{ font-size: 16px; margin: 0 -20px; }
	#platform .step06 .dl01 .line > *{ margin: 10px 20px; }
	#platform .step06 .dl01 .tit{ padding: 5px; }
	#platform .step06 .dl01 .tit::after{ right: -20px; }
	#platform .step06 .dl01 .icon{ width: 35px; height: 35px; }
	#platform .step06 .dl02 dd{ align-content: center; }
	#platform .step06 .dl02 p{ font-size: 16px; margin-top: 10px; }
	#platform .step06 .dl02 .grid .reset .txt span{ font-size: 16px; }
	#platform .step06 .dl03 .icon p{ font-size: 16px; }
	#platform .step06 .dl03 .txt p{ font-size: 15px; }
	#platform .step06 .dl03 .grid{ margin-top: 5px; }


	#platform .step07 .graph{
		--gap: 50px;
	}
	#platform .step07 .txt dl{ padding: 20px; }
	#platform .step07 .txt dl::before{ width: 7px; height: 7px; }
	#platform .step07 .txt dl dt{ font-size: 19px; margin-bottom: 10px; }
	#platform .step07 .txt dl dt span{ font-size: 15px; }


	#platform .bridge .sub-title{ margin-bottom: 20px; }
	#platform .bridge .viewBtn{ margin-top: 20px; }


	#platform .devops .banner{ margin-top: 30px; }
	#platform .devops .banner > div{ padding: 25px 40px; }
	#platform .devops .banner dl{ width: calc(100% - 150px); }
	#platform .devops .banner dl dt{ font-size: 20px; margin-bottom: 15px; }
	#platform .devops .banner dl dd{ font-size: 16px; }
	#platform .devops .banner .icon{ width: 120px; height: 120px; }


	#platform .built .center{ max-width: 400px; }
	#platform .built .center p{ font-size: 28px; }
	#platform .built .item{ padding: 20px; }
	#platform .built .item > span{ width: 27px; height: 27px; font-size: 15px; line-height: 27px; }
	#platform .built .item h6{ font-size: 20px; }
	#platform .built .item p{ font-size: 16px; }
	#platform .built .item figure{ margin-top: 15px; }
}

@media screen and (max-width: 1200px){
	#platform .step-box{
		--gap: 80px;
	}
	#platform .step-box{ flex-direction: column; margin-bottom: calc(var(--gap) * -1); }
	#platform .step-box > dl{ width: 100%; margin-right: 0; margin-bottom: var(--gap); transform: translateY(var(--aosPlus)); }
	#platform .step-box > dl.aos-animate{ transform: translateY(0); }
	#platform .step-box > dl > dd::after{ top: calc(100% + (var(--gap) / 2)); right: 50%; transform: translate(50%, -50%) rotate(90deg); }
	#platform .step-box .radius-list{ max-width: 500px; margin-left: auto; margin-right: auto; }


	#platform .step04 .dl-box dl{ width: calc((100% - 40px) / 2); margin-bottom: 20px; }
	#platform .step04 .dl-box dl:nth-of-type(2n){ margin-right: 0; }
	#platform .step04 .dl-box dl:nth-of-type(2n)::after{ display: none; }
	#platform .step04 .dl-box dl dd{ padding: 10px 15px; }


	#platform .step05 .figure{ display: flex; justify-content: center; align-items: center; margin: -15px; }
	#platform .step05 .figure figure{ margin: 15px !important; }
	#platform .step05 .flex li{ width: calc((100% - 30px) / 4); margin-right: 10px; }
	#platform .step05 .flex li:nth-of-type(4n){ margin-right: 0; }
}

@media screen and (max-width: 1000px){
	#platform .workflow{
		--gap: 40px;
	}
	#platform .workflow .center{ padding: 0; }
	#platform .workflow .center .inner{ width: 350px; margin: 0 auto; }

	#platform .workflow .line{ padding-top: 20px; position: static; transform: unset; }
	#platform .workflow .line ul{ grid-template-columns: repeat(3, 1fr); margin: -10px; }
	#platform .workflow .line ul li{ grid-column: unset !important; padding: var(--gap) 0 0 !important; margin: 10px; left: unset !important; right: unset !important; top: calc(var(--gap) * -1); transform: translateY(var(--aosPlus)) !important; }
	#platform .workflow .line ul li:nth-of-type(2),
	#platform .workflow .line ul li:nth-of-type(5){ top: 0; }
	#platform .workflow .line ul li::before{ top: var(--gap); left: 50% !important; right: unset !important; transform: translate(-50%, -50%) !important; }
	#platform .workflow .line ul li::after{ width: 1px; height: var(--gap); border: none; border-right: 2px dashed var(--mainColor); top: 0; left: 50% !important; right: unset !important; transform: translateX(-50%); mask-image: linear-gradient(to top, #000, transparent) !important; -webkit-mask-image: linear-gradient(to top, #000, transparent) !important; }

	#platform .workflow .line.aos-animate ul li{ transform: translateY(0) !important; }


	#platform .step01 .grid{ grid-template-columns: repeat(1, 1fr); }


	#platform .bridge .grid-box{ grid-template-columns: repeat(1, 1fr); }
	#platform .bridge .txt{ order: 2; padding-right: 0; padding-top: 20px; }
	#platform .bridge .img{ order: 1; text-align: center; }


	#platform .module .sub-title em{ display: block; }


	#platform .built .item{ padding: 15px; }
}

@media screen and (max-width: 900px){
	#platform .step-title h4{ font-size: 22px; }


	#platform .workflow .circle .text span{ font-size: 16px; }
	#platform .workflow .circle .text h5{ font-size: 30px; }

	#platform .workflow .line .box span{ font-size: 17px; }


	#platform .step04 .flex-box{ flex-direction: column; }
	#platform .step04 .flex-box > div{ width: 100%; padding: 20px; }


	#platform .step05 .flex li{ width: calc((100% - 20px) / 3); }
	#platform .step05 .flex li:nth-of-type(4n){ margin-right: 10px; }
	#platform .step05 .flex li:nth-of-type(3n){ margin-right: 0; }


	#platform .step06 .diagram{
		--tb: 55px;
		--cir1: 25px;
	}
	#platform .step06 .diagram .circle{ max-width: 260px; }
	#platform .step06 .diagram .circle .text{ padding: 0 var(--tb); }
	#platform .step06 .diagram .circle .text p{ font-size: 20px; }


	#platform .step07 .graph{
		--gap: 20px;
	}
	#platform .step07 .graph{ grid-template-columns: repeat(1, 1fr); }
	#platform .step07 .txt{ padding-left: 0; padding-top: var(--gap); }
	#platform .step07 .txt ul::before{ display: none; }
	#platform .step07 .txt ul li:not(:last-of-type){ margin-bottom: var(--gap); }
	#platform .step07 .txt dl::before{ top: 0; left: 50%; transform: translate(-50%, -50%); }
	#platform .step07 .txt dl::after{ width: 1px !important; height: var(--gap); border: none; border-right: 2px dashed #000; top: 0; left: calc(50% - 1px); transform: translate(-50%, -100%); }


	#platform .devops .banner > div{ padding: 25px 30px; }
	#platform .devops .banner dl{ width: calc(100% - 130px); }
	#platform .devops .banner .icon{ width: 100px; height: 100px; }


	#platform .built .line::before{ display: none; }
	#platform .built .line{ padding: 20px; border: 1px dashed #000; border-radius: 30px; }
	#platform .built .item{ width: calc((100% - 20px) / 2); margin-top: 20px; }
	#platform .built .item:nth-of-type(1),
	#platform .built .item:nth-of-type(2){ margin-top: 0; }
	#platform .built .item:nth-of-type(2n){ margin-right: 0; }
	#platform .built .item .border{ display: none; } 
}

@media screen and (max-width: 850px){
	#platform .step06 .dl-box > *{ width: 100%; margin-right: 0; }
}

@media screen and (max-width: 800px){
	#platform .step02 .diagram .grid-box{ grid-template-columns: repeat(1, 1fr); }

	
	#platform .step06 .diagram .flex{ flex-wrap: wrap; justify-content: space-between; }
	#platform .step06 .diagram .flex > *{ width: calc((100% - var(--gap)) / 2); margin-right: 0; }

	#platform .step06 .diagram .dl dl{ margin-bottom: var(--gap); }
	#platform .step06 .diagram .dl dl:first-child,
	#platform .step06 .diagram .dl dl:last-child{ bottom: unset; }
	#platform .step06 .diagram .dl dl:nth-child(1){ order: 3; }
	#platform .step06 .diagram .dl dl:nth-child(2){ order: 1; }
	#platform .step06 .diagram .dl dl:nth-child(3){ order: 2; }
	#platform .step06 .diagram .dl dl:nth-child(4){ order: 4; }

	#platform .step06 .diagram .item div{ margin-top: var(--gap); }
	#platform .step06 .diagram .item div:first-child, 
	#platform .step06 .diagram .item div:last-child{ top: unset; }


	#platform .devops .banner > div{ width: 100%; }
	#platform .devops .banner > div:not(:last-of-type){ margin-bottom: 20px; }
}

@media screen and (max-width: 750px){
	#platform .step-title br{ display: none; }
}

@media screen and (max-width: 650px){
	#platform .step05 .flex li{ width: calc((100% - 10px) / 2); }
	#platform .step05 .flex li:nth-of-type(3n){ margin-right: 10px; }
	#platform .step05 .flex li:nth-of-type(2n){ margin-right: 0; }
}

@media screen and (max-width: 600px){
	#platform .step04 .dl-box dl{ width: 100%; margin-right: 0; margin-bottom: 40px; }
	#platform .step04 .dl-box dl:last-of-type{ margin-bottom: 0; }
	#platform .step04 .dl-box dl::after{ top: calc(100% + 20px); right: 50%; transform: translate(50%, -50%) rotate(90deg); }
	#platform .step04 .dl-box dl:nth-of-type(2n)::after{ display: block; }
	#platform .step04 .dl-box dl:last-of-type::after{ display: none; }
}

@media screen and (max-width: 550px){
	#platform .workflow br{ display: none; }
	#platform .workflow .line ul{ margin: -5px; }
	#platform .workflow .line ul li{ margin: 5px; }
	#platform .workflow .line .box{ border-radius: 20px; padding: 10px; }
}



/* 제품 - E-GENE™ ITSM */
#itsm{ overflow: hidden; }
#itsm .check-title{ text-align: center; margin-bottom: 60px; }
#itsm .check-title p{ font-size: 24px; font-weight: 500; color: var(--mainColor); letter-spacing: -0.03em; margin-bottom: 10px; }
#itsm .check-title p::before{ content: ""; width: 30px; height: 30px; display: inline-block; background: var(--mainColor) url("/img/sub/product/check_icon.svg") no-repeat center center / contain; border-radius: 50%; vertical-align: middle; margin-right: 10px; }
#itsm .check-title h5{ font-size: 34px; font-weight: 600; color: #111; letter-spacing: -0.03em; line-height: 1.4705; }


#itsm .sec01 .grid-box{ display: grid; grid-template-columns: auto 640px; align-items: center; }
#itsm .sec01 .img{ text-align: center; }
#itsm .sec01 .img figure{ box-shadow: var(--shadow); border-radius: 30px; overflow: hidden; }
#itsm .sec01 .text{ padding-left: 100px; }
#itsm .sec01 .sub-title{ text-align: left; margin-bottom: 0; }


#itsm .keymap .target-figure{ margin-bottom: 60px; }
#itsm .keymap .dl-box{ display: grid; grid-template-columns: repeat(4, 1fr); margin: -10px; text-align: center; }
#itsm .keymap .dl-box .icon{ width: 80px; height: 80px; display: flex; justify-content: center; align-items: center; background: #F9E6E8; border-radius: 50%; padding: 15px; margin: 0 auto; }
#itsm .keymap .dl-box dl{ border: 1px solid #DDD; border-radius: 30px; margin: 10px; padding: 40px; }
#itsm .keymap .dl-box dl dt{ font-size: 22px; font-weight: 500; color: #222; letter-spacing: -0.02em; }
#itsm .keymap .dl-box dl dt p{ margin: 30px 0 20px; }
#itsm .keymap .dl-box dl dd{ font-size: 20px; font-weight: 300; color: #666; letter-spacing: -0.03em; line-height: 1.6; }
#itsm .keymap .dl-box dl dd:not(:last-child){ margin-bottom: 10px; }

#itsm .solution .check-title{ margin-bottom: 0; }
#itsm .solution .target-figure img{ filter: drop-shadow(var(--shadow)); -webkit-filter: drop-shadow(var(--shadow)); }

#itsm .plus-ins .side ul li::before{ background: #FFF; }

#itsm .itgc .top{ display: grid; grid-template-columns: repeat(2, 1fr); align-items: center; background: var(--redBg); border-radius: 50px; padding: 60px; margin-bottom: 160px; position: relative; }
#itsm .itgc .top::before,
#itsm .itgc .top::after{ content: ""; position: absolute; bottom: -80px; }
#itsm .itgc .top::before{ width: 1px; height: 80px; border-right: 2px dashed #000; mask-image: linear-gradient(to top, #000, transparent); -webkit-mask-image: linear-gradient(to top, #000, transparent); left: calc(50% - 2px); }
#itsm .itgc .top::after{ width: 10px; height: 10px; background: #000; border-radius: 50%; left: 50%; transform: translateX(-50%); }
#itsm .itgc .top .grid{ display: grid; grid-template-columns: auto 100px auto; text-align: center; }
#itsm .itgc .card{ background: #FFF; padding: 50px; border-radius: 30px; position: relative; z-index: 10; }
#itsm .itgc .card .icon{ width: 160px; height: 160px; display: flex; justify-content: center; align-items: center; border-radius: 50%; padding: 20px; margin: 0 auto; }
#itsm .itgc .card p{ font-size: 24px; font-weight: 500; letter-spacing: -0.03em; margin: 20px 0 5px; }
#itsm .itgc .card span{ font-size: 18px; font-weight: 300; color: #333; letter-spacing: -0.03em; }

#itsm .itgc .top .plus{ align-content: center; }
#itsm .itgc .top .plus i{ display: inline-block; width: 50px; height: 50px; background: #CCC url("/img/sub/product/plus_icon.svg") no-repeat center center / contain; border-radius: 50%; position: relative; }
#itsm .itgc .top .plus i::before,
#itsm .itgc .top .plus i::after{ content: ""; border: 1px dashed #000; border-radius: 50%; opacity: 0.15; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }
#itsm .itgc .top .plus i::before{ width: calc(100% + 100px); height: calc(100% + 100px); }
#itsm .itgc .top .plus i::after{ width: calc(100% + 240px); height: calc(100% + 240px); }

#itsm .itgc .top .orange{ border: 2px solid var(--orange); }
#itsm .itgc .top .orange .icon{ background: #FDF2EB; }
#itsm .itgc .top .orange p{ color: var(--orange); }
#itsm .itgc .top .red{ border: 2px solid var(--mainColor); }
#itsm .itgc .top .red .icon{ background: #F9E7E8; }
#itsm .itgc .top .red p{ color: var(--mainColor); }

#itsm .itgc .top .text{ padding-left: 120px; }
#itsm .itgc .top .sub-title{ text-align: left; margin-bottom: 0; }

@media screen and (max-width: 1600px){
	#itsm .check-title{ margin-bottom: 40px; }
	#itsm .check-title p{ font-size: 20px; }
	#itsm .check-title p::before{ width: 30px; height: 30px; }
	#itsm .check-title h5{ font-size: 30px; }

	#itsm .keymap .target-figure{ margin-bottom: 40px; }
	#itsm .keymap .dl-box dl{ padding: 30px; }
	#itsm .keymap .dl-box dl dt{ font-size: 20px; }
	#itsm .keymap .dl-box dl dd{ font-size: 18px; }

	#itsm .itgc .top{ padding: 40px; margin-bottom: 100px; }
	#itsm .itgc .top::before,
	#itsm .itgc .top::after{ bottom: -50px; }
	#itsm .itgc .top::before{ width: 1px; height: 50px; }
	#itsm .itgc .card{ padding: 40px; }
	#itsm .itgc .card .icon{ width: 130px; height: 130px; }
	#itsm .itgc .card p{ font-size: 20px; }
	#itsm .itgc .card span{ font-size: 17px; }
}

@media screen and (max-width: 1400px){
	#itsm .sec01 .grid-box{ grid-template-columns: auto 550px; }
	#itsm .sec01 .text{ padding-left: 60px; }

	#itsm .keymap .dl-box br{ display: none; }

	#itsm .itgc .top{ grid-template-columns: auto 450px; }
	#itsm .itgc .top .text{ padding-left: 80px; }
}

@media screen and (max-width: 1280px){
	#itsm .check-title{ margin-bottom: 20px; }
	#itsm .check-title p{ font-size: 18px; margin-bottom: 5px; }
	#itsm .check-title p::before{ width: 20px; height: 20px; margin-right: 7px; transform: translateY(-2px); }
	#itsm .check-title h5{ font-size: 26px; }

	#itsm .keymap .target-figure{ margin-bottom: 20px; }
	#itsm .keymap .dl-box .icon{ width: 70px; height: 70px; }
	#itsm .keymap .dl-box dl{ padding: 25px; }
	#itsm .keymap .dl-box dl dt{ font-size: 18px; }
	#itsm .keymap .dl-box dl dt p{ margin: 15px 0 10px; }
	#itsm .keymap .dl-box dl dd{ font-size: 16px; }

	#itsm .itgc .top{ padding: 35px 30px; margin-bottom: 60px; }
	#itsm .itgc .top::before,
	#itsm .itgc .top::after{ bottom: -40px; }
	#itsm .itgc .top::before{ width: 1px; height: 40px; }
	#itsm .itgc .top::after{ width: 7px; height: 7px; }
	#itsm .itgc .top .grid{ grid-template-columns: calc((100% - 70px) / 2) 70px calc((100% - 70px) / 2); }
	#itsm .itgc .card{ padding: 30px; }
	#itsm .itgc .card .icon{ width: 100px; height: 100px; }
	#itsm .itgc .card p{ font-size: 18px; }
	#itsm .itgc .card span{ font-size: 16px; }
	#itsm .itgc .top .plus i{ width: 40px; height: 40px; }
	#itsm .itgc .top .text{ padding-left: 50px; }
}

@media screen and (max-width: 1200px){
	#itsm .sec01 .grid-box{ display: flex; flex-direction: column-reverse; }
	#itsm .sec01 .text{ padding-left: 0; padding-bottom: 25px; }
	#itsm .sec01 .sub-title{ text-align: center; }
}

@media screen and (max-width: 1050px){
	#itsm .keymap .dl-box{ grid-template-columns: repeat(2, 1fr); }
	#itsm .keymap .dl-box dl{ transition-delay: unset !important; }

	#itsm .itgc .top{ display: flex; flex-direction: column-reverse; }
	#itsm .itgc .top .text{ padding-left: 0; padding-bottom: 25px; }
	#itsm .itgc .top .sub-title{ text-align: center; }
	#itsm .itgc .top .sub-title br{ display: none; }
}

@media screen and (max-width: 900px){
	#itsm .check-title h5{ font-size: 22px; }

	#itsm .keymap .dl-box dl{ padding: 20px 15px; }

	#itsm .itgc .card{ padding: 15px 20px; }
	#itsm .itgc .card .icon{ width: 80px; height: 80px; padding: 15px; }
}

@media screen and (max-width: 750px){
	#itsm .sub-title br{ display: none; }
	#itsm .sub-title em{ display: block; }
	#itsm .check-title h5 em{ display: block; }

	#itsm .solution .check-title{ margin-bottom: 20px; }
}

@media screen and (max-width: 600px){
	#itsm .itgc .top .grid{ width: 80%; grid-template-columns: repeat(1, 1fr); }
	#itsm .itgc .top .plus{ padding: 20px 0; }
}


/* 제품 - E-GENE™ PPMS */
#ppms .it .diagram{
	--tableT: 10px;
	--tableR: 7px;
	--arrowW: 11px;
	--arrowH: 10px;
}
#ppms{ overflow: hidden; }
#ppms .it .diagram{ padding-top: calc(var(--pH) + 15px); }
#ppms .it .diagram .grid-box{ display: grid; grid-template-columns: repeat(3, 1fr); margin: -15px; text-align: center; }
#ppms .it .diagram .item{ margin: 15px; }
#ppms .it .diagram .item > dl{ position: relative; }
#ppms .it .diagram .item > dl::before{ content: ""; width: var(--arrowW); height: var(--arrowH); background: var(--color);clip-path: polygon(50% 100%, 0 0, 100% 0); -webkit-clip-path: polygon(50% 100%, 0 0, 100% 0); position: absolute; left: 50%; }
#ppms .it .diagram .item .bg::before{ bottom: 0; transform: translate(-50%, 50%) scaleY(-1); }
#ppms .it .diagram .item .border::before{ top: 0; transform: translate(-50%, -50%); }
#ppms .it .diagram .item .border::after{ content: ""; width: 1px; height: 40px; border-right: 2px dashed var(--color); position: absolute; top: 0; left: calc(50% - 1px); transform: translate(-50%, -100%); }
#ppms .it .diagram .bg{ border-radius: 30px; }
#ppms .it .diagram .bg dt{ background: var(--color); font-size: 22px; font-weight: 500; color: #FFF; letter-spacing: -0.03em; padding: 15px; border-radius: 30px 30px 0 0; }
#ppms .it .diagram .bg dd{ background: var(--bg); padding: 30px; border-radius: 0 0 30px 30px; }

#ppms .it .diagram .grid{ position: relative; }
#ppms .it .diagram .grid .tit, 
#ppms .it .diagram .grid .line{ display: grid; grid-template-columns: repeat(3, 1fr); margin: calc(var(--tableT) * -1) calc(var(--tableR) * -1);}
#ppms .it .diagram .grid > div:first-of-type{ margin-bottom: 0; }
#ppms .it .diagram .grid > div:last-of-type{ margin-top: 0; }
#ppms .it .diagram .grid .tit > div, 
#ppms .it .diagram .grid .line > div{ margin: var(--tableT) var(--tableR); position: relative; }
#ppms .it .diagram .grid span{ width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; background: #FFF; border-radius: 10px; font-size: 18px; }
#ppms .it .diagram .grid .active span{ background: var(--color); color: #FFF !important; }

#ppms .it .diagram .grid .tit{ position: relative; }
#ppms .it .diagram .grid .tit::before{ content: ""; width: 100px; height: 50px; background: url("/img/sub/product/black_arrow.svg") no-repeat center center / contain; position: absolute; top: 50%; left: var(--tableR); transform: translate(-100%, -50%); }
#ppms .it .diagram .item:first-child .grid .tit::before{ display: none; }
#ppms .it .diagram .grid .tit span{ border: 1px solid var(--color); font-weight: 400; color: var(--color); letter-spacing: -0.03em; padding: 12px 0; }
#ppms .it .diagram .grid .line span{ min-height: 80px; font-weight: 300; color: #666; letter-spacing: -0.03em; padding: 5px; }
#ppms .it .diagram .grid .t{ z-index: 10; }

#ppms .it .diagram .grid i.down{ width: 2px; height: calc(var(--tableT) * 4); background: #000; position: absolute; bottom: 0; left: 50%; transform: translate(-50%, 75%); }
#ppms .it .diagram .grid i.down::before{ content: ""; width: var(--arrowW); height: var(--arrowH); background: #000; clip-path: polygon(50% 100%, 0 0, 100% 0); -webkit-clip-path: polygon(50% 100%, 0 0, 100% 0); position: absolute; bottom: -1px; left: 50%; transform: translateX(-50%); }

#ppms .it .diagram .grid i.left{ width: 2px; height: calc(50% + var(--tableT)); background: #000; position: absolute; left: calc(var(--tableR) * -1); }
#ppms .it .diagram .grid i.left::before{ content: ""; width: var(--tableR); height: 2px; background: #000; position: absolute; left: 0; }
#ppms .it .diagram .grid .t i.left{ top: 50%; }
#ppms .it .diagram .grid .t i.left::before{ top: 0; }
#ppms .it .diagram .grid .t i.left::after{ content: ""; width: var(--arrowH); height: var(--arrowW); background: #000; clip-path: polygon(100% 50%, 0 0, 0 100%); -webkit-clip-path: polygon(100% 50%, 0 0, 0 100%); position: absolute; top: 1px; left: var(--tableR); transform: translateY(-50%); }
#ppms .it .diagram .grid .b i.left{ top: calc(var(--tableT) * -1); }
#ppms .it .diagram .grid .b i.left::before{ content: ""; bottom: 0; transform: translateX(-100%); }

#ppms .it .diagram .grid .arrow{ width: var(--tableR); height: 2px; background: #000; position: absolute; top: calc(50% - 1px); left: calc(var(--tableR) * -1); transform: translateY(-50%); }
#ppms .it .diagram .grid .arrow::before{ content: ""; width: var(--arrowH); height: var(--arrowW); background: #000; clip-path: polygon(100% 50%, 0 0, 0 100%); -webkit-clip-path: polygon(100% 50%, 0 0, 0 100%); position: absolute; top: 1px; left: var(--tableR); transform: translateY(-50%); }

#ppms .it .diagram .dot.mobile{ display: none; }
#ppms .it .diagram .dot{ position: relative; margin-bottom: var(--tableT)  !important; }
#ppms .it .diagram .dot > p{ display: inline-block; background: #333; border-radius: 30px; font-size: 16px; font-weight: 500; color: #FFF; letter-spacing: -0.03em; line-height: 1; padding: 5px 10px; position: absolute; top: calc((var(--dotT) + var(--pH)) * -1); right: -45px; transform: translateX(50%); }
#ppms .it .diagram .dot > p::before{ content: ""; width: 1px; height: calc(var(--dotT) + var(--pH)); border-right: 2px dashed #000; position: absolute; bottom: 0; left: calc(50% - 1px); transform: translate(-50%, 100%); }
#ppms .it .diagram .dot > p::after{ content: ""; width: 10px; height: 10px; background: #000; border-radius: 50%; position: absolute; top: calc(100% + var(--dotT) + var(--pH)); left: 50%; transform: translateX(-50%); }

#ppms .it .diagram .border{ border: 1px solid var(--color); border-radius: 30px; padding: 50px 60px; margin-top: 40px; }
#ppms .it .diagram .border dt{ font-size: 22px; font-weight: 500; color: #222; letter-spacing: -0.03em; margin-bottom: 20px; }
#ppms .it .diagram .border ul li{ background: var(--bg); border-radius: 10px; font-size: 20px; font-weight: 300; color: #333; letter-spacing: -0.03em; padding: 17px; }
#ppms .it .diagram .border ul li:not(:last-of-type){ margin-bottom: 10px; }

#ppms .it .diagram .item02 .grid > div{ grid-template-columns: repeat(2, 1fr); }


#ppms .e-gene{ background: var(--gradiBg); }
#ppms .e-gene .num-list{ margin-top: 60px; }
#ppms .e-gene .num-list ul{ display: grid; grid-template-columns: repeat(3, 1fr); margin: -15px; }
#ppms .e-gene .num-list ul li{ min-height: 80px; display: flex; align-items: center; border: 1px solid rgba(0, 0, 0, 0.1); border-radius: 20px; font-size: 20px; font-weight: 300; color: #333; letter-spacing: -0.03em; padding: 10px 30px; margin: 15px; }
#ppms .e-gene .num-list ul li span{ display: flex; justify-content: center; align-items: center; width: 30px; height: 30px; background: #000; border-radius: 50%; font-family: var(--engFont); font-size: 16px; font-weight: 700; color: #FFF; letter-spacing: 0; line-height: 1; }
#ppms .e-gene .num-list ul li p{ width: calc(100% - 30px); padding-left: 15px; }

#ppms .dot-sec{ text-align: center; }
#ppms .dot-sec .line{ display: inline-block; width: 1px; height: 60px; position: relative; left: -1px; margin: 60px auto; }
#ppms .dot-sec .line::before{ content: ""; display: inline-block; width: 100%; height: 100%; border-right: 2px dashed #000; mask-image: linear-gradient(to bottom, transparent, #000); -webkit-mask-image: linear-gradient(to bottom, transparent, #000);  }
#ppms .dot-sec .line::after{ content: ""; display: inline-block; width: 10px; height: 10px; background: #000; border-radius: 50%; position: absolute; bottom: 0; left: calc(50% + 1px); transform: translateX(-50%); }
#ppms .dot-sec .shadow{ box-shadow: var(--shadow); border-radius: 30px; overflow: hidden; }

#ppms .dot-sec .grid-box{ display: grid; grid-template-columns: repeat(2, 1fr); margin: -10px; }
#ppms .dot-sec .grid-box > div{ margin: 10px; }
#ppms .dot-sec .grid-box span{ display: inline-block; background: #2E2E2E; border-radius: 60px; font-size: 20px; font-weight: 500; color: #FFF; letter-spacing: -0.03em; padding: 12px 30px; margin-top: 30px; }

@media screen and (max-width: 1600px){
	#ppms .it .diagram .grid span{ font-size: 17px; }
	#ppms .it .diagram .grid .line span{ min-height: 70px; }
	
	#ppms .it .diagram .bg dt{ font-size: 20px; }
	#ppms .it .diagram .bg dd{ padding: 20px; }

	#ppms .it .diagram .dot > p{ right: -35px; }

	#ppms .it .diagram .border{ padding: 40px; }
	#ppms .it .diagram .border dt{ font-size: 20px; }
	#ppms .it .diagram .border ul li{ font-size: 18px; padding: 12px; }


	#ppms .e-gene .num-list{ margin-top: 40px; }
	#ppms .e-gene .num-list ul li{ font-size: 18px; }


	#ppms .dot-sec .line{ height: 40px; margin: 40px 0; }
	#ppms .dot-sec .grid-box span{ font-size: 18px; padding: 10px 25px; }
}

@media screen and (max-width: 1400px){
	#ppms .it .diagram .grid-box{ grid-template-columns: repeat(2, 1fr); }
	#ppms .it .diagram .item:nth-of-type(2n) + .item .grid .tit::before{ display: none; }
}

@media screen and (max-width: 1280px){
	#ppms .it .diagram {
		--tableT: 5px;
		--tableR: 5px;
		--arrowW: 9px;
		--arrowH: 8px;
	}
	
	#ppms .it .diagram .item .border::after{ height: 30px; }
	#ppms .it .diagram .grid span{ font-size: 16px; }
	#ppms .it .diagram .grid .line span{ min-height: 65px; }

	#ppms .it .diagram .grid .tit::before{ width: 80px; height: 40px; }
	#ppms .it .diagram .grid .tit span{ padding: 10px 5px; }
	
	#ppms .it .diagram .bg dt{ font-size: 18px; padding: 10px; }
	#ppms .it .diagram .bg dd{ padding: 15px; }

	#ppms .it .diagram .dot > p{ right: -30px; }
	#ppms .it .diagram .dot > p::after{ width: 7px; height: 7px; }

	#ppms .it .diagram .border{ margin-top: 30px; }
	#ppms .it .diagram .border{ padding: 30px; }
	#ppms .it .diagram .border dt{ font-size: 18px; }
	#ppms .it .diagram .border ul li{ font-size: 17px; }


	#ppms .e-gene .num-list{ margin-top: 20px; }
	#ppms .e-gene .num-list ul{ margin: -10px; }
	#ppms .e-gene .num-list ul li{ min-height: 70px; font-size: 17px; padding: 10px 20px; margin: 10px; }


	#ppms .dot-sec .line{ margin: 30px 0; }
	#ppms .dot-sec .line::after{ width: 7px; height: 7px; }
	#ppms .dot-sec .grid-box span{ font-size: 16px; padding: 7px 20px; margin-top: 15px; }
}

@media screen and (max-width: 1200px){
	#ppms .e-gene .num-list ul{ display: block; margin: 0 0 -15px; }
	#ppms .e-gene .num-list ul li{ min-height: auto; padding: 10px 15px; margin: 0 0 15px; }
}

@media screen and (max-width: 900px){
	#ppms .sub-title br{ display: none; }

	#ppms .dot-sec .grid-box{ grid-template-columns: repeat(1, 1fr); }
	#ppms .dot-sec .grid-box > div:not(:last-of-type){ margin-bottom: 40px; }
}

@media screen and (max-width: 800px){
	#ppms .it .diagram{ padding-top: 0; }
	#ppms .it .diagram .grid-box{ grid-template-columns: repeat(1, 1fr); margin: 0; }
	#ppms .it .diagram .item{ margin: 0; position: relative; }
	#ppms .it .diagram .item:not(:last-of-type){ margin-bottom: 60px; }
	#ppms .it .diagram .item::before{ content: ""; width: 50px; height: 30px; background: #000; clip-path: polygon(50% 100%, 0 0, 100% 0); -webkit-clip-path: polygon(50% 100%, 0 0, 100% 0); position: absolute; bottom: -60px; left: 50%; transform: translate(-50%, 0); }
	#ppms .it .diagram .item::after{ content: ""; width: 30px; height: 50px; background: #000; mask-image: linear-gradient(to top, #000, transparent); -webkit-mask-image: linear-gradient(to top, #000, transparent); position: absolute; bottom: 20px; left: 50%; transform: translate(-50%, 100%); }
	#ppms .it .diagram .item:last-of-type::before,
	#ppms .it .diagram .item:last-of-type::after{ display: none; }

	#ppms .it .diagram .grid{ position: static; }
	#ppms .it .diagram .dot .tit{ position: static; }
	#ppms .it .diagram .grid .tit::before{ display: none; }


	#ppms .it .diagram .dot.pc > p{ display: none; }
	#ppms .it .diagram .dot.mobile{ display: block; }
	#ppms .it .diagram .dot{ position: static; }
	#ppms .it .diagram .dot > p{ top: unset; bottom: -60px; right: 50%; transform: translate(50%, -100%); z-index: 10; }
	#ppms .it .diagram .dot > p::before,
	#ppms .it .diagram .dot > p::after{ display: none; }  
}


/* 제품 - E-GENE™ ITAM */
#itam{ overflow: hidden; }
#itam .red-box{ background: var(--redBg); border-radius: 30px; text-align: center; padding: 60px 80px; }
#itam .white-box{ background: #FFF; box-shadow: 0 0 30px rgba(195, 8, 19, 0.1); border-radius: 30px; text-align: center; padding: 60px 80px; }

#itam .grid{
	--minH: 240px;
	--ddP: 20px;
	--ddH: var(--minH) - (var(--ddP) * 2);
}
#itam .grid{ display: grid; grid-template-columns: repeat(3, 1fr); align-items: center; }
#itam .grid:not(:last-of-type){ margin-bottom: 80px; }
#itam .grid > div:first-child{ padding-right: 30px; }
#itam .grid > div:last-child{ padding-left: 30px; }
#itam .grid dl{ border-radius: 20px; }
#itam .grid dl dt{ border-radius: 20px 20px 0 0; font-size: 20px; font-weight: 500; color: #FFF; padding: 17px; }
#itam .grid dl dd{ min-height: var(--minH); display: flex; flex-direction: column; justify-content: center; padding: var(--ddP); border-radius: 0 0 20px 20px; }


#itam .grid01 dl{ box-shadow: 10px 0 30px rgba(195, 8, 19, 0.1); }
#itam .grid01 dl dt{ background: var(--mainColor); }
#itam .grid01 dl dd{ border: 1px solid var(--mainColor); }

#itam .grid01 dl .flex{ height: calc(var(--ddH)); display: flex; flex-wrap: wrap; }
#itam .grid01 dl .flex span{ flex-grow: 1; display: flex; justify-content: center; align-items: center; width: calc((100% - 40px) / 3); background: var(--redBg); border-radius: 10px; font-size: 20px; font-weight: 300; color: #333; letter-spacing: -0.03em; margin-right: 20px; margin-top: 20px; position: relative; }
#itam .grid01 dl .flex span.border{ background: #FFF; border: 1px solid var(--mainColor); font-weight: 500; color: var(--mainColor); }
#itam .grid01 dl .flex span:nth-of-type(1),
#itam .grid01 dl .flex span:nth-of-type(2),
#itam .grid01 dl .flex span:nth-of-type(3){ margin-top: 0; }
#itam .grid01 dl .flex span:nth-of-type(3n){ margin-right: 0; }
#itam .grid01 dl .flex span:last-of-type{ margin-right: 0; }
#itam .grid01 dl .flex span::after{ content: ""; width: 7px; height: 12px; background: url("/img/sub/product/small_arrow.svg") no-repeat center center / contain; position: absolute; top: 50%; right: -10px; transform: translate(50%, -50%); }
#itam .grid01 dl .flex span:nth-of-type(3)::after{ top: calc(100% + 10px); right: 50%; transform: translate(50%, -50%) rotate(90deg); }
#itam .grid01 dl .flex span:nth-of-type(4)::after{ transform: translate(50%, -50%) scaleX(-1);  }
#itam .grid01 dl .flex span:nth-of-type(5)::after{ display: none; }

#itam .grid01 figure{ width: 100%; display: flex; justify-content: center; align-items: center; position: relative; }
#itam .grid01 figure img{ max-height: 100%; }
#itam .grid01 figure figcaption{ background: #000; border-radius: 25px; font-size: 16px; font-weight: 600; color: #FFF; letter-spacing: -0.03em; line-height: 1; padding: 5px 10px; position: absolute; top: -10px; left: -10px; }

#itam .grid01 .diagram{ font-family: var(--engFont); }
#itam .grid01 .diagram .circle{ max-width: 340px; margin: 0 auto; margin-bottom: 30px; background: linear-gradient(135deg, rgba(234, 117, 55, 0.1), rgba(195, 8, 19, 0.1)); border-radius: 50%; padding: 30px; position: relative; }
#itam .grid01 .diagram .circle::before{ content: ""; display: block; padding-bottom: 100%; background: linear-gradient(135deg, var(--orange), var(--mainColor)); border-radius: 50%; }
#itam .grid01 .diagram .circle .text{ position: absolute; top: 50%; left: 0; right: 0; transform: translateY(-50%); }
#itam .grid01 .diagram .circle .text p{ font-size: 30px; font-weight: 600; color: #FFF; margin-bottom: 20px; }
#itam .grid01 .diagram .circle .text div{ display: flex; justify-content: center; }
#itam .grid01 .diagram .circle .text span{ display: inline-block; font-size: 20px; font-weight: 500; color: #FFF; line-height: 1; border: 2px dashed #FFF; border-radius: 100px; padding: 12px 30px; }
#itam .grid01 .diagram .circle .text span:not(:last-of-type){ margin-right: -20px; }

#itam .grid01 .diagram .line > div{ display: flex; justify-content: center; }
#itam .grid01 .diagram .line > div:not(:last-of-type){ margin-bottom: 40px; }
#itam .grid01 .diagram .line > div span{ align-content: center; display: inline-block; border-radius: 10px; position: relative; }
#itam .grid01 .diagram .line > div span:not(:last-of-type){ margin-right: 10px; }
#itam .grid01 .diagram .line > div span::before{ content: ""; width: 1px; height: 20px; border-right: 2px dashed #000; position: absolute; left: 50%; }

#itam .grid01 .diagram .black span{ width: calc((100% - 10px) / 2); background: #333; font-size: 20px; font-weight: 500; color: #FFF; padding: 17px; }
#itam .grid01 .diagram .black span::before{ bottom: -1px; transform: translate(-50%, 100%); }

#itam .grid01 .diagram .white{ position: relative; }
#itam .grid01 .diagram .white::before{ content: ""; width: calc(100% - ((100% - 40px) / 5)); height: 1px; border-bottom: 2px dashed #000; position: absolute; top: -21px; left: 50%; transform: translateX(-50%); }
#itam .grid01 .diagram .white span{ width: calc((100% - 40px) / 5); border: 2px solid #EEE; font-size: 18px; font-weight: 500; color: #000; padding: 17px 5px; }
#itam .grid01 .diagram .white span::before{ top: -1px; transform: translate(-50%, -100%); }
#itam .grid01 .diagram .white span::after{ content: ""; width: 10px; height: 10px; background: #000; border-radius: 50%; position: absolute; top: 0; left: 50%; transform: translate(-50%, -50%); }

#itam .grid02 dl{ box-shadow: 10px 0 30px rgba(0, 0, 0, 0.1); }
#itam .grid02 dl dt{ background: #2E2E2E; }
#itam .grid02 dl dd{ border: 1px solid #2E2E2E; }

#itam .grid02 .flex01{ display: flex; justify-content: center; }
#itam .grid02 .flex01 > div{ max-width: calc((100% - 70px) / 2); margin-right: 70px; }
#itam .grid02 .flex01 > div:last-of-type{ margin-right: 0; }
#itam .grid02 .flex01 figure{ width: 120px; height: 120px; display: flex; justify-content: center; align-items: center; border: 2px solid #EEE; border-radius: 50%; padding: 20px; position: relative; }
#itam .grid02 .flex01 figure::after{ content: ""; width: 30px; height: 30px; background: url("/img/sub/product/plus_dot.svg") no-repeat center center / contain; position: absolute; top: 50%; right: -35px; transform: translate(50%, -50%); }
#itam .grid02 .flex01 > div:last-of-type figure::after{ display: none; }
#itam .grid02 .flex01 p{ font-size: 20px; font-weight: 300; color: #222; letter-spacing: -0.03em; margin-top: 10px; }

#itam .grid02 .grid-box{ display: grid; grid-template-columns: repeat(4, 1fr); font-size: 18px; letter-spacing: -0.03em; margin: -5px; }
#itam .grid02 .grid-box > div{ margin: 5px; }
#itam .grid02 .grid-box .block{ grid-column: auto / span 4; display: flex; justify-content: center; align-items: center; border: 2px solid #EEE; border-radius: 10px; font-weight: 500; color: #333; margin-bottom: 30px; position: relative; }
#itam .grid02 .grid-box .block::before{ content: ""; width: 30px; height: 30px; background: url("/img/sub/product/plus_dot.svg") no-repeat center center / contain; position: absolute; bottom: -40px; left: 50%; transform: translateX(-50%); }
#itam .grid02 .grid-box .block p{ margin-left: 10px; }
#itam .grid02 .grid-box .item{ font-weight: 300; color: #222; }
#itam .grid02 .grid-box .item figure{ max-width: 85px; width: 100%; padding-bottom: calc(100% - 4px); border: 2px solid #EEE; border-radius: 50%; position: relative; margin-bottom: -6px; }
#itam .grid02 .grid-box .item figure img{ max-width: calc(100% - 30px); position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }
#itam .grid02 .grid-box .item p{ margin-top: 10px; }

#itam .grid02 .diagram .line{ display: flex; flex-wrap: wrap; justify-content: center; position: relative; }
#itam .grid02 .diagram .line:not(:last-of-type){ margin-bottom: 40px; }
#itam .grid02 .diagram .line::after{ content: ""; width: calc((100% - (100% - 60px) / 2)); height: 2px; background: #000; position: absolute; bottom: -20px; left: 50%; transform: translate(-50%, 50%); }  
#itam .grid02 .diagram .line:last-of-type::after{ display: none; }
#itam .grid02 .diagram .line > div{ width: calc((100% - 60px) / 2); background: #F5F5F5; border-radius: 10px; padding: 20px; margin-right: 60px; position: relative; }
#itam .grid02 .diagram .line > div:last-of-type{ margin-right: 0; }
#itam .grid02 .diagram .line > div::before{ content: ""; width: 2px; height: 20px; background: #000; position: absolute; bottom: 0; left: 50%; transform: translate(-50%, 100%); }
#itam .grid02 .diagram figure{ display: block; position: relative; }
#itam .grid02 .diagram figure figcaption{ width: max-content; background: #333; border-radius: 30px; font-size: 16px; font-weight: 500; color: #FFF; letter-spacing: -0.03em; padding: 5px 15px; position: absolute; top: 60%; left: 50%; transform: translate(-50%, -50%); }
#itam .grid02 .diagram p{ font-size: 20px; font-weight: 400; color: #222; letter-spacing: -0.03em; margin-top: 10px; }

#itam .grid02 .diagram .red{ background: #FFF !important; box-shadow: 0 0 30px rgba(195, 8, 19, 0.1); }
#itam .grid02 .diagram .red::before{ bottom: unset; top: 0 !important; transform: translate(-50%, -100%) !important; }
#itam .grid02 .diagram .red::after{ content: ""; width: 10px; height: 10px; background: #000; border-radius: 50%; position: absolute; top: 0; left: 50%; transform: translate(-50%, -50%); }
#itam .grid02 .diagram .red figure figcaption{ background: var(--mainColor); color: #FFF; }
#itam .grid02 .diagram .red p{ color: var(--mainColor); }


#itam .flex-layout{ display: flex; align-items: center; opacity: 1; }
#itam .flex-layout > div{ transition: opacity 1s, transform 1s; }
#itam .flex-layout .img{ width: calc(100% - 640px); text-align: center; transform: translateX(var(--aosMinus)); opacity: 0; }
#itam .flex-layout .img figure img{ filter: drop-shadow(var(--shadow)); -webkit-filter: drop-shadow(var(--shadow)); }
#itam .redBg .flex-layout .img figure img{ filter: drop-shadow(0 0 30px rgba(195, 8, 19, 0.1)); -webkit-filter: drop-shadow(0 0 30px rgba(195, 8, 19, 0.1)); }
#itam .flex-layout .text{ width: 640px; padding-left: 100px; transform: translateX(var(--aosPlus)); opacity: 0; }
#itam .flex-layout .text .sub-title{ text-align: left; margin-bottom: 0; }
 
#itam .flex-layout.reverse{ flex-direction: row-reverse; }
#itam .flex-layout.reverse .img{  transform: translateX(var(--aosPlus)); opacity: 0; }
#itam .flex-layout.reverse .text{ padding-left: 0 !important; padding-right: 100px; transform: translateX(var(--aosMinus)); opacity: 0; }

#itam .flex-layout.aos-animate > div{ opacity: 1 !important; transform: translate(0, 0) !important; }


#itam .num-tab{
	--num: 40px;
}
#itam .num-tab{ display: flex; }
#itam .num-tab .text{ width: 500px; padding-right: 120px; transform: translateX(var(--aosMinus)); }
#itam .num-tab .img{ width: calc(100% - 500px); transform: translateX(var(--aosPlus)); position: relative; }
#itam .num-tab .img figure{ background: #FFF; border: 15px solid transparent; box-shadow: var(--shadow); border-radius: 28px; position: relative; top: 0; left: 0; }
#itam .num-tab .img figure:not(.on){ opacity: 0; pointer-events: none; position: absolute; }
#itam .redBg .num-tab .img figure{ box-shadow: 0 0 30px rgba(195, 8, 19, 0.1); }
#itam .num-tab .img figure img{ border-radius: 25px; }
#itam .num-tab .text dl{ padding-left: calc(var(--num) + 20px); position: relative; cursor: pointer; }
#itam .num-tab .text dl:not(:last-of-type){ margin-bottom: 30px; }
#itam .num-tab .text dl::before{ content: attr(data-idx); width: var(--num); height: var(--num); display: flex; justify-content: center; align-items: center; border: 2px dashed var(--mainColor); border-radius: 50%; font-family: var(--engFont); font-size: 18px; font-weight: 700; color: var(--mainColor); letter-spacing: 0; line-height: 1; position: absolute; top: 0; left: 0; transition: background 0.3s, border 0.3s, color 0.3s; }
#itam .num-tab .text dl dt{ font-size: 24px; font-weight: 500; color: #111; letter-spacing: -0.03em; padding-top: calc((var(--num) - 1.3em) / 2); margin-bottom: 10px; transition: color 0.3s; }
#itam .num-tab .text dl dd{ font-size: 20px; font-weight: 200; color: #666; letter-spacing: -0.03em; }
#itam .num-tab .text div{ border: 1px solid #DDD; border-radius: 20px; padding: 20px 25px; margin-top: 20px; }
#itam .num-tab .text div, 
#itam .num-tab .text div *{ font-size: 18px; line-height: 1.6666; }
#itam .num-tab .text div ul li{ color: #888; }
#itam .num-tab .text div span{ display: inline-block; background: #000; border-radius: 30px; font-weight: 500; color: #FFF; line-height: 1; padding: 6px 15px; margin-bottom: 15px; }

#itam .num-tab .text dl.on::before{ background: var(--mainColor); border: 2px solid var(--mainColor); color: #FFF; }
#itam .num-tab .text dl.on dt{ color: var(--mainColor); }

#itam .num-tab.reverse{ flex-direction: row-reverse; }
#itam .num-tab.reverse .text{ padding-right: 0 !important; padding-left: 120px; transform: translateX(var(--aosPlus)); }
#itam .num-tab.reverse .img{  transform: translateX(var(--aosMinus)); }

#itam .num-tab > div.aos-animate{ transform: translate(0, 0) !important; }

@media screen and (max-width: 1600px){
	#itam .red-box, 
	#itam .white-box{ padding: 40px 60px; }
	
	#itam .grid dl dt{ font-size: 18px; padding: 13px; }
	
	#itam .grid01 dl .flex span{ font-size: 18px; }
	
	#itam .grid01 .diagram .circle .text p{ font-size: 26px; }
	#itam .grid01 .diagram .circle .text span{ font-size: 18px; }
	#itam .grid01 .diagram .black span{ font-size: 18px; padding: 13px; }
	#itam .grid01 .diagram .white span{ font-size: 17px; padding: 13px 5px; }


	#itam .grid02 .flex01 figure{ width: 100px; height: 100px; }
	#itam .grid02 .flex01 p{ font-size: 18px; }
	
	#itam .grid02 .grid-box{ font-size: 16px; }
	
	#itam .grid02 .diagram p{ font-size: 18px; }
	
	#itam .num-tab{
		--num: 35px;
	}
	#itam .num-tab .text dl::before{ font-size: 17px; }
	#itam .num-tab .text dl dt{ font-size: 20px; }
	#itam .num-tab .text dl dd{ font-size: 18px; }
	#itam .num-tab .text div,
	#itam .num-tab .text div *{ font-size: 17px; }  
	#itam .num-tab .text div{ padding: 15px 20px; }
}

@media screen and (max-width: 1400px){
	#itam .grid{
		--minH: 200px;
	}

	#itam .grid02 .grid-box .item figure img{ max-width: calc(100% - 20px); }
	
	
	#itam .flex-layout .img{ width: calc(100% - 450px); }
	#itam .flex-layout .text{ width: 450px; padding-left: 70px;}
	#itam .flex-layout.reverse .text{ padding-right: 70px; }
	
	
	#itam .num-tab .text{ padding-right: 80px; }
	#itam .num-tab.reverse .text{ padding-left: 80px; }
}

@media screen and (max-width: 1280px){
	#itam .red-box, 
	#itam .white-box{ padding: 35px 40px; }
	
	#itam .grid {
		--ddH: 180px;
		--ddP: 15px;
	}
	#itam .grid dl dt{ font-size: 17px; padding: 10px; }
	
	#itam .grid01 dl .flex span{ font-size: 17px; }
	#itam .grid01 figure figcaption{ font-size: 15px; }
	
	#itam .grid01 .diagram .circle .text p{ font-size: 22px; margin-bottom: 10px; }
	#itam .grid01 .diagram .circle .text span{ font-size: 17px; padding: 10px 25px; }
	#itam .grid01 .diagram .circle .text span:not(:last-of-type){ margin-right: -15px; }
	#itam .grid01 .diagram .black span{ font-size: 17px; padding: 12px; }
	#itam .grid01 .diagram .white span{ font-size: 16px; padding: 10px 5px; }


	#itam .grid02 .flex01 figure{ width: 90px; height: 90px; }
	#itam .grid02 .flex01 p{ font-size: 17px; }
	
	#itam .grid02 .grid-box{ font-size: 16px; }
	
	#itam .grid02 .diagram figure figcaption{ font-size: 15px; }
	#itam .grid02 .diagram p{ font-size: 17px; }
	
	
	#itam .flex-layout .img{ width: calc(100% - 550px); }
	#itam .flex-layout .text{ width: 550px; padding-left: 50px; }
	#itam .flex-layout.reverse .text{ padding-right: 50px; }
	
	
	#itam .num-tab{
		--num: 28px;
	}
	#itam .num-tab .img{ width: calc(100% - 400px); }
	#itam .num-tab .text{ width: 400px; }
	#itam .num-tab .text dl{ padding-left: calc(var(--num) + 15px); }
	#itam .num-tab .text dl:not(:last-of-type){ margin-bottom: 20px; }
	#itam .num-tab .text dl::before{ font-size: 16px; }
	#itam .num-tab .text dl dt{ font-size: 18px; }
	#itam .num-tab .text dl dd{ font-size: 16px; }
	#itam .num-tab .text div,
	#itam .num-tab .text div *{ font-size: 16px; }  
	#itam .num-tab .text div{ padding: 10px 15px; margin-top: 15px; }
	#itam .num-tab .text div span{ margin-bottom: 10px; }  
}

@media screen and (max-width: 1200px){
	#itam .grid{ grid-template-columns: repeat(2, 1fr); align-items: unset; padding: 0 10%; }
	#itam .grid > div:first-child{ padding-right: 10px; }
	#itam .grid > div:last-child{ padding-left: 10px; }
	#itam .grid .diagram{ grid-column: auto / span  2; order: 1; margin-bottom: 30px; padding: 0 20%; }
	#itam .grid > div:not(.diagram){ order: 2; }
	
	#itam .grid dl{ display: flex; flex-direction: column; height: 100%; }
	#itam .grid dl dd{ flex: 1 0 auto; }
	
	#itam .grid01 .diagram .circle{ max-width: 280px; padding: 25px; }
}

@media screen and (max-width: 1000px){
	#itam .grid {
		--ddH: 150px;
	}
	#itam .grid{ padding: 0; }
	
	
	#itam .flex-layout{ flex-direction: column-reverse !important; }
	#itam .flex-layout br{ display: none; }
	#itam .flex-layout .img{ width: 100%; transform: translateY(var(--aosPlus)); }
	#itam .flex-layout .text{ width: 100%; padding-left: 0; transform: translateY(var(--aosMinus)); margin-bottom: 25px; }
	#itam .flex-layout .text .sub-title{ text-align: center; }
	
	#itam .flex-layout.reverse .img{  transform: translateY(var(--aosPlus)); }
	#itam .flex-layout.reverse .text{ padding-right: 0; transform: translateY(var(--aosMinus)); }
}

@media screen and (max-width: 900px){
	#itam .red-box, 
	#itam .white-box{ padding: 30px 25px; }
	
	
	#itam .num-tab{ flex-direction: column-reverse !important; }
	#itam .num-tab br{ display: none; }
	#itam .num-tab .img{ width: 100%; transform: translateY(var(--aosPlus)); }
	#itam .num-tab .text{ width: 100%; padding: 30px 0 0 !important; transform: translateY(var(--aosPlus)); }
	#itam .num-tab .text{ display: flex; flex-wrap: wrap; margin-bottom: -30px; }
	#itam .num-tab .text dl{ width: calc((100% - 30px) / 2); margin-right: 30px; margin-bottom: 30px !important; } 
	#itam .num-tab .text dl:nth-of-type(2n){ margin-right: 0; }
	
	#itam .num-tab.reverse .img, 
	#itam .num-tab.reverse .text{ transform: translateY(var(--aosPlus)); }
}

@media screen and (max-width: 800px){
	#itam .sub-title br{ display: none; }
	#itam .sub-title em{ display: block; }

	#itam .grid{ grid-template-columns: repeat(1, 1fr); }
	#itam .grid > div{ padding: 0 10% !important; }
	#itam .grid > div:not(:last-of-type){ margin-bottom: 30px; }
	#itam .grid  dl dd{ min-height: auto; }
	
	#itam .grid .diagram{ grid-column: auto / span  1; }
	
	#itam .grid01 dl .flex{ height: auto; }
	#itam .grid01 dl .flex span{ padding: 15px 10px; }
}

@media screen and (max-width: 650px){
	#itam .grid > div{ padding: 0 !important; }
	#itam .grid02 .grid-box .item figure{ max-width: 100%; }
	
	
	#itam .num-tab .text{ margin-bottom: -20px; }
	#itam .num-tab .text dl{ width: 100%; margin-right: 0 !important; margin-bottom: 20px !important; }
}


/* 서비스 - 컨설팅서비스 */
#consulting .sec-title i{ height: 80px; background: url("/img/sub/service/egene_title.svg") no-repeat center center / contain; }
#consulting .gradiBg{ background: var(--gradiBg); }

#consulting .diagram .mobile{ display: none; }
#consulting .diagram .circle::after,
#consulting .diagram .line01::after{ content: ""; width: 12px; height: 66px; background: url("/img/sub/service/consulting_dash.svg") no-repeat top center / contain; position: absolute; }

#consulting .diagram .circle{ width: 320px; margin: 0 auto; position: relative; z-index: 100; }
#consulting .diagram .circle::after{ bottom: 0; left: 50%; transform: translate(-50%, 100%); }
#consulting .diagram .circle .inner{ position: relative; padding: 30px; }
#consulting .diagram .circle .inner::before, 
#consulting .diagram .circle .inner::after{ content: ""; background: linear-gradient(150deg, var(--orange) ,var(--mainColor)); border-radius: 50%; box-shadow: 0 30px 30px rgba(0, 0, 0, 0.1); }
#consulting .diagram .circle .inner::before{ width: 100%; height: 100%; position: absolute; top: 0; left: 0; opacity: 0.1; }
#consulting .diagram .circle .inner::after{ display: block; padding-bottom: 100%; }
#consulting .diagram .circle .img{ position: absolute; top: 50%; left: 0; right: 0; z-index: 100; transform: translateY(-50%); padding: 0 60px; }
#consulting .diagram .circle img{ width: 100%; height: auto; filter: invert(1) brightness(7); -webkit-filter: invert(1) brightness(7); }

#consulting .diagram .line{ position: relative; z-index: var(--idx); }
#consulting .diagram .line::before{ content: ""; width: 100%; height: 200px; background: #FFF; border-radius: 50%; box-shadow: 0 30px 30px rgba(0, 0, 0, 0.1); position: absolute; top: 0; left: 50%; transform: translate(-50%, -50%); }
#consulting .diagram .line .flex{ display: flex; justify-content: space-between; }
#consulting .diagram .line .flex > *{ padding: 0 10px; position: relative; }
#consulting .diagram .line .button{  cursor: pointer; }
#consulting .diagram .line i{ display: block; width: 20px; height: 20px; background: transparent; border: 5px solid var(--mainColor); border-radius: 50%; margin: 0 auto; margin-bottom: 10px; transition: background 0.5s; }
#consulting .diagram .line p{ font-family: var(--engFont); font-size: 24px; font-weight: 500; color: #333; text-align: center; transition: color 0.5s; }
#consulting .diagram .line .icon{ width: 100%; position: relative; }
#consulting .diagram .line .icon figure{ max-width: 150px; width: 100%; display: block; position: relative; margin: 0 auto; }
#consulting .diagram .line .icon figure::before{ content: ""; display: block; padding-bottom: 100%; background: #FFF; border: 2px solid #EEE; border-radius: 50%; transition: border-color 0.5s; }
#consulting .diagram .line .icon img{ max-width: calc(100% - 30px); max-height: calc(100% - 30px); position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }
#consulting .diagram .line ul{ max-width: max-content; margin: 0 auto; font-size: 18px; font-weight: 300; color: #333; }
#consulting .diagram .line ul li{ max-width: max-content; padding-left: 12px; position: relative; white-space: nowrap; }
#consulting .diagram .line ul li:not(:last-of-type){ margin-bottom: 8px; }
#consulting .diagram .line ul li::before{ content: ""; width: 4px; height: 4px; background: #AAA; border-radius: 50%; position: absolute; top: calc(1.3em / 2); left: 0; transform: translateY(-50%); }

#consulting .diagram .line .button.on i{ background: var(--mainColor); }
#consulting .diagram .line .button.on p{ color: var(--mainColor); }

#consulting .diagram .line01{
	--top: 80px;
}
#consulting .diagram .line01{ max-width: 1000px; margin: 0 auto; margin-top: 35px; padding: 0 15px; }
#consulting .diagram .line01::before{ width: calc(100% - 50px); height: 180px; }
#consulting .diagram .line01::after{ top: 150px; left: 50%; z-index: -1; transform: translate(-50%, -100%); display: none; }
#consulting .diagram .line01 .flex{ width: calc(100% + (100% / 6)); padding-top: var(--top); margin-left: calc(((100% / 6) / 2) * -1); } 
#consulting .diagram .line01 .flex > *{ width: calc(100% / 6); }
#consulting .diagram .line01 .flex > *:nth-child(1),
#consulting .diagram .line01 .flex > *:nth-child(6){ top: calc(var(--top) * -1); }
#consulting .diagram .line01 .flex > *:nth-child(2),
#consulting .diagram .line01 .flex > *:nth-child(5){ top: -17px; }

#consulting .diagram .line02{
	--top: 57px;
}
#consulting .diagram .line02{ margin-top: 35px; }
#consulting .diagram .line02::before{ top: calc((var(--top) / 2) * -1.3); }
#consulting .diagram .line02 .flex{ padding-top: var(--top); }
#consulting .diagram .line02 .flex > *{ width: calc(100% / 9); }
#consulting .diagram .line02 .flex > *:nth-child(1),
#consulting .diagram .line02 .flex > *:nth-child(9){ top: calc(var(--top) * -1); }
#consulting .diagram .line02 .flex > *:nth-child(2),
#consulting .diagram .line02 .flex > *:nth-child(8){ top: -27px; }
#consulting .diagram .line02 .flex > *:nth-child(3),
#consulting .diagram .line02 .flex > *:nth-child(7){ top: -12px; }
#consulting .diagram .line02 .flex > *:nth-child(4),
#consulting .diagram .line02 .flex > *:nth-child(6){ top: -4px; }

#consulting .diagram .line03{
	--top: 60px;
}
#consulting .diagram .line03{ margin-top: 15px; }
#consulting .diagram .line03::before{ top: 35px; }
#consulting .diagram .line03 .flex{ padding-top: var(--top); }
#consulting .diagram .line03 .flex > *{ width: calc(100% / 6); }
#consulting .diagram .line03 .flex > *:nth-child(1),
#consulting .diagram .line03 .flex > *:nth-child(6){ top: calc(var(--top) * -1); }
#consulting .diagram .line03 .flex > *:nth-child(2),
#consulting .diagram .line03 .flex > *:nth-child(5){ top: -20px; }
#consulting .diagram .line03 .icon::after{ content: ""; width: 7px; height: 14px; background: url("/img/sub/service/consulting_arrow.svg") no-repeat center center / contain; position: absolute; top: 50%; left: -10px; transform: translate(-50%, -100%); }
#consulting .diagram .line03 .flex > *:nth-child(1) .icon::after{ display: none; }
#consulting .diagram .line03 .flex > *:nth-child(4) .icon::after{ transform: translate(-50%, -50%); }
#consulting .diagram .line03 .flex > *:nth-child(5) .icon::after{ transform: translate(-50%, 35%); }
#consulting .diagram .line03 .flex > *:nth-child(6) .icon::after{ transform: translate(-50%, 185%); }
#consulting .diagram .line03 p{ font-size: 22px; margin: 20px 0; }

#consulting .diagram .line03 .flex > *.on .icon figure::before{ border-color: var(--mainColor); }


#consulting .itgc{
	--cirGap: 60px;
	--cirShadow: 0 0 30px rgba(195, 8, 19, 0.1);
	--bottomMt: 85px;
}
#consulting .itgc .sec-title{ margin-bottom: -60px; position: relative; z-index: 100; }
#consulting .itgc .sec-title p{ color: #222; }

#consulting .itgc .top{ max-width: 1000px; margin: 0 auto; position: relative; }
#consulting .itgc .top::before{ content: ""; width: calc(100% - 200px); height: 50%; background: linear-gradient(to top, var(--mainColor), transparent); clip-path: polygon(50% 100%, 0 0, 100% 0); -webkit-clip-path: polygon(50% 100%, 0 0, 100% 0); position: absolute; bottom: calc((var(--bottomMt) + 50px) * -1); left: 50%; transform: translateX(-50%); opacity: 0.3; }
#consulting .itgc .top .circle{ max-width: 500px; margin: 0 auto; position: relative; }
#consulting .itgc .top .circle::before,
#consulting .itgc .top .circle::after,
#consulting .itgc .top .circle div{ background: #FFF; border-radius: 50%; box-shadow: var(--cirShadow); }
#consulting .itgc .top .circle::before{ content: ""; display: block; padding-bottom: 100%; opacity: 0.3; }
#consulting .itgc .top .circle::after{ content: ""; width: calc(100% - (var(--cirGap) * 2)); height: calc(100% - (var(--cirGap) * 2)); position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); opacity: 0.5; }
#consulting .itgc .top .circle div{ width: calc(100% - (var(--cirGap) * 4)); height: calc(100% - (var(--cirGap) * 4)); display: flex; justify-content: center; align-items: center; position: absolute; top: 50%; left: 50%; z-index: 100; transform: translate(-50%, -50%); }
#consulting .itgc .top .circle span{ font-family: var(--engFont); font-size: 10rem; font-weight: 700; color: var(--mainColor); }
#consulting .itgc .top .circle .arrow{ width: 30px; height: 210px; background: linear-gradient(to bottom, transparent, #FFF); position: absolute; top: 50%; left: 50%; z-index: -1; transform: translateX(-50%); }
#consulting .itgc .top .circle .arrow::before{ content: ""; width: 50px; height: 25px; background: #FFF; position: absolute; bottom: 0; left: 50%; transform: translate(-50%, 100%); clip-path: polygon(50% 100%, 0 0, 100% 0); -webkit-clip-path: polygon(50% 100%, 0 0, 100% 0); }
#consulting .itgc .top ul{ display: flex; justify-content: space-between; align-items: center; position: absolute; top: 50%; left: 0; right: 0; z-index: 150; transform: translateY(-50%); }
#consulting .itgc .top ul li{ background: #FFF; border: 1px dashed #111; border-radius: 100px; font-size: 20px; font-weight: 300; color: #333; letter-spacing: -0.03em; padding: 22px 55px; opacity: 0; transition: transform 0.7s 1s, opacity 0.7s 1s; }
#consulting .itgc .top ul li:nth-of-type(odd){ transform: translateX(var(--aosMinus)); }
#consulting .itgc .top ul li:nth-of-type(even){ transform: translateX(var(--aosPlus)); }
#consulting .itgc .top.aos-animate ul li{ opacity: 1; transform: translateX(0) !important; }
#consulting .itgc .top ul li strong{ font-weight: 600; }


#consulting .itgc .bottom{ background: #FFF; border-radius: 50px; box-shadow: var(--shadow); margin-top: var(--bottomMt); padding: 90px 60px 60px; position: relative; z-index: 100; }
#consulting .itgc .bottom h5{ max-width: max-content; background: #000; border-radius: 100px; font-size: 24px; font-weight: 600; color: #FFF; letter-spacing: -0.03em; text-align: center; padding: 20px 50px; position: absolute; top: 0; left: 50%; transform: translate(-50%, -50%); }
#consulting .itgc .bottom .grid{ display: grid; grid-template-columns: repeat(2, 1fr); padding: 0 80px; margin: -15px -30px; text-align: center; }
#consulting .itgc .bottom .grid > div{ margin: 15px 30px; padding: 40px; position: relative; z-index: 10; }
#consulting .itgc .bottom .item{ padding-top: 0 !important; }
#consulting .itgc .bottom .item::before{ content: ""; width: 100%; height: 65%; background: linear-gradient(to top, var(--mainColor), transparent); position: absolute; bottom: 0; left: 0; z-index: -1; border-radius: 30px; opacity: 0.06; }
#consulting .itgc .bottom .item .icon{ position: relative; }
#consulting .itgc .bottom .item .icon::before{ content: ""; width: 50px; height: 50px; background: #FFF url("/img/sub/service/consulting_plus.svg") no-repeat center center / contain; border-radius: 50%; box-shadow: 0 0 0 15px rgba(195, 8, 19, 0.1); position: absolute; top: 50%; left: -70px; transform: translate(-50%, -50%); }
#consulting .itgc .bottom .item:first-child .icon::before{ display: none; }
#consulting .itgc .bottom .item .icon div{ max-width: 200px; width: 100%; margin: 0 auto; position: relative; }
#consulting .itgc .bottom .item .icon div::before{ content: ""; display: block; padding-bottom: 100%; background: linear-gradient(150deg, var(--orange), #C30813); border-radius: 50%; }
#consulting .itgc .bottom .item .icon img{ max-width: calc(100% - 30px); max-height: calc(100% - 30px); position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }
#consulting .itgc .bottom .item p{ font-size: 28px; font-weight: 600; color: #111; letter-spacing: -0.03em; margin-top: 30px; }
#consulting .itgc .bottom .item p span{ display: block; font-size: 20px; font-weight: 400; color: #333; margin-top: 5px; }
#consulting .itgc .bottom .block{ grid-column: auto / span 2; border: 1px dashed #000; border-radius: 30px; margin: 15px -50px !important; }
#consulting .itgc .bottom .block::before{ content: ""; width: 2px; height: 60px; background: linear-gradient(to top, #000, transparent); position: absolute; top: 0; left: 50%; transform: translate(-50%, -100%); }
#consulting .itgc .bottom .block::after{ content: ""; width: 10px; height: 10px; background: #000; border-radius: 50%; position: absolute; top: 0; left: 50%; transform: translate(-50%, -50%); }
#consulting .itgc .bottom .block p{ font-size: 20px; font-weight: 400; color: #333; letter-spacing: -0.03em; line-height: 1.8; }
#consulting .itgc .bottom .block p strong{ font-weight: 700; }

#consulting .itsm .shadow-box .item{ min-height: 295px; }
#consulting .itsm .shadow-box .icon{ width: 130px; margin: 0 auto; position: relative; }
#consulting .itsm .shadow-box .icon::before,
#consulting .itsm .shadow-box .icon::after{ content: ""; background: var(--mainColor); border-radius: 50%; opacity: 0.05; }
#consulting .itsm .shadow-box .icon::before{ display: block; padding-bottom: 100%; }
#consulting .itsm .shadow-box .icon::after{ width: calc(100% - 30px); height: calc(100% - 30px); position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }
#consulting .itsm .shadow-box .icon img{ max-width: calc(100% - 50px); max-height: calc(100% - 50px); position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }
#consulting .itsm .shadow-box p{ margin-top: 20px; }

@media screen and (max-width: 1600px){
	#consulting .sec-title i{ height: 70px; }

	#consulting .diagram .circle{ width: 280px; }
	#consulting .diagram .circle .inner{ padding: 20px; }
	#consulting .diagram .circle .img{ padding: 0 40px; }
	#consulting .diagram .line p{ font-size: 21px; }
	#consulting .diagram .line03 p{ font-size: 20px; }

	#consulting .itgc{
		--cirGap: 40px;
		--bottomMt: 85px;
	}
	#consulting .itgc .top .circle{ max-width: 400px; }
	#consulting .itgc .top ul li{ font-size: 18px; padding: 17px 40px; }

	#consulting .itgc .bottom{ padding: 60px 40px 40px; }
	#consulting .itgc .bottom h5{ font-size: 22px; padding: 17px 40px; }
	#consulting .itgc .bottom .item .icon div{ max-width: 150px; }
	#consulting .itgc .bottom .item p{ font-size: 24px; }
	#consulting .itgc .bottom .item p span{ font-size: 18px; }
	#consulting .itgc .bottom .block p{ font-size: 18px; }
}

@media screen and (max-width: 1280px){
	#consulting .sec-title i{ height: 60px; }

	#consulting .diagram .circle{ width: 240px; }
	#consulting .diagram .line p{ font-size: 19px; }
	#consulting .diagram .line ul{ font-size: 17px; }
	#consulting .diagram .line03 p{ font-size: 18px; margin: 15px 0; }

	#consulting .itgc{
		--cirGap: 30px;
		--bottomMt: 85px;
	}
	#consulting .itgc .sec-title{ margin-bottom: -40px; }
	#consulting .itgc .top .circle{ max-width: 300px; margin: 0 auto; }
	#consulting .itgc .top ul li{ font-size: 17px; padding: 12px 25px; }
	#consulting .itgc .top .circle .arrow{ width: 20px; height: 170px; }
	#consulting .itgc .top .circle .arrow::before{ width: 40px; height: 20px; }
	
	#consulting .itgc .bottom{ padding: 50px 25px 25px; }
	#consulting .itgc .bottom h5{ font-size: 20px; padding: 12px 30px; }
	#consulting .itgc .bottom .grid{ margin: -15px; }
	#consulting .itgc .bottom .grid > div{ padding: 30px; margin: 15px; }
	#consulting .itgc .bottom .item .icon::before{ width: 40px; height: 40px; box-shadow: 0 0 0 10px rgba(195, 8, 19, 0.1); left: -45px; }
	#consulting .itgc .bottom .item .icon div{ max-width: 100px; }
	#consulting .itgc .bottom .item p{ font-size: 22px; margin-top: 20px; }
	#consulting .itgc .bottom .item p span{ font-size: 16px; }
	#consulting .itgc .bottom .block p{ font-size: 17px; }
	#consulting .itgc .bottom .block::after{ width: 8px; height: 8px; }

	#consulting .itsm .shadow-box .icon{ width: 100px; }
	#consulting .itsm .shadow-box .icon::after{ width: calc(100% - 20px); height: calc(100% - 20px);  }
	#consulting .itsm .shadow-box .item{ min-height: 250px; }
}

@media screen and (max-width: 1200px){
	#consulting .diagram .pc{ display: none; }
	#consulting .diagram .mobile{ display: block; }
	#consulting .diagram .circle::after, 
	#consulting .diagram .line01::after{ height: 55px; }

	#consulting .diagram .line{ max-width: 100% !important; background: #FFF; border-radius: 30px; box-shadow: var(--shadow); padding: 40px 20px; }
	#consulting .diagram .line:not(:last-child){ margin: 0 0 15px; }
	#consulting .diagram .line::before{ display: none; }
	#consulting .diagram .line .flex{ width: 100%; flex-wrap: wrap; justify-content: center; margin: 0; margin-bottom: -30px; padding: 0; }
	#consulting .diagram .line .flex > *{ width: calc(100% / 3); top: 0 !important; margin-bottom: 30px; }

	#consulting .diagram .line01{ margin-top: 0; } 
	#consulting .diagram .line01::after{ top: 100%; transform: translate(-50%, 0); }	

	#consulting .diagram .line03{ margin-top: 50px !important; }
	#consulting .diagram .line03 .flex > *:nth-child(3n) + div .icon::after{ display: none; }

	#consulting .itgc .bottom .grid{ padding: 0; }
	#consulting .itgc .bottom .block{ margin: 15px !important; }
}

@media screen and (max-width: 900px){
	#consulting .sec-title i{ height: 50px; }

	#consulting .itgc .bottom h5{ font-size: 18px; }
	#consulting .itgc .bottom .item p{ font-size: 18px; }

	#consulting .itsm .shadow-box .item{ min-height: auto; }
}

@media screen and (max-width: 750px){
	#consulting .itgc .bottom br{ display: none; }
}

@media screen and (max-width: 700px){
	#consulting .itgc .top::before{ width: 100%; height: 70%; }
	#consulting .itgc .top .circle .arrow{ top: 100%; height: calc(100% + (var(--bottomMt) / 2.5)); }
	#consulting .itgc .top ul{ flex-direction: column; position: relative; top: unset; transform: translateY(0); margin-top: 30px; }
	#consulting .itgc .top ul li:not(:last-of-type){ margin-bottom: 10px; }

	#consulting .itgc .bottom .grid{ grid-template-columns: repeat(1, 1fr); margin: -10px; }
	#consulting .itgc .bottom .grid > div{ margin: 10px; }
	#consulting .itgc .bottom .item{ padding-top: 25px !important; }
	#consulting .itgc .bottom .item::before{ height: 100%; background: rgba(195, 8, 19, 0.7); }
	#consulting .itgc .bottom .item .icon::before{ width: 30px; height: 30px; box-shadow: 0 0 0 8px rgba(195, 8, 19, 0.1); top: -35px; left: 50%; transform: translate(-50%, -50%); }

	#consulting .itgc .bottom .block{ grid-column: auto / span 1; margin: 20px 10px 10px !important; }
	#consulting .itgc .bottom .block::before{ height: 30px; }
}

@media screen and (max-width: 650px){
	#consulting .diagram .line .flex > *{ width: calc(100% / 2); }

	#consulting .diagram .line01 br{ display: none; }

	#consulting .diagram .line03 .flex > *:nth-child(3n) + div .icon::after{ display: block; }
	#consulting .diagram .line03 .flex > *:nth-child(2n) + div .icon::after{ display: none; }
}

@media screen and (max-width: 600px){
	#consulting .sec-title i{ height: 40px; }
}


/* 서비스 - 부트캠프 교육서비스 */
#bootcamp{ background: linear-gradient(to bottom, var(--redBg), #FFF); padding-top: var(--subPt); }
#bootcamp .title{ text-align: center; margin-bottom: 100px; }
#bootcamp .title h4{ font-size: 40px; font-weight: 500; color: #111; letter-spacing: -0.03em; line-height: 1.5; }
#bootcamp .title h4 em{  color: transparent; background: linear-gradient(to right, var(--mainColor) 0 50%, #111 50% 100%); background-clip: text; -webkit-background-clip: text; background-size: 200% 100%; background-position: 100% 0; transition: background-position 0.5s 1s; }
#bootcamp .title.aos-animate h4 em{ background-position: 0 0; }
#bootcamp .title p{ font-size: 22px; font-weight: 400; color: #333; letter-spacing: -0.03em; line-height: 1.6363; margin-top: 30px; }


#bootcamp .diagram{ text-align: center; padding-top: 30px; }
#bootcamp .diagram dl{ background: #FFF; border: 1px solid var(--mainColor); box-shadow: 0 0 30px rgba(195, 8, 19, 0.1); border-radius: 300px; padding: 60px; position: relative; }
#bootcamp .diagram dl dt{ background: var(--mainColor); border-radius: 70px; font-size: 24px; font-weight: 600; color: #FFF; letter-spacing: -0.03em; padding: 15px 50px; position: absolute; top: 0; left: 50%; transform: translate(-50%, -50%); }
#bootcamp .diagram ul{ display: flex; justify-content: center; position: relative; }
#bootcamp .diagram ul::before{ content: ""; width: calc(100% - ((100% - 240px) / 3)); height: 30px; border: 2px dashed var(--mainColor); border-top: none; border-radius: 0 0 20px 20px; position: absolute; bottom: 0; left: 50%; transform: translate(-50%, 100%); }
#bootcamp .diagram ul::after{ content: ""; width: 10px; height: 10px; background: var(--mainColor); border-radius: 50%; position: absolute; bottom: -100px; left: 50%; transform: translateX(-50%); }
#bootcamp .diagram ul li{ width: calc((100% - 240px) / 3); position: relative; margin-right: 120px; }
#bootcamp .diagram ul li:last-of-type{ margin-right: 0; }
#bootcamp .diagram ul li::before{ content: ""; width: 19px; height: 19px; background: url("/img/sub/service/plus.svg") no-repeat center center / contain; position: absolute; top: 50%; right: -60px; transform: translate(50%, -50%); }
#bootcamp .diagram ul li:last-of-type::before{ display: none; }
#bootcamp .diagram ul li::after{ content: ""; width: 1px; height: 100px; border-right: 2px dashed var(--mainColor); position: absolute; bottom: 0; left: 50%; transform: translate(-50%, 100%); }
#bootcamp .diagram ul li:first-of-type::after,
#bootcamp .diagram ul li:last-of-type::after{ display: none; }
#bootcamp .diagram .circle::before{ content: ""; display: block; padding-bottom: 100%; box-shadow: 0 0 30px rgba(195, 8, 19, 0.1); border-radius: 50%; }
#bootcamp .diagram .circle .text{ position: absolute; top: 50%; left: 0; right: 0; transform: translateY(-50%); padding: 0 30px; }
#bootcamp .diagram .circle .text p{ font-size: 28px; font-weight: 500; color: #222; letter-spacing: -0.03em; margin-top: 20px; }
#bootcamp .diagram .circle .icon{ padding: 0 15px; }


#bootcamp .flex-box{ display: flex; justify-content: space-between; }
#bootcamp .flex-box > div{ width: calc((100% - 10px) / 2); }
#bootcamp .flex-box > div > *{ box-shadow: var(--shadow); border-radius: 30px; overflow: hidden; }  
#bootcamp .img figure{ width: 100%; margin-bottom: -6px; }
#bootcamp .img figure img{ width: 100%; }
#bootcamp .grid{ display: grid; grid-template-columns: repeat(2, 1fr); margin-bottom: -10px; }
#bootcamp .grid > div{ margin-right: 10px; margin-bottom: 10px; }
#bootcamp .grid > div:nth-of-type(2n){ margin-right: 0; }
#bootcamp .grid .dl{ display: flex; flex-direction: column; padding: 50px; }
#bootcamp .grid .dl dl{ flex: 1 0 auto; margin-bottom: 10px; }
#bootcamp .grid .dl dl dt{ font-size: 22px; font-weight: 600; color: #222; letter-spacing: -0.03em; margin-bottom: 17px; }
#bootcamp .grid .dl dl dd{ font-size: 20px; font-weight: 300; color: #666; letter-spacing: -0.03em; line-height: 1.7; }
#bootcamp .grid .dl .icon{ width: 60px; height: 60px; display: flex; justify-content: center; align-items: center; background: #FCF2F3; border-radius: 50%; margin-left: auto; }

@media screen and (max-width: 1600px){
	#bootcamp .title{ margin-bottom: 60px; }
	#bootcamp .title h4{ font-size: 34px; }
	#bootcamp .title p{ font-size: 20px; }
	
	#bootcamp .diagram dl{ padding: 50px; }
	#bootcamp .diagram dl dt{ font-size: 22px; padding: 12px 40px; }
	#bootcamp .diagram ul::after{ bottom: -80px; }
	#bootcamp .diagram ul li::after{ height: 80px; }
	#bootcamp .diagram .circle .text p{ font-size: 24px; }
	
	#bootcamp .grid .dl{ padding: 35px; }
	#bootcamp .grid .dl dl dt{ font-size: 20px; }
	#bootcamp .grid .dl dl dd{ font-size: 18px; }
	#bootcamp .grid .dl .icon{ width: 50px; height: 50px; padding: 12px; }
}

@media screen and (max-width: 1280px){
	#bootcamp .title{ margin-bottom: 30px; }
	#bootcamp .title h4{ font-size: 30px; }
	#bootcamp .title p{ font-size: 18px; margin-top: 15px; }
	
	#bootcamp .diagram dl{ padding: 30px; }
	#bootcamp .diagram dl dt{ font-size: 20px; padding: 10px 30px; }
	#bootcamp .diagram ul::before{ width: calc(100% - ((100% - 160px) / 3)); height: 20px; }
	#bootcamp .diagram ul::after{ width: 7px; height: 7px; bottom: -60px; }
	#bootcamp .diagram ul li{ width: calc((100% - 160px) / 3); margin-right: 80px; }
	#bootcamp .diagram ul li::before{ width: 15px; height: 15px; right: -40px; }
	#bootcamp .diagram ul li::after{ height: 60px; }
	#bootcamp .diagram .circle .text p{ font-size: 20px; margin-top: 10px; }
	
	#bootcamp .grid .dl{ padding: 30px; }
	#bootcamp .grid .dl dl dt{ font-size: 18px; margin-bottom: 10px; }
	#bootcamp .grid .dl dl dd{ font-size: 16px; }
	#bootcamp .grid .dl .icon{ width: 45px; height: 45px; padding: 10px; }
}

@media screen and (max-width: 1000px){
	#bootcamp .diagram ul::before{ width: calc(100% - ((100% - 80px) / 3)); height: 15px; border-radius: 0 0 15px 15px; }
	#bootcamp .diagram ul li{ width: calc((100% - 80px) / 3); margin-right: 40px; }
	#bootcamp .diagram ul li::before{ right: -20px; }
}

@media screen and (max-width: 1150px){
	#bootcamp .flex-box{ flex-direction: column; }
	#bootcamp .flex-box > div{ width: 100%; }
	#bootcamp .flex-box > div:not(:last-of-type){ margin-bottom: 10px; }	
}

@media screen and (max-width: 900px){
	#bootcamp .title h4{ font-size: 24px; }
	#bootcamp .title p{ font-size: 17px; }
	
	#bootcamp .diagram dl dt{ font-size: 18px; padding: 8px 20px; }
	#bootcamp .diagram .circle .text p{ font-size: 17px; }
}

@media screen and (max-width: 750px){
	#bootcamp .diagram dl{ border-radius: 100px; }
	#bootcamp .diagram ul{ flex-wrap: wrap; }
	#bootcamp .diagram ul::before{ width: 1px; height: 35px; border: none; border-right: 2px dashed var(--mainColor); bottom: -25px; }
	#bootcamp .diagram ul li{ width: calc((100% - 40px) / 2); }
	#bootcamp .diagram ul li:nth-of-type(2n){ margin-right: 0; }
	#bootcamp .diagram ul li::before{ top: 88%; transform: translate(50%, -100%); }
	#bootcamp .diagram ul li:nth-of-type(2n)::before{ display: none; }
	#bootcamp .diagram ul li::after{ display: none; }
}

@media screen and (max-width: 600px){
	#bootcamp .title p br{ display: none; }
}

@media screen and (max-width: 550px){
	#bootcamp .diagram dl{ padding: 25px; }
	
	#bootcamp .grid .dl{ padding: 25px; }
}


/* 서비스 - EXIN 교육서비스 */
#exin{ background: var(--gradiBg); padding-top: var(--subPt); }
#exin .page-title{ margin-bottom: 60px; }

#exin .center{ text-align: center; }
#exin .center p{ font-family: var(--engFont); font-size: 28px; font-weight: 500; color: #111; margin-top: 40px; }
#exin .center .circle{ max-width: 320px; margin: 0 auto; background: linear-gradient(110deg, rgba(234, 117, 55, 0.1), rgba(195, 8, 19, 0.1)); box-shadow: var(--shadow); border-radius: 50%; padding: 30px; }
#exin .center .circle .inner{ display: block; padding-bottom: 100%; background: linear-gradient(100deg, var(--orange), var(--mainColor)); box-shadow: var(--shadow); border-radius: 50%; position: relative; }
#exin .center .circle .inner::before{ content: ""; width: 1px; height: 60px; border-right: 2px dashed #000; position: absolute; bottom: 0; left: 50%; transform: translate(-50%, 100%); mask-image: linear-gradient(to top, #000, transparent); -webkit-mask-image: linear-gradient(to top, #000, transparent); }
#exin .center .circle .inner::after{ content: ""; width: 10px; height: 10px; background: #000; border-radius: 50%; position: absolute; bottom: -60px; left: 50%; transform: translateX(-50%); }
#exin .center .circle figure{ padding: 0 30px; position: absolute; top: 53%; left: 0; right: 0; transform: translateY(-50%); }
#exin .center .circle figure img{ filter: drop-shadow(var(--shadow)); -webkit-filter: drop-shadow(var(--shadow)); }


#exin .sec-box .sec{ background: #FFF; box-shadow: var(--shadow); border-radius: 30px; padding: 60px; }
#exin .sec-box .sec:not(:last-of-type){ margin-bottom: 30px; }

#exin .sec-box .sec01{ text-align: center; padding-top: 150px; position: relative; margin-top: 35px; }
#exin .sec-box .sec01 h5{ background: #2E2E2E; border-radius: 70px; font-family: var(--engFont); font-size: 24px; font-weight: 600; color: #FFF; padding: 20px 60px; position: absolute; top: 0; left: 50%; transform: translate(-50%, -50%); }
#exin .sec-box .sec01 .exin svg{ width: auto; height: auto; margin-bottom: 100px; }

#exin .sec-box .sec01 ul{ display: grid; grid-template-columns: repeat(3, 1fr); margin: -7px; }
#exin .sec-box .sec01 ul li{ align-content: center; border: 2px solid #EEE; border-radius: 20px; font-size: 20px; font-weight: 500; color: #222; letter-spacing: -0.03em; line-height: 1.6; padding: 40px 40px 50px; margin: 7px; }
#exin .sec-box .sec01 ul li::before{ content: ""; width: 30px; height: 30px; display: inline-block; background: var(--mainColor) url("/img/sub/service/exin_arrow.svg") no-repeat center center / contain; border-radius: 50%; margin-bottom: 10px; }
#exin .sec-box .sec01 ul li p{ line-height: inherit; }

#exin .line-box{
	--gap: 12px;
	--radius: 20px;
	--blue: #009DE0;
	--orange: #F96B2E;
	--yellow: #F5BA30;
	--navy: #002A5A;
	--green: #00A650;
}
#exin .line-box{ font-family: var(--engFont); margin-top: 60px; margin-bottom: calc(var(--gap) * -1); }
#exin .line-box .line{ display: flex; flex-wrap: wrap; }
#exin .line-box .line > div{ width: calc((100% - (var(--gap) * 5)) / 6); margin-right: var(--gap); margin-bottom: var(--gap); }
#exin .line-box .line > div:last-of-type{ margin-right: 0; }

#exin .sec01 .blue{ --bg: var(--blue); }
#exin .sec01 .orange{ --bg: var(--orange); }
#exin .sec01 .yellow{ --bg: var(--yellow); }
#exin .sec01 .navy{ --bg: var(--navy); }
#exin .sec01 .green{ --bg: var(--green); }

#exin .sec01 .b{ background: var(--blue) !important; }
#exin .sec01 .o{ background: var(--orange) !important; }
#exin .sec01 .y{ background: var(--yellow) !important; }
#exin .sec01 .n{ background: var(--navy) !important; }
#exin .sec01 .g{ background: var(--green) !important; }
#exin .sec01 .k{ background: #50646E !important; }

#exin .sec01 .tit{ display: flex; flex-direction: column; justify-content: center; background: var(--bg); border-radius: var(--radius); font-size: 24px; font-weight: 500; color: #FFF; padding: 10px; }
#exin .sec01 .item{ border-radius: var(--radius); overflow: hidden; }
#exin .sec01 .item figure{ display: block; background: #F5F5F5; padding: 30px; }
#exin .sec01 .item p{ background: var(--bg); font-size: 20px; font-weight: 500; color: #FFF; 4px 10px }


#exin .sec02{ display: grid; grid-template-columns: 460px auto; }
#exin .sec02 .mark{ text-align: center; }
#exin .sec02 .mark figure{ display: block; padding-bottom: 97.828%; position: relative; }
#exin .sec02 .mark figure img{ max-width: calc(100% - 40px); max-height: calc(100% - 40px); position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }
#exin .sec02 .mark p{ display: inline-block; background: #2E2E2E; border-radius: 70px; font-size: 22px; font-weight: 600; color: #FFF; letter-spacing: -0.03em;  padding: 15px 50px; }

#exin .sec02 .dl{ padding-left: 20px; }
#exin .sec02 .dl dl{ display: flex; border: 1px solid #DDD; border-radius: 20px; overflow: hidden; }
#exin .sec02 .dl dl:not(:last-of-type){ margin-bottom: 10px; }
#exin .sec02 .dl dl dt{ display: flex; flex-direction: column; justify-content: center; width: 200px; background: #F5F5F5; border-right: 1px solid #DDD; font-size: 20px; font-weight: 500; color: #111; letter-spacing: -0.03em; text-align: center; padding: 12px; }
#exin .sec02 .dl dl dd{ width: calc(100% - 200px); font-size: 20px; font-weight: 300; color: #333; letter-spacing: -0.03em; padding: 22px 30px; }
#exin .sec02 .dl dl dd p{ font-weight: 500; }
#exin .sec02 .dl dl dd ul li{ padding-left: 15px; position: relative; }
#exin .sec02 .dl dl dd ul li:not(:last-of-type){ margin-bottom: 10px; }
#exin .sec02 .dl dl dd ul li::before{ content: ""; width: 5px; height: 5px; background: #666; border-radius: 50%; position: absolute; top: calc(1.3em / 2); left: 0; transform: translateY(-50%); }
#exin .sec02 .dl dl dd ul li span{ display: block; color: #666; margin-top: 10px; }

#exin .viewBtn{ background: #DDD; }
#exin .viewBtn i::before{ background-image: url("/img/sub/service/target_icon.svg"); }
#exin .viewBtn span{ padding-left: 30px; padding-right: 65px; }

@media screen and (max-width: 1600px){
	#exin .page-title{ margin-bottom: 40px; }

	#exin .center .circle{ max-width: 280px; }
	#exin .center p{ font-size: 24px; }

	#exin .sec-box .sec{ padding: 40px; }

	#exin .sec-box .sec01{ padding-top: 120px; }
	#exin .sec-box .sec01 h5{ font-size: 22px; padding: 15px 40px; }
	#exin .sec-box .sec01 .exin svg{ height: 120px; margin-bottom: 70px; }
	#exin .sec-box .sec01 ul li{ font-size: 18px; padding: 25px 25px 40px; }

	#exin .sec01 .tit{ font-size: 22px; }
	#exin .sec01 .item p{ font-size: 18px; padding: 3px 10px; }

	#exin .sec02 .mark p{ font-size: 20px; }
	#exin .sec02 .dl dl dt{ font-size: 18px; }
	#exin .sec02 .dl dl dd{ font-size: 18px; }

	#exin .viewBtn span{ padding-left: 25px; padding-right: 55px; }
}

@media screen and (max-width: 1280px){
	#exin .page-title{ margin-bottom: 30px; }

	#exin .center .circle{ max-width: 250px; padding: 20px; }
	#exin .center .circle figure{ padding: 0 40px; }
	#exin .center p{ font-size: 22px; padding: 12px 40px; }

	#exin .sec-box .sec{ padding: 25px; }

	#exin .sec-box .sec01{ padding-top: 80px; }
	#exin .sec-box .sec01 h5{ font-size: 20px; padding: 12px 35px; }
	#exin .sec-box .sec01 .exin svg{ height: 100px; margin-bottom: 40px; }
	#exin .sec-box .sec01 ul li{ font-size: 17px; padding: 20px; }
	#exin .sec-box .sec01 ul li::before{ width: 25px; height: 25px; margin-bottom: 5px; }

	#exin .line-box{ margin-top: 30px; }
	#exin .sec01 .tit{ font-size: 20px; }
	#exin .sec01 .item figure{ padding: 20px; }
	#exin .sec01 .item p{ font-size: 16px; }

	#exin .sec02{ grid-template-columns: 40% 60%; align-items: center; }
	#exin .sec02 .mark p{ font-size: 18px; padding: 10px 30px; }
	#exin .sec02 .dl dl dt{ width: 150px; font-size: 17px; }
	#exin .sec02 .dl dl dd{ width: calc(100% - 150px); font-size: 17px; padding: 18px 25px; }

	#exin .viewBtn span{ padding-left: 20px; padding-right: 50px; }
}

@media screen and (max-width: 1000px){
	#exin .sec-box .sec01 ul{ grid-template-columns: repeat(2, 1fr); }

	#exin .line-box .line:not(:last-of-type){ margin-bottom: 30px; }
	#exin .line-box .line > div{ width: calc((100% - (var(--gap) * 4)) / 5); }
	#exin .line-box .line > .tit{ width: 100%; margin-right: 0; }
	#exin .line-box .line > .tit br{ display: none; }

	#exin .sec02{ grid-template-columns: repeat(1, 1fr); }
	#exin .sec02 .mark{ margin-bottom: 20px; }
	#exin .sec02 .mark figure{ padding: 30px; }
	#exin .sec02 .mark figure img{ max-width: 100%; max-height: 100%; position: static; transform: translate(0, 0); }
	#exin .sec02 .dl{ padding-left: 0; }
}

@media screen and (max-width: 900px){
	#exin .center .circle{ max-width: 220px; }
	#exin .center .circle figure{ padding: 0 35px; }
	#exin .center p{ font-size: 20px; }

	#exin .sec-box .sec01 h5{ padding: 10px 30px; }
	#exin .sec-box .sec01 .exin svg{ height: 80px; }

	#exin .line-box .line > div{ width: calc((100% - (var(--gap) * 2)) / 3); }
	#exin .line-box .line > div:nth-of-type(4n){ margin-right: 0; }
}

@media screen and (max-width: 700px){
	#exin .sec-box .sec01 ul{ grid-template-columns: repeat(1, 1fr); }

	#exin .sec02 .dl dl{ flex-direction: column; }
	#exin .sec02 .dl dl dt{ width: 100%; border-right: none; border-bottom: 1px solid #DDD; }
	#exin .sec02 .dl dl dd{ width: 100%; padding: 20px; }
}



/* 기업소개 - 기업개요 */
#overview{ overflow: hidden; }
#overview h4{ font-size: 40px; font-weight: 600; color: #111; letter-spacing: -0.03em; text-align: center; margin-bottom: 130px; position: relative; z-index: 100; }

#overview .info{
	--icon: 100px;
}
#overview .info .grid-box{ display: grid; grid-template-columns: repeat(4, 1fr); margin: -10px; }
#overview .info .grid-box > div{ background: #FFF; box-shadow: var(--shadow); border-radius: 30px; padding: 60px 40px 40px 60px; margin: 10px; }
#overview .info dl{ height: 100%; display: flex; flex-direction: column; }
#overview .info dl dt{ font-family: var(--engFont); font-size: 24px; font-weight: 500; color: #222; margin-bottom: 20px; }
#overview .info dl dd{ flex: 1 0 auto; display: flex; flex-direction: column; font-size: 20px; font-weight: 300; color: #666; letter-spacing: -0.03em; }
#overview .info dl dd .icon{ flex: 1 0 auto; display: flex; justify-content: flex-end; align-items: flex-end; }
#overview .info dl dd .icon figure{ width: var(--icon); height: var(--icon); display: flex; justify-content: center; align-items: center; background: rgba(195, 8, 19, 0.05); border-radius: 50%; padding: 20px; }
#overview .info dl dd ul li:not(:last-of-type){ margin-bottom: 10px; }
#overview .info dl dd ul.border{ font-size: 19px; font-weight: 400; }
#overview .info dl dd ul.border li{ border: 2px solid #EEE; border-radius: 60px; text-align: center; }
#overview .info .sns{ display: flex; }
#overview .info .sns li:not(:last-of-type){ margin-right: 15px; }

#overview .info .item .icon{ margin-top: 45px; }

#overview .info .half{ grid-column: auto / span 2; }
#overview .info .half dl dd{ flex-direction: row; }
#overview .info .half dl dd .left{ width: calc(100% - (var(--icon) + 20px)); }
#overview .info .half dl dd .right{ align-content: flex-end; width: calc(var(--icon) + 20px); }
#overview .info .half dl dd ul.border{ max-width: 280px; }
#overview .info .half dl dd ul.border li{ padding: 12px; }

#overview .info .block{ grid-column: auto / span 4; }
#overview .info .block .border{ display: flex; flex-wrap: wrap; margin: -7px; }
#overview .info .block .border li{ padding: 7px 20px; margin: 7px; }
#overview .info .block .border li em{ font-family: var(--engFont); letter-spacing: 0; }
#overview .info .block .icon{ margin-top: 10px; }


#overview .major{ 
	--cir1: 170px;
	--cir2: 50px;
	--center: 460px;
	--centerP: 30px;
	--line: 150px;
	--lineP: 9%;
	--icon: 150px;
	--iconP: 30px;
}
#overview .major .diagram{ position: relative; } 
#overview .major .diagram .center::before,
#overview .major .diagram .center .circle,
#overview .major .diagram .center .circle::before{ box-shadow: var(--shadow); }
#overview .major .diagram .center{ max-width: var(--center); margin: 0 auto; position: relative; z-index: 10; } 
#overview .major .diagram .center::before,
#overview .major .diagram .center::after{ content: ""; border-radius: 50%; position: absolute; top: 50%; left: 50%; z-index: -5; transform: translate(-50%, -50%); box-sizing: border-box; }
#overview .major .diagram .center::before{ width: calc(100% + (var(--cir2) * 2)); height: calc(100% + (var(--cir2) * 2)); background: #FFF; }
#overview .major .diagram .center::after{ width: calc(100% + (var(--cir1) * 2)); height: calc(100% + (var(--cir1) * 2)); border: 1px solid #EEE; }
#overview .major .diagram .center .circle{ background: linear-gradient(135deg, rgba(234, 117, 55, 0.1), rgba(195, 8, 19, 0.1)); border-radius: 50%; padding: var(--centerP); }
#overview .major .diagram .center .circle::before{ content: ""; display: block; background: linear-gradient(127deg, var(--orange), var(--mainColor)); border-radius: 50%; padding-bottom: 100%; }
#overview .major .diagram .center .text{ width: calc(100% - (var(--centerP) * 2)); height: calc(100% - (var(--centerP) * 2)); display: flex; flex-direction: column; justify-content: center; background: url("/img/sub/company/symbol.svg") no-repeat center center / contain; padding: 30px; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }
#overview .major .diagram .center .text h5{ font-family: var(--engFont); font-size: 36px; font-weight: 500; color: #FFF; text-align: center; }

#overview .major .diagram ul{ display: grid; grid-template-columns: calc((100% - (var(--center) - var(--lineP))) / 2) calc(var(--center) - var(--lineP)) calc((100% - (var(--center) - var(--lineP))) / 2); grid-template-rows: var(--icon) auto var(--icon); opacity: 1; position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 20; }
#overview .major .diagram ul li{ display: flex; align-items: center; position: relative; transition-delay: 150ms; opacity: 0; transition: opacity 1s, transform 1s; }
#overview .major .diagram ul li:nth-of-type(3), 
#overview .major .diagram ul li:nth-of-type(4){ grid-row: 3 / 4; }
#overview .major .diagram ul li::before,
#overview .major .diagram ul li::after{ content: ""; position: absolute; top: 50%; transform: translateY(-50%); }
#overview .major .diagram ul li::before{  width: var(--line); height: 1px; border-bottom: 2px dashed #000; }
#overview .major .diagram ul li::after{ width: 10px; height: 10px; background: #000; border-radius: 50%; } 
#overview .major .diagram ul li .icon{ width: var(--icon); height: var(--icon); display: flex; justify-content: center; align-items: center; background: #FCF2F3; border-radius: 50%; padding: 15px; }
#overview .major .diagram ul li p{ font-size: 22px; font-weight: 500; color: #111; line-height: 1.5454; }

#overview .major .diagram ul li:nth-of-type(odd){ text-align: right; flex-direction: row-reverse; padding-right: var(--line); transform: translateX(var(--aosMinus)); }
#overview .major .diagram ul li:nth-of-type(odd)::before,
#overview .major .diagram ul li:nth-of-type(odd)::after{ right: 0; }
#overview .major .diagram ul li:nth-of-type(odd)::before{ mask-image: linear-gradient(to right, transparent, #000); -webkit-mask-image: linear-gradient(to right, transparent, #000); }
#overview .major .diagram ul li:nth-of-type(odd) p{ padding-right: var(--iconP); }

#overview .major .diagram ul li:nth-of-type(even){ grid-column: 3 / 4; padding-left: var(--line); transform: translateX(var(--aosPlus)); }
#overview .major .diagram ul li:nth-of-type(even)::before,
#overview .major .diagram ul li:nth-of-type(even)::after{ left: 0; }
#overview .major .diagram ul li:nth-of-type(even)::before{ mask-image: linear-gradient(to left, transparent, #000); -webkit-mask-image: linear-gradient(to left, transparent, #000); }
#overview .major .diagram ul li:nth-of-type(even) p{ padding-left: var(--iconP); }

#overview .major .diagram ul.aos-animate li{ opacity: 1; transform: translate(0, 0) !important; }


#overview .major .dl-box{ position: relative; z-index: 10; }
#overview .major .dl-box .dl{ display: flex; align-items: center; background: #FFF; box-shadow: var(--shadow); border-radius: 30px; padding: 60px 100px; } 
#overview .major .dl-box .dl:not(:last-of-type){ margin-bottom: 20px; }
#overview .major .dl-box .icon{ width: var(--icon); height: var(--icon); display: flex; justify-content: center; align-items: center; border: 2px solid #EEE; border-radius: 50%; padding: 15px; }
#overview .major .dl-box dl{ padding-left: 80px; }  
#overview .major .dl-box dl dt{ font-size: 28px; font-weight: 500; color: #111; letter-spacing: -0.02em; margin-bottom: 20px; }
#overview .major .dl-box dl dt em{ font-family: var(--engFont); letter-spacing: 0; }
#overview .major .dl-box dl dd{ font-size: 20px; font-weight: 300; color: #666; letter-spacing: -0.03em; }
#overview .major .dl-box ul li{ padding-left: 15px; position: relative; }
#overview .major .dl-box ul li:not(:last-of-type){ margin-bottom: 10px; }
#overview .major .dl-box ul li::before{ content: ""; width: 5px; height: 5px; background: #AAA; border-radius: 50%; position: absolute; top: calc(1.3em / 2); left: 0; transform: translateY(-50%); }

@media screen and (max-width: 1600px){
	#overview h4{ font-size: 36px; margin-bottom: 100px; }

	#overview .info {
		--icon: 90px;
	}
	#overview .info .grid-box > div{ padding: 45px 30px 30px 45px; }
	#overview .info dl dt{ font-size: 22px; }
	#overview .info dl dd{ font-size: 18px; }
	#overview .info dl dd ul.border{ font-size: 17px; }
	#overview .info .sns a img{ width: 45px; height: auto; }

	#overview .info .half dl dd ul.border li{ padding: 10px; }

	#overview .info .block .border li{ padding: 7px 15px; }


	#overview .major{ 
		--cir1: 130px;
		--cir2: 40px;
		--center: 400px;
		--centerP: 25px;
		--line: 120px;
		--lineP: 8%;
		--icon: 120px;
		--iconP: 25px;
	}
	#overview .major .diagram .center .text h5{ font-size: 32px; }
	#overview .major .diagram ul li p{ font-size: 20px; }

	#overview .major .dl-box .dl{ padding: 50px 70px; }
	#overview .major .dl-box dl dt{ font-size: 24px; }
	#overview .major .dl-box dl dd{ font-size: 18px; }
}

@media screen and (max-width: 1280px){
	#overview h4{ font-size: 32px; margin-bottom: 70px; }

	#overview .info {
		--icon: 80px;
	}
	#overview .info .grid-box > div{ padding: 35px 20px 20px 35px; }
	#overview .info dl dt{ font-size: 20px; margin-bottom: 10px; }
	#overview .info dl dd{ font-size: 17px; }
	#overview .info dl dd .icon figure{ padding: 17px; }
	#overview .info dl dd ul.border{ font-size: 16px; }
	#overview .info .sns li:not(:last-of-type){ margin-right: 10px; }
	#overview .info .sns a img{ width: 40px; height: auto; }

	#overview .info .half dl dd ul.border li{ padding: 8px; }

	#overview .info .block .border li{ padding: 6px 10px; }


	#overview .major{ 
		--cir1: 100px;
		--cir2: 30px;
		--center: 320px;
		--centerP: 20px;
		--line: 90px;
		--lineP: 9.5%;
		--icon: 100px;
		--iconP: 20px;
	}
	#overview .major .diagram .center .text h5{ font-size: 28px; }
	#overview .major .diagram ul li p{ font-size: 18px; }

	#overview .major .dl-box .dl{ padding: 30px 50px; }
	#overview .major .dl-box dl{ padding-left: 50px; }
	#overview .major .dl-box dl dt{ font-size: 21px; margin-bottom: 10px; }
	#overview .major .dl-box dl dd{ font-size: 17px; }
}

@media screen and (max-width: 1200px){
	#overview .info .grid-box{ grid-template-columns: repeat(2, 1fr); }
	#overview .info .grid-box > div{ padding: 25px; transform: translateY(var(--aosPlus)) !important; transition-delay: unset !important; }
	#overview .info .grid-box > div.aos-animate{ transform: translate(0, 0) !important; }

	#overview .info .item .icon{ margin-top: 20px; }

	#overview .info .block{ grid-column: auto / span 2; }
	#overview .info .block .border{ margin: -5px; }
	#overview .info .block .border li{ margin: 5px; }
}

@media screen and (max-width: 1000px){	
	#overview .major{ 
		--center: 250px;	
	}
	#overview .major .diagram ul{ position: relative; grid-template-columns: repeat(2, 1fr); grid-template-rows: unset; margin: 50px 0 -10px; }
	#overview .major .diagram ul li{ display: block; background: #FFF; border-radius: 30px; box-shadow: var(--shadow); margin: 10px; padding: 20px !important; }
	#overview .major .diagram ul li::before,
	#overview .major .diagram ul li::after{ display: none; }
	#overview .major .diagram ul li .icon{ margin: auto; }
	#overview .major .diagram ul li p{ width: 100%; padding: 10px 0 0 0 !important; text-align: center; }

	#overview .major .diagram ul li:nth-of-type(even){ grid-column: unset; }
	#overview .major .diagram ul li:nth-of-type(3), 
	#overview .major .diagram ul li:nth-of-type(4){ grid-row: unset; }
}

@media screen and (max-width: 900px){
	#overview h4{ font-size: 28px; }
	
	#overview .info {
		--icon: 70px;
	}
	#overview .info dl dd .icon figure{ padding: 15px; }


	#overview .major{ 
		--icon: 80px;	
	}
	#overview .major .diagram .center .text h5{ font-size: 24px; }
	#overview .major .diagram ul li .icon{ padding: 12px; }
	#overview .major .diagram ul li p{ font-size: 17px; }

	#overview .major .dl-box .dl{ flex-direction: column; align-items: flex-start; padding: 30px; }
	#overview .major .dl-box dl{ width: 100%; padding-top: 20px; padding-left: 0; }
	#overview .major .dl-box .icon{ padding: 12px; }
}

@media screen and (max-width: 700px){
	#overview .page-title br{ display: none; }
}

@media screen and (max-width: 600px){
	#overview .info .half.address dl dd{ flex-direction: column; }
	#overview .info .half.address dl dd > div{ width: 100%; }
	#overview .info .half.address .icon{ margin-top: 20px; }
}


/* 기업소개 - 오시는길 */
#location .page-title{ margin-bottom: 60px; }
#location .mb{ margin-bottom: 60px; }
#location .grid-box{ display: grid; grid-template-columns: repeat(3, 1fr); margin: -7px; }
#location .grid-box > div{ background: #FFF; border-radius: 30px; box-shadow: var(--shadow); padding: 60px 50px; margin: 7px; }
#location .grid-box .icon{ width: 130px; height: 130px; display: flex; justify-content: center; align-items: center; padding: 30px; position: relative; z-index: 10; margin: 0 auto; }
#location .grid-box .icon::before,
#location .grid-box .icon::after{ content: ""; background: var(--mainColor); opacity: 0.05; border-radius: 50%; position: absolute; top: 50%; left: 50%; z-index: -1; transform: translate(-50%, -50%); }
#location .grid-box .icon::before{ width: 100%; height: 100%; }
#location .grid-box .icon::after{ width: calc(100% - 30px); height: calc(100% - 30px); }

#location .grid-box dl dt{ font-family: var(--engFont); font-size: 30px; font-weight: 600; color: #111; text-align: center; margin: 20px 0; }
#location .grid-box dl dd{ font-size: 20px; font-weight: 300; color: #666; letter-spacing: -0.03em; }
#location .grid-box ul li{ display: flex; }
#location .grid-box ul li:not(:last-of-type){ margin-bottom: 20px; }
#location .grid-box ul li > *:first-child{ display: inline-block; white-space: nowrap; }

#location .grid-box .item01 ul li > *:first-child{ padding-right: 5px; }

#location .grid-box .item02 ul li{ flex-wrap: wrap; }
#location .grid-box .item02 ul li strong{ width: 120px; font-weight: 500; color: #111; }
#location .grid-box .item02 ul li p{ width: calc(100% - 120px); margin-left: auto; }
#location .grid-box .item02 ul li p:not(:last-of-type){ margin-bottom: 5px; }

#location .grid-box .item03{ text-align: center; }


#location .map .iframe{ height: 500px; border-radius: 30px; overflow: hidden; }
#location .map .iframe .root_daum_roughmap{ width: 100% !important; height: 100% !important; }
#location .map .iframe .root_daum_roughmap .wrap_map{ height: 100% !important; }
#location .map .iframe .root_daum_roughmap .map_border{ display: none; }
#location .map #map{ height: 500px; border-radius: 30px; overflow: hidden; }

@media screen and (max-width: 1700px){
	#location .page-title{ margin-bottom: 40px; }
	#location .mb{ margin-bottom: 40px; }
	#location .grid-box > div{ padding: 50px 40px; }
	#location .grid-box .icon{ width: 110px; height: 110px; }
	#location .grid-box dl dt{ font-size: 27px; }
	#location .grid-box dl dd{ font-size: 19px; }
}

@media screen and (max-width: 1280px){
	#location .page-title{ margin-bottom: 30px; }
	#location .mb{ margin-bottom: 20px; }
	#location .grid-box > div{ padding: 40px 30px; }
	#location .grid-box .icon{ width: 100px; height: 100px; padding: 25px; }
	#location .grid-box .icon::after{ width: calc(100% - 20px); height: calc(100% - 20px); }
	#location .grid-box dl dt{ font-size: 25px; margin: 15px 0; }
	#location .grid-box dl dd{ font-size: 18px; }

	#location .grid-box .item02 ul li strong{ width: 100px; }
	#location .grid-box .item02 ul li p{ width: calc(100% - 100px); }
}

@media screen and (max-width: 1100px){
	#location .grid-box{ grid-template-columns: repeat(1, 1fr); }
	#location .map .iframe{ height: 400px; }
}

@media screen and (max-width: 900px){
	#location .grid-box > div{ padding: 25px 30px; }
}


/* 기업소개 - 인재채용 */
#recruit{ overflow: hidden; }
#recruit .page-title{ margin-bottom: 80px; }

#recruit .diagram{ 
	--circle: 440px;
	--cirP: 20px;
	--lineG: 60px;
}
#recruit .diagram{ text-align: center; }
#recruit .diagram .center{ max-width: var(--circle); margin: 0 auto; border: 2px dashed rgba(195, 8, 19, 0.5); border-radius: 50%; padding: var(--cirP); position: relative; z-index: 10; }
#recruit .diagram .center .dot{ width: calc(100% + 4px); height: calc(100% + 4px); position: absolute; top: -2px; left: -2px; transform: rotate(var(--start)); }
#recruit .diagram .center .dot01{ --start: -45deg; animation: dotRotate 12s linear infinite; }
#recruit .diagram .center .dot02{ --start: 150deg; animation: dotRotate 12s linear infinite; }
#recruit .diagram .center .dot::before{ content: ""; display: block; width: 10px; height: 10px; background: var(--mainColor); border-radius: 50%; margin: 0 auto; transform: translateY(-45%); } 
#recruit .diagram .circle{ background: linear-gradient(150deg, var(--orange), var(--mainColor)); border-radius: 50%; position: relative; }
#recruit .diagram .circle::before{ content: ""; display: block; padding-bottom: 100%; background: url("/img/sub/company/symbol.svg") no-repeat center center / 80%; }
#recruit .diagram .circle .text{ position: absolute; top: 50%; left: 0; right: 0; transform: translateY(-50%); }
#recruit .diagram .circle .text h5{ font-family: var(--engFont); font-size: 50px; font-weight: 600; color: #FFF; }

#recruit .diagram .dl-box{ display: grid; grid-template-columns: repeat(4, 1fr ); padding-top: calc((var(--lineG) * 2) - var(--cirP)); margin: -10px; position: relative; }
#recruit .diagram .dl-box::after{ content: ""; width: 2px; height: var(--lineG); background: #EEE; position: absolute; top: -10px; left: 50%; transform: translateX(-50%); }
#recruit .diagram .dl-box dl{ margin: 10px; background: #FFF; box-shadow: var(--shadow); border-radius: 30px; padding: 80px 20px; position: relative; }
#recruit .diagram .dl-box dl::before{ content: ""; width: calc(100% + 50px); height: var(--lineG); border: 2px solid #EEE; border-bottom: none !important; position: absolute; top: 0; transform: translateY(-100%); }
#recruit .diagram .dl-box dl:nth-of-type(1)::before,
#recruit .diagram .dl-box dl:nth-of-type(2)::before{ border-radius: 30px 0 0 0; border-right: none; left: 50%; }
#recruit .diagram .dl-box dl:nth-of-type(3)::before,
#recruit .diagram .dl-box dl:nth-of-type(4)::before{ border-radius: 0 30px 0 0; border-left: none; right: 50%; }
#recruit .diagram .dl-box dl dt{ font-family: var(--engFont); font-size: 6rem; font-weight: 700; color: #000; margin-bottom: 15px; }
#recruit .diagram .dl-box dl dt:first-letter{ color: var(--mainColor); }
#recruit .diagram .dl-box dl dd{ font-size: 20px; font-weight: 300; color: #333; letter-spacing: -0.03em; line-height: 1.6; }
#recruit .diagram .dl-box dl dd *{ line-height: inherit; }
#recruit .diagram .dl-box dl dd p{ margin-bottom: 50px; }
#recruit .diagram .dl-box dl dd .icon{ width: 130px; height: 130px; display: flex; justify-content: center; align-items: center; background: rgba(195, 8, 19, 0.05); border-radius: 50%; padding: 25px; margin: 0 auto; }

@media screen and (max-width: 1600px){
	#recruit .page-title{ margin-bottom: 60px; }

	#recruit .diagram{ 
		--circle: 350px;
	}
	#recruit .diagram .circle .text h5{ font-size: 40px; }

	#recruit .diagram .dl-box dl{ padding: 60px 20px; }
	#recruit .diagram .dl-box dl dd{ font-size: 18px; }
	#recruit .diagram .dl-box dl dd p{ margin-bottom: 40px; }
	#recruit .diagram .dl-box dl dd .icon{ width: 110px; height: 110px; }
}

@media screen and (max-width: 1280px){
	#recruit .page-title{ margin-bottom: 30px; }

	#recruit .diagram{ 
		--circle: 270px;
		--lineG: 45px;
	}
	#recruit .diagram .center{ padding: 10px; }
	#recruit .diagram .center .dot::before{ width: 7px; height: 7px; }
	#recruit .diagram .circle .text h5{ font-size: 35px; }


	#recruit .diagram .dl-box dl{ padding: 40px 20px; }
	#recruit .diagram .dl-box dl dt{ margin-bottom: 10px; }
	#recruit .diagram .dl-box dl dd{ font-size: 17px; }
	#recruit .diagram .dl-box dl dd p{ margin-bottom: 30px; }
	#recruit .diagram .dl-box dl dd .icon{ width: 90px; height: 90px; padding: 20px; }
}

@media screen and (max-width: 900px){
	#recruit .diagram{ 
		--circle: 250px;
		--lineG: 35px;
	}
	#recruit .diagram .dl-box{ grid-template-columns: repeat(2, 1fr); }
	#recruit .diagram .dl-box::after{ height: calc(var(--lineG) + 10px); }
	#recruit .diagram .dl-box dl::before{ width: 100%; height: 20px; border-top: none !important; border-radius: 0 !important; }
	#recruit .diagram .dl-box dl:nth-of-type(odd)::before{ left: 50%; right: unset; border: 2px solid #EEE; border-right: none; }
	#recruit .diagram .dl-box dl:nth-of-type(even)::before{ left: unset; right: 50%; border: 2px solid #EEE; border-left: none; }
	#recruit .diagram .dl-box dl:nth-of-type(1)::before,
	#recruit .diagram .dl-box dl:nth-of-type(2)::before{ height: calc(var(--lineG) - 10px); border-top: 2px solid #EEE !important; }
	#recruit .diagram .dl-box dl:nth-of-type(1)::before{ border-radius: 20px 0 0 0 !important; }
	#recruit .diagram .dl-box dl:nth-of-type(2)::before{ border-radius: 0 20px 0 0 !important; }
	#recruit .diagram .dl-box dl dd p{ margin-bottom: 20px; }
}