.banner{width:100%;height:100vh;position:relative}
.banner .banner-bg{background-image:url(../images/attractions_Introduction_banner.jpg);background-position:center center;background-repeat:no-repeat;background-size:cover;position:absolute;top:-100px;bottom:-100px;margin:auto;width:100%;height:100%}
.text-box{width:100%;padding-top:70px;padding-bottom:80px}
.text-box .s-title{font-size:18px;line-height:18px;color:#fff;text-align:center}
.text-box .title{font-size:40px;line-height:40px;color:#fff;text-align:center;font-weight:bold;margin-top:23px}
.text-box .p{font-size:16px;line-height:28px;color:white;width:900px;margin:0 auto;text-align:center;margin-top:50px}


.items{width:1280px;margin:0 auto;margin-top:95px}
.items::after{content:"";width:0;height:0;display:block;float:none;clear:both}
.items ul{width:100%}
.items ul li{width:calc(25% - 24px);float:left;margin-right:32px;margin-bottom:60px}
.items ul li:nth-child(4n + 4){margin-right:0}




.items ul li .img{border-radius:14px;overflow:hidden;-webkit-transition:all .2s linear;transition:all .2s linear;display:block;width:295px;position:relative;overflow:hidden;transform:translateY(0);height:394px;background-image:url(../images/lazy_bg.png);background-color:#efefef;background-size:12rem 2.75rem;background-position:center;background-repeat:no-repeat}

.items ul li:hover .img{box-shadow:0 15px 30px rgb(0 0 0 / 20%);transform:translate3d(0,-2px,0)}

.items ul li b img{height:100%;position:absolute;top:0;left:-200px;right:-200px;margin:auto;/* transform:scale(1.01);*/
  -webkit-transform-origin:center center;transform-origin:center center;-webkit-transition:-webkit-transform .8s ease-out;transition:-webkit-transform .8s ease-out;transition:transform .8s ease-out;transition:transform .8s ease-out,-webkit-transform .8s ease-out;backface-visibility:hidden;-webkit-backface-visibility:hidden;-moz-backface-visibility:hidden;-ms-backface-visibility:hidden}

.items ul li:hover b img{transform:scale(1.1)}

.items ul li .title{font-size:18px;color:#333;font-weight:bold;line-height:18px;margin-top:30px}

.items ul li .star{margin-top:13px;margin-bottom:15px}

.items ul li .star:after{content:'';display:block;width:0;height:0;float:none;clear:both}

.items ul li .star span{width:8px;height:8px;border-radius:50%;margin-right:5px;display:block;float:left}



.items ul li .p{font-size:14px;color:#7c8396;line-height:14px;margin-top:15px}
.bottom{width:100%;margin-top:58px;position:relative;overflow:hidden}

@media screen and (max-width:1024px){.banner{min-height:66.66vw;height:66.66vw}
 .text-box{padding-top:4.2rem;padding-bottom:4.6rem}
 .text-box .s-title{font-size:1.6rem;line-height:1.6rem}
 .text-box .title{font-size:2.4rem;line-height:2.4rem}
 .text-box .p{font-size:1.4rem;line-height:2.4rem;width:90%;margin-top:3rem}
 .items{width:90%;margin:0 auto;margin-top:6rem}
 .items ul li{width:calc(50% - 0.8rem);float:left;margin-right:1.6rem;margin-bottom:6rem}
 .items ul li:nth-child(4n + 4){margin-right:1.6rem}
 .items ul li:nth-child(2n + 2){margin-right:0px}
 .items ul li .img{width:100%;height:60vw}}