@charset "utf-8"; 
 
/* SUB_TXT  ================================================================================== */
h4									{position:relative; font-family: 'Paperlogy'; font-size:1.7em; color:var(--color1);  font-weight:700; line-height:100%; padding:0 0 30px 0; }
h4 span							{font-size:0.75em;color:var(--color1);font-weight:500;} 
/*
h4::after							{position:absolute; top:0; left:0; content:''; width:25px; height:3px; background:var(--color1);   }
h4::after							{position:absolute; top:2px; left:0; content:''; width:20px; height:20px; background:linear-gradient(45deg, #0063b7, #02cbdf); border-radius:100%;}
h4::before						{position:absolute; z-index:1; top:7px; left:5px; content:''; width:10px; height:10px; background:#fff; border-radius:100%;}
h5::after							{position:absolute; top:5px; left:0; content:''; width:5px; height:18px; background:var(--color1); border-radius:5px;   } */
h5									{position:relative;font-size:1.25em;line-height:1.3; font-family: 'Paperlogy'; font-weight:600; padding:0 0 25px 22px; color:#111;   } 
h5::after							{position:absolute;content:'';  top:5px; left:0;  border:4px solid var(--color1); width:16px; height:16px; border-radius:100%;}
.sub_txtline					{font-weight:700; box-shadow: inset 0 -10px 0 #ffe88a; padding:0 3px; color:#333;}

@media screen and (max-width:1024px) { 
h4									{font-size:1.5em;  } 
h5									{font-size:1.2em; padding:0 0 20px 20px;  } 
h5::after							{ top:3px;  width:15px; height:15px;  }
}

.sub_h4							{position:relative; font-size:1.5em; color:#000; font-weight:500;  line-height:45px; margin-bottom:25px;  }
.sub_h4 i							{ width:45px; line-height:45px; background:var(--color1); color:#fff; text-align:center; border-radius:100%; font-size:1.1em; margin:0 10px 0 0;}

.sub_cont01					{padding-left:5px; text-align:justify; }  
.sub_cont02					{padding-left:10px; text-align:justify; }  
.sub_cont03					{padding-bottom:70px; }  
.sub_cont04					{padding-bottom:40px; }  
.sub_cont04 img			{max-width:100%;}
.sub_cont05					{position:relative;border-top:1px solid #222; }
.sub_cont05 .inner		{position:relative;padding:25px 15px;border-bottom:1px solid #d2dbe6;display:flex; }
.sub_cont05 .inner .tit				{width:18%;padding:5px 0;font-size:1.25em;font-weight:500;color:#222; }
.sub_cont05 .inner .txt				{ }
.sub_cont05 .inner .txt	p			{padding:5px 0;}
.sub_cont05 .inner .txt	p strong		{display:inline-block;min-width:100px; line-height:30px; text-align:center;background:var(--color1); color:#fff;text-align:center; font-size:0.9em;border-radius:3px; margin:0 10px 0 0; font-weight:400;}
.sub_cont05 .inner .txt	.no, .sub_cont04 .no		{display:inline-block;width:30px; line-height:30px; text-align:center;background:var(--color1); color:#fff;text-align:center; font-size:0.9em;border-radius:100%; margin:0 10px 0 0;}
.sub_cont_box01				{background:#f5f5f5;padding:25px 30px;margin-bottom:30px;color:var(--color1); border:1px solid #d2dbe6;}

.sub_cont06						{position:relative;border-top:1px solid #222; }
.sub_cont06 .inner			{position:relative;padding:25px 15px;border-bottom:1px solid #d2dbe6;display:flex;gap:50px; }
.sub_cont06 .img				{position:relative;text-align:center;width:110px;height:110px;line-height:100px;border-radius:50%;background:#f2f2f2;}
.sub_cont06 .inner .tit				{ padding:0 0 15px 0;font-size:1.2em;font-weight:500;color:var(--color1); }
.sub_cont06 .inner .cont				{flex:2; }
.sub_cont06 .inner .txt				{position:relative; }
.sub_cont06 .inner .txt	p			{position:relative;padding:3px 0 5px 12px;} 
.sub_cont06 .inner .txt	p::after			{position:absolute; content:''; display:block; left:0; top:15px; width:5px; height:1px; background:#666;}

.delist  								{padding-left:30px;}							
.delist li								{list-style:decimal-leading; padding-bottom:8px; }					
.sub_list01							{position:relative; list-style:none; padding:0 0 12px 20px; line-height:150%;}
.sub_list01::after				{position:absolute; content:''; display:block; left:8px; top:11px; width:3px; height:3px; background:var(--color1); border-radius:50%;}
.sub_list01 i						{ width:23px; line-height:23px; background:#aaa; color:#fff; text-align:center; font-size:0.9em;border-radius:100%;  }
.sub_list01 b						{color:var(--color1);}
.sub_list02							{position:relative; list-style:none; padding:1px 0 1px 15px;}
.sub_list02::after				{position:absolute; content:''; display:block; left:3px; top:14px; width:5px; height:1px; background:#666;}

.sub_inner_top					{padding:0 0 45px 0;text-align:center; color:var(--color1);font-size:1.4em;font-weight:400;  line-height:1.5;}
.sub_inner_top span			{display:block;  }
 

@media screen and (max-width:820px) {
.sub_cont_box01						{ padding:20px; }
 
.sub_cont06 .inner					{ padding:20px 0; gap:20px; }
.sub_cont06 .img						{ width:80px;height:80px;line-height:75px;  }
.sub_cont06 .img img				{width:65%;}
.sub_cont06 .inner .tit				{ padding:0 0 10px 0;font-size:1.1em; }  
.sub_cont06 .inner .txt	p			{position:relative;padding:0 0 5px 12px;} 
.sub_cont06 .inner .txt	p::after			{  top:12px;  }  

.sub_inner_top							{padding:0 10px 30px 10px; font-size:1.15em;}
.sub_inner_top span					{display:inline;  } 
}
 

 
 


 

/* MAP  ================================================================================== */ 
.map_box #map_canvas				{position:relative; width:100%; aspect-ratio: 2 / 1;border:1px solid #dfdfdf;}
.map_box ul									{overflow:hidden; padding:30px 10px;  border-bottom:1px solid #ddd;display: grid; grid-template-columns: 60% auto; gap: 20px 20px; }
.map_box ul li								{  display: grid; grid-template-columns:100px auto; gap:10px; } 
.map_box .txt01							{ font-weight:600;color:var(--color1);  }
.map_box .txt02							{padding-top:5px; }
.map_box i										{background:var(--color1); color:#fff; width:40px; line-height:40px; border-radius:100%; text-align:center; cursor:auto; margin-right:10px; font-size:0.8em;}

.mapoverlay									{position:relative;margin-left:5px ;   bottom:60px;border-radius:3px;padding:12px 14px;border: 1px solid #333;background:#fff;text-align:center;  }
.mapoverlay::after							{position:absolute;content:'';left:50%;bottom:-16px;width:16px;height:16px; background:url('../img/sub/map_localimg.png') no-repeat;}
.mapoverlay .title							{ color:#000; font-size:16px;font-weight:bold;}
.mapoverlay .title span					{font-weight:bold; box-shadow: inset 0 -5px 0 #ffd940; padding:0 1px; color:#000;}
.mapoverlay .add							{display:block; color:#666; font-size:14px;    word-wrap:break-word;  }

 
@media screen and (max-width:1024px) {  
	.map_box ul							    	{padding:20px 0;  grid-template-columns: repeat(1, 1fr); gap: 10px; }
	.map_box ul li						    	{   font-size:0.95em;grid-template-columns:95px auto;  }
	.map_box i								    	{width:33px; line-height:33px; font-size:0.7em;}
    .map_box .txt02							{padding-top:3px; }
} 
@media screen and (max-width:800px) {  
	.map_box #map_canvas			{  aspect-ratio: 2 / 1.5; } 
} 
@media screen and (max-width:480px) {   
	.map_box #map_canvas			{  aspect-ratio: 2 / 1.7;} 
	.mapoverlay .title						{  font-size:15px;} 
	.mapoverlay .add						{  font-size:12px;    }
}

/* MAP  ================================================================================== */
 

 

/* 성과통계 ================================================================================== */ 

@property --value { syntax: "<number>"; inherits: true; initial-value: 0; }
.overview01_topbox .animate{ animation: fill 1s ease-out forwards;  }
@keyframes fill{ from{ --value:0; } }

.overview01_topbox                        {position:relative; display:flex; gap:3em; margin-bottom:40px;  }
.overview01_topbox .item01          {flex:1;  display:grid; align-items:center;  }
.overview01_topbox .item02          {flex:4;  display:flex;    }
.overview01_topbox .item02 li      {flex:1; }
.overview01_topbox .item02 li a      {display:block;  padding:20px;  border-radius:1em  ;   }
.overview01_topbox .item02 li.on a      {  border:1px solid #ddd;  background:#f1f6fb;  box-shadow:0 3px 10px 0 rgba(0,0,0,0.06);}

.overview01_contbox                       {  padding:25px; border-radius:1em;  border:1px solid #ddd; box-shadow:0 3px 12px 0 rgba(0,0,0,0.08);}
.overview01_contbox .graph_tit     {text-align:center;  font-size:1.3em; font-weight:700; margin-bottom:30px; }
.overview01_contbox .graph_tit b     { display:inline-block; background:var(--color1); color:#fff;  font-weight:700; padding:10px 30px;border-radius:50px; min-width:150px;  }

.total_radial01					                {width:94%; aspect-ratio: 1; position: relative; display: grid; place-items: center; border-radius: 50%;  box-shadow:0 0 15px 0 rgba(0,0,0,0.1);
      --value: 0;                 /* 0~100 */ 
      --thickness: -40px;          /* 두께 */
      --fg: var(--graph1);              /* 진행 색 */ 
 }
 
/* 진행 원형(도넛) */
.total_radial01::before                     { content:""; position:absolute; inset:0; border-radius:50%; transform: rotate(0deg); /* 12시 방향에서 시작 */ background: conic-gradient(var(--fg) calc(var(--value)*1%), #ddd 0); /* 가운데를 뚫어서 도넛 모양 만들기 */ -webkit-mask: radial-gradient( farthest-side, transparent calc(50% - var(--thickness)), #000 calc(50% - var(--thickness) + 1px) ); mask: radial-gradient( farthest-side, transparent calc(50% - var(--thickness)), #000 calc(50% - var(--thickness) + 1px) ); }
 
.total_radial01 .label			               { text-align:center; line-height:1.2;  font-size:1.2em; font-weight:700; color:#111; font-family: 'Paperlogy';  }
.total_radial01 .label .point		       { font-size:2.1em; font-weight:800; color:var(--graph1); font-family: 'Paperlogy'; letter-spacing:0; }
.total_radial01 .label .point span    { font-size:0.65em;  font-family: 'Paperlogy'; }
  
.total_radial02					                {width:70%; aspect-ratio: 1; position: relative; display: grid; place-items: center; margin:auto; border-radius: 50%;  box-shadow:0 0 12px 0 rgba(0,0,0,0.1);
      --value: 0;                 /* 0~100 */ 
      --thickness: -22px;          /* 두께 */
      --fg:var(--graph2);              /* 진행 색 */ 
 } 
/* 진행 원형(도넛) */
.total_radial02::before                 { content:""; position:absolute; inset:0; border-radius:50%; transform: rotate(0deg); /* 12시 방향에서 시작 */ background: conic-gradient(var(--fg) calc(var(--value)*1%),  #ddd 0); /* 가운데를 뚫어서 도넛 모양 만들기 */ -webkit-mask: radial-gradient( farthest-side, transparent calc(50% - var(--thickness)), #000 calc(50% - var(--thickness) + 1px) ); mask: radial-gradient( farthest-side, transparent calc(50% - var(--thickness)), #000 calc(50% - var(--thickness) + 1px) ); }
 
.total_radial02 .label			            { text-align:center; line-height:1.2; font-size:1.05em;  font-weight:700; color:#777; font-family: 'Paperlogy';} 
.total_radial02 .label .point		    { font-size:1.65em; font-weight:700; color:#111; font-family: 'Paperlogy'; letter-spacing:0; }
.total_radial02 .label .point span{ font-size:0.65em;  font-family: 'Paperlogy'; }


.overview01_topbox .item02 li .list_box       {position:relative;   margin-top:30px;  background:#fff; border:1px solid #ddd; border-radius:10px; padding:1em; display: flex; flex-direction: column;  justify-content:center;  align-items:center; }
.overview01_topbox .item02 li .list_box::before       {position:absolute; content:''; left:50%; top:-30px; width:1px; height:30px; background:#ddd; }  
.overview01_topbox .item02 li .list_box::after          {position:absolute; content:''; left:calc(50% - 4px); top:-5px; width:9px; height:9px; border-radius:10px;background:#aaa; }  
.overview01_topbox .item02 li .list_box div            {   }

.overview01_topbox .item02 li .list_box p       {position:relative; font-size:0.95em; padding-left:5px; line-height:1.3; }
.overview01_topbox .item02 li .list_box p::before       { position:absolute; content:''; left:-5px; top:7px; width:3px; height:3px; background:#666;}
.overview01_topbox .item02 li .list_box p b     {color:#222; }
.overview01_topbox .item02 li .list_box p + p       {margin-top:2px; }


@media screen and (max-width:1200px) {  
    .overview01_topbox                        { gap:2em;   }
    .total_radial01					                {width:100%;  --thickness: -35px;  } 
    .total_radial02					                {width:80%; --thickness: -20px;  max-width:150px; }
}
@media screen and (max-width:1024px) {  
    .overview01_topbox                        { gap:20px;  display: grid; grid-template-columns:repeat(1, 1fr);  } 
    .total_radial01					                {width:200px;  --thickness: -32px; margin:auto;  } 
    .overview01_topbox .item02 li a      {  padding:1em;   }
}
@media screen and (max-width:768px) {      
    .overview01_contbox                       {  padding:20px;  }
    .overview01_contbox .graph_tit     {  font-size:1.25em;  margin-bottom:20px; }

    .overview01_topbox .item02 li a      {  padding:0.7em;   }
    .total_radial01					                    {width:170px;  --thickness: -28px;  } 
    .total_radial01 .label			                {   font-size:1.1em; }
    .total_radial02					                {width:100%; --thickness: -18px; }
    .total_radial02 .label			                { font-size:1em; }
    .total_radial02 .label .point		        { font-size:1.5em; }  
}
@media screen and (max-width:580px) {   
    .total_radial01					                { width:150px; --thickness: -26px;  }  
    .total_radial02					                { --thickness: -15px; }
    .total_radial02 .label			                { font-size:0.9em; }
    .overview01_topbox .item02              { display:grid; grid-template-columns:repeat(1, 1fr);    }  
    .overview01_topbox .item02 li a      {display: grid; grid-template-columns:90px auto; gap:20px;   }
    .overview01_topbox .item02 li .list_box       { margin-top:0;  }
    .overview01_topbox .item02 li .list_box::before       {  left:-20px; top:50%; width:20px; height:1px;  }  
    .overview01_topbox .item02 li .list_box::after          {  top:calc(50% - 3px); left:-4px; width:7px; height:7px;  }  
}

@media screen and (max-width:480px) {  
    .total_radial01					                {width:140px; --thickness: -24px;  } 
    .total_radial01 .label			                {   font-size:1.05em; }
}

/* 성과통계 ================================================================================== */



 




/* 인트로 ================================================================================== */

.intro_wrap                                            {position:relative; text-align:center; width:100%;height:100vh; background:url('../img/sub/intro_bg01.jpg') no-repeat center 0; background-size:cover; display: flex; flex-direction: column; justify-content:center; align-items:center; }
.intro_wrap .inner                                  {position:relative; overflow:hidden; width:90%; max-width:1150px;  background:rgb(255,255,255,0.6); padding:100px 60px; border-radius:2.2em;  box-shadow:rgb(0 0 0 / 15%) 2px 3px 40px ; backdrop-filter: blur(20px);   -webkit-backdrop-filter: blur(20px);  }

.intro_wrap .inner::before                      {position:absolute; content:''; left:1px; top:1px; width:100%;height:100%;border-radius:2.2em;  box-shadow: 0 0 2px 2px rgb(255,255,255, 0.23) inset; pointer-events: none;  }

.intro_wrap .inner .box                        {max-width:800px; margin:auto;}
.intro_wrap .inner .logo                        { padding-bottom:40px; }
.intro_wrap .inner .txt                          {border-top:1px solid var(--color1); padding:50px 0 70px 0; color:var(--color1);  font-family: 'Paperlogy'; font-size:1.4em; font-weight:600; line-height:1.45; letter-spacing:0;  word-break:keep-all; }
.intro_wrap .inner .txt b                       { font-weight:800; font-size:1.1em;}
.intro_wrap .inner .btn                        { z-index:1111; }
.intro_wrap .inner .btn a                       {display:inline-block;  background:var(--color1); color:#fff;  font-family: 'Paperlogy'; font-size:1.2em; font-weight:600; padding:22px 35px 22px 40px; line-height:1.2; border-radius:50px; }
.intro_wrap .inner .btn a i                    {margin-left:15px;font-size:1.1em; }
.intro_wrap .inner .btn a b                    { font-weight:600;}
.intro_wrap .inner .btn a:hover                       { background:#111; box-shadow:rgb(0 0 0 / 10%) 2px 3px 20px ; }


@media screen and (max-width:1024px) {  
    .intro_wrap .inner                                  { padding:70px 60px;  }
    .intro_wrap .inner .logo img                { width:65%;}
    .intro_wrap .inner .txt                          { font-size:1.35em;   }
}
@media screen and (max-width:768px) {   
    .intro_wrap .inner                                  { padding:60px 50px;  }
    .intro_wrap .inner .logo                        { padding-bottom:30px; }
    .intro_wrap .inner .logo img                { width:70%;}
    .intro_wrap .inner .txt                          {padding:40px 0 50px 0;   font-size:1.3em;   }
    .intro_wrap .inner .btn a                       { font-size:1.15em;  padding:18px 30px 18px 35px;    }
}
@media screen and (max-width:580px) {   
    .intro_wrap .inner                                  { padding:  50px 40px;  }
    .intro_wrap .inner .logo                        { padding-bottom:20px; }
    .intro_wrap .inner .logo img                { width:80%;}
    .intro_wrap .inner .txt                          {padding:30px 0 40px 0;   font-size:1.15em;   }
    .intro_wrap .inner .btn a                       { font-size:1.1em;  padding:16px 20px 16px 25px;    }
    .intro_wrap .inner .btn a b                    { display:none; }
    .intro_wrap .inner .btn a i                    {margin-left:10px;font-size:1em; }
}


/* 인트로 ================================================================================== */