html, body {
  font-family: STSong,SimSun,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";
}

ul li {
  list-style: none;
}

a:hover {
  text-decoration: none;
}
@font-face {
    font-family: FZKai;
    src:url('../fonts/FZKai.ttf');
}
@keyframes beating{
	from {transform:translateY(0);}
	25% {transform:translateY(-20%);}
	50% {transform:translateY(0);}
	75% {transform:translateY(20%);}
	to {transform:translateY(0);}
}
@-webkit-keyframes beating{
	from {transform:translateY(0);}
	25% {transform:translateY(-20%);}
	50% {transform:translateY(0);}
	75% {transform:translateY(20%);}
	to {transform:translateY(0);}
}
@keyframes downArrow{
  from {transform: translateY(0);opacity:0;}
  50%{transform: translateY(10px);opacity:1;}
  to {transform: translateY(14px);opacity:0;}
}
@-webkit-keyframes downArrow{
  from {transform: translateY(0);opacity:0;}
  50%{transform: translateY(10px);opacity:1;}
  to {transform: translateY(14px);opacity:0;}
}
@keyframes arrowMove {
  0% {
    transform: translateX(0);
  }

  25% {
    transform: translateX(5px);
  }

  50% {
    transform: translateX(10px) scale(0.8, 1.1);
  }

  75% {
    ransform: translateX(5px);
  }

  100% {
    transform: translateX(0);
  }
}

@keyframes circleRotate {
  form {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}

@-webkit-keyframes circleRotate {
  form {
    -webkit-transform: rotate(0deg);
  }

  to {
    -webkit-transform: rotate(360deg);
  }
}

@keyframes leftToRight {
  from {
    transform: translateX(0);
    -webkit-transform: translateX(0);
  }

  to {
    transform: translateX(15px);
    -webkit-transform: translateX(15px);
  }
}

@-webkit-keyframes leftToRight {
  from {
    -webkit-transform: translateX(0);
  }

  to {
    -webkit-transform: translateX(15px);
  }
}

@keyframes yunCartoon {
  form {
    transform: translateX(0);
  }

  33% {
    transform: translateX(-25%);
  }

  66% {
    transform: translateX(25%);
  }

  to {
    transform: translateX(0);
  }
}

@-webkit-keyframes yunCartoon {
  form {
    -webkit-transform: translateX(0);
  }

  33% {
    -webkit-transform: translateX(-25%);
  }

  66% {
    -webkit-transform: translateX(25%);
  }

  to {
    -webkit-transform: translateX(0);
  }
}

.hidden {
  display: none;
  opacity: 0;
}

.mainBox {
  padding: 0 0 0 290px;
  position: relative;
  overflow: hidden;
}

.headerBox {
  width: 290px;
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  background: url(../images/headerBg.png) repeat 50% 0;
  z-index: 1000;
}

.headerBox .mobileNavBtn {
  display: none;
}

.language {
  display: flex;
  padding: 3.33vh 52px 0;
  width: 100%;
  margin-bottom: 0;
}

.language .list {
  flex: 1;
  text-align: center;
}

.language .list a {
  width: 37px;
  height: 23px;
  border-radius: 8px;
  background-color: rgba(98, 161, 141, 0.102);
  display: block;
  color: #999;
  font-size: 0.875rem;
  transition: all .3s;
}

.language .list a:hover {
  color: #000;
  background-color: rgba(98, 161, 141, 0.478);
}

.weather {
  display: inline-block;
  padding: 2.31vh 0 0;
  margin: 0 auto;
}

.weather li {
  display: inline-block;
  vertical-align: middle;
}

.weather .weatherNum {
  color: #62a18d;
  font-size: 1.125rem;
  line-height: 32px;
}

.weather .weatherText {
  color: #62a18d;
  font-size: 1.25rem;
  line-height: 32px;
}

.weather .weatherIcon {
  width: 32px;
  height: 32px;
  background: url(../images/weather.png) -32px;
  background-size: cover;
}

.weather .weatherLine {
  width: 26px;
  height: 1px;
  background: #62a18d;
  margin: 0 8px;
}

.logo {
  text-align: center;
  padding: 6.11vh 0 0;
}

.homeNav {
  display: block;
  position: relative;
  margin-top: 4.16vh;
  width: 100%;
  height: 400px;
  padding-left: 0;
  margin-bottom: 0;
}
.homeNav *{
  font-family: FZKai;
}
.homeNav .homeNavListImg {
  width: 92px;
  border-bottom: 1px solid #dedede;
  height: 7.4vh;
  margin-bottom: 0;
  position: relative;
}

.homeNav .homeNavListImg::before {
  content: '';
  position: absolute;
  width: 28px;
  height: 28px;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  opacity: 0.4;
  transition: opacity 0.4s;
}

.homeNav .homeNavList:nth-child(1) .homeNavListImg::before {
  background: url(../images/nav1.png);
}

.homeNav .homeNavList:nth-child(2) .homeNavListImg::before {
  background: url(../images/nav2.png);
}

.homeNav .homeNavList:nth-child(3) .homeNavListImg::before {
  background: url(../images/nav3.png);
}

.homeNav .homeNavList:nth-child(4) .homeNavListImg::before {
  background: url(../images/nav4.png);
}

.homeNav .homeNavList:nth-child(5) .homeNavListImg::before {
  background: url(../images/nav5.png);
}

.homeNav .homeNavList:last-child .homeNavListImg {
  border: none;
}

.homeNav .homeNavList:hover .homeNavListImg::before {
  opacity: 1;
}

.homeNav .homeNavList:hover .childNav {
  visibility: visible;
  transform: translateX(-50%);
  opacity: 1;
  z-index: 1;
}

.homeNav .childNav {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-100%);
  transition: opacity 0.4s, transform cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.4s;
  visibility: hidden;
  opacity: 0;
  height: 100%;
  padding-top: 30%;
  z-index: -1;
}

.homeNav .childNav .childNavList {
  font-size: 1.25rem;
  line-height: 50px;
}

.homeNav .childNav .childNavList a {
  color: #666;
  position: relative;
  -moz-transition: all 0.3s cubic-bezier(0.28, 0.11, 0.32, 1);
  -o-transition: all 0.3s cubic-bezier(0.28, 0.11, 0.32, 1);
  -webkit-transition: all 0.3s cubic-bezier(0.28, 0.11, 0.32, 1);
  transition: all 0.3s cubic-bezier(0.28, 0.11, 0.32, 1);
}

.homeNav .childNav .childNavList a::before {
  display: block;
  background-color: #259c76;
  height: 1px;
  position: absolute;
  bottom: -10px;
  left: 0;
  right: 100%;
  content: '';
  -moz-transition: all 0.3s cubic-bezier(0.28, 0.11, 0.32, 1);
  -o-transition: all 0.3s cubic-bezier(0.28, 0.11, 0.32, 1);
  -webkit-transition: all 0.3s cubic-bezier(0.28, 0.11, 0.32, 1);
  transition: all 0.3s cubic-bezier(0.28, 0.11, 0.32, 1);
}

.homeNav .childNav .childNavList a:hover {
  color: #259c76;
}

.homeNav .childNav .childNavList a:hover::before {
  right: 0;
}

.homeNav .navDefault {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1;
  -moz-transition: all 0.5s cubic-bezier(0.28, 0.11, 0.32, 1);
  -o-transition: all 0.5s cubic-bezier(0.28, 0.11, 0.32, 1);
  -webkit-transition: all 0.5s cubic-bezier(0.28, 0.11, 0.32, 1);
  transition: all 0.5s cubic-bezier(0.28, 0.11, 0.32, 1);
}

.homeNav .navDefault .homeNavListImg {
  width: 204px;
}

.homeNav .navDefault .homeNavListImg::before {
  opacity: 1;
  right: 96px;
}

.homeNav .navDefault .homeNavListImg .homeNavListText {
  line-height: 7.4vh;
  font-size: 1.3rem;
  color: #666;
  float: right;
  display: inline-block;
  width: 86px;
  text-align: center;
  font-weight: 400;
}

.homeNav .navHover {
  position: absolute;
  top: 0;
  transform: translateX(-50%);
  opacity: 0;
  width: 100%;
  z-index: 2;
  -moz-transition: all 0.8s cubic-bezier(0.28, 0.11, 0.32, 1);
  -o-transition: all 0.8s cubic-bezier(0.28, 0.11, 0.32, 1);
  -webkit-transition: all 0.8s cubic-bezier(0.28, 0.11, 0.32, 1);
  transition: all 0.8s cubic-bezier(0.28, 0.11, 0.32, 1);
}
.homeNav .mobileNav{
  display: none;
}
.homeNav:hover .navDefault {
  transform: translateX(-50%);
  opacity: 0;
}

.homeNav:hover .navHover {
  transform: translateX(0);
  opacity: 1;
}

.footer {
  color: #666666;
  font-size: 0.75rem;
  text-align: center;
  position: absolute;
  width: 100%;
  bottom: 25px;
}

