#guideContainer
{
    position: relative;

    overflow: hidden;

    width: 1440px;

    background-color: #000;
}

#guideControllers
{
    z-index: 10;
    top: 50%;

    margin-top: -304px;

    list-style: none;
}

.guideControllers_fixed
{
    position: fixed;
    right: 65px;
}

.guideControllers_absolute
{
    position: absolute;
    right: 65px;
}

#guideControllers li
{
    float: left;

    width: 12px;
    height: 12px;
    margin: 10px;

    cursor: pointer;

    background-image: url('../images/guide/guideControllers.png');
    background-position: 0 -13px;
}

#guideActor
{
    position: relative;

    width: 8640px;
    height: 100%;

    list-style: none;
}

#netTxt p
{
    line-height: 2.5;

    float: left;

    width: 100%;

    text-indent: 0;
}

#guideActor li
{
    position: relative;

    float: left;

    width: 1440px;
    height: 100%;

    color: #fff;
}

#banner .net
{
    width: 100%;
    height: 100%;

    color: #fff;
}
#banner li.data
{
    width: 100%;
    height: 100%;

    background-color: #000;
}

#banner li.data p
{
    color: #fff;
}

.guide
{
    background-image: url('../images/guide/guide_bg01.jpg');
    background-repeat: no-repeat;
    background-position: left center;
}

.guideBg
{
    position: absolute;

    width: 100%;
    height: 100%;

    background-image: url('../images/guide/guide_bg02.png');
    background-repeat: no-repeat;
    background-position: left center;
}


.guide .image
{
    position: absolute;
    left: 180px;

    width: 1120px;
    height: 100%;

    background-image: url('../images/guide/guide_img.png');
    background-repeat: no-repeat;
    background-position: left center;
}

.guide .txt
{
    position: absolute;
    top: 380px;
    left: 654px;

    margin-top: 73px;
}

.data
{
    background-image: url('../images/guide/data_bg.jpg');
    background-repeat: no-repeat;
    background-position: center center;
}

.data div
{
    position: absolute;
    top: 50%;
    left: 50%;

    opacity: 0;
}

.data div img
{
    float: left;

    width: 100%;
}

.data h3
{
    position: absolute;
    top: 50%;
    left: 50%;

    margin-top: -115px;
    margin-left: -464px;
}

.data a
{
    position: absolute;
    top: 50%;
    left: 50%;

    margin-top: -49px;
    margin-left: -328px;
    padding: 5px 22px;

    text-decoration: none;

    color: #000;
    background-color: #fff;
}

.data p
{
    position: absolute;
    top: 50%;
    left: 50%;

    margin-top: 80px;
    margin-left: -42px;
}

.shining0_1
{
    width: 5px;
    height: 5px;
    margin-top: 190px;
    margin-left: -103px;

    border-radius: 2px;
    box-shadow: 0 0 10px 2px #ff4700;
}

.shining0_2
{
    width: 5px;
    height: 5px;
    margin-top: -200px;
    margin-left: -237px;

    border-radius: 2px;
    box-shadow: 0 0 10px 2px #ff4700;
}

.shining0_3
{
    width: 3px;
    height: 3px;
    margin-top: -231px;
    margin-left: -260px;

    border-radius: 1px;
    box-shadow: 0 0 10px 2px #e05614;
}

.shining0_4
{
    width: 5px;
    height: 5px;
    margin-top: -241px;
    margin-left: -225px;

    border-radius: 2px;
    box-shadow: 0 0 10px 2px #ff4700;
}

.shining0_5
{
    width: 5px;
    height: 5px;
    margin-top: -285px;
    margin-left: -141px;

    border-radius: 2px;
    box-shadow: 0 0 10px 2px #ff4700;
}

.shining1_1
{
    width: 5px;
    height: 5px;
    margin-top: -228px;
    margin-left: -160px;

    border-radius: 2px;
    box-shadow: 0 0 10px 2px #ff4700;
}

