.fixed {
  position: fixed;
  top: 200px;
  right: 50px;
  width: 140px;
  height: 130px;
  background-image: url(../images/fixed.png);
  background-repeat: no-repeat;
  background-size: 100%;
  z-index: 2;
}

.box01 {
  z-index: 3;
}

.swiper-container {
  width: 100%;
  overflow: hidden;
}

.swiper-slide {
  display: table;
}

.autoHeight {
  position: relative;
  display: table-cell;
  vertical-align: middle;
  z-index: 3;
}

.swiper-pagination-bullet {
  background-color: #c4c7ca;
  opacity: 1;
  transition: all 0.1s ease-in-out;
}

.swiper-pagination-bullet-active {
  width: 12px;
  height: 12px;
  background-color: #fb3421;
}

.swiper-container-vertical>.swiper-pagination-bullets .swiper-pagination-bullet {
  margin: 18px auto;
}

.title {
  margin-top: 20px;
  opacity: 0;
  transform: scale(0.5, 0.5);
  transition: all 1s;
  font-size: 46px;
  font-weight: bold;
  text-align: center;
}

.tips {
  opacity: 0;
  transform: scale(0.5, 0.5);
  transition: all 1s;
  margin-top: 20px;
  text-align: center;
}

.swiper-slide-active .title, .swiper-slide-active .tips {
  opacity: 1;
  transform: scale(1, 1);
  transition-delay: 0.7s;
}

.slide_left, .slide_right {
  transform: translate3d(-300%, 0, 0);
  transition: all 1s;
  opacity: 0;
}

.slide_right {
  transform: translate3d(300%, 0, 0);
}

.slide_up {
  transform: translate3d(0, -300%, 0);
  transition: all 1s;
  opacity: 0;
}

.slide_down {
  transform: translate3d(0, 300%, 0);
  transition: all 1s;
  opacity: 0;
}

.swiper-slide-active .slide_left, .swiper-slide-active .slide_right, .swiper-slide-active .slide_down, .swiper-slide-active .slide_up {
  transform: translate3d(0, 0, 0);
  opacity: 1;
  transition-delay: 0.3s;
}

.bg_change {
  opacity: 0;
  transition: opacity 1s ease;
}

.swiper-slide-active .bg_change {
  opacity: 1;
  transition-delay: 0.2s;
}

.box01 {
  background: url(../images/banner.png) no-repeat center 40px;
  background-size: cover;
}

.box01 .wrap {
  position: relative;
  padding-top: 200px;
}

.banner_border {
  width: 545px;
  height: 60px;
  border: 2px solid #fff;
  margin-left: 486px;
  color: #fff;
  font-size: 24px;
  font-weight: bold;
  letter-spacing: 30px;
  text-align: center;
  line-height: 62px;
}

.txt {
  width: 883px;
  height: 140px;
  margin-left: 325px;
  margin-top: 66px;
  background-image: url(../images/txt.png);
  background-repeat: no-repeat;
}

.banner_logo {
  position: absolute;
  top: 66px;
  right: 66px;
  width: 106px;
  height: 100px;
  background-image: url(../images/banner_logo.png);
  background-repeat: no-repeat;
}

.box02_title, .box02_title02 {
  margin-bottom: 48px;
  font-size: 30px;
  text-align: center;
}

.box02_title02 {
  margin-top: 90px;
  margin-bottom: 70px;
}

.icon_list li {
  float: left;
  margin-right: 75px;
  font-size: 20px;
}

.icon_list li:last-child {
  margin-right: 0;
}

.icon_list li.active {
  line-height: 50px;
}

.icon_list li img {
  float: left;
  margin-right: 19px;
}

.icon_list li p {
  margin-top: 4px;
  color: #676767;
  font-size: 16px;
}

.box02_list li {
  float: left;
  width: 254px;
  height: 318px;
  border: 1px solid #e3e3e3;
  margin-right: 58px;
  text-align: center;
  font-size: 16px;
}

.img_wrap {
  padding: 30px 0;
}

.box02_list li:last-child {
  margin-right: 0;
}