.footer a {
  color: #666666;
}

.footer a:hover {
  color: #259c76;
}

.footerBtn {
  display: flex;
  padding: 0;
  position: absolute;
  bottom: 10%;
  left: 0;
  right: 0;
  margin: auto;
  width: 225px;
  text-align: center;
}

.footerBtn p {
  margin: 0;
}

.footerBtn .btnList {
  flex: 1;
  cursor: pointer;
  transition: .3s;
}
.footerBtn .btnList:hover{
	transform: translateY(-8px);
}

.footerBtn .btnList .icon {
  width: 37px;
  height: 34px;
  margin: 5px auto;
}

.footerBtn .btnList .text {
  color: #666666;
  font-size: 0.875rem;
}

.footerBtn .btnList:nth-child(1) .icon {
  background: url(../images/footerBtn1.png);
}

.footerBtn .btnList:nth-child(2) .icon {
  background: url(../images/footerBtn2.png);
}

.footerBtn .btnList:nth-child(3) .icon {
  background: url(../images/footerBtn3.png);
}

.footerBtn .btnList:nth-child(4) .icon {
  background: url(../images/footerBtn4.png);
}

.footerBtn .btnList:nth-child(5) .icon {
  background: url(../images/footerBtn5.png);
}

.footerBtn .btnList:hover .icon {
  background-position-x: -37px;
}

.footerBtn .btnList:hover .text {
  color: #62a18d;
}

.homeBannerBox {
  width: 100%;
  height: 100vh;
  position: relative;
}

.homeBannerBox #homeBanner {
  height: 100%;
}

.homeBannerBox .swiper-wrapper {
  transition-timing-function: ease-in-out;
}

.homeBannerBox .homeBannerImg {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.homeBannerBox .swiper-button-next {
  width: 56px;
  height: 56px;
  background: url(../images/bannerBtnR.png);
  left: 270px;
  margin-top: 0;
  top: initial;
  bottom: 52px;
  transition: background .3s;
  z-index: 3;
  cursor: pointer;
}

.homeBannerBox .swiper-button-next:hover {
  background: url(../images/bannerBtnRH.png);
}

.homeBannerBox .swiper-button-next:focus {
  outline: none;
}

.homeBannerBox .swiper-button-prev {
  width: 56px;
  height: 56px;
  background: url(../images/bannerBtnL.png);
  left: 80px;
  margin-top: 0;
  top: initial;
  bottom: 52px;
  transition: background .3s;
  z-index: 3;
  cursor: pointer;
}

.homeBannerBox .swiper-button-prev:hover {
  background: url(../images/bannerBtnLH.png);
}

.homeBannerBox .swiper-button-prev:focus {
  outline: none;
}

.homeBannerBox .swiper-pagination {
  position: absolute;
  color: #fff;
  font-size: 1.25rem;
  display: inline-block;
  width: auto;
  left: 190px;
  bottom: 64px;
}

.homeBannerBox .scroll {
  width: 100%;
  padding: 0 0 30px 5px;
  text-align: center;
  color: #fff;
  line-height: 1;
  font-size: 0.875rem;
  letter-spacing: 2.8px;
  text-transform: lowercase;
  position: absolute;
  bottom: 30px;
  left: 0;
  z-index: 2;
}

.homeBannerBox .scroll p {
  margin-bottom: 10px;
}
.homeBannerBox .scroll img {
  animation: downArrow ease-out 2s infinite;
  -webkit-animation: downArrow ease-out 2s infinite;
}

.homeBtnTop {
  position: absolute;
  top: 102px;
  right: 177px;
  z-index: 2;
}

.homeBtnTop .text {
  color: #fff;
  font-size: 1.25rem;
  font-family: STSong,SimSun;
  writing-mode: tb-rl;
    /*IE*/
  -o-writing-mode: vertical-rl;
    /*Opera*/
  -webkit-writing-mode: vertical-rl;
    /*Chrome, Safari*/
  -ms-writing-mode: tb-rl;
  writing-mode: vertical-rl;
    /*Firefox, Edge*/
  margin: 32px auto;
}

.homeBtnTop .playBtn {
  display: block;
  width: 40px;
  height: 40px;
  background: url(../images/playBtn.png);
  margin: auto;
  transition: .3s;
}
.homeBtnTop .playBtn:hover{
	transform: scale(1.1);
}

#videoBox video {
  width: 100%;
  max-height: 80vh;
  object-fit: contain;
}

#videoBox .modal-dialog {
  max-width: 69vw;
  max-height: 90vh;
  height: 90vh;
}

.homeScenic {
  width: 100%;
  height: 100vh;
  position: relative;
  background: url(../images/homeScenicBg.png) no-repeat center,url(../images/homeScenicBg.jpg) no-repeat center;
  background-size: cover;
  padding: 21.29vh 0 0;
}

.homeScenic .scenicImg {
  object-fit: cover;
}

.homeScenic .bigBox {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background: url(../images/homeScenicBg1.png) no-repeat 18% 90%;
}

.homeScenic .titleTop {
  right: 300px;
  top: -45px;
}

.homeScenic #scenicSwiper {
  padding-top: 9.2vh;
}

.homeScenic .scenicPagination {
  bottom: initial;
  top: 10px;
}

.homeScenic .scenicPagination :focus {
  outline: none;
}

.homeScenic .scenicPagination .list {
  width: 140px;
  position: relative;
  margin: 0;
  opacity: 1;
  background: none;
  color: #999;
  font-size: 1.375rem;
  height: 22px;
  line-height: 1em;
  display: inline-block;
}

.homeScenic .scenicPagination .list::after {
  content: '';
  position: absolute;
  height: 4px;
  width: 100%;
  background: #aaa;
  bottom: -1em;
  left: 0;
}

.homeScenic .scenicPagination .list::before {
  display: block;
  background-color: #259c76;
  height: 4px;
  position: absolute;
  bottom: -1em;
  left: 0;
  right: 100%;
  content: '';
  -moz-transition: all 0.3s cubic-bezier(0.28, 0.11, 0.32, 1);
  -o-transition: all 0.3s cubic-bezier(0.28, 0.11, 0.32, 1);
  -webkit-transition: all 0.3s cubic-bezier(0.28, 0.11, 0.32, 1);
  transition: all 0.3s cubic-bezier(0.28, 0.11, 0.32, 1);
  z-index: 2;
}

.homeScenic .scenicPagination .list:hover::before {
  right: 0;
}
.homeScenic .scenicPagination .list:hover {
  color: #259c76;
}
.homeScenic .scenicPagination .list a {
  color: #999;
}

.homeScenic .scenicPagination .swiper-pagination-bullet-active {
  color: #259c76;
}

.homeScenic .scenicPagination .swiper-pagination-bullet-active::before {
  right: 0;
}

.homeScenic .textBigBox {
  width: 100%;
  position: relative;
  height: 253px;
}

.homeScenic .textBox {
  width: 612px;
  background: white;
  position: absolute;
  right: 15vw;
  z-index: 2;
  padding: 1.56vh 40px;
  line-height: 1.8em;
  bottom: 15vh;
}

.homeScenic .textBox p {
  margin-bottom: .5em;
}

.homeScenic .textBox a {
  color: #333;
}

.homeScenic .textBox .textBoxMore {
  float: right;
}

.homeScenic .textBox:hover .textBoxMore {
  animation: arrowMove 0.9s linear infinite;
  animation-iteration-count: 2;
}

.homeStrategy {
  width: 100%;
  height: 100vh;
  background: url(../images/headerBg.png) repeat 50% 0;
  position: relative;
  padding: 12.5vh 0;
}

.homeStrategy .box {
  overflow: hidden;
}

.homeStrategy .titleTop {
  left: 246px;
  top: -45px;
}

.homeStrategy .moreBox {
  text-align: right;
}

.homeStrategy .strategyMore {
  display: inline-block;
  position: relative;
  width: 152px;
  height: 56px;
  text-align: center;
  line-height: 56px;
  color: #999;
  font-size: 1.5rem;
  -webkit-transform: perspective(1px) translateZ(0);
  transform: perspective(1px) translateZ(0);
  transition: .3s;
}

.homeStrategy .strategyMore::before {
  position: absolute;
  content: '';
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  background: url(../images/titleBg.png) repeat 0 0;
  z-index: -1;
  transition: .3s;
}

.homeStrategy .strategyMore::after {
  position: absolute;
  content: '';
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  z-index: -1;
  border: 1px solid #259c76;
  opacity: 0;
  transform: scale(0);
  transition: .3s;
}

.homeStrategy .strategyMore:hover {
  color: #259c76;
}

.homeStrategy .strategyMore:hover::before {
  transform: scale(0);
  opacity: 0;
}

.homeStrategy .strategyMore:hover::after {
  transform: scale(1);
  opacity: 1;
}

.homeStrategy .strategyBox {
  margin-left: -60px;
  margin-right: -60px;
  margin-top: 10.9vh;
}

