body { background: url("https://hearthstone.nosdn.127.net/3/minisite/tgt/bg.jpg") repeat-y center 0; color: #000; font-size: 16px; line-height: 24px; overflow: hidden; }
h2 { font-size: 36px; font-weight: bold; color: #03345f; padding: 23px 0; }
h2 sup { font-size: 16px; position: relative; top: 3px; }
.line { background: url("https://hearthstone.nosdn.127.net/3/minisite/tgt/line.png") no-repeat 50% 0; height: 167px; position: relative; z-index: 2; margin-bottom: -83px; }
.line-top { margin: -80px 0 0; background: url("https://hearthstone.nosdn.127.net/3/minisite/wotog/line-top.png") no-repeat 50% 0; }
.line img { display: none; }
.header { background: url("https://hearthstone.nosdn.127.net/3/minisite/msog/banner.jpg") no-repeat 50% 0; height: 865px; }
.header .mobile-banner { display: none; }
.header .top-nav { width: 1000px; margin-left: -500px; left: 50%; position: relative; top: 60px;}
.header .top-nav .wotog-logo { position: absolute; width: 377px; height: 213px; left: 0; top: 129px; }
.header .top-nav p { background: url('https://hearthstone.nosdn.127.net/3/minisite/tgt/sprite.png') no-repeat -610px -572px; width: 188px; height: 41px; color: #584734; font-size: 14px; padding: 9px 0 0 50px; position: absolute; right: 0; top: 5px; }
.header .top-nav p a { color: #584734; padding: 0 8px; text-shadow: 0.7px 0.7px 0 #d9bd8d; }
.header .top-nav p a:hover { color: #fff; text-decoration: none; }
.header .share { width: 274px; position: absolute; right: -42px; top: 59px; }
.header .share li { margin-right: 4px; color: #fff; }
.header .share li a { background: rgba(0, 0, 0, 0) url("https://hearthstone.nosdn.127.net/3/minisite/mobile-hs/sprite2.png") no-repeat scroll -999em -999em; height: 25px; width: 25px; }
.header .share li a.bds_button_tsina { background-position: -67px -375px; }
.header .share li a.bds_button_tqq { background-position: -6px -375px; }
.header .share li a.bds_button_tieba { background-position: -160px -375px; }
.header .share li a.bds_button_qzone { background-position: -98px -375px; }
.header .share li a.bds_button_yixin { background-position: -37px -375px; }
.header .share li a.bds_button_weixin { background-position: -129px -375px; }
.header .share li a.bds_button_tsina:hover { background-position: -67px -413px; }
.header .share li a.bds_button_tqq:hover { background-position: -6px -413px; }
.header .share li a.bds_button_tieba:hover { background-position: -160px -413px; }
.header .share li a.bds_button_qzone:hover { background-position: -98px -413px; }
.header .share li a.bds_button_yixin:hover { background-position: -37px -413px; }
.header .share li a.bds_button_weixin:hover { background-position: -129px -413px; }
.module { position: relative; width: 1200px; text-align: center; left: 50%; margin-left: -600px; }
.module p { text-align: left; line-height: 28px; padding: 3px 0; width: 100%; }
.module .btn,.gotobuy{ display: block; height: 60px;text-align: center; width: 250px; z-index: 10; background: url("https://hearthstone.nosdn.127.net/3/minisite/wotog/btn-bg.png") no-repeat 0 0; position: relative; padding-left: 10px; font-size: 16px; font-weight: bold; color: #fff; text-decoration: none; line-height: 53px; margin: 0 auto; }
.module .btn span ,.gotobuy span{ background: url("https://hearthstone.nosdn.127.net/3/minisite/wotog/btn-bg.png") no-repeat 100% 0; height: 100%; width: 10px; display: block; right: -10px; top: 0; position: absolute; }
.header-bg { background: url("https://hearthstone.nosdn.127.net/3/minisite/tgt/banner-bg.png") no-repeat 50% 100%; height: 131px; margin: -54px 0 -44px; }
.header-bg img { display: none; }
.msog-logo { margin: -37.5em auto 0; display: block; max-width: 800px; }
.gotobuy {margin: 1em auto 0.5em; }
.gotobuy:hover,.gotobuy:visited{text-decoration: none;color: #fff}
.module-1 { background: url("https://hearthstone.nosdn.127.net/3/minisite/msog/module-1-bg.png") no-repeat 23px 0; height: 944px;padding-top: 272px;margin-top: -20px;}
.module-1 h2 { height: 0px;text-indent: -999em; }
.module-1 .video { position: relative; width: 883px; display: inline-block; margin: 0 auto; }
.module-1 .video img { border: 1px solid #050505; width: 100%; height: 100%; }
.module-1 .mobile-video { display: none; margin: 15px 0; position: relative; z-index: 9999; }
.module-1 .mobile-video video { position: relative; z-index: 9999; display: block }
.module-1 .video img { width: 100%; position: relative; z-index: 0; }
.module-1 .article { width: 883px; margin: 0 auto; overflow: hidden; padding-top: 8px;}
.module-1 .article>div { width: 47%; float: left; font-size: 14px; }
.module-1 .article>div.article-2 { float: right; }
.module-1 .article h3 { border-top: 3px solid #2f2d2a; border-bottom: 3px solid #2f2d2a; font-size: 34px; color: #2f2d2a; font-weight: bold; line-height: 34px; padding: 3px 0 7px; }
.module-1 .article p strong { font-weight: bold; font-size: 18px; padding: 10px 0; display: block; line-height: 22px; color: #2f2d2a; }
.module-1 .article p { line-height: 24px; }
.line-1 { margin: -34px 0 -62px; }
.module-2 .subheading {text-align: center; }
.module-2 .article { width: 30%;float: left; margin: -5% 1.5% 25px; }
.module-2 .map { width:100%;max-width: 1020px;}
.module-2 .article p {font-size: 13px; line-height: 23px; }
.module-2 .article p strong { font-weight: bold; font-size: 16px; color: #000; display: block; padding: 8px 0 5px; text-align: center;}
.module-2 .viewAllCards { clear: both; margin-bottom: 55px; }
.module-2 .gang-turf{
    width: 100%;
    position: relative;
    text-align: center;
}
.module-2 .gang-turf img{
    width: 100%;
    max-width: 406px;
    position: relative;
}
.module-2 .gang-turf h3{
    position: absolute;
    bottom: 21.5%;
    font-size: 22px;
    width: 100%;
}
.module-2 .gang-turf.goons h3{
   color: #c99542
}
.module-2 .gang-turf.kabal h3{
    color: #af5a61
}
.module-2 .gang-turf.jade h3{
    color: #6b935e
}
.module-3  h2 { font-size: 28px; }
.module-3 { z-index: 10; }
.module-3 ul { width: 100%; overflow: hidden; }
.module-3 ul li { width: 30%; margin-right: 5%; margin-bottom: 15px; float: left; font-size: 14px; }
.module-3  li>.icon {width: 70px; height: 66px; display: inline-block; margin: 10px 0;background-repeat: no-repeat;background-position: 0 0;}
.module-3 ul li dl { text-align: left; font-size: 15px; line-height: 26px; }
.module-3 ul li .icon-1 {background-image: url("https://hearthstone.nosdn.127.net/3/minisite/msog/gameInfo-icon-1.png");}
.module-3 ul li .icon-2 {background-image: url("https://hearthstone.nosdn.127.net/3/minisite/msog/gameInfo-icon-2.png");}
.module-3 ul li .icon-3 {background-image: url("https://hearthstone.nosdn.127.net/3/minisite/msog/gameInfo-icon-3.png");}

.module-3 ul li strong { padding: 8px 0; color: #233a6e; font-size: 20px; font-weight: bold; }
.module-3 ul li dt { padding-bottom: 8px; }
.module-3 ul li.item-1 dt { padding-bottom: 2rem; }
.module-3 ul li dd { padding: 0 0 7px 0; }

/*.module-3 ul li  dd .icon{
    width: 10px;
    height: 10px;
}*/
.module-4 { width: 100%; }
.module-4 h2 { font-size: 22px; padding: 23px 0 5px; }
.module-4 p.txt { font-size: 14px; line-height: 18px; padding-bottom: 55px; }
.module-4 .us-vote { min-height: 578px; width: 100%; margin: 0 auto; background: url("https://hearthstone.nosdn.127.net/3/minisite/wotog/vote-bg.png") no-repeat 50% 0; margin-top: -410px; padding-top: 490px; }
.module-4 p { width: 530px; margin: 0 auto; text-indent: 0; text-align: center; }
.module-4 img.card-bg { margin: -127px 0; width: 100%; max-width: 1147px; }
.module-4  .vote { position: relative; width: 845px; height: 423px; padding-top: 109px; margin: 0 auto; background: url("https://hearthstone.nosdn.127.net/3/minisite/wotog/vote_resule_bg.png") no-repeat 0 0; }
.module-4  .vote-result { width: 215px; height: 215px; position: relative; margin: 50px auto 0; }
.module-4  .vote-result .loading { padding-top: 79px; }
.module-4 .viewAllCards { width: 198px; }
.module-4 .vote-content { display: none; }
.module-5 { padding-bottom: 30px; }
.module-5 p.txt { text-align: center; padding: 0; }
.module-6 p{text-align: center;}
.module-6 .bg{width: 1612px;margin-left: -206px;}

.module-7{
    background: url("https://hearthstone.nosdn.127.net/3/module-7-bg.png?v1") no-repeat 50% 0;
    min-height: 700px;
}
.module-7 h2{padding-bottom: 23px;}
.module-7 p{text-align: center;}
.module-7 img.card{padding: 5% 0 1%;margin:0 auto;display: block;}
.module-7 .us-vote{height: 346px;}
.line-2{margin-top: -39px;}
#footer .regWrapper { display: none; }
.shareBtn { width: 100%; margin: 40px 0 50px; text-align: center; }
.shareBtn li { display: inline-block; *display: inline; float: none; margin: 0 2px; }
.shareBtn li a, .shareBtn li a:hover { background: url('https://hearthstone.nosdn.127.net/3/minisite/msog/sprite.png') no-repeat 0 0; width: 120px; height: 114px; display: block; *display: inline-block; }
.shareBtn li a.bds_button_tsina { background-position: -18px -21px; }
.shareBtn li a.bds_button_tqq { background-position: -146px -21px; }
.shareBtn li a.bds_button_weixin { background-position: -274px -21px; }
.shareBtn li a.bds_button_tieba { background-position: -400px -21px; }
.shareBtn li a.bds_button_tsina:hover { background-position: -18px -141px; }
.shareBtn li a.bds_button_tqq:hover { background-position: -146px -141px; }
.shareBtn li a.bds_button_weixin:hover { background-position: -274px -141px; }
.shareBtn li a.bds_button_tieba:hover { background-position: -400px -141px; }
.art { text-align: center; }
.art .gameboard { width: 866px; margin: 44px auto 30px; position: relative; }
.art .gameboard .bg-left { background: url("https://hearthstone.nosdn.127.net/3/minisite/msog/art-left-bg.png") no-repeat 0 0; width: 682px; height: 645px; display: block; position: absolute; left: -387px; top: 174px; }
.art .gameboard .bg-right { background: url("https://hearthstone.nosdn.127.net/3/minisite/msog/art-right-bg.png") no-repeat 0 0; width: 389px; height: 520px; display: block; position: absolute; right: -259px; top: 273px; }
.art .gameboard img { width: 100%; position: relative; z-index: 2; }
.art .screenshots { width: 866px; margin: 0 auto; }
.art .screenshots ul { margin-right: -45px; }
.art .screenshots li { float: left; position: relative; width: 258px; margin-right: 45px; margin-bottom: 20px; }
.art .screenshots li img { width: 258px; }
.art .screenshots li a:hover .artwork-zoom { display: block; width: 100%; height: 100%; position: absolute; left: 0; top: 0; background: url(https://hearthstone.nosdn.127.net/3/newbie/goblins-vs-gnomes/artwork-zoom.png) no-repeat center center; }
.art .screenshots li a:hover .artwork-black { position: absolute; display: block; left: 0; top: 0; opacity: 0.5; filter: alpha(opacity=50); width: 100%; height: 100%; background: black; }

/*artwork-frame*/
.artwork-frame { width: 100%; height: 100%; z-index: 3; }
.artwork-frame .snow { width: 997px; height: 35px; background: url("https://hearthstone.nosdn.127.net/3/minisite/tgt/snow.png") no-repeat 50% 0; top: -20px; left: 0; z-index: 25; }
.artwork-frame div { position: absolute; }
.artwork-frame-left-top { width: 19px; height: 17px; left: 0; top: 0; z-index: 10; background: url(https://hearthstone.nosdn.127.net/3/newbie/goblins-vs-gnomes/artwork-frame-corner.png) no-repeat left top; }
.artwork-frame-right-top { width: 19px; height: 17px; right: 0; top: 0; z-index: 10; background: url(https://hearthstone.nosdn.127.net/3/newbie/goblins-vs-gnomes/artwork-frame-corner.png) no-repeat right top; }
.artwork-frame-left-bottom { width: 19px; height: 17px; left: 0; bottom: 0; z-index: 10; background: url(https://hearthstone.nosdn.127.net/3/newbie/goblins-vs-gnomes/artwork-frame-corner.png) no-repeat left bottom; }
.artwork-frame-right-bottom { width: 19px; height: 17px; right: 0; bottom: 0; z-index: 10; background: url(https://hearthstone.nosdn.127.net/3/newbie/goblins-vs-gnomes/artwork-frame-corner.png) no-repeat right bottom; }
.artwork-frame-border-top { width: 100%; height: 8px; right: 0; top: 0; z-index: 5; background: url(https://hearthstone.nosdn.127.net/3/newbie/goblins-vs-gnomes/artwork-frame-x.jpg) repeat-x left top; }
.artwork-frame-border-right { width: 8px; height: 100%; right: 0; top: 0; z-index: 5; background: url(https://hearthstone.nosdn.127.net/3/newbie/goblins-vs-gnomes/artwork-frame-y.jpg) repeat-y right top; }
.artwork-frame-border-bottom { width: 100%; height: 8px; left: 0; bottom: 0; z-index: 5; background: url(https://hearthstone.nosdn.127.net/3/newbie/goblins-vs-gnomes/artwork-frame-x.jpg) repeat-x left bottom; }
.artwork-frame-border-left { width: 8px; height: 100%; left: 0; top: 0; z-index: 5; background: url(https://hearthstone.nosdn.127.net/3/newbie/goblins-vs-gnomes/artwork-frame-y.jpg) repeat-y left top; }

/*howtobut*/
.howToBuyPop { background: #b6a376; text-align: center; *padding-bottom: 10px; height: auto; z-index: 1000000; position: relative; }
.howToBuyPop h3 { font-size: 30px; font-weight: bold; color: #03345f; padding: 50px 0 27px; }
.howToBuyPop  p { width: 90%; display: inline-block; }
.howToBuyPop .pic-cardpack { display: block; margin: 15px auto 10px; }
#applyBox .closeBtn, #popBox .closeBtn { z-index: 1000001; }

/* #popBox .howToBuyPop .closeBtn {
    background: url('https://hearthstone.nosdn.127.net/3/minisite/tgt/sprite.png') no-repeat -596px -808px;
    width: 36px;
    height: 36px;
    top: 2px;
    right: -1px;
}
#popBox .howToBuyPop .closeBtn:hover {
    background-position: -638px -805px;
} */
.video .playBtn { position: absolute; width: 100%; height: 100%; display: block; position: absolute; left: 0; top: 0; }
.video .playBtn span { background: url('https://hearthstone.nosdn.127.net/3/minisite/tgt/sprite.png') no-repeat -716px -784px; width: 105px; height: 105px; display: block; position: relative; left: 50%; top: 50%; margin: -52px 0 0 -52px; }
.video .playBtn:hover span { background-position: -838px -784px; }
.video .left-bg, .video .right-bg { width: 685px; height: 638px; position: absolute; top: -97px }
.video .left-bg { left: -406px; background: url("https://hearthstone.nosdn.127.net/3/minisite/wotog/video_bg_left.png") no-repeat 0 0; }
.video .right-bg { background: url("https://hearthstone.nosdn.127.net/3/minisite/wotog/video_bg_right.png") no-repeat 0 0; right: -359px; }
.module .downLoadBtn { width: 250px; margin: 80px auto 30px; }
.module .downLoadBtn i { display: block; background: url('https://hearthstone.nosdn.127.net/3/minisite/wotog/sprite.png') no-repeat -21px -469px; width: 116px; height: 186px; position: absolute; top: -76px; left: -47px; }

/*卡牌页面*/
.cards { width: 1000px; position: relative; left: 50%; margin-left: -500px; text-align: center; padding-top: 60px; }
#js_cardList { padding-bottom: 30px; text-align: center; }
#js_cardList li { display: inline-block; width: 20%; padding: 2.5%; }
#js_cardList li img { width: 100%; max-width: 239px; }
#js_cardList .loading { margin: 50px auto; }
.ngx-notify.ngx-notify-stagemode{display: none;}
/* media query */
@media only screen and (max-width:1200px) {
    .module-1 .vote-now-btn { display: none; }
    .module h2 { padding: 2% 0 5%; font-size: 28px; }
    .module { width: 100%; margin-left: 0;left: 0}
    .header { background: none; height: auto; }
    .header .mobile-banner { display: block; width: 100%; }
    .header .top-nav { display: none; }
    .header-bg { height: auto; margin: -10px 0 0; }
    .header-bg img { display: block; width: 100%; }
 


    .shareBtn { display: none; }
    .art .gameboard{width: 100%;}
    .art .gameboard  .bg-left,.art  .gameboard  .bg-right{display: none;}
    .art .screenshots { width: 100%; display: inline-block; padding-left: 0; overflow-x: auto; overflow-y: hidden; }
    .art .screenshots ul { width: 1500px; }
    .art .screenshots li { margin-right: 20px; float: left; width: 200px; }
    .art .screenshots li img { width: 100%; }
    .art .screenshots { margin-right: 0; }
    .art .screenshots li a { cursor: default; }
    .art .screenshots li a:hover .artwork-zoom, .art .screenshots li a:hover .artwork-black { background: none; }
    #f-business { left: 0; margin-left: 0; width: 95%; margin: 0 auto; }
    #f-business .media { margin-right: 0; }
    #footer .cprt { width: 95%; }
    #footer .cprt .info { width: 100%; float: left; padding-left: 0; }
     
    .module-5 p,.module-6 p,.module-7 p,.module-2 p.subheading{width: 95%;margin-left: 2.5%;}
    .module-3{height: auto;}
    .module-3 h2{padding: 0.5rem 0;}
    .module-3 ul li{width: 90%;padding-left:5%;float: none;}
    .module-3 li>.icon{position: absolute;left: 3%;width:5%;max-width: 70px;background-size: contain;}
    .module-3 li dl{margin-left: 8%;}
    .module-3 li dl dt strong{display: block;}
    .module-3 ul li.item-1 dt{padding-bottom: 1rem;}
    .module-3 ul li dd{padding-bottom: 0.2rem;}
    .module-1{height: auto;background: url("https://hearthstone.nosdn.127.net/3/minisite/msog/module-1-bg-mobile.png") no-repeat 50% 0;background-size: 100%;width: 106%;padding-top: 29%;margin-left: -3%;}
    .module-1 h2{height: 0;padding: 0 22%;}
    .module-1 .article>div{float: none;width: 100%;padding:2% 0 5%;}
    .module-1 .video,.module-1 .article{width: 73%;margin-left: 1.5%;display: inline-block;}
    .msog-logo { margin: -28% auto 0;width: 40%;}
    .module-6 .bg{width: 100%;margin:0;}
    .module-7{min-height: auto;}
    .module-7 h2{padding-bottom: 3%;}
}
@media only screen and (max-width:768px) {
    #f-business .media dl dd { height: auto; width: 432px; }
    #f-business .f-media { display: none; }
    #popBox .closeBtn { top: 1px; right: 1px; }
    
    .module-2 h2{font-size: 2em;line-height: 2.4rem;}
    .module-2 .article {
       float: none;
       width: 100%;
       max-width: 404px;
       margin:0 auto;
    }
    .module-3 li>.icon{width: 10%}
    .module-3 li dl{margin-left: 15%;}
    .module-7{
          background-size: 120%;
    }
    .module-7 img.card{
        width: 35%;
    }
     .module-7  .us-vote{
        height: 17.7rem;
     }
    .line-1{margin-bottom: -110px;}
    #f-business .foot-media dl,#f-business .foot-media .icon-apply{display: none;}
    #f-business .foot-media{text-align: left;}
    #f-business .foot-media p{width: 182px;overflow: hidden;height:26px; }
}
@media only screen and (max-width:525px) {
     .module-7{
          background-position: 50% 15%;
    }
    #js_cardList li { width: 45%; }
    .module-2 h2{font-size: 22px;}
    .module-2 .article p{
        width: 90%;
        margin-left: 5%;
    }
    .module-1 .article h3{font-size: 22px;line-height: 26px;padding-top: 5px;}
    .module-1 .article p strong{font-size: 16px;padding:6px 0 0;}
    .module-1 .article p{line-height: 20px;}
    #f-business{padding-top: 12%;}
    #footer .cprt{padding-top: 5%;}
    #footer{min-width: 320px;}
    .module-7{background-size: 150%;}   
}