@charset "utf-8";
/* CSS Document */
@import url(https://fonts.googleapis.com/css?family=Roboto:400,300,100,500);

@-webkit-keyframes showBar1 {
  0% {
    height: 0px;
  }
  100% {
    height: 70%;
  }
}
@-webkit-keyframes showBar2 {
  0% {
    height: 0px;
  }
  100% {
    height: 90%;
  }
}
@-webkit-keyframes showBar3 {
  0% {
    height: 0px;
  }
  100% {
    height: 88%;
  }
}
@-webkit-keyframes showBar4 {
  0% {
    height: 0px;
  }
  100% {
    height: 84%;
  }
}
@-webkit-keyframes showBar5 {
  0% {
    height: 0px;
  }
  100% {
    height: 100%;
  }
}
@-webkit-keyframes showBar6 {
  0% {
    height: 0px;
  }
  100% {
    height: 40%;
  }
}
@-webkit-keyframes showBar7 {
  0% {
    height: 0px;
  }
  100% {
    height: 85%;
  }
}
@-webkit-keyframes showBar8 {
  0% {
    height: 0px;
  }
  100% {
    height: 36%;
  }
}
@-webkit-keyframes showBar9 {
  0% {
    height: 0px;
  }
  100% {
    height: 88%;
  }
}
@-webkit-keyframes showBar10 {
  0% {
    height: 0px;
  }
  100% {
    height: 62%;
  }
}
@-moz-keyframes showBar1 {
  0% {
    height: 0px;
  }
  100% {
    height: 70%;
  }
}
@-moz-keyframes showBar2 {
  0% {
    height: 0px;
  }
  100% {
    height: 90%;
  }
}
@-moz-keyframes showBar3 {
  0% {
    height: 0px;
  }
  100% {
    height: 88%;
  }
}
@-moz-keyframes showBar4 {
  0% {
    height: 0px;
  }
  100% {
    height: 84%;
  }
}
@-moz-keyframes showBar5 {
  0% {
    height: 0px;
  }
  100% {
    height: 100%;
  }
}
@-moz-keyframes showBar6 {
  0% {
    height: 0px;
  }
  100% {
    height: 40%;
  }
}
@-moz-keyframes showBar7 {
  0% {
    height: 0px;
  }
  100% {
    height: 85%;
  }
}
@-moz-keyframes showBar8 {
  0% {
    height: 0px;
  }
  100% {
    height: 36%;
  }
}
@-moz-keyframes showBar9 {
  0% {
    height: 0px;
  }
  100% {
    height: 88%;
  }
}
@-moz-keyframes showBar10 {
  0% {
    height: 0px;
  }
  100% {
    height: 62%;
  }
}
@keyframes showBar1 {
  0% {
    height: 0px;
  }
  100% {
    height: 70%;
  }
}
@keyframes showBar2 {
  0% {
    height: 0px;
  }
  100% {
    height: 90%;
  }
}
@keyframes showBar3 {
  0% {
    height: 0px;
  }
  100% {
    height: 88%;
  }
}
@keyframes showBar4 {
  0% {
    height: 0px;
  }
  100% {
    height: 84%;
  }
}
@keyframes showBar5 {
  0% {
    height: 0px;
  }
  100% {
    height: 100%;
  }
}
@keyframes showBar6 {
  0% {
    height: 0px;
  }
  100% {
    height: 40%;
  }
}
@keyframes showBar7 {
  0% {
    height: 0px;
  }
  100% {
    height: 85%;
  }
}
@keyframes showBar8 {
  0% {
    height: 0px;
  }
  100% {
    height: 36%;
  }
}
@keyframes showBar9 {
  0% {
    height: 0px;
  }
  100% {
    height: 88%;
  }
}
@keyframes showBar10 {
  0% {
    height: 0px;
  }
  100% {
    height: 62%;
  }
}

.graph-cont{
  position: relative;
}
.bar{
  height: 10px;
  width: 80%;
  max-width: 370px;
  line-height: 10px;
  font-size: 16px;
  color: white;
  padding: 0 0 0 10px;
  position: relative;
}
.bar::before{
  content: '';
  width: 80%;
  position: absolute;
  left: 0;
  height: 1px;
  top: 5px;
  z-index: -2;
  background: #ecf0f1;
}
.bar::after{
  content: '';
  background: #c84088;
  height: 10px;
  transition: 0.7s;
  display: block;
  width: 100%;
  -webkit-animation: bar-before 1 10s;
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
  border-radius: 5px;
}
.bar1 { margin-bottom: 10px; }
.bar1::after{
  max-width: 43%;
  background: #81B71C;
}
.bar2::after{
  max-width: 23%;
  background: #006458;
}
.bar3::after{
  max-width: 14%;
  background: #81B71C;
}
.bar4::after{
  max-width: 3%;
  background: #006458;
}
.bar5::after{
  max-width: 12%;
  background: #81B71C;
}
.bar6::after{
  max-width: 3%;
  background: #006458;
}
.bar7::after{
  max-width: 14%;
  background: #81B71C;
}
.bar8::after{
  max-width: 4%;
  background: #006458;
}
.bar9::after{
  max-width: 20%;
  background: #81B71C;
}
.bar10::after{
  max-width: 6%;
  background: #006458;
}
@-webkit-keyframes bar-before{
  0%{
    width: 0px;
  }
  100%{
    width: 100%;
  }
}

code {
  padding: 5px;
  background: #ecf0f1;
  display: block;
}
pre{
  padding: 0;
  margin: 0;
}
.advocacy,
.trend,
.early,
.influencer,
.recommender { margin-bottom: 5px; }
.bar_box { margin-bottom: 8px; }
main#content .block_2 .bar_wrap { width: 100%; }
main#content .block_2 .bar_wrap p:first-child {
  font-size: 16px;
  margin-right: 10px;
}
main#content .block_2 .graph-cont .bar_number {
  font-size: 24px;
  position: absolute;
  right: 0;
  color: #102a4b;
  margin: 0;
}
main#content .block_2 .bar_txt { font-size: 14px; }

