@charset "UTF-8";
$yahei: "Microsoft YaHei",
SimHei,
sans-serif;
$maincolor: #e94646;
$titleFont: PingFang sc,"Helvetica Neue",Helvetica,Tahoma,Arial,"Liberation Sans","Hiragino Sans GB","Source Han Sans CN","Source Han Sans SC","Microsoft YaHei","Wenquanyi Micro Hei","WenQuanYi Zen Hei","ST Heiti",SimHei,"WenQuanYi Zen Hei Sharp",sans-serif;
@import "lego/base";
@import "base/mixins";
@import "base/ui-dialog";

html {
    font-size: 12px;
    height: 100%; // overflow-y: scroll;
    font: 12px/1.5 PingFang sc, "Helvetica Neue", Helvetica, Tahoma, Arial, SimSun, TW-Sung, "WenQuanYi Bitmap Song", "AR PL UMing CN", "AR PL UMing HK", "AR PL UMing TW", "AR PL UMing TW MBE", serif; // font-family: $yahei;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
}

body {
    min-width: 1040px;
    height: 100%; //background: #F8F8F8;
    font-family: "yahei";
    a {
        text-decoration: none;
        &:hover {
            text-decoration: underline;
        }
    }
    p,
    a,
    span,
    em,
    i,
    h1,
    h2,
    h3,
    h4,
    h5,
    h6 {
        text-rendering: optimizeLegibility;
        -webkit-font-smoothing: antialiased;
    }
}


.zt-mod1{
    padding: 120px 0 30px 0;
    background:url(/src/img/bg1.jpg) center 0 no-repeat;
    .btn-dl{
        font-size: 0;
        color: transparent;
        display: block;
        cursor: pointer;
        margin: 0 0 18px 700px;
        width: 259px;
        height: 80px;
        background: url(/src/img/btn-dl.png?__sprite) no-repeat;
        &:hover{
            background: url(/src/img/btn-dl_hover.png?__sprite) no-repeat;
        }
    }
    .phone-wrap{
        margin: 0 auto;
        width: 1136px;
        height: 626px;
        padding-top: 24px;
        background: url(/src/img/bg-phone.png) no-repeat;
    }
    .game-wrap{
        margin-left: 129px;
        width: 886px;
        height: 498px;
        border: 1px solid #ccc;
    }
    .tip-wrap{
        @include clearfix();
        width: 1136px;
        margin: 0 auto;
        p{
            position: relative;
            width: 360px;
            height: 40px;
            margin: 0 auto 35px auto;
            background: url(/src/img/tip-try.png?__sprite) center bottom no-repeat;
        }
    }
    .icon-arrow{
        position: absolute;
        left: 50%;
        bottom: -24px;
        margin-left: -18px;
        width: 36px;
        height: 18px;
        background: url(/src/img/icon-arrow.png) center bottom no-repeat;
        -webkit-animation: fadeIn 1.2s 0s ease infinite;
                animation: fadeIn 1.2s 0s ease infinite;
    }
}

.zt-mod2{
    padding: 50px 0 60px 0;
    background:url(/src/img/bg2.jpg) center 0 no-repeat;
    h2{
        font-weight: normal;
        text-align: center;
        font-size: 35px;
        line-height: 59px;
        color: transparent;
        background: url(/src/img/bg-title2.png) center bottom no-repeat;
    }
    p{
        margin: 40px auto 20px auto;
        width: 900px;
        line-height: 26px;
        font-size: 14px;
        color: #333333;
    }
    .video-wrap,.player{
        position: relative;
        margin: 0 auto 0 auto;
        width: 888px;
        height: 500px;
        background: #000000;
        border: 6px solid #242424;
    }  
    .player{
        display: none;
        position: relative;
    }
    .mask{
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }
    .icon-play{
        position: absolute;
        top: 50%;
        left: 50%;
        width: 111px;
        height: 128px;
        margin: -64px 0 0 -55px;
        background: url(/src/img/icon-play.png?__sprite) no-repeat;
    }
}

.zt-mod3{
    padding: 50px 0 80px 0;
    background:url(/src/img/bg3.jpg) center 0 no-repeat #2d2d2d;
    h2{
        font-weight: normal;
        text-align: center;
        font-size: 0px;
        line-height: 59px;
        color: transparent;
        background: url(/src/img/bg-title3.png) center bottom no-repeat;
    }
}