.box02_list img {
  margin: 0 auto;
}

.box02_list01 .img_wrap {
  background-color: #ff706c;
}

.box02_list02 .img_wrap {
  background-color: #58b6f6;
}

.box02_list03 .img_wrap {
  background-color: #fed01b;
}

.box02_list04 .img_wrap {
  background-color: #5bdb7a;
}

.txt01 {
  margin-top: 30px;
  margin-bottom: 10px;
  font-size: 22px;
}

.box02_list p {
  color: #969696;
}

.box03 {
  position: relative;
}

.cloud {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 284px;
  background-image: url(../images/bg.png);
  background-repeat: no-repeat;
  background-position: center;
  animation: translate3 5s ease infinite;
  z-index: -1;
}

@keyframes translate3 {
  50% {
    transform: translate3d(5px, 5px, 0);
  }

  100% {
    transform: translate3d(0, 0, 0);
  }
}

.box03_wrap {
  margin-top: 70px;
}

.box03_l {
  width: 545px;
  height: 436px;
  margin-right: 130px;
  box-shadow: 2px 2px 15px rgba(137, 137, 137, 0.2);
  border-radius: 8px;
  background-color: #fff;
}

.box03_l li {
  float: left;
  width: 272px;
  height: 218px;
  border-bottom: 1px solid #e5e5e5;
  border-right: 1px solid #e5e5e5;
  text-align: center;
  font-size: 24px;
}

.box03_l li img {
  margin: 40px auto 30px auto;
}

.box03_l li.active img {
  margin: 52px auto 20px auto;
}

.box03_l li.on img {
  margin: 40px auto 36px auto;
}

.box03_l li p {
  color: #959595;
  font-size: 16px;
}

.box03_l li:nth-child(even) {
  border-right: none;
}

.introduce {
  margin-top: -8px;
}

.introduce_title {
  margin-bottom: 20px;
  font-size: 30px;
}

.circle {
  float: left;
  width: 8px;
  height: 8px;
  margin-top: 10px;
  border-radius: 50%;
  background-color: #c5c5c5;
}

.introduce_info {
  float: left;
  width: 500px;
  margin-left: 13px;
}

.introduce li {
  margin-bottom: 14px;
}

.introduce li p {
  margin-bottom: 14px;
  font-size: 22px;
  font-weight: bold;
}

.introduce_info div {
  line-height: 30px;
}

.btn {
  display: block;
  width: 226px;
  height: 70px;
  margin-top: 18px;
  line-height: 70px;
  color: #fff;
  font-size: 24px;
  text-align: center;
  border-radius: 40px;
  background-color: #fe381d;
  transition: opacity .5s ease;
}

.btn:hover {
  opacity: .8;
}

.box04_wrap {
  margin-top: 84px;
}

.bg02 {
  position: absolute;
  bottom: -100px;
  right: 0;
  width: 1114px;
  height: 178px;
  background-image: url(../images/bg02.png);
  background-repeat: no-repeat;
}

.circle_wrap {
  margin-top: 80px;
}

.big_circle {
  position: relative;
  width: 270px;
  height: 220px;
  border: 20px solid #ffd8d3;
  padding-top: 50px;
  margin-right: 216px;
  border-radius: 50%;
  background-color: #ff4f45;
  color: #fff;
  text-align: center;
  animation: translate 5s ease infinite;
}

@keyframes translate {
  50% {
    transform: translate3d(0, -10px, 0);
  }

  100% {
    transform: translate3d(0, 0, 0);
  }
}

.big_circle>p {
  margin-bottom: 10px;
  font-size: 24px;
}

.big_img {
  margin: 0 auto 35px auto;
}

.small_circle {
  position: absolute;
  top: -170px;
  right: -200px;
  width: 270px;
  height: 210px;
  border: 20px solid #fff0bc;
  padding-top: 60px;
  background-color: #fed01b;
  border-radius: 50%;
  color: #fff;
  text-align: center;
  animation: translate2 5s ease infinite;
}

@keyframes translate2 {
  50% {
    transform: translate3d(0, 20px, 0);
  }

  100% {
    transform: translate3d(0, 0, 0);
  }
}

