body,html{background-color: #111112; min-width: 1080px;}
/*-----------------------------------------*/
.family-spr{ background-image:url(//game.gtimg.cn/images/gp/cp/a20230817world/family-spr.png); background-repeat:no-repeat; background-size:2.56rem 2.97rem;}
.family-spr.arrow_left_default{ width:0.83rem; height:0.82rem; background-position:50.86705% 18.13953%;}
.family-spr.arrow_left_disabled{ width:0.83rem; height:0.82rem; background-position:50.86705% 57.2093%;}
.family-spr.arrow_left_hover{ width:0.83rem; height:0.83rem; background-position:1.7341% 18.2243%;}
.family-spr.arrow_left_mini_default{ width:0.5rem; height:0.5rem; background-position:94.17476% 1.21457%;}
.family-spr.arrow_left_mini_disabled{ width:0.5rem; height:0.5rem; background-position:83.98058% 56.68016%;}
.family-spr.arrow_left_mini_hover{ width:0.5rem; height:0.5rem; background-position:83.98058% 77.73279%;}
.family-spr.arrow_right_default{ width:0.83rem; height:0.82rem; background-position:1.7341% 57.67442%;}
.family-spr.arrow_right_disabled{ width:0.83rem; height:0.82rem; background-position:1.7341% 96.74419%;}
.family-spr.arrow_right_hover{ width:0.8rem; height:0.83rem; background-position:98.29545% 25.70093%;}
.family-spr.arrow_right_mini_default{ width:0.5rem; height:0.5rem; background-position:42.71845% 98.78543%;}
.family-spr.arrow_right_mini_disabled{ width:0.5rem; height:0.5rem; background-position:67.96117% 98.78543%;}
.family-spr.arrow_right_mini_hover{ width:0.5rem; height:0.5rem; background-position:93.20388% 98.78543%;}
.family-spr.family-text-left{ width:1.89rem; height:0.16rem; background-position:4.47761% 1.06762%;}
.family-spr.family-text-right{ width:1.89rem; height:0.16rem; background-position:4.47761% 7.47331%;}
/*conmm*/

.wrapper{max-width: 2560px;margin: 0 auto;}
.swiper-button-next, .swiper-button-prev{background: none !important;}
.dialog{outline: none;}
.sw_dia .tit_txt{opacity: 1;}
.sw_dia .tit_txt{text-align: center;font-size: 0;}
.sw_dia .tit_txt span{font-size: 0.48rem;font-weight: 500;color: #fff;position: relative;letter-spacing: 0.08rem;}
.sw_dia .tit_txt span::before{content: '';width:1.87rem; height:0.14rem;background: url(//game.gtimg.cn/images/gp/cp/a20230817world/line_left.png) no-repeat;background-size: 100% 100%;position: absolute;left: -2.25rem;top: 50%;transform: translateY(-50%);}
.sw_dia .tit_txt span::after{content: '';width:1.87rem; height:0.14rem;background: url(//game.gtimg.cn/images/gp/cp/a20230817world/line_right.png) no-repeat;background-size: 100% 100%;position: absolute;right: -2.25rem;top: 50%;transform: translateY(-50%);}
.sw_dia .dia-con{width: 12rem;margin: 0 auto;position: relative;}
.sw_dia .swiper-button-next{right: -1.5rem;width: 0.83rem;height: 0.83rem;position: absolute;}
.sw_dia .swiper-button-prev{left: -1.5rem;width: 0.83rem;height: 0.83rem;position: absolute;}
/* .sw_dia .swiper-button-disabled{opacity: 0.6;} */
.sw_dia .dia-close{position: absolute;right: -1.8rem;top: 0;width: 0.54rem;height: 0.62rem;}
.sw_dia .dia-close span{display: block;position: absolute;top: 0px; left: 0px;  transition: .3s ease-out opacity;}
.sw_dia .dia-close span.act{opacity:0;}
.sw_dia .dia-close:hover span.act{opacity: 1;}
.sw_dia .sw_dia_box{position: relative;}
.sw_dia .dia_img{width: 100%;height: 6.7rem;}
.sw_dia .dia_img img{width: 100%;height: 100%;object-fit: cover;}
.sw_dia .dia_txt_box .tit_txt{margin: 0.8rem 0 0.4rem;}
.sw_dia .dia_txt_box .text{font-size: 0.26rem;color: #fff;opacity: 0.8;line-height: 1.8;}
.sw_dia .swiper-button-prev:hover .family-spr.tc_left_hover{opacity: 1;}
.sw_dia .swiper-button-next:hover .family-spr.tc_right_hover{opacity: 1;}
.sw_dia .swiper-button-prev:hover .family-spr.tc_left{opacity: 0;}
.sw_dia .swiper-button-next:hover .family-spr.tc_right{opacity: 0;}
.sw_dia .swiper-button-prev .arrow_left_disabled{opacity: 0;}
.sw_dia .swiper-button-next .arrow_right_disabled{opacity: 0;}
.sw_dia .swiper-button-prev .family-spr.tc_left_hover{opacity: 0;}
.sw_dia .swiper-button-next .family-spr.tc_right_hover{opacity: 0;}
.sw_dia .swiper-button-disabled span{opacity: 0;}
.sw_dia .swiper-button-disabled .family-spr.tc_left,.swiper-button-disabled .family-spr.tc_right{opacity: 1 !important;}
.sw_dia .swiper-button-prev span,.sw_dia .swiper-button-next span{position: absolute;top: 0px;left: 0px; display:block;}
.emerge{animation: atmove .4s .2s ease-out both;animation-fill-mode: forwards;}

/*Ö÷ÌåÄÚÈÝ*/
.swiper-button-prev.swiper-button-disabled{opacity: 1 !important;}
.swiper-button-next.swiper-button-disabled{opacity: 1 !important;}
div,ul,li,a,span,p{margin: 0px;padding: 0px;}
img{vertical-align: bottom;}

.sw_dia .swiper-button-prev span,.sw_box .swiper-button-prev span,.sw_dia .swiper-button-next span,.sw_box .swiper-button-next span{
  transition: .3s ease-out opacity;
}
h3{
    font-size:0.48rem ; color: #4a3223;text-align: center;font-weight: 700;
}
.swiper-button-next, .swiper-button-prev {
     margin-top: 0 !important; 
}
.content{width: 100%;position: relative;}

.page1{ position: relative; background: url(//game.gtimg.cn/images/gp/cp/a20230817world/family-bg1.jpg) no-repeat center top; height: 14.12rem;}

.page2{height: 4.95rem; position: relative;background: url(//game.gtimg.cn/images/gp/cp/a20230817world/family-bg2.jpg) no-repeat center top; margin-top: -1px;}
.page2 .page2-box{width: 100%; height: 4rem;padding-top: 0.8rem;overflow: hidden; background: url(//game.gtimg.cn/images/gp/cp/a20230817world/family-page2-box.png) no-repeat center top; background-size: 9.40rem 4rem;position: absolute;
  top: -0.84rem;left: 0;}
.page2 .page2-box h3{line-height:0.9rem;font-size:0.48rem ; color: #4a3223;text-align: center; }
.page2 .page2-box p{line-height:0.4rem ;margin-top: 2.1rem; font-size:0.24rem ; color: #ffffff;text-align: left; position: absolute; top: 0px; left: 50%; width:7.64rem;margin-left: -3.32rem;}
.page3{height: 10rem; position: relative;text-align: center;background: url(//game.gtimg.cn/images/gp/cp/a20230817world/family-bg3.jpg) no-repeat center top; margin-top:-1px;overflow: hidden;}
h3.title{text-align: center;position: relative;margin: 0 auto; width: 14rem; height: .46rem; font-size: 0;margin-top: 0.03rem ;}
h3.title span,h3.title p { display: inline-block; vertical-align: top;}
h3.title span { margin: .14rem 1.44rem 0;}
h3.title p{line-height: 0.48rem;color: #4a3223; font-size: .48rem; font-weight: bold; line-height: .56rem; margin-top: -.05rem;}

.page4{text-align: center;height: 9.56rem;overflow: hidden;position: relative;background: url(//game.gtimg.cn/images/gp/cp/a20230817world/family-bg4.jpg) no-repeat center top; margin-top: -1px;padding-top: 0.02rem;}
.page5{text-align: center;height: 14.2rem;overflow: hidden;position: relative;background: url(//game.gtimg.cn/images/gp/cp/a20230817world/family-bg5.jpg) no-repeat center top; margin-top: -1px;padding-top: 0.1rem;}
.page1,.page2,.page3,.page4,.page5{background-size: 100% 100%;}

.page4 .p2_box{height: 5.86rem;width: 16.22rem; margin: .94rem auto 0;border-radius: 0.3rem;overflow: hidden;}
.page4 .left_img_box{float: left;}
.page4 .left_img_box{width: 10.44rem;height: 100%;}
.page4 .left_img_box .swiper-container{width: 100%;height: 100%;}
.page4 .left_img_box .img_box{width: 100%;height: 100%;position: relative;}
.page4 .left_img_box img{width: 100%;vertical-align: top;height: 100%;object-fit: cover;}
.page4 .left_img_box .swiper-pagination{line-height: 0.18rem;}
.page4 .left_img_box .swiper-pagination span{width: 0.6rem;height: 0.02rem;background: #fff;opacity: 0.5;margin: 0;border-radius: initial;vertical-align: middle;}
.page4 .left_img_box .swiper-pagination span.swiper-pagination-bullet-active{height: 0.04rem;opacity: 1;}
.page4 .right_txt_box{text-align: left;float: left;  padding-left: 0.6rem;padding-right: 0.6rem;background-color: #ffffff; width: 4.56rem; height: 100%;text-align: left;position: relative;border-top-right-radius: 0.3rem;border-bottom-right-radius: 0.3rem;}
.page4 .right_txt_box h2{font-size: 0.4rem;color: rgb(16, 16, 16);font-weight: bold;padding: 0.56rem 0 0.5rem;line-height: .4rem;}
.page4 .right_txt_box .p-text{width: 5.05rem;height: 3rem;box-sizing: border-box;padding-right: 0.5rem;overflow: auto;font-size: 0.21rem;color: #000000;line-height: 0.38rem;font-weight: 400;text-align: justify;}
.page4 .right_txt_box .p-text::-webkit-scrollbar {width:0.11rem;height:3.3rem;}
.page4 .right_txt_box .p-text::-webkit-scrollbar-track-piece {background-color:white;}
.page4 .right_txt_box .p-text::-webkit-scrollbar-thumb {background-color:#e5e5e5;border-radius: 0.06rem;}
.page4 .right_txt_box .p-text p{
	margin-bottom: 0.26rem;
}
.page4 .right_txt_box .p-text p:nth-last-child{
	margin-bottom: 0rem;
}
.page4 .btn_switch{
       position: absolute;
    left: 0.6rem;
    bottom: 0.38rem;
    width: 1.24rem;
    height: 0.5rem;
}
.page4 .btn_switch a{display:block;width: 0.5rem;height: 0.5rem;}
.page4 .btn_switch a:nth-child(1){position: absolute;top: 0rem;left: 0;}
.page4 .btn_switch a:nth-child(2){position: absolute;top: 0rem;right:0;}
.page4 .btn_switch a span{position: absolute; top: 0px;left: 0px;display: block;opacity: 0; transition: .3s ease-out opacity;}
.page4 .btn_switch a:nth-child(1) .arrow_left_mini_default{opacity: 1;}
.page4 .btn_switch a:nth-child(2) .arrow_right_mini_default{opacity: 1;}
.page4 .btn_switch a:nth-child(1) .arrow_left_mini_disabled{opacity: 0;}
.page4 .btn_switch a:nth-child(2) .arrow_right_mini_disabled{opacity: 0;}
.page4 .btn_switch a:nth-child(1):hover .arrow_left_mini_default{opacity: 0;}
.page4 .btn_switch a:nth-child(2):hover .arrow_right_mini_default{opacity: 0;}
.page4 .btn_switch a:nth-child(1).swiper-button-disabled .arrow_left_mini_default{opacity: 0;}
.page4 .btn_switch a:nth-child(2).swiper-button-disabled .arrow_right_mini_default{opacity: 0;}
.page4 .btn_switch a:nth-child(1).swiper-button-disabled .arrow_left_mini_disabled{opacity: 1;}
.page4 .btn_switch a:nth-child(2).swiper-button-disabled .arrow_right_mini_disabled{opacity: 1;}
.page4 .btn_switch a:nth-child(1):hover .arrow_left_mini_hover{opacity: 1;}
.page4 .btn_switch a:nth-child(2):hover .arrow_right_mini_hover{opacity: 1;}
.page4-box{position: absolute;top: 35%;left: 6%; width:4.13rem;height:4.63rem;z-index: 2;}
.page4-box img{width: 100%;height: 100%;object-fit: cover;}

.swiper-button-prev{background: none;}
.swiper-button-next{background: none;}
.sw_box{width: 16.56rem; margin: .9rem auto 0;position: relative;}
.sw_box .swiper-slide{margin: 0 0.18rem;width: 5.16rem;height: 6.28rem;}
.sw_box .swiper-button-prev{left: -1.52rem;top: 3.08rem;background: none;width: 0.83rem;height: 0.83rem;position: absolute;}
.sw_box .swiper-button-next{right: -1.52rem;top: 3.08rem;background: none;width: 0.83rem;height: 0.83rem;position: absolute;}
.sw_box .swiper-button-prev:hover .family-spr.arrow_left_hover{opacity: 1;}
.sw_box .swiper-button-next:hover .family-spr.arrow_right_hover{opacity: 1;}
.sw_box .swiper-button-prev:hover .family-spr.arrow_left_default{opacity: 0;}
.sw_box .swiper-button-next:hover .family-spr.arrow_right_default{opacity: 0;}
.sw_box .swiper-button-prev .family-spr.arrow_left_disabled{opacity: 0;}
.sw_box .swiper-button-next .family-spr.arrow_right_disabled{opacity: 0;}
.sw_box .swiper-button-prev .family-spr.arrow_left_hover{opacity: 0;}
.sw_box .swiper-button-next .family-spr.arrow_right_hover{opacity: 0;}

.sw_box .swiper-button-disabled span{opacity: 0;}
.sw_box .swiper-button-disabled .family-spr.arrow_left_disabled,.swiper-button-disabled .family-spr.arrow_right_disabled{opacity: 1 !important;}
.sw_box .swiper-button-prev span,.sw_box .swiper-button-next span{position: absolute;top: 0px;left: 0px; display:block;}
.sw_box .sw_item{position: relative;width: 100%;height: 100%;overflow: hidden;margin: 0 auto;border-radius: 0.3rem;}
.sw_box .sw_item img{width: 100%;height: 100%;object-fit: cover; display: block;transition: all .3s;}
.sw_box .sw_item a{position: absolute;top: 0;left: 0;width: 100%;height: 100%;display: block;}
.sw_box .sw_item:hover img{transform: scale(1.1);}
.p1_sw_box .sw_item .dark_mask,.p2_sw_box .sw_item .dark_mask{width: 100%;height: 100%;position: absolute;left: 0;top: 0;transition: opacity .3s;}
.p1_sw_box .sw_item .dark_mask span,.p2_sw_box .sw_item .dark_mask span{display: block; background:linear-gradient(rgba(255, 255, 255, 0),rgba(0, 0, 0, 0.9));opacity: 0.6;width: 100%;height: 50%;position: absolute;top: 50%;left: 0px;}
.p1_sw_box .sw_item .dark_mask p,.p2_sw_box .sw_item .dark_mask p{text-align: left;
  font-size: 0.36rem;
  font-weight: 500;
  color: #fff;
  width: 100%;
  line-height: 0.36rem;
  /* height: 0.8rem; */
  position: absolute;
  bottom: 0.4rem;
  left: 0.4rem;}
.p3_sw_box .sw_item .dark_mask span{font-size: 0.4rem;font-weight: 700;color: #fff; line-height: 0.51rem;}
.p3_sw_box .sw_item .dark_mask p{font-size: 0.21rem;font-weight: 500;color: #fff;line-height: 0.21rem;text-align: left;}
.p3_sw_box .sw_item .dark_mask{text-align: left;position: absolute;left: 0.38rem;bottom: 0.38rem;}

@keyframes bounceInleft {
	0% {opacity: 0;transform: translateX(-2rem);}
	100% {transform: translateX(0);opacity: 1;}
}

@keyframes bounceInright{
	0% {opacity: 0;transform: translateX(2rem);}
	100% {transform: translateX(0);opacity: 1;}
}

@keyframes bounceInbot {
	0% {opacity: 0;transform: translateY(200px);}
	100% {transform: translateY(0);opacity: 1;}
}

@keyframes bounceIntop {
	0% {opacity: 0;transform: translateY(-2rem);}
	100% {transform: translateY(0);opacity: 1;}
}

@keyframes scale {
    0%{transform: scale(1.5);opacity: 0;}
    80%{transform: scale(0.9);opacity: 1;}
    100%{transform: scale(1);opacity: 1;}
}

.page2 .page2-box,.page3 .title,.page3 .p1_sw_box.sw_box,.page4 .title,.page4 .p2_box.clearfix,.page5 .title,.page5 .p3_sw_box.sw_box{opacity: 0;}


.page2 .page2-box.swiper-slide-ani{animation: bounceInbot .4s .2s ease-out both;}
.page3 .title.swiper-slide-ani{animation: bounceInbot .4s .2s ease-out both;}
.page3 .p1_sw_box.sw_box.swiper-slide-ani{animation: bounceInbot .4s .2s ease-out both;}
.page4 .title.swiper-slide-ani{animation: bounceInbot .4s .2s ease-out both;}
.page4 .p2_box.clearfix.swiper-slide-ani{animation: bounceInbot .4s .2s ease-out both;}
.page5 .title.swiper-slide-ani {animation: bounceInbot .4s .2s ease-out both;}
.page5 .p3_sw_box.sw_box.swiper-slide-ani{animation: bounceInbot .4s .2s ease-out both;}

.part-map-cont { width: 100%; position: absolute; height: 15.7rem ; left: 0; top: 1rem; z-index: 9; pointer-events: none;}
.arrows-box span { display: block;}
.part-map-cont .mouse-scroll { transition: all .3s;}
.part-map-cont .mouse-scroll.on { opacity: 1;}

.mouse-scroll {
	width: .24rem;
	height: .12rem;
	position: absolute;
	left: 50%;
	margin-left: -.12rem;
	bottom: 1rem;
	z-index: 9;
	opacity: 0;
}


.scroll-arrows
{
  display: block;
  width: .05rem;
  height: .05rem;
  -ms-transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
  border-right: .02rem solid #000;
  border-bottom: .02rem solid #000;
  margin: 0 0 .03rem .04rem;
  width: .16rem;
  height: .16rem;
}


.unu
{
  margin-top: .01rem;
}

.unu, .doi, .trei
{
    -webkit-animation: mouse-scroll 1s infinite;
    -moz-animation: mouse-scroll 1s infinite;
    animation: mouse-scroll 1s infinite;
  
}

.unu
{
  -webkit-animation-delay: .1s;
  -moz-animation-delay: .1s;
  -webkit-animation-direction: alternate;
  
  animation-direction: alternate;
  animation-delay: alternate;
}

.doi
{
  -webkit-animation-delay: .2s;
  -moz-animation-delay: .2s;
  -webkit-animation-direction: alternate;
  
  animation-delay: .2s;
  animation-direction: alternate;
  
  margin-top: -.06rem;
}

.trei
{
  -webkit-animation-delay: .3s;
  -moz-animation-delay: .3s;
  -webkit-animation-direction: alternate;
  
  animation-delay: .3s;
  animation-direction: alternate;
  
  
  margin-top: -.06rem;
}

.sam-mouse {
  height: .42rem;
  width: .24rem;
  border-radius: .14rem;
  transform: none;
  border: .02rem solid #000;
  top: 1.7rem;
}


.wheel {
  height: .05rem;
  width: .02rem;
  display: block;
  margin: .05rem auto;
  background: #000;
  position: relative;
  
  height: .04rem;
  width: .04rem;
  border: .02rem solid #000;
  -webkit-border-radius: .08rem;
          border-radius: .08rem;
}
.isblack .scroll-arrows{border-right: .02rem solid rgb(255, 255, 255); border-bottom: .02rem solid rgb(255, 255, 255);}
.isblack .sam-mouse{border: .02rem solid rgb(255, 255, 255);}
.isblack .wheel{background: rgb(255, 255, 255); border: .02rem solid rgb(255, 255, 255);}
.wheel {
  -webkit-animation: mouse-wheel 0.6s linear infinite;
  -moz-animation: mouse-wheel 0.6s linear infinite;
  animation: mouse-wheel 0.6s linear infinite;
}

@-webkit-keyframes mouse-wheel{
   0% {
    opacity: 1;
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
  }

  100% {
    opacity: 0;
    -webkit-transform: translateY(6px);
    -ms-transform: translateY(6px);
    transform: translateY(6px);
  }
}
@-moz-keyframes mouse-wheel {
  50%{top:.04rem}
}
@-o-keyframes mouse-wheel {

    50%{top:.04rem}
}
@keyframes mouse-wheel {

   50%{top:.04rem}
}

@-webkit-keyframes mouse-scroll {

  0%   { opacity: 0;}
  50%  { opacity: .5;}
  100% { opacity: 1;}
}
@-moz-keyframes mouse-scroll {

  0%   { opacity: 0; }
  50%  { opacity: .5; }
  100% { opacity: 1; }
}
@-o-keyframes mouse-scroll {

  0%   { opacity: 0; }
  50%  { opacity: .5; }
  100% { opacity: 1; }
}
@keyframes mouse-scroll {

  0%   { opacity: 0; }
  50%  { opacity: .5; }
  100% { opacity: 1; }
}