.box {
  position: relative;
  overflow: hidden;
}

.banner {
  width: 100%;
  height: 781px;
  padding-top: 100px;
  background-image: url(../images/benner.png);
  background-repeat: no-repeat;
  background-position: center;
  text-align: center;
}

.banner_title {
  position: relative;
  display: table;
  margin: 0 auto;
  font-size: 50px;
  font-family: FZLanTingHeiS-DB-GB;
  color: #fff;
}

.banner_title::after, .banner_title::before {
  content: "";
  position: absolute;
  top: 16px;
  left: -60px;
  width: 46px;
  height: 38px;
  background-image: url(../images/title_l.png);
  background-repeat: no-repeat;
}

.banner_title::before {
  left: auto;
  right: -59px;
  width: 45px;
  background-image: url(../images/title_r.png);
}

.banner img {
  margin: 4px auto 0 auto;
}

.box01 {
  padding-top: 44px;
}

.txt02 {
  padding-top: 26px;
  font-size: 36px;
  color: #fff;
  font-style: italic
}

.txt02 span {
  color: #ff0;
}

.title {
  width: 316px;
  height: 113px;
  margin: 0 auto 14px auto;
  line-height: 113px;
  background-image: url(../images/years.png);
  background-repeat: no-repeat;
  font-size: 44px;
  color: rgba(184, 71, 32, 1);
  text-align: center;
}

.box01_tips {
  text-align: center;
  line-height: 40px;
}

.box01_tips span {
  font-size: 28px;
}

.box01_tips b {
  color: #b84720;
  font-size: 28px;
}

.slide_wrap {
  position: relative;
  width: 100%;
  padding: 30px 0;
  margin-top: 50px;
  background: linear-gradient(135deg, rgba(254, 128, 59, 1), rgba(190, 49, 30, 1));
  border-radius: 20px;
  overflow: hidden;
}

.swiper-container {
  position: relative;
  width: 1020px;
  margin: 0 auto;
}

.slide {
  width: 308px;
  height: 458px;
  border: 6px solid #f3a070;
  border-radius: 20px;
  position: relative;
  overflow: hidden;
}

.swiper-slide img {
  width: 100%;
  height: 100%;
  border-radius: 14px;
}

.swiper-slide:hover .shadow {
  transform: translateY(0);
}

.shadow {
  position: absolute;
  bottom: 0;
  left: 0;
  padding: 0 30px;
  color: #fff;
  transform: translateY(500px);
  transition: transform .5s ease;
}

.shadow_bg {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 308px;
  height: 324px;
  background-image: url(../images/shadow.png);
  background-repeat: no-repeat;
  z-index: 1;
}

.shadow_msg {
  position: relative;
  padding-bottom: 20px;
  z-index: 2;
  text-align: center;
}

.name {
  padding-bottom: 20px;
  font-size: 28px;
  font-weight: bold;
}

.shadow_txt01 {
  padding-bottom: 20px;
  color: #ff0;
}

.shadow_msg img {
  width: 104px;
  height: 18px;
  margin: 14px auto;
}

.info {
  font-size: 14px;
  text-align: left;
  line-height: 30px;
}

.prev, .next {
  position: absolute;
  top: 50%;
  left: -60px;
  width: 120px;
  height: 120px;
  margin-top: -60px;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 50%;
  cursor: pointer;
}

.prev img, .next img {
  position: absolute;
  top: 50%;
  left: 70px;
  margin-top: -15px;
}

.next {
  left: auto;
  right: -60px;
}

.next img {
  left: 30px;
  transform: rotate(-180deg);
}

.box02 {
  padding-top: 44px;
}

.box02_tips {
  padding-bottom: 50px;
  font-size: 28px;
  text-align: center;
}

.box02_tips span {
  color: #b84720;
}

.box02 li {
  float: left;
  width: 320px;
  height: 506px;
  padding: 30px;
  background: linear-gradient(135deg, rgba(233, 99, 48, 1), rgba(250, 162, 60, 1));
  border-radius: 20px;
  color: #fff;
}

.box02 li:nth-child(2) {
  margin: 0 30px;
}

.box02 li img {
  width: 240px;
  border: 6px solid #f8b977;
  margin: 0 auto;
  border-radius: 10px;
}

.box02 li span {
  display: block;
  padding: 20px 0;
  text-align: center;
}

.list_title {
  font-size: 24px;
  font-weight: bold;
  text-align: center;
}

.box02 li p {
  margin-top: 18px;
  font-size: 16px;
  line-height: 30px;
}

