@charset "UTF-8";

$yahei: "Microsoft YaHei", SimHei, sans-serif;
$maincolor : #ffc600;
$hovercolor : #f5ae03;
$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/lego";

@import "base/header";
@import "base/mixins";
@import "base/base";

html {
    font-size: 12px;
    overflow: hidden;
    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;
    height: 100%;
}
body {
    font-family: $titleFont;
    height: 100%;
    overflow: hidden;
    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;
    }
}

.g-inner{
    width: 1100px;
    margin: 0 auto;
    a{
        outline: none;
    }
}
.mod-header{
    position: relative;
    z-index: 2;
    padding: 15px 0;
    line-height: 52px;
    height: 52px;
    &.is-active{
        background: #FFF;
        .dw-logo{
            background: url(../img/logo2.png) no-repeat;
        }
        .dw-nav{
            a{
                color: #333;
            }
        }
        .icon-music{
            background: url(../img/icon-close2.png?__sprite) no-repeat;
            &.is-closed{
                background: url(../img/icon-open2.png?__sprite) no-repeat;
            }
        }
    }
    .dw-logo{
        float: left;
        width: 183px;
        height: 52px;
        background: url(../img/logo1.png) no-repeat;
    }
    .dw-nav{
        float: right;
        li{
            float: left;
            margin-left: 26px;
        }
        a{
            color: #FFF;
            &.active{
                text-decoration: underline;
            }
        }
    }
    .item-music{
        padding-top: 18px;
    }
    .icon-music{
        display: block;
        width: 36px;
        height: 16px;
        cursor: pointer;
        background: url(../img/icon-close.png?__sprite) no-repeat;
        &.is-closed{
            background: url(../img/icon-open.png?__sprite) no-repeat;
        }
    }
}

