@charset "utf-8";
/* CSS Document */

/* 기존 레이아웃 */
.top_banner_wrap,			
.top_util .util,
[data-util="link"],
[data-util="display_size"]								{ display:none !important; }
.top_util.fixed											{ position:relative!important; }
.top_util												{ --size:0!important; border-bottom:none!important; }
.top_util												{ height:inherit; border-bottom:none; }
.header													{ background:none; padding-top:2.5em; transition:initial }
.header .inr,
.top_util>.con_inner,
#content												{ width:96%; max-width:1745px; }
.header.fixed .inr										{ transition:initial; }
.header.fixed											{ position:initial }
.header.fixed .nav_wrap									{ border-bottom:none; }
.header .inr											{ height:initial; }
.top_util>.con_inner									{ position:relative; }
.top_util .login .btn_family							{ position:absolute; right:0; top:49px; z-index:60; color:var(--color-point); background:none; border:1px solid var(--color-point); }
.top_util .login .btn_family .icon::before				{ filter:invert(14%) sepia(99%) saturate(6739%) hue-rotate(198deg) brightness(93%) contrast(101%);}
.header.fixed h1 a										{ width:169px; height:51px; transition:initial }
.footer													{ position:initial; padding-top:1.5em }
.copy													{ position:absolute; left:50%; width:94%; bottom:1em; transform:translateX(-50%); font-size:.88em; opacity:.6; line-height:1.3 }

/* tab */
.control_main_tab .conts_tab							{ display:none; }
.control_main_tab .conts_tab.active						{ display:block; }



/* 맞춤복지 */
#wrap													{ position:relative; width:100%; height:100%; min-height:100svh; background:url(/resource/www/images/service/bg.jpg) no-repeat top center / cover; overflow:hidden}
#container												{ display:flex; flex-wrap:wrap; justify-content:center; align-items:center; margin-top:1.25em; }
#container h2											{ font-size:3.13em; font-family:var(--font-tenada); color:var(--color-point); }
#container .text										{ font-size:1.19em; line-height:1.3; margin-top:.25em }
#container .text>strong									{ font-weight:bold; }
[data-main="service"]									{ position:relative; margin-top:3.13em; display:flex; flex-wrap:wrap; gap:15px;  }
[data-main="service"] .tab_menu							{ display:flex; width:calc((100% - 15px) / 2); gap:0 15px; justify-content:space-between; align-items:stretch; transition-property:padding; transition-duration:0.8s; 
															transition-timing-function:ease-in-out}
[data-main="service"]:has(.active) .tab_menu			{ padding-bottom:480px; }
[data-main="service"] .tab_menu>li						{ width:calc((100% - 45px) / 4); }

[data-main="service"] .tab_menu>li .btn_open			{ position:relative; display:flex; flex-flow:column; cursor:pointer; width:100%; height:100%; border:1px solid #e4e4e4; border-radius:10px; background:var(--color-white); align-items:center; 
															transition:var(--trans-ani); padding-bottom:2.5em; }
