/* Infographic No1, No2, No3 */
.infographicBox { position:relative; overflow:hidden;  }
.infographicBox.no2 { color:#000e60; }
.infographicBox img { width:100%; height:auto; }

.infographicBox .lines { position:absolute; top:0; left:0; width:100%; height:100%; }
.infographicBox .lines > div { height:120%; width:1px; position:absolute; top:-10%; left:50%; }
.infographicBox .lines > div > div { height:26.5%; width:1px; position:absolute; top:0; left:0; border-left:dotted 2px #ddd; } 

.infographicBox[data-count="7"] .dots > div:nth-child(2) { transform:rotate(calc(360deg / 7)); }
.infographicBox[data-count="7"] .dots > div:nth-child(3) { transform:rotate(calc((360deg / 7) * 2)); }
.infographicBox[data-count="7"] .dots > div:nth-child(4) { transform:rotate(calc((360deg / 7) * 3)); }
.infographicBox[data-count="7"] .dots > div:nth-child(5) { transform:rotate(calc((360deg / 7) * 4)); }
.infographicBox[data-count="7"] .dots > div:nth-child(6) { transform:rotate(calc((360deg / 7) * 5)); }
.infographicBox[data-count="7"] .dots > div:nth-child(7) { transform:rotate(calc((360deg / 7) * 6)); }

.infographicBox[data-count="6"] .dots > div:nth-child(2) { transform:rotate(calc(360deg / 6)); }
.infographicBox[data-count="6"] .dots > div:nth-child(3) { transform:rotate(calc((360deg / 6) * 2)); }
.infographicBox[data-count="6"] .dots > div:nth-child(4) { transform:rotate(calc((360deg / 6) * 3)); }
.infographicBox[data-count="6"] .dots > div:nth-child(5) { transform:rotate(calc((360deg / 6) * 4)); }
.infographicBox[data-count="6"] .dots > div:nth-child(6) { transform:rotate(calc((360deg / 6) * 5)); }

.infographicBox[data-count="5"] .dots > div:nth-child(2) { transform:rotate(calc(360deg / 5)); }
.infographicBox[data-count="5"] .dots > div:nth-child(3) { transform:rotate(calc((360deg / 5) * 2)); }
.infographicBox[data-count="5"] .dots > div:nth-child(4) { transform:rotate(calc((360deg / 5) * 3)); }
.infographicBox[data-count="5"] .dots > div:nth-child(5) { transform:rotate(calc((360deg / 5) * 4)); }

.infographicBox[data-count="4"] .dots > div:nth-child(2) { transform:rotate(calc(360deg / 4)); }
.infographicBox[data-count="4"] .dots > div:nth-child(3) { transform:rotate(calc((360deg / 4) * 2)); }
.infographicBox[data-count="4"] .dots > div:nth-child(4) { transform:rotate(calc((360deg / 4) * 3)); }

.infographicBox .items.text > div { position:absolute; min-height:min(4vw,54px); display:flex; flex-direction:column; justify-content:center; }
.infographicBox .items.text > div > div {  margin:-5px -20px; padding:5px 20px; border-radius:20px; background-color:#fff; font-size:min(2.2vw,22px); font-weight:bolder; white-space:nowrap; line-height:1.1; position:relative; }

.infographicBox .titleBox { text-align:center; position:absolute; top:0; left:0; width:100%; height:100%; display:flex; flex-direction:column; justify-content:center; }
.infographicBox .titleBox h3 { margin-bottom:0; color:#000e60; line-height:1; }
.infographicBox .titleBox p { color:#000e60; font-weight:700; line-height: 1.2; margin-bottom:0; }

@media (max-width:767px) {
    .infographicBox .titleBox { transform:scale(0.7); }
    .infographicBox .items.text > div > div { margin:-3px -5px; padding:3px 5px; border-radius:10px; }
    .infographicBox.no2 .items.text > div > div { font-size: min(3.6vw, 24px); }
}

.infographicBox[data-count="16"] .lines > div:nth-child(2) { transform:rotate(29deg); }
.infographicBox[data-count="16"] .lines > div:nth-child(3) { transform:rotate(53deg); }
.infographicBox[data-count="16"] .lines > div:nth-child(4) { transform:rotate(73deg); }
.infographicBox[data-count="16"] .lines > div:nth-child(5) { transform:rotate(90deg); }
.infographicBox[data-count="16"] .lines > div:nth-child(6) { transform:rotate(107deg); }
.infographicBox[data-count="16"] .lines > div:nth-child(7) { transform:rotate(127deg); }
.infographicBox[data-count="16"] .lines > div:nth-child(8) { transform:rotate(152deg); }
.infographicBox[data-count="16"] .lines > div:nth-child(9) { transform:rotate(180deg); }
.infographicBox[data-count="16"] .lines > div:nth-child(10) { transform:rotate(210deg); }
.infographicBox[data-count="16"] .lines > div:nth-child(11) { transform:rotate(234deg); }
.infographicBox[data-count="16"] .lines > div:nth-child(12) { transform:rotate(253deg); }
.infographicBox[data-count="16"] .lines > div:nth-child(13) { transform:rotate(270deg); }
.infographicBox[data-count="16"] .lines > div:nth-child(14) { transform:rotate(287deg); }
.infographicBox[data-count="16"] .lines > div:nth-child(15) { transform:rotate(306deg); }
.infographicBox[data-count="16"] .lines > div:nth-child(16) { transform:rotate(330deg); }
.infographicBox[data-count="16"] .items.text > div:nth-child(1) { top:0; left:50%; transform:translateX(-50%); }
.infographicBox[data-count="16"] .items.text > div:nth-child(2) { top:1.5%; left:63%; }
.infographicBox[data-count="16"] .items.text > div:nth-child(3) { top:9%; left:79%; }
.infographicBox[data-count="16"] .items.text > div:nth-child(4) { top:26%; right:2.5%; }
.infographicBox[data-count="16"] .items.text > div:nth-child(5) { top:46%; right:0%; }
.infographicBox[data-count="16"] .items.text > div:nth-child(6) { top:65%; right:2.5%; }
.infographicBox[data-count="16"] .items.text > div:nth-child(7) { top:82%; left:79%; }
.infographicBox[data-count="16"] .items.text > div:nth-child(8) { bottom:1.5%; left:62%; }
.infographicBox[data-count="16"] .items.text > div:nth-child(9) { bottom:0; left:50%; transform:translateX(-50%); }
.infographicBox[data-count="16"] .items.text > div:nth-child(10) { bottom:1.5%; left:29%; }
.infographicBox[data-count="16"] .items.text > div:nth-child(11) { top:82%; left:12%; }
.infographicBox[data-count="16"] .items.text > div:nth-child(12) { top:65%; left:2.5%; }
.infographicBox[data-count="16"] .items.text > div:nth-child(13) { top:46%; left:0%; }
.infographicBox[data-count="16"] .items.text > div:nth-child(14) { top:26%; left:2.5%; }
.infographicBox[data-count="16"] .items.text > div:nth-child(15) { top:10%; left:14%; }
.infographicBox[data-count="16"] .items.text > div:nth-child(16) { top:1.5%; left:28%; }
.infographicBox[data-count="16"] .items.text > div:nth-child(8) > div::after,
.infographicBox[data-count="16"] .items.text > div:nth-child(9) > div::after,
.infographicBox[data-count="16"] .items.text > div:nth-child(10) > div::after { content:''; display:block; width:150%; height:200px; background-color:#fff; position:absolute; bottom:-199px; left:-25%; }
.infographicBox[data-count="16"] .items.text > div:nth-child(1) > div::before,
.infographicBox[data-count="16"] .items.text > div:nth-child(2) > div::before,
.infographicBox[data-count="16"] .items.text > div:nth-child(16) > div::before { content:''; display:block; width:150%; height:200px; background-color:#fff; position:absolute; left:-25%; top:-199px; }

.infographicBox[data-count="15"] .lines > div:nth-child(2) { transform:rotate(30.5deg); }
.infographicBox[data-count="15"] .lines > div:nth-child(3) { transform:rotate(56deg); }
.infographicBox[data-count="15"] .lines > div:nth-child(4) { transform:rotate(77.5deg); }
.infographicBox[data-count="15"] .lines > div:nth-child(5) { transform:rotate(96deg); }
.infographicBox[data-count="15"] .lines > div:nth-child(6) { transform:rotate(114.5deg); }
.infographicBox[data-count="15"] .lines > div:nth-child(7) { transform:rotate(139deg); }
.infographicBox[data-count="15"] .lines > div:nth-child(8) { transform:rotate(162.5deg); }
.infographicBox[data-count="15"] .lines > div:nth-child(9) { transform:rotate(192deg); }
.infographicBox[data-count="15"] .lines > div:nth-child(10) { transform:rotate(223.5deg); }
.infographicBox[data-count="15"] .lines > div:nth-child(11) { transform:rotate(247deg); }
.infographicBox[data-count="15"] .lines > div:nth-child(12) { transform:rotate(267.5deg); }
.infographicBox[data-count="15"] .lines > div:nth-child(13) { transform:rotate(288deg); }
.infographicBox[data-count="15"] .lines > div:nth-child(14) { transform:rotate(308.5deg); }
.infographicBox[data-count="15"] .lines > div:nth-child(15) { transform:rotate(331.5deg); }
.infographicBox[data-count="15"] .items.text > div:nth-child(1) { top: 0; left:50%; transform:translateX(-50%); }
.infographicBox[data-count="15"] .items.text > div:nth-child(2) { top: 1%; left: 63%; }
.infographicBox[data-count="15"] .items.text > div:nth-child(3) { top: 12%; left: 78%; }
.infographicBox[data-count="15"] .items.text > div:nth-child(4) { top: 33%; right: 2.5%; }
.infographicBox[data-count="15"] .items.text > div:nth-child(5) { top: 52%; right: 0%; }
.infographicBox[data-count="15"] .items.text > div:nth-child(6) { top: 70%; right: 4%; }
.infographicBox[data-count="15"] .items.text > div:nth-child(7) { top: 90%; left: 72%; }
.infographicBox[data-count="15"] .items.text > div:nth-child(8) { bottom: 0%; left: 56%; }
.infographicBox[data-count="15"] .items.text > div:nth-child(9) { bottom: 0; left: 42%; }
.infographicBox[data-count="15"] .items.text > div:nth-child(10) { bottom: 2.5%; left: 21%; }
.infographicBox[data-count="15"] .items.text > div:nth-child(11) { top: 73%; left: 9%; }
.infographicBox[data-count="15"] .items.text > div:nth-child(12) { top: 50%; left: 1.5%; }
.infographicBox[data-count="15"] .items.text > div:nth-child(13) { top: 28%; left: 4%; }
.infographicBox[data-count="15"] .items.text > div:nth-child(14) { top: 8%; left: 12.5%; }
.infographicBox[data-count="15"] .items.text > div:nth-child(15) { top: 1%; left: 32%; }
.infographicBox[data-count="15"] .items.text > div:nth-child(8) > div::after,
.infographicBox[data-count="15"] .items.text > div:nth-child(9) > div::after,
.infographicBox[data-count="15"] .items.text > div:nth-child(10) > div::after { content:''; display:block; width:150%; height:200px; background-color:#fff; position:absolute; bottom:-199px; left:-25%; }
.infographicBox[data-count="15"] .items.text > div:nth-child(1) > div::before,
.infographicBox[data-count="15"] .items.text > div:nth-child(2) > div::before,
.infographicBox[data-count="15"] .items.text > div:nth-child(15) > div::before { content:''; display:block; width:150%; height:200px; background-color:#fff; position:absolute; left:-25%; top:-199px; }

.infographicBox[data-count="14"] .lines > div:nth-child(2) {
    transform: rotate(32.5deg);
}

.infographicBox[data-count="14"] .lines > div:nth-child(3) {
    transform: rotate(59deg);
}

.infographicBox[data-count="14"] .lines > div:nth-child(4) {
    transform: rotate(81.5deg);
}

.infographicBox[data-count="14"] .lines > div:nth-child(5) {
    transform: rotate(102deg);
}

.infographicBox[data-count="14"] .lines > div:nth-child(6) {
    transform: rotate(123.5deg);
}

.infographicBox[data-count="14"] .lines > div:nth-child(7) {
    transform: rotate(147deg);
}

.infographicBox[data-count="14"] .lines > div:nth-child(8) {
    transform: rotate(173.5deg);
}

.infographicBox[data-count="14"] .lines > div:nth-child(9) {
    transform: rotate(205deg);
}

.infographicBox[data-count="14"] .lines > div:nth-child(10) {
    transform: rotate(233.5deg);
}

.infographicBox[data-count="14"] .lines > div:nth-child(11) {
    transform: rotate(258deg);
}

.infographicBox[data-count="14"] .lines > div:nth-child(12) {
    transform: rotate(279.5deg);
}

.infographicBox[data-count="14"] .lines > div:nth-child(13) {
    transform: rotate(304deg);
}

.infographicBox[data-count="14"] .lines > div:nth-child(14) {
    transform: rotate(327.5deg);
}

.infographicBox[data-count="14"] .items.text > div:nth-child(1) {
    top: 0;
    left:50%; transform:translateX(-50%);
}

.infographicBox[data-count="14"] .items.text > div:nth-child(2) {
    top: 2%;
    left: 64%;
}

.infographicBox[data-count="14"] .items.text > div:nth-child(3) {
    top: 14%;
    left: 79%;
}

.infographicBox[data-count="14"] .items.text > div:nth-child(4) {
    top: 37%;
    right: 1.5%;
}

.infographicBox[data-count="14"] .items.text > div:nth-child(5) {
    top: 59%;
    right: 3%;
}

.infographicBox[data-count="14"] .items.text > div:nth-child(6) {
    top: 80%;
    right: 8%;
}

.infographicBox[data-count="14"] .items.text > div:nth-child(7) {
    bottom: 1%;
    left: 66%;
}

.infographicBox[data-count="14"] .items.text > div:nth-child(8) {
    bottom: 0%;
    left: 50%;
}

.infographicBox[data-count="14"] .items.text > div:nth-child(9) {
    bottom: 1%;
    left: 34%;
}

.infographicBox[data-count="14"] .items.text > div:nth-child(10) {
    bottom: 9.5%;
    left: 16%;
}

.infographicBox[data-count="14"] .items.text > div:nth-child(11) {
    top: 60%;
    left: 7%;
}

.infographicBox[data-count="14"] .items.text > div:nth-child(12) {
    top: 37%;
    left: 2.5%;
}

.infographicBox[data-count="14"] .items.text > div:nth-child(13) {
    top: 14%;
    left: 13%;
}

.infographicBox[data-count="14"] .items.text > div:nth-child(14) {
    top: 1%;
    left: 26.5%;
}

.infographicBox[data-count="13"] .lines > div:nth-child(2) { transform:rotate(calc(360deg / 13)); }
.infographicBox[data-count="13"] .lines > div:nth-child(3) { transform:rotate(calc((360deg / 13) * 2)); }
.infographicBox[data-count="13"] .lines > div:nth-child(4) { transform:rotate(calc((360deg / 13) * 3)); }
.infographicBox[data-count="13"] .lines > div:nth-child(5) { transform:rotate(calc((360deg / 13) * 4)); }
.infographicBox[data-count="13"] .lines > div:nth-child(6) { transform:rotate(calc((360deg / 13) * 5)); }
.infographicBox[data-count="13"] .lines > div:nth-child(7) { transform:rotate(calc((360deg / 13) * 6)); }
.infographicBox[data-count="13"] .lines > div:nth-child(8) { transform:rotate(calc((360deg / 13) * 7)); }
.infographicBox[data-count="13"] .lines > div:nth-child(9) { transform:rotate(calc((360deg / 13) * 8)); }
.infographicBox[data-count="13"] .lines > div:nth-child(10) { transform:rotate(calc((360deg / 13) * 9)); }
.infographicBox[data-count="13"] .lines > div:nth-child(11) { transform:rotate(calc((360deg / 13) * 10)); }
.infographicBox[data-count="13"] .lines > div:nth-child(12) { transform:rotate(calc((360deg / 13) * 11)); }
.infographicBox[data-count="13"] .lines > div:nth-child(13) { transform:rotate(calc((360deg / 13) * 12)); }
.infographicBox[data-count="13"] .items.text > div:nth-child(1) {
    top: 0;
    left:50%; transform:translateX(-50%);
}

.infographicBox[data-count="13"] .items.text > div:nth-child(2) {
    top: 2%;
    left: 63%;
}

.infographicBox[data-count="13"] .items.text > div:nth-child(3) {
    top: 14%;
    left: 79%;
}

.infographicBox[data-count="13"] .items.text > div:nth-child(4) {
    top: 39%;
    right: 1.5%;
}

.infographicBox[data-count="13"] .items.text > div:nth-child(5) {
    top: 68%;
    right: 6%;
}

.infographicBox[data-count="13"] .items.text > div:nth-child(6) {
    top: 89%;
    right: 18%;
}

.infographicBox[data-count="13"] .items.text > div:nth-child(7) {
    bottom: 0%;
    left: 55%;
}

.infographicBox[data-count="13"] .items.text > div:nth-child(8) {
    bottom: 0%;
    left: 37%;
}

.infographicBox[data-count="13"] .items.text > div:nth-child(9) {
    bottom: 3%;
    left: 21%;
}

.infographicBox[data-count="13"] .items.text > div:nth-child(10) {
    bottom: 24.5%;
    left: 9%;
}

.infographicBox[data-count="13"] .items.text > div:nth-child(11) {
    top: 40%;
    left: 7%;
}

.infographicBox[data-count="13"] .items.text > div:nth-child(12) {
    top: 12%;
    left: 11.5%;
}

.infographicBox[data-count="13"] .items.text > div:nth-child(13) {
    top: 2%;
    left: 30%;
}
.infographicBox[data-count="13"] .items.text > div:nth-child(2) > div::before,
.infographicBox[data-count="13"] .items.text > div:nth-child(13) > div::before { content:''; display:block; width:150%; height:200px; background-color:#fff; position:absolute; left:-25%; top:-199px; }

.infographicBox[data-count="12"] .lines > div:nth-child(2) { transform:rotate(calc(360deg / 12)); }
.infographicBox[data-count="12"] .lines > div:nth-child(3) { transform:rotate(calc((360deg / 12) * 2)); }
.infographicBox[data-count="12"] .lines > div:nth-child(4) { transform:rotate(calc((360deg / 12) * 3)); }
.infographicBox[data-count="12"] .lines > div:nth-child(5) { transform:rotate(calc((360deg / 12) * 4)); }
.infographicBox[data-count="12"] .lines > div:nth-child(6) { transform:rotate(calc((360deg / 12) * 5)); }
.infographicBox[data-count="12"] .lines > div:nth-child(7) { transform:rotate(calc((360deg / 12) * 6)); }
.infographicBox[data-count="12"] .lines > div:nth-child(8) { transform:rotate(calc((360deg / 12) * 7)); }
.infographicBox[data-count="12"] .lines > div:nth-child(9) { transform:rotate(calc((360deg / 12) * 8)); }
.infographicBox[data-count="12"] .lines > div:nth-child(10) { transform:rotate(calc((360deg / 12) * 9)); }
.infographicBox[data-count="12"] .lines > div:nth-child(11) { transform:rotate(calc((360deg / 12) * 10)); }
.infographicBox[data-count="12"] .lines > div:nth-child(12) { transform:rotate(calc((360deg / 12) * 11)); }
.infographicBox[data-count="12"] .items.text > div:nth-child(1) {
    top: 0;
    left:50%; transform:translateX(-50%);
}

.infographicBox[data-count="12"] .items.text > div:nth-child(2) {
    top: 3%;
    left: 63%;
}

.infographicBox[data-count="12"] .items.text > div:nth-child(3) {
    top: 17%;
    left: 80%;
}

.infographicBox[data-count="12"] .items.text > div:nth-child(4) {
    top: 46%;
    right: 1.5%;
}

.infographicBox[data-count="12"] .items.text > div:nth-child(5) {
    top: 77%;
    right: 10%;
}

.infographicBox[data-count="12"] .items.text > div:nth-child(6) {
    bottom: 1%;
    right: 25%;
}

.infographicBox[data-count="12"] .items.text > div:nth-child(7) {
    bottom: 0%;
    left:50%; transform:translateX(-50%);
}

.infographicBox[data-count="12"] .items.text > div:nth-child(8) {
    bottom: 1%;
    left: 28%;
}

.infographicBox[data-count="12"] .items.text > div:nth-child(9) {
    bottom: 17%;
    left: 13%;
}

.infographicBox[data-count="12"] .items.text > div:nth-child(10) {
    bottom: 47%;
    left: 5%;
}

.infographicBox[data-count="12"] .items.text > div:nth-child(11) {
    top: 17%;
    left: 10%;
}

.infographicBox[data-count="12"] .items.text > div:nth-child(12) {
    top: 2%;
    left: 26%;
}

.infographicBox[data-count="12"] .items.text > div:nth-child(2) > div::before,
.infographicBox[data-count="12"] .items.text > div:nth-child(12) > div::before { content:''; display:block; width:150%; height:200px; background-color:#fff; position:absolute; left:-25%; top:-199px; }

.infographicBox[data-count="11"] .lines > div:nth-child(2) { transform:rotate(calc(360deg / 11)); }
.infographicBox[data-count="11"] .lines > div:nth-child(3) { transform:rotate(calc((360deg / 11) * 2)); }
.infographicBox[data-count="11"] .lines > div:nth-child(4) { transform:rotate(calc((360deg / 11) * 3)); }
.infographicBox[data-count="11"] .lines > div:nth-child(5) { transform:rotate(calc((360deg / 11) * 4)); }
.infographicBox[data-count="11"] .lines > div:nth-child(6) { transform:rotate(calc((360deg / 11) * 5)); }
.infographicBox[data-count="11"] .lines > div:nth-child(7) { transform:rotate(calc((360deg / 11) * 6)); }
.infographicBox[data-count="11"] .lines > div:nth-child(8) { transform:rotate(calc((360deg / 11) * 7)); }
.infographicBox[data-count="11"] .lines > div:nth-child(9) { transform:rotate(calc((360deg / 11) * 8)); }
.infographicBox[data-count="11"] .lines > div:nth-child(10) { transform:rotate(calc((360deg / 11) * 9)); }
.infographicBox[data-count="11"] .lines > div:nth-child(11) { transform:rotate(calc((360deg / 11) * 10)); }
.infographicBox[data-count="11"] .items.text > div:nth-child(1) {
    top: 0;
   left:50%; transform:translateX(-50%);
}

.infographicBox[data-count="11"] .items.text > div:nth-child(2) {
    top: 3%;
    left: 63%;
}

.infographicBox[data-count="11"] .items.text > div:nth-child(3) {
    top: 20%;
    left: 82%;
}

.infographicBox[data-count="11"] .items.text > div:nth-child(4) {
    top: 55%;
    right: 1.5%;
}

.infographicBox[data-count="11"] .items.text > div:nth-child(5) {
    top: 87%;
    right: 14%;
}

.infographicBox[data-count="11"] .items.text > div:nth-child(6) {
    bottom: 0%;
    right: 34%;
}

.infographicBox[data-count="11"] .items.text > div:nth-child(7) {
    bottom: 0%;
    left: 38%;
}

.infographicBox[data-count="11"] .items.text > div:nth-child(8) {
    bottom: 5%;
    left: 16%;
}

.infographicBox[data-count="11"] .items.text > div:nth-child(9) {
    bottom: 38%;
    left: 9%;
}

.infographicBox[data-count="11"] .items.text > div:nth-child(10) {
    bottom: 73%;
    left: 8%;
}

.infographicBox[data-count="11"] .items.text > div:nth-child(11) {
    top: 3%;
    left: 26%;
}
.infographicBox[data-count="11"] .items.text > div:nth-child(2) > div::before,
.infographicBox[data-count="11"] .items.text > div:nth-child(11) > div::before { content:''; display:block; width:150%; height:200px; background-color:#fff; position:absolute; left:-25%; top:-199px; }

.infographicBox[data-count="10"] .lines > div:nth-child(2) { transform:rotate(calc(360deg / 10)); }
.infographicBox[data-count="10"] .lines > div:nth-child(3) { transform:rotate(calc((360deg / 10) * 2)); }
.infographicBox[data-count="10"] .lines > div:nth-child(4) { transform:rotate(calc((360deg / 10) * 3)); }
.infographicBox[data-count="10"] .lines > div:nth-child(5) { transform:rotate(calc((360deg / 10) * 4)); }
.infographicBox[data-count="10"] .lines > div:nth-child(6) { transform:rotate(calc((360deg / 10) * 5)); }
.infographicBox[data-count="10"] .lines > div:nth-child(7) { transform:rotate(calc((360deg / 10) * 6)); }
.infographicBox[data-count="10"] .lines > div:nth-child(8) { transform:rotate(calc((360deg / 10) * 7)); }
.infographicBox[data-count="10"] .lines > div:nth-child(9) { transform:rotate(calc((360deg / 10) * 8)); }
.infographicBox[data-count="10"] .lines > div:nth-child(10) { transform:rotate(calc((360deg / 10) * 9)); }
.infographicBox[data-count="10"] .items.text > div:nth-child(1) {
    top: 0;
    left:50%; transform:translateX(-50%);
}

.infographicBox[data-count="10"] .items.text > div:nth-child(2) {
    top: 4%;
    left: 66%;
}

.infographicBox[data-count="10"] .items.text > div:nth-child(3) {
    top: 27%;
    left: 84%;
}

.infographicBox[data-count="10"] .items.text > div:nth-child(4) {
    top: 65%;
    right: 2%;
}

.infographicBox[data-count="10"] .items.text > div:nth-child(5) {
    top: 91%;
    right: 24%;
}

.infographicBox[data-count="10"] .items.text > div:nth-child(6) {
    bottom: 0%;
    left:50%; transform:translateX(-50%);
}

.infographicBox[data-count="10"] .items.text > div:nth-child(7) {
    bottom: 2%;
    left: 24%;
}

.infographicBox[data-count="10"] .items.text > div:nth-child(8) {
    bottom: 27%;
    left: 7%;
}

.infographicBox[data-count="10"] .items.text > div:nth-child(9) {
    bottom: 66%;
    left: 9%;
}

.infographicBox[data-count="10"] .items.text > div:nth-child(10) {
    top: 3%;
    left: 24%;
}
.infographicBox[data-count="10"] .items.text > div:nth-child(2) > div::before,
.infographicBox[data-count="10"] .items.text > div:nth-child(10) > div::before { content:''; display:block; width:150%; height:200px; background-color:#fff; position:absolute; left:-25%; top:-199px; }


.infographicBox[data-count="9"] .lines > div:nth-child(2) { transform:rotate(calc(360deg / 9)); }
.infographicBox[data-count="9"] .lines > div:nth-child(3) { transform:rotate(calc((360deg / 9) * 2)); }
.infographicBox[data-count="9"] .lines > div:nth-child(4) { transform:rotate(calc((360deg / 9) * 3)); }
.infographicBox[data-count="9"] .lines > div:nth-child(5) { transform:rotate(calc((360deg / 9) * 4)); }
.infographicBox[data-count="9"] .lines > div:nth-child(6) { transform:rotate(calc((360deg / 9) * 5)); }
.infographicBox[data-count="9"] .lines > div:nth-child(7) { transform:rotate(calc((360deg / 9) * 6)); }
.infographicBox[data-count="9"] .lines > div:nth-child(8) { transform:rotate(calc((360deg / 9) * 7)); }
.infographicBox[data-count="9"] .lines > div:nth-child(9) { transform:rotate(calc((360deg / 9) * 8)); }
.infographicBox[data-count="9"] .items.text > div:nth-child(1) {
    top: 0;
    left:50%; transform:translateX(-50%);
}

.infographicBox[data-count="9"] .items.text > div:nth-child(2) {
    top: 5%;
    left: 68%;
}

.infographicBox[data-count="9"] .items.text > div:nth-child(3) {
    top: 35%;
    left: 86%;
}

.infographicBox[data-count="9"] .items.text > div:nth-child(4) {
    top: 76%;
    right: 5%;
}

.infographicBox[data-count="9"] .items.text > div:nth-child(5) {
    bottom: 0%;
    right: 33%;
}

.infographicBox[data-count="9"] .items.text > div:nth-child(6) {
    bottom: 0%;
    right: 55%;
}

.infographicBox[data-count="9"] .items.text > div:nth-child(7) {
    bottom: 16%;
    left: 13%;
}

.infographicBox[data-count="9"] .items.text > div:nth-child(8) {
    bottom: 57%;
    left: 5%;
}

.infographicBox[data-count="9"] .items.text > div:nth-child(9) {
    top: 5%;
    left: 22%;
}
.infographicBox[data-count="9"] .items.text > div:nth-child(2) > div::before,
.infographicBox[data-count="9"] .items.text > div:nth-child(9) > div::before { content:''; display:block; width:150%; height:200px; background-color:#fff; position:absolute; left:-25%; top:-199px; }

.infographicBox[data-count="8"] .lines > div:nth-child(1) {  }
.infographicBox[data-count="8"] .lines > div:nth-child(2) { transform:rotate(53deg); }
.infographicBox[data-count="8"] .lines > div:nth-child(3) { transform:rotate(90deg); }
.infographicBox[data-count="8"] .lines > div:nth-child(4) { transform:rotate(127deg); }
.infographicBox[data-count="8"] .lines > div:nth-child(5) { transform:rotate(180deg); }
.infographicBox[data-count="8"] .lines > div:nth-child(6) { transform:rotate(234deg); }
.infographicBox[data-count="8"] .lines > div:nth-child(7) { transform:rotate(270deg); }
.infographicBox[data-count="8"] .lines > div:nth-child(8) { transform:rotate(306deg); }

.infographicBox[data-count="8"] .items.text > div:nth-child(1) { top:0; left:50%; transform:translateX(-50%); }
.infographicBox[data-count="8"] .items.text > div:nth-child(2) { top:9%; left:79%; }
.infographicBox[data-count="8"] .items.text > div:nth-child(3) { top:46%; right:0%; }
.infographicBox[data-count="8"] .items.text > div:nth-child(4) { bottom:2%; left:79%; }
.infographicBox[data-count="8"] .items.text > div:nth-child(5) { bottom:0; left:50%; transform:translateX(-50%); }
.infographicBox[data-count="8"] .items.text > div:nth-child(6) { bottom:2%; left:12%; }
.infographicBox[data-count="8"] .items.text > div:nth-child(7) { top:46%; left:0%; }
.infographicBox[data-count="8"] .items.text > div:nth-child(8) { top:10%; left:14%; }

.infographicBox[data-count="7"] .lines > div:nth-child(2) { transform:rotate(calc(360deg / 7)); }
.infographicBox[data-count="7"] .lines > div:nth-child(3) { transform:rotate(calc((360deg / 7) * 2)); }
.infographicBox[data-count="7"] .lines > div:nth-child(4) { transform:rotate(calc((360deg / 7) * 3)); }
.infographicBox[data-count="7"] .lines > div:nth-child(5) { transform:rotate(calc((360deg / 7) * 4)); }
.infographicBox[data-count="7"] .lines > div:nth-child(6) { transform:rotate(calc((360deg / 7) * 5)); }
.infographicBox[data-count="7"] .lines > div:nth-child(7) { transform:rotate(calc((360deg / 7) * 6)); }
.infographicBox[data-count="7"] .items.text > div:nth-child(1) {
    top: 0;
    left:50%; transform:translateX(-50%);
}

.infographicBox[data-count="7"] .items.text > div:nth-child(2) {
    top: 8%;
    left: 76%;
}

.infographicBox[data-count="7"] .items.text > div:nth-child(3) {
    top: 60%;
    right: 2%;
}

.infographicBox[data-count="7"] .items.text > div:nth-child(4) {
    bottom: 0%;
    right: 32%;
}

.infographicBox[data-count="7"] .items.text > div:nth-child(5) {
    bottom: 0%;
    right: 61%;
}

.infographicBox[data-count="7"] .items.text > div:nth-child(6) {
    bottom: 32%;
    left: 3%;
}

.infographicBox[data-count="7"] .items.text > div:nth-child(7) {
    top: 8%;
    left: 13%;
}

.infographicBox[data-count="6"] .lines > div:nth-child(2) { transform:rotate(calc(360deg / 6)); }
.infographicBox[data-count="6"] .lines > div:nth-child(3) { transform:rotate(calc((360deg / 6) * 2)); }
.infographicBox[data-count="6"] .lines > div:nth-child(4) { transform:rotate(calc((360deg / 6) * 3)); }
.infographicBox[data-count="6"] .lines > div:nth-child(5) { transform:rotate(calc((360deg / 6) * 4)); }
.infographicBox[data-count="6"] .lines > div:nth-child(6) { transform:rotate(calc((360deg / 6) * 5)); }
.infographicBox[data-count="6"] .items.text > div:nth-child(1) {
    top: 0;
    left:50%; transform:translateX(-50%);
}

.infographicBox[data-count="6"] .items.text > div:nth-child(2) {
    top: 11%;
    right: 3%;
}

.infographicBox[data-count="6"] .items.text > div:nth-child(3) {
    top: 77%;
    right: 7%;
}

.infographicBox[data-count="6"] .items.text > div:nth-child(4) {
    bottom: 0%;
    left:50%; transform:translateX(-50%);
}

.infographicBox[data-count="6"] .items.text > div:nth-child(5) {
    bottom: 15%;
    right: 82%;
}

.infographicBox[data-count="6"] .items.text > div:nth-child(6) {
    top: 14%;
    left: 10%;
}

.infographicBox[data-count="5"] .lines > div:nth-child(2) { transform:rotate(calc(360deg / 5)); }
.infographicBox[data-count="5"] .lines > div:nth-child(3) { transform:rotate(calc((360deg / 5) * 2)); }
.infographicBox[data-count="5"] .lines > div:nth-child(4) { transform:rotate(calc((360deg / 5) * 3)); }
.infographicBox[data-count="5"] .lines > div:nth-child(5) { transform:rotate(calc((360deg / 5) * 4)); }
.infographicBox[data-count="5"] .items.text > div:nth-child(1) {
    top: 0;
    left:50%; transform:translateX(-50%);
}

.infographicBox[data-count="5"] .items.text > div:nth-child(2) {
    top: 26%;
    left: 86%;
}

.infographicBox[data-count="5"] .items.text > div:nth-child(3) {
    bottom: 1%;
    right: 23%;
}

.infographicBox[data-count="5"] .items.text > div:nth-child(4) {
    bottom: 1%;
    right: 62%;
}

.infographicBox[data-count="5"] .items.text > div:nth-child(5) {
    bottom: 67%;
    left: 6%;
}

.infographicBox[data-count="4"] .lines > div:nth-child(1) { transform:rotate(45deg); }
.infographicBox[data-count="4"] .lines > div:nth-child(2) { transform:rotate(135deg); }
.infographicBox[data-count="4"] .lines > div:nth-child(3) { transform:rotate(225deg); }
.infographicBox[data-count="4"] .lines > div:nth-child(4) { transform:rotate(315deg); }
.infographicBox[data-count="4"] .items.text > div:nth-child(1) {
    top: 2%;
    left: 20%;
}

.infographicBox[data-count="4"] .items.text > div:nth-child(2) {
    top: 2%;
    right: 19%;
}

.infographicBox[data-count="4"] .items.text > div:nth-child(3) {
    bottom: 2%;
    right: 18%;
}

.infographicBox[data-count="4"] .items.text > div:nth-child(4) {
    bottom: 2%;
    left: 19%;
}

/* Graphic No2 as option to No1 */
.infographicBox .icon { text-align:center; padding-bottom:12px!important; }
.infographicBox .icon img { height:min(6vw,85px); width:auto; }
.infographicBox.no2 .items.text { text-align:center; }
.infographicBox.no2[data-count="8"] .items.text > div:nth-child(2) { top:6%; }
.infographicBox.no2[data-count="8"] .items.text > div:nth-child(8) { top:6%; }
.infographicBox.no2[data-count="8"] .items.text > div:nth-child(3) { top:42%; }
.infographicBox.no2[data-count="8"] .items.text > div:nth-child(7) { top:42%; }

.infographicBox.no2[data-count="7"] .items.text > div:nth-child(7) { top:5%; }
.infographicBox.no2[data-count="7"] .items.text > div:nth-child(6) { bottom:27%; }

.infographicBox.no2[data-count="6"] .items.text > div:nth-child(5) { bottom:6%; }
.infographicBox.no2[data-count="6"] .items.text > div:nth-child(6) { top:13%; }

.infographicBox.no2[data-count="5"] .items.text > div:nth-child(2) { top:22%; }
.infographicBox.no2[data-count="5"] .items.text > div:nth-child(5) { bottom:62%; }
@media (max-width:767px) {
    .infographicBox .icon { display:none; }
}

/* No3 */
.infographicBox .titleBox .icon img { height:min(12vw,175px); }

.infographicBox .dots { position:absolute; top:0; left:0; width:100%; height:100%; }
.infographicBox .dots > div { height:100%; width:50px; position:absolute; top:0; left:calc(50% - 23px); z-index:1; }
.infographicBox .dots > div > div { height:27px; width:27px; border-radius:23px; position:absolute; top:22.7%; left:12px; background-color:#00c05e; } 

.infographicBox.no3 .items.text { color:#000e60; }
.infographicBox.no3 .items.text > div > div { background-color:transparent; }
.infographicBox.no3 .items.text > div { width:240px; text-align:center; margin-left:-120px; z-index:100; }
.infographicBox.no3[data-count="7"] .items.text > div:nth-child(1) { top:0; left:50%; transform:translateX(0%); }
.infographicBox.no3[data-count="7"] .items.text > div:nth-child(2) { top:15%; left:75%; }
.infographicBox.no3[data-count="7"] .items.text > div:nth-child(3) { top:46%; left:78%; }
.infographicBox.no3[data-count="7"] .items.text > div:nth-child(4) { bottom:0%; left:67%; }
.infographicBox.no3[data-count="7"] .items.text > div:nth-child(5) { bottom:0%; right:55%; }
.infographicBox.no3[data-count="7"] .items.text > div:nth-child(6) { top:46%; left:21%; }
.infographicBox.no3[data-count="7"] .items.text > div:nth-child(7) { top:15%; left:25%; }

.infographicBox.no3[data-count="6"] .items.text > div:nth-child(1) { top:0; left:50%; transform:translateX(0%); }
.infographicBox.no3[data-count="6"] .items.text > div:nth-child(2) { top:18%; left:75%; }
.infographicBox.no3[data-count="6"] .items.text > div:nth-child(3) { top:58%; left:74%; }
.infographicBox.no3[data-count="6"] .items.text > div:nth-child(4) { bottom:0%; left:50%; transform:translateX(0%); }
.infographicBox.no3[data-count="6"] .items.text > div:nth-child(5) { top:58%; left:23%; right:unset; bottom:unset; }
.infographicBox.no3[data-count="6"] .items.text > div:nth-child(6) { top:18%; left:25%; }

.infographicBox.no3[data-count="5"] .items.text > div:nth-child(1) { top:0; left:50%; transform:translateX(0%); }
.infographicBox.no3[data-count="5"] .items.text > div:nth-child(2) { top:25%; left:77%; }
.infographicBox.no3[data-count="5"] .items.text > div:nth-child(3) { top:unset; bottom:1%; left:66%; }
.infographicBox.no3[data-count="5"] .items.text > div:nth-child(4) { bottom:1%; left:33%; }
.infographicBox.no3[data-count="5"] .items.text > div:nth-child(5) { top:25%; left:23%; right:unset; bottom:unset; }

.infographicBox.no3[data-count="4"] .items.text > div:nth-child(1) { top:0; left:50%; transform:translateX(0%); }
.infographicBox.no3[data-count="4"] .items.text > div:nth-child(2) { top:39%; left:78%; }
.infographicBox.no3[data-count="4"] .items.text > div:nth-child(3) { top:unset; bottom:1%; left:50%; transform:translateX(0%); }
.infographicBox.no3[data-count="4"] .items.text > div:nth-child(4) { bottom:unset; top:39%; left:20%; }

@media (max-width:1399px) {
    .infographicBox .dots > div { width:40px; left:calc(50% - 20px); }
    .infographicBox .dots > div > div { height:22px; width:22px; left:10px; }
    .infographicBox.no3 .items.text > div { width:200px; margin-left:-100px; }
}
@media (max-width:1199px) {
    .infographicBox .dots > div { width:34px; left:calc(50% - 17px); }
    .infographicBox .dots > div > div { height:18px; width:18px; left:8px; }
    .infographicBox.no3 .items.text > div { width:160px; margin-left:-80px; }
    .infographicBox.no3 .items.text > div > div { font-size:18px; }
}
@media (max-width:991px) {
    .infographicBox .dots > div { width:26px; left:calc(50% - 13px); }
    .infographicBox .dots > div > div { height:14px; width:14px; left:6px; }
    .infographicBox.no3 .items.text > div > div { font-size:13px; padding:0px 18px; margin:0; }
    .infographicBox.no3 .items.text > div > div:last-child { margin-top:-12px; }
}
@media (max-width:767px) {
/*    .infographicBox .items.text > div { flex-direction: row; }*/
    .infographicBox .icon img { height:5vw; }
    .infographicBox.no3 .items.text .icon img { height:4vw; }
    .infographicBox.no3 .titleBox .icon img { height:min(20vw,130px); }
    .infographicBox.no3 .icon { padding-bottom:4px!important; }
    .infographicBox.no3 .items.text > div > div { font-size:11px; padding: 0px 4px; }
    .infographicBox .icon { display:block; }
    .infographicBox.no3 .items.text > div > div:last-child { margin-top:0; }
    .infographicBox .dots > div > div { height:min(2vw, 12px); width:min(2vw, 12px); }
    
    .infographicBox.no3[data-count="7"] .items.text > div:nth-child(1) { top:0%; }
    .infographicBox.no3[data-count="7"] .items.text > div:nth-child(2) { top:20%; left:82%; }
    .infographicBox.no3[data-count="7"] .items.text > div:nth-child(3) { top: 50%; left: 86%; }
    .infographicBox.no3[data-count="7"] .items.text > div:nth-child(4) { bottom: 5%; right: 8%; }
    .infographicBox.no3[data-count="7"] .items.text > div:nth-child(5) { bottom: 5%; right: 52%; }    
    .infographicBox.no3[data-count="7"] .items.text > div:nth-child(6) { top: 51%; left: 14%; }
    .infographicBox.no3[data-count="7"] .items.text > div:nth-child(7) { top: 21%; left: 17%; }
}

/* Infographic No 4 */

.infographicBox.no4 .items.text > div { display:block; color:#000e60; font-size:25px; font-weight:700; line-height:1; min-height:min(3.4vw,50px); }
.infographicBox.no4 .items.text > div:nth-child(1) { top:55%; left:82%; width:18%; }
.infographicBox.no4 .items.text > div:nth-child(2) { top:71%; left:69%; width:31%; }
.infographicBox.no4 .items.text > div:nth-child(3) { bottom:0%; left:69%; width:31%; }
@media (max-width:1399px) {
    .infographicBox.no4 .items.text > div { font-size:23px; }
}
@media (max-width:1199px) {
    .infographicBox.no4 .items.text > div { font-size:18px; }
}
@media (max-width:991px) {
    .infographicBox.no4 .items.text > div { font-size:14px; }
}
@media (max-width:767px) {
    .infographicBox.no4 .items.text > div { font-size:min(2vw,11px); }
}

/* Infographic No 5 */
.infographicBox-no5 {  }
.infographicBox-no5 .blueBox { padding:9% 11%; background-color:#ccebff; border-radius:32px; }
.infographicBox-no5 .headline { font-weight:700; color:#00be64; font-size:21px; line-height:1.1; padding-bottom:15px; }
.infographicBox-no5 .box { position:relative; }
.infographicBox-no5 .box::before { content:''; display:block; width:20px; height:100%; border-radius:10px; background-color:#fbfe00; position:absolute; top:-25px; left:28%; }
.infographicBox-no5 .item { position:relative; display:flex; justify-content:space-between; margin-top:35px; }
.infographicBox-no5 .item::after { content:''; display:block; width:20px; height:20px; border-radius:10px; background-color:#00be64; position:absolute; top:20px; left:28%; }
.infographicBox-no5 .icon { width:calc(28% - 10px); text-align:right; }
.infographicBox-no5 .icon img { width:58px; }
.infographicBox-no5 .text { width:calc(72% - 30px); min-height:58px; font-size:14px; font-weight:700; line-height:1.4; padding:10px 0; display:flex; flex-direction:column; justify-content:center; }

/* Infographic No 7 */
.infographicBox-no7 { text-align:center; }

.infographicBox-no7 .blueBox { position:relative; }
.infographicBox-no7 .blueBox + .blueBox { margin-top:20px; }
.infographicBox-no7 .blueBox:not(:first-child)::before { content:''; display:block; width:100px; height:100px; border-radius:30px; border:solid 22px #fff; background-color:#ccebff; transform:rotate(45deg); position:absolute; top:-40px; left:calc(50% - 47px); }
.infographicBox-no7 .blueBox .inner { padding:30px 20px 40px; background-color:#ccebff; border-radius:15px; position:relative; }
.infographicBox-no7 .overline { margin:0; font-weight:700; color:#00be64; }
.infographicBox-no7 h4 + .overline { margin-top:30px; }

.infographicBox-no7 .flexBox { margin-top:15px; display:flex; gap:40px; justify-content:center; }
.infographicBox-no7 .item { display:inline-flex; gap:10px; align-items:center; }
.infographicBox-no7 .item .icon img { width:50px; height:auto; }
.infographicBox-no7 .item .text { color:#000e60; font-weight:700; }

.infographicBox-no7 .whiteBox { background-color:#fff; border-radius:10px; padding:17px; max-width:327px; }
.infographicBox-no7 .headlineWithIcon { display:inline-flex; gap:5px; align-items:center; }
.infographicBox-no7 .headlineWithIcon .icon img { width:auto; height:30px; }
.infographicBox-no7 .headlineWithIcon .text { color:#000e60; font-weight:700; }
.infographicBox-no7 .whiteBox .textBox { padding-top:15px; text-align:left; }
.infographicBox-no7 .whiteBox .textBox p { font-size:14px; line-height:1.1; margin-bottom:8px; }

.infographicBox-no7 .flexBox.dotStyle { color:#000; font-size:14px; line-height:1.1; justify-content:space-between; position:relative; }
.infographicBox-no7 .dotStyle .item { display:flex; flex-direction:column; width:130px; }
.infographicBox-no7 .flexBox.dotStyle::before { content:''; display:block; width:calc(100% - 120px); height:18px; border-radius:9px; background-color:#fbfe00; position:absolute; top:70px; left:60px; }
.infographicBox-no7 .flexBox.dotStyle .icon { margin-bottom:50px; position:relative; }
.infographicBox-no7 .flexBox.dotStyle .icon::after { content:''; display:block; width:18px; height:18px; border-radius:10px; background-color:#00be64; position:absolute; top:70px; left:calc(50% - 9px); }
.infographicBox-no7 .flexBox.dotStyle .item .icon img { width:auto; height:50px; }

.infographicBox-no7 .flexBox.marginBottom { margin-bottom:25px; }
.infographicBox-no7 .whiteBox.centered { background-color:unset; padding:0; width:240px; }
.infographicBox-no7 .whiteBox.centered .inner { display:flex; flex-direction:column; justify-content:center; height:100%; padding:10px 15px; background-color:#fff; border-radius:10px; }
.infographicBox-no7 .whiteBox.centered .headline { color:#000e60; font-weight:700; }
.infographicBox-no7 .whiteBox.centered .textBox { padding-top:0; }
.infographicBox-no7 .whiteBox.centered .textBox p { text-align:center; }
.infographicBox-no7 .whiteBox.centered .bottom { background-color:#9dd8ff; font-size:13px; line-height:1.1; border-radius:0 0 10px 10px; padding:20px 10px 5px; margin-top:-15px; }

@media (max-width:991px) {
    .infographicBox-no7 .flexBox { flex-direction:column; gap:15px; align-items:center; }
    .infographicBox-no7 .dotStyle .item { flex-direction:row; gap:60px; width:260px; }
    .infographicBox-no7 .flexBox.dotStyle .icon { margin-bottom:0; }
    .infographicBox-no7 .flexBox.dotStyle .icon::after { top:17px; left:72px; }
    .infographicBox-no7 .flexBox.dotStyle .item .icon img { width:50px; height:auto; }
    .infographicBox-no7 .flexBox.dotStyle::before { width:18px; height:calc(100% - 38px); top:20px; left:calc(50% - 58px); }
    .infographicBox-no7 .flexBox.marginBottom { margin-bottom:0; }
}