.shining1_2
{
    width: 6px;
    height: 6px;
    margin-top: -113px;
    margin-left: -16px;

    border-radius: 3px;
    box-shadow: 0 0 10px 2px #ff4700;
}

.shining1_3
{
    width: 8px;
    height: 8px;
    margin-top: -45px;
    margin-left: -112px;

    border-radius: 4px;
    box-shadow: 0 0 10px 2px #ff4700;
}

.shining1_4
{
    width: 7px;
    height: 7px;
    margin-top: 1px;
    margin-left: -163px;

    border-radius: 3px;
    box-shadow: 0 0 10px 2px #ff4700;
}

.shining1_5
{
    width: 5px;
    height: 5px;
    margin-top: 162px;
    margin-left: -138px;

    border-radius: 3px;
    box-shadow: 0 0 10px 2px #ff4700;
}

.shining1_6
{
    width: 5px;
    height: 5px;
    margin-top: 180px;
    margin-left: -171px;

    border-radius: 2px;
    box-shadow: 0 0 10px 2px #ff4700;
}

.shining1_7
{
    width: 8px;
    height: 8px;
    margin-top: 6px;
    margin-left: 111px;

    border-radius: 4px;
    box-shadow: 0 0 10px 2px #e05614;
}

.shining2_1
{
    width: 4px;
    height: 4px;
    margin-top: 42px;
    margin-left: 187px;

    border-radius: 2px;
    box-shadow: 0 0 10px 2px #ff4700;
}

.shining2_2
{
    width: 4px;
    height: 4px;
    margin-top: 49px;
    margin-left: 195px;

    border-radius: 2px;
    box-shadow: 0 0 10px 2px #ff4700;
}

.shining2_3
{
    width: 4px;
    height: 4px;
    margin-top: 54px;
    margin-left: 186px;

    border-radius: 2px;
    box-shadow: 0 0 10px 2px #ff4700;
}

.shining2_4
{
    width: 5px;
    height: 5px;
    margin-top: -172px;
    margin-left: 326px;

    border-radius: 2px;
    box-shadow: 0 0 10px 2px #ff4700;
}

.shining2_5
{
    width: 5px;
    height: 5px;
    margin-top: -168px;
    margin-left: 355px;

    border-radius: 2px;
    box-shadow: 0 0 10px 2px #ff4700;
}

.shining2_6
{
    width: 5px;
    height: 5px;
    margin-top: -207px;
    margin-left: 370px;

    border-radius: 2px;
    box-shadow: 0 0 10px 2px #ff4700;
}

.shining2_10
{
    width: 8px;
    height: 8px;
    margin-top: 12px;
    margin-left: 77px;

    border-radius: 4px;
    box-shadow: 0 0 10px 2px #32d6ff;
}

.shining2_11
{
    width: 9px;
    height: 9px;
    margin-top: -148px;
    margin-left: -187px;

    border-radius: 4px;
    box-shadow: 0 0 10px 2px #32d6ff;
}

.shining2_12
{
    width: 9px;
    height: 9px;
    margin-top: -149px;
    margin-left: -61px;

    border-radius: 4px;
    box-shadow: 0 0 10px 2px #32d6ff;
}

.shining2_13
{
    width: 5px;
    height: 5px;
    margin-top: 92px;
    margin-left: -187px;

    border-radius: 2px;
    box-shadow: 0 0 10px 2px #32d6ff;
}

.shining2_14
{
    width: 9px;
    height: 9px;
    margin-top: 97px;
    margin-left: -163px;

    border-radius: 4px;
    box-shadow: 0 0 10px 2px #32d6ff;
}

.shining2_15
{
    width: 9px;
    height: 9px;
    margin-top: 80px;
    margin-left: -88px;

    border-radius: 4px;
    box-shadow: 0 0 10px 2px #32d6ff;
}

.shining2_16
{
    width: 3px;
    height: 3px;
    margin-top: 41px;
    margin-left: 352px;

    border-radius: 1px;
    box-shadow: 0 0 10px 2px #32d6ff;
}

