.banner {
  width: 100%;
  height: 18.5938rem;
  background-color: #096afa;
  position: relative;
}

.banner img {
  width: 100%;
  height: 100%;
}

.main-body {
  width: 100%;
  background-color: #FFFFFF;
  padding: 2.0313rem 0 2.1875rem 0;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.main-body .main-title p {
  font-size: .9375rem;
  color: #292929;
}

.main-body .line {
  margin: .625rem 0;
  width: 1.25rem;
  height: .125rem;
  background-color: #292929;
}

.main-body .p {
  width: 18.125rem;
  text-align: center;
}

.main-body .p p {
  font-size: .75rem;
  color: #a9a9a9;
}

.main-body .main-scroll {
  width: 100%;
  display: flex;
  white-space: nowrap;
  overflow-x: auto;
  margin-top: 1.5625rem;
  background-color: #fbfdff;
}

.main-body .main-scroll .main-box {
  width: 13.6875rem;
  background-color: #FFFFFF;
  border: .0313rem solid #e5e5e5;
  box-shadow: 0 0 .4688rem #f5f5f5;
  display: inline-block;
  flex-direction: column;
  align-items: center;
  margin: 0 .625rem .4688rem 0;
}

.main-body .main-scroll .main-box .box-top {
  width: 13.6875rem;
  height: 4.375rem;
  background-color: #f6f6f6;
  display: flex;
  align-items: center;
  position: relative;
  padding-left: 1.5625rem;
  box-sizing: border-box;
}

.main-body .main-scroll .main-box .box-top .title p {
  font-weight: 600;
  font-size: .75rem;
  color: #090909;
}

.main-body .main-scroll .main-box .box-top .title .line {
  width: 1.0938rem;
  height: .1563rem;
  border-radius: .3125rem;
  background-color: #3471ff;
  margin-top: .1875rem;
}

.main-body .main-scroll .main-box .box-top img {
  position: absolute;
  right: 0;
  top: -0.625rem;
  width: 7.5rem;
  height: 4.6875rem;
}

.main-body .main-scroll .main-box .box-bottom {
  width: 13.6875rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 1.5625rem 1.25rem 2.1875rem 1.25rem;
  box-sizing: border-box;
}

.main-body .main-scroll .main-box .box-bottom p {
  white-space: pre-wrap;
  text-align: center;
  font-size: .625rem;
  color: #a9a9a9;
}

.main-body .main-scroll .main-box:first-child {
  margin-left: 1.5625rem;
}

.main-body .main-scroll .main-box:last-child {
  margin-right: 1.5625rem;
}

.main-body ::-webkit-scrollbar {
  display: none;
  width: 0;
  height: 0;
}

.main-body01 {
  width: 100%;
  padding: 2.5rem 0 .625rem 0;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.main-body01 .main-title p {
  font-size: .9375rem;
  color: #292929;
}

.main-body01 .line {
  margin: .625rem 0;
  width: 1.25rem;
  height: .125rem;
  background-color: #292929;
}

.main-body01 .p {
  width: 18.125rem;
  text-align: center;
}

.main-body01 .p p {
  font-size: .75rem;
  color: #a9a9a9;
}

.main-body01 .progress-bar {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 2.1875rem 0;
}

.main-body01 .progress-bar .progress {
  display: flex;
  align-items: center;
}

.main-body01 .progress-bar .progress .bar {
  min-width: 1.5rem;
  height: .125rem;
  border-radius: .1563rem;
  background-color: #dadada;
  margin-bottom: 1.25rem;
}

.main-body01 .progress-bar .progress .noneActive {
  background-color: transparent;
}

.main-body01 .progress-bar .progress .activeBar {
  background-color: #3471ff;
}

.main-body01 .progress-bar .progress .progress01 {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.main-body01 .progress-bar .progress .progress01 .circle {
  width: 1.3125rem;
  height: 1.3125rem;
  border-radius: 50%;
  background-color: #ebebeb;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: .3125rem;
}

.main-body01 .progress-bar .progress .progress01 .circle p {
  font-size: .625rem;
  color: #474747;
}

.main-body01 .progress-bar .progress .progress01 p {
  transform: scale(0.833);
  font-size: .6875rem;
  color: #929292;
}

.main-body01 .progress-bar .progress .active .circle {
  background-color: #3471ff;
}

.main-body01 .progress-bar .progress .active .circle p {
  color: #FFFFFF;
}

.main-body01 .progress-bar .progress .active p {
  color: #3471ff;
}

.main-body01 .body {
  width: 18.75rem;
  display: flex;
  flex-direction: column;
  margin-bottom: .9375rem;
}

.main-body01 .body .body-top {
  display: flex;
  padding: .9375rem 1.0938rem;
  box-sizing: border-box;
  background-color: #3471ff;
  border-top-left-radius: .625rem;
  border-top-right-radius: .625rem;
}

.main-body01 .body .body-top p {
  font-size: .75rem;
  color: #FFFFFF;
}

.main-body01 .body .body-bottom {
  display: flex;
  flex-direction: column;
  background-color: #FFFFFF;
  padding: .9375rem .625rem .625rem;
  box-sizing: border-box;
}

.main-body01 .body .body-bottom .p {
  display: flex;
  align-items: center;
  margin-bottom: .625rem;
}

.main-body01 .body .body-bottom .p .circle {
  width: .375rem;
  height: .375rem;
  border-radius: 50%;
  border: .125rem solid #dadada;
  margin-right: .3125rem;
}

.main-body01 .body .body-bottom .p p {
  font-size: .6875rem;
  color: #a9a9a9;
}

.main-body02 {
  width: 100%;
  padding: 2.0313rem 0 0 0;
  box-sizing: border-box;
  background-color: #FFFFFF;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.main-body02 .main-title p {
  font-size: .9375rem;
  color: #292929;
}

.main-body02 .line {
  margin: .625rem 0;
  width: 1.25rem;
  height: .125rem;
  background-color: #292929;
}

.main-body02 .p {
  width: 13.2813rem;
  text-align: left;
  margin-bottom: 1.5625rem;
}

.main-body02 .p p {
  font-size: .75rem;
  color: #a9a9a9;
}

.main-body02 .body {
  width: 86%;
  background-color: #f7f7f7;
  padding: 1.4063rem 1.875rem 1.875rem;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: .625rem;
}

.main-body02 .body img {
  width: 2.5rem;
  height: 2.25rem;
}

.main-body02 .body p:nth-of-type(1) {
  font-size: .75rem;
  color: #292929;
  margin: 1.0938rem 0 1.0938rem;
}

.main-body02 .body p:nth-of-type(2) {
  text-align: center;
  font-size: .625rem;
  color: #b3b3b3;
}

.main-body03 {
  width: 100%;
  padding: 1.25rem 1.7188rem 1.4063rem;
  box-sizing: border-box;
  background-color: #FFFFFF;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.main-body03 .main-title p {
  font-size: .9375rem;
  color: #292929;
}

.main-body03 .line {
  margin: .625rem 0;
  width: 1.25rem;
  height: .0625rem;
  background-color: #292929;
}

.main-body03 .p {
  width: 17.3438rem;
  text-align: center;
  margin-bottom: 1.5625rem;
}

.main-body03 .p p {
  font-size: .75rem;
  color: #a9a9a9;
}

.main-body03 .body {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
}

.main-body03 .body .body-box {
  width: 49%;
  height: 9.125rem;
  border: .0313rem solid #e5e5e5;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding: .9375rem 0 0;
  box-sizing: border-box;
  margin: 0 .3125rem .7813rem 0;
}

.main-body03 .body .body-box .big-circle {
  width: 4.375rem;
  height: 4.375rem;
  border-radius: 50%;
  background-color: #e5f6fe;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: .625rem;
}

.main-body03 .body .body-box .big-circle .small-circle {
  width: 3.75rem;
  height: 3.75rem;
  border-radius: 50%;
  background-color: #ceeefd;
  display: flex;
  justify-content: center;
  align-items: center;
}

.main-body03 .body .body-box .big-circle .small-circle img {
  width: 1.4063rem;
  height: 2.5rem;
}

.main-body03 .body .body-box p {
  width: 86%;
  text-align: center;
  font-size: .75rem;
  color: #090909;
}

.main-body03 .body .body-box:nth-child(2n) {
  margin-right: 0;
}

.main-body04 {
  width: 100%;
  padding: 2.8125rem 2.125rem 1.4063rem;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.main-body04 .main-title p {
  font-weight: 600;
  font-size: .9375rem;
  color: #292929;
}

.main-body04 .Body {
  display: flex;
  flex-direction: column;
  margin-top: 3.125rem;
}

.main-body04 .Body .Body01 {
  width: 100%;
  display: flex;
}

.main-body04 .Body .Body01 .body {
  display: flex;
  align-items: center;
}

.main-body04 .Body .Body01 .body .body-box {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.main-body04 .Body .Body01 .body .body-box img {
  width: 2.8125rem;
  height: 3.75rem;
}

.main-body04 .Body .Body01 .body .body-box p {
  margin-top: .625rem;
  font-size: .75rem;
  color: #090909;
  font-weight: bold;
}

.main-body04 .Body .Body01 .body .process {
  margin: 0 .7813rem;
}

.main-body04 .Body .Body01 .body .process img {
  width: 1.7188rem;
  height: 1.0625rem;
}

.main-body04 .Body .Body01 .body01 {
  height: 4.6875rem;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.main-body04 .Body .Body01 .body01 .body-box {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.main-body04 .Body .Body01 .body01 .body-box img {
  width: 2.8125rem;
  height: 3.75rem;
}

.main-body04 .Body .Body01 .body01 .body-box p {
  margin-top: .625rem;
  font-size: .75rem;
  color: #090909;
  font-weight: bold;
}

.main-body04 .Body .Body01 .body01 .process {
  transform: rotate(90deg);
  margin: .7813rem 0;
}

.main-body04 .Body .Body01 .body01 .process img {
  width: 1.7188rem;
  height: 1.0625rem;
}

.main-body04 .Body .Body02 {
  display: flex;
  justify-content: flex-end;
  margin-top: 2.3438rem;
}

.main-body04 .Body .Body02 .body02 {
  display: flex;
  align-items: center;
}

.main-body04 .Body .Body02 .body02 .body-box {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.main-body04 .Body .Body02 .body02 .body-box img {
  width: 2.8125rem;
  height: 3.75rem;
}

.main-body04 .Body .Body02 .body02 .body-box p {
  margin-top: .625rem;
  font-size: .75rem;
  color: #090909;
  font-weight: bold;
}

.main-body04 .Body .Body02 .body02 .process {
  transform: rotate(-180deg);
  margin: 0 .7813rem;
}

.main-body04 .Body .Body02 .body02 .process img {
  width: 1.7188rem;
  height: 1.0625rem;
}

.main-body04 .Body .Body02 .body01 {
  height: 4.6875rem;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.main-body04 .Body .Body02 .body01 .body-box {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.main-body04 .Body .Body02 .body01 .body-box img {
  width: 2.8125rem;
  height: 3.75rem;
}

.main-body04 .Body .Body02 .body01 .body-box p {
  margin-top: .625rem;
  font-size: .75rem;
  color: #090909;
  font-weight: bold;
}

.main-body04 .Body .Body02 .body01 .process {
  transform: rotate(90deg);
  margin: .7813rem 0;
}

.main-body04 .Body .Body02 .body01 .process img {
  width: 1.7188rem;
  height: 1.0625rem;
}

.main-body04 .Body .Body03 {
  display: flex;
  align-items: center;
  margin-top: .9375rem;
}

.main-body04 .Body .Body03 .process {
  margin: 0 .4688rem;
}

.main-body04 .Body .Body03 .process img {
  width: 1.7188rem;
  height: 1.0625rem;
}

.main-body04 .Body .Body03 .process:nth-child(1) {
  margin-left: 1.25rem;
}

.main-body04 .Body .Body03 .body-box {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.main-body04 .Body .Body03 .body-box img {
  width: 2.8125rem;
  height: 3.75rem;
}

.main-body04 .Body .Body03 .body-box p {
  margin-top: .625rem;
  font-size: .75rem;
  color: #090909;
  font-weight: bold;
}