.ing_webdev,
.ing_webdev *{
	box-sizing:border-box;
}

.ing_webdev{
	--ing-primary:#1265e8;
	--ing-primary-dark:#0747b7;
	--ing-primary-light:#eaf3ff;
	--ing-navy:#071d3a;
	--ing-text:#15243a;
	--ing-sub:#66758b;
	--ing-line:#dfe7f1;
	--ing-bg:#f5f8fc;
	position:relative;
	width:100%;
	overflow:hidden;
	color:var(--ing-text);
	font-family:"Pretendard","Noto Sans KR","Malgun Gothic",sans-serif;
	background:#fff;
}

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

.ing_webdev svg{
	display:block;
	width:100%;
	height:100%;
	fill:none;
	stroke:currentColor;
	stroke-width:1.8;
	stroke-linecap:round;
	stroke-linejoin:round;
}

.ing_webdev_inner{
	position:relative;
	width:calc(100% - 40px);
	max-width:1320px;
	margin:0 auto;
}

.ing_webdev_section{
	position:relative;
	padding:130px 0;
}

.ing_webdev_section_head{
	max-width:800px;
	margin:0 auto 65px;
	text-align:center;
}

.ing_webdev_section_eyebrow{
	margin:0 0 17px;
	color:var(--ing-primary);
	font-size:14px;
	font-weight:800;
	line-height:1.4;
	letter-spacing:2.6px;
}

.ing_webdev_section_head h2,
.ing_webdev_reliability_text h2,
.ing_webdev_support_text h2{
	margin:0;
	color:var(--ing-navy);
	font-size:46px;
	font-weight:800;
	line-height:1.3;
	letter-spacing:-2.2px;
	word-break:keep-all;
}

.ing_webdev_section_head h2 span,
.ing_webdev_reliability_text h2 span,
.ing_webdev_support_text h2 span{
	color:var(--ing-primary);
}

.ing_webdev_section_head > p:last-child{
	max-width:680px;
	margin:24px auto 0;
	color:var(--ing-sub);
	font-size:18px;
	line-height:1.85;
	letter-spacing:-0.45px;
	word-break:keep-all;
}


/* 등장 효과 */
.ing_webdev_reveal{
	opacity:0;
	transform:translateY(38px);
	transition:
		opacity .8s ease,
		transform .8s cubic-bezier(.2,.65,.3,1);
}

.ing_webdev_reveal.ing_webdev_visible{
	opacity:1;
	transform:translateY(0);
}


