html { -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; font-size: 100%; } body { margin: 0; font-size: 1.4rem; line-height: 1.5; color: #333333; height: 100%; overflow-x: hidden; -webkit-overflow-scrolling: touch; } article, aside, details, figcaption, figure, footer, header, hgroup, main, nav, section, summary { display: block; } audio, canvas, progress, video { display: inline-block; vertical-align: baseline; } audio:not([controls]) { display: none; height: 0; } [hidden], template { display: none; } svg:not(:root) { overflow: hidden; } a { background: transparent; text-decoration: none; -webkit-tap-highlight-color: transparent; color: #0088cc; } a:active { outline: 0; } a:active { color: #006699; } abbr[title] { border-bottom: 1px dotted; } b, strong { font-weight: bold; } dfn { font-style: italic; } mark { background: #ff0; color: #000; } small { font-size: 80%; } sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; } sup { top: -0.5em; } sub { bottom: -0.25em; } img { border: 0; vertical-align: middle; } hr { -moz-box-sizing: content-box; box-sizing: content-box; height: 0; } pre { overflow: auto; white-space: pre; white-space: pre-wrap; word-wrap: break-word; } code, kbd, pre, samp { font-family: monospace, monospace; font-size: 1em; } button, input, optgroup, select, textarea { color: inherit; font: inherit; margin: 0; } button { overflow: visible; } button, select { text-transform: none; } button, html input[type="button"], input[type="reset"], input[type="submit"] { -webkit-appearance: button; cursor: pointer; } button[disabled], html input[disabled] { cursor: default; } button::-moz-focus-inner, input::-moz-focus-inner { border: 0; padding: 0; } input { line-height: normal; } input[type="checkbox"], input[type="radio"] { box-sizing: border-box; padding: 0; } input[type="number"]::-webkit-inner-spin-button, input[type="number"]::-webkit-outer-spin-button { height: auto; } input[type="search"] { -webkit-appearance: textfield; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } input[type="search"]::-webkit-search-cancel-button, input[type="search"]::-webkit-search-decoration { -webkit-appearance: none; } fieldset { border: 1px solid #c0c0c0; margin: 0 2px; padding: 0.35em 0.625em 0.75em; } legend { border: 0; padding: 0; } textarea { overflow: auto; resize: vertical; } optgroup { font-weight: bold; } table { border-collapse: collapse; border-spacing: 0; } td, th { padding: 0; } html, button, input, select, textarea { font-family: "microsoft yahei", "Helvetica Neue", Helvetica, STHeiTi, Arial, sans-serif; } h1, h2, h3, h4, h5, h6, p, figure, form, blockquote { margin: 0; } ul, ol, li, dl, dd { margin: 0; padding: 0; } ul, ol { list-style: none outside none; } h1, h2, h3 { line-height: 2; font-weight: normal; } h1 { font-size: 1.8rem; } h2 { font-size: 1.6rem; } h3 { font-size: 1.4rem; } input::-moz-placeholder, textarea::-moz-placeholder { color: #cccccc; } input:-ms-input-placeholder, textarea:-ms-input-placeholder { color: #cccccc; } input::-webkit-input-placeholder, textarea::-webkit-input-placeholder { color: #cccccc; } * { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .fix {zoom:1;} .fix:after,.fix:before{display:block;content:"clear";height:0;clear:both;overflow:hidden;visibility:hidden;} .none { display: none;} .hidden { width: 0px; height: 0px; overflow: hidden;} .tc { text-align: center;}i,em,small{font-style:normal;}
html,body{width:100%; height:100%; text-size-adjust:none; -webkit-text-size-adjust:none;}
.indent{text-indent: -9.99rem; overflow: hidden;}
.f_l{float:left;}
.f_r{float:right;}
.none{display: none;}
.hidden{ visibility: hidden;}


.wrapper{max-width:7.5rem; width: 100%; /* height: 53.02rem; */ margin:0 auto; position: relative;}
.wrapper img{width: 100%;}

/* 头部导航 */
.top_nav{width:7.5rem; height:1.02rem; color:#fff; background:url(/wap/special/justice/images/top_bg.jpg) no-repeat; background-size:100%; padding:0 .2rem; position: fixed; top: 0; left: 50%; margin-left: -3.75rem; z-index: 10;}
.top_nav .logo{width:0.76rem; height:0.76rem; display:block; margin-top:.09rem; float:left;}
.top_nav .game_info{padding:.04rem 0 0 .14rem; float:left;}
.top_nav .game_info h2{line-height:.44rem; font-size:.36rem; font-weight: normal;}
.top_nav .game_info small{color:#fff; font-size:.14rem;}
.top_nav .top_link{min-width: 2rem; height:.54rem; position: absolute; top: 0.15rem; right: 0.19rem;}
.top_nav .top_link li{width:0.52rem; height:100%; margin-left: .18rem; float: left;}
.top_nav .top_link li a{position: relative; display: block; width:0.52rem; height: 0.52rem; overflow: hidden;}
.top_nav .top_right_btn{
  width: 2.21rem;
  height: 0.62rem;
  position: relative;
  left: 5rem;
  top: 0.18rem;
}
 .mod_bg img, .slogan img, .head_gift img{width: 100% !important; height: 100% !important;}

.footer_nav{ width:7.5rem; height:1.64rem; color:#fff; background:url(/wap/special/justice/images/footer_bg.png) no-repeat; background-size: 100%; position: fixed; left: 50%; bottom: -0.35rem; height: 1.64rem; z-index: 10;  margin-left: -3.75rem; }
.footer_nav .bottom_link { min-width: 2.11rem; height: 0.64rem; position: absolute; top: 0.49rem; left: 0.22rem; }
.footer_nav .bottom_link li{width:2.12rem; height:100%; margin-left: .18rem; float: left;}
.footer_nav .bottom_link li a{position: relative; display: block; width:2.12rem; height: 0.64rem; overflow: hidden;}
.footer_nav.close { display: none; }


.mod{background: #000000;}

.mod_bg1{background: url(/wap/special/justice/images/1.jpg) top center no-repeat; background-size: 100%; overflow: hidden;}


.mod_con{width: 100%; height: 100%; position: absolute; top: 0; left: 0; z-index: 3;}
.mod_con .mid{
  position: relative;
  top: 7.8rem;
}
.mid_buttons{
  top: 3.2rem !important;
}
/* 箭头 */
.arrow{
  position: absolute;
  width: .31rem;
  height: .34rem;
  /* bottom: 0.2rem; */
  top: 16.12rem;
  left: 50%;
  margin-left: -0.155rem;
  background: url(/wap/special/justice/images/arrow.png) no-repeat;
  background-size: 100%;
  z-index: 99;
  animation: arrow 1s infinite;
  -webkit-animation: arrow 1s infinite;
}
@-webkit-keyframes arrow{0%{-webkit-transform:translate(0,-0.08rem);opacity:1;}100%{-webkit-transform:translate(0,0.08rem);opacity:0.7;}}
@keyframes arrow{0%{transform:translate(0,-0.08rem);opacity:1;}100%{transform:translate(0,.08rem);opacity:0.7;}}

/* 缩放动画 */
.rotate{-webkit-animation: fd 1.6s linear infinite; -moz-animation: fd 1.6s linear infinite; animation: fd 1.6s linear infinite;}
.rotate:hover{opacity:0.95; filter:alpha(opacity=95);}

/* 页面 */
.other-pages{background: url(/wap/special/justice/images/bg2.jpg) center top no-repeat,
  url(/wap/special/justice/images/bg_after.png) center bottom no-repeat; background-size: 100%;z-index: 1;width:100%;height: 53.02rem;}
.pages { display: block; } 
.page1{ height: 13.34rem; }
.page2{ height: 23.73rem; background-position: 0 0; margin-top: -1px;}
.page3{ height:  16.12rem; }
.page4{ height: 14.37rem; }
.page5{ height: 13.52rem; }

/* 首屏  */
.home_topbar{ width: 100%; height: 60px; background: url(/wap/special/justice/images/top_head.png) 0 0 no-repeat; background-size:100%; color: #004dc8; font-size: 20px; position: absolute; top: 0; left: 0; text-align: center; z-index: 100;}
.home_topbar .home_menu a{display: inline-block; width: 100px;line-height: 57px;  margin: 0 35px; color: #004dc8;}
.home_topbar .home_menu a:hover{ font-weight: bold; border-bottom: 3px solid #6e98ff;}
.home_buttons{
  position: absolute;
  /* bottom: 2.2rem; */
  top: 4.2rem;
  left: 52%;
  margin-left: -3rem;
  width: 6rem;
  text-align: center;
  display: flex;
  justify-content: center;
}
.home_buttons a{
  display: block;
  float: left;
  width: 3.03rem;
  height: 0.91rem;
  margin: 0 0.1rem;
  position: relative;
  overflow: hidden;
  z-index: 10;
  border-radius: 0.1rem;
}
.home_buttons a:after  {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(120deg, transparent, transparent, rgba(255, 244, 227, 0.4), transparent, transparent);
  transition: all 650ms;
  animation: sg_data 2s linear infinite;
}
@keyframes sg_data{from{left:0}to{left:100%}}
.ageTip{ position: absolute; right: 5%; bottom: 10%; width: 1.35rem; height: 1.37rem; background: url(/wap/special/justice/images/age_tip.png) 0 0 no-repeat; background-size: 100%; z-index: 10;}
.mod_video {
  position: absolute;
    z-index: 1;
    width: 7.5rem;
    top: 0;
    left: 50%;
    margin-left: -3.75rem;
}
.mod_video video{
  width: 100%;
}

/* 事前登录专属好康礼 */
.mod_title_01{ width: 7.5rem; height: 1.87rem; background: url(/wap/special/justice/images/mod_title01.png) 0 0 no-repeat; background-size:100%; margin: 0 auto 0;}
.pre_login_reward{ background: url(/wap/special/justice/images/pre_login_reward_bg.png) top center no-repeat; background-size: cover; width: 7.5rem; height: 9.12rem; position: absolute; margin-top: 0.33rem;}

/* 礼包图动效 */
.pre_login_reward_gift_area{
  position: absolute;
  top: 1.15rem;
  left: 50%;
  width: 6.09rem;
  margin-left: -3.045rem;
  text-align: center;
}
.row {
  display: flex;
  /* justify-content: space-between; */
  justify-content: flex-start;
  gap: 0.44rem;
  flex-wrap: nowrap;
}
.pre_login_reward_gift_area [class^=prize] {
  display: inline-block;
  vertical-align: middle;
  position: relative;
  /* margin: 0 -0.4rem; */
  background: 50%/100% 100% no-repeat;
  width: 1.89rem;
  height: 1.55rem;
  background-image: url(/wap/special/justice/images/prize_square.png);
  margin-bottom: 0.82rem;
}
.pre_login_reward_gift_area [class^=prize]:before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate3d(-50%,-50%,0);
  background: 50%/100% 100% no-repeat;
  width: 1.89rem;
  height: 1.55rem;
  background-image: url(/wap/special/justice/images/prize_light.png);
  -webkit-animation: prizeLight 1s infinite alternate;
  animation: prizeLight 1s infinite alternate;
}
.pre_login_reward_gift_area [class^=prize] .round {
  /* position: absolute;
  left: 50%;
  top: 50%;
  transform: translate3d(-50%,-50%,0);
  background: 50%/100% 100% no-repeat;
  width: 1.89rem;
  height: 1.55rem;
  background-image: url(/wap/special/justice/images/prize_circle.png);
  -webkit-animation: roundRun 17s linear infinite;
  animation: roundRun 17s linear infinite; */
}
.pre_login_reward_gift_area [class^=prize] .title{
  width: 1.89rem;
  height: 0.44rem;
  position: absolute;
  bottom: -0.45rem;
  left: 50%;
  transform: translate3d(-50%,0,0);
}
.pre_login_reward_gift_area .prize-1:after {
  background: 50%/100% 100% no-repeat;
  width: 1.89rem;
  height: 1.55rem;
  background-image: url(/wap/special/justice/images/pre_login_reward_items/prize_01.png);
}
.pre_login_reward_gift_area .prize-1 .title {
  background: 50%/100% 100% no-repeat;
  background-image: url(/web/special/justice/images/pre_login_reward_items/prize_01_title.png);
}
.pre_login_reward_gift_area .prize-2:after {
  background: 50%/100% 100% no-repeat;
  width: 1.89rem;
  height: 1.55rem;
  background-image: url(/wap/special/justice/images/pre_login_reward_items/prize_02.png);
}
.pre_login_reward_gift_area .prize-2 .title {
  background: 50%/100% 100% no-repeat;
  background-image: url(/web/special/justice/images/pre_login_reward_items/prize_02_title.png);
}
.pre_login_reward_gift_area .prize-3:after {
  background: 50%/100% 100% no-repeat;
  width: 1.89rem;
  height: 1.55rem;
  background-image: url(/wap/special/justice/images/pre_login_reward_items/prize_03.png);
}
.pre_login_reward_gift_area .prize-3 .title {
  background: 50%/100% 100% no-repeat;
  background-image: url(/web/special/justice/images/pre_login_reward_items/prize_03_title.png);
}
.pre_login_reward_gift_area .prize-4:after {
  background: 50%/100% 100% no-repeat;
  width: 1.89rem;
  height: 1.55rem;
  background-image: url(/wap/special/justice/images/pre_login_reward_items/prize_04.png);
}
.pre_login_reward_gift_area .prize-4 .title {
  background: 50%/100% 100% no-repeat;
  background-image: url(/web/special/justice/images/pre_login_reward_items/prize_04_title.png);
}
.pre_login_reward_gift_area .prize-5:after {
  background: 50%/100% 100% no-repeat;
  width: 1.89rem;
  height: 1.55rem;
  background-image: url(/wap/special/justice/images/pre_login_reward_items/prize_05.png);
}
.pre_login_reward_gift_area .prize-5 .title {
  background: 50%/100% 100% no-repeat;
  background-image: url(/web/special/justice/images/pre_login_reward_items/prize_05_title.png);
}
.pre_login_reward_gift_area .prize-6:after {
  background: 50%/100% 100% no-repeat;
  width: 1.89rem;
  height: 1.55rem;
  background-image: url(/wap/special/justice/images/pre_login_reward_items/prize_06.png);
}
.pre_login_reward_gift_area .prize-6 .title {
  background: 50%/100% 100% no-repeat;
  background-image: url(/web/special/justice/images/pre_login_reward_items/prize_06_title.png);
}
.pre_login_reward_gift_area .prize-7:after {
  background: 50%/100% 100% no-repeat;
  width: 1.89rem;
  height: 1.55rem;
  background-image: url(/wap/special/justice/images/pre_login_reward_items/prize_07.png);
}
.pre_login_reward_gift_area .prize-7 .title {
  background: 50%/100% 100% no-repeat;
  background-image: url(/web/special/justice/images/pre_login_reward_items/prize_07_title.png);
}
.pre_login_reward_gift_area .prize-8:after {
  background: 50%/100% 100% no-repeat;
  width: 1.89rem;
  height: 1.55rem;
  background-image: url(/wap/special/justice/images/pre_login_reward_items/prize_08.png);
}
.pre_login_reward_gift_area .prize-8 .title {
  background: 50%/100% 100% no-repeat;
  background-image: url(/web/special/justice/images/pre_login_reward_items/prize_08_title.png);
}

.pre_login_reward_gift_area [class^=prize]:after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate3d(-50%,-50%,0);
}

@keyframes roundRun {
  0% {
    transform: translate3d(-50%,-50%,0) rotate(0deg);
}
100% {
    transform: translate3d(-50%,-50%,0) rotate(1turn);
}
}
@keyframes prizeLight {
  0%{opacity:.3}
  to{opacity:1}
}

/* 达标奖励 */
.mod_title_02{ width: 7.5rem; height: 1.87rem; background: url(/wap/special/justice/images/mod_title02.png) 0 0 no-repeat; background-size:100%; margin: 0 auto 0;}
.progress_area{ padding: 0.1rem 0 0 0.5rem;}
.totle_number{ font-size: 0.38rem; color: #fff; /* padding-left: 0.5rem; */ line-height: 1.2; /* margin: -.05rem 0 .05rem ;*/     position: absolute; left: 1.62rem;top: 1.12rem; width: 1.84rem; text-align: center;}
.totle_num{color: #ffea64; font-size: 0.42rem;}
.progress_line{width: 0.08rem; height: 9.7rem; background: #fff; position: absolute; left: 0.5rem; top: 2.3rem; border-radius: 0.08rem;}
.progress_done{ display: block; background: #f9ed89; width: 0.08rem; border-radius: 0.08rem;}
.progress_ico{display: block;  width: 0.3rem; height: 0.3rem; background: url(/wap/special/justice/images/circle_ico.png) 0 0 no-repeat; background-size:100%;}
.done_prizes_list{
  padding: 0.2rem 0 0 0;
  margin-bottom: 2rem;
  position: relative;
  top: 7.5rem;
}
.done_prizes{    
  position: relative;
  height: 1.47rem;
  width: 100%;
}
/* .done_prizes_double{ width: 5.62rem !important;} */
.done_picture{ width: 100%;  height: 2.92rem;  }
.filter_light{filter: grayscale(100%); opacity: .7; }
.done_prizes_01{ 
  width: 3.83rem;
  height: 1.47rem;
  background: url(/wap/special/justice/images/s4_prize01.png) 0 0 no-repeat;
  background-size: 100%;

  margin-left: 0.2rem;
  /* margin: 0 auto; */
}
.done_prizes_02{ 
  width: 3.83rem;
  height: 1.47rem;
  background: url(/wap/special/justice/images/s4_prize02.png) 0 0 no-repeat;
  background-size: 100%;

  margin-left: 1rem;
  /* margin: 0 auto; */
}
.done_prizes_03{
  width: 3.83rem;
  height: 1.47rem;
  background: url(/wap/special/justice/images/s4_prize03.png) 0 0 no-repeat;
  background-size: 100%;

  margin-left: 0.2rem;
  /* margin: 0 auto; */
}
.done_prizes_04{ 
  width: 3.83rem;
  height: 1.47rem;
  background: url(/wap/special/justice/images/s4_prize04.png) 0 0 no-repeat;
  background-size: 100%;

  margin-left: 1rem;
  /* margin: 0 auto; */
}
.done_prizes_05{ 
  width: 3.83rem;
  height: 1.47rem;
  background: url(/wap/special/justice/images/s4_prize05.png) 0 0 no-repeat;
  background-size: 100%;
  margin-left: 0.2rem;
  /* margin: 0 auto; */
}
.done_icon{ position: absolute; top: 40%; right: 0.5rem; width: 0.96rem; height: 0.8rem; background: url(/wap/special/justice/images/done_icon.png) 0 0 no-repeat; background-size:100%; z-index: 2; display: none;}
/* .line{ position: absolute;left: 50%; top: -17px; margin-left: -13px; width: 26px;}
.line1{ height: 174px; background: url(/wap/special/justice/images/line.png) 0 0 no-repeat;}
.line2{ height: 114px; background: url(/wap/special/justice/images/line2.png) 0 0 no-repeat; margin-left: -15px;} */
.mod_title_01{     width: 7.5rem;
  height: 1.87rem;
  background: url(/wap/special/justice/images/mod_title01.png) 0 0 no-repeat;
  background-size: 100%;
  margin: 0 auto 0;
  position: relative;
  top: 7rem;}
/* 异兽图鉴 */
.mod_title_03{ width: 7.5rem; height: 1.87rem; background: url(/wap/special/justice/images/mod_title03.png?1) 0 0 no-repeat; background-size:100%; margin: 0 auto 0;}
.char_swiper {width: 7.5rem; height: 100%;  position: absolute; top: 0; left:50%; margin-left: -3.75rem;}
.char_tit { position: absolute; top: 11.5rem; left: 0;  z-index: 4;}
.char_tit ul{ padding-left: 0.805rem; }
.char_tit li { 
  width: 1.06rem;
  height: 1.06rem;
  margin: 0 0.065rem;
  float: left;
  position: relative;
  z-index: 9;
}
.char_tit li.on .char_pagi_img { display: none;}
.char_tit li .char_pagi_hover { position: absolute; /* top: -0.15rem; left: -0.15rem; */ display: none; width: 1.06rem; height: 1.06rem;}
.char_tit li.on .char_pagi_hover { display: block;}
.role_line{ position: absolute; top: 0.4rem; left: 0; width: 7.5rem; height: 0.3rem; background: url(/wap/special/justice/images/role_line.png?1) 0 0 no-repeat; background-size:100%;}
.char_txt { 
  width: 7.5rem;
  height: 9.12rem;
  position: absolute;
  top: 1.86rem;
  left: 50%;
  margin-left: -3.75rem;
  z-index: 3;
}
.char_txt ul{ width: 7.5rem; height: 11.14rem;}

/* 遊戲特色 */
.mod_title_04{ width: 7.5rem; height: 1.87rem; background: url(/wap/special/justice/images/mod_title04.png) 0 0 no-repeat; background-size:100%; margin: 0 auto 0;}
.features_box {width: 5.73rem; margin: 0 auto;}
.carousel_container { width: 7.5rem; height: 5rem; position: relative; z-index: 2;  margin: 50px auto 0;}
#carousel { position: relative; height: 5rem;}
#carousel img { display: block; width: 6.76rem; height: 3.82rem;}
.carousel-feature { cursor: pointer;}
.carousel-image { border: 0; display: block;}
.carousel-left,
.carousel-right {position: absolute; left: 50%; margin-left: -0.26rem; cursor: pointer; z-index: 9; opacity: 0.9; -webkit-tap-highlight-color: transparent;}
.carousel-left { top: 0.85rem;}
.carousel-right { top: 6.52rem;}
.carousel-left:hover,
.carousel-right:hover{opacity: 1;}
.border_top{ position: absolute; top: 3rem; left: 50%; margin-left: -3.38rem; width: 6.76rem; height: 0.18rem; background: url(/wap/special/justice/images/border_top.png) 0 0 no-repeat; background-size:100%;}
.border_bottom{ position: absolute; top: 5.4rem; left: 50%; margin-left: -3.38rem; width: 6.78rem; height: 0.19rem; background: url(/wap/special/justice/images/border_bottom.png) 0 0 no-repeat; background-size:100%;}



.mod_title_05 {
  width: 1.2rem; height: 0.6rem; background: url(/wap/special/justice/images/mod_title05.png) 0 0 no-repeat; background-size:100%; margin: 0 auto 0;
}
/* S 游戏特色 */

.features_box .swiper { width: 100%; height: 100%;}

.features_box .swiper-slide {
  width: 5.73rem;
  height: 5rem;
  overflow: hidden;
}
.swiper-button-next,.swiper-button-prev{     width: 0.48rem;
  height: 0.65rem;
  margin: -3.5rem 0.1rem;
  -webkit-tap-highlight-color: transparent;}
.swiper-button-next{ background: url(/wap/special/justice/images/arrow_right.png) 0 0 no-repeat; background-size: 100%; margin-right: 0.12rem;}
.swiper-button-prev{ background: url(/wap/special/justice/images/arrow_left.png) 0 0 no-repeat; background-size: 100%;}
.swiper-pagination{    width: 100%;
  text-align: center;
  margin-top: -1rem;
  left: 0;}
.swiper-pagination-bullet{width: 0.24rem; height: 0.24rem; margin: 0 0.135rem; opacity: 1; background: url(/wap/special/justice/images/slide_ico.png) 0 0 no-repeat; background-size: 100%;}
.swiper-pagination-bullet-active{ background: url(/wap/special/justice/images/slide_ico_on.png) 0 0 no-repeat; background-size: 100%;}
/* E 游戏特色 */

/* 添加导航条 */


.mask{width:100%; height:100%; background:#000; filter:alpha(opacity=50); position:fixed; top:0;  opacity:0.5; z-index:100;}

.pop_close{width: 0.47rem; height: 0.45rem; position:absolute; top: 1.1rem; right:0; background: url(/wap/special/justice/images/close.png) no-repeat;background-size:100%; cursor: pointer;}
.pop_buttons{padding: 2.6rem 0 0 1.1rem;}
.pop_buttons a{display: inline-block;}
.pop_appstore_btn{width: 1.5rem; height: 0.48rem; background: url(/wap/special/justice/images/pop_appstore.png) no-repeat;background-size:100%;}
.pop_google_btn{width: 1.5rem; height: 0.48rem; background: url(/wap/special/justice/images/pop_google.png) no-repeat; background-size:100%; margin-right: 10px;}

.swiper-slide-active .fadeInFromLeft {
  animation-name: fadeInFromLeft;
}
.swiper-slide-active .fadeInFromRight{  animation-name: fadeInFromRight;  animation-delay: .5s;}
.swiper-slide-active .animated {
  animation-delay: .1s;
}
.delay-1 {
  animation-delay: 0.3s !important;
}
.animated {
  transition: 1s;
  opacity: 0;
  animation-fill-mode: both;
  animation-duration: 1s;
  animation-name: fadeIn;
}

@keyframes fadeInFromLeft {
  0% {
      opacity: 0;
      transform: translateX(-20%);
  }

  100% {
      opacity: 1;
  }
}
@keyframes fadeInFromRight {
  0% {
      opacity: 0;
      transform: translateX(-20%);
  }

  100% {
      opacity: 1;
  }
}
#footer_msg {
  max-width: 7.5rem;
  width: 100%;
  margin: 0 auto;
}




.srcEl{
  position: absolute;
  left: 50%;
  top: 50%;
  height: 100%;
  width: auto;
  transform: translate(-50%, -50%);
  object-fit: cover;
  width: 7.5rem;
  transition: opacity 2s; /* 2秒内淡入 */
}
.srcEl.fadeIn {
  opacity: 1;
}
.container{
  position: relative;
  width: 100%;
  height: 100vh; /* 或者其他适合你布局的高度 */
  overflow: hidden;
}
.bg .poster{
  height: 13.34rem;
  width: 100%;
}
.poster img{
  height: 100%;
  width: 100%;
  object-fit: cover;
 
}
.top_logo{
  position: relative;
  width: 1.75rem !important;
  height: 0.64rem !important;
  top: 0.1rem;
  left: 0.3rem;
}
.gift{
  display: flex;
  justify-content: space-around;
  align-items: center;
  padding: 0 0.5rem;
}
.gift img{
  width: 1.92rem;
  height: 1.92rem;
}
.gift img:nth-child(1){
transform: scale(0.8);
}
.gift img:nth-child(2){
  transform: scale(1.2);
}
.gift img:nth-child(3){
  transform: scale(0.8);
}
.bottomContent{
    /* margin-top: 2rem; */
    position: relative;
    top: 7.5rem;
    z-index: 2222;
}
.bottomContent .pic{
  display: flex;
  justify-content: space-between;
  padding: 0 2rem;
  margin: 0.5rem 0;
}
.bottomContent .pic img{
  width: 1.38rem;
}
.bottomContent .privacy{
  display: flex;
  justify-content: space-between;
  padding: 0 1.5rem;
  align-items: center;
}
.bottomContent .privacy img:first-child{
  width: 1.75rem;
  height: 0.64rem;
}
.bottomContent .privacy .p_right{
  display: flex;
  flex-direction: column;
  align-items: center;
}
.bottomContent .privacy .p_right img:first-child{
  width: 2.3rem;
  height: 0.18rem;
 
}
.bottomContent .privacy .p_right img:nth-child(2){
  width: 2.10rem;
  height: 0.18rem;
}
.bottomContent .bottom_pracy{
  width: 5.85rem;
  height: 0.24rem;
  /* margin: 0 auto; */
  margin-left: 1rem;
  margin-top: 0.5rem;
}
.welcomePopup {
  position: fixed;
  top: 20%;
  /* left: 50%; */
  /* transform: translate(-50%, -50%); */
  width: 80%;

  /* background: white; */
  border-radius: 10px;
  padding: 20px;
  text-align: center;
  z-index: 1000;
}
.popupImage {
  width: 7.5rem !important;
  height: 9.14rem;
}
.downloadBtns {
  display: flex;
  justify-content: space-around;
  /* margin-top: 20px; */
  width: 7rem;
  position: relative;
  z-index: 222;
  top: -1rem;
}

.downloadBtns img{
  width: 2.52rem;
  height: 0.76rem;
}
/* PC端样式 */
@media screen and (min-width: 1024px) {
  .welcomePopup {
    top: 0;
    left: auto;
    transform: none;
    text-align: center;
    width: 7.5rem;
  }
  .popupImage{
    width: 6rem !important;
    height: 7.312rem;
 
  }
  .downloadBtns {
    top: -1.5rem;
  }
}



.appStoreBtn, .googlePlayBtn {
  width: 2.52rem;
  height: 0.76rem;
  background-size: cover;
  position: relative;
  bottom: 1.5rem;
  /* background-repeat: no-repeat; */
  /* background-position: center; */
}
.closeBtn{
  width: 0.84rem;
  height: 0.84rem;
  background-image: url('/wap/special/justice/images/close.png');
  background-size: cover;
  position: absolute;
  top: 1rem;
  left: 6rem;
}
.appStoreBtn {
  background-image: url('/wap/special/justice/images/papple.png');
}

.googlePlayBtn {
  background-image: url('/wap/special/justice/images/pgg.png');
}
.ACHIEVED{
  background-image: url('/wap/special/justice/images/ACHIEVED.png');
  background-size: cover;
  width: 1.20rem;
  height: 0.65rem;
  position: absolute;
  top: 0.5rem;
  /* right: 1rem; */
  left: 1.5rem;
}
.notACHIEVED{
  background-image: url('/wap/special/justice/images/notACHIEVED.png');
  background-size: cover;
  width: 1.34rem;
  height: 1.04rem;
  position: relative;
  top: -2rem;
  /* right: 1rem; */
  left: 6.2rem;
}

.peopleNum{
  font-size: 0.25rem;
  position: relative;
  top: 6.8rem;
  color: #bfaaaa;
  text-align: center;
}
.peopleNum span{
  font-size: 0.3rem;
}

.footer{
  width: 7.5rem;
  height: 1.54rem;
  background: url('/wap/special/justice/images/footer.jpg') no-repeat;
  background-size: cover;
}
.input_list{
  width: 5.46rem;
  height: 0.59rem;
  background: url('/wap/special/justice/images/inputList.png') no-repeat;
  background-size: cover;
  position: relative;
  top: -8.2rem;
  left: 1rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.startAppoint{
  width: 3.09rem !important;
  height: 0.95rem;
  position: relative;
  top: -8rem;
  left: 2.2rem;
  transform: scale(0.8);
  animation: scaleAnimation2 2s infinite;
}
#dropdown{
  width: 2rem;
  height: 100%;
  font-size: 0.3rem;
  text-align: center;
}

#phoneInput{
  width: 3.4rem;
  height: 100%;
  font-size: 0.3rem;
}

@keyframes scaleAnimation2 {
  0%, 100% {
      transform: scale(0.6);
  }
  50% {
      transform: scale(0.8);
  }
}
@keyframes scaleAnimation {
  0%, 100% {
      transform: scale(0.8);
  }
  50% {
      transform: scale(1);
  }
}

.centerPrize {
  animation: scaleAnimation 2s infinite;
}

.pricacy{
  display: flex;
  align-items: center;
  position: relative;
  top: -7.95rem;
  left: 1.5rem;
}
.pricacy p{
  margin-left: 0.2rem;
}