.shining2_17
{
    width: 10px;
    height: 10px;
    margin-top: 200px;
    margin-left: -145px;

    border-radius: 5px;
    box-shadow: 0 0 10px 2px #32d6ff;
}

.shining2_18
{
    width: 6px;
    height: 6px;
    margin-top: -43px;
    margin-left: 53px;

    border-radius: 3px;
    box-shadow: 0 0 10px 2px #32d6ff;
}

.shining3_1
{
    width: 10px;
    height: 10px;
    margin-top: -83px;
    margin-left: 216px;

    border-radius: 5px;
    box-shadow: 0 0 10px 2px #32d6ff;
}

.shining3_2
{
    width: 6px;
    height: 6px;
    margin-top: -33px;
    margin-left: 325px;

    border-radius: 3px;
    box-shadow: 0 0 10px 2px #32d6ff;
}
.stage
{
    background-color: #ab0d02;
    background-image: url('../images/guide/stage_bg.jpg');
    background-repeat: no-repeat;
    background-position: center;
}

.stage h3
{
    clear: both;

    height: 54px;
}

.stage span
{
    float: left;
}

.stage a
{
    float: left;

    margin: 6px 0 0 10px;
    padding: 10px 20px;

    text-decoration: none;

    color: #000;
    background-color: #fff;
}

.stage div
{
    position: absolute;
}

.stageImage_1
{
    top: 50%;
    left: 130px;

    margin-top: -260px;
}

.stageImage_2
{
    top: 50%;
    right: 303px;

    margin-top: -100px;
}

.stage_1
{
    top: 50%;
    right: 281px;

    width: 470px;
    margin-top: -266px;
}

.stage_2
{
    top: 50%;
    left: 138px;

    width: 420px;
    margin-top: 100px;
}

.font_16px
{
    font: 16px/1.5 'Microsoft YaHei';
}

.font_46px
{
    font: 49px/1.2 'Microsoft YaHei';
    font-weight: bold;
}

#wechatContain
{
    width: 100%;
    height: 100%;

    background-color: #fff;
}

#wechatContain .text
{
    font: 48px/1.2 'Microsoft YaHei';

    position: absolute;
    top: 50%;

    width: 240px;
    margin-top: -62px;

    color: #000;
}

#wechatContain .text_1
{
    left: 50%;

    margin-left: -500px;
}

#wechatContain .text_1 span
{
    color: #aa0d01;
}

#wechatContain .text_2
{
    right: 50%;

    margin-right: -500px;
}

#wechatBox
{
    position: absolute;
    top: 50%;
    left: 50%;

    width: 498px;
    height: 495px;
    margin: -247px 0 0 -249px;

    background-image: url('../images/guide/html5.png');
}

#bullet01
{
    position: absolute;
    bottom: 43px;
    left: 135px;

    width: 2px;
    height: 8px;

    background-color: #72302a;
}

#bullet02
{
    position: absolute;
    bottom: 43px;
    left: 135px;

    width: 2px;
    height: 8px;

    background-color: #72302a;
}

#tank01
{
    position: absolute;
    bottom: 131px;
    left: 25px;

    overflow: hidden;

    width: 113px;
    height: 13px;
}

#tank02
{
    position: absolute;
    bottom: 113px;
    left: 160px;

    overflow: hidden;

    width: 96px;
    height: 13px;
}

#tank03
{
    position: absolute;
    bottom: 181px;
    left: 126px;

    overflow: hidden;

    width: 133px;
    height: 13px;
}

.tank
{
    position: absolute;
    right: 0;

    width: 18px;
    height: 13px;

    background-image: url('../images/guide/tank.png');
    background-position: 0 -13px;
}

#tank03 .tank
{
    left: 0;

    background-image: url('../images/guide/tank.png');
    background-position: 0 0;
}

.tankBullet
{
    position: absolute;
    top: 6px;

    width: 2px;
    height: 2px;

    background-color: #aa0d01;
}

