.main {
  width: 100%;
  margin-top: 123px; }

.carousel {
  width: 100%;
  position: relative;
  overflow: hidden;
  z-index: 1; }
  .carousel img {
    visibility: visible;
    width: 100%;
    display: block;
    height: calc(100vh - 123px); }
  .carousel .content {
    position: absolute;
    top: 0;
    left: 0; }
    .carousel .content li {
      float: left;
      height: calc(100vh - 123px);
      width: 100vw;
      background-position: center center;
      background-size: auto 100%; }
      .carousel .content li img {
        width: 100vw; }
  .carousel .dot {
    position: absolute;
    bottom: 55px;
    width: 85%;
    text-align: left;
    font-size: 0;
    margin: 0 auto;
    right: 0;
    left: 0; }
    .carousel .dot li {
      width: 15px;
      height: 15px;
      display: block;
      border-radius: 50%;
      display: inline-block;
      margin: 0 5px;
      cursor: pointer;
      border: solid 2px #1e2e3b; }
    .carousel .dot .active {
      background: #1e2e3b; }
  .carousel .hide {
    display: none; }

.service {
  width: 100%;
  background: #1e2e3b;
  padding-top: 10%; }
  .service .desc {
    width: 470px;
    text-align: center;
    font-size: 15px;
    margin: 5% auto;
    color: #ffffff;
    line-height: 40px; }
  .service .icons {
    width: calc(100% - 140px);
    max-width: 1380px;
    margin: 0 auto; }
    .service .icons div {
      width: calc(33.3% - 65px);
      height: 25vw;
      background-color: #f8f3e0;
      display: inline-block;
      margin: 0 30px -150px 30px;
      border-radius: 40px;
      text-align: center;
      font-size: 18px;
      cursor: pointer;
      font-weight: bold;
      position: relative;
      background-size: 50%; }
      .service .icons div span {
        position: absolute;
        bottom: 10vh;
        left: 0;
        right: 0; }
    .service .icons div:hover {
      background-color: #43bbba;
      background-size: 50%; }
  .service .icon_01 {
    background: url("../images/ico1_service_o.png") center center no-repeat;
    color: #010002; }
  .service .icon_01:hover {
    background: url("../image/ico1_service.png") center center no-repeat;
    color: #ffffff; }
  .service .icon_02 {
    background: url("../images/ico2_service_o.png") center center no-repeat;
    color: #010002; }
  .service .icon_02:hover {
    background: url("../image/ico2_service.png") center center no-repeat;
    color: #ffffff; }
  .service .icon_03 {
    background: url("../images/ico3_service_o.png") center center no-repeat;
    color: #010002; }
  .service .icon_03:hover {
    background: url("../image/ico3_service.png") center center no-repeat;
    color: #ffffff; }

.whyus {
  width: 100%;
  padding: 17% 0 5% 0; }
  .whyus .title {
    padding-bottom: 5%; }
  .whyus div {
    width: 90%;
    max-width: 730px;
    margin: 0 auto;
    font-size: 15px;
    margin-bottom: 4%; }
    .whyus div span {
      background: #fbaa3e;
      display: inline-block;
      font-weight: bold;
      padding: 5px 15px;
      border-radius: 20px;
      margin-bottom: 10px; }
    .whyus div p {
      line-height: 30px;
      padding-left: 15px; }

.pepform {
  width: 100%;
  padding-top: 12%;
  background: url("../images/index_bg01.jpg") top center no-repeat #010101;
  background-size: 100%;
  height: 90vw;
  border-radius: 150px 150px 0 0; }
  .pepform div {
    width: calc(100% - 140px);
    max-width: 1380px;
    margin: 75.2vw auto 0 auto;
    text-align: right; }
    .pepform div img {
      padding-left: 50px; }

.pepform2 {
  width: 100%;
  background: #43bbba;
  padding-bottom: 5%; }
  .pepform2 div {
    width: calc(100% - 200px);
    max-width: 1380px;
    color: #ffffff;
    font-size: 22px;
    margin: 0 auto;
    padding-top: 5%;
    line-height: 50px; }
    .pepform2 div img {
      display: block;
      margin-bottom: 2%;
      width: 10%;
      min-width: 90px; }
    .pepform2 div a {
      display: block;
      background: #1e2e3b;
      width: 280px;
      height: 60px;
      text-decoration: none;
      color: #ffffff;
      border-radius: 30px;
      text-align: center;
      line-height: 60px;
      margin-top: 7%;
      font-size: 18px; }
    .pepform2 div a:hover {
      color: #43bbba;
      background: #ffffff; }

.pepformance {
  width: 100%;
  padding: 13% 0 8% 0;
  background: #ecf8f8; }
  .pepformance .lists {
    width: calc(100% - 140px);
    max-width: 1520px;
    margin: 10% auto 0 auto; }
  .pepformance .list {
    width: 22.5%;
    display: inline-block;
    color: #010002;
    overflow: hidden;
    margin: 0 1%; }
    .pepformance .list img {
      float: left;
      width: 48%;
      max-width: 149px; }
    .pepformance .list div {
      float: left;
      margin-left: 5%;
      width: 40%;
      font-weight: bold;
      margin-bottom: 70px;
      white-space: nowrap;
      height: 8vw; }
      .pepformance .list div span {
        display: block;
        font-size: 44px;
        border-bottom: 2px solid #010002; }
  .pepformance .list:hover div div {
    /* text-decoration: underline; */ }
  .pepformance .bottom {
    display: block;
    background: #1e2e3b;
    width: 280px;
    height: 60px;
    text-decoration: none;
    color: #ffffff;
    border-radius: 30px;
    text-align: center;
    line-height: 60px;
    margin: 2% auto 0 auto;
    font-size: 18px; }
  .pepformance .bottom:hover {
    background: #43bbba; }

@media screen and (min-width: 1270px) and (max-width: 1560px) {
  .service .icons div {
    height: 32vw; }

  /*.carousel .dot {
      margin-left: 150px;
  }*/ }
@media screen and (min-width: 0px) and (max-width: 1270px) {
  /*.carousel .dot {
      margin-left: 40%;
      bottom: 10px;
  }*/
  .service .icons div {
    width: calc(33.3% - 25px);
    margin: 0 10px -100px 10px; }

  .service .icons div span {
    bottom: 4vh;
    font-size: 13px; }

  .pepform div {
    margin: 72vw auto 0 auto; }

  .pepform div img {
    width: 60%; }

  .pepform2 div {
    font-size: 18px; }

  .pepform2 div a {
    margin: 5% auto 0 auto; }

  .pepformance .list {
    width: 30.5%; } }
@media screen and (min-width: 0px) and (max-width: 800px) {
  .pepformance .list {
    width: 45.5%; }

  .pepformance .list div {
    font-size: 14px; }

  .pepformance .list div span {
    font-size: 30px; } }
@media screen and (min-width: 1420px) and (max-width: 1550px) {
  /*.carousel .content {
      top: -13vh;
  }*/ }
@media screen and (min-width: 1228px) and (max-width: 1420px) {
  /*.carousel .content {
      top: 0;
  }*/ }
@media screen and (min-width: 0) and (max-width: 1228px) {
  .carousel img {
    height: 50vw; }

  .carousel .content li {
    height: 50vw; } }

/*# sourceMappingURL=index.css.map */