.sprite-btn-page {
    background-image: url(//image.tgp.qq.com/tgp_act/release/mxd2/mxd220170327/images/btn-page.png);
    background-repeat: no-repeat;
    display: block;
}

.sprite-btn-page1 {
    width: 247px;
    height: 202px;
    background-position: 0 0;
}

.sprite-btn-page1-hover {
    width: 233px;
    height: 190px;
    background-position: 0 -202px;
}

.sprite-btn-page2 {
    width: 250px;
    height: 203px;
    background-position: 0 -392px;
}

.sprite-btn-page2-hover {
    width: 249px;
    height: 188px;
    background-position: 0 -595px;
}

.sprite-btn-page3 {
    width: 248px;
    height: 204px;
    background-position: 0 -783px;
}

.sprite-btn-page3-hover {
    width: 232px;
    height: 188px;
    background-position: 0 -987px;
}

/*btn-page.css  E*/

/*gift.css  S*/
.sprite-gift {
    background-image: url(//image.tgp.qq.com/tgp_act/release/mxd2/mxd220170327/images/gift.png);
    background-repeat: no-repeat;
    display: block;
}

.sprite-gift1 {
    width: 80px;
    height: 80px;
    background-position: 0 0;
}

.sprite-gift2 {
    width: 80px;
    height: 80px;
    background-position: 0 -80px;
}

.sprite-gift3 {
    width: 80px;
    height: 80px;
    background-position: 0 -160px;
}

.sprite-gift4 {
    width: 80px;
    height: 80px;
    background-position: 0 -240px;
}

.sprite-gift5 {
    width: 80px;
    height: 80px;
    background-position: 0 -320px;
}

.sprite-gift6 {
    width: 80px;
    height: 80px;
    background-position: 0 -400px;
}

/*gift.css  E*/

/*mask.css  S*/
.sprite-mask {
    background-image: url(//image.tgp.qq.com/tgp_act/release/mxd2/mxd220170327/images/mask.png);
    background-repeat: no-repeat;
    display: block;
}

.sprite-close {
    width: 48px;
    height: 48px;
    background-position: 0 0;
}

.sprite-confirm {
    width: 265px;
    height: 62px;
    background-position: 0 -48px;
}

.sprite-confirm-hover {
    width: 265px;
    height: 62px;
    background-position: 0 -110px;
}

.sprite-pop {
    width: 518px;
    height: 352px;
    background-position: 0 -172px;
}

/*mask.css  E*/

/*page0.css  S*/
.sprite-page0 {
    background-image: url(//image.tgp.qq.com/tgp_act/release/mxd2/mxd220170327/images/page0.png);
    background-repeat: no-repeat;
    display: block;
}

.sprite-play {
    width: 99px;
    height: 110px;
    background-position: 0 0;
}

.sprite-play-hover {
    width: 99px;
    height: 110px;
    background-position: 0 -110px;
}

.sprite-square {
    width: 139px;
    height: 91px;
    background-position: 0 -220px;
}

.sprite-square2 {
    width: 174px;
    height: 159px;
    background-position: 0 -311px;
}

.sprite-square3 {
    width: 176px;
    height: 189px;
    background-position: 0 -470px;
}

.sprite-test-hover {
    width: 201px;
    height: 228px;
    background-position: 0 -659px;
}

.sprite-tgp-logo {
    width: 387px;
    height: 82px;
    background-position: 0 -887px;
}

/*page0.css  E*/

/*page1.css  S*/
.sprite-page1 {
    background-image: url(//shp.qpic.cn/gqq_photo/2017033110/n-mxd2-mxd220170327-page1/0);
    background-repeat: no-repeat;
    display: block;
}

.sprite-page1-title {
    width: 1180px;
    height: 410px;
    background-position: 0 0;
    position: relative;
}

.sprite-step-bg {
    width: 117px;
    height: 135px;
    background-position: 0 -410px;
}

.sprite-step-group {
    width: 1149px;
    height: 303px;
    background-position: 0 -545px;
}

/*page1.css  E*/

/*page2.css  S*/
.sprite-page2 {
    background-image: url(//image.tgp.qq.com/tgp_act/release/mxd2/mxd220170327/images/page2.png);
    background-repeat: no-repeat;
    display: block;
}

.sprite-draw-bg {
    width: 855px;
    height: 510px;
    background-position: 0 0;
}

.sprite-page2-click {
    width: 731px;
    height: 78px;
    background-position: 0 -510px;
}

.sprite-page2-click-hover {
    width: 731px;
    height: 78px;
    background-position: 0 -588px;
}

.sprite-page2-down {
    width: 292px;
    height: 80px;
    background-position: 0 -666px;
}

.sprite-page2-down-hover {
    width: 292px;
    height: 80px;
    background-position: 0 -746px;
}

.sprite-page2-role1 {
    width: 520px;
    height: 597px;
    background-position: 0 -826px;
}

.sprite-page2-role2 {
    width: 177px;
    height: 149px;
    background-position: 0 -1423px;
}

.sprite-page2-rule {
    width: 715px;
    height: 66px;
    background-position: 0 -1572px;
}

.sprite-page2-square1 {
    width: 165px;
    height: 128px;
    background-position: 0 -1638px;
}

.sprite-page2-title {
    width: 504px;
    height: 104px;
    background-position: 0 -1766px;
}

/*page2.css  E*/

/*page3.css  S*/
.sprite-page3 {
    background-image: url(//shp.qpic.cn/gqq_photo/2017033118/n-mxd2-mxd220170327-page4/0);
    background-repeat: no-repeat;
    display: block;
}

.sprite-page3-content {
    width: 1434px;
    height: 767px;
    background-position: 0 0;
}

.sprite-page3-down {
    width: 293px;
    height: 80px;
    background-position: 0 -767px;
}

.sprite-page3-down-hover {
    width: 292px;
    height: 80px;
    background-position: 0 -847px;
}

.sprite-page3-get {
    width: 283px;
    height: 98px;
    background-position: 0 -927px;
}

.sprite-page3-get-hover {
    width: 283px;
    height: 98px;
    background-position: 0 -1025px;
}

/*page3.css  E*/

/*site.css  S*/
.sprite-site {
    background-image: url(//image.tgp.qq.com/tgp_act/release/mxd2/mxd220170327/images/site.png);
    background-repeat: no-repeat;
    display: block;
}

.sprite-site1 {
    width: 109px;
    height: 105px;
    background-position: 0 0;
}

.sprite-site1-hover {
    width: 98px;
    height: 100px;
    background-position: 0 -105px;
}

.sprite-site2 {
    width: 109px;
    height: 105px;
    background-position: 0 -205px;
}

.sprite-site2-hover- {
    width: 98px;
    height: 100px;
    background-position: 0 -310px;
}

.sprite-site3 {
    width: 109px;
    height: 105px;
    background-position: 0 -410px;
}

.sprite-site3-hover {
    width: 98px;
    height: 100px;
    background-position: 0 -515px;
}

/*site.css  E*/

/*������������ʽ*/

body, h1, h2, h3, h4, h5, h6, hr, p, pre, dl, dt, dd, ul, ol, li, th, td, form, fieldset, legend, button, input, textarea, figure, figcaption, nav, footer, menu, blockquote {margin: 0;padding: 0;}
h1, h2, h3, h4, h5, h6 {font-size: 100%;font-weight: normal;}
address, em, i, b {font-style: normal;}
a, a:hover, a:active, a:visited {text-decoration: none;}a{cursor: pointer;}
ul, ol, li {list-style: none;}
fieldset, img {border: 0;}
button, input, select, textarea {outline: none;}
select {-webkit-appearance: none;appearance: none;}
textarea, input {background: none;-webkit-border-radius: 0;border-radius: 0;-webkit-appearance: none;}
table {border-spacing: 0;border-collapse: collapse;width: 100%;}
/*:not(input) {-webkit-user-select: none;}*/
body {min-width:1552px;word-wrap: break-word;font: 13px/1.5 "microsoft yahei", Tahoma, Arial;background-color: #fff;}
body .ost_box{
    min-width: 1552px;
}
/*footer*/
#footer_ied {
    text-align:center;
    font-size:12px;
    line-height:19px;
    min-width:1000px;
    background-color:#fff;
    color:#6c7890;
    font-family:\5B8B\4F53, sans-serif;
    margin-top: 0;
}
.wrap_ied {
    margin:0 auto;
    padding:30px;
    width:940px
}
.wrap_ied a {
    color:#777;
}
#footer_ied .e {
    color:#777;
    font-size:10px;
}
.wrapper{
    width: 100%;
    height: 100%;
    overflow: hidden;
}
.section{
    width: 100%;
    position: relative;
}
.section0{
    height: 995px;
    background:#9cfbdc url("//shp.qpic.cn/gqq_photo/2017032716/n-mxd2-mxd220170327-section0-bg-2/0") no-repeat;
    background-size: cover;
}
.section1{
    height: 1000px;
    background:#9cfbdc url("//image.tgp.qq.com/tgp_act/release/mxd2/mxd220170327/images/section1-bg.png") no-repeat;
    background-size: cover;
}
.section2{
    height: 1000px;
    background:#9cfbdc url("//shp.qpic.cn/gqq_photo/2017032716/n-mxd2-mxd220170327-section2-bg/0") no-repeat;
    background-size: cover;
}
.section3{
    height: 919px;
    background:#9cfbdc url("//shp.qpic.cn/gqq_photo/2017032716/n-mxd2-mxd220170327-section3-bg/0") no-repeat;
    background-size: cover;
}
.content{
    position: relative;
    width: 1200px;
    /*height: 100%;*/
    margin: auto;
    overflow: visible;
}
/*��һҳpage0 S*/
.section0 .content{
    padding-top: 23px;
}
.garden{
    background-image: url(//image.tgp.qq.com/tgp_act/release/mxd2/mxd220170327/images/garden2.png);
    background-repeat: no-repeat;
    display: block;
    /*width: 1179px;
    height: 708px;*/
    margin-top: -177px;
    width: 1550px;
    height: 947px;
    background-position: 0 0;
    position: relative;
    z-index: 1;
}
.garden-wrap{
    position: absolute;
    top: 178px;
    left: 50%;
    margin-left: -600px;
}
.section-shadow{
    background-image: url(//image.tgp.qq.com/tgp_act/release/mxd2/mxd220170327/images/shadow.png);
    background-repeat: no-repeat;
    display: block;
    width: 1065px;
    height: 938px;
    background-position: 0 0;
    position: absolute;
    left: 487px;
    top: 0;
    z-index: 0;
}
.play{
    position: absolute;
    top: 13px;
    left: 534px;
    z-index: 2;
}
.play.sprite-play:hover{
    background-position: 0 -110px;
}
.square1{
    position: absolute;
    right: -188px;
    top: 936px;
    z-index: 2;
}
.square2{
    position: absolute;
    right: -238px;
    top: 267px;
}
.square3{
    position: absolute;
    left: -256px;
    top: 690px;
}
.btn-group-section0{
    position: absolute;
    top: 48px;
    right: -161px;
    z-index: 3;
}
.btn-group-section0 .btn-page{
    float: right;
    margin-left: 12px;
}
.btn-page{
    display: inline-block;
    height: 40px;
    line-height: 40px;
    border-radius: 20px;
    text-align: center;
    color: #fff;
    font-size: 14px;
    font-weight: bold;
}
.btn-test{
    width: 138px;
    background-color: #7648eb;
    position: relative;
}
.btn-login{
    width: 88px;
    background-color: #e7ca22;
}
.btn-logined{
    padding-left: 16px;
    padding-right: 16px;
    border: 2px solid #f6db3f;
    background-color: rgba(0,0,0,.4);
    box-sizing: border-box;
    line-height: 36px;
}
.btn-test:hover .test-hover{
    display: block;
}
.test-hover.sprite-page0{
    display: none;
    position: absolute;
    bottom: -240px;
    right: -38px;
}
.btn-page1{
    position: absolute;
    bottom: 142px;
    left: 276px;
}
.btn-page1:hover{
    left: 278px;
    width: 233px;
    height: 190px;
    background-position: 0 -202px;
}
.btn-page2{
    position: absolute;
    bottom: 44px;
    left: 464px;
}
.btn-page2:hover{
    width: 249px;
    height: 188px;
    background-position: 0 -595px;
}
.btn-page3{
    position: absolute;
    bottom: 142px;
    left: 649px;
}
.btn-page3:hover{
    left: 664px;
    width: 232px;
    height: 188px;
    background-position: 0 -987px;
}
.site-group{
    position: absolute;
    left: -250px;
    top: 207px;
}
.site1{
    z-index: 3;
    position: absolute;
    top: 0;
}
.site1:hover{
    width: 98px;
    height: 100px;
    background-position: 0 -105px;
}
.site2{
    z-index: 2;
    position: absolute;
    top: 62px;
}
.site2:hover{
    width: 98px;
    height: 100px;
    background-position: 0 -310px;
}
.site3{
    z-index: 1;
    position: absolute;
    top: 125px;
}
.site3:hover{
    width: 98px;
    height: 100px;
    background-position: 0 -515px;
}
/*��һҳpage0 E*/

/*�ڶ�ҳpage1 S*/
.section1 .content{
    padding-top: 80px;
}
.step-group{
    margin-top:84px;
    margin-left:56px;
    position: relative;
}
.step-bg{
    font-size: 21px;
    line-height: 100px;
    font-weight: bold;
    color: #fff;
    position: absolute;
    top: -105px;
    text-align: center;
}
.step-bg:hover{
    animation: cli_step 1.5s infinite linear;
    -webkit-animation: cli_step 1.5s infinite linear;
}
.step-bg>span{
    width: 317px;
    height: 300px;
    display: block;
    position: absolute;
    bottom: -300px;
    left: -80px;
}
.step1{
    left: 79px;
}
.step2{
    left: 476px;
}
.step3{
    left: 872px;
}
@keyframes cli_step {
    0%{
        top: -105px;
    }
    50%{
        top: -125px;
    }
    100%{
        top: -105px;
    }
}
@-webkit-keyframes cli_step {
    0%{
        top: -105px;
    }
    50%{
        top: -125px;
    }
    100%{
        top: -105px;
    }
}
/*�ڶ�ҳpage1 E*/
/*����ҳpage2 S*/
.section2 .content{
    padding-top: 111px;
}
.page2-title{
    margin: auto auto 46px;
    width: 504px;
    height: 104px;
}
.draw-bg{
    margin-left: 390px;
    position: relative;
}
.draw-content{
    width: 726px;
    height: 388px;
    padding-top: 18px;
    margin-left:20px;
}
.draw-item{
    width: 242px;
    height: 194px;
    display: inline-block;
    float: left;
    margin: 0;
}
.draw-content .draw-item:nth-child(odd){
    background-color: rgba(35,61,133,.8);
}
.draw-content .draw-item:nth-child(even){
    background-color: rgba(45,72,150,.8);
}
.draw-content .draw-item:last-child{
    background-color: rgba(53,83,169,.8);
}
.page2-click{
    margin: 12px auto auto 20px;
}
.page2-click:hover{
    background-position: 0 -588px;
}
.sprite-gift{
    margin: 40px auto 25px;
}
.gift-text{
    width: 100%;
    text-align: center;
    color: #5af6f6;
    font-size: 16px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.page2-role1{
    position: absolute;
    left: -411px;
    top: -22px;
}
.page2-role2{
    position: absolute;
    right: 35px;
    top: -80px;
}
.page2-rule{
    margin:45px auto auto 58px;
}
.page2-down{
    position: absolute;
    bottom: -112px;
    right: 42px;
}
.page2-down:hover{
    background-position: 0 -746px;
}
.page2-square1{
    position: absolute;
    bottom: 110px;
    left: -100px;
}
/*����ҳpage2 E*/
/*�齱����  S*/
.mask-draw-wrap{
    z-index: 100;
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgb(0,0,0)\9;
    background-color: rgba(0,0,0,.8);
}
.pop{
    position: absolute;
    left: 50%;
    top: 50%;
    margin-left: -254px;
    margin-top: -170px;
}
.close{
    position: absolute;
    top: 28px;
    right: 0;
}
.confirm{
    position: absolute;
    left: 117px;
    bottom: 54px;
}
.confirm:hover{
    background-position: 0 -110px;
}
.pop-text1{
    margin: 134px auto 7px;
    padding-right: 24px;
    padding-left: 11px;
    box-sizing: border-box;
    width: 100%;
    text-align: center;
    height: 24px;
    line-height: 24px;
    font-size: 24px;
    color: #786600;
}
.pop-text2{
    padding-right: 24px;
    padding-left: 11px;
    box-sizing: border-box;
    width: 100%;
    text-align: center;
    height: 18px;
    line-height: 18px;
    font-size: 18px;
    color: #786600;
}
.hide{
    display: none;
}
/*�齱����  E*/
/*����ҳpage3  S*/
.section3 .content{
    padding-top: 114px;
}
.page3-content{
    margin-left: -120px;
}
.sec3-btn-group{
    position: absolute;
    left: 0;
    bottom: 192px;
}
.sec3-btn-group>a{
    display: inline-block;
    float: left;
}
.page3-down{
    margin-top: 13px;
}
.page3-down:hover{
    background-position: 0 -847px;
}
.page3-get{
    margin-right: 7px;
}
.sec3-btn-group .page2-down{
    position: relative;
    left: 0;
    bottom: 0;
    margin-top: 13px;
}
.page3-get:hover{
    background-position: 0 -1025px;
}
.share-index{
    position: absolute;
    bottom: 92px;
    left: 335px;
    font-size: 14px;
    font-weight: bold;
    color: #fff;
    text-decoration: underline;
}

.flash {
    width: 980px;
    height: 412px;
    background: url(//image.tgp.qq.com/tgp_act/release/cf/cf20170104/images/flash.jpg) no-repeat;
    margin: 0 auto;
    overflow: hidden;
}

.popupbox {
    width: 800px;
    height: 600px;
    z-index: 10;
    background-color: #000;
    display: none;
    outline: none;
}

.pop-close {
    position: absolute;
    top: -6px;
    right: -70px;
    display: block;
    width: 60px;
    height: 60px;
    background: url(//image.tgp.qq.com/tgp_act/release/danji/xlgwy20170324/images/yxxl34.png) no-repeat;
    outline: none;
    border: 0;
}

.page1-title-text{
    font-size: 14px;
    color: #fff;
    line-height: 27px;
    position: absolute;
    bottom: 42px;
    left: 134px;
}

.sprite-mask.fail {
    background-image: url(//shp.qpic.cn/gqq_photo/2017033118/n-mxd2-mxd220170327-pop-fail/0);
    background-repeat: no-repeat;
    background-position: 0;
    display: block;
}

.page2-rule-l{
    width: 70px;
    display: inline-block;
    float: left;
    font-size: 28px;
    font-weight: bold;
    color: #7bffff;
}
.page2-rule-r{
    display: inline-block;
    float: left;
    font-size: 14px;
    line-height: 25px;
    color: #5bffff;
    padding-top: 6px;
}
.page3-rule-l{
    width: 70px;
    display: inline-block;
    float: left;
    font-size: 28px;
    font-weight: bold;
    color: #f5ffc5;
}
.page3-rule-r{
    display: inline-block;
    float: left;
    font-size: 14px;
    line-height: 25px;
    color: #f5ffc5;
    padding-top: 6px;
}
.page3-rule{
    position: absolute;
    left: 0px;
    bottom: 86px;
}
/*新增 2017-3-31 E*/
body .tgp_pop .tgp_selete{
    padding: 0 0 0 4px;
}
body .tgp_pop .txt_msg {
    margin: 20px 76px;
}