body{background: #121113;}

/* spr */
.map-fam-spr{ background-image:url(//game.gtimg.cn/images/gp/cp/a20230817world/m/map-fam-spr.png); background-repeat:no-repeat; background-size:0.56rem 1.08rem;}
.map-fam-spr.page-next{ width:0.18rem; height:0.31rem; background-position:50% 24.67532%;}
.map-fam-spr.page-prev{ width:0.18rem; height:0.31rem; background-position:50% 75.32468%;}

.wrapper{background: #f1dcb8; overflow: hidden;padding-top: 0;}

@-webkit-keyframes fadeInDn {
    0% {
        opacity: 0;
        -webkit-transform: translate3d(0,120px,0)
    }

    100% {
        opacity: 1;
        -webkit-transform: translate3d(0,0,0)
    }
}
@keyframes fadeInDn {
    0% {
        opacity: 0;
        transform: translate3d(0,120px,0)
    }

    100% {
        opacity: 1;
        transform: translate3d(0,0,0)
    }
}
.fadeanim { -webkit-animation: fadeInDn .4s ease-out .2s both; animation: fadeInDn .4s ease-out .2s both;}

/* 头图 */
.fam-header{
	width: 100%;
	height: 20rem;
	background: url(//game.gtimg.cn/images/gp/cp/a20230817world/m/fam-header-bg.jpg) no-repeat center top;
	background-size: 100% auto;
	position: relative;
}
.fam-header .hask{
	width: 100%;
	height: 1px;
}
/* 入住指南 */
.fam-guide{
	width: 100%;
	height: 7.24rem;
	position: absolute;
	bottom: 0;
	left: 0;
}
.fam-guide-cont{
	width: 9.52rem;
	height: 5.94rem;
	background: url(//game.gtimg.cn/images/gp/cp/a20230817world/m/fam-guide-bg.png) no-repeat center bottom;
	background-size: 100% auto;
	margin: 0 auto;
	position: relative;
	z-index: 0;
	opacity: 0;
}
.fam-guide-cont .fam-guide-title{
	width: 6rem;
	height: 1.16rem;
	font-size: .6rem;
	font-weight: bold;
	color: #4a3223;
	text-align: center;
	line-height: 1.16rem;
	letter-spacing: .04rem;
	position: absolute;
	top: 0;
	left: 50%;
	margin-left: -2.8rem;
}
.fam-guide-cont .fam-guide-info{
	width: 7.62rem;
	height: 3.8rem;
	position: absolute;
	top: 1.5rem;
	left: 50%;
	margin-left: -3.7rem;
}
.fam-guide-cont .fam-guide-info p{
	font-size: .4rem;
	line-height: .64rem;
	color: #fff;
	text-align: justify;
}
/* 居家环境 */
.fam-envir{
	width: 100%;
	height: auto;
	background: url(//game.gtimg.cn/images/gp/cp/a20230817world/m/fam-bg2.jpg) no-repeat center top;
	background-size: 100% auto;
}
.fam-envir .fam-envir-title{
	width: 100%;
	height: 3.36rem;
	position: relative;
	opacity: 0;
}
.fam-envir .fam-envir-title h3{
	font-size: .68rem;
	font-weight: bold;
	color: #4a3223;
	text-align: center;
	line-height: 3.36rem;
	letter-spacing: .04rem;
}
.fam-envir .fam-envir-title .envir-title-bg{
	width: 100%;
	height: 5.34rem;
	background: url(//game.gtimg.cn/images/gp/cp/a20230817world/m/fam-envir-bg.png) no-repeat center top;
	background-size: 100% auto;
	position: absolute;
	bottom: 0;
	left: 0;
	z-index: 5;
	pointer-events: none;
}
.fam-envir-cont{
	width: 100%;
	height: auto;
	opacity: 0;
}
.fam-envir-cont ul{
	width: 100%;
}
.fam-envir-item{
	width: 9.87rem;
	height: auto;
	border-radius: .4rem;
	margin: .6rem auto 0;
	display: block;
	position: relative;
}
.fam-envir-item::after{
	content: '';
	width: 100%;
	height: 60%;
	border-radius: .4rem;
	background: linear-gradient(to top, rgba(0, 0, 0, .8), rgba(0, 0, 0, 0));
	z-index: 1;
	position: absolute;
	bottom: 0;
	left: 0;
	pointer-events: none;
}
.fam-envir-cont ul li:first-child{
	margin-top: 0;
}
.fam-envir-item img{
	width: 100%;
	height: auto;
	vertical-align: top;
	border-radius: .4rem;
}
.fam-envir-item .envir-item-tit{
	position: absolute;
	bottom: 0;
	left: 0;
	z-index: 2;
	padding-left: .5rem;
}
.fam-envir-item .envir-item-tit h4{
	font-size: .68rem;
	line-height: 1.94rem;
	color: #fff;
	font-weight: bold;
}
.fam-envir-item a{
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
}
/* 家园资讯 */
.fam-info{
	width: 100%;
	height: auto;
	background: url(//game.gtimg.cn/images/gp/cp/a20230817world/m/fam-bg3.jpg) no-repeat center top;
	background-size: 100% auto;
	padding-top: 1.1rem;
}
.fam-info .fam-info-title{
	width: 100%;
	height: 4.3rem;
	padding-top: 1.2rem;
	position: relative;
	opacity: 0;
}
.fam-info .fam-info-title h3{
	font-size: .68rem;
	font-weight: bold;
	color: #4a3223;
	text-align: center;
	line-height: 3.1rem;
	letter-spacing: .04rem;
}
.fam-info .fam-info-title .info-title-bg{
	width: 100%;
	height: 7.12rem;
	background: url(//game.gtimg.cn/images/gp/cp/a20230817world/m/fam-info-bg.png) no-repeat center top;
	background-size: 100% auto;
	position: absolute;
	top: 0;
	left: 0;
	pointer-events: none;
}
.fam-info-cont{
	width: 100%;
	height: 14.54rem;
	opacity: 0;
}
.fam-info-cont .fam-info-swiper{
	width: 100%;
	height: 13.34rem;
	overflow: hidden;
}
.fam-info-swiper .swiper-slide{
	width: 100%;
	height: 100%;
}
.fam-swiper-cont{
	width: 9.87rem;
}
.fam-img-wrap{
	width: 9.87rem;
	margin: 0 auto;
	height: auto;
}
.fam-img-wrap img{
	width: 100%;
	height: auto;
    vertical-align: top;
	border-radius: .4rem  .4rem 0 0;
}
.fam-msg-wrap{
	width: 9.87rem;
	margin: 0 auto;
	padding: .3rem .1rem 0;
	background: #fff;
	height: 6.7rem;
	overflow: hidden;
	border-radius: 0 0 .4rem .4rem;
}
.fam-msg-wrap .fam-info-msg{
	width: 100%;
	height: 5.84rem;
	padding: 0 .8rem;
	overflow-y: auto;
}
.fam-msg-wrap .fam-info-msg h4{
	font-size: .68rem;
	line-height: 1rem;
	font-weight: bold;
	color: #111112;
	text-align: center;
	margin: .7rem 0;
}
.fam-msg-wrap .fam-info-msg p{
	font-size: .4rem;
	line-height: .72rem;
	color: #8d8d8d;
	text-align: justify;
	margin-bottom: .4rem;
}
.fam-msg-wrap .fam-info-msg p:last-child{
	margin-bottom: 0;
}
.fam-info-msg::-webkit-scrollbar {width:.12rem;height:1.5rem;}
.fam-info-msg::-webkit-scrollbar-track-piece {background-color:#fff;margin: .18rem .1rem;}
.fam-info-msg::-webkit-scrollbar-thumb {background-color:#ccc;border-radius: .06rem;}
.fam-info-arrow{
	font-size: 0;
	text-align: center;
}
.fam-info-arrow a{
	width: .6rem;
	height: .6rem;
	display: inline-block;
	vertical-align: top;
	position: relative;
}
.fam-info-arrow a span{
	position: absolute;
	left: 50%;
	top: 50%;
	margin: -.15rem 0 0 -.09rem;
}
.fam-info-arrow .fam-info-pagin{
	height: .6rem;
	display: inline-block;
	vertical-align: top;
	padding-top: .16rem;
	margin: 0 .36rem;
}
.fam-info-arrow .fam-info-pagin span{
	width: .3rem;
	height: .3rem;
	border: .02rem solid #4a3223;
	border-radius: 0;
	margin: 0 .22rem;
	opacity: 1;
	display: inline-block;
	vertical-align: top;
}
.fam-info-pagin span.swiper-pagination-bullet-active{
	background-color: #4a3223;
}
/* 探索更多 */
.fam-more{
	width: 100%;
	height: auto;
	background: url(//game.gtimg.cn/images/gp/cp/a20230817world/m/fam-bg4.jpg) no-repeat center top;
	background-size: 100% auto;
	padding-bottom: 1.8rem;
}
.fam-more .fam-more-title{
	width: 100%;
	height: 5.13rem;
	position: relative;
	padding-top: 2.04rem;
	opacity: 0;
}
.fam-more .fam-more-title h3{
	font-size: .68rem;
	font-weight: bold;
	color: #4a3223;
	text-align: center;
	line-height: 3.1rem;
	letter-spacing: .04rem;
}
.fam-more .fam-more-title .more-title-bg{
	width: 100%;
	height: 9.44rem;
	background: url(//game.gtimg.cn/images/gp/cp/a20230817world/m/fam-more-bg.png) no-repeat center bottom;
	background-size: 100% auto;
	position: absolute;
	bottom: 0;
	left: 0;
	pointer-events: none;
}
.fam-more-cont{
	width: 100%;
	height: 8.5rem;
	opacity: 0;
}

.swiper-container{position: relative; overflow: hidden;}
.swiper-wrapper{position:relative;width:100%;height:100%;z-index:1;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-transition-property:-webkit-transform;transition-property:-webkit-transform;-o-transition-property:transform;transition-property:transform;transition-property:transform,-webkit-transform;}
.swiper-container-vertical>.swiper-wrapper {-webkit-box-orient: vertical;-moz-box-orient: vertical;-ms-flex-direction: column;-webkit-flex-direction: column;flex-direction: column;}
.swiper-slide{-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;width:100%;height:100%;position:relative;-webkit-transition-property:-webkit-transform;transition-property:-webkit-transform;-o-transition-property:transform;transition-property:transform;transition-property:transform,-webkit-transform; overflow: hidden;}
.swiper-invisible-blank-slide{visibility:hidden}

.wrapper .swiper-img-container{width: 100%;}
.wrapper .swiper-img-container .swiper-slide{width: 7rem; height: 8.5rem; overflow: hidden; background: #000; margin:0 .3rem;border-radius: .4rem; }
.wrapper .swiper-img-container img{display: block; width: 100%; height: 100%; opacity: .3; transition: .3s ease-out opacity; object-fit: cover;}
.wrapper .swiper-img-container p{ color: #fff; font-weight: bold; font-size: .68rem; line-height: 1rem; position: absolute; left: .47rem; bottom: .43rem; letter-spacing: .07rem; opacity: 0; transition: .3s ease-out opacity;}
.wrapper .swiper-img-container .swiper-slide-active img{opacity: 1;}
.wrapper .swiper-img-container .swiper-slide-active p{opacity: 1;}

.fam-more .swiper-container{}
.fam-more .swiper-slide a{display: block; width: 100%; height: 100%;}
.fam-more h5{ color: #fff; font-weight: bold; font-size: .68rem; line-height: 1rem; position: absolute; left: .47rem; bottom: 1.26rem; letter-spacing: .07rem; opacity: 0; transition: .3s ease-out opacity;}
.fam-more h6{ color: #fefefe; font-size: .4rem; line-height: .6rem; position: absolute; left: .47rem; bottom: .52rem; opacity: 0; transition: .3s ease-out opacity}
.fam-more .swiper-slide-active h6{opacity: .5;}
.fam-more .swiper-slide-active h5{opacity: 1;}

.fam-more-swiper .swiper-slide{
	width: 7rem;
	height: 8.5rem;
	margin: 0 .3rem;
	overflow: hidden;
}
.fam-more-swiper .swiper-slide img{
	width: 100%;
	height: auto;
	vertical-align: top;
	border-radius: .4rem;
	opacity: .3;
	transition: .3s ease-out opacity;
}
.fam-more-swiper .swiper-slide h5{
	color: #fff;
	font-weight: bold;
	font-size: .68rem;
	line-height: 1rem;
	position: absolute;
	left: .47rem;
	bottom: 1.26rem;
	letter-spacing: .07rem;
	opacity: 0;
	transition: .3s ease-out opacity;
}
.fam-more-swiper .swiper-slide h6{
	color: #fefefe;
	font-size: .4rem;
	line-height: .6rem;
	position: absolute;
	left: .47rem;
	bottom: .52rem;
	opacity: 0;
	transition: .3s ease-out opacity;
}
.fam-more-swiper .swiper-slide-active img{
	opacity: 1;
}
.fam-more-swiper .swiper-slide-active h5{
	opacity: 1;
}
.fam-more-swiper .swiper-slide-active h6{
	opacity: .5;
}

.swiper-wrapper{position:relative;width:100%;height:100%;z-index:1;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-transition-property:-webkit-transform;transition-property:-webkit-transform;-o-transition-property:transform;transition-property:transform;transition-property:transform,-webkit-transform;-webkit-box-sizing:content-box;box-sizing:content-box;}
.swiper-slide{-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;width:100%;height:100%;position:relative;-webkit-transition-property:-webkit-transform;transition-property:-webkit-transform;-o-transition-property:transform;transition-property:transform;transition-property:transform,-webkit-transform}
.swiper-invisible-blank-slide{visibility:hidden}
.swiper-container-vertical>.swiper-wrapper {-webkit-box-orient: vertical;-moz-box-orient: vertical;-ms-flex-direction: column;-webkit-flex-direction: column;flex-direction: column;}