@font-face {
  font-family: 'CircularStd-Book';
  src: url('../fonts/CircularStd-Book.eot');
  src: url('../fonts/CircularStd-Book.eot?#iefix') format('embedded-opentype'),
       url('../fonts/CircularStd-Book.woff2') format('woff2'),
       url('../fonts/CircularStd-Book.woff') format('woff');
        font-display: swap;
}

@font-face {
  font-family: 'CircularStd-Medium';
  src: url('../fonts/CircularStd-Medium.eot');
  src: url('../fonts/CircularStd-Medium.eot?#iefix') format('embedded-opentype'),
       url('../fonts/CircularStd-Medium.woff2') format('woff2'),
       url('../fonts/CircularStd-Medium.woff') format('woff');
        font-display: swap;
}

@font-face {
  font-family: 'CircularStd-Bold';
  src: url('../fonts/CircularStd-Bold.eot');
  src: url('../fonts/CircularStd-Bold.eot?#iefix') format('embedded-opentype'),
       url('../fonts/CircularStd-Bold.woff2') format('woff2'),
       url('../fonts/CircularStd-Bold.woff') format('woff');
        font-display: swap;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  -webkit-appearance: none;
  -webkit-tap-highlight-color: transparent;
  outline: none;
}

ul {
  list-style: none;
}

body {
  min-width: 330px;
  font-family: 'CircularStd-Book';
  font-weight: 100;
  background-color: #f6f7fb;
}

main {
  overflow: hidden;
}

a {
  font-family: 'CircularStd-Medium';
  text-decoration: none;
  outline: none;
  -webkit-appearance: none;
  -webkit-tap-highlight-color: transparent;
}

strong {
  font-family: 'CircularStd-Bold';
}

img, svg {
  display: block;
  max-width: 100%;
}

h1,h2,h3,h4,h5,h6, .tcm {
  font-family: 'CircularStd-Bold';
  font-weight: 100;
  margin-bottom: 0;
}

h1,h2,h3,h4,h5,h6,.tcm {
  text-align: center;
}

h2 {
  font-size: 42px;
  line-height: 1.1;
}

h4,h5,h6 {
  line-height: 1.3;
}

h5 {
  font-size: 23px;
}

h6 {
  font-size: 20px;
  color: #6094c6;
}

p {
  font-size: 14px;
  color: #000;
  line-height: 1.5;
  margin-bottom: 0;
}

.fs-16 {
  font-size: 16px;
}

@media(min-width: 992px) {
  h1,h2,h3,h4,h5,h6,.tcm {
    text-align: left;
  }
}

@media(max-width: 768px) {
  h2 {
    font-size: 37px;
  }
  h4 {
    font-size: 21px;
  }
}

header, main, .container {
  max-width: 750px;
}

header, main {
  margin: 0 auto;
}

header {
  background-image: url(../img/bg.png);
  background-size: auto 100%;
  background-position: left center;
  background-color: #6094c7;
  background-repeat: no-repeat;
  border-bottom: 4px solid #5e5e6e;
}

main {
  background-color: #d6e7f1;
}

.ffb {
  font-family: 'CircularStd-Bold';
}

.ffm {
  font-family: 'CircularStd-Medium';
}

.wc {
  color: #fff;
}

.bc {
  color: #73a2d8;
}

.bc2 {
  color: #6787b7;
}

.gc {
  color: #44444f;
}

.info {
  background-color: #fff;
  padding: 15px 15px 13px 15px;
}

.left {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

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

.block {
  background-color: #fff;
  border-radius: 15px;
  overflow: hidden;
}

.title {
  padding: 20px 15px 14px 15px;
}

.title2 {
  padding-top: 20px;
}

.gray {
  background-color: #f2f1f0;
}

.bg1 {
  background-color: #769bc4;
}

.bg2 {
  background-color: #506ab2;
}

.bg3 {
  background-color: #f37163;
}

.spb {
  justify-content: space-between;
}

.w1 {
  width: 25%;
}

.w2 {
  width: 36%;
}

@media(max-width: 960px) {
  .w1, .w2 {
    width: 49%;
  }
  .w2:last-child {
    margin: 0 auto;
  }
}

@media(max-width: 576px) {
  .w1, .w2 {
    width: 100%;
  }
}

.icon {
  max-height: 77px;
}

.icon2 {
  max-height: 50px;
}

.mh {
  height: 100%;
}

.num {
  font-family: 'CircularStd-Bold';
  font-size: 43px;
  line-height: 0.8;
  color: #6787b7;
  padding-top: 17px;
}

.desc {
  color: #6787b7;
  padding-top: 5px;
}

/*graphic 1 begin*/
.chart-gauge {
  max-width: 500px;
}

.chart-1{fill:#fac4a0}
.chart-2{fill:#f9a670}
.chart-3{fill:#f88941}
.chart-4{fill:#f56b12}
.chart-5{fill:#fbe5b4}
.chart-6{fill:#f9d98e}
.chart-7{fill:#f7cb68}
.chart-8{fill:#f5bf41}
.chart-9{fill:#bed8b2}
.chart-10{fill:#9ec58e}
.chart-11{fill:#7db167}
.chart-12{fill:#5d9e42}
.needle,.needle-center{fill:#628ec6}

.square {
  width: 18px;
  height: 18px;
}

.sq1 {
  background-color: #f46c22;
}

.sq2 {
  background-color: #f4be40;
}

.sq3 {
  background-color: #5d9e42;
}

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

.note {
  margin-top: 22px;
  margin-right: 18px;
}

.note p {
  position: relative;
  font-size: 12px;
  top: 1px;
  line-height: 1;
  padding-left: 5px;
}

@media(max-width: 450px) {
  .note p {
    font-size: 11px;
  }
  .square {
    width: 15px;
    height: 15px;
  }
  .note {
    margin-right: 12px;
  }
}

.note:last-child {
  margin-right: 0;
}
/*graphic 1 end*/

/*graphic 2 begin*/
g:nth-child(1) {fill: #faa56c;}
g:nth-child(2) {fill: #f88941;}
g:nth-child(3) {fill: #f56b12;}
g:nth-child(4) {fill: #f9d78d;}
g:nth-child(5) {fill: #f7cb6a;}
g:nth-child(6) {fill: #f5bd42;}
g:nth-child(7) {fill: #9dc48e;}
g:nth-child(8) {fill: #7db167;}
g:nth-child(9) {fill: #5d9e42;}

.graphic-block {
  width: 25%;
  padding: 0 5px;
}

@media(max-width: 700px) {
  .graphic-block {
    width: 100%;
    max-width: 33%;
  }
}

@media(max-width: 520px) {
  .graphic-block {
    max-width: 45%;
  }
}

@media(max-width: 450px) {
  .graphic-block {
    max-width: 50%;
  }
}

.graphic-block p {
  font-size: 13px;
  line-height: 1.3;
  margin-top: 10px;
}
/*graphic 2 end*/