body {
font-family: Microsoft YaHei;
/* width: auto;
height: auto; */
width: 100%;
height: 100%;
font-size: 18px;
margin: 0;
padding: 0;
}

a {
cursor: pointer;
}
a:hover {
color: var(--bg-color);
}
button {
outline: none;
border: none;
background: none;
}
input {
outline: none;
}
.fl {
float: left;
}
.fr {
float: right;
}
/* 清除浮动 */
.cf:after {
display: block;
content: "";
height: 0;
visibility: hidden;
clear: both;
}
* {
box-sizing: border-box;
}
.main {
width: 1200px;
margin: 0 auto;
}
.header,
.header .fp-tableCell,
.footer-box,
.footer-box .fp-tableCell {
height: auto !important;
}
/* 顶部banner */
.six-top-banner-box {
width: 100%;
height: 100vh;
overflow: hidden;
position: relative;
}
.six-top-banner-box .topBannerSwiper {
width: 100%;
height: 100vh;
overflow: hidden;
/* position: relative; */
}
.six-top-banner-box .swiper-slide {
width: 100%;
height: 100vh;
overflow: hidden;
}
.six-top-banner-box .swiper-slide img,
.six-top-banner-box .swiper-slide video{
width: 100%;
height: 100vh;
object-fit: cover;
}
.swiper-pagination-box {
position: absolute;
left: 66px;
display: flex;
flex-direction: column;
gap: 20px;
top: 0;
height: 100vh;
width: 40px;
justify-content: center;
align-items: center;
}
.swiper-pagination-box > span {
display: inline-block;
width: 2px;
height: 120px;
background: #ffffff;
position: relative;
z-index: 999;
}
.six-top-banner-box .swiper-banner-pagination {
/* right: 66px; */
display: flex;
flex-direction: column;
gap: 20px;
justify-content: center;
align-items: center;
position: relative;
}
.six-top-banner-box
.topBannerSwiper
.swiper-banner-pagination
.swiper-pagination-bullet {
width: 16px;
height: 16px;
background: #fff;
border-radius: 50%;
margin: 0;
box-sizing: content-box;
opacity: 1;
position: relative;
}
.six-top-banner-box
.topBannerSwiper
.swiper-banner-pagination
.swiper-pagination-bullet.swiper-pagination-bullet-active {
margin: 12px 0;
}
.six-top-banner-box .topBannerSwiper .swiper-total-pagination {
position: relative;
z-index: 999;
color: #fff;
font-size: 20px;
}
.six-top-banner-box .topBannerSwiper .swiper-total-pagination .swiper-current {
font-size: 30px;
}
.six-top-banner-box .topBannerSwiper .swiper-total-pagination .swiper-total {
font-size: 20px;
}
.six-top-banner-box
.topBannerSwiper
.swiper-banner-pagination
.swiper-pagination-bullet.swiper-pagination-bullet-active::after {
content: "";
width: 40px;
height: 40px;
background: url(banner-active.png) no-repeat center;
background-size: cover;
position: absolute;
top: calc(50% - 20px);
left: calc(50% - 20px);
}
.six-top-banner-box .mouse {
position: absolute;
z-index: 999;
left: 50%;
transform: translateY(-50%);
bottom: 50px;
display: flex;
gap: 20px;
flex-direction: column;
animation: TopBots 1.2s ease-in-out infinite both;
}
.six-top-banner-box .mouse img:nth-child(2) {
cursor: pointer;
}
@keyframes TopBots {
0% {
transform: translateY(0);
}
50% {
transform: translateY(8px);
}
100% {
transform: translateY(0);
}
}
/* 六师概况 */
.six-overview {
background: url(overview-bg.png) no-repeat center top;
background-size: 100% 100%;
height: 100vh;
width: 100%;
display: flex;
gap: 60px;
align-items: center;
flex-direction: column;
justify-content: center;
}
.overview-title {
background: var(--overviewtitle) no-repeat center;
height: 160px;
width: 814px;
/* margin-bottom: 60px; */
margin: 0 auto 60px;
}
.overview-content {
width: 1252px;
height: 518px;
margin: 0 auto;
display: flex;
gap: 40px;
padding: 71px 76px 67px 76px;
background: url(overview-content.png) no-repeat center;
}
.overview-img {
width: 580px;
height: 380px;
}
.overview-img img {
width: 580px;
height: 380px;
object-fit: cover;
}
.overview-text {
padding-right: 5px;
}
.overview-text p {
color: #000000;
font-size: 16px;
line-height: 40px;
text-indent: 32px;
}
/* 六师风采 */
.six-style {
background: url(style-bg.png) no-repeat center top;
background-size: 100% 100%;
height: 100vh;
width: 100%;
display: flex;
gap: 60px;
align-items: center;
flex-direction: column;
justify-content: center;
}
.style-title {
background: var(--styletitle) no-repeat center;
height: 160px;
width: 814px;
margin: 0 auto 60px;
}
.style-content {
width: 1200px;
height: 660px;
display: flex;
margin: 0 auto;
}
.style-item {
height: 100%;
display: flex;
}
.style-item.show .style-item-text {
height: 610px;
background-color: #fff;
animation: style-item-text-show 1s forwards;
}
.style-item.hide .style-item-text {
height: 610px;
animation: style-item-text-hide 1s forwards;
}
@keyframes style-item-text-show {
0% {
width: 0;
}
100% {
width: 720px;
}
}
@keyframes style-item-text-hide {
0% {
width: 720px;
}
100% {
width: 0;
}
}
.style-item-text {
width: 0;
height: 610px;
display: flex;
flex-direction: column;
overflow: hidden;
}
.style-item-text-img {
width: 100%;
height: 400px;
padding: 30px 30px 0 30px;
}
.style-item-text-img img {
width: 100%;
height: 370px;
object-fit: cover;
}
.style-item-text-content {
font-size: 16px;
color: #000000;
line-height: 40px;
padding: 30px;
text-indent: 32px;
}
.style-item-title {
width: 120px;
height: 100%;
display: flex;
align-items: center;
flex-direction: column;
gap: 30px;
justify-content: center;
cursor: pointer;
}
.style-item-title:hover {
transform: translateY(-10px);
transition: all 0.5s;
}
.style-content .style-item:nth-of-type(even) .style-item-title {
background: var(--styleitem-l) no-repeat top center;
}
.style-content .style-item:nth-of-type(even) .style-item-title span{
color: var(--primary-color)  !important;
}
.style-content .style-item:nth-of-type(odd) .style-item-title {
background: var(--styleitem-r) no-repeat top center;
}
.style-content .style-item:nth-of-type(odd) .style-item-title span{
color: var(--primary-color)  !important;
}