.small_img {
  margin: 0 auto 50px auto;
}

.small_img+div {
  font-size: 24px;
}

.box05_wrap {
  margin-top: 100px;
}

.box05_wrap .introduce {
  margin-left: 124px;
}

.circle_bg01 {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 798px;
  height: 542px;
  background-image: url(../images/circle2.png);
  background-repeat: no-repeat;
  animation: translate4 4s ease infinite;
  z-index: -1;
}

@keyframes translate4 {
  50% {
    transform: translate3d(-10px, 0, 0);
  }

  100% {
    transform: translate3d(0, 0, 0);
  }
}

.box06_wrap {
  margin-top: 110px;
}

.box06_wrap .circle_wrap {
  margin-top: 100px;
}

.box06_wrap .big_circle {
  height: 210px;
  padding-top: 60px;
}

.box06_wrap .big_img {
  margin: 0 auto 5px auto;
}

.box06_wrap .small_circle {
  border: 20px solid #d8f2ff;
  background-color: #37c3ff;
}

.box06_wrap .small_circle p {
  margin-bottom: 5px;
  font-size: 24px;
}

.box07_wrap {
  margin-top: 80px;
}

.circle_bg02 {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 768px;
  height: 527px;
  background-image: url(../images/circle.png);
  background-repeat: no-repeat;
  animation: translate5 4s ease infinite;
  z-index: -1;
}

@keyframes translate5 {
  50% {
    transform: translate3d(10px, 0, 0);
  }

  100% {
    transform: translate3d(0, 0, 0);
  }
}

.box07 .introduce {
  margin-top: 20px;
  margin-left: 60px;
}

.box07_wrap img {
  margin-top: -20px;
}

.slide_por {
  position: absolute;
  top: 80px;
  left: 70px;
}

.slide_por img {
  display: inline-block;
  margin-right: 30px;
}

.border {
  width: 451px;
  height: 91px;
  margin-bottom: 20px;
  background-image: url(../images/border.png);
  background-repeat: no-repeat;
}

.border+div {
  margin-left: 20px;
}

.box08_wrap {
  margin-top: 82px;
}

.box08_wrap .introduce {
  margin-top: 30px;
}

.box08_r {
  width: 585px;
  padding: 35px 0;
  background-color: #fff;
  box-shadow: 2px 2px 15px rgba(137, 137, 137, 0.2);
  border-radius: 8px;
}

.box08_r li {
  width: 503px;
  height: 85px;
  margin-left: 40px;
  margin-bottom: 20px;
  background-color: #f1f2f4;
  border-radius: 16px;
}

.box08_r_circle {
  float: left;
  width: 58px;
  height: 58px;
  margin: 13px 22px 0 20px;
  border-radius: 50%;
  background-color: #e9e9e9;
}

.box08_r_circle+div {
  padding-top: 26px;
  font-size: 24px;
}

.line {
  width: 78px;
  height: 16px;
  margin-top: 4px;
  margin-left: 100px;
  background-color: #ededee;
  border-radius: 40px;
}

.border02 {
  width: 503px;
  height: 85px;
  margin-left: 40px;
  margin-bottom: 20px;
  background-image: url(../images/border01.png);
  background-repeat: no-repeat;
}

.border02:last-child {
  margin-bottom: 0;
}

.box09 {
  background-color: #f1f2f4;
}

.region {
  margin-top: 50px;
  margin-bottom: 170px;
}

.region a {
  float: left;
  width: 148px;
  height: 64px;
  border-right: 2px solid #f1f2f4;
  border-bottom: 3px solid #f1f2f4;
  text-align: center;
  line-height: 64px;
  font-size: 20px;
  background-color: #fff;
  transition: background-color .5s ease, transform .5s ease;
}

.region a:hover {
  transform: scale(1.05, 1.05);
  border-color: #fb3a2b;
  background-color: #fb3a2b;
  color: #fff;
}

.region a:nth-child(8n) {
  border-right: none;
}

.footer {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
}

.mobile {
  display: none;
}

