@charset "utf-8";

@keyframes slide-up {
	from	{opacity:0; transform: translateY(80px);}
	to		{opacity:1.0; transform: translateY(0);}
}

/* VISUAL  ================================================================================== */
.main_container                            { padding: 0 0 0 0; }
.main_visual .bxslider                   { visibility: hidden; }
.main_visual .mvideo_box           { position: relative; width: 100%; aspect-ratio: 16/9; padding: 0; margin: 0; }

.main_visual                                  { position: relative; top: 0; left: 0; overflow: hidden; }
.main_visual_item                        { display: table; height:510px; }
.main_visual .bg                           { overflow: hidden; position: absolute; width: 100%; height: 100%; top: 0; left: 0; filter: brightness(0.85); animation: imgScale 3s both; }
.visual_txt                                      { position: absolute; width: 100%; top: 48%; z-index: 100; color: #fff; animation: slide-up 1.3s cubic-bezier(0.3, 0.2, 0, 1) forwards; }
.visual_txt .web_size                    {padding-left:60px; text-align: left; }
.visual_txt .txt01                           { font-family: "Paperlogy"; font-weight: 600; font-size:2.6em; line-height: 1.2; margin-bottom: 0.2em; letter-spacing: -1px; color:#fff; text-shadow: 3px 3px 5px rgba(0, 0, 0, 0.4); transition: all 0.3s ease; }
.visual_txt .txt01 b                        {font-weight: 800; color:#00ffff; }
.visual_txt .txt02                           {  font-weight: 600; font-size:1.4em;  line-height: 1.35; text-shadow: 3px 3px 5px rgba(0, 0, 0, 0.4); padding-top:5px;  transition: all 0.3s ease; }
 

.visual_txt .visual_search                  {position:relative; text-align:left; margin-top:40px;margin-left:-14px; width:565px;height:81px; border:3px solid #2171e4; border-radius:50px; background:#fff; padding:10px; } 
.visual_txt .visual_search input[type="text"]{position:relative;font-size:1.4em;  font-family: 'Paperlogy';font-weight:600; width:calc(100% - 60px); height:56px; padding: 0 0 0 30px; border:0; border-radius:50px; transition:all 0.3s ease; background:#fff; }
.visual_txt .visual_search input[type="text"]::placeholder{ color:#1d7dee; font-size:0.95em; }
.visual_txt .visual_search .btn_search{position:absolute; right:10px; top:10px; width:55px; height:55px; color:#fff; font-size:1.45em; background: var(--color1); border-radius:50px;  cursor:pointer;} 

.visual_txt .visual_search input[type="text"]:hover, 
.visual_txt .visual_search input[type="text"]:focus, 
.visual_txt .visual_search input[type="text"]:active{ background-color:#fff; color:var(--color1); text-align:left;}
.visual_txt .visual_search input[type="text"]:hover::placeholder, 
.visual_txt .visual_search input[type="text"]:focus::placeholder, 
.visual_txt .visual_search input[type="text"]:active::placeholder{color:#ddd;  }
.visual_txt .visual_search input[type="text"]:hover + .btn_search, 
.visual_txt .visual_search input[type="text"]:focus + .btn_search, 
.visual_txt .visual_search input[type="text"]:active + .btn_search{ }
 .visual_txt .visual_search:hover .btn_search{  } 


 
@media screen and (max-width: 1400px) {
    .main_visual_item                        {   height: 0 !important; padding-top:39%; } 
    .visual_txt .txt01                           {  font-size: var(--65px);  } 
    .visual_txt .txt02                           { font-size: var(--34px); }  
    .visual_txt .visual_search                  { margin-top:35px;margin-left:-10px; width:45%;height:70px; padding:4px;}
    .visual_txt .visual_search input[type="text"]{ font-size:1.25em;height:46px;  padding-left:25px; width:calc(100% - 50px); }
    .visual_txt .visual_search .btn_search             {   width:45px; height:45px; font-size:1.2em;  }
}
@media screen and (max-width: 1200px) {
    .visual_txt .visual_search                  {  width:42%;height:64px;  }
    .visual_txt .visual_search input[type="text"]{ font-size:1.2em;height:46px;  }
    .visual_txt .visual_search .btn_search             {  top:9px;  width:41px; height:41px; font-size:1.2em;  }
}
@media screen and (max-width: 1024px) {  
    .visual_txt                                          {  top: 42%; }
    .visual_txt .web_size                        {padding-left:40px; }
    .visual_txt .visual_search                  { margin-top:30px; height:60px;width:50%;  }
    .visual_txt .visual_search input[type="text"]{   height:40px;padding-left:25px; width:calc(100% - 45px); }
    .visual_txt .visual_search .btn_search             {  right:8px; top:8px;   width:37px; height:37px;    }
} 
@media screen and (max-width: 768px) {
    .main_visual_item                        { display: block; height:260px !important; padding-top: initial; }  
    .visual_txt .web_size                    {padding-left:30px;  }
    .visual_txt .txt01                           {  font-size: var(--82px);  } 
    .visual_txt .txt02                           { font-size: var(--44px); }  
    .visual_txt .visual_search                  {  margin:28px auto 0 auto;  width:55%;height:54px; }
    .visual_txt .visual_search input[type="text"]{ font-size:1.2em;  padding-left:23px;   }
    .visual_txt .visual_search .btn_search             {  right:7px; top:7px;   width:34px; height:34px;   }
}
@media screen and (max-width: 600px) {
    .main_visual_item                        { height:250px !important; }  
    .visual_txt .web_size                    {padding-left:25px;  }
    .visual_txt .txt01                           {  font-size: var(--94px);  } 
    .visual_txt .txt02                           { font-size: var(--50px); }  

    .visual_txt .visual_search                  { margin-top:25px; height:50px;width:60%; min-width:300px;  }
    .visual_txt .visual_search input[type="text"]{ font-size:1.1em;height:35px;padding-left:20px; width:calc(100% - 40px); }
    .visual_txt .visual_search .btn_search             {  right:6px; top:6px;   width:31px; height:31px; font-size:1.05em;  }
}
@media screen and (max-width: 460px) {
    .main_visual_item                        { height:220px !important; } 
    .visual_txt .txt01                           {  font-size: var(--100px);  } 
    .visual_txt .txt02                           { font-size: var(--55px); }  
    .visual_txt .visual_search input[type="text"]{ font-size:1.05em;}
}
/* MAIN_CONT  ================================================================================== */





/* main_number  ================================================================================== */
.main_number                          {position: relative;padding:30px 0; transition: all 0.3s ease; }
.main_number ul                      { display: grid; grid-template-columns:repeat(5, 1fr);   text-align:center; } 
.main_number ul li                   {   }
.main_number ul li + li            {   border-left:1px solid #eaeaea; }
.main_number ul li .box          {  color:#272727;  display: flex; gap:20px; justify-content:center; align-items:center;  line-height: 1;  transition: all 0.3s ease; }
.main_number ul li figure        {  width:55px;  transition: all 0.3s ease; }
.main_number ul li figure img{ width:55px;  }
.main_number ul .txt               { display:block; text-align:left;   }
.main_number ul span             { display:block;  font-size: 1.025em;  font-family: 'Paperlogy';font-weight:700; padding-bottom:5px; }
.main_number ul p                   { font-size:0.95em; font-family: 'Paperlogy';font-weight:700; padding:5px 0; }
.main_number ul em                { position: relative; display: inline-block;font-size:1.7em; color:var(--color1); font-family: 'Paperlogy';font-weight:800;  letter-spacing: -1px; margin-right: 5px;  } 

   
@media screen and (max-width: 1024px) {   
    .main_number                          { padding:25px 0;  }   
    .main_number ul li .box          {  font-size:0.95em;  flex-direction: column;  gap:0;  } 
    .main_number ul .txt               {  text-align:center;   }
    .main_number ul li figure img{ width:50px;  }
    .main_number ul em                {  font-size:1.65em; }
} 
@media screen and (max-width:768px) { 
    .main_number ul li figure img{ width:40px;  }
    .main_number ul li .box             {  font-size:0.9em;    } 
    .main_number ul em                {  font-size:1.6em; }
}
@media screen and (max-width:580px) {   
    .main_number                          { padding:20px 0;  }   
    .main_number ul li .box             {  font-size:0.8em;    }
    .main_number ul li figure img{ width:40px;  } 
    .main_number ul em                {  font-size:1.45em; }
}
@media screen and (max-width:370px) {  
    .main_number ul                      {   grid-template-columns:repeat(3, 1fr);gap:20px 0;    } 
    .main_number ul li:last-child  {   border-right:1px solid #eaeaea; }
}


/* main_number  ================================================================================== */






/* main_info  ================================================================================== */
.main_info                                   {position: relative;padding:60px 10px 80px 10px; background:#f1f5f9; transition: all 0.3s ease; }
.main_info .tit                             { color:var(--color4); font-size:1.9em; font-weight:800; padding-bottom:40px; text-align:center; } 

  @media screen and (max-width: 1300px) {
    .main_info                                   { padding:60px 20px 80px 20px; } 
}
@media screen and (max-width: 1024px) { 
    .main_info                                   { padding:50px 20px 70px 20px; } 
    .main_info .tit                             {  font-size:1.8em;padding-bottom:30px; } 
}
@media screen and (max-width:768px) {
    .main_info .tit                             {  font-size:1.7em;  } 
}
@media screen and (max-width:580px) {
    .main_info                                   { padding:40px 20px; } 
    .main_info .tit                             {  font-size:1.55em;  } 
}



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

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

.main_info_topbox                        {position:relative; display:flex; gap:2.6em;  }
.main_info_topbox .item01          {flex:1; display:grid; align-items:center;  }
.main_info_topbox .item02          {flex:4;  display:flex; gap:1em;   background:#fff;  padding:30px 25px;  border-radius:1.6em;  background:#fff; box-shadow:5px 3px 15px 0 rgba(0,0,0,0.1);  }
.main_info_topbox .item02 li      {flex:1;   }


.main_total_radial01					                {width:94%; aspect-ratio: 1; position: relative; display: grid; place-items: center; border-radius: 50%;  
      --value: 0;                 /* 0~100 */ 
      --thickness: -40px;          /* 두께 */
      --fg: var(--graph1);              /* 진행 색 */ 
 }
 
/* 진행 원형(도넛) */
.main_total_radial01::before                     { content:""; position:absolute; inset:0; border-radius:50%; transform: rotate(0deg); /* 12시 방향에서 시작 */ background: conic-gradient(var(--fg) calc(var(--value)*1%), #d9d9d9 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) ); }
 
.main_total_radial01 .label			               { text-align:center; line-height:1.2;  font-size:1.2em; font-weight:700; color:#111; font-family: 'Paperlogy';  }
.main_total_radial01 .label .point		       { font-size:2.1em; font-weight:800; color:var(--graph1); font-family: 'Paperlogy'; letter-spacing:0; }
.main_total_radial01 .label .point span    { font-size:0.65em;  font-family: 'Paperlogy'; }
 

.main_total_radial02					                {width:70%; aspect-ratio: 1; position: relative; display: grid; place-items: center; margin:auto; border-radius: 50%;   
      --value: 0;                 /* 0~100 */ 
      --thickness: -27px;          /* 두께 */
      --fg:var(--graph2);              /* 진행 색 */ 
 }
 
/* 진행 원형(도넛) */
.main_total_radial02::before                 { content:""; position:absolute; inset:0; border-radius:50%; transform: rotate(0deg); /* 12시 방향에서 시작 */ background: conic-gradient(var(--fg) calc(var(--value)*1%),  #d9d9d9 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) ); }
 
.main_total_radial02 .label			            { text-align:center; line-height:1.2; font-size:1.05em;  font-weight:700; color:#777; font-family: 'Paperlogy';} 
.main_total_radial02 .label .point		    { font-size:1.65em; font-weight:700; color:#111; font-family: 'Paperlogy'; letter-spacing:0; }
.main_total_radial02 .label .point span{ font-size:0.65em;  font-family: 'Paperlogy'; }


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

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


@media screen and (max-width:1200px) {  
    .main_info_topbox                        { gap:2em;   }
    .main_total_radial01					                {width:100%;  --thickness: -35px;  } 
    .main_total_radial02					                {width:80%; --thickness: -20px;  max-width:150px; }
}
@media screen and (max-width:1024px) {  
    .main_info_topbox                        { gap:30px;  display: grid; grid-template-columns:repeat(1, 1fr);  }
    .main_info_topbox .item02          {  gap:1em;  }
    .main_total_radial01					                {width:200px;  --thickness: -32px; margin:auto;  } 
}
@media screen and (max-width:768px) {   
    .main_info_topbox                        { gap:40px;     }
    .main_info_topbox .item02          {  gap:30px;  }

    .main_info_topbox .item02 li .list_box       { margin-top:0;  }
    .main_info_topbox .item02 li .list_box::before       {  left:-20px; top:50%; width:20px; height:1px;  }  
    .main_info_topbox .item02 li .list_box::after          {  top:calc(50% - 3px); left:-4px; width:7px; height:7px;  }  

    .main_total_radial01					                    {width:170px;  --thickness: -28px;  } 
    .main_total_radial01 .label			                {   font-size:1.1em; }
    .main_total_radial02					                    {width:100%; --thickness: -18px; }
    .main_total_radial02 .label			                { font-size:1em; }
    .main_total_radial02 .label .point		        { font-size:1.5em; } 
}
@media screen and (max-width:580px) {   
    .main_info_topbox                                   { gap:30px;     }
    .main_total_radial01					                {width:150px; --thickness: -26px;  } 
    .main_total_radial01 .label			                {   font-size:1.05em; }
    .main_total_radial01 .label .point		       { font-size:1.8em;}
    .main_info_topbox .item02          {  gap:1em;   padding:0;   background:none; box-shadow:initial;  }
}
@media screen and (max-width:480px) {  
    .main_info_topbox                                   { gap:25px;     }
    .main_total_radial01					                {width:130px; --thickness: -22px;  } 
    .main_info_topbox .item02                    {  gap:10px;  font-size:0.85em;  }
    .main_total_radial02					                { --thickness: -13px; }
.main_info_topbox .item02 li .list_box       {display:none; }
}


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

  





.main_info_data                                       {position:relative;   margin-top:50px; padding-top:20px; }
.main_info_data::before                          { position:absolute; top:0; left:calc(50% - 40px); content:''; width:80px; height:3px; background:var(--color1);   }
.main_info_data h4                                 { text-align:center;  }
.main_info_data .inner                           { overflow:hidden; border:3px solid #97a4b6; border-radius:20px;}
  
@media screen and (max-width:1024px) {  
    .main_info_data .inner                           {   border:0;border-radius:0; }
}
@media screen and (max-width:900px) {  
    .main_info_data .inner								{display:block; width:100%; overflow-x:auto;  padding-bottom:20px; -webkit-overflow-scrolling: touch; }  /* 테이블 가로 스크롤  */
    .main_info_data .inner .gtable					{min-width:900px; } 
}

/* main_info  ================================================================================== */






/* main_news_wrap    ================================================================================== */
.main_news_wrap                            {   position: relative; padding:70px 0; display: flex; justify-content: space-between; gap: 70px;   display:none; }
.main_news_wrap .tit                      { color:var(--color4); font-size:2.45em; font-weight:800; padding-bottom:60px; }
.main_news_wrap .item01             { position: relative; flex:1; }
.main_news_wrap .item02             {position: relative; width: 490px; display: flex; flex-direction: column; gap: 1.5em; }
  

.main_news_wrap .item02 .box                      { border-radius:1.2em; background:url('../img/main/main_bn_img01.png') no-repeat right bottom #009ba8;  }
.main_news_wrap .item02 .box a                  {display:block; color:#fff; padding:2.3em 2em; }
.main_news_wrap .item02 .box:last-child      { background:url('../img/main/main_bn_img02.png') no-repeat right bottom #1a2d80; }
.main_news_wrap .item02 .box .txt01           { font-size:1.3em; font-weight:bold;  padding-bottom:15px; }
.main_news_wrap .item02 .box .txt01 i         { position: relative; top:-4px; display:inline-block;  font-size:0.45em; line-height:1.5; margin-left:15px; }
.main_news_wrap .item02 .box .txt01 i::after    {position:absolute; content:''; width:20px; height:20px; border:1px solid #fff; border-radius:50px; left:50%; top:50%; transform:translate(-50%, -50%); }
.main_news_wrap .item02 .box .txt02          { font-size:0.95em;  line-height:1.3; width:55%; word-break:keep-all;  }

 

@media screen and (max-width: 1300px) {
    .main_news_wrap                            { padding:70px 20px; gap: 40px; }
    .main_news_wrap .tit                      {  font-size:2.3em; }
    .main_news_wrap .item02             {  width: 450px; }
    .main_news_wrap .item02 .box a                  { padding:1.8em; }
} 
@media screen and (max-width: 1024px) {
    .main_news_wrap                            { padding:60px 20px;  align-items: center; flex-direction: column;  }
    .main_news_wrap .tit                      {  font-size:2.1em;  padding-bottom:50px; }
    .main_news_wrap .item01             { width: 100%; }
    .main_news_wrap .item02             { width: 100%; display: grid; grid-template-columns:repeat(2, 1fr);  gap:1em; }
    .main_news_wrap .item02 .box                      { border-radius:1em; }
    .main_news_wrap .item02 .box a                  { padding:1.5em; }
} 
@media screen and (max-width:768px) {
    .main_news_wrap                            { padding:50px 20px; }
    .main_news_wrap .tit                      {  font-size:2em;  padding-bottom:40px; }
    .main_news_wrap .item02             { grid-template-columns:repeat(1, 1fr);   }
    .main_news_wrap .item02 .box .txt01           { font-size:1.2em; }
}
@media screen and (max-width:580px) {
    .main_news_wrap .tit                      {  font-size:1.7em; }
    .main_news_wrap .item02 .box                      { background-size:auto 100% !important;  }
    .main_news_wrap .item02 .box .txt01           { font-size:1.15em; }
    .main_news_wrap .item02 .box .txt01 i::after    { width:17px; height:17px;  }
}
 
/* main_news_wrap    ================================================================================== */
 


  



/* FAMSITE    ================================================================================== */
.famsite									{position:relative; padding:30px 0; border-top:1px solid #e5e5e5; background:#fff;}
.famsite ul								{width:calc(100% - 60px); margin:0 auto; text-align:center; }
.famsite ul li							{display:inline-block; line-height:90px; border:1px solid #e5e5e5; margin:1px 5px; text-align:center; }
.famsite .arrow p					{position:absolute; top:calc(50% - 15px); width:30px; height:30px; cursor:pointer;}
.famsite .arrow span				{display:inline-block; border:solid #aaa; border-width:0 2px 2px 0;  padding:5px; margin:10px 0 0 10px;}
.famsite .arrow span:hover	{border-color:#555;}
.famsite .prev							{left:7px; transform: rotate(135deg);}
.famsite .next							{right:7px; transform: rotate(-45deg);}
 
@media screen and (max-width:1024px) {   
	.famsite								{padding:25px 0;} 
}
@media screen and (max-width:768px) {   
	.famsite								{padding:20px 0;} 
}
/* FAMSITE    ================================================================================== */