*{
margin: 0;
padding: 0;
}
html,
body{
background-color: #000;
font-family: PingFang;
}
.u-f{
display: flex;
}
.u-f-ac{
align-items: center;
}
.u-f-jc{
justify-content: center;
}
.u-f-jsb{
justify-content: space-between;
}
.u-f1{
flex: 1;
}
.u-f-c{
flex-direction: column;
}
.u-f-w{
flex-wrap: wrap;
}
@media (max-width: 1300px) {
#map {
zoom:calc(1 / 0.75);
}
}
/* 版块1 start */
.block1-wrap{
height: 691px;
position: relative;
overflow: hidden;
}
.block1{
width: 1225px;
margin: 0 auto;
position: relative;
z-index: 3;
}
.block1-title{
font-size: 40px;
color: #fff;
font-weight: 800;
text-align: center;
line-height: 52px;
padding-top: 182px;
}
.block1-title span{
color: #C79830;
height: 52px;
}
.block1-title img{
width: 70px;
height: 34px;
margin: 0 2px 0 4px;
}
.block1-desc{
font-size: 16px;
color: #FFFFFF;
line-height: 30px;
text-align: center;
margin-top: 18px;
}
.block1-bg{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: url(../../images/bufan/block-bg1.png) no-repeat;
background-size: cover;
background-position: center;
z-index: 1;
}
.block1-video{
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
z-index: 2;
/* 视频充满整个屏幕 */
object-fit: fill;
}
/* 版块1 end */
/* 版块2 start */
.block2-wrap{
height: 885px;
background: url(../../images/bufan/block2-bg.jpg) no-repeat;
background-position: center;
}
.block2{
width: 1225px;
margin: 0 auto;
}
.block2-top{
height: 655px;
overflow: hidden;
}
.block2-btm{
height: 230px;
overflow: hidden;
}
.block2-title{
width: 675px;
height: 158px;
font-size: 40px;
color: #fff;
font-weight: 800;
background: url(../../images/bufan/why-7v.png) no-repeat;
background-size: cover;
box-sizing: border-box;
padding-top: 102px;
position: relative;
margin-top: 126px;
}
.block2-title::before{
content: '';
position: absolute;
width: 70px;
height: 1px;
background-color: #A4A4A4;
bottom: -22px;
left: 0;
}
.block2-title span{
color: #C79830;
height: 52px;
}
.block2-title img{
width: 70px;
height: 34px;
margin: 0 2px 0 4px;
}
.block2-desc{
font-size: 26px;
font-weight: 800;
color: #FFFFFF;
line-height: 48px;
background: linear-gradient(0deg, #D6CB91 0%, #CDA25D 36.4501953125%, #FEF9C8 65.283203125%, #CDA25D 83.30078125%, #C79B58 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
padding-top: 42px;
}
.block2-desc img{
width: 45px;
height: 22px;
}
.block2-con{
font-size: 18px;
color: #FFFFFF;
line-height: 36px;
padding-top: 22px;
}
.block2-item{
width: calc(100% / 6);
padding-top: 10px;
}
.block2-item .item-title{
font-size: 18px;
font-weight: bold;
color: #FFFFFF;
line-height: 59px;
background: linear-gradient(0deg, #C89A40 0%, #DDBF6D 29.9560546875%, #CA9D43 76.806640625%, #CCAA54 99.6337890625%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.block2-item .item-desc{
font-size: 15px;
font-weight: 400;
color: #FFFFFF;
line-height: 30px;
white-space: nowrap;
}
/* 版块2 end */
/* 版块3 start */
.block3-wrap{
height: 952px;
background: url(../../images/bufan/block3-bg.jpg) no-repeat;
background-position: center;
}
.block3{
width: 1225px;
margin: 0 auto;
}
.block3-title{
font-size: 40px;
color: #fff;
font-weight: 800;
line-height: 52px;
padding-top: 79px;
}
.block3-title span{
color: #C79830;
height: 52px;
}
.block3-title img{
width: 70px;
height: 34px;
margin: 0 2px 0 4px;
}
.block3-desc{
font-size: 16px;
font-weight: 500;
color: #FFFFFF;
line-height: 30px;
text-align: center;
padding-top: 30px;
}
.block3-wrap .block3-phone{
display: none;
}
.block3-desc img{
width: 26px;
height: 13px;
}
.block3-level{
width: 466px;
height: 454px;
position: relative;
margin-top: 180px;
}
.block3-line{
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
z-index: 1;
}
.block3-line2,
.block3-line3,
.block3-line4,
.block3-line5{
opacity: .4;
}
.block3-line1{
width: 466px;
height: 454px;
}
.block3-line2{
width: 417px;
height: 407px;
}
.block3-line3{
width: 379px;
height: 368px;
}
.block3-line4{
width: 336px;
height: 327px;
}
.block3-line5{
width: 294px;
height: 287px;
}
.block3-line2-delay{
animation: lineFlash 3s linear 7.5s forwards;
}
.block3-line3-delay{
animation: lineFlash 3s linear 6s forwards;
}
.block3-line4-delay{
animation: lineFlash 3s linear 4.5s forwards;
}
.block3-line5-delay{
animation: lineFlash 3s linear 3s forwards;
}
@keyframes lineFlash {
0%{
opacity: .4;
}
50%{
opacity: 1;
}
100%{
opacity: .4;
}
}
.block3-star{
position: absolute;
width: 94px;
height: 94px;
top: -40px;
left: 186px;
z-index: 3;
}
.block3-star-delay{
animation: starMove 8s infinite step-start, starFlash 1s linear infinite;
}
.level-item{
position: absolute;
z-index: 2;
opacity: 0;
}
.level-item p{
font-size: 20px;
color: #FFFFFF;
line-height: 33px;
margin-top: 6px;
white-space: nowrap;
}
.level-item1{
top: -122px;
left: 193px;
}
.level-item1 img{
width: 69px;
height: 65px;
}
.level-item2{
top: -14px;
left: 446px;
}
.level-item2 img{
width: 51px;
height: 76px;
}
.level-item3{
top: 200px;
left: 492px;
}
.level-item3 img{
width: 71px;
height: 66px;
}
.level-item4{
top: 416px;
left: 368px;
}
.level-item4 img{
width: 64px;
height: 60px;
}
.level-item5{
top: 415px;
left: 24px;
}
.level-item5 img{
width: 55px;
height: 63px;
}
.level-item6{
top: 208px;
left: -98px;
}
.level-item6 img{
width: 56px;
height: 58px;
}
.level-item7{
top: 7px;
left: -56px;
}
.level-item7 img{
width: 61px;
height: 60px;
}
.level-item1-delay{
animation: levelFlash 1s linear forwards;
}
.level-item2-delay{
animation: levelFlash 1s linear 1s forwards;
}
.level-item3-delay{
animation: levelFlash 1s linear 2s forwards;
}
.level-item4-delay{
animation: levelFlash 1s linear 3s forwards;
}
.level-item5-delay{
animation: levelFlash 1s linear 4s forwards;
}
.level-item6-delay{
animation: levelFlash 1s linear 5s forwards;
}
.level-item7-delay{
animation: levelFlash 1s linear 6s forwards;
}
@keyframes levelFlash {
0%{
opacity: 0;
}
100%{
opacity: 1;
}
}
.level-con{
height: 100%;
}
.level-con img{
display: block;
margin: 13px auto 0;
width: 340px;
height: 14px;
}
.level-con-title{
font-size: 42px;
font-weight: 800;
color: #FFFFFF;
line-height: 43px;
background: linear-gradient(0deg, #C89B58 0%, #FAF1BD 33.544921875%, #CEA45E 65.3564453125%, #E0D192 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
padding-top: 38px;
}
.level-con-desc{
font-size: 22px;
font-weight: 500;
color: #FFFFFF;
line-height: 43px;
}
.level-con-tip{
font-size: 18px;
font-weight: 500;
color: #FFFFFF;
line-height: 30px;
padding-top: 6px;
}
@keyframes starFlash {
0%{
transform: scale(.8);
opacity: .1;
}
50%{
transform: scale(1.2);
opacity: 1;
}
100%{
transform: scale(.8);
opacity: .1;
}
}
@keyframes starMove{
0%{
top: -40px;
left: 186px;
}
12.5%{
top: -40px;
left: 186px;
}
25%{
top: 47px;
left: 366px;
}
37.5%{
top: 243px;
left: 412px;
}
50%{
top: 401px;
left: 286px;
}
62.5%{
top: 401px;
left: 84px;
}
75%{
top: 243px;
left: -42px;
}
87.5%{
top: 47px;
left: 2px;
}
100%{
top: -40px;
left: 186px;
}
}
/* 版块3 end */
/* 版块4 start */
.block4-video-box{
width: 100%;
min-height: 631px;
position: relative;
overflow: hidden;
}
.block4-video{
width: 100%;
height: 100%;
background: url(../../images/bufan/block4-video-face.jpg) no-repeat;
background-size: cover;
background-position: center;
object-fit: fill;
}
.block4-play{
width: 135px;
height: 135px;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
z-index: 3;
cursor: pointer;
user-select: none;
-webkit-user-drag: none;
}
.block4-poster{
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
z-index: 2;
background: url(../../images/bufan/block4-video-face.jpg) no-repeat;
background-size: cover;
background-position: center;
}
.block4-btm-box{
width: 100%;
height: 207px;
background: url(../../images/bufan/block4-btm-bg.jpg) no-repeat;
background-size: cover;
}
.block4-btm{
width: 1225px;
margin: 0 auto;
padding-top: 53px;
}
.block4-item{
width: 33.33%;
display: flex;
}
.block4-item .item-logo{
width: 100px;
height: 100px;
background: url(../../images/bufan/block4-item-bg.png) no-repeat;
background-size: cover;
}
.block4-item .item-logo img{
width: 52px;
height: 52px;
}
.block4-item .item-title{
font-size: 18px;
font-family: Adobe Heiti Std;
font-weight: normal;
color: #C79830;
line-height: 30px;
background: linear-gradient(0deg, #C89B58 0%, #FAF1BD 33.544921875%, #CEA45E 65.3564453125%, #E0D192 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
padding: 9px 0;
}
.block4-item .item-con{
padding-left: 17px;
}
.block4-item .item-desc{
font-size: 16px;
font-family: NotoSansHans;
font-weight: 400;
color: #898989;
line-height: 30px;
}
/* 版块4 end */
/* 版块5 start */
.block5-wrap{
height: 810px;
background: url(../../images/bufan/block5-bg.jpg) no-repeat;
background-size: cover;
background-position: center;
}
.block5{
width: 1225px;
margin: 0 auto;
}
.block5-title{
font-size: 40px;
color: #fff;
font-weight: 800;
line-height: 52px;
padding-top: 79px;
}
.block5-title span{
color: #C79830;
height: 52px;
}
.block5-desc{
font-size: 16px;
font-weight: 500;
color: #FFFFFF;
line-height: 30px;
text-align: center;
padding-top: 30px;
}
.block5-desc img{
width: 26px;
height: 13px;
}
.block5-con{
padding-top: 60px;
display: flex;
justify-content: space-around;
}
.block5-item{
display: flex;
flex-direction: column;
align-items: center;
}
.block5-item .item-logo{
height: 271px;
}
.block5-item .item-title{
font-size: 24px;
font-family: NotoSansHans;
font-weight: 400;
color: #FFFFFF;
line-height: 30px;
background: linear-gradient(0deg, #C89B58 0%, #FAF1BD 33.544921875%, #CEA45E 65.3564453125%, #E0D192 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.block5-item .item-line{
width: 340px;
height: 11px;
margin: 8px 0 12px;
}
.block5-item .item-desc{
font-size: 16px;
font-family: PingFang;
font-weight: 400;
color: #FFFFFF;
line-height: 30px;
text-align: center;
}
.block5-item .item-desc span{
font-size: 14px;
opacity: 0.5;
margin-top: 14px;
display: block;
}
/* 版块5 end */
/* 版块6 start */
.block6-wrap{
height: 811px;
background: url(../../images/bufan/block6-bg.png) no-repeat;
background-size: cover;
background-position: center;
}
.block6-pc{
display: block;
}
.block6-phone{
display: none;
}
.block6{
width: 1225px;
margin: 0 auto;
}
.block6-title{
font-size: 40px;
color: #fff;
font-weight: 800;
line-height: 52px;
padding-top: 79px;
text-align: center;
}
.block6-title span{
color: #C79830;
height: 52px;
}
.block6-desc{
font-size: 16px;
font-weight: 500;
color: #FFFFFF;
line-height: 30px;
text-align: center;
padding-top: 30px;
}
.block6-desc span{
color: #CC9933;
}
.block6-desc img{
width: 26px;
height: 13px;
}
.block6-box{
display: flex;
padding-top: 62px;
}
.block6-con{
width: 512px;
padding-top: 84px;
padding-left: 61px;
}
.block6-con .con-text{
font-size: 16px;
line-height: 30px;
color: #fff;
padding-bottom: 42px;
}
.block6-con .con-text span{
color: #C79830;
}
.block6-con .con-text img{
width: 26px;
height: 13px;
}
.block6-con .con-item img{
width: 90px;
height: 77px;
margin-bottom: 11px;
}
.block6-con .con-item p{
font-size: 14px;
font-weight: 500;
line-height: 22px;
}
.block6-con .con-item:nth-of-type(1){
color: #C1963F;
}
.block6-con .con-item:nth-of-type(2){
color: #BA9254;
}
.block6-con .con-item:nth-of-type(3){
color: #8E8D8D;
}
.block6-con .con-item:nth-of-type(4){
color: #94693F;
}
.block6-swiper{
width: 652px;
height: 445px;
position: relative;
}
.block6-swiper .swiper1,.block6-swiper .swiper3{
width: 250px;
height: 358px;
position: absolute;
top: 50%;
transform: translateY(-50%);
background-color: rgba(0, 0, 0, .3);
z-index: 1;
-webkit-clip-path: polygon(82.65px 0%, 100% 0%, 167.35px 100%, 0% 100%);
clip-path: polygon(82.65px 0%, 100% 0%, 167.35px 100%, 0% 100%);
overflow: hidden;
}
.block6-swiper .swiper1::after,.block6-swiper .swiper3::after{
content: '';
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
background: rgba(0, 0, 0, .6);
z-index: 10;
}
.block6-swiper .swiper2{
width: 310px;
height: 445px;
position: absolute;
background-color: #fff;
z-index: 2;
-webkit-clip-path: polygon(102.73px 0%, 100% 0%, 207.27px 100%, 0% 100%);
clip-path: polygon(102.73px 0%, 100% 0%, 207.27px 100%, 0% 100%);
}
.block6-swiper .swiper1{
left: 0;
}
.block6-swiper .swiper3{
right: 0;
}
.block6-swiper .swiper2{
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
}
.block6-swiper .swiper{
height: 100%;
position: relative;
}
.block6-swiper .son{
width: 100%;
height: 100%;
position: relative;
}
.block6-swiper .son img{
width: 100%;
height: 100%;
object-fit: cover;
}
.block6-swiper .swiper::before,.swiper::after{
content: '';
position: absolute;
background: #C79830;
z-index: 2;
}
#swiper1.swiper::before, #swiper3.swiper::before, #swiper1.swiper::after,#swiper3.swiper::after{
width: 32px;
height: 46px;
-webkit-clip-path: polygon(10.62px 0%, 100% 0%, 21.38px 100%, 0% 100%);
clip-path: polygon(10.62px 0%, 100% 0%, 21.38px 100%, 0% 100%);
}
#swiper1.swiper::before, #swiper2.swiper::before, #swiper3.swiper::before{
top: 0;
right: 0;
}
#swiper1.swiper::after, #swiper2.swiper::after, #swiper3.swiper::after{
bottom: 0;
left: 0;
}
#swiper2.swiper::before,#swiper2.swiper::after{
width: 40px;
height: 56px;
-webkit-clip-path: polygon(12.93px 0%, 100% 0%, 27.07px 100%, 0% 100%);
clip-path: polygon(12.93px 0%, 100% 0%, 27.07px 100%, 0% 100%);
}
/* 版块6 end */
/* 版块7 start */
.block7-wrap{
min-height: 1088px;
background: url(../../images/bufan/block7-bg.png) no-repeat;
background-position: top center;
background-size: cover;
}
.block7{
width: 1225px;
margin: 0 auto;
}
.block7-wrap .block7-pc{
display: block;
}
.block7-wrap .block7-phone{
display: none;
}
.block7-title{
font-size: 40px;
color: #fff;
font-weight: 800;
text-align: center;
line-height: 52px;
padding-top: 100px;
}
.block7-title span{
color: #C79830;
height: 52px;
}
.block7-title img{
width: 70px;
height: 34px;
}
.block7-desc{
font-size: 16px;
color: #FFFFFF;
line-height: 30px;
text-align: center;
margin-top: 18px;
}
.block7-list-box{
box-sizing: border-box;
padding: 16px 13px 0;
}
.block7-list-box .list-title{
font-size: 22px;
font-weight: 800;
color: #FFFFFF;
line-height: 36px;
position: relative;
padding-left: 19px;
}
.block7-list-box .list-title::before{
content: '';
position: absolute;
width: 4px;
height: 21px;
background-color: #C79830;
top: 50%;
left: 0;
transform: translateY(-50%);
}
.block7-list-box .map-btn{
font-size: 16px;
font-weight: 800;
color: #FFFFFF;
line-height: 36px;
cursor: pointer;
user-select: none;
}
.block7-list-box .map-btn img{
width: 27px;
height: 27px;
margin-right: 14px;
}
.block7-list{
margin-top: 32px;
}
.block7-list::after{
content: '';
width: 364px;
height: 0;
}
.block7-item .item-img{
width: 346px;
height: 257px;
display: block;
object-fit: cover;
}
.block7-item .item-title{
padding-top: 24px;
}
.block7-item .item-title p{
max-width: 240px;
font-size: 18px;
font-family: NotoSansHans;
font-weight: 400;
color: #FFFFFF;
line-height: 36px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.block7-item .item-title span{
color: #C79830;
font-size: 18px;
margin-left: auto;
cursor: pointer;
user-select: none;
}
.block7-item .item-title img{
width: 36px;
height: 18px;
margin-left: 7px;
}
.block7-item .item-desc{
width: 346px;
font-size: 14px;
font-family: NotoSansHans;
font-weight: 400;
color: #FFFFFF;
line-height: 36px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
padding-bottom: 30px;
}
.block7-list-box{
display: none;
}
.block7-list .nomore {
display: block;
height: 244px;
object-fit: cover;
margin: 100px auto;
}
/* 版块7 end */
@media (max-width: 992px) {
.pho_p{ padding-left: 0.4rem;}
/* 版块1 start */
.block1-wrap{
height: 6.22rem;
}
.block1{
width: 100%;
}
.block1-title{
font-size: .4rem;
line-height: .52rem;
padding-top: 1.08rem;
}
.block1-title span{
height: .52rem;
}
.block1-title img{
width: .7rem;
height: .34rem;
}
.block1-desc{
font-size: .16rem;
line-height: .3rem;
margin-top: .18rem;
}
/* 版块1 end */
/* 版块2 start */
.block2-wrap{
height: auto;
background: url(../../images/bufan/block2-bg-phone.jpg) no-repeat;
background-size: cover;
}
.block2{
width: 100%;
}
.block2-top{
height: auto;
}
.block2-btm{
height: auto;
margin-top: .4rem;
}
.block2-title{
width: 6.67rem;
height: 1.5rem;
font-size: .4rem;
background: url(../../images/bufan/why-7v.png) no-repeat;
background-size: cover;
padding-top: 1.02rem;
margin: 1.08rem 0 0 .4rem;
}
.block2-title::before{
width: .7rem;
bottom: -.2rem;
}
.block2-title span{
height: .52rem;
}
.block2-title img{
width: .7rem;
height: .34rem;
margin: 0 .02rem 0 .04rem;
}
.block2-desc{
font-size: .26rem;
line-height: .48rem;
padding-top: .42rem;
margin-left: .4rem;
}
.block2-desc img{
width: .45rem;
height: .22rem;
}
.block2-con{
font-size: .18rem;
line-height: .36rem;
padding-top: .22rem;
margin-left: .4rem;
}
.block2-item{
width: calc(100% / 3);
height: 1.5rem;
padding-top: .1rem;
padding-left: 0rem;
box-sizing: border-box;
}
.block2-item .item-title{
font-size: .18rem;
line-height: .59rem;
}
.block2-item .item-desc{
font-size: .16rem;
line-height: .3rem;
}
/* 版块2 end */
/* 版块3 start */
.block3-wrap{
height: auto;
background: url(../../images/bufan/block3-bg-phone.jpg) no-repeat;
background-size: cover;
padding-bottom: 1rem;
}
.block3{
width: 100%;
}
.block3-title{
font-size: .4rem;
line-height: .52rem;
padding-top: .8rem;
}
.block3-title span{
height: .52rem;
}
.block3-title img{
width: .7rem;
height: .34rem;
margin: 0 .02rem 0 .04rem;
}
.block3-desc{
font-size: .18rem;
line-height: .3rem;
padding-top: .22rem;
}
.block3-wrap .block3-phone{
display: block;
}
.block3-desc img{
width: .26rem;
height: .13rem;
}
.block3-level{
width: 4.66rem;
height: 4.54rem;
margin-top: 1.8rem;
}
.block3-line1{
width: 4.66rem;
height: 4.54rem;
}
.block3-line2{
width: 4.17rem;
height: 4.07rem;
}
.block3-line3{
width: 3.79rem;
height: 3.68rem;
}
.block3-line4{
width: 3.36rem;
height: 3.27rem;
}
.block3-line5{
width: 2.94rem;
height: 2.87rem;
}
.block3-star{
width: .94rem;
height: .94rem;
top: -.4rem;
left: 1.86rem;
}
.level-item p{
font-size: .2rem;
line-height: .33rem;
margin-top: .06rem;
}
.level-item1{
top: -1.22rem;
left: 1.93rem;
}
.level-item1 img{
width: .69rem;
height: .65rem;
}
.level-item2{
top: -.14rem;
left: 4.46rem;
}
.level-item2 img{
width: .51rem;
height: .76rem;
}
.level-item3{
top: 2rem;
left: 4.92rem;
}
.level-item3 img{
width: .71rem;
height: .66rem;
}
.level-item4{
top: 4.16rem;
left: 3.68rem;
}
.level-item4 img{
width: .64rem;
height: .6rem;
}
.level-item5{
top: 4.15rem;
left: .24rem;
}
.level-item5 img{
width: .55rem;
height: .63rem;
}
.level-item6{
top: 2.08rem;
left: -.98rem;
}
.level-item6 img{
width: .56rem;
height: .58rem;
}
.level-item7{
top: .07rem;
left: -.56rem;
}
.level-item7 img{
width: .61rem;
height: .6rem;
}
.level-con img{
margin: .13rem auto 0;
width: 3.4rem;
height: 0.14rem;
}
.level-con-title{
font-size: .42rem;
line-height: .43rem;
padding-top: .38rem;
}
.level-con-desc{
font-size: .22rem;
line-height: .43rem;
}
.level-con-tip{
font-size: .18rem;
line-height: .3rem;
padding-top: .06rem;
}
@keyframes starMove{
0%{
top: -.4rem;
left: 1.86rem;
}
12.5%{
top: -.4rem;
left: 1.86rem;
}
25%{
top: .47rem;
left: 3.66rem;
}
37.5%{
top: 2.43rem;
left: 4.12rem;
}
50%{
top: 4.01rem;
left: 2.86rem;
}
62.5%{
top: 4.01rem;
left: .84rem;
}
75%{
top: 2.43rem;
left: -.42rem;
}
87.5%{
top: .47rem;
left: .02rem;
}
100%{
top: -.4rem;
left: 1.86rem;
}
}
/* 版块3 end */
/* 版块4 start */
.block4-video-box{
width: 100%;
height: auto !important;
min-height: auto !important;
}
.block4-video{
/* min-height: 5.48rem; */
min-height: 3.8rem;
background: url(../../images/bufan/block4-video-face-phone.jpg) no-repeat;
background-size: cover;
background-position: center;
}
.block4-play{
width: 1.35rem;
height: 1.35rem;
display: none;
}
.block4-poster{
background: url(../../images/bufan/block4-video-face-phone.jpg) no-repeat;
background-size: cover;
background-position: center;
display: none;
}
.block4-btm-box{
height: 3.05rem;
background: url(../../images/bufan/block4-btm-bg-phone.jpg) no-repeat;
background-size: cover;
}
.block4-btm{
width: 100%;
padding-top: .52rem;
}
.block4-item{
display: flex;
flex-direction: column;
align-items: center;
}
.block4-item .item-logo{
width: 1rem;
height: 1rem;
background: url(../../images/bufan/block4-item-bg.png) no-repeat;
background-size: cover;
}
.block4-item .item-logo img{
width: .52rem;
height: .52rem;
}
.block4-item .item-title{
font-size: .18rem;
line-height: .3rem;
padding: .13rem 0;
text-align: center;
}
.block4-item .item-con{
padding-left: 0;
}
.block4-item .item-desc{
font-size: .16rem;
line-height: .3rem;
text-align: center;
}
/* 版块4 end */
/* 版块5 start */
.block5-wrap{
height: auto;
background: url(../../images/bufan/block5-bg-phone.jpg) no-repeat;
background-size: cover;
background-position: center;
}
.block5{
width: 100%;
}
.block5-title{
font-size: .4rem;
line-height: .52rem;
padding-top: .8rem;
}
.block5-title span{
height: .52rem;
}
.block5-desc{
font-size: .16rem;
line-height: .3rem;
padding-top: .3rem;
}
.block5-desc img{
width: .26rem;
height: .13rem;
}
.block5-con{
padding-top: .4rem;
display: block;
}
.block5-item{
flex-direction: row;
align-items: center;
justify-content: center;
padding-bottom: .7rem;
}
.block5-item:nth-of-type(2){
flex-direction: row-reverse;
}
.block5-item .item-logo{
height: 2.71rem;
}
.block5-item .item-title{
font-size: .24rem;
line-height: .3rem;
}
.block5-item .item-line{
width: 3.4rem;
height: .11rem;
margin: .08rem 0 .12rem;
}
.block5-item .item-desc{
font-size: .16rem;
line-height: .3rem;
}
.block5-item .item-desc span{
font-size: 0.14rem;
opacity: 0.5;
margin-top: 0.14rem;
display: block;
}
/* 版块5 end */
/* 版块6 start */
.block6-wrap{
height: auto;
background: url(../../images/bufan/block6-bg-phone.png) no-repeat;
background-size: cover;
background-position: center;
}
.block6-pc{
display: none;
}
.block6-phone{
display: block;
}
.block6{
width: 100%;
}
.block6-title{
font-size: .4rem;
line-height: .52rem;
padding-top: .8rem;
}
.block6-title span{
height: .52rem;
}
.block6-desc{
font-size: .16rem;
line-height: .3rem;
padding-top: .3rem;
}
.block6-desc img{
width: .26rem;
height: .13rem;
}
.block6-box{
display: block;
padding-top: .44rem;
}
.block6-con{
width: 100%;
box-sizing: border-box;
padding-top: .36rem;
padding-left: .6rem;
padding-right: .6rem;
}
.block6-con .con-text{
font-size: .16rem;
line-height: .3rem;
padding-bottom: .31rem;
text-align: center;
}
.block6-con .con-text img{
width: .26rem;
height: .13rem;
}
.block6-con .con-item img{
width: 1.16rem;
height: .99rem;
margin-bottom: .09rem;
}
.block6-con .con-item p{
font-size: .16rem;
line-height: .22rem;
}
.block6-swiper{
width: 6.52rem;
height: 4.45rem;
position: relative;
margin: 0 auto;
}
.block6-swiper .swiper1,.block6-swiper .swiper3{
width: 2.5rem;
height: 3.58rem;
-webkit-clip-path: polygon(.8265rem 0%, 100% 0%, 1.6735rem 100%, 0% 100%);
clip-path: polygon(.8265rem 0%, 100% 0%, 1.6735rem 100%, 0% 100%);
}
.block6-swiper .swiper2{
width: 3.1rem;
height: 4.45rem;
-webkit-clip-path: polygon(1.0273rem 0%, 100% 0%, 2.0727rem 100%, 0% 100%);
clip-path: polygon(1.0273rem 0%, 100% 0%, 2.0727rem 100%, 0% 100%);
}
#swiper1.swiper::before, #swiper3.swiper::before, #swiper1.swiper::after,#swiper3.swiper::after{
width: .32rem;
height: .46rem;
-webkit-clip-path: polygon(.1062rem 0%, 100% 0%, .2138rem 100%, 0% 100%);
clip-path: polygon(.1062rem 0%, 100% 0%, .2138rem 100%, 0% 100%);
}
#swiper2.swiper::before,#swiper2.swiper::after{
width: .4rem;
height: .56rem;
-webkit-clip-path: polygon(.1293rem 0%, 100% 0%, .2707rem 100%, 0% 100%);
clip-path: polygon(.1293rem 0%, 100% 0%, .2707rem 100%, 0% 100%);
}
/* 版块6 end */
/* 版块7 start */
.block7-wrap{
min-height: auto;
background: url(../../images/bufan/block7-bg-phone.png) no-repeat;
background-position: top center;
background-size: cover;
}
.block7{
width: 100%;
}
.block7-wrap .block7-pc{
display: none;
}
.block7-wrap .block7-phone{
display: block;
}
.block7-title{
font-size: .4rem;
line-height: .52rem;
padding-top: .8rem;
}
.block7-title span{
height: .52rem;
}
.block7-title img{
width: .7rem;
height: .34rem;
}
.block7-desc{
font-size: .18rem;
line-height: .3rem;
margin-top: .34rem;
}
.block7-list-box{
box-sizing: border-box;
padding: .4rem .3rem 0;
}
.block7-list-box .list-title{
font-size: .22rem;
line-height: .36rem;
padding-left: .12rem;
}
.block7-list-box .list-title::before{
width: .04rem;
height: .2rem;
}
.block7-list-box .map-btn{
font-size: .16rem;
line-height: .36rem;
}
.block7-list-box .map-btn img{
width: .27rem;
height: .27rem;
margin-right: .1rem;
}
.block7-list{
margin-top: .32rem;
}
.block7-list::after{
content: '';
width: 3.28rem;
height: 0;
}
.block7-item .item-img{
width: 3.28rem;
height: 2.44rem;
}
.block7-item .item-title{
padding-top: .18rem;
}
.block7-item .item-title p{
max-width: 2.2rem;
font-size: .18rem;
line-height: .36rem;
}
.block7-item .item-title span{
font-size: .20rem;
}
.block7-item .item-title img{
width: .36rem;
height: .18rem;
margin-left: .07rem;
}
.block7-item .item-desc{
width: 3.28rem;
font-size: .14rem;
line-height: .36rem;
padding-bottom: .3rem;
}
.city-list{
box-sizing: border-box;
padding: 0.4rem 0.3rem 0;
}
.city-box{
padding-bottom: .54rem;
}
.city-box .city-title{
font-size: .32rem;
font-family: NotoSansHans;
font-weight: 400;
color: #FFFFFF;
line-height: .52rem;
padding-bottom: .2rem;
}
.city-box .city-title img{
width: 0.16rem;
height: 0.1rem;
margin-left: .11rem;
}
.city-box .city-item{
font-size: .2rem;
color: #999;
line-height: .52rem;
white-space: nowrap;
}
.city-box .city-item-active{
color: #C79830;
}
.city-box .city-item-s{
width: 25%;
}
.city-box .city-item-m{
width: 33.33%;
}
.block7-list .nomore {
height: 2.44rem;
margin: 1rem auto;
}
/* 版块7 end */
}
/* 播放器 start */
.play-box{
position: fixed;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, .4);
z-index: 10000;
display: none;
top:0;
}
.play-wrap{
width: 60%;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}
.play{
width: 100%;
}
.close{
width: 40px;
height: 40px;
border-radius: 50%;
background-color: rgba(255, 255, 255, .8);
text-align: center;
line-height: 40px;
color: rgba(0, 0, 0, .8);
font-size: 22px;
position: absolute;
top: -20px;
right: -20px;
user-select: none;
cursor: pointer;
}
/* 播放器 end */