/* 메인 비주얼 */
.ing_webdev_hero{
	position:relative;
	min-height:760px;
	padding:105px 0 110px;
	background:
		linear-gradient(130deg, #f7fbff 0%, #edf5ff 52%, #f8fbff 100%);
	overflow:hidden;
}

.ing_webdev_hero_bg{
	position:absolute;
	inset:0;
	pointer-events:none;
}

.ing_webdev_bg_circle{
	position:absolute;
	display:block;
	border-radius:50%;
	filter:blur(1px);
}

.ing_webdev_bg_circle01{
	top:-260px;
	right:-170px;
	width:670px;
	height:670px;
	background:rgba(18,101,232,.09);
}

.ing_webdev_bg_circle02{
	bottom:-310px;
	left:-250px;
	width:620px;
	height:620px;
	border:110px solid rgba(67,154,255,.055);
}

.ing_webdev_bg_grid{
	position:absolute;
	inset:0;
	opacity:.5;
	background-image:
		linear-gradient(rgba(20,98,211,.045) 1px, transparent 1px),
		linear-gradient(90deg, rgba(20,98,211,.045) 1px, transparent 1px);
	background-size:42px 42px;
	mask-image:linear-gradient(to right, rgba(0,0,0,.85), transparent 75%);
	-webkit-mask-image:linear-gradient(to right, rgba(0,0,0,.85), transparent 75%);
}

.ing_webdev_hero_layout{
	position:relative;
	z-index:2;
	display:grid;
	grid-template-columns:minmax(0, 1fr) minmax(520px, .94fr);
	align-items:center;
	gap:80px;
}

.ing_webdev_eyebrow{
	display:flex;
	align-items:center;
	gap:10px;
	margin:0 0 23px;
	color:var(--ing-primary);
	font-size:14px;
	font-weight:800;
	letter-spacing:2.2px;
}

.ing_webdev_eyebrow_dot{
	position:relative;
	display:block;
	width:10px;
	height:10px;
	border-radius:50%;
	background:var(--ing-primary);
	box-shadow:0 0 0 6px rgba(18,101,232,.12);
}

.ing_webdev_hero_title{
	margin:0;
	color:var(--ing-navy);
	font-size:56px;
	font-weight:800;
	line-height:1.25;
	letter-spacing:-3.1px;
	word-break:keep-all;
}

.ing_webdev_hero_title span{
	position:relative;
	color:var(--ing-primary);
}

.ing_webdev_hero_title span:after{
	content:"";
	position:absolute;
	left:0;
	right:0;
	bottom:1px;
	height:11px;
	border-radius:20px;
	background:rgba(18,101,232,.12);
	z-index:-1;
}

.ing_webdev_hero_desc{
	max-width:690px;
	margin:28px 0 0;
	color:#586a82;
	font-size:18px;
	line-height:1.9;
	letter-spacing:-.45px;
	word-break:keep-all;
}

.ing_webdev_hero_buttons{
	display:flex;
	align-items:center;
	gap:12px;
	margin-top:38px;
}

.ing_webdev_btn{
	display:inline-flex;
	align-items:center;
	justify-content:center;
	gap:22px;
	min-width:190px;
	height:58px;
	padding:0 25px;
	border-radius:10px;
	font-size:16px;
	font-weight:700;
	transition:
		transform .25s ease,
		box-shadow .25s ease,
		background .25s ease,
		color .25s ease;
}

.ing_webdev_btn:hover{
	transform:translateY(-3px);
}

.ing_webdev_btn_primary{
	color:#fff !important;
	background:var(--ing-primary);
	box-shadow:0 14px 30px rgba(18,101,232,.23);
}

.ing_webdev_btn_primary:hover{
	background:var(--ing-primary-dark);
	box-shadow:0 18px 38px rgba(18,101,232,.31);
}

.ing_webdev_btn_line{
	color:var(--ing-navy) !important;
	border:1px solid #c9d7e8;
	background:rgba(255,255,255,.78);
}

.ing_webdev_btn_line:hover{
	border-color:var(--ing-primary);
	color:var(--ing-primary) !important;
	background:#fff;
	box-shadow:0 14px 30px rgba(21,58,105,.1);
}

.ing_webdev_btn span{
	font-size:19px;
	font-weight:400;
}

.ing_webdev_hero_checks{
	display:flex;
	flex-wrap:wrap;
	align-items:center;
	gap:20px;
	margin:31px 0 0;
	padding:0;
	list-style:none;
}

.ing_webdev_hero_checks li{
	display:flex;
	align-items:center;
	gap:7px;
	color:#5a6d85;
	font-size:14px;
	font-weight:600;
}

.ing_webdev_check_icon{
	display:inline-flex;
	align-items:center;
	justify-content:center;
	width:20px;
	height:20px;
	border-radius:50%;
	color:var(--ing-primary);
	font-size:11px;
	font-weight:900;
	background:#fff;
	box-shadow:0 4px 10px rgba(24,89,178,.13);
}


/* 시스템 시각화 */
.ing_webdev_hero_visual{
	position:relative;
	min-height:535px;
}

.ing_webdev_system_window{
	position:absolute;
	top:50%;
	left:50%;
	width:550px;
	border:1px solid rgba(208,222,241,.9);
	border-radius:23px;
	background:rgba(255,255,255,.93);
	box-shadow:
		0 35px 80px rgba(21,61,114,.17),
		0 3px 15px rgba(20,60,110,.07);
	transform:translate(-50%,-50%) rotate(1.5deg);
	backdrop-filter:blur(10px);
	-webkit-backdrop-filter:blur(10px);
	overflow:hidden;
}

.ing_webdev_window_top{
	display:flex;
	align-items:center;
	height:47px;
	padding:0 18px;
	border-bottom:1px solid #e7edf5;
	background:#fbfdff;
}

.ing_webdev_window_dots{
	display:flex;
	gap:6px;
}

.ing_webdev_window_dots span{
	display:block;
	width:8px;
	height:8px;
	border-radius:50%;
	background:#c9d5e5;
}

.ing_webdev_window_dots span:first-child{
	background:#ff7b78;
}

.ing_webdev_window_dots span:nth-child(2){
	background:#ffc65b;
}

.ing_webdev_window_dots span:nth-child(3){
	background:#54d39b;
}

.ing_webdev_window_top p{
	flex:1;
	margin:0;
	padding-right:44px;
	color:#8b98aa;
	font-size:10px;
	font-weight:700;
	text-align:center;
	letter-spacing:1.4px;
}

.ing_webdev_window_body{
	display:flex;
	min-height:390px;
}

.ing_webdev_window_sidebar{
	display:flex;
	flex-direction:column;
	align-items:center;
	gap:20px;
	width:68px;
	padding:23px 0;
	background:var(--ing-navy);
}

.ing_webdev_sidebar_logo{
	display:flex;
	align-items:center;
	justify-content:center;
	width:34px;
	height:34px;
	margin-bottom:13px;
	border-radius:11px;
	color:#fff;
	font-size:10px;
	font-weight:900;
	background:linear-gradient(135deg,#2388ff,#0c54c7);
	box-shadow:0 8px 18px rgba(32,123,255,.35);
}

.ing_webdev_window_sidebar > span{
	display:block;
	width:21px;
	height:5px;
	border-radius:10px;
	background:rgba(255,255,255,.19);
}

.ing_webdev_window_sidebar > span.active{
	width:29px;
	background:#50a1ff;
}

.ing_webdev_dashboard{
	flex:1;
	padding:26px;
	background:#f5f8fc;
}

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

.ing_webdev_dashboard_header > div{
	display:flex;
	flex-direction:column;
	gap:7px;
}

.ing_webdev_skeleton{
	display:block;
	border-radius:20px;
	background:#d9e3ef;
}

.ing_webdev_skeleton_title{
	width:125px;
	height:10px;
	background:#8da1ba;
}

.ing_webdev_skeleton_text{
	width:80px;
	height:6px;
}

.ing_webdev_dashboard_status{
	display:inline-flex;
	align-items:center;
	height:24px;
	padding:0 9px;
	border-radius:20px;
	color:#13895b;
	font-size:8px;
	font-weight:800;
	letter-spacing:.4px;
	background:#dff8ed;
}

.ing_webdev_dashboard_cards{
	display:grid;
	grid-template-columns:repeat(2,1fr);
	gap:13px;
	margin-top:23px;
}

.ing_webdev_dashboard_card{
	position:relative;
	min-height:103px;
	padding:16px;
	border:1px solid #e3ebf5;
	border-radius:14px;
	background:#fff;
	box-shadow:0 8px 18px rgba(31,73,125,.045);
}

.ing_webdev_card_icon{
	display:flex;
	align-items:center;
	justify-content:center;
	width:30px;
	height:30px;
	margin-bottom:12px;
	padding:7px;
	border-radius:9px;
	color:var(--ing-primary);
	background:#eaf3ff;
}

.ing_webdev_dashboard_card strong{
	display:block;
	color:#243850;
	font-size:10px;
	letter-spacing:.7px;
}

.ing_webdev_dashboard_card small{
	display:block;
	margin-top:4px;
	color:#9aa7b8;
	font-size:8px;
}

.ing_webdev_dashboard_chart{
	margin-top:13px;
	padding:17px 18px 13px;
	border:1px solid #e3ebf5;
	border-radius:14px;
	background:#fff;
	box-shadow:0 8px 18px rgba(31,73,125,.045);
}

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

.ing_webdev_chart_title span{
	color:#53677f;
	font-size:9px;
	font-weight:700;
}

.ing_webdev_chart_title strong{
	color:var(--ing-primary);
	font-size:8px;
}

.ing_webdev_chart_area{
	position:relative;
	display:flex;
	align-items:flex-end;
	gap:10px;
	height:95px;
	margin-top:15px;
	padding:0 6px;
	border-bottom:1px solid #dfe8f2;
	background:
		linear-gradient(to bottom, transparent 32%, #edf2f7 33%, transparent 34%, transparent 65%, #edf2f7 66%, transparent 67%);
}

.ing_webdev_chart_area span{
	flex:1;
	min-height:15px;
	border-radius:5px 5px 0 0;
	background:linear-gradient(to top,#1265e8,#5ba8ff);
	box-shadow:0 5px 12px rgba(18,101,232,.14);
	animation:ingWebdevGraph 2.8s ease-in-out infinite alternate;
	transform-origin:bottom;
}

.ing_webdev_chart_area span:nth-child(2){
	animation-delay:.1s;
}

.ing_webdev_chart_area span:nth-child(3){
	animation-delay:.2s;
}

.ing_webdev_chart_area span:nth-child(4){
	animation-delay:.3s;
}

.ing_webdev_chart_area span:nth-child(5){
	animation-delay:.4s;
}

.ing_webdev_chart_area span:nth-child(6){
	animation-delay:.5s;
}

.ing_webdev_chart_area span:nth-child(7){
	animation-delay:.6s;
}

.ing_webdev_chart_area span:nth-child(8){
	animation-delay:.7s;
}

@keyframes ingWebdevGraph{
	from{
		transform:scaleY(.86);
		opacity:.78;
	}
	to{
		transform:scaleY(1);
		opacity:1;
	}
}

.ing_webdev_dashboard_bottom{
	display:grid;
	grid-template-columns:1.5fr 1fr .8fr;
	gap:10px;
	margin-top:13px;
}

.ing_webdev_dashboard_bottom span{
	display:block;
	height:33px;
	border:1px solid #e4ebf4;
	border-radius:10px;
	background:#fff;
}

.ing_webdev_float_badge{
	position:absolute;
	z-index:4;
	display:flex;
	align-items:center;
	gap:12px;
	padding:13px 17px;
	border:1px solid rgba(216,228,243,.95);
	border-radius:14px;
	background:rgba(255,255,255,.95);
	box-shadow:0 17px 35px rgba(21,61,114,.15);
	animation:ingWebdevFloat 3.8s ease-in-out infinite;
}

.ing_webdev_float_badge01{
	top:74px;
	left:-6px;
}

.ing_webdev_float_badge02{
	right:-4px;
	bottom:63px;
	animation-delay:.8s;
}

@keyframes ingWebdevFloat{
	0%,
	100%{
		transform:translateY(0);
	}
	50%{
		transform:translateY(-9px);
	}
}

.ing_webdev_float_icon{
	display:flex;
	align-items:center;
	justify-content:center;
	width:38px;
	height:38px;
	padding:9px;
	border-radius:11px;
	color:#fff;
	background:linear-gradient(135deg,#2d8cff,#0b59cf);
}

.ing_webdev_float_badge strong{
	display:block;
	color:#263b55;
	font-size:12px;
}

.ing_webdev_float_badge small{
	display:block;
	margin-top:3px;
	color:#8b99aa;
	font-size:10px;
}


/* 숫자 요약 */
.ing_webdev_summary{
	position:relative;
	z-index:5;
	margin-top:-32px;
}

.ing_webdev_summary_grid{
	display:grid;
	grid-template-columns:repeat(4,1fr);
	border:1px solid #e1e9f3;
	border-radius:19px;
	background:#fff;
	box-shadow:0 20px 50px rgba(21,61,114,.1);
	overflow:hidden;
}

.ing_webdev_summary_item{
	position:relative;
	padding:31px 25px;
	text-align:center;
}

.ing_webdev_summary_item:not(:last-child):after{
	content:"";
	position:absolute;
	top:31px;
	right:0;
	bottom:31px;
	width:1px;
	background:#e6edf5;
}

.ing_webdev_summary_item strong{
	display:flex;
	align-items:flex-end;
	justify-content:center;
	gap:3px;
	color:var(--ing-primary);
	font-size:34px;
	font-weight:800;
	line-height:1;
	letter-spacing:-1.5px;
}

.ing_webdev_summary_item em{
	padding-bottom:3px;
	font-size:16px;
	font-style:normal;
	letter-spacing:-.5px;
}

.ing_webdev_summary_item p{
	margin:11px 0 0;
	color:#66758a;
	font-size:14px;
	font-weight:600;
}


/* 기술 기반 */
.ing_webdev_technology{
	padding-top:145px;
	background:#fff;
}

.ing_webdev_technology_layout{
	display:grid;
	grid-template-columns:minmax(0,.95fr) minmax(500px,1.05fr);
	align-items:center;
	gap:100px;
}

.ing_webdev_technology_content{
	display:flex;
	flex-direction:column;
	gap:20px;
}

.ing_webdev_tech_point{
	display:grid;
	grid-template-columns:64px minmax(0,1fr);
	gap:23px;
	padding:27px 28px;
	border:1px solid #e2eaf4;
	border-radius:17px;
	background:#fff;
	transition:
		transform .25s ease,
		border-color .25s ease,
		box-shadow .25s ease;
}

.ing_webdev_tech_point:hover{
	transform:translateX(8px);
	border-color:#bdd6fb;
	box-shadow:0 15px 35px rgba(21,61,114,.08);
}

.ing_webdev_tech_number{
	display:flex;
	align-items:center;
	justify-content:center;
	width:58px;
	height:58px;
	border-radius:16px;
	color:var(--ing-primary);
	font-size:16px;
	font-weight:800;
	background:var(--ing-primary-light);
}

.ing_webdev_tech_point h3{
	margin:1px 0 9px;
	color:var(--ing-navy);
	font-size:20px;
	font-weight:800;
	letter-spacing:-.6px;
}

.ing_webdev_tech_point p{
	margin:0;
	color:var(--ing-sub);
	font-size:15px;
	line-height:1.75;
	letter-spacing:-.3px;
	word-break:keep-all;
}

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

.ing_webdev_orbit{
	position:relative;
	width:520px;
	height:520px;
	border-radius:50%;
	background:
		radial-gradient(circle at center, rgba(57,145,255,.09) 0, rgba(57,145,255,.035) 35%, transparent 66%);
}

.ing_webdev_orbit:before,
.ing_webdev_orbit:after{
	content:"";
	position:absolute;
	border:1px dashed rgba(18,101,232,.23);
	border-radius:50%;
}

.ing_webdev_orbit:before{
	inset:58px;
	animation:ingWebdevRotate 24s linear infinite;
}

.ing_webdev_orbit:after{
	inset:125px;
	border-style:solid;
	border-color:rgba(18,101,232,.11);
}

@keyframes ingWebdevRotate{
	to{
		transform:rotate(360deg);
	}
}

.ing_webdev_orbit_line{
	position:absolute;
	top:50%;
	left:50%;
	display:block;
	width:360px;
	height:1px;
	background:linear-gradient(to right,transparent,rgba(18,101,232,.22),transparent);
	transform-origin:center;
}

.ing_webdev_orbit_line01{
	transform:translate(-50%,-50%) rotate(35deg);
}

.ing_webdev_orbit_line02{
	transform:translate(-50%,-50%) rotate(-35deg);
}

.ing_webdev_orbit_center{
	position:absolute;
	top:50%;
	left:50%;
	z-index:3;
	display:flex;
	flex-direction:column;
	align-items:center;
	justify-content:center;
	width:174px;
	height:174px;
	border:12px solid rgba(255,255,255,.7);
	border-radius:50%;
	color:#fff;
	background:linear-gradient(145deg,#2388ff,#0749b9);
	box-shadow:
		0 24px 48px rgba(18,101,232,.29),
		inset 0 0 25px rgba(255,255,255,.18);
	transform:translate(-50%,-50%);
}

.ing_webdev_orbit_center strong{
	font-size:37px;
	font-weight:900;
	line-height:1;
	letter-spacing:1px;
}

.ing_webdev_orbit_center span{
	margin-top:4px;
	font-size:12px;
	font-weight:700;
	letter-spacing:1.6px;
}

.ing_webdev_orbit_center small{
	margin-top:13px;
	padding-top:11px;
	border-top:1px solid rgba(255,255,255,.32);
	font-size:8px;
	font-weight:700;
	letter-spacing:1.2px;
	opacity:.8;
}

.ing_webdev_orbit_item{
	position:absolute;
	z-index:4;
	display:flex;
	align-items:center;
	gap:10px;
	padding:12px 16px 12px 12px;
	border:1px solid #e0e9f4;
	border-radius:15px;
	background:#fff;
	box-shadow:0 16px 35px rgba(18,58,110,.12);
}

.ing_webdev_orbit_item > span{
	display:flex;
	align-items:center;
	justify-content:center;
	width:40px;
	height:40px;
	padding:10px;
	border-radius:11px;
	color:var(--ing-primary);
	background:var(--ing-primary-light);
}

.ing_webdev_orbit_item strong{
	color:#30445d;
	font-size:13px;
	font-weight:800;
}

.ing_webdev_orbit_item01{
	top:48px;
	left:49px;
}

.ing_webdev_orbit_item02{
	top:70px;
	right:27px;
}

.ing_webdev_orbit_item03{
	right:30px;
	bottom:60px;
}

.ing_webdev_orbit_item04{
	left:34px;
	bottom:58px;
}


/* 장점 */
.ing_webdev_advantage{
	background:var(--ing-bg);
}

.ing_webdev_advantage_grid{
	display:grid;
	grid-template-columns:repeat(3,1fr);
	gap:22px;
}

.ing_webdev_advantage_card{
	position:relative;
	min-height:310px;
	padding:35px 32px;
	border:1px solid #e1e9f3;
	border-radius:18px;
	background:#fff;
	overflow:hidden;
	transition:
		transform .28s ease,
		border-color .28s ease,
		box-shadow .28s ease;
}

.ing_webdev_advantage_card:hover{
	transform:translateY(-9px);
	border-color:#bad4fb;
	box-shadow:0 22px 46px rgba(21,61,114,.1);
}

.ing_webdev_advantage_no{
	position:absolute;
	top:26px;
	right:29px;
	color:#dbe7f7;
	font-size:37px;
	font-weight:900;
	line-height:1;
}

.ing_webdev_advantage_icon{
	display:flex;
	align-items:center;
	justify-content:center;
	width:61px;
	height:61px;
	margin-bottom:27px;
	padding:16px;
	border-radius:17px;
	color:var(--ing-primary);
	background:var(--ing-primary-light);
	transition:
		color .25s ease,
		background .25s ease,
		transform .25s ease;
}

.ing_webdev_advantage_card:hover .ing_webdev_advantage_icon{
	color:#fff;
	background:var(--ing-primary);
	transform:rotate(-5deg) scale(1.06);
}

.ing_webdev_advantage_card h3{
	margin:0 0 14px;
	color:var(--ing-navy);
	font-size:22px;
	font-weight:800;
	letter-spacing:-.7px;
}

.ing_webdev_advantage_card p{
	margin:0;
	color:var(--ing-sub);
	font-size:15px;
	line-height:1.78;
	letter-spacing:-.3px;
	word-break:keep-all;
}


/* 신뢰성 */
.ing_webdev_reliability{
	background:#fff;
}

.ing_webdev_reliability_box{
	display:grid;
	grid-template-columns:minmax(0,.9fr) minmax(520px,1.1fr);
	align-items:center;
	gap:90px;
	padding:75px;
	border-radius:30px;
	background:linear-gradient(135deg,#071d3a 0%,#0c2a55 100%);
	box-shadow:0 30px 70px rgba(7,29,58,.18);
	overflow:hidden;
}

.ing_webdev_reliability_text h2{
	color:#fff;
	font-size:42px;
}

.ing_webdev_reliability_desc{
	margin:24px 0 0;
	color:rgba(255,255,255,.7);
	font-size:16px;
	line-height:1.85;
	letter-spacing:-.35px;
	word-break:keep-all;
}

.ing_webdev_reliability_list{
	display:grid;
	grid-template-columns:repeat(2,1fr);
	gap:12px;
	margin:31px 0 0;
	padding:0;
	list-style:none;
}

.ing_webdev_reliability_list li{
	display:flex;
	align-items:center;
	gap:10px;
	min-height:48px;
	padding:0 14px;
	border:1px solid rgba(255,255,255,.1);
	border-radius:10px;
	color:rgba(255,255,255,.84);
	font-size:13px;
	font-weight:600;
	background:rgba(255,255,255,.04);
}

.ing_webdev_reliability_list li span{
	display:flex;
	align-items:center;
	justify-content:center;
	width:25px;
	height:25px;
	border-radius:7px;
	color:#6db1ff;
	font-size:9px;
	font-weight:800;
	background:rgba(75,158,255,.14);
}

.ing_webdev_graph_card{
	padding:30px;
	border:1px solid rgba(255,255,255,.16);
	border-radius:21px;
	background:rgba(255,255,255,.97);
	box-shadow:0 22px 55px rgba(0,0,0,.25);
}

.ing_webdev_graph_header{
	display:flex;
	align-items:center;
	justify-content:space-between;
	padding-bottom:20px;
	border-bottom:1px solid #e8eef5;
}

.ing_webdev_graph_header small{
	display:block;
	margin-bottom:6px;
	color:var(--ing-primary);
	font-size:9px;
	font-weight:800;
	letter-spacing:1.3px;
}

.ing_webdev_graph_header strong{
	color:var(--ing-navy);
	font-size:18px;
	font-weight:800;
	letter-spacing:-.5px;
}

.ing_webdev_graph_header > span{
	padding:7px 10px;
	border-radius:20px;
	color:#168158;
	font-size:8px;
	font-weight:800;
	letter-spacing:.5px;
	background:#e2f8ee;
}

.ing_webdev_graph_body{
	display:flex;
	flex-direction:column;
	gap:21px;
	padding:27px 0 24px;
}

.ing_webdev_graph_label{
	display:flex;
	align-items:center;
	justify-content:space-between;
	margin-bottom:9px;
}

.ing_webdev_graph_label span{
	color:#53667e;
	font-size:13px;
	font-weight:700;
}

.ing_webdev_graph_label strong{
	color:var(--ing-primary);
	font-size:13px;
}

.ing_webdev_graph_bar{
	height:10px;
	border-radius:10px;
	background:#e9eff6;
	overflow:hidden;
}

.ing_webdev_graph_bar span{
	display:block;
	width:0;
	height:100%;
	border-radius:10px;
	background:linear-gradient(to right,#1265e8,#58aaff);
	box-shadow:0 3px 8px rgba(18,101,232,.2);
	transition:width 1.25s cubic-bezier(.2,.7,.25,1);
}

.ing_webdev_graph_notice{
	display:flex;
	align-items:flex-start;
	gap:10px;
	padding:13px;
	border-radius:10px;
	background:#f1f6fc;
}

.ing_webdev_graph_notice_icon{
	display:flex;
	flex-shrink:0;
	align-items:center;
	justify-content:center;
	width:19px;
	height:19px;
	border-radius:50%;
	color:#fff;
	font-size:11px;
	font-weight:800;
	background:#6e91bd;
}

.ing_webdev_graph_notice p{
	margin:0;
	color:#7a899c;
	font-size:11px;
	line-height:1.55;
}


/* 개발 분야 */
.ing_webdev_field{
	background:#f6f9fd;
}

.ing_webdev_field_grid{
	display:grid;
	grid-template-columns:repeat(4,1fr);
	border-top:1px solid #dce6f1;
	border-left:1px solid #dce6f1;
}

.ing_webdev_field_item{
	position:relative;
	min-height:260px;
	padding:34px 29px;
	border-right:1px solid #dce6f1;
	border-bottom:1px solid #dce6f1;
	background:#fff;
	transition:
		z-index .1s ease,
		transform .25s ease,
		box-shadow .25s ease;
}

.ing_webdev_field_item:hover{
	z-index:2;
	transform:translateY(-6px);
	box-shadow:0 20px 40px rgba(21,61,114,.1);
}

.ing_webdev_field_icon{
	display:flex;
	align-items:center;
	justify-content:center;
	width:51px;
	height:51px;
	margin-bottom:24px;
	padding:13px;
	border-radius:14px;
	color:var(--ing-primary);
	background:var(--ing-primary-light);
}

.ing_webdev_field_item h3{
	margin:0 0 12px;
	color:var(--ing-navy);
	font-size:19px;
	font-weight:800;
	letter-spacing:-.6px;
}

.ing_webdev_field_item p{
	margin:0;
	color:var(--ing-sub);
	font-size:14px;
	line-height:1.75;
	letter-spacing:-.3px;
	word-break:keep-all;
}


/* 개발 절차 */
.ing_webdev_process{
	background:#fff;
}

.ing_webdev_process_list{
	position:relative;
	display:flex;
	flex-direction:column;
	gap:18px;
	max-width:1080px;
	margin:0 auto;
}

.ing_webdev_process_list:before{
	content:"";
	position:absolute;
	top:60px;
	bottom:60px;
	left:79px;
	width:2px;
	background:linear-gradient(to bottom,#73b4ff,#cde2fb);
}

.ing_webdev_process_item{
	position:relative;
	z-index:1;
	display:grid;
	grid-template-columns:115px 92px minmax(0,1fr);
	align-items:center;
	gap:28px;
	min-height:194px;
	padding:31px 38px 31px 20px;
	border:1px solid #e0e9f3;
	border-radius:20px;
	background:#fff;
	box-shadow:0 10px 26px rgba(20,62,113,.055);
	transition:
		border-color .25s ease,
		transform .25s ease,
		box-shadow .25s ease;
}

.ing_webdev_process_item:hover{
	transform:translateX(8px);
	border-color:#b8d3f7;
	box-shadow:0 20px 40px rgba(20,62,113,.1);
}

.ing_webdev_process_number{
	display:flex;
	flex-direction:column;
	align-items:center;
	justify-content:center;
	width:115px;
	height:115px;
	border:11px solid #edf5ff;
	border-radius:50%;
	color:var(--ing-primary);
	background:#fff;
	box-shadow:0 10px 24px rgba(18,101,232,.09);
}

.ing_webdev_process_number span{
	font-size:9px;
	font-weight:800;
	letter-spacing:1.3px;
}

.ing_webdev_process_number strong{
	margin-top:3px;
	font-size:29px;
	font-weight:900;
	line-height:1;
}

.ing_webdev_process_icon{
	display:flex;
	align-items:center;
	justify-content:center;
	width:72px;
	height:72px;
	padding:19px;
	border-radius:20px;
	color:#fff;
	background:linear-gradient(145deg,#2f8dff,#0b56cb);
	box-shadow:0 13px 25px rgba(18,101,232,.23);
}

.ing_webdev_process_tag{
	display:inline-block;
	margin-bottom:8px;
	color:var(--ing-primary);
	font-size:10px;
	font-weight:900;
	letter-spacing:1.1px;
}

.ing_webdev_process_content h3{
	margin:0 0 10px;
	color:var(--ing-navy);
	font-size:22px;
	font-weight:800;
	letter-spacing:-.7px;
}

.ing_webdev_process_content > p{
	margin:0;
	color:var(--ing-sub);
	font-size:15px;
	line-height:1.72;
	letter-spacing:-.3px;
	word-break:keep-all;
}

.ing_webdev_process_content ul{
	display:flex;
	flex-wrap:wrap;
	gap:8px;
	margin:17px 0 0;
	padding:0;
	list-style:none;
}

.ing_webdev_process_content li{
	padding:7px 11px;
	border-radius:7px;
	color:#55708e;
	font-size:12px;
	font-weight:600;
	background:#f1f6fc;
}


/* 운영지원 */
.ing_webdev_support{
	padding-top:20px;
	background:#fff;
}

.ing_webdev_support_box{
	display:grid;
	grid-template-columns:minmax(0,1fr) minmax(520px,.9fr);
	align-items:center;
	gap:80px;
	padding:65px 70px;
	border:1px solid #dfe9f4;
	border-radius:25px;
	background:
		linear-gradient(135deg,#f6faff 0%,#edf5ff 100%);
}

.ing_webdev_support_text h2{
	font-size:38px;
}

.ing_webdev_support_text > p:last-child{
	margin:23px 0 0;
	color:var(--ing-sub);
	font-size:16px;
	line-height:1.82;
	letter-spacing:-.35px;
	word-break:keep-all;
}

.ing_webdev_support_grid{
	display:grid;
	grid-template-columns:repeat(2,1fr);
	gap:13px;
}

.ing_webdev_support_item{
	display:flex;
	align-items:center;
	gap:13px;
	min-height:77px;
	padding:15px 18px;
	border:1px solid #dce7f3;
	border-radius:13px;
	background:#fff;
	box-shadow:0 9px 22px rgba(24,66,117,.055);
}

.ing_webdev_support_item strong{
	display:flex;
	flex-shrink:0;
	align-items:center;
	justify-content:center;
	width:37px;
	height:37px;
	border-radius:10px;
	color:var(--ing-primary);
	font-size:11px;
	font-weight:900;
	background:var(--ing-primary-light);
}

.ing_webdev_support_item span{
	color:#3d536e;
	font-size:14px;
	font-weight:700;
	letter-spacing:-.3px;
}


/* 하단 상담 */
.ing_webdev_contact{
	position:relative;
	margin-top:130px;
	padding:115px 0;
	color:#fff;
	text-align:center;
	background:
		linear-gradient(125deg,#061a35 0%,#0b3570 56%,#0d55b9 100%);
	overflow:hidden;
}

.ing_webdev_contact_bg{
	position:absolute;
	inset:0;
	pointer-events:none;
}

.ing_webdev_contact_bg span{
	position:absolute;
	display:block;
	border:1px solid rgba(255,255,255,.1);
	border-radius:50%;
}

.ing_webdev_contact_bg span:first-child{
	top:-270px;
	left:-130px;
	width:550px;
	height:550px;
}

.ing_webdev_contact_bg span:nth-child(2){
	right:-170px;
	bottom:-330px;
	width:620px;
	height:620px;
	border-width:90px;
	border-color:rgba(255,255,255,.035);
}

.ing_webdev_contact_bg span:nth-child(3){
	top:50%;
	left:50%;
	width:920px;
	height:920px;
	border-color:rgba(255,255,255,.035);
	transform:translate(-50%,-50%);
}

.ing_webdev_contact_content{
	position:relative;
	z-index:2;
}

.ing_webdev_contact_eyebrow{
	margin:0 0 19px;
	color:#78b8ff;
	font-size:13px;
	font-weight:800;
	letter-spacing:2.5px;
}

.ing_webdev_contact h2{
	margin:0;
	color:#fff;
	font-size:47px;
	font-weight:800;
	line-height:1.35;
	letter-spacing:-2.2px;
	word-break:keep-all;
}

.ing_webdev_contact h2 span{
	color:#62b0ff;
}

.ing_webdev_contact_content > p:not(.ing_webdev_contact_eyebrow){
	margin:25px 0 0;
	color:rgba(255,255,255,.72);
	font-size:17px;
	line-height:1.85;
	letter-spacing:-.4px;
}

.ing_webdev_contact_btn{
	display:inline-flex;
	align-items:center;
	justify-content:center;
	gap:42px;
	min-width:250px;
	height:66px;
	margin-top:40px;
	padding:0 30px;
	border-radius:12px;
	color:var(--ing-navy) !important;
	font-size:17px;
	font-weight:800;
	background:#fff;
	box-shadow:0 18px 38px rgba(0,0,0,.21);
	transition:
		transform .25s ease,
		box-shadow .25s ease,
		color .25s ease;
}

.ing_webdev_contact_btn:hover{
	color:var(--ing-primary) !important;
	transform:translateY(-5px);
	box-shadow:0 24px 47px rgba(0,0,0,.27);
}

.ing_webdev_contact_btn strong{
	font-size:23px;
	font-weight:400;
}


/* 모바일 */
@media screen and (max-width:768px){

	.ing_webdev_inner{
		width:calc(100% - 32px);
	}

	.ing_webdev_section{
		padding:80px 0;
	}

	.ing_webdev_section_head{
		margin-bottom:40px;
	}

	.ing_webdev_section_eyebrow{
		margin-bottom:12px;
		font-size:11px;
		letter-spacing:1.8px;
	}

	.ing_webdev_section_head h2,
	.ing_webdev_reliability_text h2,
	.ing_webdev_support_text h2{
		font-size:30px;
		line-height:1.35;
		letter-spacing:-1.5px;
	}

	.ing_webdev_section_head > p:last-child{
		margin-top:18px;
		font-size:15px;
		line-height:1.75;
	}

	/* 메인 비주얼 */
	.ing_webdev_hero{
		min-height:auto;
		padding:69px 0 76px;
	}

	.ing_webdev_bg_grid{
		background-size:32px 32px;
		mask-image:none;
		-webkit-mask-image:none;
	}

	.ing_webdev_bg_circle01{
		top:-190px;
		right:-220px;
		width:450px;
		height:450px;
	}

	.ing_webdev_hero_layout{
		display:block;
	}

	.ing_webdev_hero_text{
		text-align:center;
	}

	.ing_webdev_eyebrow{
		justify-content:center;
		margin-bottom:18px;
		font-size:11px;
		letter-spacing:1.6px;
	}

	.ing_webdev_eyebrow_dot{
		width:8px;
		height:8px;
		box-shadow:0 0 0 5px rgba(18,101,232,.12);
	}

	.ing_webdev_hero_title{
		font-size:36px;
		line-height:1.32;
		letter-spacing:-2px;
	}

	.ing_webdev_hero_title span:after{
		height:8px;
	}

	.ing_webdev_hero_desc{
		margin-top:21px;
		font-size:15px;
		line-height:1.78;
	}

	.ing_webdev_hero_buttons{
		display:grid;
		grid-template-columns:1fr;
		gap:9px;
		margin-top:30px;
	}

	.ing_webdev_btn{
		width:100%;
		min-width:0;
		height:54px;
	}

	.ing_webdev_hero_checks{
		justify-content:center;
		gap:9px 15px;
		margin-top:24px;
	}

	.ing_webdev_hero_checks li{
		font-size:12px;
	}

	.ing_webdev_hero_visual{
		min-height:370px;
		margin-top:39px;
	}

	.ing_webdev_system_window{
		width:100%;
		max-width:450px;
		border-radius:17px;
		transform:translate(-50%,-50%);
	}

	.ing_webdev_window_top{
		height:38px;
		padding:0 13px;
	}

	.ing_webdev_window_top p{
		padding-right:31px;
		font-size:7px;
	}

	.ing_webdev_window_body{
		min-height:284px;
	}

	.ing_webdev_window_sidebar{
		width:45px;
		gap:15px;
		padding-top:16px;
	}

	.ing_webdev_sidebar_logo{
		width:27px;
		height:27px;
		margin-bottom:6px;
		border-radius:8px;
		font-size:8px;
	}

	.ing_webdev_window_sidebar > span{
		width:14px;
		height:4px;
	}

	.ing_webdev_window_sidebar > span.active{
		width:20px;
	}

	.ing_webdev_dashboard{
		padding:15px;
	}

	.ing_webdev_skeleton_title{
		width:91px;
		height:8px;
	}

	.ing_webdev_skeleton_text{
		width:58px;
		height:5px;
	}

	.ing_webdev_dashboard_status{
		height:20px;
		padding:0 7px;
		font-size:6px;
	}

	.ing_webdev_dashboard_cards{
		gap:8px;
		margin-top:15px;
	}

	.ing_webdev_dashboard_card{
		min-height:75px;
		padding:10px;
		border-radius:10px;
	}

	.ing_webdev_card_icon{
		width:22px;
		height:22px;
		margin-bottom:7px;
		padding:5px;
		border-radius:6px;
	}

	.ing_webdev_dashboard_card strong{
		font-size:7px;
	}

	.ing_webdev_dashboard_card small{
		font-size:6px;
	}

	.ing_webdev_dashboard_chart{
		margin-top:8px;
		padding:10px 11px 8px;
		border-radius:10px;
	}

	.ing_webdev_chart_title span{
		font-size:7px;
	}

	.ing_webdev_chart-title strong{
		font-size:6px;
	}

	.ing_webdev_chart_area{
		gap:6px;
		height:60px;
		margin-top:8px;
	}

	.ing_webdev_dashboard_bottom{
		gap:6px;
		margin-top:8px;
	}

	.ing_webdev_dashboard_bottom span{
		height:21px;
		border-radius:6px;
	}

	.ing_webdev_float_badge{
		gap:8px;
		padding:9px 11px;
		border-radius:11px;
	}

	.ing_webdev_float_badge01{
		top:24px;
		left:-7px;
	}

	.ing_webdev_float_badge02{
		right:-6px;
		bottom:18px;
	}

	.ing_webdev_float_icon{
		width:29px;
		height:29px;
		padding:7px;
		border-radius:8px;
	}

	.ing_webdev_float_badge strong{
		font-size:9px;
	}

	.ing_webdev_float_badge small{
		font-size:8px;
	}

	/* 요약 */
	.ing_webdev_summary{
		margin-top:-23px;
	}

	.ing_webdev_summary_grid{
		grid-template-columns:repeat(2,1fr);
		border-radius:15px;
	}

	.ing_webdev_summary_item{
		padding:23px 10px;
	}

	.ing_webdev_summary_item:not(:last-child):after{
		display:none;
	}

	.ing_webdev_summary_item:nth-child(odd){
		border-right:1px solid #e6edf5;
	}

	.ing_webdev_summary_item:nth-child(-n+2){
		border-bottom:1px solid #e6edf5;
	}

	.ing_webdev_summary_item strong{
		font-size:27px;
	}

	.ing_webdev_summary_item em{
		font-size:12px;
	}

	.ing_webdev_summary_item p{
		margin-top:8px;
		font-size:11px;
		line-height:1.5;
	}

	/* 기술 */
	.ing_webdev_technology{
		padding-top:95px;
	}

	.ing_webdev_technology_layout{
		display:flex;
		flex-direction:column;
		gap:52px;
	}

	.ing_webdev_tech_point{
		grid-template-columns:47px minmax(0,1fr);
		gap:15px;
		padding:21px 18px;
		border-radius:14px;
	}

	.ing_webdev_tech_point:hover{
		transform:none;
	}

	.ing_webdev_tech_number{
		width:47px;
		height:47px;
		border-radius:13px;
		font-size:13px;
	}

	.ing_webdev_tech_point h3{
		margin-bottom:7px;
		font-size:17px;
	}

	.ing_webdev_tech_point p{
		font-size:13px;
		line-height:1.7;
	}

	.ing_webdev_orbit{
		width:340px;
		height:340px;
		max-width:100%;
	}

	.ing_webdev_orbit:before{
		inset:39px;
	}

	.ing_webdev_orbit:after{
		inset:84px;
	}

	.ing_webdev_orbit_line{
		width:240px;
	}

	.ing_webdev_orbit_center{
		width:118px;
		height:118px;
		border-width:8px;
	}

	.ing_webdev_orbit_center strong{
		font-size:25px;
	}

	.ing_webdev_orbit_center span{
		font-size:8px;
	}

	.ing_webdev_orbit_center small{
		margin-top:8px;
		padding-top:7px;
		font-size:5px;
	}

	.ing_webdev_orbit_item{
		gap:6px;
		padding:7px 9px 7px 7px;
		border-radius:10px;
	}

	.ing_webdev_orbit_item > span{
		width:28px;
		height:28px;
		padding:7px;
		border-radius:8px;
	}

	.ing_webdev_orbit_item strong{
		font-size:8px;
	}

	.ing_webdev_orbit_item01{
		top:28px;
		left:14px;
	}

	.ing_webdev_orbit_item02{
		top:40px;
		right:3px;
	}

	.ing_webdev_orbit_item03{
		right:6px;
		bottom:35px;
	}

	.ing_webdev_orbit_item04{
		left:5px;
		bottom:34px;
	}

	/* 장점 */
	.ing_webdev_advantage_grid{
		grid-template-columns:1fr;
		gap:13px;
	}

	.ing_webdev_advantage_card{
		min-height:0;
		padding:27px 24px;
		border-radius:15px;
	}

	.ing_webdev_advantage_card:hover{
		transform:none;
	}

	.ing_webdev_advantage_no{
		top:23px;
		right:23px;
		font-size:31px;
	}

	.ing_webdev_advantage_icon{
		width:51px;
		height:51px;
		margin-bottom:20px;
		padding:14px;
		border-radius:14px;
	}

	.ing_webdev_advantage_card h3{
		margin-bottom:10px;
		font-size:19px;
	}

	.ing_webdev_advantage_card p{
		font-size:14px;
		line-height:1.72;
	}

	/* 신뢰성 */
	.ing_webdev_reliability_box{
		display:block;
		padding:42px 20px;
		border-radius:20px;
	}

	.ing_webdev_reliability_text{
		text-align:center;
	}

	.ing_webdev_reliability_desc{
		margin-top:19px;
		font-size:14px;
		line-height:1.75;
	}

	.ing_webdev_reliability_list{
		grid-template-columns:1fr;
		gap:8px;
		margin-top:25px;
		text-align:left;
	}

	.ing_webdev_reliability_list li{
		min-height:45px;
	}

	.ing_webdev_reliability_chart{
		margin-top:35px;
	}

	.ing_webdev_graph_card{
		padding:21px 17px;
		border-radius:16px;
		text-align:left;
	}

	.ing_webdev_graph_header strong{
		font-size:15px;
	}

	.ing_webdev_graph-header > span{
		font-size:6px;
	}

	.ing_webdev_graph-body{
		gap:18px;
		padding:23px 0 20px;
	}

	/* 분야 */
	.ing_webdev_field_grid{
		grid-template-columns:repeat(2,1fr);
	}

	.ing_webdev_field_item{
		min-height:230px;
		padding:24px 19px;
	}

	.ing_webdev_field_icon{
		width:45px;
		height:45px;
		margin-bottom:19px;
		padding:12px;
	}

	.ing_webdev_field_item h3{
		font-size:16px;
	}

	.ing_webdev_field_item p{
		font-size:12px;
		line-height:1.65;
	}

	/* 절차 */
	.ing_webdev_process_list{
		gap:13px;
	}

	.ing_webdev_process_list:before{
		display:none;
	}

	.ing_webdev_process_item{
		display:grid;
		grid-template-columns:68px minmax(0,1fr);
		gap:15px;
		min-height:0;
		padding:22px 18px;
		border-radius:16px;
	}

	.ing_webdev_process_item:hover{
		transform:none;
	}

	.ing_webdev_process_number{
		grid-row:1;
		width:68px;
		height:68px;
		border-width:7px;
	}

	.ing_webdev_process_number span{
		font-size:7px;
	}

	.ing_webdev_process_number strong{
		font-size:21px;
	}

	.ing_webdev_process_icon{
		display:none;
	}

	.ing_webdev_process_content{
		grid-column:2;
	}

	.ing_webdev_process_tag{
		margin-bottom:5px;
		font-size:8px;
	}

	.ing_webdev_process_content h3{
		margin-bottom:8px;
		font-size:17px;
	}

	.ing_webdev_process_content > p{
		font-size:13px;
		line-height:1.67;
	}

	.ing_webdev_process_content ul{
		grid-column:1 / -1;
		gap:6px;
		margin-top:13px;
	}

	.ing_webdev_process_content li{
		padding:6px 8px;
		font-size:10px;
	}

	/* 운영 지원 */
	.ing_webdev_support{
		padding-top:0;
	}

	.ing_webdev_support_box{
		display:block;
		padding:38px 20px;
		border-radius:19px;
		text-align:center;
	}

	.ing_webdev_support_text > p:last-child{
		margin-top:18px;
		font-size:14px;
		line-height:1.75;
	}

	.ing_webdev_support_grid{
		grid-template-columns:1fr;
		gap:8px;
		margin-top:29px;
		text-align:left;
	}

	.ing_webdev_support_item{
		min-height:63px;
		padding:11px 14px;
	}

	.ing_webdev_support_item strong{
		width:34px;
		height:34px;
	}

	.ing_webdev_support_item span{
		font-size:13px;
	}

	/* 하단 상담 */
	.ing_webdev_contact{
		margin-top:80px;
		padding:80px 0;
	}

	.ing_webdev_contact_eyebrow{
		margin-bottom:14px;
		font-size:10px;
		letter-spacing:1.8px;
	}

	.ing_webdev_contact h2{
		font-size:31px;
		line-height:1.4;
		letter-spacing:-1.6px;
	}

	.ing_webdev_contact_content > p:not(.ing_webdev_contact_eyebrow){
		margin-top:20px;
		font-size:14px;
		line-height:1.75;
	}

	.ing_webdev_contact_content > p br{
		display:none;
	}

	.ing_webdev_contact_btn{
		width:100%;
		min-width:0;
		height:59px;
		margin-top:31px;
		font-size:15px;
	}

}


/* 움직임 감소 설정 */
@media (prefers-reduced-motion:reduce){

	.ing_webdev_reveal{
		opacity:1;
		transform:none;
		transition:none;
	}

	.ing_webdev_float_badge,
	.ing_webdev_chart_area span,
	.ing_webdev_orbit:before{
		animation:none;
	}

}