.homeStrategy .strategyList {
  padding-left: 60px;
  padding-right: 60px;
}

.homeStrategy .strategyList .name {
  font-size: 1.5rem;
  color: #666;
  transition: .5s;
  margin: 40px 0 25px;
}

.homeStrategy .strategyList .info {
  font-size: 0.875rem;
  color: #666;
  padding: 0 25px;
  transition: .5s;
  margin: 0 0 25px;
}

.homeStrategy .strategyList .more {
  display: inline-block;
  width: 31px;
  height: 21px;
  background: url(../images/upArrow.png);
  transition: .3s;
}
.homeStrategy .strategyList .imgBox img{
  transition: .3s;
}
.homeStrategy .strategyList:hover .imgBox img {
  transform: scale(1.015);
}

.homeStrategy .strategyList:hover .name {
  color: #259c76;
}

.homeStrategy .strategyList:hover .info {
  color: #259c76;
}

.homeStrategy .strategyList:hover .more {
  background-position: 0 -21px;
}

.homeStrategy .strategyList:hover .imgBox::before {
  opacity: 1;
  transform: scale(1);
}

.homeStrategy .imgBox {
  width: 100%;
  height: 0;
  padding-bottom: 100%;
  overflow: hidden;
  position: relative;
}

.homeStrategy .imgBox img {
  object-fit: cover;
  position: absolute;
  width: 98%;
  height: 98%;
  border-radius: 50%;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  margin: auto;
}

.homeStrategy .imgBox::before {
  position: absolute;
  content: '';
  width: 35px;
  height: 35px;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
  background: url(../images/strategyAdd.png);
  z-index: 2;
  opacity: 0;
  transform: scale(0);
  transition: .3s;
  background-size: cover;
}

.homeStrategy .imgBox::after {
  position: absolute;
  content: '';
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url(../images/strategyListBg.png);
  background-size: contain;
}

.homePlay {
  width: 100%;
  height: 100vh;
  position: relative;
  background: url(../images/homePlayBg.jpg) no-repeat center;
  background-size: cover;
}

.homePlay .homeAnimationBox {
  width: 100%;
  height: 100%;
  position: relative;
  padding: 7% 10%;
}

.homePlay .bigBox {
  width: 100%;
  height: 100%;
  /*background: url(../images/homePlayBg1.png) no-repeat center;*/
  background-size: contain;
}

.homePlay .playBox {
  width: 615px;
  height: 615px;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
}

.homePlay .playBox:hover .circleList {
  opacity: 1;
  visibility: visible;
}

.homePlay .playBox .circle {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  border-radius: 50%;
}

.homePlay .playBox .circle .itemList {
  width: 100%;
  height: 100%;
  padding: 0;
  margin: 0;
  position: relative;
  z-index: 1;
}

.homePlay .playBox .circle .itemList .itemListBg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  padding: 200px 0;
  text-align: center;
}

.homePlay .playBox .circle .itemList .itemListBg .num {
  color: #fff;
  font-size: 1.5rem;
}

.homePlay .playBox .circle .itemList .itemListBg .nameCh {
  color: #e1f6ef;
  font-size: 2.25rem;
}

.homePlay .playBox .circle .itemList .itemListBg .nameEn {
  color: #e1f6ef;
  font-size: 1rem;
}

.homePlay .playBox .circle .itemList .itemListBg .more {
  display: inline-block;
  animation: leftToRight 1.2s 0.1s infinite linear alternate;
  -webkit-animation: leftToRight 1.2s 0.1s infinite linear alternate;
}

.homePlay .playBox .circle .itemList .itemListBg:nth-child(1) {
  background: url(../images/itemListLine.png) center no-repeat, url(../images/itemListBg1.png) center no-repeat;
  z-index: 6;
  background-size: cover;
}

.homePlay .playBox .circle .itemList .itemListBg:nth-child(2) {
  background: url(../images/itemListLine.png) center no-repeat, url(../images/itemListBg2.png) center no-repeat;
  z-index: 5;
  background-size: cover;
}

.homePlay .playBox .circle .itemList .itemListBg:nth-child(3) {
  background: url(../images/itemListLine.png) center no-repeat, url(../images/itemListBg3.png) center no-repeat;
  z-index: 4;
  background-size: cover;
}

.homePlay .playBox .circle .itemList .itemListBg:nth-child(4) {
  background: url(../images/itemListLine.png) center no-repeat, url(../images/itemListBg4.png) center no-repeat;
  z-index: 3;
  background-size: cover;
}

.homePlay .playBox .circle .itemList .itemListBg:nth-child(5) {
  background: url(../images/itemListLine.png) center no-repeat, url(../images/itemListBg5.png) center no-repeat;
  z-index: 2;
  background-size: cover;
}

.homePlay .playBox .circle .itemList .itemListBg:nth-child(6) {
  background: url(../images/itemListLine.png) center no-repeat, url(../images/itemListBg6.png) center no-repeat;
  z-index: 1;
  background-size: cover;
}

.homePlay .playBox .circle .itemBtn {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  padding: 0;
  margin: 0;
}

.homePlay .playBox .circle .itemBtnList {
  width: 88px;
  height: 88px;
  display: block;
  position: absolute;
  z-index: 9;
  transition: background-color .3s;
  background-position: center;
  background-repeat: no-repeat;
  background-color: #259c76;
  border-radius: 50%;
}
.homePlay .playBox .circle .itemBtnList a{
  display: block;
  width: 100%;
  height: 100%;
}

.homePlay .playBox .circle .itemBtnList:hover {
  background-color: #62a18d;
}

.homePlay .playBox .circle .itemBtnList:nth-child(1) {
  left: 50%;
  top: 32px;
  transform: translateX(-50%);
}

.homePlay .playBox .circle .itemBtnList:nth-child(2) {
  right: 60px;
  top: 146px;
}

.homePlay .playBox .circle .itemBtnList:nth-child(3) {
  right: 60px;
  bottom: 146px;
}

.homePlay .playBox .circle .itemBtnList:nth-child(4) {
  left: 50%;
  bottom: 32px;
  transform: translateX(-50%);
}

.homePlay .playBox .circle .itemBtnList:nth-child(5) {
  left: 60px;
  bottom: 146px;
}

.homePlay .playBox .circle .itemBtnList:nth-child(6) {
  left: 60px;
  top: 146px;
}

.homePlay .playBox .circle .itemBtnList:nth-child(1) {
  background-image: url(../images/itemListBtn1.png);
}

.homePlay .playBox .circle .itemBtnList:nth-child(2) {
  background-image: url(../images/itemListBtn2.png);
}

.homePlay .playBox .circle .itemBtnList:nth-child(3) {
  background-image: url(../images/itemListBtn3.png);
}

.homePlay .playBox .circle .itemBtnList:nth-child(4) {
  background-image: url(../images/itemListBtn4.png);
}

.homePlay .playBox .circle .itemBtnList:nth-child(5) {
  background-image: url(../images/itemListBtn5.png);
}

.homePlay .playBox .circle .itemBtnList:nth-child(6) {
  background-image: url(../images/itemListBtn6.png);
}

.homePlay .playBox .circleList {
  opacity: 0;
  visibility: hidden;
  transition: opacity 1s;
}

.homePlay .playBox .circle1 {
  width: 389px;
  height: 469px;
  border-radius: 50%;
  background-color: #b6d0b5;
  position: absolute;
  top: 0;
  left: 33px;
}

.homePlay .playBox .circle2 {
  border-radius: 50%;
  background-color: #b6d0b5;
  position: absolute;
  width: 447px;
  height: 438px;
  top: 0;
  right: 32px;
}

.homePlay .playBox .circle3 {
  border-radius: 50%;
  background-color: #b6d0b5;
  position: absolute;
  width: 447px;
  height: 451px;
  top: 87px;
  right: -23px;
}

.homePlay .playBox .circle4 {
  border-radius: 50%;
  background-color: #b6d0b5;
  position: absolute;
  width: 481px;
  height: 431px;
  bottom: -14px;
  right: 44px;
}

.homePlay .playBox .circle5 {
  border-radius: 50%;
  background-color: #b6d0b5;
  position: absolute;
  width: 487px;
  height: 466px;
  left: 0;
  bottom: 13px;
}

.homePlay .playBox .circle6 {
  border-radius: 50%;
  background-color: #b6d0b5;
  position: absolute;
  width: 512px;
  height: 479px;
  top: 40px;
  left: -10px;
}

.homeNews {
  min-height: 68vh;
  width: 100%;
  background: url(../images/headerBg.png) repeat 50% 0;
  position: relative;
}

.homeNews .newsAnimationBox {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  /*background: url(../images/homeNewsBg.png) no-repeat 90% bottom;*/
}

.homeNews .container-fluid {
  padding-right: 60px;
  padding-left: 60px;
  padding-bottom: 75px;
}

.homeNews .container-fluid > p {
  margin-bottom: 0;
}

