/* ttt */
@charset "utf-8";
html,body{margin:0;padding:0;width:100%;height:100%;}
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, textarea, p, blockquote, th, td { margin:0; padding:0; vertical-align:middle; font:inherit; -webkit-text-size-adjust: none; }
h1, h2, h3, h4, h5, h6 { font-weight:normal; font-size:100%; }
address, caption, cite, code, dfn, em, th, var { font-weight:normal; font-style:normal;}
table { border-collapse:collapse; border-spacing:0; }
fieldset, img, abbr, acronym { border:0; }
input, textarea, select { font-family:"Segoe UI", Helvetica, Arial, "Lucida Grande", "Lucida Sans Unicode", sans-serif; font-size:0.14rem; }
caption, th { text-align:left; }
q:before, q:after { content: ''; }
ul, ol, dl { list-style:none; }
.clearfix:after { content:"."; display:block; height:0; clear:both; visibility:hidden; }
.clearfix { display:inline-block; }
/* Hide from IE Mac \*/
.clearfix { display:block; }
/* End hide from IE Mac */
a{ text-decoration:none; outline:none}
html{ font-size:100px;}
*,div,a,img,button,input,textarea{-webkit-tap-highlight-color:rgba(255,255,255,0);}
::-webkit-input-placeholder{color:#333;}
:-moz-placeholder {color:#333;}
::-moz-placeholder {color:#333;}
:-ms-input-placeholder {color:#333;}
::-webkit-scrollbar{width:0.06rem; height:0.06rem}
::-webkit-scrollbar-track-piece{background-color:#ccc; -webkit-border-radius:0.06rem}
::-webkit-scrollbar-thumb:vertical{height:0.06rem;background-color:#534024;-webkit-border-radius:0.06rem}
body { font: normal 13px/1.5 "Helvetica Neue", Helvetica, STHeiTi, Roboto, Arial,"MSゴシック", Helvetica, sans-serif;visibility:hidden}
.btn_close{font-size: 18px !important;}


.page1{ height: 100%; width: 100%; position: relative; text-align: center; background: url(https://statics.igg.com/assets/cc/res/events/2024/index/img/page1-m.jpg) no-repeat center -.7rem; background-size: 100% auto; position: relative;}
.video_btn{ width: 2rem; height: 2rem; cursor: pointer; position: absolute; top:0rem; left: 50%; transform: translateX(-20px); border-radius: 50%;  z-index: 9; background: url(https://statics.igg.com/assets/cc/res/events/2023/index-panda/img/play.png) no-repeat center / cover; }
.top-bar{height:0.94rem; width: 100%; background: url(/themes/images/index_mobile/bar.jpg) repeat-x; background-size: 1px 0.94rem; position: fixed; top: 0px; left: 0px; z-index: 99;}
.download_box{height:0.94rem; width:6.2rem; margin:0 auto;}
.top-bar-left{ float:left; display: block;}
.top-bar-left-icon{ float:left;display: block; width:0.83rem; height:0.83rem; background:url(/themes/images/index_mobile/icon.png) no-repeat center center; background-size:cover; margin:0.05rem 0 0rem 0.2rem;}
.top-bar-left-text{ float:left; width:3.4rem; margin:0.15rem 0 0 0.1rem;}
.top-bar-left-text em{float:left;width:3.4rem; color:#d7d7d7; font-size:0.24rem;}
.top-bar-left-text span{ float:left; width:3.4rem; height:0.2rem; background:url(/themes/images/index_mobile/star.png) no-repeat center left; background-size:1.26rem 0.20rem;}
.logo{ width:4.63rem; height: 4.63rem; background: url(/themes/images/index_mobile/logo.png) no-repeat center; background-size: contain; position: absolute; bottom: .8rem; left: 50%; margin-left: -2.31rem; z-index: 99;}
.download{float:right; position: absolute; top: 0rem; right: 0rem; width:2.27rem; height:0.68rem; background-repeat: no-repeat; background-size:2.27rem 0.68rem;margin: 0.11rem 0.2rem 0 0; border:1px solid #aaa; border-radius: 5px; }
.download img{width: 100%; height: 100%}

.page2{height:11.03rem; width: 100%; background: url(https://statics.igg.com/assets/cc/res/events/2023/index-panda/img/page2-m.jpg) no-repeat center top; background-size: 19.2rem 11.03rem; position: relative;}
.page2:after{content:''; width: 100%; height: 9.29rem; background: url(/themes/images/index_mobile/cloud.png) no-repeat center center; background-size: 19.2rem 11rem; position: absolute; top: -6rem; left: 0px;}
.title{ width:100%; position: absolute; height: 0.9rem; top: 0.5rem; left: 0px; text-align: center; z-index: 9; background-repeat: no-repeat; background-position: center center; background-size: auto 100%;}
.pic{ position: absolute; width: 6.05rem; height: 3.49rem; position: absolute; top: 6.1rem; left: 50%; margin-left: -2.85rem; background: #fff;border-top-left-radius:0.3rem; border-bottom-left-radius:0.3rem; overflow: hidden;}
.pic ul li{width: 6.05rem; height: 3.49rem;border-top-left-radius:0.3rem; border-bottom-left-radius:0.3rem; overflow: hidden;}
.pic ul li img{width: 6.05rem; height: 3.49rem;}
.tempWrap{border-top-left-radius:0.3rem; border-bottom-left-radius:0.3rem; overflow: hidden;}
.mask{ width: 6.24rem; height: 3.78rem; background: url(/themes/images/index_mobile/mask-wap.png) no-repeat; background-size: 6.24rem 3.78rem; position: absolute; top:6rem;left: 50%; margin-left: -3.04rem;pointer-events: none;}
.dot{ font-size: 0px; text-align: center; width: 100%; height: 0.16rem; position: absolute; top: 10.2rem; left: 0px;}
.dot ul li{ display: inline-block; width: 0.16rem; height: 0.16rem; margin:0 0.17rem; background: #fff; border-radius: 50%; cursor: pointer;}
.dot ul li.on{background: #97a7e2; }
.page3{ width: 100%; height: 10.03rem; background: url(/themes/images/index_mobile/page3.jpg) no-repeat top center; background-size: 19.2rem 10.03rem; position: relative;}
.page3 a{ width:2.73rem; height: 2.4rem; background-repeat: no-repeat; background-size: 2.73rem 2.4rem; position: absolute; top: 0px; left: 50%; margin-left: -1.36rem}
.page3 a:nth-child(1){ top: 0.74rem;}
.page3 a:nth-child(2){ top: 3.7rem;}
.page3 a:nth-child(3){ top: 6.66rem;}
.page3 a.footer-facebook{ background-image: url(/themes/images/index_mobile/footer-facebook.png)}
.page3 a.footer-youtube{ background-image: url(/themes/images/index_mobile/footer-youtube.png)}
.page3 a.footer-twitter{ background-image: url(/themes/images/index_mobile/footer-twitter.png)}
.page3 a.footer-vk{ background-image: url(/themes/images/index_mobile/footer-vk.png)}
.page3 a.footer-discord{ background-image: url(/themes/images/index_mobile/footer-discord.png)}
.page3 a.footer-cafe{ background-image: url(/themes/images/index_mobile/footer-cafe.png)}
.language-box{ background: #fff; height:0.8rem; width:100%;position: relative;}
.language{ width: 3.27rem; height: 0.45rem; text-align: center; position: absolute; top: 0.3rem; left: 50%; margin-left: -1.63rem; z-index: 9;cursor: pointer;opacity: 0;}
.language-once{width: 3.27rem; height: 0.45rem; line-height: 0.45rem; font-size: 0.24rem; background: url(/themes/images/index_mobile/language.png) no-repeat; background-size: 3.27rem 0.45rem; position: absolute; top: 0.3rem; left: 50%; margin-left: -1.63rem; text-align: center; color:#fff;}
body.arb .language-once:after{right:inherit; left:0.03rem;}
#igg-footer{background: #fff !important;padding: 0em 0 1em 0 !important;}
body.arb #igg-footer{direction:ltr !important;}
#igg-footer .copyright p{font-size: 0.24rem !important;}
#igg-footer .igg_logo img{height: 1rem !important; width: 1.46rem !important;}
/*视频播放*/
.video-bg{ display:none; background:#000; filter:alpha(opacity=50);-moz-opacity:0.5;opacity:0.5; position:fixed; top:0px; left:0px; width:100%; height:100%; z-index: 999;}
.video-src{ z-index:99999; display:none; width:6.4rem; height: 3.6rem;  position:fixed; top:50%; left:50%; margin:-1.8rem 0 0 -3.2rem; background:#000 url(http://img1.igg.com/game/lo/images/project/m_home/default/loading.gif) no-repeat center center;}
.video-box{ width: 100%; height: 100%;}
.video-close{ position:absolute; top:0.05rem; right:0.05rem; background:url(http://img1.igg.com/game/lo/images/project/m_home/default/video_cloes.png?1) no-repeat; background-size: 0.36rem 0.36rem; width:0.36rem; height:0.36rem; transition:0.5s; }
.video-close:hover{transform:rotate(90deg);}
.video-src video{ width:100%; height:100%;}
.video-bg.on,.video-src.on{display: block;}


.payment-center {
  position: absolute;
  bottom: 0.5rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 99;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3.19rem; height: .93rem;
  padding: .08rem .05rem;
  box-sizing: border-box;
  line-height: 1;
  color: #fff;
  font-weight: bold;
  font-size: .26rem;
  cursor: pointer;
  text-shadow: 1px 1px 0 rgba(63, 25, 2, .7), -1px -1px 0 rgba(63, 25, 2, .7), 1px -1px 0 rgba(63, 25, 2, .7), -1px 2px 0 rgba(63, 25, 2, .7);
  text-align: center;
  background: url(/themes/images/index_pc/payment-btn.png) no-repeat center / 100% 100%;
}
.payment-center::before {
  content: "";
  display: block;
  width: .46rem; height: .51rem;
  margin: 0 .08rem 0 .2rem;
  flex-shrink: 0;
  background: url(/themes/images/index_pc/payment-diamond.png) no-repeat center / contain;
}
.payment-center span {
  flex: 1;
  margin-right: .2rem;
}
.arb .payment-center span {
  margin-right: 0;
  margin-left: .1rem;
}
.de .payment-center::before {
  margin-left: 0;
  margin-right: .08rem;
}
.de .payment-center span {
  flex: none;
  margin-right: 0;
}
/*  */
.th .logo{
    background-image: url(/themes/images/index_mobile/logo-th.png);
}
.ru .logo{
    background-image: url(/themes/images/index_mobile/logo-ru.png);
}
.tw .logo{
    background-image: url(/themes/images/index_mobile/logo-tw.png);
}
.arb .logo{
    background-image: url(/themes/images/index_mobile/logo-arb.png);
}
.kr .logo{
    background-image: url(/themes/images/index_mobile/logo-kr.png);
}
.jp .logo{
    background-image: url(/themes/images/index_mobile/logo-jp.png);
}
@media (orentation: portriat) {
    .page2::after {
      top: -7rem;
      height: 11rem;
    }
}
@media screen and (min-aspect-ratio: 13/9) {

    .page1{ height: 100%; width: 100%; position: relative; text-align: center; background: url(https://statics.igg.com/assets/cc/res/events/2024/index/img/page1.jpg) no-repeat center .47rem; background-size: cover; position: relative;}
    .video_btn{ cursor: pointer; position: absolute; top:0rem; left: 50%; transform: translateX(0); border-radius: 50%;z-index: 9;}
    .page2{height:3.5rem; width: 100%; background: url(https://statics.igg.com/assets/cc/res/events/2023/index-panda/img/page2.jpg) no-repeat center center; background-size: auto 100%; position: relative;}
    .page2:after{content:''; width: 100%; height: 2.315rem; background: url(/themes/images/index_mobile/cloud.png) no-repeat center center; background-size: 100% 2.315rem; position: absolute; top: -1.375rem; left: 0px;}

    .logo{width:1.24rem; height: 1.24rem; background: url(/themes/images/index_mobile/logo.png) no-repeat center bottom; background-size: contain; position: absolute; bottom: 0; left: 50%; margin-left: -0.62rem; z-index: 8;}
    .title{ width: 3rem;position: absolute;top: 0.6rem; height: 0.5rem; left: inherit;text-align: center;z-index: 9; right: 0rem;}
    .title img{ height: 0.4rem; width: auto;}


    .top-bar{height:0.47rem; width: 100%; background: url(/themes/images/index_mobile/bar.jpg) repeat-x; background-size: 0.005rem 0.47rem; position: fixed; top: 0px; left: 0px; z-index: 99;}
    .download_box{height:0.47rem; width:3.1rem; margin:0 auto;}
    .top-bar-left{ float:left; display: block;}
    .top-bar-left-icon{ float:left;display: block; width:0.415rem; height:0.415rem; background:url(/themes/images/index_mobile/icon.png) no-repeat center center; background-size:cover; margin:0.025rem 0 0px 0.1rem;}
    .top-bar-left-text{ float:left; width:1.7rem; margin:0.075rem 0 0 0.05rem;}
    .top-bar-left-text em{float:left;width:1.7rem; color:#d7d7d7; font-size:0.12rem;}
    .top-bar-left-text span{ float:left; width:1.7rem; height:0.1rem; background:url(/themes/images/index_mobile/star.png) no-repeat center left; background-size:0.63rem 0.1rem;}
    .download{float:right; width:1.135rem; height:0.34rem;margin: 0.055rem 0.15rem 0 0; border:0.005rem solid #aaa; border-radius: 0.025rem; }

    .page3{ width: 100%; height: 2.29rem; background: url(/themes/images/index_mobile/page3_heng.jpg) no-repeat top center; background-size: 6.4rem 2.29rem; position: relative;}
    .page3 a{ width:1.365rem; height: 1.2rem; background-repeat: no-repeat; background-size: 1.365rem 1.2rem; position: absolute; top: 0px; left: 50%; }
    .page3 a:nth-child(1){ top: 0.55rem; margin-left: -2.4rem}
    .page3 a:nth-child(2){ top: 0.55rem; margin-left: -0.6825rem}
    .page3 a:nth-child(3){ top: 0.55rem; margin-left: 1rem}
    .page3 a.footer-facebook{ background-image: url(/themes/images/index_mobile/footer-facebook.png)}
    .page3 a.footer-youtube{ background-image: url(/themes/images/index_mobile/footer-youtube.png)}
    .page3 a.footer-twitter{ background-image: url(/themes/images/index_mobile/footer-twitter.png)}


    .language-box{ background: #fff; height:0.4rem; width:100%;position: relative;}
    .language{ width: 1.635rem; height: 0.225rem; text-align: center; position: absolute; top: 0.15rem; left: 50%; margin-left: -0.815rem; z-index: 9;cursor: pointer;opacity: 0;}
    .language-once{width: 1.635rem; height: 0.225rem; line-height: 0.225rem; font-size: 0.12rem; background: url(/themes/images/index_mobile/language.png) no-repeat; background-size: 1.635rem 0.225rem; position: absolute; top: 0.15rem; left: 50%; margin-left: -0.815rem; text-align: center; color:#fff;}
    body.arb .language-once:after{right:inherit; left:0.015rem;}
    #igg-footer{background: #fff !important;padding: 0em 0 1em 0 !important;}
    body.arb #igg-footer{direction:ltr !important;}
    #igg-footer .copyright p{font-size: 0.12rem !important;}
    #igg-footer .igg_logo img{height: 0.5rem !important; width: 0.73rem !important;}


    .mask{ width: 3.12rem; height: 1.89rem; background: url(/themes/images/index_mobile/mask-wap.png) no-repeat; background-size: 3.12rem 1.89rem; position: absolute; top:1.2rem;left: inherit; right: 0rem; margin-left: 0rem;pointer-events: none;}
    .pic{ position: absolute; width: 3.025rem; height: 1.745rem; position: absolute; top: 1.25rem; left: inherit; margin-left: 0rem; right: 0rem; background: #fff;border-top-left-radius:0.15rem; border-bottom-left-radius:0.15rem; overflow: hidden;}
    .pic ul li{width: 3.025rem; height: 1.745rem;border-top-left-radius:0.15rem; border-bottom-left-radius:0.15rem; overflow: hidden;}
    .pic ul li img{width: 3.025rem; height: 1.745rem;}
    .tempWrap{border-top-left-radius:0.15rem; border-bottom-left-radius:0.15rem; overflow: hidden;}

    .dot{font-size: 0px;text-align: center;width: 3rem;height: 0.08rem;position: absolute;top: 3.2rem;left: inherit;right: 0rem;}
    .dot ul li{ display: inline-block; width: 0.08rem; height: 0.08rem; margin:0 0.085rem; background: #fff; border-radius: 50%; cursor: pointer;}
    .dot ul li.on{background: #97a7e2; }


    .video-bg{ display:none; background:#000; filter:alpha(opacity=50);-moz-opacity:0.5;opacity:0.5; position:fixed; top:0px; left:0px; width:100%; height:100%; z-index: 999;}
    .video-src{ z-index:99999; display:none; width:3.2rem; height: 1.8rem;  position:fixed; top:50%; left:50%; margin:-0.9rem 0 0 -1.6rem; background:#000 url(http://img1.igg.com/game/lo/images/project/m_home/default/loading.gif) no-repeat center center;}
    .video-box{ width: 100%; height: 100%;}
    .video-close{ position:absolute; top:0.025rem; right:0.025rem; background:url(http://img1.igg.com/game/lo/images/project/m_home/default/video_cloes.png?1) no-repeat; background-size: 0.18rem 0.18rem; width:0.18rem; height:0.18rem; transition:0.5s; }
    .video-close:hover{transform:rotate(90deg);}
    .video-src video{ width:100%; height:100%;}
    .video-bg.on,.video-src.on{display: block;}
    .payment-center {
      bottom: auto;
      top: 0.57rem;
      left: auto; 
      right: .15rem;
      transform: none;
      width: 1.5rem;
      height: .44rem;
      font-size: .12rem;
    }
    .payment-center::before {
      width: .22rem;
      height: .25rem;
    }
}
@media screen and (min-aspect-ratio: 13/9) and (max-height: 320px) {
  .page2:after {
    height: 1.3rem;
    background-size: 100% 100%;
    top: -0.7rem;
    display: none;
  }
  .payment-center {
    top: 0;
    right: .05rem;
    z-index: 100;
    position: fixed;
  }
  .download {
    margin-right: 1.65rem;
  }
}