@charset "EUC-KR";

.effect-wrapper {
	height: auto;
	padding: 200px;
	width:100%;
	overflow:hidden;
}
.effect-box {
	padding: 80px;
	border: 1px solid #4b4b4b;
	border-radius: 20px; 
	background: #232323; 
	box-shadow: 0 0 50px 15px rgba(255, 89, 219, 0.1);
}
.chart {
	display: flex;
	justify-content: space-around;
	align-items: flex-end;
	height: 300px;
	width: 100%;
	max-width: 500px;
	margin: 20px auto;
	padding: 10px;
	border-bottom: 1px dashed #4B4B4B;
}

.bar {
	width: 150px;
	background-color: #B596FF;
	border-radius: 10px 10px 0 0;
	text-align: center;
	color: white;
	transition: height 0.5s ease;
}

.label {
	margin-top: -35px;
	font-size: 2rem;
}

.box {
	display: flex;
	justify-content: center;
	align-items: center;
}

.gragh-title {
	width: 100%;
	font-size: 3.5rem;
	font-weight: bold;
	margin-left: 20px;
}

.canvas_wrap {
	margin-top: 5%;
	position: relative;
	width: 400px;
	height: 400px;
	border-radius: 20px;
	border: 1px solid #4B4B4B;
	padding: 80px;
	background: #232323;
}

.canvas_wrap .percent {
	display: block;
	position: absolute;
	top: 50%;
	left: 50%;
	font-size: 40px;
	color: #59FFC5;
	transform: translate(-50%, -50%);
}

.canvas_wrap .percent::after {
	content: '%';
}

.canvas_wrap canvas {
	width: 100%;
	height: 100%;
}

.canvas_title {
	font-size: 2rem;
	text-align: center;
	margin-top: 30px;
}
.effect-wrap{
/* 	background:url('/images/effect-bg.png') no-repeat; */
/* 	background-size: cover; /* ��� �̹����� ��ҿ� �°� ���� */ 
/*     background-position: center; /* ��� �̹����� ��ġ�� �߾����� ���� */ 
    min-height:500px;
    
    margin-top:20%;
    margin-bottom:10%;
}
.effect-title {
	font-size: 3rem;
	text-align:center;
}
.effect-title ul {
	display:flex;
	justify-content:space-around;
	margin-top: 2%;
	text-align:left;
}
.effect-title ul li {
	font-size: smaller;
	border: 1px solid #4b4b4b30;
	border-radius: 20px;
	margin-bottom: 10px;
	background: #232323;
	height: 300px;
	width:480px;
}
.effect-title ul li img {
	width:8%;
	margin:30px;
}
.effect-title ul li p, 
.effect-title ul li span{
	margin-left:30px;
}
.effect-title ul li span {
	font-size:1.7rem;
	margin-top:10px;
	color:#ffffff60;
}
.gradient-bar-1 {
    width: 100%;
    height: 20px; /* ���� ���� */
    background: linear-gradient(to right, #62cfc9, #8ad5f5); /* �׶��̼� ���� */
    border-radius: 20px 20px 0 0; /* �𼭸� �ձ۰� */
    margin-bottom: 5%;
}
.gradient-bar-2 {
    width: 100%;
    height: 20px; /* ���� ���� */
    background: linear-gradient(to right, #97c0ee, #6271ce); /* �׶��̼� ���� */
    border-radius: 20px 20px 0 0; /* �𼭸� �ձ۰� */
    margin-bottom: 5%;
}
.gradient-bar-3 {
    width: 100%;
    height: 20px; /* ���� ���� */
    background: linear-gradient(to right, #6d38ae, #e280bb); /* �׶��̼� ���� */
    border-radius: 20px 20px 0 0; /* �𼭸� �ձ۰� */
    margin-bottom: 5%;
}
.goadmin-btn {
	text-align: center;
	width: 250px;
	font-size: 1.8rem;
	background: #0C8B81;
	padding: 2rem 3rem;
	border-radius: 20px;
	margin: 0 auto;
	margin-top: 5%;
}
.percent-wrap {
display:flex; 
justify-content:space-around;
font-size:2rem;
color:#ffffff80;
margin-top:5%;
margin-bottom:10%;
}
.percent-tab h3{
font-size:7rem;
color:#FF59DB;
/*background: linear-gradient(195deg, #62cfc9, #8ad5f5, #97c0ee, #6271ce, #6d38ae, #e280bb); /* �׶��̼� ���� */
/*-webkit-background-clip: text; /* �ؽ�Ʈ�� ��� Ŭ�� ���� */
/*-webkit-text-fill-color: transparent; /* �ؽ�Ʈ ������ �����ϰ� ���� */
}

/* Responsive for Tablet */
@media (min-width: 768px) and (max-width: 1024px) {
  /* Section : effect */
  .effect-wrapper {
	padding: 200px 40px;
	width:100%;
  }
  .effect-box {
	padding: 40px;
  }
  .effect-title ul {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-around;
      margin-top: 2%;
      text-align: left;
  }
  .effect-title ul li {
	  width: 48%;
  }
  .effect-title ul li p, .effect-title ul li span {
    padding: 0 20px;
    margin-left: 0;
  }
  .effect-title ul li span {
      display:block;
  }
  .br-del {
	  display:none;
  }
}
@media (max-width: 767px) {
  .effect-wrapper {
	padding: 160px 20px;
	width:100%;
  }
  .chart {
    margin: 0 auto 20px auto;
    padding: 10px;
  }
  .gragh-title {
    font-size: 3.5rem;
    margin-left: 0px;
    text-align:center
  }
  .box {
    flex-wrap: wrap-reverse;
   }
  .effect-box {
	padding: 0 30px 40px 30px;
  }
  .effect-wrap {
    min-height: 400px;
  } 
  .percent-wrap {
    flex-wrap: wrap;
    gap: 20px;
  }
  .percent-tab h3 {
    font-size: 6rem;
  } 
  .effect-title ul {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-around;
      margin-top: 5%;
      text-align: left;
  }
  .gradient-bar-1,.gradient-bar-2,.gradient-bar-3 {
    margin-bottom: 0;
  }
  .effect-title ul li {
	  width: 100%;
	  height: 220px;
  }
  .effect-title ul li p, .effect-title ul li span {
    padding: 0 20px;
    margin-left: 0;
  }
  .effect-title ul li span {
      display:block;
  }
  .br-del {
	  display:none;
  }
}