.zt-sidebar{
    position: fixed;
    right: 20px;
    bottom: 50px;
    z-index: 100;
    .side-btn{
        display: block;
        text-align: center;
        color: #fffefe;
        font-size: 18px;
        background: #ff477d;
        line-height: 40px;
        border-radius: 20px;
        border: 3px solid #fffefe;
        margin-bottom: 40px;
        outline: none;
        &:hover{
            text-decoration: none;
            background: #fb5f8d;
        }
    }
    .side-qcode{
        position: relative;
    }
    h2{
        position: absolute;
        left: 50%;
        top: -6px;
        z-index: 2;
        font-size: 0;
        color: transparent;
        width: 170px;
        height: 30px;
        margin-left: -85px;
        background: url(/src/img/bg-code-title.png) no-repeat;
    }
    .qrcode-wrap{
        padding: 30px 8px 8px 8px;
        background: #FFFFFF;
        width: 150px;
        height: 150px;
        img{
            display: block;
            width: 150px;
            overflow: hidden;
        }
    }
}

.popup-dl{
    .box-dl{
        display: none;
    }
}
.box-dl{
    background: #FFFFFF;
    @include clearfix;
    padding-top: 20px;
    position: relative;
    .btn-close{
        position: absolute;
        top: -6px;
        right: -20px;
        width: 12px;
        height: 12px;
        background: url(/src/img/icon-close.png?__sprite) no-repeat;
        &:hover{
            background: url(/src/img/icon-close_hover.png?__sprite) no-repeat;
        }
    }
    .box-fl{
        float: left;
        text-align: center;
        line-height: 30px;
        color: #828282;
        font-size: 12px;
        margin-right: 10px;
    }
    .box-fr{
        float: left;
    }
    .qrcode-wrap{
        width: 153px;
        height: 153px;
        background: #cbcbcb;
    }
    img{
        width: 100%;
        height: 100%;
        display: block;
        overflow: hidden;
    }
    .btn{
        display: block;
        width: 192px;
        height: 44px;
        line-height: 44px;
        text-align: center;
        color: #ffffff;
        font-size: 16px;
        margin: 24px 0;
        &:hover{
            text-decoration: none;
            @include opacity(0.8);
        }
    }
    .btn-android{
        background: #5ebb59;
    }
    .btn-ios{
        background: #5799fc;
    }
    .btn-pc{
        background: #ff9c00;
    }
}

$img-width: 886px; // 图片宽度
$img-height: 500px; // 图片高度

.g-ui-slide {
    position: relative;
    width: $img-width;
    margin: 60px auto 0 auto;
}
.g-ui-slide__scroll{
    height: $img-height;
    overflow: hidden;
}
.g-ui-slide__content {
    position: relative;
    height: 100%;
    overflow: hidden;
}
.g-ui-slide__panel {
    position: relative;
    width: $img-width;
    height: $img-height;
    overflow: hidden;
    background: #000;
    a {
        display: block;
        height: 100%;
        position: relative;
    }
    img{
        display: block;
        height: 100%;
        overflow: hidden; 
        margin: 0 auto;
    }
}
.g-ui-slide__nav{
    @include clearfix();
    margin: 12px -9px 0 0;
    li{
        float: left;
        width: 170px;
        height: 95px;
        margin-right: 9px;
        position: relative;
        &.is-active{
            z-index: 2;
            &:before{
                top: -6px;
                left: -6px;
                border: 6px solid #f7c54b;
                background: transparent;
                @include opacity(1);
            }
        }
        &:before{
            content: '';
            position: absolute;
            width: 100%;
            height: 100%;
            border-radius: 2px;
            background: #000000;
            @include opacity(0.3);
        }
    }
    .cover{
        width: 100%;
        height: 100%;
        overflow: hidden;
    }
    img{
        display: block;
        width: 100%;
        overflow: hidden;
    }
}
.g-ui-slide__prev,.g-ui-slide__next {
    margin: 0;
    padding: 0;
    position: absolute;
    top: 200px;
    width: 66px;
    height: 106px;
    border: 0;
    outline: 0;
    line-height: 100px;
    text-align: center;
    cursor: pointer;
    @include opacity(0.6);
    &:hover{
        @include opacity(1);
    }
}
.g-ui-slide__prev {
    left: -120px;
    background: url(/src/img/icon-prev.png?__sprite) no-repeat;
}
.g-ui-slide__next {
    right: -120px;
    background: url(/src/img/icon-next.png?__sprite) no-repeat;
}

@keyframes fadeIn{
    from{
        opacity: 0.5;
        transform: translate(0,-1px)
    }
    to{
        opacity: 1;
        transform: translate(0,3px)
    }
}

@-webkit-keyframes fadeIn{
    from{
        opacity: 0.5;
        transform: translate(0,-1px)
    }
    to{
        opacity: 1;
        transform: translate(0,3px)
    }
}