@media only all and (min-width:2000px) {
  .cloud {
    background-size: 100%;
  }
}

@media only all and (max-width:1080px) {
  .swiper-slide, .mobile {
    display: block;
  }

  .banner_logo, .banner_border, .txt, .box01 .wrap, .cloud, .bg02, .circle_bg01, .circle_bg02,.fixed {
    display: none;
  }

  .autoHeight {
    width: 100%;
    margin: 0 auto;
  }

  .title {
    opacity: 1;
    color: #fe381d;
  }

  .slide_up, .slide_down, .slide_left, .slide_right {
    transform: none;
    opacity: 1;
    transition: none;
  }

  .box01 {
    height: 12.65rem;
    background-image: url(../images/m_banner.jpg);
  }

  .box02 {
    margin-top: 1.2rem;
  }

  .box02_title, .box02_title02 {
    margin-bottom: 1rem;
    font-size: .8rem;
    font-weight: bold;
  }

  .title {
    margin-top: .5rem;
    font-size: 1rem;
    transform: none;
    transition: none;
  }

  .icon_list li {
    width: 33.33%;
    margin-bottom: .5rem;
    margin-right: 0;
    font-size: .7rem;
  }

  .icon_list li.active {
    margin-right: 0;
    font-size: .7rem;
    line-height: 1rem;
  }

  .icon_list li img {
    float: none;
    width: 1.7rem;
    margin: .2rem auto .5rem auto;
  }

  .icon_list li img+div {
    float: none;
    width: 100%;
    text-align: center;
  }

  .icon_list li p {
    margin-top: .1rem;
    font-size: .7rem;
    color: #333;
  }

  .box02_title02 {
    margin-top: 1rem;
  }

  .box02_list li {
    width: calc(49% - 0.05rem);
    height: auto;
    border: 0.025rem solid #e3e3e3;
    padding-bottom: 1rem;
    margin-right: 2%;
    margin-bottom: .7rem;
    font-size: .7rem;
  }

  .box02_list li:nth-child(even) {
    margin-right: 0;
  }

  .box02_list img {
    width: 3rem;
  }

  .txt01 {
    margin-top: .75rem;
    margin-bottom: .25rem;
    font-size: .8rem;
  }

  .tips {
    transform: none;
    transition: none;
    margin: .5rem .8rem 0 .8rem;
    opacity: 1;
  }

  .box03_wrap {
    margin-top: 1rem;
  }

  .box03_l {
    display: none;
    float: none;
    width: 100%;
    height: auto;
    margin-right: 0;
    box-shadow: 0.05rem 0.05rem .375rem rgba(137, 137, 137, 0.2);
    border-radius: .2rem;
    overflow: hidden;
  }

  .box03_l li {
    width: calc(50% - 0.025rem);
    height: 7rem;
    padding-bottom: .5rem;
    border-bottom: 0.025rem solid #e5e5e5;
    border-right: 0.025rem solid #e5e5e5;
    font-size: .85rem;
  }

  .box03_l li img, .box03_l li.on img {
    width: 2rem;
    margin: 1rem auto;
  }

  .box03_l li.active img {
    width: 3rem;
    margin: 1.2rem auto .9rem auto;
  }

  .box03_l li.on img {
    width: 1.05rem;
    margin: 1rem auto 1.05rem auto;
  }

  .introduce {
    float: none;
    width: calc(100% - 2rem);
    padding: .8rem 1rem;
    margin-top: 1rem;
    box-shadow: 0.05rem 0.05rem 0.375rem rgba(137, 137, 137, 0.2);
  }

  .box03_l li p {
    font-size: .8rem;
  }

  .circle_wrap {
    margin-top: 1rem;
  }

  .introduce_title {
    margin-bottom: .5rem;
    font-size: .9rem;
    text-align: center;
    font-weight: bold;
  }

  .introduce li {
    margin-bottom: .3rem;
  }

  .circle {
    width: .25rem;
    height: .25rem;
    margin-top: .4rem;
  }

  .introduce_info {
    width: calc(100% - 1rem);
    margin-left: .5rem;
  }

  .introduce li p {
    margin-bottom: .3rem;
    font-size: .8rem;
  }

  .introduce_info div {
    line-height: 1rem;
  }

  .btn {
    width: 6rem;
    height: 2rem;
    margin: 1rem auto .5rem auto;
    line-height: 2rem;
    font-size: .8rem;
    border-radius: 1rem;
  }

  .box04 {
    margin-top: 1rem;
  }

  .box04_wrap {
    margin-top: 1rem;
  }

  .big_circle {
    width: 6.75rem;
    height: 5.75rem;
    border: .5rem solid #ffd8d3;
    padding-top: 1rem;
    margin: 0 auto;
  }

  .circle_wrap {
    display: none;
    float: none;
    margin-top: 4rem;
  }

  .small_circle {
    top: -4.25rem;
    right: -5rem;
    width: 6.75rem;
    height: 5.5rem;
    border: .5rem solid #fff0bc;
    padding-top: 1.25rem;
  }

  .big_img, .small_img {
    width: 3.2rem;
    margin: 0 auto .3rem auto;
  }

  .small_img+div {
    font-size: .8rem;
  }

  .big_circle>p {
    margin-bottom: .25rem;
    font-size: .8rem;
  }

  .box05 {
    margin-top: 1rem;
  }

  .box05_wrap {
    margin-top: 1rem;
  }

  .box05_wrap img {
    display: none;
  }

  .box05_wrap img {
    float: none;
    width: 12rem;
    margin: 0 auto;
  }

  .box05_wrap .introduce {
    margin-left: 0;
  }

  .box06 {
    margin-top: 1rem;
  }

  .box06_wrap {
    margin-top: 1rem;
  }

  .box06_wrap .circle_wrap {
    margin: 4rem auto 0 auto;
  }

  .box06_wrap .big_circle {
    height: 5.75rem;
    padding-top: 1rem;
  }

  .box06_wrap .small_circle {
    border: .5rem solid #d8f2ff;
  }

  .box06_wrap .small_circle p {
    margin-bottom: .1rem;
    font-size: .8rem;
  }

  .box06_wrap .big_img, .small_img {
    width: 2rem;
  }

  .box07 {
    margin-top: 1rem;
  }

  .box07_wrap {
    margin-top: 1rem;
  }

  .box07_wrap img {
    width: 100%;
  }

  .box07_wrap .fl, .box07_wrap .fr {
    float: none;
  }

  .box07_wrap .por, .line {
    display: none;
  }

  .img_wrap {
    padding: 1rem 0;
  }

  .box07 .introduce {
    margin-top: .5rem;
    margin-left: 0;
  }

  .box08, .box08_wrap {
    margin-top: 1rem;
  }

  .box08_wrap .introduce {
    margin-top: .75rem;
    margin-bottom: 2rem;
  }

  .box08_r {
    display: none;
    float: none;
    width: 100%;
    padding: .875rem 0;
    margin-bottom: 1.5rem;
    background-color: #fff;
    box-shadow: 0.05rem 0.05rem .375rem rgba(137, 137, 137, 0.2);
    border-radius: .2rem;
  }

  .box08_r li {
    width: 94%;
    height: 2.2rem;
    margin: 0 auto .5rem auto;
    border-radius: 1rem;
  }

  .box08_r li:last-child {
    margin-bottom: 0;
  }

  .box08_r_circle {
    width: 1.5rem;
    height: 1.5rem;
    margin: .325rem .55rem 0 .5rem;
  }

  .box08_r_circle+div {
    padding-top: .5rem;
    font-size: .8rem;
  }

  .border02 {
    display: none;
  }

  .box09 {
    padding-top: 1rem;
  }

  .region {
    margin-top: 1rem;
    margin-bottom: 2rem;
  }

  .region a {
    width: 24.25%;
    height: 2rem;
    margin-right: 1%;
    margin-bottom: .2rem;
    border: none;
    line-height: 2rem;
    font-size: .8rem;
  }

  .region a:nth-child(8n) {
    border: none;
  }

  .region a:nth-child(4n) {
    margin-right: 0;
  }
}