/* slide */
.slide-main { height: 570px; position: relative; }
.prev, .next { display: block; width: 55px; height: 66px; position: absolute; z-index: 222; top: 252px; overflow: hidden; cursor: pointer; opacity: 0.6; -moz-opacity: 0.6; filter: alpha(opacity=60); _border: 1px solid none; }
.prev { left: 50px; }
.next { right: 50px; }
    .prev:hover, .next:hover, .nav-main a:hover, .nav-main a.cur { opacity: 1; -moz-opacity: 1; filter: alpha(opacity=100); }
.item { display: block; width: 100%; height: 18px; position: absolute; z-index: 124; top: 520px; left: 0; text-align: center; }
    .item a { display: inline-block; width: 18px; height: 18px; margin-right: 10px; opacity: 0.9; -moz-opacity: 0.9; filter: alpha(opacity=90); overflow: hidden; background: url(../images/dian.png) -18px 0 no-repeat; }
        .item a.cur { background: url(../images/dian.png) 0px 0 no-repeat; }
.slide-box, .slide { display: block; width: 100%; height: 570px; overflow: hidden; }
.slide-box { position: relative; }
.slide { display: none; height: 570px; position: relative; position: absolute; z-index: 8; text-align: center; background: #333; }
    .slide img { height: 570px; min-width: 100%; }
    .slide h1 { width: 100%; height: 30px; line-height: 30px; bottom: 0; position: absolute; font-size: 16px; font-weight: normal; color: #fff; text-align: right; background-color: rgba(0,0,0,0.5); }
        .slide h1 span { padding-right: 15px }
    .slide a { display: block; width: 100%; height: 570px; cursor: pointer; background-position: center center !important; background-repeat: no-repeat !important; background-size: auto 100% !important; }

@-webkit-keyframes baoAni {
    from { opacity: 0; left: 60%; }
    to { opacity: 1; left: 50%; }
}

@-moz-keyframes baoAni {
    from { opacity: 0; left: 60%; }
    to { opacity: 1; left: 50%; }
}

@keyframes baoAni {
    from { opacity: 0; left: 60%; }
    to { opacity: 1; left: 50%; }
}

@-webkit-keyframes saAni {
    from { opacity: 0; -webkit-transform: scale(0, 0); }
    to { opacity: 1; -webkit-transform: scale(1, 1); }
}

@-moz-keyframes saAni {
    from { opacity: 0; -moz-transform: scale(0, 0); }
    to { opacity: 1; -moz-transform: scale(1, 1); }
}

@keyframes saAni {
    from { opacity: 0; transform: scale(0, 0); }
    to { opacity: 1; transform: scale(1, 1); }
}

.watch-code.code-show { display: block; animation-name: scode; -webkit-animation: scode 0.3s linear 0s normal none; -moz-animation: scode 0.3s linear 0s normal none; animation: scode 0.3s linear 0s normal none; }

@-webkit-keyframes scode {
    from { opacity: 0; -webkit-transform: scale(1, 0); transform-origin: left bottom; }
    to { opacity: 1; -webkit-transform: scale(1, 1); transform-origin: left bottom; }
}

@-moz-keyframes scode {
    from { opacity: 0; -moz-transform: scale(1, 0); transform-origin: left bottom; }
    to { opacity: 1; -moz-transform: scale(1, 1); transform-origin: bottom bottom; }
}

@keyframes scode {
    from { opacity: 0; transform: scale(1, 0); transform-origin: left bottom; }
    to { opacity: 1; transform: scale(1, 1); transform-origin: left bottom; }
}

@-webkit-keyframes saAnic {
    from { opacity: 0; left: 47%; }
    to { opacity: 1; left: 50%; }
}

@-moz-keyframes saAnic {
    from { opacity: 0; left: 47%; }
    to { opacity: 1; left: 50%; }
}

@keyframes saAnic {
    from { opacity: 0; left: 47%; }
    to { opacity: 1; left: 50%; }
}

@-webkit-keyframes saAnid {
    from { opacity: 0; left: 53%; }
    to { opacity: 1; left: 50%; }
}

@-moz-keyframes saAnid {
    from { opacity: 0; left: 53%; }
    to { opacity: 1; left: 50%; }
}

@keyframes saAnid {
    from { opacity: 0; left: 53%; }
    to { opacity: 1; left: 50%; }
}