@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;  position: relative;  visibility: hidden;  }
body.arb{direction:rtl}
.btn_close{font-size: 18px !important;}

.page1{ height: 100%; width: 100%; position: relative; text-align: center; background: url(img1.igg.com/mobile/page_bg_shu.jpg?1) no-repeat top center; background-size: auto 100%;}
.video_btn{ width: 1.3rem; height: 1.3rem; cursor: pointer; position: absolute; top:0rem; left: 50%; border-radius: 50%;}
.top-bar{height:0.94rem; width: 100%; background: url(img1.igg.com/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(img1.igg.com/mobile/icon_02.png) no-repeat center center; background-size:0.83rem 0.83rem; 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(img1.igg.com/mobile/star.png) no-repeat center left; background-size:1.17rem 0.20rem;}
.nowdown-ios,.nowdown-android,.nowdown-amazon,.nowdown-other{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; }

body.vn .nowdown-ios{background-image:url(img1.igg.com/mobile/footer-apple-vn.png?1);}

body.vn .nowdown-android{background-image:url(img1.igg.com/mobile/footer-direct-vn.png?1);}

body.vn .nowdown-amazon{background-image:url(img1.igg.com/mobile/footer-amazon-vn.png?1);}

body.vn .nowdown-other{background-image:url(img1.igg.com/mobile/footer-google-vn.png?1);}

.page2{height:8.11rem; width: 100%; background: url(img1.igg.com/mobile/page2.jpg) no-repeat center center; background-size: 19.2rem 8.11rem; position: relative;}
.page2:after{content:''; width: 100%; height: 0.8rem; background: url(img1.igg.com/mobile/bar.png) no-repeat center center; background-size: 19.2rem 0.8rem; position: absolute; top: -0.4rem; left: 0px;}
.page2 .title{width: 100%; height: 0.71rem; background-position: center center; background-repeat: no-repeat; background-size:4.52rem 0.71rem;position: absolute; top: 1.1rem; left: 0px;}
body.vn .page2 .title{background-image: url(img1.igg.com/mobile/features-vn.png?1);}
.page2_banner{z-index: 1 ; position: relative;}
.page2_banner_bd{width: 6rem; height:3.38rem; position: absolute; top: 2.5rem; left: 50%; margin-left: -3rem;}
.page2_banner_bd ul li{width:6rem; height:3.38rem; position: relative;}
.page2_banner_bd:after{ pointer-events: none; content: ''; width: 6rem; height:3.38rem; background: url(img1.igg.com/mobile/border.png?20180323) no-repeat; background-size: 100% 100%;position: absolute; top: 0px; left: 0px;}
.page2_banner_bd ul li img{width:6rem; height:3.38rem;}
.page2_banner_hd{ width: 100%; position: absolute; top: 6.4rem; left: 0px; height: 0.08rem; text-align: center;  font-size: 0;}
.page2_banner_hd ul li{ margin: 0 0.05rem; width: 0.7rem; height: 0.05rem; display: inline-block; background: #6c5a40; cursor: pointer;}
.page2_banner_hd ul li.on{ background: #99815c;}



.page3{height:11.21rem; width: 100%; background: url(img1.igg.com/mobile/page3.jpg) no-repeat center center; background-size: 19.2rem 11.21rem; position: relative;}
.page3:after{content:''; width: 100%; height: 0.17rem; background: url(img1.igg.com/mobile/line-3.png) repeat-x center center; background-size: 1px 0.17rem; position: absolute; top: -0.08rem; left: 0px;}
.page3 .title{ display: none; width: 100%; height: 0.71rem;  background-position: center center; background-repeat: no-repeat; background-size:4.52rem 0.71rem; position: absolute; top: 0.66rem; left: 0px;}
.page3 .title.heroes{display: block;}

body.vn .page3 .title.heroes{background-image: url(img1.igg.com/mobile/heroes-vn.png?1);}

body.vn .page3 .title.monsters{background-image: url(img1.igg.com/mobile/monsters-vn.png?1);}

body.vn .page3 .title.castle-skins{background-image: url(img1.igg.com/mobile/castle-skins-vn.png?1);}



.page3-list{height: 1.15rem; width: 100%; position: absolute; top:1.75rem; left: 0px; position: relative; font-size: 0px; text-align: center;}
.page3-list ul li{  border-radius: 0.06rem; cursor: pointer;margin: 0 0.3rem; width: 1.19rem; height: 1.15rem; display: inline-block; background-repeat: no-repeat; background-size: 1.19rem 1.15rem;}
.page3-list ul li.i1{background-image: url(img1.igg.com/mobile/icon-11.png)}
.page3-list ul li.i2{background-image: url(img1.igg.com/mobile/icon-22.png)}
.page3-list ul li.i3{background-image: url(img1.igg.com/mobile/icon-33.png)}
.page3-list ul li.on{box-shadow: 0.03rem 0.03rem 0.06rem #43d7fc, -0.03rem 0.03rem 0.06rem #43d7fc, -0.03rem -0.03rem 0.06rem #43d7fc, 0.03rem -0.03rem 0.06rem #43d7fc;}
.page3-bd{width: 6.4rem; height: 7.5rem; position:relative; position: absolute; top: 2.8rem; left: 50%; margin-left: -3.2rem;}
.page3-bd ul li{width: 6.4rem; height: 7.5rem;  position: relative;}
.page3-bd ul li i{ display: block; width: 6.4rem; height: 7.5rem;  background-repeat: no-repeat; background-position: center center;background-size:auto 80% !important;}
#castle-skins-box .page3-bd ul li i{background-size:auto 60% !important;}
.page3-bd ul li var{display: block;width: 3.6rem;height: 5rem;position: absolute;top: 1.37rem;left: 1.34rem;}
.page3-hd{ width: 100%; display: block; position: absolute; top:10.1rem; left: 0px; height: 0.13rem; font-size: 0px; text-align: center;}
.page3-hd ul li{ cursor: pointer;display: inline-block; width: 0.13rem; height: 0.13rem; border-radius: 50%; background: #7b97c8; border-radius: 50%; margin: 0 0.15rem;}
.page3-hd ul li.on{ background: #d2a75c;}
.page3 a{width:0.44rem; height: 0.81rem; background-repeat: no-repeat; background-size: 0.44rem 0.81rem; background-position:  center center; position: absolute; top: 5.3rem; left: 50%;}
.page3 a.prev{ background-image: url(img1.igg.com/mobile/prev.png); margin-left: -2.64rem;}
.page3 a.next{ background-image: url(img1.igg.com/mobile/next.png); margin-left: 1.9rem;}
#heroes-box,#monsters-box,#castle-skins-box{ opacity: 0; z-index: 1; pointer-events: none;}
#heroes-box.on{opacity: 1; z-index: 2; pointer-events: inherit}
#monsters-box.on{opacity: 1; z-index: 2; pointer-events: inherit}
#castle-skins-box.on{opacity: 1; z-index: 2; pointer-events: inherit}

.page4{ height: 4.13rem; background: url(img1.igg.com/mobile/page4.jpg) no-repeat center center; position: relative; font-size: 0px; background-size:19.20rem 4.13rem;}
.page4:after{content:''; width: 100%; height: 0.17rem; background: url(img1.igg.com/mobile/line-3.png) repeat-x center center; background-size: 1px 0.17rem; position: absolute; top: -0.08rem; left: 0px;}
.page4 ul{height: 2.49rem; width: 100%; position: absolute; top:0.9rem; left: 0px; text-align: center;}
.page4 ul li{width: 2.09rem; height: 2.49rem;display:inline-block; }
.page4 ul li a{display:block; width: 100%; height: 100%;}
.page4 ul li img{width: 2.09rem; height: 2.49rem;}



.footer{ width: 100%; min-height: 2.65rem; padding-bottom:0.2rem; background: #1d1610; padding-top: 1px; position: relative;}
.footer a{ display:block;width: 4.34rem; height: 0.52rem; margin: 0.4rem auto 0; background: url(img1.igg.com/mobile/footer-igglogo-tw.png) no-repeat center center; background-size: 4.34rem 0.52rem;}
.footer p{color: #735a40; font-size: 0.24rem; text-align: center; line-height: 1.5; margin-top:0.2rem;}

.language-box{ background: #1d1610; height:0.8rem; width:100%;position: relative;}
.language{ width: 1.8rem; height: 0.24rem; text-align: center; position: absolute; top: 0.3rem; left: 50%; margin-left: -0.9rem; z-index: 9;cursor: pointer;opacity: 0;}
.language-once{width: 1.8rem; height: 0.24rem; line-height:0.24rem; position: absolute; top: 0.3rem; left: 50%; margin-left: -0.9rem; text-align: center; border:1px solid #a2a2a2;background: #261a0e;color:#a2a2a2;}
.language-once:after{content: ''; position: absolute;top: 0.08rem;right: 0.03rem; height: 0px; width: 0px;border-top: 0.1rem solid #a2a2a2; border-left: 0.1rem solid transparent;border-right: 0.1rem solid transparent;}
body.arb .language-once:after{right:inherit; left:0.03rem;}


#igg-footer{background: #1d1610 !important;padding: 0em 0 1em 0 !important;}
body.arb #igg-footer{direction:ltr !important;}

/*视频播放*/
.vedio-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%;}
.vedio-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(img1.igg.com/mobile/loading.gif) no-repeat center center;}
.vedio-box{ width: 100%; height: 100%;}
.vedio-close{ position:absolute; top:0.05rem; right:0.05rem; background:url(img1.igg.com/mobile/vedio_cloes.png?1) no-repeat; background-size: 0.36rem 0.36rem; width:0.36rem; height:0.36rem; transition:0.5s; }
.vedio-close:hover{transform:rotate(90deg);}
.vedio-src vedio{ width:100%; height:100%;}
.vedio-bg.on,.vedio-src.on{display: block;}


.page2 .title,.page3 .title{height: 0.923rem; background-size:5.876rem 0.923rem;}
body.en .page2 .title,body.en .page3 .title{height: 0.71rem;background-size:4.52rem 0.71rem;}


body.id .language-once{ width:2.2rem;margin-left: -1.1rem;}
body.id .language{width:2.2rem;margin-left: -1.1rem;}

body.arb .top-bar-left{ float:right; }
body.arb .top-bar-left-icon{ float:right; margin:0.05rem 0.2rem 0rem 0rem;}
body.arb .top-bar-left-text{ float:right; margin:0.15rem 0.1rem 0 0rem;}
body.arb .top-bar-left-text em{float:right;}
body.arb .top-bar-left-text span{ float:right; background-position: center right; }
body.arb .nowdown-ios,
body.arb .nowdown-android,
body.arb .nowdown-amazon,
body.arb .nowdown-other{right: inherit; left: 0rem; margin: 0.11rem 0rem 0 0.2rem;}


body.arb .page2{direction:ltr}
body.arb #heroes-box{direction:ltr}
body.arb #monsters-box{direction:ltr}
body.arb #castle-skins-box{direction:ltr}

@media screen and (min-aspect-ratio: 13/9) { 
    .page1 { background: url(img1.igg.com/mobile/page_bg_heng.jpg?1) no-repeat top center; background-size:auto 100%;}
    .top-bar{height:0.47rem; width: 100%; background: url(img1.igg.com/mobile/bar.jpg) repeat-x; background-size: 1px 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(img1.igg.com/mobile/icon_02.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(img1.igg.com/mobile/star.png) no-repeat center left; background-size:0.585rem 0.1rem;}

    .nowdown-ios,.nowdown-android,.nowdown-amazon,.nowdown-other{ float:right; position: absolute; top: 0px; right: 0px;  width:1.135rem; height:0.34rem; background-size:cover; margin: 0.06rem 0.1rem 0 0; border:1px solid #aaa; }

    .page2:after {content: '';width: 100%;height: 0.4rem; background: url(img1.igg.com/mobile/bar.png) no-repeat center center;background-size: auto 0.4rem;
position: absolute;top: -0.2rem;left: 0px;}
    .vedio-src{-webkit-transform: scale(0.5); transform: scale(0.5)}  


     body.arb .top-bar-left{ float:right; }
    body.arb .top-bar-left-icon{ float:right; margin:0.025rem 0.1rem 0px 0px;}
    body.arb .top-bar-left-text{ float:right; margin:0.075rem 0.05rem 0 0px;}
    body.arb .top-bar-left-text em{float:right;}
    body.arb .top-bar-left-text span{ float:right; background-position: center right; }
    body.arb .nowdown-ios,
    body.arb .nowdown-android,
    body.arb .nowdown-amazon,
    body.arb .nowdown-other{right: inherit; left: 0px; margin: 0.055rem 0px 0 0.1rem;}


}
.copyright {
    vertical-align: middle;
    text-align: center!important;
    width: 90%;
    color:#fff;
    margin-left:5%!important;
    margin-right: 5%!important;
}

.copyright a{
    color:#f1c565;
}

.tips{
    position:fixed;
    z-index: 10;
    right:0px;
    top:30%;
}
.tips a{
    display:block;
    margin-bottom:0px;
    width: 70px;
    transition: all .3s linear;
}
.tips a img{
    max-width:100%;
    height:auto;
    display: block;
}
.tips a:hover{
    transform:scale(1.2);
    transition: all .3s linear;
    filter:brightness(1.5);
}

.white-popup-block {
    position: relative;
    background: #FFF;
    padding: 20px;
    width: auto;
    max-width: 500px;
    margin: 20px auto;
  }

  h1, h2, h3, h4, h5, h6 {
    margin: 0;
        margin-bottom: 0px;
    font-weight: 400;
    text-rendering: optimizelegibility;
    color: #282B30;
    font-family:-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif,Arial;
    font-size: 24px;
    text-transform: uppercase;
    text-align: center;
    font-weight:bold;
}
h1 {
    margin-bottom: 5px;
}

.white-popup-block p{
    font-size:15px;
    margin-bottom: 10px;
}

.white-popup-block p img{
    display: block;
    max-width: 100%;
    margin:0 auto;
}

.popup-modal-dismiss{
    position:absolute;
    top:10px;right:10px;
    color:#222;
    text-decoration:underline;
}
.vn18 {
    background: url(https://ahxd.gamota.com/wp-content/themes/webgame-child/assets/images/vng-18.jpg) no-repeat 0 0/100%;
    position: fixed;
    z-index: 99;
    top:25%;
    left: 0;
    width: 90px;
    height: 55px;
}