.mod-video{
    position: absolute;
    width: 1920px;
    height: 990px;
    top: 50%;
    left: 50%;
    margin-left: -960px;
    margin-top: -495px;
    z-index: 1;
    overflow: hidden;
    background: url(../img/bg-primary.jpg) center top;
    .logo-wrap{
        width: 100%;
        height: 100%;
        background: url(../img/logo3.png) center center no-repeat;
        display: none;
    }
    video{
        position: absolute;
        z-index: 1;
        top: 0;
        left: 50%;
        -webkit-transform: translateX(-50%);
        transform: translateX(-50%);
        height: 100%;
    }
}
.mod-primary{
    position: relative;
    z-index: 1;
    overflow: hidden;
    transition: all .4s;
    height: 100%;
    video{
        position: absolute;
        z-index: 1;
        top: 0;
        left: 50%;
        height: 100%;
    }
    .dw-title{
        position: relative;
        z-index: 2;
        height: 159px;
        background: url(../img/title.png)  center 0 no-repeat;
    }
    .dw-info{
        position: absolute;
        bottom: 20px;
        z-index: 2;
        width: 100%;
        text-align: center;
    }
    .btn-dl{
        display: block;
        width: 200px;
        height: 54px;
        line-height: 54px;
        margin: 0 auto;
        color: #FFF;
        font-size: 20px;
        background: #2393e8;
        background: rgba(35,147,232,0.6);
        border-radius: 50px;
        //background: url(../img/btn-dl.png?__sprite)  center no-repeat;
        outline: none;
        &:hover{
            @include opacity(0.8);
            text-decoration: none;
        }
    }
    .row-version{
        font-size: 12px;
        color: #d8efff;
        margin-top: 9px;
    }
    .row-scroll{
        font-size: 14px;
        color: #f6f6f6;
        margin: 40px 0 8px 0;
    }
    .icon-down{
        display: inline-block;
        width: 26px;
        height: 13px;
        background: url(../img/icon-down.png) no-repeat;
        -webkit-animation: flyUp 2s infinite ease-in-out;
                animation: flyUp 2s infinite ease-in-out;
    }
}
.mod-product{
    background: #FFF;
    position: relative;
    z-index: 2;
    height: 0;
    .banner-wrap{
        height: 270px;
        background: url(../img/bg-banner.jpg) center top;
    }
    .dw-title{
        position: relative;
        z-index: 2;
        height: 159px;
        padding-top: 8px;
        background: url(../img/title.png) center 8px no-repeat;
    }
    .g-inner{
        position: relative;
    }
    .btn-up{
        cursor: pointer;
        position: absolute;
        top: -14px;
        left: 50%;
        margin-left: -27px;
        width: 54px;
        height: 28px;
        background: url(../img/icon-up.png?__sprite) no-repeat;
    }
    .btn-dl{
        display: block;
        width: 171px;
        height: 46px;
        margin: 12px auto 0 auto;
        background: url(../img/btn-dl2.png?__sprite)  center no-repeat;
        outline: none;
        &:hover{
            @include opacity(0.8);
        }
    }
    .intro-wrap{
        float: left;
        width: 917px;
    }
    .intro-item{
        @include clearfix();
        display: none;
        -webkit-animation-duration: .6s;
                animation-duration: .6s;
        &.active{
            display: block;
        }
    }
    .item-pic{
        float: right;
        width: 630px;
        text-align: center;
        &.item-pic1{
            padding-top: 90px;
        }
        &.item-pic2{
            padding-top: 60px;
        }
        &.item-pic3{
            padding-top: 40px;
        }
        &.item-pic4{
            padding-top: 70px;
        }
    }
    .item-cont{
        float: left;
        margin-top: 180px;
        width: 239px;
        height: 136px;
        // h2{
        //     color: #2d597f;
        //     font-size: 48px;
        //     line-height: 80px;
        //     font-weight: normal;
        //     border-bottom: 1px solid #c7d4db;
        //     margin-bottom: 8px;
        // }
        // p{
        //     color: #5f7e9a;
        //     font-size: 24px;
        //     line-height: 36px;
        // }
        &.item-cont1{
            background: url(../img/text1.png?__sprite) no-repeat;
        }
        &.item-cont2{
            background: url(../img/text2.png?__sprite) no-repeat;
        }
        &.item-cont3{
            background: url(../img/text3.png?__sprite) no-repeat;
        }
        &.item-cont4{
            background: url(../img/text4.png?__sprite) no-repeat;
        }
    }
    .nav-wrap{
        float: right;
        color: #333;
        font-size: 12px;
        position: relative;
        margin-top: 180px;
    }
    .list-nav{
        position: relative;
        z-index: 2;
    }
    .nav-item{
        position: relative;
        padding-right: 24px;
        line-height: 15px;
        margin-bottom: 30px;
        cursor: pointer;
        &.active{
            color: #00a9ff;
            i{
                background: url(../img/icon-point2.png) no-repeat;
            }
        }
        i{
            position: absolute;
            top: 0;
            right: 0;
            display: block;
            width: 15px;
            height: 15px;
            background: url(../img/icon-point.png) 0 1px no-repeat;
        }
    }
    .line-nav{
        position: absolute;
        z-index: 1;
        top: 0;
        right: 7px;
        height: 150px;
        width: 1px;
        background: #eeeeee;
    }
}

//-------------animate------------------------
@-webkit-keyframes fadeInUp {
  from {
    opacity: 0.4;
    -webkit-transform: translate3d(0, 20px, 0);
    transform: translate3d(0, 20px, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}

@keyframes fadeInUp {
  from {
    opacity: 0.4;
    -webkit-transform: translate3d(0, 20px, 0);
    transform: translate3d(0, 20px, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}

.fadeInUp {
  -webkit-animation-name: fadeInUp;
  animation-name: fadeInUp;
}

@-webkit-keyframes flyUp{
  50%{
      -webkit-transform:translateY(10px);
      transform:translateY(10px);
      opacity: 0.6;
  }
}

@keyframes flyUp{
  50%{
      -webkit-transform:translateY(10px);
      transform:translateY(10px);
      opacity: 0.6;
  }
}

.flyUp{
  -webkit-animation-name: flyUp;
  animation-name: flyUp;
}