@charset "utf-8";

/* animation */
/* word */
.wordAni{opacity:0;}
.wordAni.active{opacity:1;}
.wordAni > span{display:inline-block;}
.wordAni .word{display:inline-block;}
/* motion rail */
[data-motion-rail]{position:absolute; left:0px; top:0px; text-transform:uppercase; font-size:200px; letter-spacing:2px; white-space:nowrap;}
[data-motion-rail] .eocjs-newsticker-container{position:relative; width:100%; padding-top:30%;}
[data-motion-rail].eocjs-newsticker .eocjs-newsticker-one,
[data-motion-rail].eocjs-newsticker .eocjs-newsticker-two{position:absolute; left:0; top:0; white-space:nowrap;}
/* hide show */
.ani_hide{overflow:hidden; opacity:0; transform:translateY(-20px); transition:opacity 0.8s ease-in-out 0s, transform 0.8s ease-in-out 0s;}
.ani_hide.motion_in{opacity:1; transform:translateY(0px);}
/* box show */
.ani_box{position:relative;}
.ani_box:before,
.ani_box:after{content:''; display:block; position:absolute; top:0px; z-index:3; width:50.5%; height:100%; background:#fff; transform:scaleX(1); transition:transform 0.7s ease-in-out 0s;}
.ani_box .obj_blank:before,
.ani_box .obj_blank:after{content:''; display:block; position:absolute; top:0px; z-index:2; width:50%; height:100%; background:#0083c3; transform:scaleX(1); transition:transform 0.6s ease-in-out 0s;}
.ani_box:before{left:-1px; transform-origin:0 0;}
.ani_box .obj_blank:before{left:0px; transform-origin:0 0;}
.ani_box:after{right:-1px; transform-origin:100% 0;}
.ani_box .obj_blank:after{right:0px; transform-origin:100% 0;}
.ani_box.motion_in:before,
.ani_box.motion_in:after{transform:scaleX(0);}
.ani_box.motion_in .obj_blank:before,
.ani_box.motion_in .obj_blank:after{transform:scaleX(0); transition-delay:0.15s;}

@keyframes path01{
	0%{stroke-dashoffset:1500;}
	100%{stroke-dashoffset:0;}
}


/**
 * #main-visual-section
**/
#main-visual-section{width:100%;height:938px;min-height:938px;overflow:hidden;position:relative;background-size:cover;}
.area_visual{position:relative;width:100%;height: 100% !important;}
.area_visual .swiper,
.area_visual .swiper .box{height:100%;}
.area_visual .swiper .box{overflow:hidden; position:relative;}
.area_visual [data-visual="text"]{display:flex;flex-flow:column nowrap;justify-content:center;align-items:flex-start;position:absolute;top:0;left:50%;z-index:60;width:calc(100% - 80px);max-width:1200px;height:100%;margin-left:0;transform:translateX(-50%);padding-top:70px;color:#fff;}


.area_visual [data-visual="text"] > .vlogo_img {opacity:0; display: inline-block; margin: 0 auto; text-align: center;}
.area_visual [data-visual="text"] > .vlogo_img img {width:100%;max-width:484px;}
.area_visual [data-visual="img"]{display:block; height:100%;}
.area_visual [data-visual="img"] i{display:block;height:100%;background-repeat:no-repeat;background-position:center center;background-size:cover;transform:scale(1.06);transition:transform 1.5s ease-out;}
.area_visual .swiper-slide-active [data-visual="img"] i{transform:scale(1);}


.area_visual .area_arrow {width: 150px !important;text-align: center;display: inline-block;position:absolute;left: 50%;margin-left: -75px;bottom: 50px;z-index:2;color: #fff;}
.swiper-pagination-bullet {width:10px !important;height: 6px !important;background-color:#ffffff !important;margin:0 3px;opacity: 0.5 !important;border-radius: 0;}
.swiper-pagination-bullet-active {width: 60px !important;opacity: 1 !important;background-color:#ffffff !important;}
.swiper-button-next, .swiper-button-prev {position:absolute;display:grid;width:70px;height: 70px;background-color : rgba(0,0,0,0.5);border-radius:50%;justify-content: center;align-items: center;}
.swiper-button-next:after, .swiper-button-prev:after {font-size: 1.6em; color:#fff;}
.swiper-button-next {right: 50%;margin-right: -700px;}
.swiper-button-prev {left: 50%;margin-left: -700px;}

@media screen and (max-width:1410px){
	.area_visual .mmark {left:10px;margin-left:inherit;}
	.area_visual .mmark img {width:300px;}
}
@media screen and (max-width:1200px){
	#main-visual-section{min-height:680px;}
	.area_visual .mmark{margin-top:90px;}
	.area_visual .mmark img{width:270px;}
	.area_visual [data-visual="text"]{
		width:calc(100% - 60px);
		max-width:none;
		top:0;
		left:50%;
		margin:0;
		height:100%;
		padding:80px 0 0;
		background:none;
		transform:translateX(-50%);
		text-align:left;
	}
	
	
	.area_visual [data-visual="text"] > .vlogo_img img{width:90%;}
}
@media screen and (max-width:980px){
	.area_visual .mmark img {width:250px;}
	.area_visual .area_arrow {width:140px;bottom: 30px;left: 50%;margin-left:-70px;}
	.area_visual .swiper_page {font-size:16px;}
	.area_visual [data-visual="text"] > .vlogo_img img {width:75%;}
}
@media screen and (max-width:768px){
	.area_visual .mmark img {width:220px;}
	
	
	.area_visual [data-visual="text"] > .vlogo_img img {width:60%;}
}
@media screen and (max-width:550px){
	.area_visual [data-visual="text"] {width: 300px;padding: 1em 10px;}
}
@media screen and (max-width:460px){
	.area_visual .mmark img {width:200px;}
	
	
	.area_visual [data-visual="text"] > .vlogo_img img {width:45%;}
}

/* =========================================================
   메인 비주얼 화면 맞춤 및 반응형 글자 크기 최종 보정
   ========================================================= */
@media screen and (max-width:1024px){
	#main-visual-section{
		height:100svh;
		min-height:640px;
	}
	.area_visual [data-visual="text"]{
		width:calc(100% - 48px);
		padding-top:70px;
	}
	
	
}

@media screen and (max-width:768px){
	#main-visual-section{
		height:100svh;
		min-height:620px;
	}
	.area_visual [data-visual="text"]{
		width:calc(100% - 36px);
		padding-top:62px;
		justify-content:center;
	}
	
	
	.area_visual .area_arrow{
		bottom:24px;
	}
}

@media screen and (max-width:550px){
	#main-visual-section{
		height:100svh;
		min-height:580px;
	}
	.area_visual [data-visual="text"]{
		display:flex;
		width:calc(100% - 28px);
		height:100%;
		top:0;
		left:50%;
		margin:0;
		padding:56px 0 30px;
		background:none;
		transform:translateX(-50%);
		text-align:left;
	}
	
	
	.area_visual [data-visual="text"] > p br{
		display:none;
	}
}

@media screen and (max-width:380px){
	#main-visual-section{min-height:540px;}
	
	
}


/* =========================================================
   메인 비주얼 최종 높이: PC 938px
   ========================================================= */
@media screen and (min-width:1025px){
	#main-visual-section{
		height:938px !important;
		min-height:938px !important;
		max-height:938px !important;
	}
	.area_visual,
	.area_visual .swiper,
	.area_visual .swiper .box,
	.area_visual [data-visual="img"],
	.area_visual [data-visual="img"] i{
		height:100% !important;
	}
}


/* =========================================================
   메인 비주얼 텍스트
   vbanner.10.skin.php의 3개 독립 클래스와 연동
   ========================================================= */
.area_visual [data-visual="text"] .visual-line{
	display:block;
	width:100%;
	margin:0;
	padding:0;
	color:#fff;
	text-align:left;
	text-shadow:0 2px 14px rgba(0,0,0,.38);
}

.area_visual [data-visual="text"] .visual-line-01{
	margin-bottom:12px;
	font-size:20px;
	font-weight:400;
	line-height:1.55;
	letter-spacing:-.02em;
}

.area_visual [data-visual="text"] .visual-line-02{
	max-width:1150px;
	margin-bottom:20px;
	font-size:60px;
	font-weight:700;
	line-height:1.18;
	letter-spacing:-.04em;
}

.area_visual [data-visual="text"] .visual-line-03{
	font-size:20px;
	font-weight:400;
	line-height:1.6;
	letter-spacing:-.02em;
}

.area_visual [data-visual="text"] .visual-line .wordAni{
	display:inline-block;
}

/* 태블릿 */
@media screen and (max-width:1024px){
	.area_visual [data-visual="text"] .visual-line-01,
	.area_visual [data-visual="text"] .visual-line-03{
		font-size:18px;
	}

	.area_visual [data-visual="text"] .visual-line-02{
		font-size:48px;
	}
}

/* 모바일 */
@media screen and (max-width:768px){
	.area_visual [data-visual="text"] .visual-line-01,
	.area_visual [data-visual="text"] .visual-line-03{
		font-size:16px;
	}

	.area_visual [data-visual="text"] .visual-line-01{
		margin-bottom:9px;
	}

	.area_visual [data-visual="text"] .visual-line-02{
		margin-bottom:15px;
		font-size:38px;
		line-height:1.2;
	}
}

@media screen and (max-width:480px){
	.area_visual [data-visual="text"] .visual-line-01,
	.area_visual [data-visual="text"] .visual-line-03{
		font-size:15px;
	}

	.area_visual [data-visual="text"] .visual-line-02{
		font-size:31px;
	}
}


/* =========================================================
   메인 사업분야
   메인 비주얼 바로 아래 배치
   ========================================================= */
.main-business-section{
	position:relative;
	width:100%;
	min-height:780px;
	overflow:hidden;
	background:
		linear-gradient(90deg, rgba(1,7,23,.96) 0%, rgba(1,7,23,.86) 34%, rgba(1,7,23,.42) 100%),
		url("../img/main/business_bg.jpg") center center / cover no-repeat;
}

.main-business-inner{
	display:grid;
	grid-template-columns:minmax(300px,400px) minmax(0,1fr);
	align-items:center;
	gap:72px;
	width:100%;
	max-width:1360px;
	min-height:780px;
	margin:0 auto;
	padding:90px 40px;
	position:relative;
	z-index:1;
}

.main-business-copy{
	color:#fff;
}

.main-business-kicker{
	margin:0 0 12px;
	font-size:18px;
	font-weight:700;
	line-height:1.2;
	color:#ea5413;
}

.main-business-title{
	margin:0 0 24px;
	font-size:56px;
	font-weight:800;
	line-height:1.1;
	letter-spacing:-.05em;
	color:#fff;
}

.main-business-desc{
	margin:0;
	font-size:20px;
	font-weight:500;
	line-height:1.7;
	letter-spacing:-.035em;
	color:rgba(255,255,255,.94);
}

.main-business-list{
	display:grid;
	grid-template-columns:repeat(2,minmax(0,1fr));
	gap:32px;
}

.main-business-card{
	display:block;
	position:relative;
	height:440px;
	overflow:hidden;
	border-radius:22px;
	background:#071120;
	box-shadow:0 22px 50px rgba(0,0,0,.26);
}

.main-business-img,
.main-business-img img{
	display:block;
	width:100%;
	height:100%;
}

.main-business-img img{
	object-fit:cover;
	transition:transform .65s ease;
}

.main-business-dim{
	position:absolute;
	inset:0;
	background:linear-gradient(180deg,rgba(0,0,0,.03) 30%,rgba(0,0,0,.82) 100%);
	transition:background .3s ease;
}

.main-business-card-txt{
	position:absolute;
	left:0;
	right:0;
	bottom:0;
	padding:36px 40px;
	color:#fff;
}

.main-business-card-txt strong{
	display:block;
	font-size:28px;
	font-weight:700;
	line-height:1.3;
	letter-spacing:-.04em;
	color:#fff;
}

.main-business-card-txt em{
	display:block;
	max-height:0;
	margin-top:0;
	overflow:hidden;
	font-size:13px;
	font-weight:600;
	font-style:normal;
	letter-spacing:.08em;
	color:#fff;
	opacity:0;
	transform:translateY(10px);
	transition:max-height .3s ease,margin .3s ease,opacity .3s ease,transform .3s ease;
}

.main-business-card:hover .main-business-img img,
.main-business-card:focus .main-business-img img{
	transform:scale(1.07);
}

.main-business-card:hover .main-business-dim,
.main-business-card:focus .main-business-dim{
	background:linear-gradient(180deg,rgba(0,0,0,.12) 20%,rgba(0,0,0,.9) 100%);
}

.main-business-card:hover .main-business-card-txt em,
.main-business-card:focus .main-business-card-txt em{
	max-height:30px;
	margin-top:12px;
	opacity:1;
	transform:translateY(0);
}

@media screen and (max-width:1200px){
	.main-business-inner{
		grid-template-columns:300px minmax(0,1fr);
		gap:46px;
		padding-left:30px;
		padding-right:30px;
	}

	.main-business-title{
		font-size:48px;
	}

	.main-business-desc{
		font-size:18px;
	}

	.main-business-card{
		height:390px;
	}
}

@media screen and (max-width:980px){
	.main-business-section,
	.main-business-inner{
		min-height:auto;
	}

	.main-business-inner{
		grid-template-columns:1fr;
		gap:42px;
		padding-top:80px;
		padding-bottom:80px;
	}

	.main-business-copy{
		text-align:center;
	}

	.main-business-title{
		font-size:42px;
	}

	.main-business-desc br{
		display:none;
	}

	.main-business-list{
		width:100%;
		max-width:820px;
		margin:0 auto;
	}

	.main-business-card{
		height:360px;
	}
}

@media screen and (max-width:700px){
	.main-business-inner{
		padding:64px 20px;
	}

	.main-business-kicker{
		font-size:16px;
	}

	.main-business-title{
		margin-bottom:18px;
		font-size:34px;
	}

	.main-business-desc{
		font-size:16px;
		line-height:1.65;
	}

	.main-business-list{
		grid-template-columns:1fr;
		gap:20px;
		max-width:520px;
	}

	.main-business-card{
		height:330px;
		border-radius:16px;
	}

	.main-business-card-txt{
		padding:28px 26px;
	}

	.main-business-card-txt strong{
		font-size:23px;
	}
}

@media screen and (max-width:420px){
	.main-business-inner{
		padding-left:15px;
		padding-right:15px;
	}

	.main-business-title{
		font-size:30px;
	}

	.main-business-card{
		height:290px;
	}

	.main-business-card-txt strong{
		font-size:21px;
	}
}


/* =========================================================
   사업분야 좌측 텍스트 스크롤 애니메이션
   ========================================================= */
.business-motion .main-business-kicker,
.business-motion .main-business-title,
.business-motion .main-business-desc{
	opacity:0;
	transform:translateY(32px);
	will-change:opacity,transform;
	transition:
		opacity .75s cubic-bezier(.22,.61,.36,1),
		transform .75s cubic-bezier(.22,.61,.36,1);
}

.business-motion .main-business-title{
	transform:translateY(42px);
}

.business-motion .main-business-desc{
	transform:translateY(48px);
}

.business-motion.is-active .main-business-kicker,
.business-motion.is-active .main-business-title,
.business-motion.is-active .main-business-desc{
	opacity:1;
	transform:translateY(0);
}

.business-motion.is-active .main-business-kicker{
	transition-delay:.05s;
}

.business-motion.is-active .main-business-title{
	transition-delay:.18s;
}

.business-motion.is-active .main-business-desc{
	transition-delay:.34s;
}

/* 접근성: 모션 최소화 설정 사용자는 즉시 표시 */
@media (prefers-reduced-motion:reduce){
	.business-motion .main-business-kicker,
	.business-motion .main-business-title,
	.business-motion .main-business-desc{
		opacity:1;
		transform:none;
		transition:none;
	}
}


/* =========================================================
   메인 네트워크 사업영역
   ========================================================= */
.main-network-section{
	position:relative;
	width:100%;
	min-height:720px;
	overflow:hidden;
	background:#0ba7df;
}

.main-network-bg{
	position:absolute;
	inset:0;
	background:
		linear-gradient(180deg,rgba(9,166,220,.96) 0%,rgba(9,166,220,.96) 58%,rgba(255,255,255,1) 58%,rgba(255,255,255,1) 100%);
}

.main-network-inner{
	position:relative;
	z-index:1;
	display:grid;
	grid-template-columns:240px minmax(0,1fr);
	align-items:start;
	gap:76px;
	width:100%;
	max-width:1320px;
	margin:0 auto;
	padding:145px 40px 110px;
}

.main-network-head{
	padding-top:45px;
	color:#fff;
}

.main-network-kicker{
	margin:0 0 12px;
	font-size:18px;
	font-weight:700;
	line-height:1.2;
	color:#fff;
}

.main-network-title{
	margin:0;
	font-size:56px;
	font-weight:800;
	line-height:1.1;
	letter-spacing:-.05em;
	color:#fff;
}

.main-network-cards{
	display:grid;
	grid-template-columns:repeat(3,minmax(0,1fr));
	gap:36px;
}

.main-network-card{
	display:block;
	overflow:hidden;
	border-radius:20px;
	background:#fff;
	box-shadow:0 15px 28px rgba(0,0,0,.22);
	transform:translateY(0);
	transition:transform .35s ease,box-shadow .35s ease;
}

.main-network-thumb{
	height:250px;
	overflow:hidden;
	background:#0a1522;
}

.main-network-thumb img{
	display:block;
	width:100%;
	height:100%;
	object-fit:cover;
	transition:transform .6s ease;
}

.main-network-body{
	min-height:150px;
	padding:24px 24px 26px;
	background:#fff;
}

.main-network-body h3{
	margin:0 0 10px;
	font-size:25px;
	font-weight:700;
	line-height:1.25;
	letter-spacing:-.04em;
	color:#111;
}

.main-network-body p{
	margin:0;
	font-size:15px;
	font-weight:400;
	line-height:1.65;
	letter-spacing:-.025em;
	color:#666;
}

.main-network-card:hover,
.main-network-card:focus{
	transform:translateY(-10px);
	box-shadow:0 24px 38px rgba(0,0,0,.28);
}

.main-network-card:hover .main-network-thumb img,
.main-network-card:focus .main-network-thumb img{
	transform:scale(1.06);
}

/* 좌측 제목 모션 */
.network-motion .main-network-kicker,
.network-motion .main-network-title{
	opacity:0;
	transform:translateY(34px);
	transition:opacity .75s cubic-bezier(.22,.61,.36,1),transform .75s cubic-bezier(.22,.61,.36,1);
}

.network-motion .main-network-title{
	transform:translateY(44px);
}

.network-motion.is-active .main-network-kicker,
.network-motion.is-active .main-network-title{
	opacity:1;
	transform:translateY(0);
}

.network-motion.is-active .main-network-kicker{
	transition-delay:.05s;
}

.network-motion.is-active .main-network-title{
	transition-delay:.18s;
}

@media screen and (max-width:1200px){
	.main-network-inner{
		grid-template-columns:200px minmax(0,1fr);
		gap:46px;
		padding-left:30px;
		padding-right:30px;
	}

	.main-network-title{
		font-size:48px;
	}

	.main-network-cards{
		gap:24px;
	}

	.main-network-thumb{
		height:220px;
	}

	.main-network-body h3{
		font-size:22px;
	}
}

@media screen and (max-width:980px){
	.main-network-section{
		min-height:auto;
	}

	.main-network-bg{
		background:
			linear-gradient(180deg,#0ba7df 0%,#0ba7df 42%,#fff 42%,#fff 100%);
	}

	.main-network-inner{
		grid-template-columns:1fr;
		gap:45px;
		padding-top:90px;
		padding-bottom:90px;
	}

	.main-network-head{
		padding-top:0;
		text-align:center;
	}

	.main-network-title{
		font-size:42px;
	}

	.main-network-cards{
		grid-template-columns:repeat(2,minmax(0,1fr));
	}

	.main-network-card:last-child{
		grid-column:1 / -1;
		max-width:calc(50% - 12px);
		width:100%;
		margin:0 auto;
	}
}

@media screen and (max-width:700px){
	.main-network-bg{
		background:
			linear-gradient(180deg,#0ba7df 0%,#0ba7df 28%,#fff 28%,#fff 100%);
	}

	.main-network-inner{
		padding:70px 20px;
	}

	.main-network-kicker{
		font-size:16px;
	}

	.main-network-title{
		font-size:34px;
	}

	.main-network-cards{
		grid-template-columns:1fr;
		gap:22px;
		max-width:520px;
		width:100%;
		margin:0 auto;
	}

	.main-network-card:last-child{
		grid-column:auto;
		max-width:none;
	}

	.main-network-thumb{
		height:230px;
	}

	.main-network-body{
		min-height:auto;
	}

	.main-network-body h3{
		font-size:22px;
	}
}

@media screen and (max-width:420px){
	.main-network-inner{
		padding-left:15px;
		padding-right:15px;
	}

	.main-network-title{
		font-size:30px;
	}

	.main-network-thumb{
		height:205px;
	}

	.main-network-body{
		padding:21px 20px 23px;
	}

	.main-network-body h3{
		font-size:20px;
	}

	.main-network-body p{
		font-size:14px;
	}
}

@media (prefers-reduced-motion:reduce){
	.network-motion .main-network-kicker,
	.network-motion .main-network-title{
		opacity:1;
		transform:none;
		transition:none;
	}
}


/* =========================================================
   메인 정보통신설비 유지보수 섹션
   ========================================================= */
.main-maintenance-section{
	position:relative;
	width:100%;
	min-height:840px;
	overflow:hidden;
	background:
		url("../img/main/maintenance_bg.jpg") center center / cover no-repeat;
}

.main-maintenance-overlay{
	position:absolute;
	inset:0;
	background:linear-gradient(180deg,rgba(3,16,34,.34),rgba(3,16,34,.52));
}

.main-maintenance-inner{
	position:relative;
	z-index:1;
	width:100%;
	max-width:1320px;
	margin:0 auto;
	padding:90px 40px 100px;
}

.main-maintenance-head{
	text-align:center;
	color:#fff;
}

.main-maintenance-title{
	margin:0 0 16px;
	font-size:58px;
	font-weight:800;
	line-height:1.15;
	letter-spacing:-.05em;
	color:#fff;
}

.main-maintenance-subtitle{
	margin:0;
	font-size:21px;
	font-weight:500;
	line-height:1.5;
	letter-spacing:-.03em;
	color:rgba(255,255,255,.94);
}

.main-maintenance-cards{
	display:grid;
	grid-template-columns:repeat(4,minmax(0,1fr));
	gap:28px;
	margin-top:68px;
}

.main-maintenance-card{
	display:flex;
	flex-direction:column;
	align-items:center;
	min-height:480px;
	padding:38px 24px 32px;
	border-radius:18px;
	background:#fff;
	box-shadow:0 18px 34px rgba(0,0,0,.22);
	text-align:center;
	transform:translateY(0);
	transition:transform .35s ease,box-shadow .35s ease;
}

.main-maintenance-icon{
	display:flex;
	align-items:center;
	justify-content:center;
	width:210px;
	height:210px;
	margin-bottom:24px;
	border-radius:50%;
	background:#f3f7fb;
	overflow:hidden;
}

.main-maintenance-icon img{
	display:block;
	width:78%;
	height:78%;
	object-fit:contain;
	transition:transform .45s ease;
}

.main-maintenance-card h3{
	margin:0;
	font-size:27px;
	font-weight:700;
	line-height:1.3;
	letter-spacing:-.04em;
	color:#3e3e3e;
}

.main-maintenance-line{
	display:block;
	width:48px;
	height:2px;
	margin:22px auto 24px;
	background:#17a6c9;
}

.main-maintenance-card p{
	margin:0;
	font-size:16px;
	font-weight:400;
	line-height:1.75;
	letter-spacing:-.025em;
	color:#666;
}

.main-maintenance-card:hover,
.main-maintenance-card:focus{
	transform:translateY(-10px);
	box-shadow:0 26px 44px rgba(0,0,0,.28);
}

.main-maintenance-card:hover .main-maintenance-icon img,
.main-maintenance-card:focus .main-maintenance-icon img{
	transform:scale(1.07);
}

/* 제목 모션 */
.maintenance-motion .main-maintenance-title,
.maintenance-motion .main-maintenance-subtitle{
	opacity:0;
	transform:translateY(34px);
	transition:opacity .75s cubic-bezier(.22,.61,.36,1),transform .75s cubic-bezier(.22,.61,.36,1);
}

.maintenance-motion .main-maintenance-subtitle{
	transform:translateY(42px);
}

.maintenance-motion.is-active .main-maintenance-title,
.maintenance-motion.is-active .main-maintenance-subtitle{
	opacity:1;
	transform:translateY(0);
}

.maintenance-motion.is-active .main-maintenance-title{
	transition-delay:.06s;
}

.maintenance-motion.is-active .main-maintenance-subtitle{
	transition-delay:.2s;
}

@media screen and (max-width:1200px){
	.main-maintenance-title{
		font-size:50px;
	}

	.main-maintenance-cards{
		gap:20px;
	}

	.main-maintenance-card{
		min-height:450px;
		padding-left:18px;
		padding-right:18px;
	}

	.main-maintenance-icon{
		width:180px;
		height:180px;
	}

	.main-maintenance-card h3{
		font-size:23px;
	}

	.main-maintenance-card p{
		font-size:15px;
	}
}

@media screen and (max-width:980px){
	.main-maintenance-section{
		min-height:auto;
	}

	.main-maintenance-inner{
		padding-top:80px;
		padding-bottom:85px;
	}

	.main-maintenance-title{
		font-size:43px;
	}

	.main-maintenance-subtitle{
		font-size:18px;
	}

	.main-maintenance-cards{
		grid-template-columns:repeat(2,minmax(0,1fr));
		max-width:820px;
		margin-left:auto;
		margin-right:auto;
	}

	.main-maintenance-card{
		min-height:430px;
	}
}

@media screen and (max-width:640px){
	.main-maintenance-inner{
		padding:68px 20px 72px;
	}

	.main-maintenance-title{
		font-size:34px;
	}

	.main-maintenance-subtitle{
		font-size:16px;
	}

	.main-maintenance-cards{
		grid-template-columns:1fr;
		gap:22px;
		max-width:500px;
		margin-top:48px;
	}

	.main-maintenance-card{
		min-height:auto;
		padding:30px 22px 32px;
	}

	.main-maintenance-icon{
		width:170px;
		height:170px;
	}

	.main-maintenance-card h3{
		font-size:22px;
	}
}

@media screen and (max-width:420px){
	.main-maintenance-inner{
		padding-left:15px;
		padding-right:15px;
	}

	.main-maintenance-title{
		font-size:30px;
	}

	.main-maintenance-icon{
		width:150px;
		height:150px;
	}

	.main-maintenance-card p{
		font-size:14px;
	}
}

@media (prefers-reduced-motion:reduce){
	.maintenance-motion .main-maintenance-title,
	.maintenance-motion .main-maintenance-subtitle{
		opacity:1;
		transform:none;
		transition:none;
	}
}


/* =========================================================
   메인 고객센터 섹션
   ========================================================= */
.main-customer-section{
	position:relative;
	width:100%;
	min-height:420px;
	overflow:hidden;
	background:
		url("../img/main/customer_center_bg.jpg") center center / cover no-repeat;
}

.main-customer-overlay{
	position:absolute;
	inset:0;
	background:
		linear-gradient(90deg,
			rgba(24,89,160,.78) 0%,
			rgba(24,89,160,.55) 34%,
			rgba(10,39,71,.10) 72%,
			rgba(10,39,71,.04) 100%);
}

.main-customer-inner{
	position:relative;
	z-index:1;
	width:100%;
	max-width:1320px;
	margin:0 auto;
	padding:72px 40px 76px;
	color:#fff;
}

.main-customer-kicker{
	margin:0 0 6px;
	font-size:17px;
	font-weight:600;
	line-height:1.3;
	letter-spacing:.02em;
	color:rgba(255,255,255,.92);
}

.main-customer-title{
	margin:0 0 22px;
	font-size:52px;
	font-weight:800;
	line-height:1.12;
	letter-spacing:-.05em;
	color:#fff;
}

.main-customer-tel{
	display:inline-block;
	margin-bottom:12px;
	font-size:44px;
	font-weight:700;
	line-height:1.15;
	letter-spacing:.01em;
	color:#fff;
}

.main-customer-desc{
	margin:0 0 28px;
	font-size:18px;
	font-weight:400;
	line-height:1.6;
	letter-spacing:-.03em;
	color:rgba(255,255,255,.95);
}

.main-customer-btn{
	display:inline-flex;
	align-items:center;
	justify-content:center;
	min-width:136px;
	height:50px;
	padding:0 24px;
	border:1px solid rgba(255,255,255,.85);
	border-radius:10px;
	color:#fff;
	font-size:15px;
	font-weight:600;
	line-height:1;
	transition:
		background .25s ease,
		color .25s ease,
		transform .25s ease;
}

.main-customer-btn:hover,
.main-customer-btn:focus{
	background:#fff;
	color:#165da7;
	transform:translateY(-2px);
}

/* 텍스트 모션 */
.customer-motion .main-customer-kicker,
.customer-motion .main-customer-title,
.customer-motion .main-customer-tel,
.customer-motion .main-customer-desc,
.customer-motion .main-customer-btn{
	opacity:0;
	transform:translateY(28px);
	transition:
		opacity .7s cubic-bezier(.22,.61,.36,1),
		transform .7s cubic-bezier(.22,.61,.36,1);
}

.customer-motion.is-active .main-customer-kicker,
.customer-motion.is-active .main-customer-title,
.customer-motion.is-active .main-customer-tel,
.customer-motion.is-active .main-customer-desc,
.customer-motion.is-active .main-customer-btn{
	opacity:1;
	transform:translateY(0);
}

.customer-motion.is-active .main-customer-kicker{transition-delay:.04s;}
.customer-motion.is-active .main-customer-title{transition-delay:.12s;}
.customer-motion.is-active .main-customer-tel{transition-delay:.22s;}
.customer-motion.is-active .main-customer-desc{transition-delay:.32s;}
.customer-motion.is-active .main-customer-btn{transition-delay:.42s;}

@media screen and (max-width:1024px){
	.main-customer-section{
		min-height:390px;
		background-position:62% center;
	}

	.main-customer-inner{
		padding-left:30px;
		padding-right:30px;
	}

	.main-customer-title{
		font-size:46px;
	}

	.main-customer-tel{
		font-size:38px;
	}
}

@media screen and (max-width:700px){
	.main-customer-section{
		min-height:430px;
		background-position:68% center;
	}

	.main-customer-overlay{
		background:rgba(19,78,139,.72);
	}

	.main-customer-inner{
		padding:62px 20px 66px;
		text-align:center;
	}

	.main-customer-title{
		font-size:36px;
	}

	.main-customer-tel{
		font-size:31px;
	}

	.main-customer-desc{
		font-size:16px;
	}

	.main-customer-btn{
		min-width:130px;
	}
}

@media screen and (max-width:420px){
	.main-customer-inner{
		padding-left:15px;
		padding-right:15px;
	}

	.main-customer-title{
		font-size:32px;
	}

	.main-customer-tel{
		font-size:27px;
	}

	.main-customer-desc{
		font-size:15px;
	}
}

@media (prefers-reduced-motion:reduce){
	.customer-motion .main-customer-kicker,
	.customer-motion .main-customer-title,
	.customer-motion .main-customer-tel,
	.customer-motion .main-customer-desc,
	.customer-motion .main-customer-btn{
		opacity:1;
		transform:none;
		transition:none;
	}
}