html,body,.wrapper,.page-box{width: 100%; position: relative; height: 100%;}
body{ min-width: 1400px; max-width: 3840px; overflow-x: auto; margin: 0 auto;}

.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,.wrapper *{box-sizing: border-box;}
.wrapper{background: #fffef8; font-size: 0;}
.page-box>.swiper-wrapper{ transition-timing-function: cubic-bezier(1,0,.2,1);}

.inside-page .nav-bar{background: #fffef8; border-bottom: 1px solid #c7c6c1;}
.isblack.inside-page .nav-bar{background: transparent;  border-bottom: 1px solid rgba(255,255,255,.2);}
.isblack .nav-con a{color: rgba(255,255,255,1);}
.isblack .comm-spr.selection_icon1{ background: url(//game.gtimg.cn/images/gp/cp/a20230817org/jwss-hover.png) no-repeat; background-size: 100% 100%;}

.copygirht_details{height: 165px;}

@font-face {
 	font-family:"hyrys";
 	src: url(//game.gtimg.cn/images/gp/cp/a20250611gsz/font/hyrys.ttf);
}

.page-box .head-box{height: 100vh; background: url(//game.gtimg.cn/images/gp/cp/a20230817org/jwss-bg1.jpg) no-repeat; background-size: cover;}
.head-box .slogan{width: 16.52rem; height: 3.26rem; background: url(//game.gtimg.cn/images/gp/cp/a20230817org/jwss-slogan.png) 50% 50% no-repeat; background-size: contain; position: absolute; left: 50%; margin-left: -8.26rem; top: 50%; margin-top: -1.2rem;}
.head-box .head-title{background: url(//game.gtimg.cn/images/gp/cp/a20230817org/jwss-title.png) no-repeat; width: 15.48rem; height: .53rem; position: absolute; left: 50%; margin-left: -7.74rem; top: 50%; margin-top: 2.2rem;  background-size: 100% 100%; font-size: 0;}
.page-box .head-box .video-box{width: 100%; height: 100%;}
.page-box .head-box .video-box video{object-fit: cover; width: 100%; height: 100%;}

.main-box .swiper-container-main{height: 100vh;}
.main-box .swiper-slide-main{height: auto;}
.page-box .page1{height: 100vh; position: absolute;left: 0; top: 0; width: 100%; opacity: 0;}
.page-box .page1.show{opacity: 1;}
.page-box .page1 .main{height: 11.21rem; position: absolute; width: 19.2rem; left: 50%; margin-left: -9.6rem; top: 50%; margin-top: -4.8rem; padding-left: 9.81rem; padding-top: 2.52rem;}
.page-box .page1 .cover{width: 8.24rem; position: absolute; left: 0; top: 0;}
.page-box .hyrys{font-family:"hyrys";}
.page-box .page1 .txt-box{width: 7.77rem; color: #000; text-align: center; margin: 0 auto;}
.page-box .page1 h1{font-size: .33rem; line-height: .5rem;}
.page-box .page1 h2{font-size: .98rem; line-height: 1.72rem; height: 2.2rem; width: 120%; margin-left: -10%;}
.page-box .page1 .dec{font-size: .24rem; line-height: .42rem; height: 3.54rem;}
.page-box .page1 .num{width: 1.4rem; margin: 0 auto; border-top: .04rem solid #01081c; font-size: .33rem; line-height: 1.22rem;}

.main-box .overlap-box{width: 100%; padding-top: 1.6rem; background: #fffef8;}

.main-box .page2{width: 19rem; margin: 0 auto; position: relative;}
.main-box .page2 .big-box{width: 16.51rem; height: 11.21rem; position: relative;}
.main-box .page2 .big-box li{width: 100%; height: 100%; position: absolute; left: 0; top: 0; transform: translateY(.5rem); opacity: 0; transition: .3s ease-out all;}
.main-box .page2 .big-box li.show{transform: translateY(0); opacity: 1;}
.main-box .page2 img{width: 100%; height: 100%; object-fit: cover;}
.main-box .page2 .small-box{width: 2rem; position: absolute; right: 0; top: 0;}
.main-box .page2 .small-box ul{height: 10.06rem;}
.main-box .page2 .small-box li{width: 2rem; height: 1.2rem; border: 1px solid #b2b1ad; margin-bottom: .22rem;}
.main-box .page2 .small-box li.hover{ border: 1px solid #000;}
.main-box .page2 .num{ color: #c5c5c5; font-size: .64rem; line-height: 1.2rem;}
.main-box .page2 .num span{ color: #111112; font-size: 1rem;}


.jw-spr{ background-image:url(//game.gtimg.cn/images/gp/cp/a20230817org/jwss-spr.png); background-repeat:no-repeat; background-size:3.26rem 0.94rem;}
.jw-spr.btn-close{ width:0.36rem; height:0.36rem; background-position:98.96552% 5.17241%;}
.jw-spr.btn-next.swiper-button-disabled{ width:0.69rem; height:0.32rem; background-position:1.16732% 4.83871%;}
.jw-spr.btn-next{ width:0.69rem; height:0.32rem; background-position:28.79377% 4.83871%;}
.jw-spr.btn-prev.swiper-button-disabled{ width:0.69rem; height:0.32rem; background-position:56.42023% 4.83871%;}
.jw-spr.btn-prev{ width:0.69rem; height:0.32rem; background-position:84.04669% 4.83871%;}
.jw-spr.t5{ width:2.82rem; height:0.54rem; background-position:6.81818% 92.5%;}

.main-box .page-titbox{ color: #000; position: absolute; z-index: 3; pointer-events: none;}
.main-box .page-titbox p{ font-size: .98rem; line-height: 1.2rem;}
.main-box .page-titbox span{ font-size: .52rem; line-height: .8rem; display: block; text-transform: uppercase; margin-top: .28rem;}

.overlap-box .btn-listen{width: 19.2rem; height: 7.65rem; margin: 2.53rem auto 1.93rem; background: url(//game.gtimg.cn/images/gp/cp/a20230817org/v5-jwss-add.jpg) 50% 100% no-repeat; position: relative; display: block; background-size: 100% 100%;}
.overlap-box .btn-listen .mask-box{position: absolute; left: 50%; width: 21.2rem; margin-left: -10.6rem; height: 9rem; overflow: hidden; bottom: 0; -webkit-mask: url(//game.gtimg.cn/images/gp/cp/a20230817org/v5-jwss-add-mask.png); -webkit-mask-size: 100% 100%; pointer-events: none;}
.overlap-box .btn-listen i{position: absolute; bottom: 0; transform: translateY(.3rem); width: 100%; height: 100%;  right: 0; background: url(//game.gtimg.cn/images/gp/cp/a20230817org/v5-jwss-add-img.png) 100% 100% no-repeat; background-size: 13.23rem 8.78rem; transition: .3s ease-out transform;}
.overlap-box .btn-listen:hover i{transform: translateY(0);}
.overlap-box .btn-listen em{width: 3.1rem; height: .79rem; background: url(//game.gtimg.cn/images/gp/cp/a20230817org/v5-jwss-add-i.png) 50% 100% no-repeat; background-size: 100% 100%; position: absolute; top: 4.97rem; left: 3.28rem;}

.overlap-box .btn-listen:hover em{-webkit-animation: aniZoom 2s linear infinite; animation: aniZoom 2s linear infinite;}
@-webkit-keyframes aniZoom{0%{-webkit-transform:scale(1)}50%{-webkit-transform:scale(.8)}100%{-webkit-transform:scale(1)}}
@keyframes aniZoom{0%{transform:scale(1)}50%{transform:scale(.8)}100%{transform:scale(1)}}

.main-box .page3{position: relative; padding-top: .6rem; height: 14rem;}
.main-box .page3 .sw-wrapper{position: relative; padding-top: .4rem; padding-left: 2.95rem;}
.main-box .page3 .page-titbox{left: 1.74rem; top: .04rem;}
.main-box .page3 .swiper-container{overflow: visible; height: 10.14rem; width: 100%; }
.main-box .page3 .swiper-slide{width: 6.58rem; padding: 0 .25rem; overflow: visible;}
.main-box .page3 .img-box{width: 6.08rem; height: 8.28rem; cursor: pointer; transition: .3s ease-out transform;}
.main-box .page3 .swiper-slide:hover .img-box{transform: translateY(-.4rem);}
.main-box .page3 .img-box img{width: 100%; height: 100%; object-fit: cover;}
.main-box .page3 .name{ color: #000; font-size: .24rem; line-height: .3rem; font-weight: bold; margin-top: .28rem;}
.main-box .page3 .time{font-size: .24rem; color: #000; text-transform: uppercase; line-height: .44rem;}
.main-box .page3 .function-box{font-size: 0; text-align: left; padding-left: .26rem;}
.main-box .page3 .function-box a{display: inline-block; vertical-align: top; *zoom:1; *display: inline; transition: .3s ease-out transform;}
.main-box .page3 .function-box a.btn-prev:hover{ transform: translateX(-.2rem);}
.main-box .page3 .function-box a.btn-next:hover{ transform: translateX(.2rem);}
.main-box .page3 .function-box a.swiper-button-disabled{pointer-events: none;}
.main-box .page3 .btn-next{margin-left: .32rem;}
.main-box .page3 .swiper-pagination{margin-top: .54rem;}
.main-box .page3 .function-box span{display: inline-block; vertical-align: top; *zoom:1; *display: inline; width: 1.68rem; height: 2px; background: #c8c7ba; transition: .3s ease-out background;}
.main-box .page3 .function-box span.swiper-pagination-bullet-active{ background: #000;}

.main-box .page4{position: relative; height: 8.2rem; padding-top: 3.68rem;}
.main-box .page4 .page-titbox{ right: 1.72rem; top: .28rem; text-align: right;}
.main-box .page4 .logo-list{font-size: 0; text-align: center;}
.main-box .page4 .logo-list a{display: inline-block; vertical-align: top; *zoom:1; *display: inline; width: 3.4rem; margin: 0 .5rem;}
.main-box .page4 .logo-list span{display: block;}
.main-box .page4 .logo-hpgl{-webkit-mask: url(//game.gtimg.cn/images/gp/cp/a20250611gsz/index/pc/p5-logo1.png);}
.main-box .page4 .logo-jzgy{-webkit-mask: url(//game.gtimg.cn/images/gp/cp/a20250611gsz/index/pc/p5-logo3.png);}
.main-box .page4 .logo-hr{-webkit-mask: url(//game.gtimg.cn/images/gp/cp/a20250611gsz/index/pc/p5-logo2.png);}
.main-box .page4 .logo-tb{-webkit-mask: url(//game.gtimg.cn/images/gp/cp/a20250611gsz/index/pc/v3-p5-logo1.png);}
.main-box .page4 .logo-ch{-webkit-mask: url(//game.gtimg.cn/images/gp/cp/a20250611gsz/index/pc/p5-logo5.png);}
.main-box .page4 .logo-list .logo{width: 1.05rem; height: 1.05rem; -webkit-mask-size: 100% 100%; background-color: #807f77; margin: 0 auto .35rem; transition: .3s ease-out background-color;}
.main-box .page4 .name{font-size: .3rem; line-height: .4rem; color: #807f77; transition: .3s ease-out color;}
.main-box .page4 .english{ color: #a6a59d; font-size: .21rem; text-transform: uppercase; line-height: .4rem; transition: .3s ease-out color;}
.main-box .page4 .logo-list a:hover .logo{background-color: #000;}
.main-box .page4 .logo-list a:hover .name,.main-box .page4 .logo-list a:hover .english{ color: #000;}


.main-box .page5{ border-top: 2px solid#777; padding-top: 1.2rem; padding-bottom: .5rem;}
.main-box .page5 .t5{margin: 0 auto .64rem;}
.main-box .page5 .dec{font-size: .24rem; line-height: .58rem; color: #000; text-align: center;}
.main-box .page5 .info-list{font-size: 0; text-align: center; margin-top: .74rem; position: relative;}
.main-box .page5 .info-list:after{content: ''; width: .02rem; position: absolute; height: .18rem; top: 50%; margin-top: -.09rem; left: 50%; margin-left: -.01rem; background: #787875;}
.main-box .page5 .info-list li{display: inline-block; vertical-align: top; width: 2.5rem; height: .7rem; line-height: .7rem; position: relative;}
.main-box .page5 .info-list .tit{font-size: .21rem; line-height: .7rem; cursor: pointer; color: #000;}
.main-box .page5 .info-list .tit:after{content: ''; width: 0; height: 1px; position: absolute; left: 50%; margin-left: -.42rem; bottom: .18rem; background: #000; transition: .3s ease-out width;}
.main-box .page5 .info-list li:hover .tit:after{width: .84rem;}
.main-box .page5 .info-list .txt-box{position: absolute; width: 5.06rem; left: 50%; margin-left: -2.53rem; bottom: .8rem; border: 2px solid #111; display: none; background: #fffef8; text-align: left; padding-left: .64rem; padding-top: .34rem;}
.main-box .page5 .info-list .txt-box:after{content: ''; position: absolute; width: 43px; height: 20px; background: url(//game.gtimg.cn/images/gp/cp/a20230817org/jwss-border.png) no-repeat; left: 50%; margin-left: -21.5px; bottom: -20px;}
.main-box .page5 .info-list li:hover .txt-box{display: block;}
.main-box .page5 .info-list dl{padding:.2rem 0 .42rem}
.main-box .page5 .info-list dt{ color: #000; font-size: .3rem; line-height: .4rem; position: relative; height: .98rem;}
.main-box .page5 .info-list dt:after{content: ''; position: absolute; width: .3rem; height: .04rem; left: 0; top: .68rem; background: #000;}
.main-box .page5 .info-list dd{padding-bottom: .28rem; position: relative; width: 3.84rem;}
.main-box .page5 .info-list dd h4{font-size: .21rem; color: #000; line-height: .3rem; font-weight: bold;}
.main-box .page5 .info-list dd p{ color: #666; font-size: .21rem; line-height: .3rem;}
.main-box .page5 .info-list .hot{position: absolute; right: 0; top: .02rem; width: 1.2rem; border: 1px solid #111; font-size: .18rem; line-height: .46rem; color: #000; text-align: center;}
.main-box .page5 .info-list em{width: 100%; height: .02rem; background: #c8c7ba; display: block; margin-top: .24rem;}

/*渠道按钮*/
.footer-btn-box{display: none;}


/*版权信息按钮*/
.btn-copy{right: .6rem; position: absolute; bottom: .44rem; z-index: 9; padding-right: .36rem; font-size: .2rem; line-height: .54rem; color: #363636; transition: .3s ease color; height: .54rem;}
.btn-copy i,.btn-copy em{position: absolute; right: 0; top: .155rem; left: auto;}
.btn-copy:hover{color: #222;}
.isblack .btn-copy{color: #b3b3b3;}
.isblack .btn-copy:hover{color: #fff;}
.isblack .correct.btn-copy{color: #363636;}
.isblack .correct.btn-copy:hover{color: #222;}

/*底部*/
.btn-comm-hover i{display: block;}

/*下滑指引*/
.mouse-scroll{position:absolute;bottom:1rem;left:50%;z-index:9;margin-left:-.12rem;width:.24rem;height:.12rem;opacity:.6}

.scroll-arrows{display:block;margin:0 0 .03rem .04rem;width:.05rem;width:.16rem;height:.05rem;height:.16rem;border-right:.02rem solid #000;border-bottom:.02rem solid #000;-webkit-transform:rotate(45deg);transform:rotate(45deg);-ms-transform:rotate(45deg)}
.isblack .scroll-arrows,.isblack .sam-mouse,.isblack .wheel{ border-color: #fff;}
.unu{margin-top:.01rem}
.doi,.trei,.unu{-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{margin-top:-.06rem;-webkit-animation-delay:.2s;-moz-animation-delay:.2s;-webkit-animation-direction:alternate;animation-delay:.2s;animation-direction:alternate}
.trei{margin-top:-.06rem;-webkit-animation-delay:.3s;-moz-animation-delay:.3s;-webkit-animation-direction:alternate;animation-delay:.3s;animation-direction:alternate}
.sam-mouse{top:1.7rem;width:.24rem;height:.42rem;border:.02rem solid #000;border-radius:.14rem;transform:none}
.wheel{position:relative;display:block;margin:.05rem auto;width:.02rem;width:.04rem;height:.05rem;height:.04rem;border:.02rem solid #000;-webkit-border-radius:.08rem;border-radius:.08rem;background:#000;-webkit-animation:mouse-wheel .6s linear infinite;-moz-animation:mouse-wheel .6s linear infinite;animation:mouse-wheel .6s linear infinite}
.isblack .wheel{background:#fff}
@-webkit-keyframes mouse-wheel{0%{opacity:1;-webkit-transform:translateY(0);transform:translateY(0);-ms-transform:translateY(0)}
100%{opacity:0;-webkit-transform:translateY(6px);transform:translateY(6px);-ms-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}}


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

@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;}
}

.head-box .slogan,.head-box .head-title,.main-box .page1 .cover,.main-box .page1 .txt-box{opacity: 0;}
.head-box.swiper-slide-ani .slogan{animation: bounceInbot .5s .4s ease-out both;}
.head-box.swiper-slide-ani .head-title{animation: bounceInbot .5s .6s ease-out both;}

.main-box.swiper-slide-ani .page1 .cover{animation: bounceInleft .5s .2s ease-out both;}
.main-box.swiper-slide-ani .page1 .txt-box{animation: bounceInright .5s .2s ease-out both;}

.dia-mask{outline: none; width: 100vw; height: 100vh; background: rgba(255,255,255,.95); position: fixed; left: 0; top: 0; display:flex; display:-webkit-flex; align-items:center; justify-content:center; z-index: 99; transform: translateX(110%);}
.dia-mask.show{transform: translateX(0%);}
.dia-org-main{width: 16.2rem; height: 11.8rem; position: relative;}
.dia-org-main .btn-close{position: absolute; right: -.6rem; top: 0; z-index: 3; transition: .3s ease all; transform-origin: center center;}
.dia-org-main .btn-close:hover{transform: rotate(90deg);}
.dia-org-main .sw-wrapper{width: 100%; height: 100%;}
.dia-org-main .swiper-container{width: 100%; border: 1px solid #e5e4df; background: #fff; height: 11rem;}
.dia-org-main .swiper-container img{ width: 100%; height: 100%; object-fit: cover; display: block;}
.dia-org-main .function-box{position: relative; height: 2px;margin-top: .6rem;}
.dia-org-main .function-box a{position: absolute; top: 50%; transition: .3s ease-out transform; margin-top: -.16rem;}
.dia-org-main .function-box .btn-prev{right: 1rem;}
.dia-org-main .function-box .btn-next{right: 0;}
.dia-org-main .function-box a.btn-prev:hover{ transform: translateX(-.2rem);}
.dia-org-main .function-box a.btn-next:hover{ transform: translateX(.2rem);}
.dia-org-main .function-box a.swiper-button-disabled{pointer-events: none;}
.dia-org-main .btn-next{margin-left: .32rem;}
.dia-org-main .swiper-pagination{font-size: 0; text-align: left;}
.dia-org-main .function-box span{display: inline-block; vertical-align: top; *zoom:1; *display: inline; width: 1.68rem; height: 2px; background: #c8c7ba; transition: .3s ease-out background;}
.dia-org-main .function-box span.swiper-pagination-bullet-active{ background: #000;}