.homeNews .titleTop {
  left: calc(50% - 122px / 2);
  top: -45px;
}

.homeNews .homeNewsRow {
  margin-left: -60px;
  margin-right: -60px;
  padding-top: 25vh;
}

.homeNews .homeNewsList {
  padding: 24px 60px;
  position: relative;
}

.homeNews .homeNewsList em {
  font-style: normal;
}

.homeNews .homeNewsList:after {
  position: absolute;
  content: '';
  height: 1px;
  left: 0;
  right: 0;
  margin: 0 60px;
  bottom: 0;
  background: #e1e1e1;
}

.homeNews .moreBtn {
  display: inline-block;
  width: 22px;
  height: 22px;
  background: url(../images/moreBtn.png);
}

.homeNews .moreText {
  font-size: 1.25rem;
  color: #999;
}

.homeNews .homeNewsListTitle {
  color: #333;
  font-size: 1.625rem;
}

.homeNews .newsBox {
  padding: 0 60px;
}

.homeNews .newsBoxDate {
  font-size: 1.375rem;
  color: #333;
}

.homeNews .newsBoxInfo {
  font-size: 0.875rem;
  color: #333;
  text-indent: 2em;
}

.homeNews .newsBoxImgBox {
  width: 100%;
  height: 0;
  padding-bottom: 100%;
  background: #62a18d;
  border-radius: 50%;
  position: relative;
  transform: scale(0);
  opacity: 0;
  transition: .3s;
}

.homeNews .newsBoxImg {
  width: 90%;
  height: 0;
  padding-bottom: 90%;
  background-size: cover;
  background-position: center;
  border-radius: 50%;
  position: relative;
  top: 6px;
  left: 2%;
}

.homeNews .homeNewsRowList:hover .moreText {
  color: #62a18d;
}

.homeNews .homeNewsRowList:hover .moreBtn {
  background-position-x: -22px;
}

.homeNews .homeNewsRowList:hover .homeNewsList:after {
  background: #62a18d;
}

.homeNews .homeNewsRowList:hover .newsBoxImgBox {
  transform: scale(1);
  opacity: 1;
}

.homeNews .newsMore {
  display: inline-block;
  position: relative;
  width: 152px;
  height: 56px;
  text-align: center;
  line-height: 56px;
  color: #999;
  font-size: 1.5rem;
  -webkit-transform: perspective(1px) translateZ(0);
  transform: perspective(1px) translateZ(0);
  transition: .3s;
  margin-top: 5vh;
}

.homeNews .newsMore::before {
  position: absolute;
  content: '';
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  background: url(../images/titleBg.png) repeat 0 0;
  z-index: -1;
  transition: .3s;
}

.homeNews .newsMore::after {
  position: absolute;
  content: '';
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  z-index: -1;
  border: 1px solid #259c76;
  opacity: 0;
  transform: scale(0);
  transition: .3s;
}

.homeNews .newsMore:hover {
  color: #259c76;
}

.homeNews .newsMore:hover::before {
  transform: scale(0);
  opacity: 0;
}

.homeNews .newsMore:hover::after {
  transform: scale(1);
  opacity: 1;
}

.titleTop {
  display: -moz-box;
  display: -webkit-box;
  display: -ms-flexbox;
  -ms-flex-wrap: nowrap;
  -ms-flex-direction: row-reverse;
  -ms-align-items: flex-end;
  -webkit-flex-wrap: nowrap;
  -webkit-flex-direction: row-reverse;
  -webkit-align-items: flex-end;
  flex-wrap: nowrap;
  flex-direction: row-reverse;
  align-items: flex-end;
  display: -webkit-flex;
  display: flex;
  background: url(../images/titleBg.png) repeat 0 0;
  width: 122px;
  padding: 75px 45px;
  line-height: 1;
  position: absolute;
  z-index: 10;
  color: #000;
}

.titleTop .titleZh {
  font-size: 1.5rem;
  writing-mode: tb-rl;
  -o-writing-mode: vertical-rl;
  -webkit-writing-mode: vertical-rl;
  -ms-writing-mode: tb-rl;
  writing-mode: vertical-rl;
  display: block;
  position: relative;
}

.titleTop .titleZh:after {
  display: block;
  background-color: #f64740;
  width: 20px;
  height: 1px;
  position: absolute;
  right: -11px;
  bottom: -8px;
  content: '';
  -moz-transform: rotate(-45deg);
  -ms-transform: rotate(-45deg);
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
}

.titleTop .titleEn {
  font-size: 0.75rem;
  display: block;
  margin-bottom: 4px;
  text-align: right;
  position: absolute;
  right: -moz-calc(100% - 30px);
  right: -webkit-calc(100% - 30px);
  right: calc(100% - 30px);
  bottom: 36px;
  -moz-transform-origin: 100% 100%;
  -ms-transform-origin: 100% 100%;
  -webkit-transform-origin: 100% 100%;
  transform-origin: 100% 100%;
  -moz-transform: rotate(90deg);
  -ms-transform: rotate(90deg);
  -webkit-transform: rotate(90deg);
  transform: rotate(90deg);
}

.footerBox {
  /*height: 32vh;*/
  width: 100%;
  background: url(../images/footerBg.png) repeat 50% 0;
  position: relative;
}

.footerBox .returnTop {
  display: none;
  width: 56px;
  height: 37px;
  background: url(../images/returnTop.png);
  margin: auto;
  cursor: pointer;
  transition: transform .3s;
  position: fixed;
  bottom: 20vh;
  right: 20px;
}

.footerBox .returnTop:hover {
  animation: beating 1.5s linear infinite;
}

.footerBox .footerLogo {
  padding: 5vh 0 0;
}

.footerBox .footerListBox {
  display: -moz-box;
  display: -webkit-box;
  display: -ms-flexbox;
  -ms-flex-wrap: nowrap;
  -ms-justify-content: center;
  display: -webkit-flexbox;
  -webkit-flex-wrap: nowrap;
  -webkit-justify-content: center;
  display: flexbox;
  flex-wrap: nowrap;
  justify-content: center;
  display: -webkit-flex;
  display: flex;
  padding: 40px 0;
  margin: 0;

}

.footerBox .footerList {
  font-size: 1.1rem;
  margin: 0 30px;
  position: relative;
  line-height: 1em;
}

.footerBox .footerList a {
  color: #000;
}

.footerBox .footerList a:hover {
  color: #259c76;
}

.footerBox .footerList::before {
  content: '';
  position: absolute;
  width: 12px;
  height: 10px;
  left: -24px;
  top: 4px;
  background: url(../images/footerList.png);
}

.subjectBox {
  width: 100%;
  min-height: 68vh;
  background: url(../images/headerBg.png) repeat 50% 0;
  position: relative;
  padding: 34vh 0 1rem 0;
}

.subjectBox .titleTop {
  left: 13vw;
  top: 5.5vh;
}

.subjectBox .subjectAnimationBox {
  width: calc(100% - 290px);
  height: 68vh;
  /*background: url(../images/animationUmbrella.png) center top no-repeat;*/
  position: fixed;
}

.subjectBox .subjectListBox .container-fluid .row {
  padding: 40px 3% 40px 5%;
  border-bottom: 1px solid rgba(153, 153, 153, 0.1);
  -webkit-transition: all 0.3s cubic-bezier(0.28, 0.11, 0.32, 1);
  transition: all 0.3s cubic-bezier(0.28, 0.11, 0.32, 1);
}

.subjectBox .subjectListBox .link {
  padding-right: 120px;
}

.subjectBox .subjectListBox .itemMore {
  padding: 0 0 0 40%;
  float: left;
}

.subjectBox .subjectListBox .arrow {
  float: right;
  color: #acacac;
  width: 14px;
  height: 37px;
  background-image: url(../images/rightArrowBtn.png);
  margin-top: 25px;
  -webkit-transition: all 0.3s cubic-bezier(0.28, 0.11, 0.32, 1);
  transition: all 0.3s cubic-bezier(0.28, 0.11, 0.32, 1);
}

.subjectBox .subjectListBox .title {
  color: #666;
  font-size: 1.5rem;
  transition: .3s;
  margin-bottom: 8px;
}

.subjectBox .subjectListBox .info {
  color: #666;
  font-size: 0.875rem;
  transition: .3s;
  margin-bottom: 0px;
}

.subjectBox .subjectListBox .day {
  color: #666;
  font-size: 1.5rem;
  margin-bottom: 0;
}

.subjectBox .subjectListBox .year {
  color: #666;
  font-size: 1.125rem;
}

.subjectBox .newsList:hover .row {
  background-color: rgba(255, 255, 255, 0.722);
  box-shadow: 2px 3.464px 6px 0px rgba(193, 193, 193, 0.72);
}

.subjectBox .newsList:hover .info, .subjectBox .newsList:hover .title {
  color: #259c76;
}

.subjectBox .newsList:hover .arrow {
  background-position-x: -14px;
}