.tankLeft
{
    left: 0;
}

.tankRight
{
    left: 16px;
}

#bug
{
    position: absolute;
    z-index: 11;
    top: 0;
    right: 0;

    width: 11px;
    height: 11px;

    background-image: url('../images/guide/eating.png');
    background-repeat: no-repeat;
    background-position: 0 0;
}

#bug img
{
    float: left;
}

.eating
{
    position: absolute;

    width: 11px;
    height: 11px;

    background-color: #fff;
}

#eating01
{
    top: 133px;
    left: 329px;
}

#eating02
{
    top: 0;
    right: 0;
}

#eating03
{
    right: 0;
    bottom: 0;
}

#eating04
{
    top: 0;
    left: 0;
}

#eating05
{
    right: 0;
    bottom: 0;
}

#eating06
{
    bottom: 0;
    left: 0;
}

#eating07
{
    top: 0;
    right: 0;
}

#eating08
{
    bottom: 0;
    left: 0;
}

#eating09
{
    top: 0;
    left: 0;
}

#eating10
{
    right: 0;
    bottom: 0;
}

#ghost
{
    position: absolute;
    top: 60px;
    right: 57px;

    width: 34px;
    height: 37px;

    background-image: url('../images/guide/ghost.png');
}

#mario
{
    position: absolute;
    right: 163px;
    bottom: 30px;

    width: 49px;
    height: 72px;

    background-image: url('../images/guide/mario.png');
}

.net
{
    background-color: #aa0d01;
}

.net div
{
    position: absolute;
}

.net_contain
{
    top: 50%;
    left: 50%;

    width: 665px;
    height: 550px;
    margin-top: -275px;
    margin-left: -332px;
}

.pc
{
    top: 0;
    left: 117px;

    width: 488px;
    height: 441px;

    background-image: url('../images/guide/pc.png');
}
.pad
{
    z-index: 10;
    top: 174px;
    left: 0;

    width: 212px;
    height: 228px;

    background-image: url('../images/guide/pad.png');
}
.Phone
{
    z-index: 10;
    top: 227px;
    right: 10px;

    width: 77px;
    height: 184px;

    background-image: url('../images/guide/phone.png');
}

.PhoneScreen
{
    top: 19px;
    left: 4px;

    overflow: hidden;

    width: 70px;
    height: 125px;
}

#PhoneImage
{
    top: 0;

    width: 70px;
    height: 375px;

    background-image: url('../images/guide/phoneImage.png');
}

.padScreen
{
    top: 20px;
    left: 40px;

    overflow: hidden;

    width: 136px;
    height: 179px;
}

#padImage
{
    top: 0;

    width: 136px;
    height: 540px;

    background-image: url('../images/guide/padImage.png');
}

.pcScreen
{
    top: 20px;
    left: 20px;

    overflow: hidden;

    width: 447px;
    height: 251px;
}

#pcImage
{
    top: 0;

    width: 447px;
    height: 753px;

    background-image: url('../images/guide/pcImage.png');
}

.txtScreen
{
    position: absolute;
    bottom: 15px;
    left: 110px;

    overflow: hidden;

    width: 490px;
    height: 100px;
}

#netTxt
{
    position: relative;
    top: 0;

    width: 100%;
    height: 300px;

    list-style: none;
}

#netTxt li
{
    float: none;

    width: 100%;
    height: 100px;

    background-color: #aa0d01;
}

#netTxt li h4
{
    font: 46px/1 'Microsoft YaHei';

    clear: both;

    height: 54px;
    margin: 0;
}

#netTxt span
{
    float: left;
}

#netTxt a
{
    display: inline-block;
    float: left;

    margin: 6px 0 0 10px;
    padding: 10px 20px;

    text-decoration: none;

    color: #000;
    background-color: #fff;
}

.netControllerBox
{
    position: absolute;
    right: 5px;
    bottom: 58px;

    width: 10px;
    height: 52px;

    background-color: #000;
}

