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: 2.25rem;
    font-weight: bold;
    color: #03345f;
}

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

.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: 0.875rem;
    padding: 9px 0 0 50px;
    position: absolute;
    right: 0;
    top: 5px;
    text-align: left;
}

.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;
    text-align: center;
}

.module a.btn,
a.gotobuy {
    display: block;
    height: 60px;
    text-align: center;
    width: 180px;
    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: 1rem;
    font-weight: bold;
    text-decoration: none;
    line-height: 3.3rem;
    margin: 0 auto;
    color: #fff;
}

.module a.btn span,
a.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 {
    height: 1471px;
    text-align: center;
    color: #fff;
}

.header .logo {
    padding: 2rem 0 0;
}

.header h1 {
    font-size: 2.875rem;
    font-weight: bold;
    line-height: 2.875rem;
    text-shadow: 0 0 3px #454545;
}

.header .txt {
    font-size: 1rem;
    text-shadow: 0 0 3px #454545;
    line-height: 1.875rem;
    padding: 1rem 0 3rem;
}

.header .video {
    height: 518px;
    position: relative;
    text-align: center;
    margin: 6.5rem 0 0;
}

.header .video-list {

    /* position: relative;
         display: inline-block;
         left: 50%;
         margin-left: -475px;*/
}

.header  ul.pc-video {

    /*width: 10000px;*/
}

.header .swiper-container-video{
    position: relative;
    width: 927px;
    height: 518px;
    display: inline-block;
}

.header .slider-video img {
    width: 914px;
    height: 514px;
    position: absolute;
    left: 6.5px;
    top: 2px;
}

.header .video .border {
    background: url("https://hearthstone.nosdn.127.net/3/minisite/ungoro/video-border.png") no-repeat 0 0;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 2;
}

.header .video .play-btn {
    display: block;
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    text-decoration: none;
    z-index: 3;
}

.header .video .play-btn span {
    background: url("https://hearthstone.nosdn.127.net/3/minisite/ungoro/sprite.png") no-repeat -41px -39px;
    width: 101px;
    height: 101px;
    display: block;
    position: relative;
    left: 50%;
    top: 50%;
    margin: -55.5px 0 0 -55.5px;
}

.header .video .play-btn:hover span {
    background-position: -163px -39px;
}

.header .video .play-btn i {
    color: #fff;
    font-size: 1.375rem;
    text-shadow: 0 0 4px #000;
    font-style: normal;
    position: relative;
    top: 49%;
    display: block;
}

.header .video .mark {
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
    position: relative;
}

.header .video .prev-btn,
.header .video .next-btn {
    background: url('https://hearthstone.nosdn.127.net/3/minisite/ungoro/sprite.png') no-repeat -324px -9px;
    width: 70px;
    height: 59px;
    position: absolute;
    top: 50%;
    margin-top: -30px;
    display: block;
    text-indent: -999em;
    cursor: pointer;
}

.header-pc .video .prev-btn {
    left: 50%;
    margin-left: -561px;
}

.header-pc .video .next-btn {
    left: 50%;
    margin-left: 490px;
    background-position: -426px -9px;
}

.header .video {
    margin: 0;
    padding-bottom: 1rem;
}
.header .mobile-video .swiper-container-video{
    width: 80%;
    height: auto;
}
.header .mobile-video .swiper-slide{
    width: 100%;
    position: relative;
    text-align: center;
}

.header .mobile-video li video {
    width: 90%;
    border: 5px solid rgba(255, 255, 255, 0.5);
    display: inline-block;
}
.header .video.mobile-video .prev-btn,
.header .video.mobile-video .next-btn{
    background-position: -621px -9px;
    width: 27px;
    height: 45px;
    margin-left: 0;
    z-index: 3;
}
.header .video.mobile-video .prev-btn{
    left: 3px;
}
.header .video.mobile-video .next-btn{
    background-position: -560px -9px;
    right: 3px;
}
.header .video {
    height: auto;
}

h2 {
    padding: 6rem 0 1.8rem;
}

.module-1 {
    background: url("https://hearthstone.nosdn.127.net/3/minisite/ungoro/module-1-bg.jpg") no-repeat 50% 0;
    height: 894px;
}

.module-1 .cards {
    margin: 5.5rem 0 2.6rem;
}

.module-2 {
    background: url("https://hearthstone.nosdn.127.net/3/minisite/ungoro/module-2-bg.jpg") no-repeat 50% 0;
    height: 1077px;
}

.module-2 h2,
.module-2 .txt {
    color: #fff;
    height: 2.3rem;
}
#js_infoPic_mobile{
    display: none;
}
.module-2 .pic {
    width: 1200px;
    height: 787px;
    position: relative;
    left: 50%;
    margin-left: -600px;
}

.module-2 .pic img {
    position: absolute;
    transition: all 0.3s;
    cursor: pointer;
}

.module-2 .note-1 {
    left: 796px;
    top: 65px;
    transform: rotate(-9deg);
    width: 344px;
}

.module-2 .pic .cover {
    left: 634px;
    top: 157px;
    max-width: 100%;
}