.box02 .list02 {
  background: linear-gradient(135deg, rgba(190, 49, 30, 1), rgba(254, 128, 59, 1));
}

.box03 {
  padding-top: 44px;
}

.box03_list {
  margin-top: 40px;
}

.box03_list li {
  position: relative;
  float: left;
  height: 240px;
  padding: 0 30px;
  border-radius: 20px;
  background: linear-gradient(135deg, rgba(233, 99, 48, 1), rgba(250, 162, 60, 1));
  color: #fff;
}

.list04 {
  width: 480px;
}

.list05, .list06 {
  width: 240px;
}

.box03_list .list05 {
  margin: 0 30px;
  background: linear-gradient(135deg, rgba(190, 49, 30, 1), rgba(254, 128, 59, 1));
}

.list_btn {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 197px;
  height: 51px;
  border: 3px solid #fff;
  margin: -25px auto 25px auto;
  background: linear-gradient(135deg, rgba(233, 99, 48, 1), rgba(250, 162, 60, 1));
  border-radius: 28px;
  color: #fff;
  font-size: 22px;
}

.list_btn p {
  margin: 0 10px;
}

.list_btn01 {
  background: linear-gradient(135deg, rgba(190, 49, 30, 1), rgba(254, 128, 59, 1));
}

.list_msg {
  margin-bottom: 20px;
}

.list_msg img {
  float: left;
  margin-top: 5px;
  margin-right: 10px;
}

.list05 .list_msg p, .list06 .list_msg p {
  width: 200px;
}

.list_msg p {
  float: left;
  width: 448px;
  line-height: 30px;
}

.box04 {
  padding-top: 44px;
}

.region_change {
  height: 80px;
  padding: 0 10px;
  margin-top: 25px;
  margin-bottom: 25px;
  box-shadow: 0px 3px 15px 0px rgba(154, 101, 55, 0.15);
  border-radius: 40px;
}

.region_btn {
  position: relative;
  float: left;
  width: 120px;
  height: 60px;
  margin-top: 10px;
  margin-right: 10px;
  line-height: 60px;
  text-align: center;
  cursor: pointer;
  border-radius: 40px;
  font-size: 20px;
  z-index: 0;
}

.region_btn:last-child {
  margin-right: 0;
}

.region_btn::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  border-radius: 40px;
  background: linear-gradient(135deg, rgba(190, 49, 30, 1), rgba(254, 128, 59, 1));
  opacity: 0;
  transition: opacity .5s;
  z-index: -1;
}

.region_btn.active::before {
  opacity: 1;
}

.region_btn:hover {
  color: rgba(184, 71, 32, 1);
}

.region_btn.active {
  color: #fff;
}

.region_slide {
  display: none;
  padding-top: 50px;
  padding-bottom: 60px;
}

.region_slide.active {
  display: block;
}

.region_slide p {
  padding-bottom: 50px;
  font-size: 30px;
  text-align: center;
}

.region_slide a {
  position: relative;
  float: left;
  width: 550px;
  height: 100px;
  background-color: #edebeb;
  border-radius: 80px;
  line-height: 100px;
  text-align: center;
  z-index: 0;
  font-size:30px;
}
.region_slide a:nth-child(even){
  float: right;
}
.region_slide a::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  border-radius: 80px;
  background: linear-gradient(135deg, rgba(190, 49, 30, 1), rgba(254, 128, 59, 1));
  opacity: 0;
  transition: opacity .5s;
  z-index: -1;
}

.region_slide a:hover::before {
  opacity: 1;
}

.region_slide a:hover {
  color: #fff;
}

.region_slide a:nth-child(8n) {
  margin-right: 0;
}