#netControllerBg
{
    position: absolute;
    top: 8px;

    width: 10px;
    height: 16px;

    background-image: url('../images/guide/netControllerBg.png');
}

#netController
{
    position: absolute;
    top: 0;

    width: 10px;
    height: 52px;

    list-style: none;
}

#netController li
{
    width: 10px;
    height: 26px;

    cursor: pointer;

    background-image: url('../images/guide/netController.png');
}

#arrow
{
    top: 50%;

    width: 50px;
    height: 99px;
    margin-top: -51px;

    cursor: pointer;

    background-image: url('../images/guide/arrow.png');
    background-position: 0 0;
}

.arrow_fixed
{
    position: fixed;
    right: 50px;
}

.arrow_absolute
{
    position: absolute;
    right: 50px;
}


/* -----------media ---------------*/
@media (max-width: 1400px) and (max-height:700px)
{
    .net .net_contain
    {
        transform: scale(.8);
        -webkit-transform: scale(.8);
        -moz-transform: scale(.8);
        -o-transform: scale(.8);
    }
}
@media (max-width: 1100px)
{
    #wechatContain .text_2
    {
        font-size: 24px;

        width: auto;
        margin-right: -450px;
    }
    #wechatContain .text_1
    {
        font-size: 24px;
        width: auto;
        margin-left: -450px;
    }
}
@media (max-width: 700px)
{
    .data a
    {
        margin-left: -228px;
    }

    #wechatBox
    {
        transform: scale(.8) translate(0,-20px);
        -webkit-transform: scale(.8) translate(0,-20px);
        -moz-transform: scale(.8) translate(0,-20px);
        -o-transform: scale(.8) translate(0,-20px);
    }
    #wechatContain .text_2
    {
        top: 100%;

        margin-right: 0;

        transform: translate(50%,0);
        -webkit-transform: translate(50%,0);
        -moz-transform: translate(50%,0);
        -o-transform: translate(50%,0);
        /* position: relative; */
        text-align: center;
    }
    #wechatContain .text_1
    {
        top: 90px;

        margin-left: 0;

        transform: translate(-50%,0);
        -webkit-transform: translate(-50%,0);
        -moz-transform: translate(-50%,0);
        -o-transform: translate(-50%,0);
        text-align: center;
    }

    .net .net_contain
    {
        transform: scale(.8);
        -webkit-transform: scale(.8);
        -moz-transform: scale(.8);
        -o-transform: scale(.8);
    }
}

@media (max-width: 600px)
{
    .net .net_contain
    {
        transform: scale(.7);
        -webkit-transform: scale(.7);
        -moz-transform: scale(.7);
        -o-transform: scale(.7);
    }
}
@media (max-width: 500px)
{
    .data a
    {
        margin-left: -158px;
    }
    #wechatBox
    {
        transform: scale(.7) translate(0,-20px);
        -webkit-transform: scale(.7) translate(0,-20px);
        -moz-transform: scale(.7) translate(0,-20px);
        -o-transform: scale(.7) translate(0,-20px);
    }
    #wechatContain .text_2
    {
        font-size: 16px;
    }
    #wechatContain .text_1
    {
        font-size: 20px;
    }
    .net .net_contain
    {
        transform: scale(.6);
        -webkit-transform: scale(.6);
        -moz-transform: scale(.6);
        -o-transform: scale(.6);
    }
}
@media (max-width: 400px)
{
    #wechatBox
    {
        transform: scale(.6) translate(0,0);
        -webkit-transform: scale(.6) translate(0,0);
        -moz-transform: scale(.6) translate(0,0);
        -o-transform: scale(.6) translate(0,0);
    }
    #wechatContain .text_2
    {
    }
    .net .net_contain
    {
        transform: scale(.45);
        -webkit-transform: scale(.45);
        -moz-transform: scale(.45);
        -o-transform: scale(.45);
    }
    #wechatContain .text_1
    {
        top: 98px;
    }
}