.module-2 .note-2 {
    left: 70px;
    top: 331px;
    width: 375px;
    transform: rotate(-16deg);
}

.module-2 .note-3 {
    left: 381px;
    top: 231px;
    width: 344px;
}

.module-2 .note-4 {
    left: 668px;
    top: 252px;
    transform: rotate(6deg);
    width: 392px;
}

.module-2 .note-1:hover {
    transform: scale(1.2) rotate(-6deg);
}

.module-2 .note-2:hover {
    transform: scale(1.15) rotate(-15deg);
}

.module-2 .note-3:hover {
    transform: scale(1.2) rotate(-5deg);
}

.module-2 .note-4:hover {
    transform: scale(1.15) rotate(1deg);
}

.module-5 {
    background: url("https://hearthstone.nosdn.127.net/3/minisite/ungoro/module-5-bg.jpg") no-repeat 50% 0;
    height: 1266px;
}

.module-5 .flower {
    background: url("https://hearthstone.nosdn.127.net/3/minisite/ungoro/sprite.png") no-repeat 50% 0;
    display: block;
    position: absolute;
    z-index: 20;
}

.module-5 .flower-1 {
    background-position: -286px -176px;
    width: 146px;
    height: 169px;
    left: -38px;
    top: -100px;
}

.module-5 .flower-2 {
    background-position: -501px -159px;
    width: 230px;
    height: 211px;
    top: 424px;
    left: -112px;
}

.module-5 .flower-3 {
    background-position: -41px -191px;
    width: 161px;
    height: 179px;
    top: 436px;
    left: 751px;
}

.footer-flower-left {
    background: url("https://hearthstone.nosdn.127.net/3/minisite/ungoro/footer-flower-left.png") no-repeat 0 0;
    width: 321px;
    height: 149px;
    position: absolute;
    left: 0;
    bottom: 0;
}

.footer-flower-right {
    background: url("https://hearthstone.nosdn.127.net/3/minisite/ungoro/footer-flower-right.png") no-repeat 0 0;
    width: 294px;
    height: 149px;
    position: absolute;
    right: 0;
    bottom: 0;
}

#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;
    cursor: pointer;
}

.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 2.5rem;
}

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

#popBox .closeBtn {
    background: url('https://hearthstone.nosdn.127.net/3/minisite/ungoro/sprite.png?v1') no-repeat -703px -21px;
    width: 28px;
    height: 28px;
    top: 12px;
    right: -17px;
}

#popBox .closeBtn:hover {
    background-position: -754px -21px;
}

.scene {
    position: absolute;
    left: 0;
    top: 0;
    z-index: 10;
}

.header-mobile {
    display: none;
    background: url("https://hearthstone.nosdn.127.net/3/minisite/ungoro/header-bg.jpg") no-repeat 50% 0;
}

.header-pc {
    top: 0;
    position: relative;
}

.header-pc .parallax {
    position: relative;
    height: 1471px;
    transition: all 0.5s;
}

.header-pc .parallax .page-animate {
    transition: all 0.5s;
}

.header-pc .parallax:before,
.header-pc .parallax:after {
    content: "";
    display: block;
    position: absolute;
    z-index: 10;
    top: 0;
}

.header-pc .parallax:before {
    background: url("https://hearthstone.nosdn.127.net/3/minisite/ungoro/new/plantleft.png");
    height: 426px;
    left: 0;
    max-width: 402px;
    width: 15%;
}

.header-pc .parallax:after {
    background: url("https://hearthstone.nosdn.127.net/3/minisite/ungoro/new/plantright.png");
    height: 196px;
    right: 5%;
    width: 121px;
}

.header-pc .parallax-layer {
    background-size: cover;
    background-repeat: no-repeat;
    position: absolute;
    width: 100%;
}

.header-pc .parallax-layer-00 {
    background-image: url("https://hearthstone.nosdn.127.net/3/minisite/ungoro/new/sky.jpg");
    background-position: 50% 0;
    height: 1273px;
    transform: translate3d(0px, 0px, 0px);
    
}
.header-pc .page-animate-sky{
    background: #000;
    height: 1273px;
    opacity: 0;
    transition: opacity 0s;
}
.header-pc .parallax-layer-01 {
    background-image: url("https://hearthstone.nosdn.127.net/3/minisite/ungoro/new/dino.png");
    background-position: 50% 0;
    height: 1057px;
    transform: translate3d(0px, 0px, 0px);
}

.header-pc .parallax-layer-02 {
    background-image: url("https://hearthstone.nosdn.127.net/3/minisite/ungoro/new/fire-bird.png");
    background-position: 50% 0;
    height: 277px;
    transform: translate3d(0px, 0px, 0px);
    top: 8%;
    right: 16%;
    width: 366px;
}

.header-pc .parallax-layer-03 {
    background-image: url("https://hearthstone.nosdn.127.net/3/minisite/ungoro/new/electro-bird.png");
    background-position: 50% 0;
    height: 139px;
    transform: translate3d(0px, 0px, 0px);
    top: 4%;
    left: 14%;
    width: 220px;
}