.style-content .style-item:nth-of-type(even) .style-item-title span{
color: var(--primary-color)  !important;
}
.style-content .style-item:nth-of-type(odd).show .style-item-title {
background: var(--styleitem-active) no-repeat top center;
}
.style-content .style-item:nth-of-type(even).show .style-item-title {
background: var(--styleitem-active_r) no-repeat top center;
}
.style-content .style-item:nth-of-type(odd).show .style-item-title span{
color: #ffffff !important;
}
.style-content .style-item:nth-of-type(even).show .style-item-title  span{
color: #ffffff !important;
}
.style-item-title img {
width: 70px;
height: 70px;
}
.style-item-title:hover img {
/* 左右翻转 */
transform: rotate(360deg);
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
transition: all 0.5s;
}
.style-item-title span {
writing-mode: vertical-rl;
line-height: 60px;
font-size: 40px;
font-family: Source Han Serif CN, Source Han Serif CN-Bold;
font-weight: 700;
color: #ffffff;
letter-spacing: 0.3em;
display: flex;
align-items: center;
justify-content: center;
user-select: none;
}
/* 乐游六师 */
.six-travel {
background: url(travel-bg.png) no-repeat center top;
background-size: 100% 100%;
height: 100vh;
width: 100%;
display: flex;
gap: 60px;
align-items: center;
flex-direction: column;
justify-content: center;
position: relative;
}
.travel-title {
background: var(--traveltitle) no-repeat center;
height: 160px;
width: 814px;
margin: 0 auto 60px;
}
.travel-content {
width: 1200px;
height: 608px;
position: relative;
margin: 0 auto;
}
.travel-content .travelSwiper {
width: 1200px;
height: 608px;
overflow: hidden;
}
.travel-content .travelSwiper .swiper-slide {
width: 388px;
height: 100%;
overflow: hidden;
}
.travel-content .travelSwiper .swiper-slide a {
display: inline-block;
width: 100%;
height: 100%;
}
.travel-content .travelSwiper .swiper-slide a img {
width: 100%;
height: 100%;
object-fit: cover;
}
.travel-content .travelSwiper .swiper-slide:hover a img {
transform: scale(1.1);
transition: all 0.5s;
}
.travel-content .swiper-button-prev,
.travel-content .swiper-button-next {
width: 50px;
height: 50px;
background-size: 50px 50px;
}
.travel-content .swiper-button-prev {
left: -56px;
background-image: var(--left);
}
.travel-content .swiper-button-next {
right: -56px;
background-image: var(--right);
}
/* 投资六师 */
.six-invest {
background: url(travel-bg.png) no-repeat center top;
background-size: 100% 100%;
height: 100vh;
width: 100%;
display: flex;
gap: 60px;
align-items: center;
flex-direction: column;
justify-content: center;
position: relative;
}
.invest-title {
background: var(--investtitle) no-repeat center;
height: 160px;
width: 814px;
margin: 0 auto 60px;
}
.invest-content {
width: 1200px;
height: 600px;
position: relative;
margin: 0 auto;
}
.invest-content {
display: flex;
gap: 30px;
flex-direction: column;
}
.invest-content .invest-content-top {
display: flex;
flex-wrap: wrap;
}
.invest-content .invest-content-top .invest-content-item{
margin-right: 30px;
}
.invest-content .invest-content-top .invest-content-item:nth-child(3n + 3),
.invest-content .invest-content-top .invest-content-item:last-child{
 margin-right: 0;
}
.invest-content .invest-content-top .invest-content-item:nth-child(n + 4){
margin-top: 30px;
}
.invest-content .invest-content-top .invest-content-item {
/* padding: 30px; */
display: flex;
flex-direction: column;
overflow: hidden;
color: #ffffff;
position: relative;
flex: 1 1 calc(33.33% - 20px);
box-sizing: border-box;
height: 280px;
overflow: hidden;
}
.invest-content-item img {
width: 100%;
height: 100%;
object-fit: cover;
}
.invest-content-item:hover img {
transform: scale(1.1);
transition: all 0.5s;
}
.invest-content-item .invest-content-top-title {
position: absolute;
top: 30px;
left: 30px;
font-weight: 700;
font-size: 30px;
}
.invest-content-item .invest-content-top-en {
position: absolute;
top: 80px;
left: 30px;
font-size: 16px;
}
.invest-content-item .invest-content-top-more {
position: absolute;
top: 185px;
left: 30px;
color: #ffffff;
font-size: 16px;
width: 140px;
height: 50px;
background: rgba(255, 255, 255, 0.2);
border: 1px solid #ffffff;
border-radius: 4px;
padding-left: 20px;
line-height: 50px;
}
.invest-content-item .invest-content-top-more::after {
content: "";
position: absolute;
top: 50%;
right: 20px;
transform: translateY(-50%);
width: 0;
height: 0;
border-top: 5px solid transparent;
border-bottom: 5px solid transparent;
border-left: 5px solid #ffffff;
}
.invest-content-bottom {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 30px;
display: none;
}
.invest-content-bottom .invest-content-item {
position: relative;
color: #ffffff;
overflow: hidden;
}
/* 图说六师 */
.six-picture {
background: url(picture-bg.png) no-repeat center top;
background-size: 100% 100%;
height: 100vh;
width: 100%;
display: flex;
gap: 60px;
align-items: center;
flex-direction: column;
justify-content: center;
position: relative;
}
.picture-title {
background: var(--picturetitle) no-repeat center;
height: 160px;
width: 814px;
margin: 0 auto 0px;
}
.picture-content {
width: 1200px;
height: 420px;
position: relative;
margin: 0 auto;
margin-bottom: 40px;
}
.picture-content .pictureSwiper {
width: 1200px;
height: 470px;
overflow: hidden;
padding-top: 50px;
}
.picture-content .swiper-button-prev,
.picture-content .swiper-button-next {
width: 40px;
height: 40px;
background-size: 100% 100%;
top: calc(50% + 50px);
}
.picture-content .swiper-picture-button-prev {
left: -56px;
background-image: url(picture-left.png);
}
.picture-content .swiper-picture-button-next {
right: -56px;
background-image: url(picture-right.png);
}
.picture-content .swiper-slide a {
display: inline-block;
width: 100%;
height: 100%;
position: relative;
overflow: hidden;
}
.picture-content .swiper-slide a .picture-item-title {
position: absolute;
bottom: 0;
left: 0;
height: 50px;
width: 100%;
line-height: 50px;
background: rgba(0, 0, 0, 0.3);
padding-left: 20px;
font-size: 16px;
color: #ffffff;
}
.picture-content .swiper-slide.swiper-slide-active a .picture-item-title {
background: rgba(235, 172, 64, 0.8);
}

.picture-content .swiper-slide:nth-child(even) {
transform: translateY(-50px);
}
.picture-content .pictureSwiper .swiper-slide:hover img {
transform: scale(1.1);
transition: all 0.5s;
}