@charset "utf-8";

/* 
 * content CSS Document
 * KOWEB kimhynho 
 */


/* common */
#content div[class^="area_"]{position:relative; overflow:hidden; z-index:20;}
#content div[class^="area_"] h3{line-height:1.2; font-weight:200; font-size:40px; letter-spacing:-0.8px;}
#content div[class^="area_"] h3 i{font-size:44px;}
#container.sub .btn_basic01{border:1px solid #c2c2c2; font-weight:500; color:#777;}
#container.sub .btn_basic01:hover{border:1px solid rgba(223,190,106,0); color:#fff;}

.sub{position:relative;}
.sub .area_line{top:0;}
.sub .area_line > div > ul li{border-right:1px solid #f5f5f5;}
.sub .area_line > div{height:100%;}
.slideRight{position:absolute; float:right; top:0; left:0; width:100%; height:100%; background:#fff; transition:all 1.2s ease-in-out 0s;}
.slideRight-in{width:0;}

/* 회사소개 */
.sub #content .area_business h3, .sub #content .area_whatwebe h3{font-weight:600; font-size:37px; color:#222; text-align:center; text-transform:uppercase;}
.area_whatwebe{padding-top:120px;}
.area_whatwebe ul li{margin-bottom:9px; padding:32px 40px; background:#f7f7f7; font-weight:300; font-size:17px; color:#222;}
.area_whatwebe ul{margin-top:43px;}
.area_whatwebe ul li i{font-weight:400; color:#0470dc;}

.area_business{overflow:hidden; margin-bottom:150px; padding-top:120px;}
.list_business{overflow:hidden; margin-bottom:80px;}
.list_business > li{float:left; width:25%; margin-top:80px; text-align:center;}
.list_business > li > p{margin-top:30px; font-weight:500; color:#222;}

.area_graph{padding:139px 0; background:url(../images/content/img_business.png) 50% 50% no-repeat; text-align:center;}
.area_graph h3{color:#fff;}
.area_graph h3 b{font-weight:400;}
.area_graph h3 + p{margin-top:20px; font-weight:100; color:#fff;}
.area_graph h3 + p b{font-weight:500;}
.list_graph{margin-top:80px;}
.list_graph > div{float:left; width:16.66666%; text-align:center;}
.list_graph > div > em{display:block; margin-top:10px; font-weight:300; color:#fff;}
.list_graph > div > div{position:relative; height:360px; margin:0 90px; background:#fff;}
.list_graph + span{display:inline-block; margin-top:47px; padding:9px 20px; border:1px solid #4c4c4c; font-size:15px; color:#676767; border-radius:24px;}
.list_graph > div > div > span{display:inline-block; position:absolute; bottom:0; left:0; z-index:999; width:100%; height:100px; background:#adadad; transition:all 1.5s cubic-bezier(0.18, 0.89, 0.32, 1.28) 0s;}
.list_graph > div:first-child > div > .graphup-in{height:10%;}
.list_graph > div:nth-child(2) > div > .graphup-in{height:15%;}
.list_graph > div:nth-child(3) > div > .graphup-in{height:18%;}
.list_graph > div:nth-child(4) > div > .graphup-in{height:28%;}
.list_graph > div:nth-child(5) > div > .graphup-in{height:42%;}
.list_graph > div:nth-child(6) > div > .graphup-in{height:82%; background:linear-gradient(-30deg, #13f1fc, #0470dc);}
.list_graph > div:last-child > em{font-size:19px; color:#6773f8;}

#content .area_graph .area_line{position:absolute;}
#content .area_graph .area_line li{opacity:0.04;}
.area_greeting p{line-height:1.7; font-weight:300; color:#666; letter-spacing:-0.4px;}
.area_greeting h3{margin-top:140px;}
.area_greeting h3 + p{margin-top:20px;}
.area_greeting ul{overflow:hidden; margin-top:73px;}
.area_greeting ul li{position:relative; float:left; margin-right:36px;}
.area_greeting ul li:last-child{margin-right:0;}
.area_greeting ul li p{margin-top:15px; font-weight:600; color:#222;}
.area_greeting ul + p{margin-top:67px;}
.area_greeting h3 + p,
.area_greeting ul + p,
.area_greeting h3,
.box_greeting + div > p{padding:0 170px;}
.box_greeting + div > p i{color:#0470dc;}
.box_greeting{overflow:hidden; width:1400px; margin:120px auto 50px; background:url(../images/content/img_greeting05.png) 50% 50% no-repeat; color:#fff; text-align:center;}
.box_greeting > div{margin:20px; padding:158px 0; border:1px solid rgba(255,255,255,0.3);}
.box_greeting h5{font-weight:100; font-size:32px;}
.box_greeting h5 b{font-weight:400;}
.box_greeting h5 p{margin-bottom:22px; font-size:17px; color:#fff; letter-spacing:7px;}
.box_greeting + div > p b{display:block; margin-top:40px; color:#222;}
.box_greeting + div > p + span{float:right; margin-top:30px; margin-right:170px; font-size:22px; color:#222;}
.box_greeting + div > p + span i{display:block; font-weight:300; font-size:15px; color:#666;}

.area_common{position:relative;margin-top:83px;padding:60px 0;background:url(../images/content/img_common.png) 50% 50% repeat;overflow: hidden;}
.area_common .tit_common{float:left;}
.area_common .list_common{float:right; width:800px;}
.area_common .box_btn{float:left; width:100%; text-align:right;}
#container .area_common .box_btn > a{float:right; border:1px solid #222; color:#222;}
.area_common .tit_common h2{line-height:1.1; padding-top:15px; background:url(../images/main/icon_title.png) no-repeat 0 0; font-weight:600; font-size:40px; color:#222; text-transform:uppercase;}
.area_common .tit_common h2 span{display:block; margin-top:11px; font-weight:300; font-size:16px; color:#666;}
.area_common .list_common > li{display:flex; float:left; width:49%; margin-bottom:18px; flex-direction:column-reverse;}
.area_common .list_common > li label{display:inline-block; margin-bottom:4px; font-size:14px; transition:all 0.4s ease-out 0s;}
.area_common .list_common > li input{width:100%; height:53px; font-weight:300; font-size:14px; color:#bbb; transition:all 0.4s ease-out 0s; outline:none;}
.area_common .list_common > li:nth-child(3n),
.area_common .list_common > li:nth-child(1){margin-right:2%;}
.area_common .list_common > li input:focus{border:1px solid #6773f8;}
.area_common .list_common > li input:focus label{color:#6773f8;}
.area_common .list_common > li input:focus + label{color:#6773f8;}
.area_common .list_common > li:nth-child(3) input{float:left; width:-webkit-calc(30% - 1px); width:calc(30% - 1px);}
.area_common .list_common > li:nth-child(3) span{display:inline-block; float:left; width:20px; line-height:52px; text-align:center;}

/* 포트폴리오 */
.sub .area_portfolio .list_portfolio:nth-child(3),
.sub .area_portfolio .list_portfolio:nth-child(5){top:auto;}
.sub .img_portfolio{box-shadow:27px 34px 51px 0px rgba(0, 0, 0, 0.2);}
.sub .list_portfolio.box{transform:none !important;}
.sub .area_portfolio .text_portfolio > h3{color:#222;}
.sub .area_portfolio .list_portfolio{top:0 !important;margin-bottom:100px;min-height: 541px;}
.sub .area_portfolio .inr_portfolio{padding-bottom: 70px;}
.sub .area_portfolio .list_portfolio.direcR{margin-top:auto;}
.sub .area_portfolio .inr_portfolio{margin-top:180px;}

/* 찾아오시는길 */
.area_map #map{width:100%; height:500px; margin-bottom:50px;}
.area_map{padding:150px 0 50px 0;}
.area_map ul li{position:relative; float:left; width:24%; padding-left:1%;}
.area_map ul{overflow:hidden; margin-bottom:70px;}
.area_map ul li em{font-weight:600; font-size:17px; color:#222; text-transform:uppercase;}
.area_map ul li:after{content:""; position:absolute; top:6px; left:0; width:3px; height:15px; background:#222;}
.area_map ul li p,
.area_map ul li a{margin-top:2px; font-weight:300; font-size:15px; color:#666;}
.area_map ul li:nth-child(3) p,
.area_map ul li:nth-child(4) p a{font-size:16px;}
.area_map ul li p a{display:block;}

/* 서비스 */
.area_service{padding-top:130px;}
.area_service h3{margin-bottom:28px;}
.area_service p{font-weight:300; color:#666; letter-spacing:-0.4px;}
.area_service p > i{color:#0470dc;}
.area_service ul.service_list{overflow:hidden; margin-top:41px;}
.area_service ul.service_list li{float:left; margin:0 10px 10px 0px; padding:10px 20px; background:#f2f2f2;}
.area_service .scrollTable{margin-top:50px;}

.area_basic{margin-top:80px;}
.area_basic h4,
.area_process h4{position:relative; padding-left:11px; font-size:18px; color:#222;}
.area_basic h4:after,
.area_process h4:after{content:""; position:absolute; top:2px; left:0; width:3px; height:22px; background:#222;}

.area_process{margin-top:100px;}
.area_process ul li{position:relative; float:left; width:33.3333%; width:-webkit-calc(30% - -6px); width:calc(30% - -6px); margin-right:50px; margin-bottom:50px; padding:80px 0; background:#fff; box-shadow:4px 8px 40px 0px rgba(0, 0, 0, 0.08); text-align:center;}
.area_process ul li:first-child,
.area_process ul li:nth-child(2){width:50%; width:-webkit-calc(49% - 13px); width:calc(49% - 13px);}
.area_process ul li > span{position:absolute; top:20px; left:20px; line-height:1; font-weight:500; font-size:51px; color:#efefef;}
.area_process ul li img{display:block; margin:0 auto;}
.area_process ul li em{display:block; line-height:1; margin:30px 0 20px; font-size:17px; color:#222;}
.area_process ul li p{line-height:1.7; font-weight:300; color:#666; min-height:81px;}
.area_process ul{margin-top:20px;}
.area_process ul li:nth-child(2){margin-right:0;}
.area_process ul li:last-child{margin-right:0;}
.area_process ul li:first-child img{display:inline-block; position:relative; left:10px;}
.area_process .box_btn{display:block; float:left; width:100%;}

@media all and (max-width:1540px){
	.box_greeting{width:90%; background-size:cover;}
}

@media all and (max-width:1380px){
	.list_graph{overflow:hidden; width:850px; margin:80px auto 0;}
	.list_graph > div > div{width:16px; height:360px; margin:0 auto;}
	
	.area_greeting ul li{width:-webkit-calc(24% - 2px); width:calc(24% - 2px); margin-right:15px;}
	.area_greeting ul li img{width:100%;}
	.area_greeting h3 + p,
	.area_greeting ul + p,
	.area_greeting h3,
	.box_greeting + div > p{padding:0 100px;}
	.box_greeting{width:92%;}
	.box_greeting > div{margin:15px; padding:128px 0;}
	.box_greeting h5 p{margin-bottom:13px;}
	
	.area_common .list_common{width:75%;}
	.area_common .list_common > li:nth-child(3) input{width:-webkit-calc(30% - 2px); width:calc(30% - 2px);}

	.area_map{padding:90px 0 50px 0;}
	.area_map ul{margin-bottom:50px;}
	.area_map ul li em{font-size:16px;}
	.area_map ul li p,
	.area_map ul li a{font-size:14px;}
	.area_map ul li:nth-child(3) p,
	.area_map ul li:nth-child(4) p a{font-size:15px;}

	.area_process ul li:first-child,
	.area_process ul li:nth-child(2){width:-webkit-calc(48% - 7px); width:calc(48% - 7px);}
	.area_process ul li{width:-webkit-calc(29% - -6px); width:calc(29% - -6px);}

	.sub .area_portfolio .inr_portfolio{margin-top:80px;}
	.sub .area_portfolio .inr_portfolio{padding-bottom: 40px;}
	.sub .area_portfolio .box_btn{margin-top: 40px;}	

	.sub .area_portfolio .list_portfolio {
		top: 0 !important;
		margin-bottom: 100px;
		min-height: 417px;
	}


}

@media all and (max-width:1023px){
	#content div[class^="area_"] h3{font-size:35px;}

	.area_business{margin-bottom:100px;}
	.sub #content .area_business h3{font-size:32px;}
	.list_business > li{margin-top:60px;}
	.list_business > li > img{height:65px;}
	.list_business > li > p{font-size:15px;}
	
	.area_graph{padding:100px 0; background:url(../images/content/img_business.png) 60% 50% no-repeat; background-size:cover;}
	.list_graph{width:100%;}
	.list_graph > div > div{width:13px; height:260px;}
	
	.area_greeting ul{overflow:hidden; margin-top:53px;}
	.area_greeting ul li{width:-webkit-calc(24% - 1px); width:calc(24% - 1px); margin-right:10px;}
	.area_greeting ul li p{margin-top:14px; font-size:14px;}
	.area_greeting h3{margin-top:100px;}
	.area_greeting ul + p{margin-top:47px;}
	.area_greeting h3 + p,
	.area_greeting ul + p,
	.area_greeting h3,
	.box_greeting + div > p{padding:0 50px; font-size:15px;}
	.box_greeting{margin:90px auto 40px;}
	.box_greeting > div{margin:15px; padding:88px 0;}
	.box_greeting h5{font-size:29px;}
	.box_greeting h5 p{margin-bottom:8px; margin-bottom:22px; font-size:15px; letter-spacing:5px;}
	.box_greeting + div > p + span{margin-right:40px;}
	
	.area_common .list_common{width:77%;}
	.area_common .tit_common h2{font-size:30px;}
	.area_common .tit_common h2 span{font-size:15px;}
	.area_common .list_common > li:nth-child(3) span{width:15px;}

	.area_map ul li p,
	.area_map ul li a{padding-right:20px;}

	.area_process ul li{margin:0 20px 20px 0;}
	.area_process ul li,
	.area_process ul li:first-child,
	.area_process ul li:nth-child(2){width:-webkit-calc(49% - 4px); width:calc(49% - 4px);}
	.area_process ul li:nth-child(2n){margin-right:0;}
	.area_process ul li:last-child{width:100%;}
}

@media all and (max-width:767px){
	#content div[class^="area_"] h3{line-height:1.5; font-size:25px;}
	#content div[class^="area_"] h3 i{font-size:30px;}
	
	.sub #content .area_business h3, .sub #content .area_whatwebe h3{font-size:28px;}
	
	.area_business{padding-top:70px;}
	.list_business{margin-bottom:50px;}	
	.list_business > li{margin-top:40px;}
	.list_business > li > p{margin-top:20px; font-weight:600; font-size:13px;}
	.list_business > li > img{height:55px;}
	
	.area_whatwebe ul{margin-top:20px;}
	.area_whatwebe ul li{padding:28px 30px; font-size:15px;}
	.area_whatwebe{padding-top:20px;}

	.area_graph h3 + p{font-size:13px;}
	.area_graph h3 + p br{display:none;}
	.list_graph{margin:50px auto 0;}
	.list_graph > div > div{width:10px; height:170px;}
	.list_graph > div > em{opacity:0.4; font-weight:200; font-size:14px;}
	.list_graph > div:last-child > em{opacity:1; line-height:1.4; font-weight:400; font-size:16px;}
	.list_graph + span{margin-top:18px; padding:7px 15px; font-size:12px;}

	.area_greeting h3 + p,
	.area_greeting ul + p,
	.area_greeting h3,	
	.area_greeting p br{display:none;}
	.area_greeting h3 + p{margin-top:17px;}
	.area_greeting ul{margin-top:44px;}
	.area_greeting ul + p{margin-top:32px;}
	.area_greeting ul li{width:-webkit-calc(50% - 5px); width:calc(50% - 5px); margin-right:10px; margin-bottom:20px;}
	.area_greeting ul li:nth-child(2n){margin-right:0;}
	.box_greeting + div > p{padding:0; font-size:14px;}
	.box_greeting > div{margin:15px; padding:68px 0;}
	.box_greeting + div > p + span{margin-right:0; font-weight:600; font-size:19px;}
	.box_greeting + div > p + span i{font-size:13px;}
	.box_greeting h5{line-height:1.7; font-size:22px;}
	.box_greeting h5 p{margin:0 30px 10px; font-size:13px; letter-spacing:0;}

	.area_common{padding:50px 0 90px;}
	.area_common .tit_common{width:100%; margin-bottom:30px; text-align:center;}
	.area_common .tit_common h2{padding-top:10px; background-size:35px; background-position:50% 0; font-size:27px;}
	.area_common .tit_common h2 span{display:none;}
	.area_common .tit_common h2 br{display:none;}
	.area_common .list_common{width:100%;}
	.area_common .list_common > li input{height:47px;}
	.area_common .list_common > li:nth-child(3) span{line-height:46px;}
	.area_common .list_common > li:nth-child(3) input{width:-webkit-calc(30% - 3px); width:calc(30% - 3px);}
	.area_common .box_btn{float:left; width:100%; text-align:center;}

	.area_map{padding:90px 0 0px 0;}
	.area_map #map{height:330px;}
	.area_map ul li{width:48%; margin-bottom:15px; padding-left:2%;}

	.area_service{padding-top:0;}
	.area_service h3{margin-bottom:8px;}
	.area_service p{font-size:14px;}
	.area_service p br{display:none;}
	.area_service ul{margin-top:24px;}
	.area_service ul.service_list li{padding: 6px;font-size: 12px;}
	.area_service ul.service_list li{float:left; margin:0 7px 7px 0px;}
	.area_basic{margin-top:60px;}
	.area_service .scrollTable{margin-top:10px;}

	.area_basic h4,
	.area_process h4{padding-left:8px; font-size:16px;}
	.area_basic h4:after,
	.area_process h4:after{height:20px;}
	.area_process ul li{padding:70px 0 30px;}
	.area_process ul li,
	.area_process ul li:first-child,
	.area_process ul li:nth-child(2){width:-webkit-calc(49% - 6px); width:calc(49% - 6px);}
	.area_process ul li p{margin:0 4%; font-size:14px;}
	.area_process ul li p br{display:none;}
	.area_process ul li img{height:70px;}
	.area_process ul li em{font-size:16px;}
	.area_process ul li > span{top:15px; left:15px; font-size:30px;}

	.snb ul li a{margin:0; padding:11px; font-size:14px;}
	.sub .area_portfolio .list_portfolio{margin-bottom:30px;}
	.sub .area_portfolio .text_portfolio{margin-top:5px;}

	.sub .area_portfolio .list_portfolio {
		top: 0 !important;
		margin-bottom: 100px;
		min-height: 217px;
	}
}

@media all and (max-width:540px){
	.snb{margin-top: 0; text-align: center;}

	.area_whatwebe ul li{padding:18px 20px; font-size:14px;}

	.area_business{margin-bottom:70px; padding-top: 40px;}
	.list_business > li{width:50%;}	

	.area_graph{padding:70px 0;}
	
	.area_greeting h3{margin-top:70px;}
	.area_greeting h3 + p{margin-top:7px;}
	.area_greeting h3 + p,
	.area_greeting ul + p,
	.area_greeting h3,
	.box_greeting + div > p{font-size:13px;}
	.area_greeting ul{margin-top:34px;}
	.area_greeting ul li p{margin-top:8px; font-size:13px;}
	.area_greeting ul + p{margin-top:12px;}

	.box_greeting{width: 96%;}
	.box_greeting{margin:60px auto 30px;}
	.box_greeting h5{font-size:17px;}
	.box_greeting h5 p{margin:0 30px 5px;}
	.box_greeting > div{margin:10px;}

	.area_common{padding:45px 0 90px;margin-top:33px;}
	.area_common .list_common > li{width:100%; margin-right:0; margin-bottom:13px;}
	.area_common .list_common > li:nth-child(3) input{width:-webkit-calc(30% - 0px); width:calc(30% - 0px);}
	#container.sub .btn_basic01{float:none; width:140px; height:52px; line-height:50px; font-size:14px;}

	.area_map{padding:50px 0 20px 0;}
	.area_map #map{height:240px; margin-bottom:20px;}
	.area_map ul{margin-bottom:10px;}
	.area_map ul li{width:98%; padding-left:2%;}
	.area_map ul li em{font-size:15px;}
	.area_map ul li:after{content:""; top:7px; width:3px; height:13px;}

	.area_process ul li{padding:60px 0 30px;}
	.area_process ul li,
	.area_process ul li:first-child,
	.area_process ul li:nth-child(2){width:-webkit-calc(48% - 3px); width:calc(48% - 3px);}
	.area_process ul li img{height:58px;}
	.area_process ul li em{font-weight:600; font-size:15px;}
	.area_process ul li p{margin:0 5%; font-size:12px;}

	.sub .area_portfolio{padding-bottom:40px;}
	.sub .area_portfolio .list_portfolio{margin-bottom:20px;}
	.sub .area_portfolio .inr_portfolio{margin-top:20px; padding-bottom:10px;}
	.sub .area_portfolio .box_btn{margin-top: 0;}

	.sub .img_portfolio{box-shadow: -3px 7px 30px 0px rgba(0, 0, 0, 0.2);}
}

@media all and (max-width:400px){
	.area_process ul li{margin:0 20px 10px 0;}
	.area_process ul li,
	.area_process ul li:first-child,
	.area_process ul li:nth-child(2){width:100%;}
}

@media all and (max-width:359px){
	#content div[class^="area_"] h3{line-height:1.3; font-size:22px;}
	#content div[class^="area_"] h3 i{font-size:24px;}

	.list_business > li > img{height:50px;}
	.sub #content .area_business h3, .sub #content .area_whatwebe h3{font-size:25px;}

	.list_graph{margin:40px auto 0;}
	.area_graph h3 + p{line-height:1.7; margin-top:12px; font-size:12px;}

	.box_greeting{margin: 40px auto 20px;}
	.box_greeting h5{font-size:15px;}
	.box_greeting h5 p{margin:0 30px 10px; font-size:12px;}
}




/* 220726 시작 */
/* 형광펜 */
.txt-highlight-r {display: inline-block;	line-height: inherit;	font-weight: inherit;	vertical-align: top;	position: relative;	z-index: 0;	padding: 0 3px;	overflow: hidden;}
.txt-highlight-r::after {	content: '';	display: block;	width: 0;	z-index: -1;	border-bottom: 0.4em solid #13f1fc;	position: absolute;	left: 0;	bottom: 0;}
.txt-highlight-b {display: inline-block;	line-height: inherit;	font-weight: inherit;	vertical-align: top;	position: relative;	z-index: 0;	padding: 0 3px;	overflow: hidden;}
.txt-highlight-b::after {	content: '';	display: block;	width: 0;	z-index: -1;	border-bottom: 0.4em solid #13f1fc;	position: absolute;	left: 0;	bottom: 0;}
.txt-highlight-v {display: inline-block;	line-height: inherit;	font-weight: inherit;	vertical-align: top;	position: relative;	z-index: 0;	padding: 0 3px;	overflow: hidden;}
.txt-highlight-v::after {	content: '';	display: block;	width: 0;	z-index: -1;	border-bottom: 0.4em solid #13f1fc;	position: absolute;	left: 0;	bottom: 0;}
.txt-highlight-y {display: inline-block;	line-height: inherit;	font-weight: inherit;	vertical-align: top;	position: relative;	z-index: 0;	padding: 0 3px;	overflow: hidden;}
.txt-highlight-y::after {	content: '';	display: block;	width: 0;	z-index: -1;	border-bottom: 0.4em solid #13f1fc;	position: absolute;	left: 0;	bottom: 0;}
.move-highlight::after {	animation: highlight 700ms linear;	animation-fill-mode: both;	animation-delay: 500ms;}
@keyframes highlight {	0% { width: 0; }	100% { width: 100%; } }

/* 혜택 */
.benefits {position:relative; margin-top:41px;}
.benefits *{ box-sizing: border-box; }
.benefits img{ max-width: 100%; }
.benefit-list ~ div{ display: none; }

.benefit-list > ul {display:grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.benefit-list > ul > li.wide { grid-column: 2 span;}
.benefit-list .benefit_box {position:relative; height:100%; padding:29px; border:1px solid #ddd; border-radius:10px; cursor:pointer; transition:.2s;}
.benefit-list .tit-wrap {display:flex; align-items:center; margin-bottom:17px;}
.benefit-list .tit-wrap .ico {width:70px; height:70px; background:#f4f4f4; border-radius:100%; overflow:hidden; margin-right:20px;}
.benefit-list .tit-wrap .tit {flex:1 1 auto; min-width:0; width:1%; color:#242424; font-size:20px; font-weight:700; line-height:1.35em; letter-spacing:-.03em;}
.benefit-list .tit-wrap .tit strong {color:#0470dc;}
.benefit-list .txt-wrap {color:#686868; line-height:1.563em; letter-spacing:-.03em; margin-left:10px; margin-bottom:40px;}
.benefit-list .txt-wrap .tt {color:#454545; font-size:18px; font-weight:600; line-height:1.45em; letter-spacing:-.03em; margin-bottom:6px;}
.benefit-list .txt-wrap ul li {position:relative; padding-left:10px; margin-bottom:2px;}
.benefit-list .txt-wrap ul li:last-child {margin-bottom:0;}
.benefit-list .txt-wrap ul li:before {content:"•"; position:absolute; top:0; left:-2px;}
.benefit-list .cost {position:absolute; top:-11px; right:-11px; min-width:95px; padding:0 10px; text-align:center; color:#fff; font-size:15px; font-weight:500; line-height:28px; letter-spacing:-.02em; background:#42ade2; border-radius:30px;}
.benefit-list .more {position:absolute; bottom:26px; left:39px; color:#a2a2a2; font-size:15px; line-height:1.3em; letter-spacing:-.03em;}
.benefit-list .more:after {content:""; margin-left:6px; display:inline-block; vertical-align:middle; width:9px; height:9px; border-right:1px solid #a2a2a2; border-top:1px solid #a2a2a2; transform:rotate(45deg);}
.benefit-list .wide .cost {background:#002060}
.benefit-list .benefit_box:hover {background:#6975f8; border-color:#6975f8;}
.benefit-list .benefit_box:hover .tit-wrap .ico {background:#fff;}
.benefit-list .benefit_box:hover .tit-wrap *,
.benefit-list .benefit_box:hover .txt-wrap,
.benefit-list .benefit_box:hover .txt-wrap * {color:#fff;}
.benefit-list .benefit_box:hover .cost {animation:up_down .5s linear alternate infinite;}
.benefit-list .benefit_box:hover .more {color:#fff;}
.benefit-list .benefit_box:hover .more:after {border-color:#fff;}
.benefit-list .wide .cost {top:29px; right:29px;}
.benefit-list .wide .box:hover .cost {background:#fff; color:#6975f8;}
.benefit-list .GI_TW_Current .box {background:#6975f8; border-color:#6975f8;}
.benefit-list .GI_TW_Current .box .tit-wrap .ico {background:#fff;}
.benefit-list .GI_TW_Current .box .tit-wrap *,
.benefit-list .GI_TW_Current .box .txt-wrap,
.benefit-list .GI_TW_Current .box .txt-wrap * {color:#fff;}
.benefit-list .GI_TW_Current .box .cost {animation:up_down .5s linear alternate infinite;}
.benefit-list .GI_TW_Current .box .more {color:#fff;}
.benefit-list .GI_TW_Current .box .more:after {border-color:#fff;}
.benefit-list .GI_TW_Current.wide .box .cost {background:#fff; color:#6975f8;}

@keyframes up_down{
	0%{transform:translateY(0);}
	100%{transform:translateY(-3px);}
}

.GI_TW_Selected_Row { transition: margin-bottom 0.3s ease-in; }
.GI_TW_expander {position:absolute; z-index:1; top:0; left:0; width:100%; height:0; margin-top: 10px; overflow:hidden; transition:height 0.3s ease-in;}
.GI_TW_expander.animating {overflow: hidden !important;}
.GI_TW_expander.opened {overflow: visible;}
.GI_TW_expander .GI_TW_expander-inner { padding:0 0 20px 0; width: 100%; height: 200px; margin: 0 auto; overflow: hidden; }
.GI_TW_expander .close {position:absolute; top:17px; right:29px; width:20px; height:20px; background:url("../images/content/layer_close.png") 50% 50% no-repeat; cursor:pointer; z-index:10;}
.benefit-content .title {position:relative; padding:13px 29px; color:#fff; background:#6975f8; border:1px solid #6975f8; border-radius:10px 10px 0 0;}
.benefit-content .title h4 {font-size:20px; font-weight:600; line-height:1.3em; letter-spacing:-.03em;}
.benefit-content .title .close {position:absolute; top:50%; right:29px; margin-top:-10px; width:20px; height:20px; background:url("../images/content/layer_close.png") 50% 50% no-repeat;}
.benefit-content .content {padding:29px; color:#686868; line-height:1.688em; letter-spacing:-.03em; background:#fff; border:2px solid #6975f8; border-top:0; border-radius:0 0 10px 10px;}
.benefit-content .top-txt {margin-bottom:20px;}
.benefit-content .summary {display:flex; padding:20px; background:#f1f6f8; border-radius:10px;}
.benefit-content .summary .ico {width:70px; height:70px; background:#fff; border-radius:100%; overflow:hidden; margin-right:20px;}
.benefit-content .summary .txt {flex:1 1 auto; min-width:0; width:1%; padding-top:5px;}
.benefit-content .summary .txt dt {color:#242424; font-size:20px; font-weight:600; line-height:1.45em; letter-spacing:-.03em; margin-bottom:4px;}
.benefit-content .summary .txt dd strong {font-weight:600;}
.benefit-content .summary .img {margin-top:30px;}
.benefit-content .info {margin-top:29px;}
.benefit-content .info .row {display:flex; flex-wrap:wrap; margin:-10px;}
.benefit-content .info .col {width:calc(50% - 20px); margin:10px; padding:24px 29px; border:1px solid #ddd; border-radius:10px;}
.benefit-content .info dt {display:flex; align-items:center; justify-content:space-between; color:#6975f8; font-size:18px; font-weight:600; line-height:1.4em; letter-spacing:-.03em; margin-bottom:5px;}
.benefit-content .info dd {max-width:450px; line-height:1.563em;}
.benefit-content .compare {margin-top:29px; text-align:center;}
.benefit-content .compare .row {display:flex; flex-wrap:wrap; margin:-10px;}
.benefit-content .compare .col {width:calc(50% - 20px); margin:10px; padding:24px 29px; border:1px solid #ddd; border-radius:10px;}
.benefit-content .compare .txt1 {padding:13px; color:#fff; border-radius:10px; margin-bottom:10px; font-size:18px; font-weight:500; line-height:1.3em; letter-spacing:-.03em;}
.benefit-content .compare .txt2 {display:flex; justify-content:space-between; color:#fff; font-weight:500;}
.benefit-content .compare .txt2 > div {width:100%; border-radius:10px; padding:18px;}
.benefit-content .compare .txt2 big {font-size:20px;}
.benefit-content .compare .txt2 .half {width:calc(50% - 5px);}
.benefit-content .compare .txt3 {padding:10px 0;}
.benefit-content .compare .txt4 {padding:13px; color:#fff; border-radius:10px; font-size:18px; font-weight:500; line-height:1.3em; letter-spacing:-.03em;}
.benefit-content .image {margin-top:20px;}
.benefit-content .image img {border-radius:10px;}
.benefit-content .badge {display:inline-block; padding:0 12px; color:#fff; font-size:15px; font-weight:500; line-height:28px; border-radius:20px;} 
.benefit-content .badge.type1 {background:#6dcde5} 
.benefit-content .badge.type2 {background:#662599} 
.benefit-content .badge.type3 {background:#254699} 
.benefit-content .bottom-txt {margin-top:20px;}
.benefit-content .bottom-txt strong {font-weight:500;}
.benefit-content .bottom-txt a:hover {text-decoration:underline;}

@media (max-width: 1023px) {
	.benefit-list > ul{ gap: 16px; }
	.benefit-list > ul{ grid-template-columns: repeat(4, 1fr); }
	.benefit-list > ul > li { grid-column: 2 span; }
	.benefit-list .wide .cost {top:15px; right:15px;}
	.benefit-list .benefit_box {padding:19px;}
	.benefit-list .more {left:29px; bottom:16px;}
}

@media (max-width: 767px) {
	.benefit-list > ul{ grid-template-columns: 1fr; }
	.benefit-list .benefit_box {padding:15px;}
	.benefit-list .tit-wrap {margin-bottom:12px;}
	.benefit-list .tit-wrap .ico {width:54px; height:54px; margin-right:15px;}
	.benefit-list .tit-wrap .tit {font-size:18px;}
	.benefit-list .tit-wrap .tit br {display:none;}
	.benefit-list .txt-wrap {margin-left:5px; margin-bottom:30px;}
	.benefit-list .txt-wrap .tt {font-size:14px;}
	.benefit-list .txt-wrap ul{ font-size: 14px; }
	.benefit-list .more {left:20px; bottom:14px; font-size:12px;}
	.benefit-list .more:after {width:6px; height:6px;}
	.benefit-list .cost {min-width:auto; font-size:11px; line-height:22px; padding:0 10px; top:5px !important; right:5px !important;}

	.benefit-content .title {padding:10px 15px;}
	.benefit-content .title h4 {font-size:16px;}
	.benefit-content .content {padding:14px; border:1px solid #254699;}
	.benefit-content .top-txt {margin-bottom:12px;}
	.benefit-content .summary {padding:15px;}
	.benefit-content .summary .ico {width:54px; height:54px; margin-right:15px;}
	.benefit-content .summary .txt {padding-top:0;}
	.benefit-content .summary .txt dt {font-size:16px; margin-bottom:10px; min-height:54px; display:flex; align-items:Center;}
	.benefit-content .summary .txt dd {margin-left:-69px;}
	.benefit-content .summary .img {margin-top:15px; margin-left:-69px;}
	.benefit-content .info {margin-top:15px;}
	.benefit-content .info .row {display:block; margin:0;}
	.benefit-content .info .col {width:100%; margin:0 0 10px; padding:14px;}
	.benefit-content .info .col:last-child {margin-bottom:0;}
	.benefit-content .info dt {font-size:15px;}
	.benefit-content .compare {margin-top:15px;}
	.benefit-content .compare .row {display:block; margin:0;}
	.benefit-content .compare .col {width:100%; margin:0 0 10px; padding:14px;}
	.benefit-content .compare .col:last-child {margin-bottom:0;}
	.benefit-content .compare .txt1 {padding:8px; font-size:16px;}
	.benefit-content .compare .txt2 > div {padding:10px;}
	.benefit-content .compare .txt2 big {font-size:18px;}
	.benefit-content .compare .txt4 {padding:8px; font-size:16px;}
	.benefit-content .image {margin-top:12px;}
	.benefit-content .badge {padding:0 8px; font-size:11px; line-height:22px;}
	.benefit-content .bottom-txt {margin-top:15px;}

	.GI_TW_expander {margin-top:10px;}
	.GI_TW_expander .close {top:13px; right:15px; width:16px; height:16px; background-size:contain;}
}
/* 220726 끝 */






/* 홈페이지 제작 서비스 추가 */

.area_service{z-index:21 !important;}
.sv_banner{margin:100px 0 150px;}
.sv_list{}
.sv_list > li{position:relative; height:auto !important;}
.sv_list > li .txt_box{position:relative; padding:50px 30px 90px; box-sizing:border-box;}
.sv_list > li .txt_box > em{position:absolute; left:10px; top:4px; font-size:80px; color:rgba(0,0,0,0.08); font-family:'Noto Sans KR', Sans serif;}
.sv_banner h4{margin-bottom:20px; color:#242424; font-size:23px; line-height:normal;}
.sv_banner i{display:inline-block; color:#0470dc;}
.sv_banner p{font-size:14px; color:#888; line-height:1.6;}
.sv_banner p b{color:#333;}
.sv_banner p+p{margin-top:4px;}
.sv_list > li .txt_box > span{display:block; width:100px; height:28px; background:linear-gradient(-37deg, #0470dc, #13f1fc); border-radius:14px; color:#fff; font-size:14px; line-height:29px; text-align:center;}
.sv_list > li .btn_more{display:block; position:absolute; bottom:0; left:0; background:#f4f4f4; width:100%; height:40px; border-radius:20px; transition:0.3s ease;}
.sv_list > li .btn_more:hover{background:#111; color:#fff;}

.sv_banner .cont{opacity:0; visibility:hidden; position:fixed; top:70%; left:50%; transform:translate(-50%,-50%); max-width:1000px; width:96%; height:60vh; background:#fff; box-shadow:0 0 100px rgba(0,0,0,0.3); z-index:9999;  transition:0.8s ease; border-radius:40px; box-sizing:border-box;}
.sv_banner .cont.cont_sv{height:460px;}
.sv_banner .cont.active{opacity:1; visibility:visible; top:50%;}
.sv_banner .cont .cont_txt{padding:0 20px; margin:auto; width:96%; height:calc(100% - 160px); overflow-y:scroll; box-sizing:border-box;}
.sv_banner .cont .cont_txt::-webkit-scrollbar{width:6px;}
.sv_banner .cont .cont_txt::-webkit-scrollbar-thumb{background:#2f4d6a; background-clip:padding-box; border-radius:3px;}
.sv_banner .cont .cont_txt::-webkit-scrollbar-track{background:#ddd; box-sizing:border-box; border-radius:3px;}
.sv_banner .cont .btn_close{position:absolute; bottom:-25px; left:50%; transform:translateX(-50%); width:50px; height:50px; border-radius:50%; background:#000;}
.sv_banner .cont .btn_close:before,
.sv_banner .cont .btn_close:after{content:''; display:block; position:absolute; top:50%; left:50%; width:2px; height:22px; border-radius:1px; background:#fff; transform-origin:center;}
.sv_banner .cont .btn_close:before{transform:translate(-50%,-50%) rotate(-45deg);}
.sv_banner .cont .btn_close:after{transform:translate(-50%,-50%) rotate(45deg);}
.sv_banner .cont h4{position:relative; padding-top:40px; text-align:center; font-size:26px; box-sizing:border-box;}
.sv_banner .cont h4:after{content:''; display:block; margin-top:15px; width:100%; height:2px; background:linear-gradient(-37deg, #fff, #0470dc, #fff);}
.sv_banner .cont em{display:inline-block; position:relative; z-index:1;}
.sv_banner .cont em:before{content:''; display:block; position:absolute; bottom:0; left:0; width:100%; height:50%; background:#f2ff2b; z-index:-1; opacity:0.8; /*transition-delay:0.8s; transition:2.5s ease;*/}
/*.sv_banner .cont em.active:before{width:100%;}*/
.sv_banner .cont .cont_txt > p{margin-bottom:15px; color:#111; font-size:16px;}
.sv_banner .cont .box01{display:flex; justify-content:space-between; margin-bottom:30px; background:#f1f6f8; width:100%; padding:30px; box-sizing:border-box; border-radius:10px;}
.sv_banner .cont .box01 .ico{margin-right:20px; width:70px; height:70px; border-radius:50%; background:#fff;}
.sv_banner .cont .box01 .ico img{width:100%;}
.sv_banner .cont .box01 .txt{width:calc(100% - 100px);}
.sv_banner .cont .box01 h5{margin-bottom:8px; font-size:18px; color:#111;}
.sv_banner .cont .box01 p{font-size:16px; color:#333;}
.sv_banner .cont .box02{display:flex; flex-wrap:wrap; justify-content:space-between;}
.sv_banner .cont .box02 li{position:relative; margin-bottom:30px; padding:30px 20px 15px; width:calc(100% / 2 - 10px); box-sizing:border-box; text-align:center; border:1px solid #ddd; border-radius:10px; transition:0.3s ease;}
.sv_banner .cont .box02 li:hover{border-color:#0470dc;}
.sv_banner .cont .box02 li span{display:block; position:absolute; left:50%; top:-15px; transform:translateX(-50%); width:80%; padding:0 14px; height:30px; line-height:30px; background:linear-gradient(-37deg, #0470dc, #13f1fc); color:#fff; border-radius:15px;}
.sv_banner .cont .box02 li h5{margin-bottom:15px; padding-bottom:15px; font-size:20px; color:#0470dc; width:100%; border-bottom:1px dashed #ddd; box-sizing:border-box;}
.sv_banner .cont .box02 li p{color:#444; font-size:16px;}
.sv_banner .cont .box0201 div{color:#eee; padding:15px; border-radius:5px; font-weight:normal; font-size:16px; box-sizing:border-box;}
.sv_banner .cont .box0201 div b{display:block; font-weight:bold; color:#fff; font-size:20px;}
.sv_banner .cont .box0201 div.txt02 b{font-size:18px;}
.sv_banner .cont .box0201 div.txt01{display:flex; justify-content:space-between;} 
.sv_banner .cont .box0201 div.txt01 > div{width:calc(100% / 2 - 5px);}
.sv_banner .cont .box0201 p{margin:30px 0;}
.sv_banner .cont .box03 li{position:relative; padding-left:18px; color:#888; font-size:14px; font-weight:300;}
.sv_banner .cont .box03 li+li{margin-top:6px;}
.sv_banner .cont .box03 li:before{content:'※'; display:block; position:absolute; top:0px; left:0; color:#888; font-size:14px;}

.sv_list01{display:flex; justify-content:space-between;}
.sv_list01 > li{width:calc(100% / 2 - 20px); border-top:1px solid #e5e5e5;}
.sv_list01 > li .txt_box > h4{}
.sv_list01 > li .txt_box > p{position:relative; padding-left:15px; box-sizing:border-box;}
.sv_list01 > li .txt_box > p:before{content:''; display:block; position:absolute; top:10px; left:0; width:6px; height:1px; background:#888;}
.sv_list01 > li .txt_box > span{position:absolute; right:0; top:-15px;}
.sv_list01 > li .txt_box > em{left:0 !important;}

.sv_swiper{margin-top:90px;}
.sv_list02 > li{border-radius:20px; box-shadow:0 0 25px rgba(0,0,0,0.2);}
.sv_list02 > li .txt_box > span{position:absolute; right:7px; top:5px;}
.sv_swiper .swiper-scrollbar{position:relative !important; left:0 !important; bottom:auto !important; margin-top:50px; width:100% !important; background:#e5e5e5; height:8px !important;}
.sv_swiper .swiper-scrollbar-drag{background:#000;}

@media (max-width:1023px){
    .sv_banner{margin:80px 0 100px;}
    .sv_banner h4{margin-bottom:15px; font-size:20px;}
    .sv_list > li .txt_box{padding:40px 20px 70px;}
    .sv_list > li .txt_box > em{top:0; left:5px; font-size:70px;}
    .sv_list > li .btn_more{font-size:15px; height:36px;}
    
    .sv_list01 > li{width:calc(100% / 2 - 10px);}
    
    .sv_swiper{margin-top:70px;}
    .sv_swiper .swiper-scrollbar{margin-top:40px;}
    
    .sv_banner .cont h4{padding-top:30px; font-size:23px; margin-bottom:20px;}
    .sv_banner .cont .cont_txt{padding:0 10px; height:calc(100% - 150px);}
    .sv_banner .cont .cont_txt > p{font-size:15px;}
    .sv_banner .cont .box01{padding:20px;}
    .sv_banner .cont .box01 .ico{margin-right:0; width:60px; height:60px;}
    .sv_banner .cont .box01 .txt{width:calc(100% - 80px);}
    .sv_banner .cont .box01 h5{font-size:17px;}
    .sv_banner .cont .box01 p{font-size:15px;}
    .sv_banner .cont .box02 li span{font-size:15px;}
    .sv_banner .cont .box02 li h5{font-size:18px;}
    .sv_banner .cont .box02 li p{font-size:15px;}
    .sv_banner .cont .box02.box0201 li{padding-top:15px !important;}
    .sv_banner .cont .box0201 div{font-size:15px;}
    .sv_banner .cont .box0201 div b{font-size:18px;}
    .sv_banner .cont .box0201 p{margin:20px 0;}
}


@media (max-width:767px){
/*    .area_service{padding-top:50px;}*/
    
    .sv_banner{margin:60px 0 80px;}
    .sv_banner h4{font-size:18px;}
    .sv_list > li .txt_box{padding:30px 15px 60px;}
    .sv_list > li .txt_box > em{top:-2px; font-size:60px;}
    .sv_list > li .txt_box > span{font-size:13px; height:26px; line-height:27px;}
    
    .sv_list01{display:block;}
    .sv_list01 > li{width:100%;}
    .sv_list01 > li+li{margin-top:30px;}
    .sv_list01 > li .txt_box > span{top:-14px;}
    
    .sv_list02 > li{width:270px; margin-right:15px;}
    .sv_list02 > li .txt_box{padding-top:40px;}
    .sv_list02 > li .txt_box > em{top:6px;}
    
    .sv_banner .cont{border-radius:20px; height:70vh !important;}
    .sv_banner .cont h4{padding-top:20px; font-size:20px;}
    .sv_banner .cont .cont_txt{padding:0 5px; height:calc(100% - 130px);}
    .sv_banner .cont .box01{display:block; text-align:center;}
    .sv_banner .cont .box01 .ico{margin:0 auto 15px;}
    .sv_banner .cont .box01 .txt{width:100%;}
    .sv_banner .cont .box01 h5{font-size:16px;}
    .sv_banner .cont .box01 p{font-size:14px;}
    .sv_banner .cont .box02 li{margin-bottom:25px; padding:25px 5px 15px; width:calc(100% / 2 - 5px);}
    .sv_banner .cont .box02 li span{top:-13px; font-size:13px; width:115px; height:26px; line-height:27px;}
    .sv_banner .cont .box02 li h5{font-size:16px; margin-bottom:10px; padding-bottom:10px;}
    .sv_banner .cont .box02 li p{font-size:14px;}
    .sv_banner .cont .box03{margin-top:0;}
    .sv_banner .cont .box03 li,
    .sv_banner .cont .box03 li:before{font-size:13px;}
    .sv_banner .cont .box0201{display:block;}
    .sv_banner .cont .box0201 li{width:100%;}
    .sv_banner .cont .box0201 div{font-size:14px;}
    .sv_banner .cont .box0201 div b{font-size:16px;}
    .sv_banner .cont .box0201 p{margin:20px 0;}
    .sv_banner .cont .box0201 div.txt02 b{font-size:16px;}
    
}




/* // 홈페이지 제작 서비스 추가 */