@media only screen and (max-width: 767px){
  main#content .block_2 .bar_wrap { width: 80%; }
  main#content .block_2 .bar_txt { font-size: 10px; }
  main#content .block_2 .graph-cont .bar_number {
    font-size: 18px;
    bottom: 15px;
  }
}

.chart-wrap {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-evenly;
  gap: 3rem;
}
.chart {
  display: inline-block;
  margin: 0 auto;
  width: 300px;
  height: 300px;
  text-align: center;
  position: relative;
}
.chart .male,
.chart .woman {
  position: absolute;
  top: 131px;
  font-size: 18px!important;
  color: #fff!important;
  z-index: 2;
  line-height: 1.2;
}
.chart .male { left: 30px; }
.chart .woman { right:  30px; }

.chart1 .chart-txt5 {
  position: absolute;
  top: 90px;
  right: 30px;
  font-size: 18px!important;
  color: #fff!important;
  z-index: 2;
  line-height: 1.2;
  margin: 0!important;
}
.chart1 .chart-txt4 {
  position: absolute;
  top: 95px;
  left: 25px;
  font-size: 18px!important;
  color: #fff!important;
  z-index: 2;
  line-height: 1.2;
  margin: 0!important;
}
.chart1 .chart-txt3 {
  position: absolute;
  bottom: 30px;
  font-size: 18px!important;
  color: black!important;
  z-index: 2;
  line-height: 1.2;
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
  width: 100%;
}

.circle {
  display: inline-block;
  transform: rotate(-90deg);
}
.circle .type {
  fill: transparent;
  stroke-width: 100;
}
svg {
  overflow: hidden;
  vertical-align: middle;
}
.circle .type1 { stroke: #c84088; }
.circle .type2 { stroke: #102a4b; }
.circle .type3 { stroke: #81B71C; }
.circle .type4 { stroke: #ccc; }
.circle .type5 { stroke: #006458; }

.typeA1{animation:circleA1 6s forwards;}
@keyframes circleA1 {
  0%{stroke-dasharray:0 630;}
  100%{stroke-dasharray:320 630;}
}

.typeA2{animation:circleA2 6s forwards;}
@keyframes circleA2 {
  0%{stroke-dasharray:0 630;}
  100%{stroke-dasharray:630 630;}
}

.typeA3{animation:circleA3 6s forwards;}
@keyframes circleA3 {
  0%{stroke-dasharray:0 630;}
  100%{stroke-dasharray:180 630;}
}

.typeA4{animation:circleA4 6s forwards;}
@keyframes circleA4 {
  0%{stroke-dasharray:0 630;}
  100%{stroke-dasharray:410 630;}
}

.typeA5{animation:circleA5 6s forwards;}
@keyframes circleA5 {
  0%{stroke-dasharray:0 630;}
  100%{stroke-dasharray:630 630;}
}

@keyframes circle{
  0%{stroke-dasharray:0 630;}
  100%{stroke-dasharray:630 630;}
}