.informationBox {
  width: 100%;
  min-height: 68vh;
  background: url(../images/headerBg.png) repeat 50% 0;
  position: relative;
  padding: 34vh 0 1rem 0;
  overflow: hidden;
}

.informationBox .titleTop {
  left: 13vw;
  top: 5.5vh;
}

.informationBox .informationAnimationBox {
  width: calc(100% - 290px);
  height: 68vh;
  /*background: url(../images/animationUmbrella.png) center top no-repeat;*/
  position: fixed;
}

.informationBox .item .itemRow {
  margin: 0 -60px;
}

.informationBox .item .imgBox {
  width: 100%;
  height: 310px;
  position: relative;
}

.informationBox .item .imgBox img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  -o-object-fit: cover;
}

.informationBox .item .imgBox::before {
  position: absolute;
  content: '';
  width: 56px;
  height: 56px;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  margin: auto;
  background: url(../images/strategyAdd.png) center no-repeat;
  background-size: cover;
  opacity: 0;
  transform: scale(0);
  transition: .3s;
}

.informationBox .item .list {
  padding: 86px 60px;
}

.informationBox .item .list:nth-child(even) {
  transform: translateY(-150px);
}

.informationBox .item .list .box {
  width: 100%;
  height: 100%;
}

.informationBox .item .list .box:hover .imgBox::before {
  opacity: 1;
  transform: scale(1);
}

.informationBox .item .list .box:hover .textBox {
  background-color: white;
  box-shadow: 2px 3.464px 8px 0px rgba(193, 193, 193, 0.72);
}

.informationBox .item .list .box:hover .title, .informationBox .item .list .box:hover .info {
  color: #259c76;
}

.informationBox .item .list .title {
  font-size: 1.5rem;
}

.informationBox .item .list .info {
  font-size: 0.875rem;
}

.informationBox .item .list .title, .informationBox .item .list .info {
  text-align: center;
  color: #000;
  transition: .3s;
  line-height: 1em;
}

.informationBox .item .list .textBox {
  padding: 22px 50px;
  transition: .3s;
}

.activityBox {
  width: 100%;
  height: 100vh;
  background: url(../images/footerBg.png) repeat 50% 0;
  position: relative;
  overflow: hidden;
}

.activityBox .activityAnimationBox {
  width: 80%;
  height: 100%;
  /*background: url(../images/activityAnimateBg.png) center no-repeat;*/
  position: absolute;
  top: 0;
  left: 0;
}

.activityBox .activityTitle {
  background: url(../images/titleBg.png) repeat 0 0;
  display: inline-block;
  padding: 25px 0;
  text-align: center;
  width: 194px;
  height: 124px;
  position: absolute;
  top: 100px;
  left: 50%;
  transform: translateX(-50%);
}

.activityBox .activityTitle .titleEn {
  font-size: 0.75rem;
  color: #000;
  line-height: 1em;
  margin-bottom: 0;
}

.activityBox .activityTitle .titleZh {
  font-size: 1.5rem;
  line-height: 1em;
  color: #000;
  margin: 10px auto;
  letter-spacing: .3em;
}

.activityBox .activityTitle .line {
  width: 1px;
  height: 30px;
  background: #f64740;
  display: inline-block;
}

.activityBox .contentBox {
  height: 43vh;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
}

.activityBox .contentBox .rightImg {
  position: relative;
}

.activityBox .contentBox .rightImg::before {
  position: absolute;
  content: '';
  width: 36px;
  height: 117px;
  background: url(../images/activityTitle.png);
  left: -45px;
}

.activityBox .contentBox .ticketTitle::before {
  width: 27px;
  height: 101px;
  background: url(../images/ticketTitle.png);
}

.activityBox .contentBox #activitySwiper {
  height: 43vh;
  cursor: s-resize;
}

.activityBox .contentBox #activitySwiper .swiper-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  -o-object-fit: cover;
}

.activityBox .contentBox #activitySwiper .swiper-wrapper {
  transition-timing-function: ease-in-out;
}

.activityBox .contentBox .textBox {
  width: 100%;
  height: 100%;
  position: relative;
  padding: 54px 130px 0 15px;
}

.activityBox .contentBox .textBox .time {
  color: #259c76;
  font-size: 1.5rem;
}

.activityBox .contentBox .textBox .title {
  font-size: 2rem;
  color: #333333;
}

.activityBox .contentBox .textBox .info {
  font-size: 1rem;
  color: #666666;
}

.activityBox .contentBox .textBox .booking {
  display: inline-block;
  padding: 0 35px;
  line-height: 45px;
  border: 1px solid #259c76;
  color: #259c76;
  font-size: 1.25rem;
  margin-top: 30px;
}

.activityBox .contentBox .textBox .telTitle {
  color: #259c76;
  margin: 20px 0 0;
}

.activityBox .contentBox .textBox .tel {
  font-size: 1.625rem;
  color: #259c76;
  margin: 0;
}

.activityBox .contentBox .textBox .date {
  font-size: 0.875rem;
  color: #259c76;
  margin: 0;
}

.activityBox .activityNum {
  width: 78%;
  bottom: 85px;
  text-align: left;
  font-size: 1.5rem;
  color: #999;
  left: 50%;
  position: absolute;
  transform: translateX(-50%);
  line-height: 2rem;
  padding-left: 5%;
}

.activityBox .activityNum .active {
  font-size: 2rem;
  color: #259c76;
}

.activityBox .activityPagination {
  width: 9px;
  right: 50px;
  top: 50%;
  transform: translateY(-50%);
}

.activityBox .activityPagination .swiper-pagination-bullet {
  width: 9px;
  height: 9px;
}

.activityBox .activityPagination .swiper-pagination-bullet-active {
  background: #259c76;
}

.activityBox .activityPagination :focus {
  outline: none;
}

.activityBox .activityNext {
  width: 14px;
  height: 37px;
  background: url(../images/rightArrowBtn.png);
  bottom: 85px;
  top: initial;
  left: 24%;
}

.activityBox .activityNext:focus {
  outline: none;
}

.activityBox .activityNext:hover {
  background-position-x: -14px;
}

.activityBox .activityPrev {
  width: 14px;
  height: 37px;
  background: url(../images/rightArrowBtn.png);
  transform: rotate(180deg);
  bottom: 85px;
  top: initial;
  left: 11%;
}

.activityBox .activityPrev:focus {
  outline: none;
}

.activityBox .activityPrev:hover {
  background-position-x: -14px;
}

.generalSituation {
  background: url(../images/headerBg.png) repeat 50% 0;
}

.generalSituation .bannerBox {
  width: 100%;
  height: 100vh;
  background: url(../images/gaikuangBanner.png) center bottom no-repeat;
  position: relative;
  background-size: cover;
  overflow: hidden;
}

.generalSituation .bannerBox .gaikuangTitle {
  position: absolute;
  left: 0;
  right: 0;
  top: 30%;
  margin: auto;
}

.generalSituation .bannerBox .gaikuangYunRight {
  position: absolute;
  top: 25%;
  right: 10%;
}

.generalSituation .bannerBox .gaikuangYunLeft {
  position: absolute;
  top: 25%;
  left: 10%;
}

.generalSituation .bannerBox .gaikuangContent {
  position: absolute;
  max-width: 1280px;
  width: 100%;
  left: 50%;
  transform: translateX(-50%);
  bottom: 5vh;
  text-align: center;
}

.generalSituation .bannerBox .gaikuangContent p {
  margin-bottom: 0;
  text-indent: 2em;
}

.generalSituation .bannerBox .scroll {
  width: 100%;
  text-align: center;
  color: #259c76;
  line-height: 1;
  font-size: 0.875rem;
  letter-spacing: 2.8px;
  text-transform: lowercase;
  position: absolute;
  bottom: 30px;
  left: 0;
  z-index: 2;
}

.generalSituation .bannerBox .scroll p {
  margin-bottom: 10px;
}

.generalSituation .contentBox {
  width: 100%;
  position: relative;
}

.generalSituation .contentBox .list {
  width: 100%;
  padding: 5vh 0;
  position: relative;
}

.generalSituation .contentBox .list:nth-child(1) .generalAnimationBox {
  position: absolute;
  width: 100%;
  height: 100%;
  background: url(../images/gaikuangBg1.png) center no-repeat;
}

.generalSituation .contentBox .list:nth-child(2) .generalAnimationBox {
  position: absolute;
  width: 100%;
  height: 100%;
  background: url(../images/gaikuangBg2.png) center no-repeat;
}

.generalSituation .contentBox .list:nth-child(3) .generalAnimationBox {
  position: absolute;
  width: 100%;
  height: 100%;
  background: url(../images/gaikuangBg3.png) center no-repeat;
}

.generalSituation .contentBox .list .box {
  max-width: 810px;
  text-align: center;
  margin: auto;
}

.generalSituation .contentBox .list .title {
  font-size: 2rem;
  color: #333;
  padding-bottom: 45px;
  position: relative;
  margin-bottom: 2rem;
}