.header-pc .parallax-layer-04 {
    background-image: url("https://hearthstone.nosdn.127.net/3/minisite/ungoro/new/leaves-transparent.png");
    background-position: 50% 150px;
    bottom: 0;
    top: auto;
    height: 1121px;
    transform: translate3d(0px, 0px, 0px);
}

.header-pc .parallax-layer-05 {
    background-image: url("https://hearthstone.nosdn.127.net/3/minisite/ungoro/new/branch.png");
    height: 743px;
    top: 474px;
}

.header-pc .parallax-layer-09 {
    top: 750px;
}

.header-pc .parallax-layer-09 .icon-flower {
    background: url("https://hearthstone.nosdn.127.net/3/minisite/ungoro/new/plant-overlay.png");
    width: 428px;
    height: 318px;
    display: block;
    position: absolute;
    top: -155px;
    left: 50%;
    margin-left: -740px;
    transform: t
}
.btn-wrap a{
    display: inline-block;
    margin: 0 15px;
}
/* media query */
@media only screen and (max-width:1000px) {
    .top-nav {
        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;g
    }

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

    .header .txt,
    .module .txt {
        width: 96%;
        margin-left: 2%;
    }

    .module .txt {
        font-size: 1rem;
        line-height: 1.875rem;
    }
    .header .txt{
        padding-bottom: 2rem;
    }

    .header .txt span {
        display: block;
    }

    .header {
        background: url("https://hearthstone.nosdn.127.net/3/minisite/ungoro/mobile/header-bg.jpg") no-repeat 50% 0;
        background-size: 100%;
    }

    .header,
    .module {
        height: auto;
    }

    .header .logo {
        max-width: 50%;
    }

    .header h1 {
        font-size: 1.8rem;
    }

    .header .txt {
        text-align: left;
        text-indent: 2rem;
    }

    .module  h2 {
        font-size: 1.8rem;
        line-height: 2.2rem;
    }

    .module-1 {
        background: url("https://hearthstone.nosdn.127.net/3/minisite/ungoro/mobile/module-1-bg.jpg?v1") no-repeat 50% 0;
        background-size: 100%;
        padding-bottom: 5rem;
    }

    .module-1 .cards {
        width: 100%;
        max-width: 840px;
        margin: 3rem 0 1rem;
    }

    .module-1:after {
        background: url("https://hearthstone.nosdn.127.net/3/minisite/ungoro/mobile/module-1-bg-btm.png") no-repeat 50% 0;
        position: absolute;
        bottom: 0;
        height: 163px;
        width: 1000px;
        left: 50%;
        margin-left: -500px;
        display: block;
        content: "";
        z-index: 2;
    }

    .module-2 {
        background: url("https://hearthstone.nosdn.127.net/3/minisite/ungoro/mobile/module-2-bg.jpg") no-repeat 50% 0;
        background-size: 100%;
    }

    .module-2:after {
        background: url("https://hearthstone.nosdn.127.net/3/minisite/ungoro/mobile/module-2-bg-btm.png?v1") no-repeat 50% 0;
        position: absolute;
        bottom: 0;
        height: 180px;
        width: 1000px;
        left: 50%;
        margin-left: -500px;
        display: block;
        content: "";
        z-index: 2;
    }

    .module-2 .pic {

        /* width: 2000px; */
        width: 100%;
        left: 0;
        margin-left: 0;
        padding: 3rem 0 5rem;
        height: auto;
        overflow: hidden;
        text-align: center;
    }

    .module-2 .pic img {
        position: relative;
        z-index: 3;
        transform: rotate(0);
        top: 0;
        width: 80%;
        max-width: 525px;
        vertical-align: top;
    }

    .module-2 .pic img:hover {
        transform: rotate(0) scale(1);
    }

    .module-2 .pic .cover {
        display: none;
    }

    .module-2 .swiper-button-next,
    .module-2 .swiper-button-prev {
        background: url("https://hearthstone.nosdn.127.net/3/minisite/ungoro/sprite.png") no-repeat -621px -9px;
        width: 27px;
        height: 45px;
    }

    .module-2 .swiper-button-next {
        background-position: -560px -9px;
    }

    .footer-flower-left,
    .footer-flower-right {
        display: none;
    }

    .module-5 {
        padding-bottom: 2rem;
    }

    .module-5 span.flower {
        display: none;
    }

    .module-2 .swiper-slide img {
        position: relative !important;
        left: 0 !important;
        top: 0 !important;
    }

    .swiper-container {
        width: 100%;
        height: 100%;
    }

    .swiper-slide {
        text-align: center;        /* Center slide text vertically */
        display: -webkit-box;
        display: -ms-flexbox;
        display: -webkit-flex;
        display: flex;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        -webkit-justify-content: center;
        justify-content: center;
        -webkit-box-align: center;
        -ms-flex-align: center;
        -webkit-align-items: center;
        align-items: center;
    }

}


@media only screen and (max-width:768px) {
}

@media only screen and (max-width:525px) {
}


.u-gotobuy{
    margin-top:-2rem !important;
}