[data-main="service"] .tab_menu>li .icon				{ width:calc(100% - 22px); position:relative; height:100px; padding:0 11px;  }
[data-main="service"] .tab_menu>li .left,
[data-main="service"] .tab_menu>li .right				{ position:absolute; top:0; width:20px; height:20px; overflow:hidden }
[data-main="service"] .tab_menu>li .right::before		{ position:absolute; top:-2px; left:0; box-shadow:-15px -15px 0 0 #e4e4e4; display:block; border-radius:50%; width:200%; height:200%; content:'';  }
[data-main="service"] .tab_menu>li .left::before		{ position:absolute; top:-2px; right:0; box-shadow:5px -15px 0 0 #e4e4e4; display:block; border-radius:50%; width:200%; height:200%; content:'';  }
[data-main="service"] .tab_menu>li .left				{ left:2px; }
[data-main="service"] .tab_menu>li .right				{ right:2px; }	 
[data-main="service"] .tab_menu>li .icon>span			{ position:relative; display:flex; width:100%; height:100%; border-radius:0 0 10px 10px; background:#e4e4e4; }	
[data-main="service"] .tab_menu>li .icon>span::before	{ position:absolute; width:100%; height:calc(100% - 15px); left:0; top:15px; content:''; background-position:50%; background-repeat:no-repeat; background-size:contain; transition:var(--trans-ani); }
[data-main="service"] .tab_menu>li .btn_open strong		{ display:flex; font-size:1.56em;  font-family:var(--font-tenada); transition:var(--trans-ani); margin-top:.75em}
[data-main="service"] .tab_menu>li .btn_open .tag		{ margin-top:.75em; display:flex; flex-flow:column; width:calc(100% - 40px); gap:2px; }
[data-main="service"] .tab_menu>li .btn_open .tag>li	{ opacity:.84; }


[data-main="service"] .tab_menu>li .btn_open::before	{ position:absolute; width:46px; height:46px; border-radius:100%; bottom:-23px; left:calc(50% - 23px); opacity:0; transition:var(--trans-ani);
															 background:url(/resource/www/images/common/icon_search.svg) no-repeat 50% 50% / 15px var(--color-point); content:''; }



[data-main="service"] .box												{ position:absolute; width:100%; left:0; top:350px; height:0; opacity:0; visibility:hidden; overflow:hidden; border-radius:20px; background-color:var(--color-white); 
																			border:3px solid var(--color-point); padding:3.13em; overflow:hidden; padding-right:450px; z-index:2; transition:var(--trans-ani);  }																		
[data-main="service"] .box.active										{ height:450px; opacity:1; visibility:inherit; }
[data-main="service"] .box::after										{ position:absolute; min-width:420px; min-height:101%; right:0; top:50%; content:''; transform:translateY(-50%);  background-position:left center; 
																			background-repeat:no-repeat; background-size:cover; }
[data-main="service"] .box::before										{ position:absolute; min-width:620px; min-height:620px; right:-14%; top:50%; content:''; transform:translateY(-50%);  border-radius:100%; 
																			background:#fffaef; content:''; }
[data-main="service"] .box .title_wrap									{ display:flex; gap:10px 20px; align-items:center; }
[data-main="service"] .box .title_wrap h3								{ font-size:1.88em; font-family:var(--font-tenada); color:var(--color-point) }
[data-main="service"] .box .title_wrap .tag								{ display:flex; flex-wrap:wrap; gap:5px 20px; opacity:.84;}
[data-main="service"] .box .link										{ display:flex; flex-wrap:wrap; gap:10px; margin-top:.5em; overflow-y:auto; height:270px; padding-right:5px; z-index:4; align-content:flex-start; }
[data-main="service"] .box .link::-webkit-scrollbar 					{ -webkit-appearance:none; width:5px;} 
[data-main="service"] .box .link::-webkit-scrollbar-thumb 				{ background-color:var(--color-point); border-radius:5px; } 
[data-main="service"] .box .link::-webkit-scrollbar-track 				{ border-radius:5px; background-color:rgba(0,0,0,.2); }
[data-main="service"] .box .link>li										{ flex: 0 1 auto; min-width:calc((100% - 20px) / 3); }
[data-main="service"] .box .link>li>a									{ display:flex; justify-content:space-between; align-items:center; font-size:1.06em; height:60px; padding:0 1.18em; background:#e4e4e4; border-radius:10px; font-weight:600; 
																			transition:var(--trans-ani); line-height:1}
[data-main="service"] .box .link>li>a[target="_blank"]::after			{ display:flex; width:11px; height:11px; content:''; background:url(/resource/common/images/common/icon_top_family_blank.svg) no-repeat 50% 50% / contain; opacity:.7; 
																			transition:var(--trans-ani); }
[data-main="service"] .box .link>li>a:hover								{ background:var(--color-point); color:var(--color-white); }
[data-main="service"] .box .link>li>a:hover[target="_blank"]::after		{ filter:invert(1); opacity:1 }
[data-main="service"] .box .link>li>a>span								{ margin-top:2px; }
[data-main="service"] .box .btn_close									{ position:absolute; right:1em; top:1em; width:46px; height:46px; border-radius:100%; z-index:3; opacity:0; background:var(--color-point); transition:var(--trans-ani); }
[data-main="service"] .box.active .btn_close							{ opacity:1; }
[data-main="service"] .box .btn_close::before,
[data-main="service"] .box .btn_close::after							{ position:absolute; width:1px; height:21px; left:50%; top:50%; background:var(--color-white); content:''; }
[data-main="service"] .box .btn_close::before							{ transform:translate(-50%,-50%) rotate(45deg);}
[data-main="service"] .box .btn_close::after							{ transform:translate(-50%,-50%) rotate(-45deg);}

/* 효과 */

[data-main="service"] .tab_menu>li .btn_open:hover::before,
[data-main="service"] .tab_menu>li.active .btn_open::before				{ opacity:1; }
[data-main="service"] .tab_menu>li.active .btn_open						{ border-color:var(--color-point); }
[data-main="service"] .tab_menu>li.active .btn_open .icon>span			{ background:var(--color-point); }
[data-main="service"] .tab_menu>li.active .btn_open .right::before		{ box-shadow:-15px -15px 0 0 var(--color-point); }
[data-main="service"] .tab_menu>li.active .btn_open .left::before		{ box-shadow: 5px -15px 0 0 var(--color-point); }
[data-main="service"] .tab_menu>li.active .btn_open .icon>span::before 	{ top:-30px; height:calc(100% + 30px); }
[data-main="service"] .tab_menu>li.active .btn_open strong				{ color:var(--color-point); }
[data-main="service"] .box .btn_close:hover								{ transform:rotate(180deg);}


@media all and (max-width:1768px){
	.header .inr,
	.top_util>.con_inner,
	#content												{ max-width:inherit; }
	#container h2											{ font-size:3.1em; }
	#container .text										{ margin-top:0; }
	[data-main="service"] .tab_menu							{ gap:0 10px; }
	[data-main="service"] .tab_menu>li						{ width:calc((100% - 30px) / 4); }
	[data-main="service"] .tab_menu>li .btn_open strong		{ font-size:1.5em; }
	[data-main="service"] .box								{ padding:2.8em 3em; padding-right:450px; }
	[data-main="service"] .box.active						{ height:415px; }
	[data-main="service"] .box .title_wrap h3				{ font-size:1.8em; }
	[data-main="service"] .box .link>li>a					{ font-size:1.03em; }
	[data-main="service"] .tab_menu>li .btn_open .tag>li,
	[data-main="service"] .box .title_wrap .tag>li			{ font-size:.98em; }
}
@media all and (max-width:1668px){
	#container h2											{ font-size:3em; }
	[data-main="service"]									{ margin-top:3em; }
	[data-main="service"] .tab_menu>li .icon				{ height:90px; }
	[data-main="service"] .tab_menu>li .btn_open strong		{ font-size:1.45em; }
	
	[data-main="service"] .tab_menu>li .btn_open .tag>li,
	[data-main="service"] .box .title_wrap .tag>li			{ font-size:.95em; }
	[data-main="service"] .box .title_wrap h3				{ font-size:1.75em; }
	[data-main="service"] .box .link>li>a					{ font-size:1em; height:58px; }
	[data-main="service"] .box .link						{ height:265px;}
}
@media all and (max-width:1568px){
	[data-main="service"]:has(.active) .tab_menu			{ padding-bottom:0; }
	[data-main="service"] .tab_menu:has(.active)			{ padding-bottom:410px; }
	[data-main="service"]									{ gap:30px; }
	[data-main="service"] .tab_menu							{ position:relative; width:100%; flex-wrap:wrap; gap:30px }
	[data-main="service"] .tab_menu>li						{ width:calc((100% - 90px) / 4); }
	[data-main="service"] .tab_menu>li.active .btn_open .icon>span::before	{ top:-15px; height:calc(100% + 15px); }
	[data-main="service"] .box								{ top:340px;  padding:2.5em; padding-right:350px; }
	[data-main="service"] .box.active						{ height:375px; }
	[data-main="service"] .box .title_wrap h3				{ font-size:1.7em; }
	[data-main="service"] .box::before						{ min-width:520px; min-height:520px; }
	[data-main="service"] .box::after						{ min-width:320px; }
	[data-main="service"] .box .link						{ gap:5px; height:235px; }
	[data-main="service"] .box .link>li						{ min-width:calc((100% - 10px) / 3); }
	[data-main="service"] .box .link>li>a					{ font-size:1em; height:55px; }
	[data-main="service"] .tab_menu:nth-child(2) .box		{ top:320px; }
}
@media all and (max-width:1368px){
	#container h2											{ font-size:2.8em; }
	[data-main="service"]									{ gap:20px; margin-top:2em }
	[data-main="service"] .tab_menu							{ gap:20px }
	[data-main="service"] .tab_menu>li						{ width:calc((100% - 60px) / 4); }
	[data-main="service"] .tab_menu>li .btn_open strong		{ font-size:1.4em; }
	[data-main="service"] .tab_menu>li .btn_open			{ padding-bottom:2em; }
	[data-main="service"] .tab_menu>li .btn_open::before,
	[data-main="service"] .box .btn_close					{ width:40px; height:40px; }
	[data-main="service"] .tab_menu>li .btn_open::before	{ background-size:14px; } 
	[data-main="service"] .box .btn_close::before, 
	[data-main="service"] .box .btn_close::after			{ height:19px; }
	[data-main="service"] .tab_menu:has(.active)			{ padding-bottom:370px; }
	
	[data-main="service"] .box								{ top:320px;  padding:2em; padding-right:300px; }
	[data-main="service"] .box.active						{ height:335px; }
	[data-main="service"] .box .title_wrap h3				{ font-size:1.65em; }
	[data-main="service"] .box::before						{ min-width:450px; min-height:450px; }
	[data-main="service"] .box::after						{ min-width:300px; }
	[data-main="service"] .box .link						{ height:215px; }
	[data-main="service"] .box .link>li						{ min-width:calc((100% - 10px) / 3); }
	[data-main="service"] .box .link>li>a					{ height:50px; }
	[data-main="service"] .tab_menu:nth-child(2) .box		{ top:295px; }
}
@media all and (max-width:1268px){
	.top_util .login .btn_family							{ top:45px; }
	[data-main="service"] .box::before						{ min-width:430px; min-height:430px; }
	[data-main="service"] .box::after						{ min-width:280px; }
	[data-main="service"] .box .link>li						{ min-width:calc((100% - 5px) / 2); }
}
@media all and (max-width:1024px){
	[data-main="service"] .tab_menu								{ gap:10px; }
	[data-main="service"] .tab_menu>li							{ width:calc((100% - 30px) / 4); }
	[data-main="service"] .tab_menu:has(.active)				{ padding-bottom:355px; }
	[data-main="service"] .tab_menu>li .btn_open strong			{ font-size:1.5rem; }
	[data-main="service"] .tab_menu>li .btn_open .tag>li,
	[data-main="service"] .box .title_wrap .tag>li				{ font-size:.95rem; }
	[data-main="service"] .box.active							{ height:320px; }
	[data-main="service"] .box::before							{ min-width:400px; min-height:400px; }
	[data-main="service"] .box::after							{ min-width:260px; }
	[data-main="service"] .box .title_wrap h3					{ font-size:1.6rem; }
	[data-main="service"] .box .title_wrap .tag					{ gap:5px 10px; }
	[data-main="service"] .box .link							{ height:210px; }
	[data-main="service"] .box .link>li>a						{ font-size:.95rem; height:48px; }
	[data-main="service"] .tab_menu>li .btn_open:hover::before	{ opacity:0; }
	[data-main="service"] .tab_menu>li.active .btn_open::before { opacity:1; }
}
@media all and (max-width:968px){
	[data-main="service"] .box .link>li							{ min-width:100%; }
}
@media all and (max-width:768px){
	.header																	{ padding-top:1.5em; }
	.top_util .login .btn_family											{ top:27px; }
	#container																{ margin-top:3em; }
	#container h2															{ font-size:2.6em; line-height:1 }
	#container .text														{ font-size:1.067rem; margin-top:.25em }
	[data-main="service"]													{ gap:10px; margin-top:2em;  }
	[data-main="service"] .tab_menu:has(.active)							{ padding-bottom:0; }
	[data-main="service"] .tab_menu>li										{ position:relative; width:100%; }
	[data-main="service"] .tab_menu>li .btn_open							{ height:inherit; flex-flow:row wrap; gap:0; height:100px; padding:20px 20px 20px 180px ;  }
	[data-main="service"] .tab_menu>li .btn_open::before					{ display:none; }
	[data-main="service"] .tab_menu>li .icon								{ position:absolute; left:0; top:0; width:160px; height:100px; padding:0; }
	[data-main="service"] .tab_menu>li .icon>span							{ border-radius:10px;  }
	[data-main="service"] .tab_menu>li .left,					
	[data-main="service"] .tab_menu>li .right								{ display:none; }	
	[data-main="service"] .tab_menu>li.active .btn_open .icon>span::before	{ top:-5px; height:calc(100% + 5px); }
	[data-main="service"] .tab_menu>li .btn_open .tag						{ flex-flow:row wrap; width:100%; margin-top:0; gap:5px 10px; line-height:1 } 
	[data-main="service"] .tab_menu>li .btn_open strong						{ width:100%; margin-top:initial; }
	[data-main="service"] .box,
	[data-main="service"] .tab_menu:nth-child(2) .box						{ position:relative; margin-top:.75em; top:inherit; left:inherit; display:none; padding:2em }
	[data-main="service"] .box .title_wrap									{ flex-flow:column; }
	[data-main="service"] .box .title_wrap h3,
	[data-main="service"] .box .title_wrap .tag								{ line-height:1; justify-content: center; }
	[data-main="service"] .box .link										{ margin-top:1.5em; }
	[data-main="service"] .tab_menu>li.active  .box							{ display:block; height:inherit }
	[data-main="service"] .box::before,
	[data-main="service"] .box::after										{ display:none; }
}
@media all and (max-width:668px){
	#container h2															{ font-size:2.4em; }
	#container .text														{ font-size:1.03rem; }
	[data-main="service"]													{ margin-top:1.5em; }
	[data-main="service"] .tab_menu>li .btn_open strong						{ font-size:1.35rem; }
	[data-main="service"] .tab_menu>li .btn_open							{ height:90px; padding:15px 15px 15px 160px; }
	[data-main="service"] .tab_menu>li .icon								{ width:140px; height:90px; }
	[data-main="service"] .tab_menu>li .btn_open .tag>li, 
	[data-main="service"] .box .title_wrap .tag>li							{ font-size:.9rem; }
	[data-main="service"] .box, 
	[data-main="service"] .tab_menu:nth-child(2) .box						{ padding:1.5em; }
	[data-main="service"] .box .btn_close									{ width:35px; height:35px; }
	[data-main="service"] .box .btn_close::before, 
	[data-main="service"] .box .btn_close::after							{ height:15px; }
	[data-main="service"] .box .link>li>a									{ font-size:.9rem; padding:0 1em; padding-right:}
	[data-main="service"] .box .link>li>a[target="_blank"]::after			{ width:9px; height:9px; }
	
}
@media all and (max-width:568px){
	.top_util .login .btn_family											{ top:25px; }
}
@media all and (max-width:468px){
	#container h2															{ font-size:2.2em; }
	#container .text														{ font-size:1rem; }
	.top_util .login .btn_family											{ top:23px; }
	[data-main="service"] .tab_menu>li .btn_open							{ height:80px; padding:12px 10px 12px 115px; }
	[data-main="service"] .tab_menu>li .icon								{ width:100px; height:80px; }
	[data-main="service"] .tab_menu>li .btn_open strong						{ font-size:1.25rem; }
	[data-main="service"] .tab_menu>li .btn_open .tag>li, 
	[data-main="service"] .box .title_wrap .tag>li							{ font-size:.8rem; }
	[data-main="service"] .tab_menu>li .btn_open .tag						{ gap:5px; }
	[data-main="service"] .box .title_wrap .tag								{ gap:5px; }
	[data-main="service"] .box .link>li>a									{ line-height:1.2; }
	[data-main="service"] .box .link>li>a>span								{ margin-top:0; padding-right:10px; }
	[data-main="service"] .box .link>li										{ min-width:100%; }
}
@media all and (max-width:368px){
	#container h2															{ font-size:2.1em; }
	[data-main="service"] .tab_menu>li .btn_open							{ height:80px; padding:5px 10px 5px 95px; }
	[data-main="service"] .tab_menu>li .icon								{ width:80px; height:80px; }
	[data-main="service"] .tab_menu>li .btn_open strong						{ font-size:1.2rem; }
	[data-main="service"] .tab_menu>li .icon>span							{ overflow:hidden }
	[data-main="service"] .tab_menu>li.active .btn_open .icon>span::before	{ top:5px; height:calc(100% - 5px); }
	[data-main="service"] .box, 
	[data-main="service"] .tab_menu:nth-child(2) .box						{ padding:1.25em; }
	[data-main="service"] .box .btn_close									{ right:.5em; top:.5em; }
}

/* 아이콘 + 배경 이미지 */			
[data-main="service"] .tab_menu>li .icon1::before						{ background-image:url(/resource/www/images/service/img_tab01.png);  }
[data-main="service"] .tab_menu>li .icon2::before						{ background-image:url(/resource/www/images/service/img_tab02.png);  }
[data-main="service"] .tab_menu>li .icon3::before						{ background-image:url(/resource/www/images/service/img_tab03.png);  }
[data-main="service"] .tab_menu>li .icon4::before						{ background-image:url(/resource/www/images/service/img_tab04.png);  }
[data-main="service"] .tab_menu>li .icon5::before						{ background-image:url(/resource/www/images/service/img_tab05.png);  }
[data-main="service"] .tab_menu>li .icon6::before						{ background-image:url(/resource/www/images/service/img_tab06.png);  }
[data-main="service"] .tab_menu>li .icon7::before						{ background-image:url(/resource/www/images/service/img_tab07.png);  }
[data-main="service"] .tab_menu>li .icon8::before						{ background-image:url(/resource/www/images/service/img_tab08.png);  }
[data-main="service"] .item01 .box::after								{ background-image:url(/resource/www/images/service/bg_tab01.svg); }
[data-main="service"] .item02 .box::after								{ background-image:url(/resource/www/images/service/bg_tab02.svg); }
[data-main="service"] .item03 .box::after								{ background-image:url(/resource/www/images/service/bg_tab03.svg); }
[data-main="service"] .item04 .box::after								{ background-image:url(/resource/www/images/service/bg_tab04.svg); }
[data-main="service"] .item05 .box::after								{ background-image:url(/resource/www/images/service/bg_tab05.svg); }
[data-main="service"] .item06 .box::after								{ background-image:url(/resource/www/images/service/bg_tab06.svg); }
[data-main="service"] .item07 .box::after								{ background-image:url(/resource/www/images/service/bg_tab07.svg); }
[data-main="service"] .item08 .box::after								{ background-image:url(/resource/www/images/service/bg_tab08.svg); }