.generalSituation .contentBox .list .title::after {
  content: '';
  position: absolute;
  width: 2px;
  height: 30px;
  background: #ff5f6b;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
}

.generalSituation .contentBox .list .chunk {
  padding-bottom: 50px;
}

.generalSituation .contentBox .list .chunk p {
  margin: 0;
  line-height: 2em;
}

.generalSituation .contentBox .list .videoImg {
  width: 100%;
  height: 350px;
  position: relative;
}

.generalSituation .contentBox .list .videoImg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.generalSituation .contentBox .list .videoImg::after {
  content: '';
  position: absolute;
  width: 80px;
  height: 80px;
  background: url(../images/gaikuangPlay.png) no-repeat center;
  background-size: cover;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  cursor: pointer;
}

.featureBox {
  width: 100%;
  min-height: 100vh;
  position: relative;
  background: url(../images/headerBg.png) repeat 50% 0;
  padding: 17vh 0 1rem 0;
}

.featureBox .titleTop {
  left: 13vw;
  top: 5.5vh;
}

.featureBox .featureAnimationBox {
  width: 100%;
  height: 100%;
  /*background: url(../images/featureBg.png) center top repeat-y;*/
  position: absolute;
  left: 0;
}

.featureBox .box {
  padding-top: 60px;
}

.featureBox .box .list {
  padding: 40px 0;
}

.featureBox .box .list .textBox {
  padding: 30px 45px;
}

.featureBox .box .list .textBox .title {
  font-size: 1.75rem;
  color: #000;
  position: relative;
  margin: 0;
  transition: .5s;
}

.featureBox .box .list .textBox .title::after {
  position: absolute;
  content: '';
  bottom: 0;
  width: 2px;
  height: 60%;
  background: #ff5f6b;
}

.featureBox .box .list .textBox .titleEn {
  font-size: 1.125rem;
  color: #333;
  transition: .5s;
}

.featureBox .box .list .textBox .info {
  font-size: 1.125rem;
  color: #333;
  line-height: 1.8em;
  transition: .5s;
}

.featureBox .box .list .imgBox {
  width: 100%;
  height: 325px;
}

.featureBox .box .list .imgBox img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.featureBox .box .list:nth-child(odd) {
  -ms-flex-direction: row-reverse !important;
  flex-direction: row-reverse !important;
}

.featureBox .box .list:nth-child(odd) .textBox {
  text-align: right;
}

.featureBox .box .list:nth-child(odd) .info {
  padding-left: 40%;
}

.featureBox .box .list:nth-child(odd) .title {
  padding: 0 1em 1rem 0;
}

.featureBox .box .list:nth-child(odd) .title::after {
  transform: rotate(45deg);
  right: 20px;
}

.featureBox .box .list:nth-child(even) .textBox {
  text-align: left;
}

.featureBox .box .list:nth-child(even) .info {
  padding-right: 40%;
}

.featureBox .box .list:nth-child(even) .moreBtn {
  transform: rotate(180deg);
  text-align: right;
}

.featureBox .box .list:nth-child(even) .title {
  padding: 0 0 1rem 1em;
}

.featureBox .box .list:nth-child(even) .title::after {
  transform: rotate(-45deg);
  left: 20px;
}

.featureBox .box .list:hover .more {
  animation: arrowMove 0.9s linear infinite;
  animation-iteration-count: 2;
}

.featureBox .box .list:hover .title, .featureBox .box .list:hover .titleEn, .featureBox .box .list:hover .info {
  color: #259c76;
}

.imagesVideoBox {
  width: 100%;
  position: relative;
}

.imagesVideoBox .topBox {
  position: relative;
  width: 100%;
  min-height: 100vh;
  background: url(../images/headerBg.png) repeat 50% 0;
  padding-bottom: 180px;
}

.imagesVideoBox .topBox .titleTop {
  top: 5.5vh;
  left: 0;
  right: 0;
  margin: auto;
}

.imagesVideoBox .topBox .box {
  padding-top: 33vh;
}

.imagesVideoBox .topBox .box .listFirst {
  height: 570px;
  width: 100%;
  position: relative;
}

.imagesVideoBox .topBox .box .listFirst img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.imagesVideoBox .topBox .box .listFirst::after {
  content: '';
  position: absolute;
  width: 102px;
  height: 102px;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  background: url(../images/gaikuangPlay.png) no-repeat center;
  background-size: cover;
  cursor: pointer;
}

.imagesVideoBox .topBox .box .listELse {
  width: 100%;
  margin-top: 40px;
  transition: .3s;
}
.imagesVideoBox .topBox .box .listELse .sl-box{
  transition: .3s;
  padding-bottom: 1px;
}

.imagesVideoBox .topBox .box .listELse:hover .sl-box{
  transform: translateY(-10px);
  box-shadow: 1px 1px 10px #aaaaaa;
}

.imagesVideoBox .topBox .box .listELse img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.imagesVideoBox .topBox .box .listELse .videoImgBox {
  height: 260px;
  width: 100%;
  position: relative;
}

.imagesVideoBox .topBox .box .listELse .videoImgBox::after {
  content: '';
  position: absolute;
  width: 49px;
  height: 49px;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  background: url(../images/gaikuangPlay.png) no-repeat center;
  background-size: cover;
  cursor: pointer;
}

.imagesVideoBox .topBox .box .listELse .videoBtn {
  width: 26px;
  height: 26px;
  display: inline-block;
  background: url(../images/videoBtn.png);
  vertical-align: middle;
  margin: 0 10px;
}

.imagesVideoBox .topBox .box .listELse .videoTitle {
  color: #333;
  font-size: 1.25rem;
  line-height: 26px;
  display: inline-block;
  vertical-align: middle;
}

.imagesVideoBox .topBox .box .listELse .videoTitleBox {
  margin-top: 10px;
}

.imagesVideoBox .bottomBox {
  width: 100%;
  min-height: 50vh;
  position: relative;
  background: url(../images/footerBg.png) repeat 50% 0;
  padding-top: 23vh;
}

.imagesVideoBox .bottomBox .titleTop {
  top: -45px;
  left: 0;
  right: 0;
  margin: auto;
}

.imagesVideoBox .bottomBox .box .list {
  margin-bottom: 40px;
  padding-bottom: 10px;
}

.imagesVideoBox .bottomBox .box .list .imgBox {
  height: 260px;
  width: 100%;
}

.imagesVideoBox .bottomBox .box .list img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.imagesVideoBox .bottomBox .box .list .title {
  text-align: center;
  color: #259c76;
  font-size: 1.125rem;
  line-height: 2em;
}

.cultureBox {
  width: 100%;
  min-height: 50vh;
  background: url(../images/headerBg.png) repeat 50% 0;
}

.cultureBox .firstBox {
  position: relative;
}

.cultureBox .firstBox .titleTop {
  top: 5.5vh;
  left: 0;
  right: 0;
  margin: auto;
}

.cultureBox .firstBox .title {
  color: #666;
  font-size: 1.5rem;
}

.cultureBox .firstBox .info {
  text-indent: 2em;
  color: #666;
  margin-bottom: 0;
  line-height: 1.8em;
}

.cultureBox .firstBox .box {
  padding-top: 33vh;
  overflow: hidden;
}

.cultureBox .firstBox .box .contentBox {
  padding: 7vh 0;
}

.cultureBox .firstBox .box .imgBox {
  width: 100%;
  height: 410px;
  padding-right: 30px;
}

.cultureBox .firstBox .box .imgBox img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.cultureBox .firstBox .box .textBox {
  padding-left: 30px;
}

.cultureBox .firstBox .bottomBox {
  width: 100%;
  background: url(../images/footerBg.png) repeat 50% 0;
  padding: 65px 0;
}

.cultureBox .firstBox .bottomBox .info {
  margin-bottom: 20px;
}

.cultureBox .firstBox .bottomBox .imgBox {
  width: 100%;
  height: 395px;
}

.cultureBox .firstBox .bottomBox .imgBox img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  -o-object-fit: cover;
}

.cultureBox .firstBox .bottomBox .textBox {
  padding: 40px 30px 0 15px;
}

.cultureBox .firstBox .bottomBox .imgBox {
  padding-left: 30px;
}

.cultureBox .firstBox .bottomBox .row:hover .textBoxMore {
  animation: arrowMove 0.9s linear infinite;
  animation-iteration-count: 2;
}

.cultureBox .secondBox {
  position: relative;
  padding-top: 38vh;
}

.cultureBox .secondBox .titleTop {
  top: 5.5vh;
  left: 0;
  right: 0;
  margin: auto;
}

.cultureBox .secondBox .list {
  height: 308px;
  margin: 0 0 40px 0;
  padding: 0;
  background-size: cover;
}

.cultureBox .secondBox .list .left {
  background: rgba(37, 156, 118, 0.5);
  color: #fff;
  padding: 5%;
}