@media only all and (max-width:1080px) {
  .banner {
    height: 15.675rem;
    padding-top: 1.5rem;
    background-image: url(../images/m_banner.png);
    background-size: 100%;
  }

  .banner img {
    width: 18rem;
    margin-top: .5rem;
  }

  .txt02 {
    padding-top: 1.6rem;
    font-size: .8rem;
  }

  .banner_title {
    font-size: 1.2rem;
  }

  .banner_title::after, .banner_title::before {
    top: .5rem;
    left: -1rem;
    width: .8rem;
    height: .8rem;
    background-size: 100%;
  }

  .banner_title::after {
    left: auto;
    right: -1rem;
  }

  .box01 {
    padding-top: 1rem;
  }

  .title {
    width: 7.775rem;
    height: 2.825rem;
    margin: 0 auto .35rem auto;
    line-height: 2.825rem;
    background-size: 100%;
    font-size: 1rem;
  }

  .box01_tips {
    margin-top: .7rem;
    line-height: 1.1rem;
  }

  .box01_tips span {
    font-size: .85rem;
  }

  .box01_tips b {
    font-size: .85rem;
  }

  .slide_wrap {
    padding: .75rem 0;
    margin-top: 1rem;
    border-radius: .5rem;
  }

  .slide {
    width: calc(94% - .15rem);
    height: 23.45rem;
    margin: 0 auto;
    border: .15rem solid #f3a070;
    border-radius: .5rem;
  }

  .swiper-slide img {
    font-size: .5rem;
  }

  .swiper-container {
    width: 100%;
  }

  .box02 {
    padding-top: 1rem;
  }

  .box02_tips {
    padding-bottom: 1rem;
    font-size: .75rem;
  }

  .box02 li {
    float:none;
    width: calc(100% - 1rem);
    height: auto;
    padding: .75rem .5rem 1rem .5rem;
    margin-right: 0;
    margin-bottom: .5rem;
    border-radius: .5rem;
  }

  .box02 li img {
    width: 100%;
    border: .15rem solid #f8b977;
    border-radius: .25rem;
  }

  .box02 li span {
    padding: .5rem 0;
  }

  .list_title {
    font-size: .85rem;
  }

  .box02 li p {
    margin-top: .4rem;
    font-size: .7rem;
    line-height: 1.1rem;
  }

  .box02 li:nth-child(2) {
    margin: 0 0 .5rem 0;
  }

  .box02 li:nth-child(3) {
    height: auto;
  }

  .box03 {
    padding-top: 1rem;
  }

  .box03_list {
    margin-top: 1.5rem;
  }

  .box03_list li {
    float: none;
    width: calc(100% - 1rem);
    height: auto;
    padding: .5rem;
    border-radius: .5rem;
  }

  .list_btn {
    width: 7.5rem;
    height: 1.275rem;
    border-width: .075rem;
    margin: -1.2rem auto .625rem auto;
    border-radius: .7rem;
    font-size: .78rem;
  }

  .list_btn p {
    margin: 0 .25rem;
  }

  .list_msg img {
    width: .8rem;
    margin-top: .15rem;
    margin-right: .25rem;
  }

  .list_msg p {
    width: calc(100% - 1.05rem);
    line-height: 1.1rem;
  }

  .list_msg {
    margin-bottom: .5rem;
  }

  .box03_list .list05 {
    margin: 1rem 0;
  }

  .list05 .list_msg p, .list06 .list_msg p {
    width: calc(100% - 1.05rem);
  }

  .box04 {
    padding-top: 1rem;
  }

  .region_change {
    height: auto;
    margin-top: 1rem;
    margin-bottom: .5rem;
    padding: .5rem;
    border-radius: .4rem;
    box-shadow: 0 0 .25rem #ddd;
  }

  .region_btn {
    float: left;
    width: 24.25%;
    height: 1.3rem;
    margin: 0 1% .3rem 0;
    line-height: 1.3rem;
    border-radius: 1rem;
    font-size: .7rem;
  }

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

  .region_slide {
    padding-top: .5rem;
    padding-bottom: 1rem;
  }

  .region_slide p {
    padding-bottom: 1rem;
    font-size: .75rem;
  }

  .region_slide a {
    width: 49%;
    height: 1.7rem;
    line-height: 1.7rem;
    font-size: .9rem;
  }

  .shadow {
    width: calc(100% - .75rem);
    padding: 0 .75rem;
  }

  .shadow_bg {
    width: 100%;
    background-size: 100% 100%;
  }

  .name {
    padding-bottom: .5rem;
    font-size: 1rem;
  }

  .shadow_txt01 {
    padding-bottom: .5rem;
  }

  .shadow_msg img {
    width: 4rem;
    height: auto;
    margin: .5rem auto;
  }

  .info {
    margin: 0 .5rem;
    font-size: .7rem;
    line-height: 1.1rem;
  }

  .prev, .next {
    left: 0;
    width: 1.8rem;
    height: 1.8rem;
    margin-top: -1rem;
    cursor: pointer;
    z-index: 10;
  }
  .next{
    left:auto;
    right: -0;
  }
  .prev img, .next img {
    width: .6rem;
    left: .5rem;
    margin-top: -.5rem;
  }
  .next img{
    left: .7rem;
  }
}