.cultureBox .secondBox .list .right {
  padding: 130px 88px;
}

.cultureBox .secondBox .list .right span {
  font-size: 2rem;
  color: #fff;
  display: inline-block;
  vertical-align: middle;
}

.cultureBox .secondBox .list .right:hover .imgBox {
  animation: arrowMove 0.9s linear infinite;
  animation-iteration-count: 2;
}

.trafficBox {
  width: 100%;
  min-height: 100vh;
  background: url(../images/headerBg.png) 50% 0 repeat;
}

.trafficBox .firstBox {
  width: 100%;
  height: 100vh;
  background: url(../images/trafficBg.jpg) center no-repeat;
  background-size: cover;
  position: relative;
}

.trafficBox .firstBox .trafficTop {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
}

.trafficBox .firstBox .tab {
  display: flex;
  position: absolute;
  right: 225px;
  top: 111px;
}

.trafficBox .firstBox .tab .list {
  width: 78px;
  height: 236px;
  margin: 0 25px;
  transition: .5s;
  cursor: pointer;
}

.trafficBox .firstBox .tab .list:nth-child(1) {
  background: url(../images/traffic1.jpg);
}

.trafficBox .firstBox .tab .list:nth-child(2) {
  background: url(../images/traffic2.jpg);
}

.trafficBox .firstBox .tab .list:nth-child(3) {
  background: url(../images/traffic3.jpg);
}

.trafficBox .firstBox .tab .list:hover:nth-child(1) {
  background: url(../images/traffic11.jpg);
}

.trafficBox .firstBox .tab .list:hover:nth-child(2) {
  background: url(../images/traffic21.jpg);
}

.trafficBox .firstBox .tab .list:hover:nth-child(3) {
  background: url(../images/traffic31.jpg);
}

.trafficBox .secondBox {
  width: 100%;
  position: relative;
  padding: 23vh 0 40px;
  max-width: 1280px;
}

.trafficBox .secondBox .titleTop {
  top: -45px;
  left: 0;
  right: 0;
  margin: auto;
}

.trafficBox .secondBox #cmptop {
  margin: 55px 0;
}

.trafficBox .secondBox .info {
  width: 100%;
  max-width: 615px;
  margin: auto;
  color: #666666;
  text-align: center;
}

.trafficBox .thirdBox {
  width: 100%;
  position: relative;
  max-width: 1280px;
  padding: 33vh 0 10vh;
}

.trafficBox .thirdBox .titleTop {
  top: 0;
  left: 0;
  right: 0;
  margin: auto;
}

.trafficBox .fourthBox {
  width: 100%;
  position: relative;
  max-width: 1280px;
  padding: 33vh 0 10vh;
}

.trafficBox .fourthBox .titleTop {
  top: 0;
  left: 0;
  right: 0;
  margin: auto;
}

.travelStrategyBox {
  width: 100%;
  min-height: 100vh;
  background: url(../images/headerBg.png) 50% 0 repeat;
}

.travelStrategyBox .topImgBox {
  max-width: 1280px;
  width: 100%;
  height: 570px;
  padding-top: 90px;
}

.travelStrategyBox .topImgBox img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.travelStrategyBox .box {
  max-width: 1280px;
  padding-bottom: 50px;
}

.travelStrategyBox .box .imgBox {
  height: 260px;
  width: 100%;
}

.travelStrategyBox .box .imgBox img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.travelStrategyBox .box .list {
  margin-top: 50px;
}

.travelStrategyBox .box .list .textBox {
  padding: 28px 56px;
}

.travelStrategyBox .box .list .textBoxMore {
  display: block;
  width: 85px;
  height: 25px;
  background: url(../images/scenicArrowGray.png);
}

.travelStrategyBox .box .list .title {
  color: #333;
  font-size: 1.5rem;
}

.travelStrategyBox .box .list .info {
  color: #999;
  font-size: 1rem;
}

.travelStrategyBox .box .list .date {
  color: #999;
  font-size: 1.125rem;
}

.travelStrategyBox .box .list:hover .textBoxMore {
  background-position-x: -85px;
  animation: arrowMove 0.9s linear infinite;
  animation-iteration-count: 2;
}

.panoramaBox {
  width: 100%;
  min-height: 100vh;
  background: url(../images/headerBg.png) 50% 0 repeat;
  position: relative;
}

.panoramaBox .panoramaAnimationBox {
  width: calc(100% - 290px);
  height: 100vh;
  background: url(../images/bamboo.png) right bottom no-repeat;
  position: fixed;
}

.panoramaBox .topImgBox {
  max-width: 1280px;
  width: 100%;
  height: 570px;
  padding-top: 90px;
  position: relative;
  z-index: 2;
}

.panoramaBox .topImgBox img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.panoramaBox .box {
  max-width: 1280px;
  padding: 50px 15px;
}

.panoramaBox .box .list {
  margin-bottom: 30px;
}

.panoramaBox .box .list .imgBox {
  width: 100%;
  height: 260px;
  position: relative;
}

.panoramaBox .box .list .imgBox::after {
  content: '';
  position: absolute;
  width: 31px;
  height: 41px;
  background: url(../images/maker.png);
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
  transition: .4s;
  transform: scale(0);
  opacity: 0;
}

.panoramaBox .box .list .imgBox:hover::after {
  transform: scale(1);
  opacity: 1;
}

.panoramaBox .box .list .imgBox img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.panoramaBox .box .list .title {
  color: #333;
  font-size: 1.5rem;
  text-align: center;
}

.restaurantBox {
  width: 100%;
  background: url(../images/headerBg.png) 50% center repeat;
}

.restaurantBox .recommendBox {
  width: 100%;
  min-height: 100vh;
  background: url(../images/restaurantBg.jpg) center no-repeat;
  background-size: cover;
  position: relative;
  padding: 33vh 0 45px;
}

.restaurantBox .recommendBox .titleTop {
  top: 5.5vh;
  left: 0;
  right: 0;
  margin: auto;
}

.restaurantBox .recommendBox .box {
  max-width: 1280px;
}

.restaurantBox .recommendBox .box .list .imgBox {
  width: 100%;
  height: 226px;
}

.restaurantBox .recommendBox .box .list .imgBox img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.restaurantBox .recommendBox .box .list .content {
  text-align: center;
  color: #333;
  padding: 30px 20px;
  line-height: 1em;
  background: white;
}

.restaurantBox .recommendBox .box .list .content .title {
  font-size: 1.25rem;
  margin-bottom: 10px;
}

.restaurantBox .recommendBox .box .list .content .info {
  font-size: 0.875rem;
  margin-bottom: 30px;
}

.restaurantBox .recommendBox .box .list .content .tel {
  font-size: 0.875rem;
  margin-bottom: 10px;
}

.restaurantBox .recommendBox .box .list .content .address {
  font-size: 0.875rem;
  margin-bottom: 0px;
  height: 32px;
  overflow: hidden;
}

.restaurantBox .recommendBox .box .list .more {
  width: 100%;
  display: block;
  text-align: center;
  line-height: 60px;
  background: #259c76;
  font-size: 1.25rem;
  overflow: hidden;
  margin: 0;
  position: relative;
  height: 60px;
}
.restaurantBox .recommendBox .box .list .more .moreBtn{
  display: inline-block;color: #fff;width: 100%;
  position: absolute;
  left: 0;
  transition: .3s;
}
.restaurantBox .recommendBox .box .list .more .bookingBtn{
  display: inline-block;color: #fff;width: 40%;
  position: absolute;
  left: 100%;
  background: #eabd28;
  transition: .3s;
}
.restaurantBox .recommendBox .box .list .more:hover .moreBtn{
  left: -20%;
}
.restaurantBox .recommendBox .box .list .more:hover .bookingBtn{
  left: 60%;
}
.restaurantBox .recommendBox .scroll {
  width: 100%;
  text-align: center;
  color: #259c76;
  line-height: 1;
  font-size: 0.875rem;
  letter-spacing: 2.8px;
  position: absolute;
  bottom: 30px;
  left: 0;
  z-index: 2;
}
.restaurantBox .recommendBox .scroll img{
  animation: downArrow ease-out 2s infinite;
  -webkit-animation: downArrow ease-out 2s infinite;
}
.restaurantBox .contentBox {
  padding: 60px 0;
  position: relative;
}

.restaurantBox .contentBox .restaurantAnimationBox {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background: url(../images/restaurantContentBg.png) top center no-repeat;
}

.restaurantBox .contentBox .box {
  max-width: 1280px;
}

.restaurantBox .contentBox .box .list {
  margin-bottom: 70px;
}

.restaurantBox .contentBox .box .list .imgBox {
  width: 100%;
  height: 340px;
  padding-right: 0;
}

.restaurantBox .contentBox .box .list .imgBox img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.restaurantBox .contentBox .box .list .content {
  background: #eee;
  padding: 40px 60px;
  line-height: 1em;
  color: #666;
}

.restaurantBox .contentBox .box .list .content .title {
  font-size: 1.25rem;
  margin-bottom: 10px;
  color: #333;
}

.restaurantBox .contentBox .box .list .content .info {
  font-size: 0.875rem;
  margin-bottom: 30px;
}

.restaurantBox .contentBox .box .list .content .tel {
  font-size: 0.875rem;
  margin-bottom: 10px;
}

.restaurantBox .contentBox .box .list .content .address {
  font-size: 0.875rem;
  margin-bottom: 0px;
}

.restaurantBox .contentBox .box .list .content .more {
  display: inline-block;
  font-size: 1.25rem;
  color: #259c76;
  padding: 0;
  line-height: 48px;
  border: 1px solid #259c76;
  margin: 45px 0 0 0;
  position: relative;
  -webkit-transform: perspective(1px) translateZ(0);
  transform: perspective(1px) translateZ(0);
  transition: color .3s;
  width: 360px;
}
.restaurantBox .contentBox .box .list .content .more .moreBtn{
  color: white;display: inline-block;width: 170px;text-align: center;transition: color .3s;
}
.restaurantBox .contentBox .box .list .content .more .bookingBtn{
  color: #259c76;display: inline-block;width: 170px;text-align: center;transition: color .3s;
}
.restaurantBox .contentBox .box .list .content .more::after {
  content: '';
  position: absolute;
  width: 50%;
  height: 100%;
  background: #259c76;
  left: 0;
  top: 0;
  z-index: -1;
  -webkit-transform: scaleX(1);
  transform: scaleX(1);
  transition: all .5s ease-out;
  -webkit-transition: all .5s ease-out;
  -webkit-transform-origin: 0 50%;
  transform-origin: 0 50%;
}
.restaurantBox .contentBox .box .list .content .moreHover::after{
  left: 50%;
}
.restaurantBox .contentBox .box .list .content .moreHover .moreBtn{
  color: #259c76;
}
.restaurantBox .contentBox .box .list .content .moreHover .bookingBtn{
  color: white;
}
.restaurantBox .contentBox .box .list .content .more:hover {
  color: white;
}

/*.restaurantBox .contentBox .box .list .content .more:hover::after {
  -webkit-transform: scaleX(1);
  transform: scaleX(1);
}*/

.hotelBox .recommendBox {
  background: url(../images/hotelTopBg.jpg) center no-repeat;
}

.foodBox {
  width: 100%;
  min-height: 100vh;
  background: url(../images/headerBg.png) 50% 0 repeat;
}

.foodBox .food {
  position: relative;
}

.foodBox .food .titleTop {
  top: 5.5vh;
  left: 0;
  right: 0;
  margin: auto;
}

.foodBox .food .foodAnimationBox {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: url(../images/foodAnimation.png) no-repeat center bottom;
}

.foodBox .box {
  max-width: 1280px;
  padding: 33vh 15px 30px;
}

.foodBox .box .topImg {
  width: 100%;
  height: 570px;
}

.foodBox .box .topImg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.foodBox .box .list {
  position: relative;
  width: 100%;
  height: 306px;
  margin-top: 40px;
}

.foodBox .box .list:hover .content {
  transform: scale(1);
  opacity: 1;
}

.foodBox .box .list .imgBox {
  width: 100%;
  height: 100%;
}

.foodBox .box .list .imgBox .listImage {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.foodBox .box .list .content {
  position: absolute;
  height: 100%;
  top: 0;
  left: 0;
  right: 0;
  margin: 0 15px;
  background: rgba(0, 0, 0, 0.4);
  transform: scale(0);
  opacity: 0;
  transition: all .4s ease-out;
  -webkit-transition: all .4s ease-out;
}

.foodBox .box .list .content .contentBox {
  display: block;
  position: absolute;
  width: calc(100% - 40px);
  height: calc(100% - 40px);
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
  border: 2px solid #259c76;
  text-align: center;
  padding: 10% 10%;
}
.foodBox .box .list .content .contentBox .listBooking{
  display: inline-block;
  color: white;
  border: 1px solid white;
  padding: 5px 10px;
}

.foodBox .box .list .content .contentBox .listMore{
  display: inline-block;
  color: white;
  border: 1px solid white;
  padding: 5px 10px;
}

.foodBox .box .list .content .contentBox .title {
  color: #fff;
  font-size: 1.5rem;
}

.foodBox .box .list .content .contentBox .info {
  color: #fff;
}

.foodBox .goods {
  width: 100%;
  min-height: 50vh;
  position: relative;
  overflow: hidden;
}

.foodBox .goods .titleTop {
  top: 5.5vh;
  left: 0;
  right: 0;
  margin: auto;
}

.foodBox .goods .goodsAnimationBox {
  position: absolute;
  left: 0;
  top: 33vh;
  width: 100%;
  height: 100%;
  /*background: url(../images/goodsAnimation.png) no-repeat center top;*/
}

.detailPage {
  width: 100%;
  min-height: 100vh;
  background: url(../images/headerBg.png) 50% 0 repeat;
  position: relative;
}

.detailPage .detailAnimationBox {
  position: absolute;
  width: 100%;
  height: 100%;
  /*background: url(../images/restaurantContentBg.png) no-repeat center top;*/
}

.detailPage .box {
  max-width: 900px;
  padding: 120px 0;
  position: relative;
  z-index: 2;
}

.detailPage .box .title {
  text-align: center;
  color: #333;
  font-size: 1.5rem;
}

.detailPage .box .time {
  text-align: center;
  color: #666;
  font-size: 1.25rem;
}

.detailPage .box .content {
  color: #666;
}

.detailPage .box .content img {
  max-width: 100% !important;
  height: auto;
}

.detailPage .box .content .share {
  text-align: right;
}

.detailPage .box .content .share .shareText {
  font-size: 1.25rem;
  color: #259c76;
  float: right;
}

.detailPage .box .content .share .bds_weixin {
  float: right;
  display: inline-block;
  width: 22px;
  height: 22px;
  background: url(../images/shareBtn.png);
}

.detailPage .box .bottomBtn {
  text-align: center;
  margin-top: 40px;
  padding-left: 0;
}

.detailPage .box .bottomBtn .prev {
  display: inline-block;
  width: 56px;
  height: 56px;
  background-image: url(../images/activityMore.png);
  background-size: cover;
  transform: rotate(180deg);
  margin: 0 20px;
  vertical-align: middle;
}

.detailPage .box .bottomBtn .prev:hover {
  background: url(../images/bannerBtnRH.png) center no-repeat;
}

.detailPage .box .bottomBtn .next {
  display: inline-block;
  width: 56px;
  height: 56px;
  background-image: url(../images/activityMore.png);
  background-size: cover;
  margin: 0 20px;
  vertical-align: middle;
}

.detailPage .box .bottomBtn .next:hover {
  background: url(../images/bannerBtnRH.png) center no-repeat;
}

.detailPage .box .bottomBtn .return {
  display: inline-block;
  width: 67px;
  height: 67px;
  border: 1px solid #259c76;
  border-radius: 50%;
  padding: 10px 15px;
  color: #259c76;
  margin: 0 20px;
  cursor: pointer;
  vertical-align: middle;
}

.detailPageYellow {
  background: url(../images/footerBg.png) 50% 0 repeat;
}

#bdshare_weixin_qrcode_dialog {
  height: auto !important;
  left: calc(50% + 145px) !important;
  transform: translateX(-50%) !important;
}

.bdshare_dialog_bottom {
  display: none !important;
}

.page {
  text-align: center;
  padding: 5vh 0;
  margin:0;
}

.page .page-item {
  display: inline-block;
  vertical-align: middle;
}

.page .page-item:focus {
  outline: none;
}

.page .page-item a, .page .page-item span {
  display: inline-block;
  width: 100%;
  height: 100%;
  background: none !important;
  border: none !important;
  color: #999;
  font-size: 1.375rem;
}

.page .page-item a:focus, .page .page-item span:focus {
  outline: none;
  box-shadow: none;
}

.page .page-item:first-child {
  width: 56px;
  height: 56px;
  background-image: url(../images/activityMore.png);
  background-size: cover;
  transform: rotate(180deg);
}

.page .page-item:first-child:hover {
  background: url(../images/bannerBtnRH.png) center no-repeat;
}

.page .page-item:last-child {
  width: 56px;
  height: 56px;
  background-image: url(../images/activityMore.png);
  background-size: cover;
}

.page .page-item:last-child:hover {
  background: url(../images/bannerBtnRH.png) center no-repeat;
}

.page .active .page-link {
  color: #259c76;
}

.multilingual{
  position: absolute;
  top:30%;
  z-index: 9;
  width: 100%;
}
.multilingual .multilingualBig{
  color: #fff;
  font-size: 3rem;
}
.multilingual .multilingualMini{
  color: #fff;
  font-size: 1.5rem;
}
.multilingualBox{
  width: 100%;
}
.multilingualBox .img{
  max-width: 100%;
  width: 100%;
}