Merge branch '2018zt' of http://svn.ouj.com:3000/FED/dwweb-pc into 2018zt

2017专区/PC单机/src/_artical2.html

@@ -156,161 +156,342 @@
                             </ul>
                         </div>
                     </div>
-                    <div class="g-ui-tab zq-col-740" data-role="tab-comlist">
+                    <div class="g-ui-tab zq-col-740 wide-screen">
                         <div class="g-tab__hd">
-                            <h2>视频<span>推荐</span></h2>
-                            <ul class="g-tab__nav" data-switchable-role="nav">
-                                <li class="is-active"><a href="#">最新视频</a></li>
-                                <li><a href="#">流程视频</a></li>
-                                <li><a href="#">搞笑视频</a></li>
-                            </ul>
+                            <h2>云玩<span>游戏</span></h2>
+                            <p class="subtitle">专注游戏剧情攻略 给你电影般的游戏体验</p>
                             <div class="g-tab__ext">
-                                <a href="#">更多</a>
+                                <a href="#">更多攻略视频</a>
                             </div>
                         </div>
-                        <div class="g-tab__bd mt-25" data-switchable-role="content">
-                            <div class="g-tab-pannel" data-more="#1">
-                                <ul class="zq-video-list ext-list-166">
-                                    <li class="zq-video-item">
-                                        <a href="#" target="_blank">
-                                            <span class="item-pic">
-                                                <img src="http://fed.webdev.ouj.com/146x82" alt="">
-                                                <i class="icon-play"></i>
-                                            </span>
-                                            <span class="item-title">英雄联盟MV第一五期卡牌大师崔斯特</span>
-                                        </a>
-                                    </li>
-                                    <li class="zq-video-item">
-                                        <a href="#" target="_blank">
-                                            <span class="item-pic">
-                                                <img src="http://fed.webdev.ouj.com/146x82" alt="">
-                                                <i class="icon-play"></i>
-                                            </span>
-                                            <span class="item-title">英雄联盟MV第一五期卡牌大师崔斯特</span>
-                                        </a>
-                                    </li>
-                                    <li class="zq-video-item">
-                                        <a href="#" target="_blank">
-                                            <span class="item-pic">
-                                                <img src="http://fed.webdev.ouj.com/146x82" alt="">
-                                                <i class="icon-play"></i>
-                                            </span>
-                                            <span class="item-title">英雄联盟MV第一五期卡牌大师崔斯特</span>
-                                        </a>
-                                    </li>
-                                    <li class="zq-video-item">
-                                        <a href="#" target="_blank">
-                                            <span class="item-pic">
-                                                <img src="http://fed.webdev.ouj.com/146x82" alt="">
-                                                <i class="icon-play"></i>
-                                            </span>
-                                            <span class="item-title">英雄联盟MV第一五期卡牌大师崔斯特</span>
-                                        </a>
-                                    </li>
-                                    <li class="zq-video-item">
-                                        <a href="#" target="_blank">
-                                            <span class="item-pic">
-                                                <img src="http://fed.webdev.ouj.com/146x82" alt="">
-                                                <i class="icon-play"></i>
-                                            </span>
-                                            <span class="item-title">英雄联盟MV第一五期卡牌大师崔斯特</span>
-                                        </a>
-                                    </li>
-                                    <li class="zq-video-item">
-                                        <a href="#" target="_blank">
-                                            <span class="item-pic">
-                                                <img src="http://fed.webdev.ouj.com/146x82" alt="">
-                                                <i class="icon-play"></i>
-                                            </span>
-                                            <span class="item-title">英雄联盟MV第一五期卡牌大师崔斯特</span>
-                                        </a>
-                                    </li>
-                                    <li class="zq-video-item">
-                                        <a href="#" target="_blank">
-                                            <span class="item-pic">
-                                                <img src="http://fed.webdev.ouj.com/146x82" alt="">
-                                                <i class="icon-play"></i>
-                                            </span>
-                                            <span class="item-title">英雄联盟MV第一五期卡牌大师崔斯特</span>
-                                        </a>
-                                    </li>
-                                    <li class="zq-video-item">
-                                        <a href="#" target="_blank">
-                                            <span class="item-pic">
-                                                <img src="http://fed.webdev.ouj.com/146x82" alt="">
-                                                <i class="icon-play"></i>
-                                            </span>
-                                            <span class="item-title">英雄联盟MV第一五期卡牌大师崔斯特</span>
-                                        </a>
-                                    </li>
-                                </ul>  
+                        <div class="g-tab__bd clearfix">
+                            <div class="video-list clearfix mt-25">
+                                <div class="part-title">
+                                    <span>热门视频</span>
+                                </div>
+                                <div class="cloudplay-list">
+                                    <ul class="zq-cloudplay-list">
+                                        <li class="g-col-gItem item1">
+                                            <a href="//test-yun.duowan.com/up_610/77729.html" target="_blank">
+                                                <div class="gItem-pic">
+                                                    <img data-original="http://ojiastoreimage.bs2dl.huanjuyun.com/480x269/1534126230192_len25801.jpg" alt="【wantto玩徒】《质量效应：仙女座》中文剧情电影 - 第3集：冒险开始" src="http://ojiastoreimage.bs2dl.huanjuyun.com/480x269/1534126230192_len25801.jpg" style="display: block;">
+                                                    <div class="gItem-mask"></div>
+                                                    <span class="gItem-tag">质量效应：仙女座</span>
+                                                    <span class="gItem-vdIcon"></span>
+                                                    <span class="gItem-vdTime">29:55</span>
+                                                </div>
+                                                <h3 class="gItem-title" title="【wantto玩徒】《质量效应：仙女座》中文剧情电影 - 第3集：冒险开始">【wantto玩徒】《质量效应：仙女座》中文剧情电影 - 第3集：冒险开始</h3>
+                                                <div class="gItem-info">
+                                                    <span>wantto玩徒</span>
+                                                    <em>8</em>
+                                                </div>
+                                            </a>
+                                        </li>
+                                        <li class="g-col-gItem item2">
+                                            <a href="//test-yun.duowan.com/up_610/77729.html" target="_blank">
+                                                <div class="gItem-pic">
+                                                    <img data-original="http://ojiastoreimage.bs2dl.huanjuyun.com/480x269/1534126230192_len25801.jpg" alt="【wantto玩徒】《质量效应：仙女座》中文剧情电影 - 第3集：冒险开始" src="http://ojiastoreimage.bs2dl.huanjuyun.com/480x269/1534126230192_len25801.jpg" style="display: block;">
+                                                    <div class="gItem-mask"></div>
+                                                    <span class="gItem-tag">质量效应：仙女座</span>
+                                                    <span class="gItem-vdIcon"></span>
+                                                    <span class="gItem-vdTime">29:55</span>
+                                                </div>
+                                                <h3 class="gItem-title" title="【wantto玩徒】《质量效应：仙女座》中文剧情电影 - 第3集：冒险开始">【wantto玩徒】《质量效应：仙女座》中文剧情电影 - 第3集：冒险开始</h3>
+                                                <div class="gItem-info">
+                                                    <span>wantto玩徒</span>
+                                                    <em>8</em>
+                                                </div>
+                                            </a>
+                                        </li>
+                                        <li class="g-col-gItem item3">
+                                            <a href="//test-yun.duowan.com/up_610/77729.html" target="_blank">
+                                                <div class="gItem-pic">
+                                                    <img data-original="http://ojiastoreimage.bs2dl.huanjuyun.com/480x269/1534126230192_len25801.jpg" alt="【wantto玩徒】《质量效应：仙女座》中文剧情电影 - 第3集：冒险开始" src="http://ojiastoreimage.bs2dl.huanjuyun.com/480x269/1534126230192_len25801.jpg" style="display: block;">
+                                                    <div class="gItem-mask"></div>
+                                                    <span class="gItem-tag">质量效应：仙女座</span>
+                                                    <span class="gItem-vdIcon"></span>
+                                                    <span class="gItem-vdTime">29:55</span>
+                                                </div>
+                                                <h3 class="gItem-title" title="【wantto玩徒】《质量效应：仙女座》中文剧情电影 - 第3集：冒险开始">【wantto玩徒】《质量效应：仙女座》中文剧情电影 - 第3集：冒险开始</h3>
+                                                <div class="gItem-info">
+                                                    <span>wantto玩徒</span>
+                                                    <em>8</em>
+                                                </div>
+                                            </a>
+                                        </li>
+                                        <li class="g-col-gItem item4">
+                                            <a href="//test-yun.duowan.com/up_610/77729.html" target="_blank">
+                                                <div class="gItem-pic">
+                                                    <img data-original="http://ojiastoreimage.bs2dl.huanjuyun.com/480x269/1534126230192_len25801.jpg" alt="【wantto玩徒】《质量效应：仙女座》中文剧情电影 - 第3集：冒险开始" src="http://ojiastoreimage.bs2dl.huanjuyun.com/480x269/1534126230192_len25801.jpg" style="display: block;">
+                                                    <div class="gItem-mask"></div>
+                                                    <span class="gItem-tag">质量效应：仙女座</span>
+                                                    <span class="gItem-vdIcon"></span>
+                                                    <span class="gItem-vdTime">29:55</span>
+                                                </div>
+                                                <h3 class="gItem-title" title="【wantto玩徒】《质量效应：仙女座》中文剧情电影 - 第3集：冒险开始">【wantto玩徒】《质量效应：仙女座》中文剧情电影 - 第3集：冒险开始</h3>
+                                                <div class="gItem-info">
+                                                    <span>wantto玩徒</span>
+                                                    <em>8</em>
+                                                </div>
+                                            </a>
+                                        </li>
+                                        <li class="g-col-gItem item5">
+                                            <a href="//test-yun.duowan.com/up_610/77729.html" target="_blank">
+                                                <div class="gItem-pic">
+                                                    <img data-original="http://ojiastoreimage.bs2dl.huanjuyun.com/480x269/1534126230192_len25801.jpg" alt="【wantto玩徒】《质量效应：仙女座》中文剧情电影 - 第3集：冒险开始" src="http://ojiastoreimage.bs2dl.huanjuyun.com/480x269/1534126230192_len25801.jpg" style="display: block;">
+                                                    <div class="gItem-mask"></div>
+                                                    <span class="gItem-tag">质量效应：仙女座</span>
+                                                    <span class="gItem-vdIcon"></span>
+                                                    <span class="gItem-vdTime">29:55</span>
+                                                </div>
+                                                <h3 class="gItem-title" title="【wantto玩徒】《质量效应：仙女座》中文剧情电影 - 第3集：冒险开始">【wantto玩徒】《质量效应：仙女座》中文剧情电影 - 第3集：冒险开始</h3>
+                                                <div class="gItem-info">
+                                                    <span>wantto玩徒</span>
+                                                    <em>8</em>
+                                                </div>
+                                            </a>
+                                        </li>
+                                        <li class="g-col-gItem item6">
+                                            <a href="//test-yun.duowan.com/up_610/77729.html" target="_blank">
+                                                <div class="gItem-pic">
+                                                    <img data-original="http://ojiastoreimage.bs2dl.huanjuyun.com/480x269/1534126230192_len25801.jpg" alt="【wantto玩徒】《质量效应：仙女座》中文剧情电影 - 第3集：冒险开始" src="http://ojiastoreimage.bs2dl.huanjuyun.com/480x269/1534126230192_len25801.jpg" style="display: block;">
+                                                    <div class="gItem-mask"></div>
+                                                    <span class="gItem-tag">质量效应：仙女座</span>
+                                                    <span class="gItem-vdIcon"></span>
+                                                    <span class="gItem-vdTime">29:55</span>
+                                                </div>
+                                                <h3 class="gItem-title" title="【wantto玩徒】《质量效应：仙女座》中文剧情电影 - 第3集：冒险开始">【wantto玩徒】《质量效应：仙女座》中文剧情电影 - 第3集：冒险开始</h3>
+                                                <div class="gItem-info">
+                                                    <span>wantto玩徒</span>
+                                                    <em>8</em>
+                                                </div>
+                                            </a>
+                                        </li>
+                                        <li class="g-col-gItem item7">
+                                            <a href="//test-yun.duowan.com/up_610/77729.html" target="_blank">
+                                                <div class="gItem-pic">
+                                                    <img data-original="http://ojiastoreimage.bs2dl.huanjuyun.com/480x269/1534126230192_len25801.jpg" alt="【wantto玩徒】《质量效应：仙女座》中文剧情电影 - 第3集：冒险开始" src="http://ojiastoreimage.bs2dl.huanjuyun.com/480x269/1534126230192_len25801.jpg" style="display: block;">
+                                                    <div class="gItem-mask"></div>
+                                                    <span class="gItem-tag">质量效应：仙女座</span>
+                                                    <span class="gItem-vdIcon"></span>
+                                                    <span class="gItem-vdTime">29:55</span>
+                                                </div>
+                                                <h3 class="gItem-title" title="【wantto玩徒】《质量效应：仙女座》中文剧情电影 - 第3集：冒险开始">【wantto玩徒】《质量效应：仙女座》中文剧情电影 - 第3集：冒险开始</h3>
+                                                <div class="gItem-info">
+                                                    <span>wantto玩徒</span>
+                                                    <em>8</em>
+                                                </div>
+                                            </a>
+                                        </li>
+                                        <li class="g-col-gItem item8">
+                                            <a href="//test-yun.duowan.com/up_610/77729.html" target="_blank">
+                                                <div class="gItem-pic">
+                                                    <img data-original="http://ojiastoreimage.bs2dl.huanjuyun.com/480x269/1534126230192_len25801.jpg" alt="【wantto玩徒】《质量效应：仙女座》中文剧情电影 - 第3集：冒险开始" src="http://ojiastoreimage.bs2dl.huanjuyun.com/480x269/1534126230192_len25801.jpg" style="display: block;">
+                                                    <div class="gItem-mask"></div>
+                                                    <span class="gItem-tag">质量效应：仙女座</span>
+                                                    <span class="gItem-vdIcon"></span>
+                                                    <span class="gItem-vdTime">29:55</span>
+                                                </div>
+                                                <h3 class="gItem-title" title="【wantto玩徒】《质量效应：仙女座》中文剧情电影 - 第3集：冒险开始">【wantto玩徒】《质量效应：仙女座》中文剧情电影 - 第3集：冒险开始</h3>
+                                                <div class="gItem-info">
+                                                    <span>wantto玩徒</span>
+                                                    <em>8</em>
+                                                </div>
+                                            </a>
+                                        </li>
+                                        <li class="g-col-gItem item9">
+                                            <a href="//test-yun.duowan.com/up_610/77729.html" target="_blank">
+                                                <div class="gItem-pic">
+                                                    <img data-original="http://ojiastoreimage.bs2dl.huanjuyun.com/480x269/1534126230192_len25801.jpg" alt="【wantto玩徒】《质量效应：仙女座》中文剧情电影 - 第3集：冒险开始" src="http://ojiastoreimage.bs2dl.huanjuyun.com/480x269/1534126230192_len25801.jpg" style="display: block;">
+                                                    <div class="gItem-mask"></div>
+                                                    <span class="gItem-tag">质量效应：仙女座</span>
+                                                    <span class="gItem-vdIcon"></span>
+                                                    <span class="gItem-vdTime">29:55</span>
+                                                </div>
+                                                <h3 class="gItem-title" title="【wantto玩徒】《质量效应：仙女座》中文剧情电影 - 第3集：冒险开始">【wantto玩徒】《质量效应：仙女座》中文剧情电影 - 第3集：冒险开始</h3>
+                                                <div class="gItem-info">
+                                                    <span>wantto玩徒</span>
+                                                    <em>8</em>
+                                                </div>
+                                            </a>
+                                        </li>
+                                        <li class="g-col-gItem item10">
+                                            <a href="//test-yun.duowan.com/up_610/77729.html" target="_blank">
+                                                <div class="gItem-pic">
+                                                    <img data-original="http://ojiastoreimage.bs2dl.huanjuyun.com/480x269/1534126230192_len25801.jpg" alt="【wantto玩徒】《质量效应：仙女座》中文剧情电影 - 第3集：冒险开始" src="http://ojiastoreimage.bs2dl.huanjuyun.com/480x269/1534126230192_len25801.jpg" style="display: block;">
+                                                    <div class="gItem-mask"></div>
+                                                    <span class="gItem-tag">质量效应：仙女座</span>
+                                                    <span class="gItem-vdIcon"></span>
+                                                    <span class="gItem-vdTime">29:55</span>
+                                                </div>
+                                                <h3 class="gItem-title" title="【wantto玩徒】《质量效应：仙女座》中文剧情电影 - 第3集：冒险开始">【wantto玩徒】《质量效应：仙女座》中文剧情电影 - 第3集：冒险开始</h3>
+                                                <div class="gItem-info">
+                                                    <span>wantto玩徒</span>
+                                                    <em>8</em>
+                                                </div>
+                                            </a>
+                                        </li>
+                                    </ul>
+                                </div>
                             </div>
-                            <div class="g-tab-pannel u-hide">
-                                <ul class="zq-video-list ext-list-166">
-                                    <li class="zq-video-item">
-                                        <a href="#" target="_blank">
-                                            <span class="item-pic">
-                                                <img src="http://fed.webdev.ouj.com/146x82" alt="">
-                                                <i class="icon-play"></i>
-                                            </span>
-                                            <span class="item-title">英雄联盟MV第一五期卡牌大师崔斯特</span>
-                                        </a>
-                                    </li>
-                                    <li class="zq-video-item">
-                                        <a href="#" target="_blank">
-                                            <span class="item-pic">
-                                                <img src="http://fed.webdev.ouj.com/146x82" alt="">
-                                                <i class="icon-play"></i>
-                                            </span>
-                                            <span class="item-title">英雄联盟MV第一五期卡牌大师崔斯特</span>
-                                        </a>
-                                    </li>
-                                    <li class="zq-video-item">
-                                        <a href="#" target="_blank">
-                                            <span class="item-pic">
-                                                <img src="http://fed.webdev.ouj.com/146x82" alt="">
-                                                <i class="icon-play"></i>
-                                            </span>
-                                            <span class="item-title">英雄联盟MV第一五期卡牌大师崔斯特</span>
-                                        </a>
-                                    </li>
-                                    <li class="zq-video-item">
-                                        <a href="#" target="_blank">
-                                            <span class="item-pic">
-                                                <img src="http://fed.webdev.ouj.com/146x82" alt="">
-                                                <i class="icon-play"></i>
-                                            </span>
-                                            <span class="item-title">英雄联盟MV第一五期卡牌大师崔斯特</span>
-                                        </a>
-                                    </li>
-                                    <li class="zq-video-item">
-                                        <a href="#" target="_blank">
-                                            <span class="item-pic">
-                                                <img src="http://fed.webdev.ouj.com/146x82" alt="">
-                                                <i class="icon-play"></i>
-                                            </span>
-                                            <span class="item-title">英雄联盟MV第一五期卡牌大师崔斯特</span>
-                                        </a>
-                                    </li>
-                                    <li class="zq-video-item">
-                                        <a href="#" target="_blank">
-                                            <span class="item-pic">
-                                                <img src="http://fed.webdev.ouj.com/146x82" alt="">
-                                                <i class="icon-play"></i>
-                                            </span>
-                                            <span class="item-title">英雄联盟MV第一五期卡牌大师崔斯特</span>
-                                        </a>
-                                    </li>
-                                    <li class="zq-video-item">
-                                        <a href="#" target="_blank">
-                                            <span class="item-pic">
-                                                <img src="http://fed.webdev.ouj.com/146x82" alt="">
-                                                <i class="icon-play"></i>
-                                            </span>
-                                            <span class="item-title">英雄联盟MV第一五期卡牌大师崔斯特</span>
-                                        </a>
-                                    </li>
-                                </ul>  
+                            <div class="hot-list clearfix mt-25">
+                                <div class="part-title">
+                                    <span>热门推荐游戏</span>
+                                </div>
+                                <div class="cloudplay-hot">
+                                    <ul class="zq-cloudplay-hot">
+                                        <li class="item1">
+                                            <div class="imgbox">
+                                                <a href="//yun.duowan.com/up_543/76799.html" target="_blank" class="cover-img">
+                                                    <img data-original="http://screenshot.dwstatic.com/ojiastoreimage/92a0ba56c39cc57e85566e4b3382dd4a_size800x998_len129505.jpg" alt="" />
+                                                    <p class="setnum">78</p>
+                                                </a>
+                                                <a href="//yun.duowan.com/up_543/76815.html" target="_blank" class="date-box">
+                                                    <div class="to-update">
+                                                        <p>07月25日更新至</p>
+                                                        <em>9</em>
+                                                    </div>
+                                                </a>
+                                            </div>
+                                            <div class="txtbox">
+                                                <a href="//yun.duowan.com/game_237019/" target="_blank">
+                                                    <h3 title="底特律：我欲成人">底特律：我欲成人</h3>
+                                                </a>
+                                                <a href="//yun.duowan.com/up_543/" target="_blank">
+                                                    <div class="release-info">
+                                                        <p><img src="http://screenshot.dwstatic.com/ojiasnsimage/1371d8a2bfed12117f27fbc5706ba3e4_len45392.jpg?imageview/0/w/150/h/150/format/jpg" data-original="http://screenshot.dwstatic.com/ojiasnsimage/1371d8a2bfed12117f27fbc5706ba3e4_len45392.jpg?imageview/0/w/150/h/150/format/jpg" alt="黑桐谷歌" style="display: block;"></p>
+                                                        <em>黑桐谷歌</em>
+                                                    </div>
+                                                </a>
+                                            </div>
+                                        </li>
+                                        <li class="item2">
+                                            <div class="imgbox">
+                                                <a href="//yun.duowan.com/up_543/76799.html" target="_blank" class="cover-img">
+                                                    <img data-original="http://screenshot.dwstatic.com/ojiastoreimage/92a0ba56c39cc57e85566e4b3382dd4a_size800x998_len129505.jpg" alt="" />
+                                                    <p class="setnum">78</p>
+                                                </a>
+                                                <a href="//yun.duowan.com/up_543/76815.html" target="_blank" class="date-box">
+                                                    <div class="to-update">
+                                                        <p>07月25日更新至</p>
+                                                        <em>9</em>
+                                                    </div>
+                                                </a>
+                                            </div>
+                                            <div class="txtbox">
+                                                <a href="//yun.duowan.com/game_237019/" target="_blank">
+                                                    <h3 title="底特律：我欲成人">底特律：我欲成人</h3>
+                                                </a>
+                                                <a href="//yun.duowan.com/up_543/" target="_blank">
+                                                    <div class="release-info">
+                                                        <p><img src="http://screenshot.dwstatic.com/ojiasnsimage/1371d8a2bfed12117f27fbc5706ba3e4_len45392.jpg?imageview/0/w/150/h/150/format/jpg" data-original="http://screenshot.dwstatic.com/ojiasnsimage/1371d8a2bfed12117f27fbc5706ba3e4_len45392.jpg?imageview/0/w/150/h/150/format/jpg" alt="黑桐谷歌" style="display: block;"></p>
+                                                        <em>黑桐谷歌</em>
+                                                    </div>
+                                                </a>
+                                            </div>
+                                        </li>
+                                        <li class="item3">
+                                            <div class="imgbox">
+                                                <a href="//yun.duowan.com/up_543/76799.html" target="_blank" class="cover-img">
+                                                    <img data-original="http://screenshot.dwstatic.com/ojiastoreimage/92a0ba56c39cc57e85566e4b3382dd4a_size800x998_len129505.jpg" alt="" />
+                                                    <p class="setnum">78</p>
+                                                </a>
+                                                <a href="//yun.duowan.com/up_543/76815.html" target="_blank" class="date-box">
+                                                    <div class="to-update">
+                                                        <p>07月25日更新至</p>
+                                                        <em>9</em>
+                                                    </div>
+                                                </a>
+                                            </div>
+                                            <div class="txtbox">
+                                                <a href="//yun.duowan.com/game_237019/" target="_blank">
+                                                    <h3 title="底特律：我欲成人">底特律：我欲成人</h3>
+                                                </a>
+                                                <a href="//yun.duowan.com/up_543/" target="_blank">
+                                                    <div class="release-info">
+                                                        <p><img src="http://screenshot.dwstatic.com/ojiasnsimage/1371d8a2bfed12117f27fbc5706ba3e4_len45392.jpg?imageview/0/w/150/h/150/format/jpg" data-original="http://screenshot.dwstatic.com/ojiasnsimage/1371d8a2bfed12117f27fbc5706ba3e4_len45392.jpg?imageview/0/w/150/h/150/format/jpg" alt="黑桐谷歌" style="display: block;"></p>
+                                                        <em>黑桐谷歌</em>
+                                                    </div>
+                                                </a>
+                                            </div>
+                                        </li>
+                                        <li class="item4">
+                                            <div class="imgbox">
+                                                <a href="//yun.duowan.com/up_543/76799.html" target="_blank" class="cover-img">
+                                                    <img data-original="http://screenshot.dwstatic.com/ojiastoreimage/92a0ba56c39cc57e85566e4b3382dd4a_size800x998_len129505.jpg" alt="" />
+                                                    <p class="setnum">78</p>
+                                                </a>
+                                                <a href="//yun.duowan.com/up_543/76815.html" target="_blank" class="date-box">
+                                                    <div class="to-update">
+                                                        <p>07月25日更新至</p>
+                                                        <em>9</em>
+                                                    </div>
+                                                </a>
+                                            </div>
+                                            <div class="txtbox">
+                                                <a href="//yun.duowan.com/game_237019/" target="_blank">
+                                                    <h3 title="底特律：我欲成人">底特律：我欲成人</h3>
+                                                </a>
+                                                <a href="//yun.duowan.com/up_543/" target="_blank">
+                                                    <div class="release-info">
+                                                        <p><img src="http://screenshot.dwstatic.com/ojiasnsimage/1371d8a2bfed12117f27fbc5706ba3e4_len45392.jpg?imageview/0/w/150/h/150/format/jpg" data-original="http://screenshot.dwstatic.com/ojiasnsimage/1371d8a2bfed12117f27fbc5706ba3e4_len45392.jpg?imageview/0/w/150/h/150/format/jpg" alt="黑桐谷歌" style="display: block;"></p>
+                                                        <em>黑桐谷歌</em>
+                                                    </div>
+                                                </a>
+                                            </div>
+                                        </li>
+                                        <li class="item5">
+                                            <div class="imgbox">
+                                                <a href="//yun.duowan.com/up_543/76799.html" target="_blank" class="cover-img">
+                                                    <img data-original="http://screenshot.dwstatic.com/ojiastoreimage/92a0ba56c39cc57e85566e4b3382dd4a_size800x998_len129505.jpg" alt="" />
+                                                    <p class="setnum">78</p>
+                                                </a>
+                                                <a href="//yun.duowan.com/up_543/76815.html" target="_blank" class="date-box">
+                                                    <div class="to-update">
+                                                        <p>07月25日更新至</p>
+                                                        <em>9</em>
+                                                    </div>
+                                                </a>
+                                            </div>
+                                            <div class="txtbox">
+                                                <a href="//yun.duowan.com/game_237019/" target="_blank">
+                                                    <h3 title="底特律：我欲成人">底特律：我欲成人</h3>
+                                                </a>
+                                                <a href="//yun.duowan.com/up_543/" target="_blank">
+                                                    <div class="release-info">
+                                                        <p><img src="http://screenshot.dwstatic.com/ojiasnsimage/1371d8a2bfed12117f27fbc5706ba3e4_len45392.jpg?imageview/0/w/150/h/150/format/jpg" data-original="http://screenshot.dwstatic.com/ojiasnsimage/1371d8a2bfed12117f27fbc5706ba3e4_len45392.jpg?imageview/0/w/150/h/150/format/jpg" alt="黑桐谷歌" style="display: block;"></p>
+                                                        <em>黑桐谷歌</em>
+                                                    </div>
+                                                </a>
+                                            </div>
+                                        </li>
+                                        <li class="item6">
+                                            <div class="imgbox">
+                                                <a href="//yun.duowan.com/up_543/76799.html" target="_blank" class="cover-img">
+                                                    <img data-original="http://screenshot.dwstatic.com/ojiastoreimage/92a0ba56c39cc57e85566e4b3382dd4a_size800x998_len129505.jpg" alt="" />
+                                                    <p class="setnum">78</p>
+                                                </a>
+                                                <a href="//yun.duowan.com/up_543/76815.html" target="_blank" class="date-box">
+                                                    <div class="to-update">
+                                                        <p>07月25日更新至</p>
+                                                        <em>9</em>
+                                                    </div>
+                                                </a>
+                                            </div>
+                                            <div class="txtbox">
+                                                <a href="//yun.duowan.com/game_237019/" target="_blank">
+                                                    <h3 title="底特律：我欲成人">底特律：我欲成人</h3>
+                                                </a>
+                                                <a href="//yun.duowan.com/up_543/" target="_blank">
+                                                    <div class="release-info">
+                                                        <p><img src="http://screenshot.dwstatic.com/ojiasnsimage/1371d8a2bfed12117f27fbc5706ba3e4_len45392.jpg?imageview/0/w/150/h/150/format/jpg" data-original="http://screenshot.dwstatic.com/ojiasnsimage/1371d8a2bfed12117f27fbc5706ba3e4_len45392.jpg?imageview/0/w/150/h/150/format/jpg" alt="黑桐谷歌" style="display: block;"></p>
+                                                        <em>黑桐谷歌</em>
+                                                    </div>
+                                                </a>
+                                            </div>
+                                        </li>
+                                    </ul>
+                                </div>
                             </div>
                         </div>
                     </div>

2017专区/PC单机/src/_index.html

@@ -752,6 +752,348 @@
                     </div>
                 </div>
 
+                <div id="cloudplay" class="pc-index-cloudplay mt-50">
+                    <div class="g-ui-tab">
+                        <div class="g-tab__hd">
+                            <h2>云玩<span>游戏</span></h2>
+                            <p class="subtitle">专注游戏剧情攻略 给你电影般的游戏体验</p>
+                            <div class="g-tab__ext">
+                                <a href="#">更多攻略视频</a>
+                            </div>
+                        </div>
+                        <div class="g-tab__bd clearfix">
+                            <div class="video-list clearfix mt-25">
+                                <div class="part-title">
+                                    <span>热门视频</span>
+                                </div>
+                                <div class="cloudplay-list">
+                                    <ul class="zq-cloudplay-list">
+                                        <li class="g-col-gItem item1">
+                                            <a href="//test-yun.duowan.com/up_610/77729.html" target="_blank">
+                                                <div class="gItem-pic">
+                                                    <img data-original="http://ojiastoreimage.bs2dl.huanjuyun.com/480x269/1534126230192_len25801.jpg" alt="【wantto玩徒】《质量效应：仙女座》中文剧情电影 - 第3集：冒险开始" src="http://ojiastoreimage.bs2dl.huanjuyun.com/480x269/1534126230192_len25801.jpg" style="display: block;">
+                                                    <div class="gItem-mask"></div>
+                                                    <span class="gItem-tag">质量效应：仙女座</span>
+                                                    <span class="gItem-vdIcon"></span>
+                                                    <span class="gItem-vdTime">29:55</span>
+                                                </div>
+                                                <h3 class="gItem-title" title="【wantto玩徒】《质量效应：仙女座》中文剧情电影 - 第3集：冒险开始">【wantto玩徒】《质量效应：仙女座》中文剧情电影 - 第3集：冒险开始</h3>
+                                                <div class="gItem-info">
+                                                    <span>wantto玩徒</span>
+                                                    <em>8</em>
+                                                </div>
+                                            </a>
+                                        </li>
+                                        <li class="g-col-gItem item2">
+                                            <a href="//test-yun.duowan.com/up_610/77729.html" target="_blank">
+                                                <div class="gItem-pic">
+                                                    <img data-original="http://ojiastoreimage.bs2dl.huanjuyun.com/480x269/1534126230192_len25801.jpg" alt="【wantto玩徒】《质量效应：仙女座》中文剧情电影 - 第3集：冒险开始" src="http://ojiastoreimage.bs2dl.huanjuyun.com/480x269/1534126230192_len25801.jpg" style="display: block;">
+                                                    <div class="gItem-mask"></div>
+                                                    <span class="gItem-tag">质量效应：仙女座</span>
+                                                    <span class="gItem-vdIcon"></span>
+                                                    <span class="gItem-vdTime">29:55</span>
+                                                </div>
+                                                <h3 class="gItem-title" title="【wantto玩徒】《质量效应：仙女座》中文剧情电影 - 第3集：冒险开始">【wantto玩徒】《质量效应：仙女座》中文剧情电影 - 第3集：冒险开始</h3>
+                                                <div class="gItem-info">
+                                                    <span>wantto玩徒</span>
+                                                    <em>8</em>
+                                                </div>
+                                            </a>
+                                        </li>
+                                        <li class="g-col-gItem item3">
+                                            <a href="//test-yun.duowan.com/up_610/77729.html" target="_blank">
+                                                <div class="gItem-pic">
+                                                    <img data-original="http://ojiastoreimage.bs2dl.huanjuyun.com/480x269/1534126230192_len25801.jpg" alt="【wantto玩徒】《质量效应：仙女座》中文剧情电影 - 第3集：冒险开始" src="http://ojiastoreimage.bs2dl.huanjuyun.com/480x269/1534126230192_len25801.jpg" style="display: block;">
+                                                    <div class="gItem-mask"></div>
+                                                    <span class="gItem-tag">质量效应：仙女座</span>
+                                                    <span class="gItem-vdIcon"></span>
+                                                    <span class="gItem-vdTime">29:55</span>
+                                                </div>
+                                                <h3 class="gItem-title" title="【wantto玩徒】《质量效应：仙女座》中文剧情电影 - 第3集：冒险开始">【wantto玩徒】《质量效应：仙女座》中文剧情电影 - 第3集：冒险开始</h3>
+                                                <div class="gItem-info">
+                                                    <span>wantto玩徒</span>
+                                                    <em>8</em>
+                                                </div>
+                                            </a>
+                                        </li>
+                                        <li class="g-col-gItem item4">
+                                            <a href="//test-yun.duowan.com/up_610/77729.html" target="_blank">
+                                                <div class="gItem-pic">
+                                                    <img data-original="http://ojiastoreimage.bs2dl.huanjuyun.com/480x269/1534126230192_len25801.jpg" alt="【wantto玩徒】《质量效应：仙女座》中文剧情电影 - 第3集：冒险开始" src="http://ojiastoreimage.bs2dl.huanjuyun.com/480x269/1534126230192_len25801.jpg" style="display: block;">
+                                                    <div class="gItem-mask"></div>
+                                                    <span class="gItem-tag">质量效应：仙女座</span>
+                                                    <span class="gItem-vdIcon"></span>
+                                                    <span class="gItem-vdTime">29:55</span>
+                                                </div>
+                                                <h3 class="gItem-title" title="【wantto玩徒】《质量效应：仙女座》中文剧情电影 - 第3集：冒险开始">【wantto玩徒】《质量效应：仙女座》中文剧情电影 - 第3集：冒险开始</h3>
+                                                <div class="gItem-info">
+                                                    <span>wantto玩徒</span>
+                                                    <em>8</em>
+                                                </div>
+                                            </a>
+                                        </li>
+                                        <li class="g-col-gItem item5">
+                                            <a href="//test-yun.duowan.com/up_610/77729.html" target="_blank">
+                                                <div class="gItem-pic">
+                                                    <img data-original="http://ojiastoreimage.bs2dl.huanjuyun.com/480x269/1534126230192_len25801.jpg" alt="【wantto玩徒】《质量效应：仙女座》中文剧情电影 - 第3集：冒险开始" src="http://ojiastoreimage.bs2dl.huanjuyun.com/480x269/1534126230192_len25801.jpg" style="display: block;">
+                                                    <div class="gItem-mask"></div>
+                                                    <span class="gItem-tag">质量效应：仙女座</span>
+                                                    <span class="gItem-vdIcon"></span>
+                                                    <span class="gItem-vdTime">29:55</span>
+                                                </div>
+                                                <h3 class="gItem-title" title="【wantto玩徒】《质量效应：仙女座》中文剧情电影 - 第3集：冒险开始">【wantto玩徒】《质量效应：仙女座》中文剧情电影 - 第3集：冒险开始</h3>
+                                                <div class="gItem-info">
+                                                    <span>wantto玩徒</span>
+                                                    <em>8</em>
+                                                </div>
+                                            </a>
+                                        </li>
+                                        <li class="g-col-gItem item6">
+                                            <a href="//test-yun.duowan.com/up_610/77729.html" target="_blank">
+                                                <div class="gItem-pic">
+                                                    <img data-original="http://ojiastoreimage.bs2dl.huanjuyun.com/480x269/1534126230192_len25801.jpg" alt="【wantto玩徒】《质量效应：仙女座》中文剧情电影 - 第3集：冒险开始" src="http://ojiastoreimage.bs2dl.huanjuyun.com/480x269/1534126230192_len25801.jpg" style="display: block;">
+                                                    <div class="gItem-mask"></div>
+                                                    <span class="gItem-tag">质量效应：仙女座</span>
+                                                    <span class="gItem-vdIcon"></span>
+                                                    <span class="gItem-vdTime">29:55</span>
+                                                </div>
+                                                <h3 class="gItem-title" title="【wantto玩徒】《质量效应：仙女座》中文剧情电影 - 第3集：冒险开始">【wantto玩徒】《质量效应：仙女座》中文剧情电影 - 第3集：冒险开始</h3>
+                                                <div class="gItem-info">
+                                                    <span>wantto玩徒</span>
+                                                    <em>8</em>
+                                                </div>
+                                            </a>
+                                        </li>
+                                        <li class="g-col-gItem item7">
+                                            <a href="//test-yun.duowan.com/up_610/77729.html" target="_blank">
+                                                <div class="gItem-pic">
+                                                    <img data-original="http://ojiastoreimage.bs2dl.huanjuyun.com/480x269/1534126230192_len25801.jpg" alt="【wantto玩徒】《质量效应：仙女座》中文剧情电影 - 第3集：冒险开始" src="http://ojiastoreimage.bs2dl.huanjuyun.com/480x269/1534126230192_len25801.jpg" style="display: block;">
+                                                    <div class="gItem-mask"></div>
+                                                    <span class="gItem-tag">质量效应：仙女座</span>
+                                                    <span class="gItem-vdIcon"></span>
+                                                    <span class="gItem-vdTime">29:55</span>
+                                                </div>
+                                                <h3 class="gItem-title" title="【wantto玩徒】《质量效应：仙女座》中文剧情电影 - 第3集：冒险开始">【wantto玩徒】《质量效应：仙女座》中文剧情电影 - 第3集：冒险开始</h3>
+                                                <div class="gItem-info">
+                                                    <span>wantto玩徒</span>
+                                                    <em>8</em>
+                                                </div>
+                                            </a>
+                                        </li>
+                                        <li class="g-col-gItem item8">
+                                            <a href="//test-yun.duowan.com/up_610/77729.html" target="_blank">
+                                                <div class="gItem-pic">
+                                                    <img data-original="http://ojiastoreimage.bs2dl.huanjuyun.com/480x269/1534126230192_len25801.jpg" alt="【wantto玩徒】《质量效应：仙女座》中文剧情电影 - 第3集：冒险开始" src="http://ojiastoreimage.bs2dl.huanjuyun.com/480x269/1534126230192_len25801.jpg" style="display: block;">
+                                                    <div class="gItem-mask"></div>
+                                                    <span class="gItem-tag">质量效应：仙女座</span>
+                                                    <span class="gItem-vdIcon"></span>
+                                                    <span class="gItem-vdTime">29:55</span>
+                                                </div>
+                                                <h3 class="gItem-title" title="【wantto玩徒】《质量效应：仙女座》中文剧情电影 - 第3集：冒险开始">【wantto玩徒】《质量效应：仙女座》中文剧情电影 - 第3集：冒险开始</h3>
+                                                <div class="gItem-info">
+                                                    <span>wantto玩徒</span>
+                                                    <em>8</em>
+                                                </div>
+                                            </a>
+                                        </li>
+                                        <li class="g-col-gItem item9">
+                                            <a href="//test-yun.duowan.com/up_610/77729.html" target="_blank">
+                                                <div class="gItem-pic">
+                                                    <img data-original="http://ojiastoreimage.bs2dl.huanjuyun.com/480x269/1534126230192_len25801.jpg" alt="【wantto玩徒】《质量效应：仙女座》中文剧情电影 - 第3集：冒险开始" src="http://ojiastoreimage.bs2dl.huanjuyun.com/480x269/1534126230192_len25801.jpg" style="display: block;">
+                                                    <div class="gItem-mask"></div>
+                                                    <span class="gItem-tag">质量效应：仙女座</span>
+                                                    <span class="gItem-vdIcon"></span>
+                                                    <span class="gItem-vdTime">29:55</span>
+                                                </div>
+                                                <h3 class="gItem-title" title="【wantto玩徒】《质量效应：仙女座》中文剧情电影 - 第3集：冒险开始">【wantto玩徒】《质量效应：仙女座》中文剧情电影 - 第3集：冒险开始</h3>
+                                                <div class="gItem-info">
+                                                    <span>wantto玩徒</span>
+                                                    <em>8</em>
+                                                </div>
+                                            </a>
+                                        </li>
+                                        <li class="g-col-gItem item10">
+                                            <a href="//test-yun.duowan.com/up_610/77729.html" target="_blank">
+                                                <div class="gItem-pic">
+                                                    <img data-original="http://ojiastoreimage.bs2dl.huanjuyun.com/480x269/1534126230192_len25801.jpg" alt="【wantto玩徒】《质量效应：仙女座》中文剧情电影 - 第3集：冒险开始" src="http://ojiastoreimage.bs2dl.huanjuyun.com/480x269/1534126230192_len25801.jpg" style="display: block;">
+                                                    <div class="gItem-mask"></div>
+                                                    <span class="gItem-tag">质量效应：仙女座</span>
+                                                    <span class="gItem-vdIcon"></span>
+                                                    <span class="gItem-vdTime">29:55</span>
+                                                </div>
+                                                <h3 class="gItem-title" title="【wantto玩徒】《质量效应：仙女座》中文剧情电影 - 第3集：冒险开始">【wantto玩徒】《质量效应：仙女座》中文剧情电影 - 第3集：冒险开始</h3>
+                                                <div class="gItem-info">
+                                                    <span>wantto玩徒</span>
+                                                    <em>8</em>
+                                                </div>
+                                            </a>
+                                        </li>
+                                    </ul>
+                                </div>
+                            </div>
+                            <div class="hot-list clearfix mt-25">
+                                <div class="part-title">
+                                    <span>热门推荐游戏</span>
+                                </div>
+                                <div class="cloudplay-hot">
+                                    <ul class="zq-cloudplay-hot">
+                                        <li class="item1">
+                                            <div class="imgbox">
+                                                <a href="//yun.duowan.com/up_543/76799.html" target="_blank" class="cover-img">
+                                                    <img data-original="http://screenshot.dwstatic.com/ojiastoreimage/92a0ba56c39cc57e85566e4b3382dd4a_size800x998_len129505.jpg" alt="" />
+                                                    <p class="setnum">78</p>
+                                                </a>
+                                                <a href="//yun.duowan.com/up_543/76815.html" target="_blank" class="date-box">
+                                                    <div class="to-update">
+                                                        <p>07月25日更新至</p>
+                                                        <em>9</em>
+                                                    </div>
+                                                </a>
+                                            </div>
+                                            <div class="txtbox">
+                                                <a href="//yun.duowan.com/game_237019/" target="_blank">
+                                                    <h3 title="底特律：我欲成人">底特律：我欲成人</h3>
+                                                </a>
+                                                <a href="//yun.duowan.com/up_543/" target="_blank">
+                                                    <div class="release-info">
+                                                        <p><img src="http://screenshot.dwstatic.com/ojiasnsimage/1371d8a2bfed12117f27fbc5706ba3e4_len45392.jpg?imageview/0/w/150/h/150/format/jpg" data-original="http://screenshot.dwstatic.com/ojiasnsimage/1371d8a2bfed12117f27fbc5706ba3e4_len45392.jpg?imageview/0/w/150/h/150/format/jpg" alt="黑桐谷歌" style="display: block;"></p>
+                                                        <em>黑桐谷歌</em>
+                                                    </div>
+                                                </a>
+                                            </div>
+                                        </li>
+                                        <li class="item2">
+                                            <div class="imgbox">
+                                                <a href="//yun.duowan.com/up_543/76799.html" target="_blank" class="cover-img">
+                                                    <img data-original="http://screenshot.dwstatic.com/ojiastoreimage/92a0ba56c39cc57e85566e4b3382dd4a_size800x998_len129505.jpg" alt="" />
+                                                    <p class="setnum">78</p>
+                                                </a>
+                                                <a href="//yun.duowan.com/up_543/76815.html" target="_blank" class="date-box">
+                                                    <div class="to-update">
+                                                        <p>07月25日更新至</p>
+                                                        <em>9</em>
+                                                    </div>
+                                                </a>
+                                            </div>
+                                            <div class="txtbox">
+                                                <a href="//yun.duowan.com/game_237019/" target="_blank">
+                                                    <h3 title="底特律：我欲成人">底特律：我欲成人</h3>
+                                                </a>
+                                                <a href="//yun.duowan.com/up_543/" target="_blank">
+                                                    <div class="release-info">
+                                                        <p><img src="http://screenshot.dwstatic.com/ojiasnsimage/1371d8a2bfed12117f27fbc5706ba3e4_len45392.jpg?imageview/0/w/150/h/150/format/jpg" data-original="http://screenshot.dwstatic.com/ojiasnsimage/1371d8a2bfed12117f27fbc5706ba3e4_len45392.jpg?imageview/0/w/150/h/150/format/jpg" alt="黑桐谷歌" style="display: block;"></p>
+                                                        <em>黑桐谷歌</em>
+                                                    </div>
+                                                </a>
+                                            </div>
+                                        </li>
+                                        <li class="item3">
+                                            <div class="imgbox">
+                                                <a href="//yun.duowan.com/up_543/76799.html" target="_blank" class="cover-img">
+                                                    <img data-original="http://screenshot.dwstatic.com/ojiastoreimage/92a0ba56c39cc57e85566e4b3382dd4a_size800x998_len129505.jpg" alt="" />
+                                                    <p class="setnum">78</p>
+                                                </a>
+                                                <a href="//yun.duowan.com/up_543/76815.html" target="_blank" class="date-box">
+                                                    <div class="to-update">
+                                                        <p>07月25日更新至</p>
+                                                        <em>9</em>
+                                                    </div>
+                                                </a>
+                                            </div>
+                                            <div class="txtbox">
+                                                <a href="//yun.duowan.com/game_237019/" target="_blank">
+                                                    <h3 title="底特律：我欲成人">底特律：我欲成人</h3>
+                                                </a>
+                                                <a href="//yun.duowan.com/up_543/" target="_blank">
+                                                    <div class="release-info">
+                                                        <p><img src="http://screenshot.dwstatic.com/ojiasnsimage/1371d8a2bfed12117f27fbc5706ba3e4_len45392.jpg?imageview/0/w/150/h/150/format/jpg" data-original="http://screenshot.dwstatic.com/ojiasnsimage/1371d8a2bfed12117f27fbc5706ba3e4_len45392.jpg?imageview/0/w/150/h/150/format/jpg" alt="黑桐谷歌" style="display: block;"></p>
+                                                        <em>黑桐谷歌</em>
+                                                    </div>
+                                                </a>
+                                            </div>
+                                        </li>
+                                        <li class="item4">
+                                            <div class="imgbox">
+                                                <a href="//yun.duowan.com/up_543/76799.html" target="_blank" class="cover-img">
+                                                    <img data-original="http://screenshot.dwstatic.com/ojiastoreimage/92a0ba56c39cc57e85566e4b3382dd4a_size800x998_len129505.jpg" alt="" />
+                                                    <p class="setnum">78</p>
+                                                </a>
+                                                <a href="//yun.duowan.com/up_543/76815.html" target="_blank" class="date-box">
+                                                    <div class="to-update">
+                                                        <p>07月25日更新至</p>
+                                                        <em>9</em>
+                                                    </div>
+                                                </a>
+                                            </div>
+                                            <div class="txtbox">
+                                                <a href="//yun.duowan.com/game_237019/" target="_blank">
+                                                    <h3 title="底特律：我欲成人">底特律：我欲成人</h3>
+                                                </a>
+                                                <a href="//yun.duowan.com/up_543/" target="_blank">
+                                                    <div class="release-info">
+                                                        <p><img src="http://screenshot.dwstatic.com/ojiasnsimage/1371d8a2bfed12117f27fbc5706ba3e4_len45392.jpg?imageview/0/w/150/h/150/format/jpg" data-original="http://screenshot.dwstatic.com/ojiasnsimage/1371d8a2bfed12117f27fbc5706ba3e4_len45392.jpg?imageview/0/w/150/h/150/format/jpg" alt="黑桐谷歌" style="display: block;"></p>
+                                                        <em>黑桐谷歌</em>
+                                                    </div>
+                                                </a>
+                                            </div>
+                                        </li>
+                                        <li class="item5">
+                                            <div class="imgbox">
+                                                <a href="//yun.duowan.com/up_543/76799.html" target="_blank" class="cover-img">
+                                                    <img data-original="http://screenshot.dwstatic.com/ojiastoreimage/92a0ba56c39cc57e85566e4b3382dd4a_size800x998_len129505.jpg" alt="" />
+                                                    <p class="setnum">78</p>
+                                                </a>
+                                                <a href="//yun.duowan.com/up_543/76815.html" target="_blank" class="date-box">
+                                                    <div class="to-update">
+                                                        <p>07月25日更新至</p>
+                                                        <em>9</em>
+                                                    </div>
+                                                </a>
+                                            </div>
+                                            <div class="txtbox">
+                                                <a href="//yun.duowan.com/game_237019/" target="_blank">
+                                                    <h3 title="底特律：我欲成人">底特律：我欲成人</h3>
+                                                </a>
+                                                <a href="//yun.duowan.com/up_543/" target="_blank">
+                                                    <div class="release-info">
+                                                        <p><img src="http://screenshot.dwstatic.com/ojiasnsimage/1371d8a2bfed12117f27fbc5706ba3e4_len45392.jpg?imageview/0/w/150/h/150/format/jpg" data-original="http://screenshot.dwstatic.com/ojiasnsimage/1371d8a2bfed12117f27fbc5706ba3e4_len45392.jpg?imageview/0/w/150/h/150/format/jpg" alt="黑桐谷歌" style="display: block;"></p>
+                                                        <em>黑桐谷歌</em>
+                                                    </div>
+                                                </a>
+                                            </div>
+                                        </li>
+                                        <li class="item6">
+                                            <div class="imgbox">
+                                                <a href="//yun.duowan.com/up_543/76799.html" target="_blank" class="cover-img">
+                                                    <img data-original="http://screenshot.dwstatic.com/ojiastoreimage/92a0ba56c39cc57e85566e4b3382dd4a_size800x998_len129505.jpg" alt="" />
+                                                    <p class="setnum">78</p>
+                                                </a>
+                                                <a href="//yun.duowan.com/up_543/76815.html" target="_blank" class="date-box">
+                                                    <div class="to-update">
+                                                        <p>07月25日更新至</p>
+                                                        <em>9</em>
+                                                    </div>
+                                                </a>
+                                            </div>
+                                            <div class="txtbox">
+                                                <a href="//yun.duowan.com/game_237019/" target="_blank">
+                                                    <h3 title="底特律：我欲成人">底特律：我欲成人</h3>
+                                                </a>
+                                                <a href="//yun.duowan.com/up_543/" target="_blank">
+                                                    <div class="release-info">
+                                                        <p><img src="http://screenshot.dwstatic.com/ojiasnsimage/1371d8a2bfed12117f27fbc5706ba3e4_len45392.jpg?imageview/0/w/150/h/150/format/jpg" data-original="http://screenshot.dwstatic.com/ojiasnsimage/1371d8a2bfed12117f27fbc5706ba3e4_len45392.jpg?imageview/0/w/150/h/150/format/jpg" alt="黑桐谷歌" style="display: block;"></p>
+                                                        <em>黑桐谷歌</em>
+                                                    </div>
+                                                </a>
+                                            </div>
+                                        </li>
+                                    </ul>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+
                 <div id="discount" class="pc-index-discount mt-50">
                     <div class="g-ui-tab">
                         <div class="g-tab__hd">
@@ -1677,7 +2019,7 @@
                         </div>
                     </div>
                 </div>
-
+               
                 <div id="rank" class="pc-index-relate mt-50 clearfix">
                     <div class="zq-col-438">
                         <div class="g-ui-tab">

2017专区/PC单机/src/modules/page/artical.js

@@ -1,6 +1,7 @@
 var seaLoader = require('sealoader');
 var _ = require("underscore/underscore");
 require('artKeyword.js');
+require('jquery.lazyload');
 
 
 var PhotoSwipe = require('./photoswipe/photoswipe');
@@ -97,6 +98,11 @@ var catalog = {
 
 var V = {
    init: function() {
+       //图片懒加载
+       $("body img").lazyload({
+            failurelimit : 5,
+            skip_invisible : false
+        })
         catalog.init();
         M.getGameRank(2);
         M.getGameRank(3);

2017专区/PC单机/src/modules/page/artical2.js

@@ -1,5 +1,6 @@
 var seaLoader = require('sealoader');
 require('artKeyword.js');
+require('jquery.lazyload');
 
 var PhotoSwipe = require('./photoswipe/photoswipe');
 var PhotoSwipeUI_Default  = require('./photoswipe/photoswipe-ui-default');
@@ -57,6 +58,11 @@ var catalog = {
 
 var V = {
    init: function() {
+       //图片懒加载
+       $("body img").lazyload({
+            failurelimit : 5,
+            skip_invisible : false
+        })
        catalog.init();
        V.initPhotoSwipe();
 

2017专区/PC单机/src/sass/global.scss

@@ -199,6 +199,14 @@ body {
                 font-weight: 700;
             }
         }
+        .subtitle{
+            float: left;
+            font-size: 12px;
+            font-family: SimSun;
+            color: #ff6600;
+            line-height: 22px;
+            margin-top: 10px;
+        }
     }
     .g-tab__nav{
         @include clearfix;
@@ -883,6 +891,7 @@ body {
     }
 }
 
+
 .pc-index-relate{
     .zq-col-438{
         float: left;
@@ -956,6 +965,380 @@ body {
     }
 }
 
+.pc-index-cloudplay{
+    .video-list{
+        width: 670px;
+        float: left;
+    }
+    .hot-list{
+        width: 504px;
+        float: right;
+    }
+    li{
+        a:hover{
+            text-decoration: none;
+        }
+    }
+    .cloudplay-list{
+        .zq-cloudplay-list{
+            width: 700px;
+            li{
+                &.item9,&.item10{
+                    display: none;
+                }
+            }
+        }
+    }
+    .cloudplay-hot{
+        .zq-cloudplay-hot{
+            width: 520px;
+            li{
+                &.item4,&.item5,&.item6{
+                    display: none;
+                }
+            }
+        }
+    }
+}
+.zq-cloudplay-list{
+    li{
+        height: 140px;
+        width: 157px;
+        float: left;
+        margin-right: 14px;
+        vertical-align: top;
+        font-size: 12px;
+        a{
+            display: block;
+            color: #e94646;
+            &:hover{
+                text-decoration: none;
+                img{
+                    opacity: 0.85;
+                }
+                .gItem-title{
+                    padding: 2px 0 0px 0;
+                    height: 44px;
+                    color: #ff6600;
+                    white-space: normal;
+                }
+                .gItem-tag{
+                    top: 0;
+                }
+                .gItem-mask{
+                    opacity: 1;
+                }
+                .gItem-vdIcon{
+                    bottom: 5px;
+                }
+                .gItem-vdTime{
+                    bottom: 0;
+                }
+                .gItem-info{
+                    display: none;
+                }
+            }
+        }
+        .gItem-pic{
+            height: 90px;
+            overflow: hidden;
+            position: relative;
+            img{
+                height: 100%;
+                width: 100%;
+                display: block;
+                overflow: hidden;
+                transition: opacity ease 300ms;
+            }
+        }
+        .gItem-mask{
+            position: absolute;
+            background: url(../img/gItem-mask.png?__sprite) repeat-x;
+            bottom: 0;
+            left: 0;
+            width: 100%;
+            height: 41px;
+            z-index: 10;
+            opacity: 0;
+            transition: opacity 300ms ease;
+        }
+        .gItem-tag{
+            padding: 0 5px;
+            position: absolute;
+            right: 0;
+            top: -24px;
+            width: auto;
+            height: 24px;
+            line-height: 24px;
+            text-indent: 5px;
+            color: #fff;
+            overflow: hidden;
+            background-color: transparent;
+            background-color: rgba(0, 0, 0, .5);
+            zoom: 1;
+            z-index: 11;
+            transition: all 300ms ease;
+        }
+        .gItem-vdIcon{
+            position: absolute;
+            z-index: 11;
+            width: 24px;
+            height: 24px;
+            background: url(../img/gItem-vdIcon.png?__sprite) no-repeat;
+            bottom: -24px;
+            left: 5px;
+            transition: all 300ms ease;
+        }
+        .gItem-vdTime{
+            position: absolute;
+            z-index: 11;
+            right: 7px;
+            bottom: -24px;
+            line-height: 30px;
+            color: #ffffff;
+            font-size: 12px;
+            transition: all 300ms ease;
+        }
+        .gItem-title{
+            text-align: left;
+            padding: 2px 0 3px 0;
+            font-size: 12px;
+            color: #c0d3e4;
+            line-height: 23px;
+            height: 23px;
+            overflow: hidden;
+            font-weight: normal;
+            @include ellipsis();
+        }
+        .gItem-info{
+            line-height: 18px;
+            height: 18px;
+            overflow: hidden;
+            font-size: 12px;
+            span{
+                float: left;
+                color: #839bb4;
+                width: 100px;
+                line-height: 18px;
+                height: 18px;
+                overflow: hidden;
+            }
+            em{
+                float: right;
+                color: #bbb;
+                padding-left: 18px;
+                background: url(../img/gItem-vdIcon2.png?__sprite) 0 4px no-repeat;
+            }
+        }
+    }
+}
+.zq-cloudplay-hot{
+    li{
+        height: 276px;
+        width: 158px;
+        background: #223c4d;
+        border-bottom-left-radius: 3px;
+        border-bottom-right-radius: 3px;
+        overflow: hidden;
+        float: left;
+        margin-right: 15px;
+        .imgbox{
+            height: 219px;
+            width: 100%;
+            overflow: hidden;
+            position: relative;
+            background: #000402;
+            a{
+                transition: opacity ease 0.2s;
+            }
+            &:hover{
+                a{
+                    opacity: 0.9;
+                    filter: alpha(opacity=90);
+                }
+            }
+            .cover-img{
+                height: 193px;
+                display: block;
+                overflow: hidden;
+                img{
+                    height: 100%;
+                    width: 100%;
+                    display: block;
+                }
+                .setnum{
+                    height: 28px;
+                    width: 24px;
+                    background: url(/src/img/bg-setnum.png?__sprite) no-repeat;
+                    position: absolute;
+                    top: 7px;
+                    left: 8px;
+                    font-size: 12px;
+                    color: #fff;
+                    line-height: 28px;
+                    text-align: center;
+                    text-shadow: 0 2px 3px rgba(0,0,0,0.69);
+                }
+            }
+            .date-box{
+                display: block;
+                background: #000402;
+                overflow: hidden;
+                .to-update{
+                    width: 145px;
+                    margin: 0 auto;
+                    font-size: 12px;
+                    line-height: 26px;
+                    text-align: center;
+                    color: #fff;
+                    overflow: hidden;
+                    p{
+                        height: 100%;
+                        width: 110px;
+                        background: #000;
+                        background: rgba(0,0,0,0.8);
+                        float: left;
+                    }
+                    em{
+                        width: 35px;
+                        float: left;
+                        display: block;
+                        color: #fff;
+                        background: #FF263A;
+                        background: rgba(255,38,58,0.9);
+                        transition: background 0.35s;
+                        &:hover{
+                            background: #FF263A;
+                        }
+                    }
+                }
+            }
+        }
+        .txtbox{
+            padding: 2px 6px 0 8px;
+            h3,em{
+                @include ellipsis;
+                color: #97c8e6;
+            }
+            h3{
+                font-size: 14px;
+                line-height: 30px;
+                &:hover{
+                    color: #ff6600;
+                }
+            }
+            .release-info{
+                overflow: hidden;
+                p{
+                    height: 16px;
+                    width: 16px;
+                    float: left;
+                    overflow: hidden;
+                    border-radius: 100%;
+                    margin-right: 10px;
+                    img{
+                        height: 100%;
+                        width: 100%;
+                        display: block;
+                    }
+                }
+                em{
+                    width: 103px;
+                    float: left;
+                    display: block;
+                    font-size: 12px;
+                    line-height: 16px;
+                }
+            }
+        }
+    }
+}
+.narrow-screen,.wide-screen{
+    .zq-cloudplay-list{
+        width: 950px;
+        li{
+            height: 145px;
+            width: 170px;
+            margin-right: 20px;
+            .gItem-pic{
+                height: 95px;
+            }
+        }
+    }
+    .zq-cloudplay-hot{
+        width: 960px;
+        li{
+            height: 229px;
+            width: 138px;
+            margin-right: 20px;
+            .imgbox{
+                height: 172px;
+                .cover-img{
+                    height: 172px;
+                    img{
+                        height: auto;
+                        min-height: 100%;
+                    }
+                }
+                .date-box{
+                    background: none;
+                    position: absolute;
+                    bottom: 4px;
+                    left: 4px;
+                    .to-update{
+                        width: 130px;
+                        p{
+                            width: 100px;
+                        }
+                        em{
+                            width: 30px;
+                        }
+                    }
+                }
+            }
+            .txtbox{
+                a:hover{
+                    text-decoration: none;
+                }
+                .release-info{
+                    p{
+                        margin-right: 7px;
+                    }
+                    em{
+                        width: 101px;
+                    }
+                }
+            }
+        }
+    }
+}
+.wide-screen{
+    .hot-list,.part-title{
+        display: none;
+    }
+    .zq-cloudplay-list{
+        width: 760px;
+        li{
+            &.item9,&.item10{
+                display: none;
+            }
+        }
+    }
+}
+
+.g-tab__bd{
+    .part-title{
+        span{
+            font-size: 14px;
+            color: #66c0f4;
+            background: #131d29;
+            line-height: 30px;
+            padding: 0 12px;
+            display: inline-block;
+        }
+    }
+}
+
 .ZQ__map{
     background-color: #EAEAEA;
     margin-top: 50px;

2017专区/绝地求生/src/_index_new.html

@@ -1462,9 +1462,10 @@
                                 <div class="weapon-detail-box">
                                     <div class="detail-lf">
                                         <div class="detail-hd">
-                                            <h1 class="weapon-title">{{@equip.fullname}}</h1>
-                                            <p class="weapon-bullet">{{@equip.ammunition.nameCN}}
-                                                <img :if="@equip.ammunition" ms-attr="{src:@equip.ammunition.image}" />
+                                            <h1 class="weapon-title">{{@equip.nameCN}}</h1>
+                                            <p class="weapon-bullet" :if="@equip.showAmmunition">
+                                                {{@equip.ammunition.nameCN}}
+                                                <img ms-attr="{src:@equip.ammunition.image}" />
                                             </p>
                                         </div>
                                         <div class="detail-cont">

2017专区/绝地求生/src/modules/index-new.js

@@ -83,6 +83,13 @@ var weaponAsideNicescroll//武器详情右侧滚动条
 var armourNicescroll //防具列表滚动条
 var consumablesNiceScroll //消耗品列表滚动条
 
+var clickWeaponList = false;
+var clickWeaponListTimeOut;
+var clickArmourList = false;
+var clickArmourListTimeOut;
+var clickConsumablesList = false;
+var clickConsumablesListTimeOut;
+
 seaLoader(function (seajs) {
 
     //选择木马
@@ -246,6 +253,28 @@ var V = {
             cursorborder: 'none',
             cursoropacitymax: '0'
         })
+        var titlesTop = [];
+
+        $("#weaponList").scroll(function () {
+            if (clickWeaponList) return;
+
+            var scrollTop = $("#weaponList").scrollTop();
+
+            if (!titlesTop.length) {
+                titlesTop = _.map($("#weaponList").children(), function (ele) {
+                    return scrollTop + $(ele).position().top;
+                })
+            }
+
+
+            var result = 0;
+            _.each(titlesTop, function (top, index) {
+                if (scrollTop >= top) {
+                    result = index;
+                }
+            })
+            vm.weaponIndex = result;
+        })
     },
     initArmourNiceScroll: function () {
         armourNicescroll = $("#armourList").niceScroll({
@@ -254,6 +283,29 @@ var V = {
             cursorborder: 'none',
             cursoropacitymax: '0'
         })
+
+        var titlesTop = [];
+
+        $("#armourList").scroll(function () {
+            if (clickArmourList) return;
+
+            var scrollTop = $("#armourList").scrollTop();
+
+            if (!titlesTop.length) {
+                titlesTop = _.map($("#armourList").children(), function (ele) {
+                    return scrollTop + $(ele).position().top;
+                })
+            }
+
+
+            var result = 0;
+            _.each(titlesTop, function (top, index) {
+                if (scrollTop >= top) {
+                    result = index;
+                }
+            })
+            vm.armourIndex = result;
+        })
     },
     initConsumablesNiceScroll: function () {
         consumablesNiceScroll = $("#consumablesList").niceScroll({
@@ -262,6 +314,28 @@ var V = {
             cursorborder: 'none',
             cursoropacitymax: '0'
         })
+        var titlesTop = []
+
+        $("#consumablesList").scroll(function () {
+            if (clickConsumablesList) return;
+
+            var scrollTop = $("#consumablesList").scrollTop();
+
+            if (!titlesTop.length) {
+                titlesTop = _.map($("#consumablesList").children(), function (ele) {
+                    return scrollTop + $(ele).position().top;
+                })
+            }
+
+
+            var result = 0;
+            _.each(titlesTop, function (top, index) {
+                if (scrollTop >= top) {
+                    result = index;
+                }
+            })
+            vm.consumablesIndex = result;
+        })
     }
 }
 
@@ -316,6 +390,7 @@ var M = {
                         cloneItem.index = equipCount
                         cloneItem.fullname = cloneItem.name + weaponItem.name
                         cloneItem.image = apiUrl + cloneItem.image
+                        cloneItem.showAmmunition = true;
                         cloneWeaponArr.push(cloneItem)
                         weaponItem.weapons.push(cloneItem)
                         equipCount++
@@ -403,6 +478,16 @@ var vm = avalon.define({
 
         this.armourCateIndex = index
 
+        clickArmourList = true;
+
+        var timeout = function () {
+            clickArmourList = false;
+        }
+
+        clearTimeout(clickArmourListTimeOut)
+
+        clickArmourListTimeOut = setTimeout(timeout, 1000);
+
         if (index == 0) {
             $("#armourList").animate({ "scrollTop": 0 }, 500)
         } else {
@@ -436,6 +521,16 @@ var vm = avalon.define({
 
         this.consumablesCateIndex = index
 
+        clickConsumablesList = true;
+
+        var timeout = function () {
+            clickConsumablesList = false;
+        }
+
+        clearTimeout(clickConsumablesListTimeOut)
+
+        clickConsumablesListTimeOut = setTimeout(timeout, 1000);
+
         if (index == 0) {
             $("#consumablesList").animate({ "scrollTop": 0 }, 500)
         } else {
@@ -480,6 +575,16 @@ var vm = avalon.define({
 
         this.weaponIndex = index
 
+        clickWeaponList = true;
+
+        var timeout = function () {
+            clickWeaponList = false;
+        }
+
+        clearTimeout(clickWeaponListTimeOut)
+
+        clickWeaponListTimeOut = setTimeout(timeout, 1000);
+
         if (index == 0) {
             $("#weaponList").animate({ "scrollTop": 0 }, 500)
         } else {
@@ -546,6 +651,11 @@ vm.$watch("equipIndex", function (curIndex) {
     vm.equip = cloneWeaponArr[curIndex]
 
     vm.attachments = makeAttachments(vm.equip)
+    if (vm.equip.ammunition) {
+        vm.equip.showAmmunition = true;
+    } else {
+        vm.equip.showAmmunition = false;
+    }
 
     var attachmentsKeys = ['MuzzleMods',
         'LowerRail',
@@ -561,6 +671,8 @@ vm.$watch("equipIndex", function (curIndex) {
 
     vm.attachment = vm.attachments[attachmentKey] || []
 
+    console.log(vm.equip.showAmmunition)
+
     setTimeout(function () {
         $("#detailAside").getNiceScroll().resize()
     }, 500)

2018专题/1808万王之王专题-商务/src/_index.html

@@ -2,38 +2,538 @@
 <html>
 <head>
     <meta charset="UTF-8">
-    <title>多玩图库Lite</title>
+    <title>万王之王</title>
     <meta name="renderer" content="webkit">
     <meta name="force-rendering" content="webkit">
     <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
     <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
-    <meta name="description" content="多玩游戏，多玩图库，图库小程序，囧图，搞笑GIF">
-    <meta name="keywords" content="图库小程序，囧图，搞笑GIF">
-    <script src="/src/lib/rem.js?__inline"></script><!--ignore-->
+    <meta name="description" content="万王之王">
+    <meta name="keywords" content="万王之王">
+    <script src="/src/lib/rem.js"></script><!--ignore-->
     <link href="sass/global.scss" rel="stylesheet">
 </head>
 <body>
+    <!-- 导航 -->
+    <div class="pub-nav-box">
+        <div class="nav-item current">
+            <i class="icon"></i>
+            <span class="title">首页</span>
+            <img src="./img/nav-current.png" alt="" class="nav-current">
+        </div>
+        <div class="nav-item">
+            <i class="icon"></i>
+            <span class="title">世界观</span>
+            <img src="./img/nav-current.png" alt="" class="nav-current">
+        </div>
+        <div class="nav-item">
+            <i class="icon"></i>
+            <span class="title">职业</span>
+            <img src="./img/nav-current.png" alt="" class="nav-current">
+        </div>
+        <div class="nav-item">
+            <i class="icon"></i>
+            <span class="title">副本</span>
+            <img src="./img/nav-current.png" alt="" class="nav-current">
+        </div>
+        <div class="nav-item">
+            <i class="icon"></i>
+            <span class="title">特色</span>
+            <img src="./img/nav-current.png" alt="" class="nav-current">
+        </div>
+        <div class="nav-item">
+            <i class="icon"></i>
+            <span class="title">评测</span>
+            <img src="./img/nav-current.png" alt="" class="nav-current">
+        </div>
+        <div class="nav-item">
+            <i class="icon"></i>
+            <span class="title">尾页</span>
+            <img src="./img/nav-current.png" alt="" class="nav-current">
+        </div>
+    </div>
+    <!-- 按钮 -->
+    <a href="" target="_blank" class="join-btn"></a>
     <!-- Swiper -->
     <div class="swiper-container">
         <div class="swiper-wrapper">
             <div class="swiper-slide p1">
-                1
+                <img class="main-text" src="./img/p1-logo.png" alt="">
+                <video class="p1-video" autoplay loop id="game-video"></video>
+                <div class="arrow-down-icon"></div>
             </div>
-            <div class="swiper-slide p2">
-                2
+            <div class="swiper-slide p2 tab1-bg">
+                <!-- 喇叭 -->
+                <i class="audio-icon on" id="audio-control"></i>
+                <!-- 遮罩 -->
+                <div class="mask"></div>
+                <!-- 坐标 -->
+                <!-- bg1 -->
+                <div class="box-icon bg1-icon1 bg1-location">
+                    <i class="circle"></i>
+                    <span class="line"></span>
+                    <div class="gif-cover">
+                        <img src="./img/p2-bg.jpg" alt="">
+                    </div>
+                </div>
+                <!-- bg2 -->
+                <div class="box-icon bg2-icon1 bg2-location">
+                    <i class="circle"></i>
+                    <span class="line"></span>
+                    <div class="gif-cover">
+                        <img src="./img/p2-bg.jpg" alt="">
+                    </div>
+                </div>
+                <div class="box-icon bg2-icon2 bg2-location">
+                    <i class="modal-circle" data-href="#bg2-modal"></i>
+                </div>
+                <div class="box-icon bg2-icon3 bg2-location">
+                    <i class="circle"></i>
+                    <span class="line"></span>
+                    <div class="gif-cover">
+                        <img src="./img/p2-bg.jpg" alt="">
+                    </div>
+                </div>
+                <div class="box-icon bg2-icon4 bg2-location">
+                    <i class="circle"></i>
+                    <span class="line"></span>
+                    <div class="gif-cover">
+                        <img src="./img/p2-bg.jpg" alt="">
+                    </div>
+                </div>
+                <!-- bg3 -->
+                <div class="box-icon bg3-icon1 bg3-location">
+                    <i class="circle"></i>
+                    <span class="line"></span>
+                    <div class="gif-cover">
+                        <img src="./img/p2-bg.jpg" alt="">
+                    </div>
+                </div>
+                <div class="box-icon bg3-icon2 bg3-location">
+                    <i class="circle"></i>
+                    <span class="line"></span>
+                    <div class="gif-cover">
+                        <img src="./img/p2-bg.jpg" alt="">
+                    </div>
+                </div>
+                <div class="box-icon bg3-icon3 bg3-location">
+                    <i class="circle"></i>
+                    <span class="line"></span>
+                    <div class="gif-cover">
+                        <img src="./img/p2-bg.jpg" alt="">
+                    </div>
+                </div>
+                <div class="box-icon bg3-icon4 bg3-location">
+                    <i class="circle"></i>
+                    <span class="line"></span>
+                    <div class="gif-cover">
+                        <img src="./img/p2-bg.jpg" alt="">
+                    </div>
+                </div>
+                
+                <!-- 弹窗 -->
+                <div class="p2-modal" id="bg2-modal">
+                    <i class="modal-close-icon"></i>
+                    <h3 class="title">简介</h3>
+                    <p class="text">《万王之王3D》不删档即将在本月下旬到来，魔幻新世界即将开启，史诗盛宴即将呈现，勇士们准备好踏入
+                            坦格拉美亚组队开荒了吗？话说，游戏不删档开启在即，在不删档前我们能参加游戏各渠道开启的哪些福利
+                            活动，领取丰厚的活动礼包、在游戏开测时先人一步呢？
+                            在此活动中，勇士们仅需通过上述链接预约游戏，预约成功即可获得价值200元的预约礼包。礼包包含克朗*
+                            10w、绒布包*1、坐骑：地狱战马*1。除此之外，在此活动中还可通过邀请好友、签到、关注兴趣部落、绑
+                            定手机等方式获得史诗点，集齐一定史诗点即可在史诗商城兑换精通升级礼包、圣印礼包、高级宝石礼包等
+                            游戏珍稀道具礼包，史诗点还可用于抽奖。
+                            除了官网，QQ游戏中心同样开启了《万王之王3D》的游戏福利活动，点击上述链接即可进入此活动中。活
+                            动界面可以预约游戏，预约成功即可获取包含克朗*10w、绒布包*1、坐骑：地狱战马*1、时装皇家卫兵（白
+                            霜)*1的礼包一份。分享此活动并成功邀请好友预约也可在此活动界面领取赤蔷薇*5、佣兵战斗要诀*4、伙伴
+                            ：小企鹅（手Q专属）*1等专享好礼，邀请越多奖励越多。
+                    </p>
+                    <h3 class="title">简介</h3>
+                    <p class="text">《万王之王3D》不删档即将在本月下旬到来，魔幻新世界即将开启，史诗盛宴即将呈现，勇士们准备好踏入
+                            坦格拉美亚组队开荒了吗？话说，游戏不删档开启在即，在不删档前我们能参加游戏各渠道开启的哪些福利
+                            活动，领取丰厚的活动礼包、在游戏开测时先人一步呢？
+                    </p>
+                </div>
+                <div class="p2-bottom-tab">
+                    <div class="two-line"></div>
+                    <div class="tab-item cur-tab" data-bg="tab1-bg">人类</div>
+                    <div class="tab-item" data-bg="tab2-bg">兽人</div>
+                    <div class="tab-item" data-bg="tab3-bg">矮人</div>
+                    <div class="tab-item" data-bg="tab4-bg">精灵</div>
+                </div>
             </div>
-            <div class="swiper-slide p3">
-                3
+            <div class="swiper-slide p3 p3-human-bg1">
+                <div class="human-tab">
+                    <div class="human-tab-item hover" id="changeBg1"></div>
+                    <div class="human-tab-item" id="changeBg2"></div>
+                    <div class="human-tab-item" id="changeBg3"></div>
+                    <div class="human-tab-item" id="changeBg4"></div>
+                </div>
+                <div class="role-info roleWarp">
+                    <div class="role-info-text">
+                        <div class="content on">
+                            <img src="./img/p3-name1.png" alt="">
+                            <span class="span-line"></span>
+                            <h3 class="title">以剑之名，不惧不退</h3>
+                            <p class="text">因黑暗诅咒而被迫外迁的精灵部族，历经无数磨难后，蜕变为信仰圣光的“人类”一族，创造了繁荣文明。</p>
+                            <span class="span-line"></span>
+                        </div>
+                        <div class="content">
+                            <img src="./img/p3-name2.png" alt="">
+                            <span class="span-line"></span>
+                            <h3 class="title">荣耀所指，斧刃所向</h3>
+                            <p class="text">于不毛之地孕育而出的兽人一族，信仰着大地的力量，为了生存，他们唯有不断的战斗，成为真正的强者。</p>
+                            <span class="span-line"></span>
+                        </div>
+                        <div class="content">
+                            <img src="./img/p3-name3.png" alt="">
+                            <span class="span-line"></span>
+                            <h3 class="title">赞美火神的胡子</h3>
+                            <p class="text">生来与矿物为伍的矮人一族，在火神的引领下，逐渐掌握了先进的蒸汽科技，试图重现矮人文明的辉煌时代。</p>
+                            <span class="span-line"></span>
+                        </div>
+                        <div class="content">
+                            <img src="./img/p3-name4.png" alt="">
+                            <span class="span-line"></span>
+                            <h3 class="title">捍卫风的信仰</h3>
+                            <p class="text">崇尚自然与元素的精灵一族诞生于北方丛林，文明日益衰退的精灵部族，在风神的庇佑下，寻求复兴。</p>
+                            <span class="span-line"></span>
+                        </div>
+                    </div>
+                    <!-- 职业 -->
+                    <div class="profession">
+                        <h3>职业介绍</h3>
+                        <div class="tab-skill-box">
+                            <ul class='skill-9' style='left:0px;'>
+                                <li class='icon-doushi icon-spr on'></li>
+                                <li class='icon-mushi icon-spr'></li>
+                                <li class='icon-fashi icon-spr'></li>
+                                <li class='icon-lieren icon-spr'></li>
+                                <li class='icon-sushi icon-spr'></li>
+                                <li class='icon-shenqishi icon-spr'></li>
+                                <li class='icon-qianfuzhe icon-spr'></li>
+                                <li class='icon-zhanshi icon-spr'></li>
+                                <li class='icon-wushi icon-spr'></li>
+                            </ul>
+                        </div>
+                        <div class="skil-text">
+                            <strong class='jop'>斗士</strong>&nbsp;&nbsp;
+                            <strong>定位：</strong>输出&nbsp;
+                            <strong>可转职：</strong>狂战士/武器大师/执政官
+                            <p>斗士追求力量的极致，只凭手中的武器，掀起钢铁的风暴。</p>
+                        </div>
+                        <a href="javascript:;" class="skill-prev"></a>
+                        <a href="javascript:;" class="skill-next"></a>
+                    </div>
+                    <!-- 技能 -->
+                    <div class="skill-box">
+                        <h3>技能介绍</h3>
+                        <div class="skill-list on">
+                            <div class="tab-skill-box">
+                                <ul class='skill-9' style='left:0px;'>
+                                    <li class='icon-ds-1 icon-spr on'></li>
+                                    <li class='icon-ds-2 icon-spr'></li>
+                                    <li class='icon-ds-3 icon-spr'></li>
+                                    <li class='icon-ds-4 icon-spr'></li>
+                                    <li class='icon-ds-5 icon-spr'></li>
+                                    <li class='icon-ds-6 icon-spr'></li>
+                                    <li class='icon-ds-7 icon-spr'></li>
+                                </ul>
+                            </div>
+                            <a href="javascript:;" class="skill-prev"></a>
+                            <a href="javascript:;" class="skill-next"></a>
+                            <div class="skil-text">
+                                <strong class='jop'>
+                                    <span class='skill-name'>自动攻击</span>
+                                </strong>&nbsp;&nbsp;
+                                <strong></strong>
+                                <span class='skill-dec'></span>
+                                <p>连续的攻击，对目标造成一定的物理伤害并获得怒气。武器速度越慢，伤害越高，获得的怒气也越多。</p>
+                            </div>
+                        </div>
+                        <div class="skill-list">
+                            <div class="tab-skill-box">
+                                <ul class='skill-9' style='left:0px;'>
+                                    <li class='icon-ms-1 icon-spr on'></li>
+                                    <li class='icon-ms-2 icon-spr'></li>
+                                    <li class='icon-ms-3 icon-spr'></li>
+                                    <li class='icon-ms-4 icon-spr'></li>
+                                    <li class='icon-ms-5 icon-spr'></li>
+                                    <li class='icon-ms-6 icon-spr'></li>
+                                    <li class='icon-ms-7 icon-spr'></li>
+                                    <li class='icon-ms-8 icon-spr'></li>
+                                </ul>
+                            </div>
+                            <a href="javascript:;" class="skill-prev"></a>
+                            <a href="javascript:;" class="skill-next"></a>
+                            <div class="skil-text">
+                                <strong class='jop'>
+                                    <span class='skill-name'>惩戒之光</span>
+                                </strong>&nbsp;&nbsp;
+                                <strong></strong>
+                                <span class='skill-dec'></span>
+                                <p>引导纯粹光芒惩戒敌人，连续攻击目标四次，对其造成一定的法术伤害；武器速度越慢，伤害越高。</p>
+                            </div>
+                        </div>
+                        <div class="skill-list">
+                            <div class="tab-skill-box">
+                                <ul class='skill-9' style='left:0px;'>
+                                    <li class='icon-fs-1 icon-spr on'></li>
+                                    <li class='icon-fs-2 icon-spr'></li>
+                                    <li class='icon-fs-3 icon-spr'></li>
+                                    <li class='icon-fs-4 icon-spr'></li>
+                                    <li class='icon-fs-5 icon-spr'></li>
+                                    <li class='icon-fs-6 icon-spr'></li>
+                                    <li class='icon-fs-7 icon-spr'></li>
+                                </ul>
+                            </div>
+                            <a href="javascript:;" class="skill-prev"></a>
+                            <a href="javascript:;" class="skill-next"></a>
+                            <div class="skil-text">
+                                <strong class='jop'>
+                                    <span class='skill-name'>冰棱</span>
+                                </strong>&nbsp;&nbsp;
+                                <strong></strong>
+                                <span class='skill-dec'></span>
+                                <p>四次连续的攻击，对敌人造成一定的法术伤害。武器速度越慢，伤害越高。</p>
+                            </div>
+                        </div>
+                        <div class="skill-list">
+                            <div class="tab-skill-box">
+                                <ul class='skill-9' style='left:0px;'>
+                                    <li class='icon-ss-1 icon-spr on'></li>
+                                    <li class='icon-ss-2 icon-spr'></li>
+                                    <li class='icon-ss-3 icon-spr'></li>
+                                    <li class='icon-ss-4 icon-spr'></li>
+                                    <li class='icon-ss-5 icon-spr'></li>
+                                    <li class='icon-ss-6 icon-spr'></li>
+                                    <li class='icon-ss-7 icon-spr'></li>
+                                </ul>
+                            </div>
+                            <a href="javascript:;" class="skill-prev"></a>
+                            <a href="javascript:;" class="skill-next"></a>
+                            <div class="skil-text">
+                                <strong class='jop'>
+                                    <span class='skill-name'>自动攻击</span>
+                                </strong>&nbsp;&nbsp;
+                                <strong></strong>
+                                <span class='skill-dec'></span>
+                                <p>连续的射击，对目标造成一定的物理伤害，武器速度越慢，伤害越高。</p>
+                            </div>
+                        </div>
+                        <div class="skill-list">
+                            <div class="tab-skill-box">
+                                <ul class='skill-9' style='left:0px;'>
+                                    <li class='icon-haxz-1 icon-spr on'></li>
+                                    <li class='icon-haxz-2 icon-spr'></li>
+                                    <li class='icon-haxz-3 icon-spr'></li>
+                                    <li class='icon-haxz-4 icon-spr'></li>
+                                    <li class='icon-haxz-5 icon-spr'></li>
+                                    <li class='icon-haxz-6 icon-spr'></li>
+                                    <li class='icon-haxz-7 icon-spr'></li>
+                                    <li class='icon-haxz-8 icon-spr'></li>
+                                </ul>
+                            </div>
+                            <a href="javascript:;" class="skill-prev"></a>
+                            <a href="javascript:;" class="skill-next"></a>
+                            <div class="skil-text">
+                                <strong class='jop'>
+                                    <span class='skill-name'>幽影矢</span>
+                                </strong>&nbsp;&nbsp;
+                                <strong></strong>
+                                <span class='skill-dec'></span>
+                                <p>四次连续的攻击，对敌人造成一定的法术伤害。武器速度越慢，伤害越高。</p>
+                            </div>
+                        </div>
+                        <div class="skill-list">
+                            <div class="tab-skill-box">
+                                <ul class='skill-9' style='left:0px;'>
+                                    <li class='icon-sqs-1 icon-spr on'></li>
+                                    <li class='icon-sqs-2 icon-spr'></li>
+                                    <li class='icon-sqs-3 icon-spr'></li>
+                                    <li class='icon-sqs-4 icon-spr'></li>
+                                    <li class='icon-sqs-5 icon-spr'></li>
+                                    <li class='icon-sqs-6 icon-spr'></li>
+                                    <li class='icon-sqs-7 icon-spr'></li>
+                                </ul>
+                            </div>
+                            <a href="javascript:;" class="skill-prev"></a>
+                            <a href="javascript:;" class="skill-next"></a>
+                            <div class="skil-text">
+                                <strong class='jop'>
+                                    <span class='skill-name'>自动攻击</span>
+                                </strong>&nbsp;&nbsp;
+                                <strong></strong>
+                                <span class='skill-dec'></span>
+                                <p>连续的攻击，对目标造成一定的物理伤害。武器速度越慢，伤害越高。</p>
+                            </div>
+                        </div>
+                        <div class="skill-list">
+                            <div class="tab-skill-box">
+                                <ul class='skill-9' style='left:0px;'>
+                                    <li class='icon-qfz-1 icon-spr on on'></li>
+                                    <li class='icon-qfz-2 icon-spr'></li>
+                                    <li class='icon-qfz-3 icon-spr'></li>
+                                    <li class='icon-qfz-4 icon-spr'></li>
+                                    <li class='icon-qfz-5 icon-spr'></li>
+                                    <li class='icon-qfz-6 icon-spr'></li>
+                                    <li class='icon-qfz-7 icon-spr'></li>
+                                    <li class='icon-qfz-8 icon-spr'></li>
+                                </ul>
+                            </div>
+                            <a href="javascript:;" class="skill-prev"></a>
+                            <a href="javascript:;" class="skill-next"></a>
+                            <div class="skil-text">
+                                <strong class='jop'>
+                                    <span class='skill-name'>自动攻击</span>
+                                </strong>&nbsp;&nbsp;
+                                <strong></strong>
+                                <span class='skill-dec'></span>
+                                <p>连续的攻击，对目标造成一定的物理伤害。武器速度越慢，伤害越高。</p>
+                            </div>
+                        </div>
+                        <div class="skill-list">
+                            <div class="tab-skill-box">
+                                <ul class='skill-9' style='left:0px;'>
+                                    <li class='icon-zs-1 icon-spr on'></li>
+                                    <li class='icon-zs-2 icon-spr'></li>
+                                    <li class='icon-zs-3 icon-spr'></li>
+                                    <li class='icon-zs-4 icon-spr'></li>
+                                    <li class='icon-zs-5 icon-spr'></li>
+                                    <li class='icon-zs-6 icon-spr'></li>
+                                    <li class='icon-zs-7 icon-spr'></li>
+                                </ul>
+                            </div>
+                            <a href="javascript:;" class="skill-prev"></a>
+                            <a href="javascript:;" class="skill-next"></a>
+                            <div class="skil-text">
+                                <strong class='jop'>
+                                    <span class='skill-name'>自动攻击</span>
+                                </strong>&nbsp;&nbsp;
+                                <strong></strong>
+                                <span class='skill-dec'></span>
+                                <p>连续的攻击，对目标造成一定的物理伤害并获得5点怒气。武器速度越慢，伤害越高。</p>
+                            </div>
+                        </div>
+                        <div class="skill-list">
+                            <div class="tab-skill-box">
+                                <ul class='skill-9' style='left:0px;'>
+                                    <li class='icon-mds-1 icon-spr on'></li>
+                                    <li class='icon-mds-2 icon-spr'></li>
+                                    <li class='icon-mds-3 icon-spr'></li>
+                                    <li class='icon-mds-4 icon-spr'></li>
+                                    <li class='icon-mds-5 icon-spr'></li>
+                                    <li class='icon-mds-6 icon-spr'></li>
+                                    <li class='icon-mds-7 icon-spr'></li>
+                                </ul>
+                            </div>
+                            <a href="javascript:;" class="skill-prev"></a>
+                            <a href="javascript:;" class="skill-next"></a>
+                            <div class="skil-text">
+                                <strong class='jop'>
+                                    <span class='skill-name'>奥术箭</span>
+                                </strong>&nbsp;&nbsp;
+                                <strong></strong>
+                                <span class='skill-dec'></span>
+                                <p>发射纯粹的奥术能量攻击敌人，连续攻击目标四次，对其造成一定的法术伤害；武器速度越慢，伤害越高。</p>
+                            </div>
+                        </div>
+                    </div>        
+                </div>
             </div>
             <div class="swiper-slide p4">
-                4
+                <div class="cartoon-box">
+                    <div class="cartoon1 animated delay-200"></div>
+                    <div class="cartoon2 animated delay-800"></div>
+                    <div class="cartoon3 animated delay-600"></div>
+                    <div class="cartoon4 animated delay-400"></div>
+                </div>
+                <div class="cover-bg"></div>
+                <div class="p4-video-wrapper">
+                    <video class="animated delay-1000" id="p4-video" preload="metadata"></video>
+                </div>
+                <div class="control-box">
+                    <div class="play-icon"></div>
+                </div>
             </div>
             <div class="swiper-slide p5">
-                5
+                <video class="full-video" id="p5-video1" loop preload="metadata"></video>
+                <video style="display: none;" class="full-video" id="p5-video2" loop preload="metadata"></video>
+                <video style="display: none;" class="full-video" id="p5-video3" loop preload="metadata"></video>
+                <div class="p5-bottom-tab">
+                    <div class="two-line"></div>
+                    <div class="tab-item cur-tab" data-video="1">家园建造</div>
+                    <div class="tab-item" data-video="2">自由飞行</div>
+                    <div class="tab-item" data-video="3">指尖开荒</div>
+                </div>
+            </div>
+            <div class="swiper-slide p6">
+                <div class="scroll-main" id="scroll-main">
+                    <div class="main-banner clearfix">
+                        <img class="poster" src="./img/p3-bg2.jpg" alt="">
+                        <div class="main-info">
+                            <h3 class="title">十八年经典，共造新世界</h3>
+                            <p class="text">在游戏中，第一重要的自然要数经验了，只有经验值够了，才能让我们快速升级，
+                                进而解锁游戏的一些其他功能。所以初入<span>游戏的萌新</span>，首先不能错过的就是主线
+                                任务，主线任务不仅可以给萌新带来巨额的游戏经验，还会帮助<span>萌新</span>快速了解整
+                                个游戏世界。其次就是日常任务中的各种活动啦，参加活动既可以获得经验，还
+                                可以获得游戏中必须的珍贵道具和装备。</p>
+                        </div>
+                    </div>
+                    <div class="main-intro">
+                        <h3 class="title">一级标题</h3>
+                        <div class="text">除了<span>经验等级</span>，萌新在游戏中的战力也是非常重要的，而战力最主要的提升途径就是装备，在《万王之王3D手游》中，装备等级由低至高分别是白色、
+                            绿色、蓝色、紫色、橙色，了解了这些颜色所代表的等级，萌新在穿戴装备时就可以有目的地进行取舍，以免胡乱穿戴导致战力忽高忽低，最后追悔莫
+                            及。等级低的装备换下来之后，可以进行洗炼，将低等装备上的属性洗炼到等级高的装备上，这样才能算是物尽其用。</div>
+                        <img src="./img/example-pic.jpg" class="center-img" alt="">
+                        <div class="text">
+                            除了经验等级，萌新在游戏中的战力也是非常重要的，而战力最主要的提升途径就是装备，在《万王之王3D手游》中，装备等级由低至高分别是白色、
+                            绿色、蓝色、紫色、橙色，了解了这些颜色所代表的等级，萌新在穿戴装备时就可以有目的地进行取舍，以免胡乱穿戴导致战力忽高忽低，最后追悔莫
+                            及。等级低的装备换下来之后，可以进行洗炼，将低等装备<span>经验等级</span>上的属性洗炼到等级高的装备上，这样才能算是物尽其用。除了经验等级，萌新在游戏中的
+                            战力也是非常重要的，而战力最主要的提升途径就是装备，在《万王之王3D手游》中.
+                            装备等级由低至高分别是白色、绿色、蓝色、紫色、橙色，了解了这些颜色所代表的等级，萌新在穿戴装备时就可以有目的地进行取舍，以免胡乱穿戴
+                            导致战力忽高忽低，最后追悔莫
+                            及。等级低的装备换下来之后，可以进行洗炼，将低等装备上的属性洗炼到等级高的装备上，这样才能算是物尽其用。除了经验等级，萌新在游戏中的
+                            战力也是非常重要的，而战力最主要的提升途径就是装备，在《万王之王3D手游》中，装备等级由低至高分别是白色、
+                        </div>
+                        <h3 class="title">一级标题</h3>
+                        <div class="text">除了<span>经验等级</span>，萌新在游戏中的战力也是非常重要的，而战力最主要的提升途径就是装备，在《万王之王3D手游》中，装备等级由低至高分别是白色、
+                            绿色、蓝色、紫色、橙色，了解了这些颜色所代表的等级，萌新在穿戴装备时就可以有目的地进行取舍，以免胡乱穿戴导致战力忽高忽低，最后追悔莫
+                            及。等级低的装备换下来之后，可以进行洗炼，将低等装备上的属性洗炼到等级高的装备上，这样才能算是物尽其用。</div>
+                        <img src="./img/example-pic.jpg" class="center-img" alt="">
+                        <div class="text">
+                            绿色、蓝色、紫色、橙色，了解了这些<span>经验等级</span>颜色所代表的等级，萌新在穿戴装备时就可以有目的地进行取舍，以免胡乱穿戴导致战力忽高忽低，除了经验等级，萌新在游戏中的战力也是非常重要的，而战力最主要的提升途径就是装备，在《万王之王3D手游》中，装备等级由低至高分别是白色、
+                            绿色、蓝色、紫色、橙色，了解了这些颜色所代表的等级，萌新在穿戴装备时就可以有目的地进行取舍，以免胡乱穿戴导致战力忽高忽低，最后追悔莫
+                            及。等级低的装备换下来之后，可以进行洗炼，将低等<span>经验等级</span>装备上的属性洗炼到等级高的装备上，这样才能算是物尽其用。除了经验等级，萌新在游戏中的
+                            战力也是非常重要的，而战力最主要的提升途径就是装备，在《万王之王3D手游》中.
+                            装备等级由低至高分别是白色、绿色、蓝色、紫色、橙色，了解了这些颜色所代表的等级，萌新在穿戴装备时就可以有目的地进行取舍，以免胡乱穿戴
+                            导致战力忽高忽低，最后追悔莫
+                            及。等级低的装备换下来之后，可以进行洗炼，将低等装备上的属性洗炼到等级高的装备上，这样才能算是物尽其用。除了经验等级，萌新在游戏中的
+                            战力也是非常重要的，而战力最主要的提升途径就是装备，在《万王之王3D手游》中，装备等级由低至高分别是白色、
+                            绿色、蓝色、紫色、橙色，了解了这些颜色所代表的等级，萌新在穿戴装备时就可以有目的地进行取舍，以免胡乱穿戴导致战力忽高忽低，
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <div class="swiper-slide p7">
+                <div class="animBox">
+                    <img src="./img/p7-circle1.png" alt="" class="dial1">
+                    <img src="./img/p7-circle2.png" alt="" class="dial2">
+                    <img src="./img/p7-logo.png" alt="" class="slogan">
+                    <div class="kv-order-box">
+                        <div class="order-kv-num">
+                            <span id="Show_allRsvtNum">5119843</span>
+                        </div>
+                        <p>|当前官网预约人数|</p>
+                    </div>
+                </div>
+                <div class="btn-box">
+                    <a href="javascript:" class="game-btn game-btn-web"></a>
+                    <a href="javascript:" class="game-btn game-btn-test"></a>
+                    <a href="javascript:" class="game-btn game-btn-back"></a>
+                </div>
             </div>
         </div>
         <!-- Add Pagination -->
-        <div class="swiper-pagination"></div>
+        <!-- <div class="swiper-pagination"></div> -->
     </div>
     <!-- <div class="arrow-icon"></div> -->
     <script src="//pub.dwstatic.com/common/js/jquery.js"></script><!--ignore-->

2018专题/1808万王之王专题-商务/src/json/skill.js

@@ -0,0 +1,343 @@
+var skillArr=[[{
+    "job":"斗士",
+    "skillName":"自动攻击",
+    "skillDec":"",
+    "skillDetail":"连续的攻击，对目标造成一定的物理伤害并获得怒气。武器速度越慢，伤害越高，获得的怒气也越多。"
+},{
+    "job":"斗士",
+    "skillName":"猛力攻击",
+    "skillDec":"单体伤害核心，重伤",
+    "skillDetail":"残忍且强力的一击，对目标造成一定物理伤害。使目标重伤，受到的治疗效果降低30%，持续6秒。本技能有2次充能。"
+},{
+    "job":"斗士",
+    "skillName":"旋风攻击",
+    "skillDec":"群体伤害",
+    "skillDetail":"掀起一阵旋风攻击，对4米范围内若干个目标造成一定物理伤害。"
+},{
+    "job":"斗士",
+    "skillName":"狂乱",
+    "skillDec":"生成怒气，造成狂暴",
+    "skillDetail":"强力的一击，对目标造成一定物理伤害并恢复自身相当于3倍力量属性的生命，产生中量怒气。狂乱暴击时使自身狂暴，狂暴状态下使用普通攻击将获得额外怒气。"
+},{
+    "job":"斗士",
+    "skillName":"崩裂之刃",
+    "skillDec":"强力增伤，爆发起手技能",
+    "skillDetail":"猛烈的一击，对目标造成一定物理伤害，同时使你对其造成的伤害提高，效果持续。"
+},{
+    "job":"斗士",
+    "skillName":"跳斩",
+    "skillDec":"战术突进，群体减速",
+    "skillDetail":"朝目标区域腾空跃起，以毁灭性力量重击地面，产生中量怒气，对4米范围内若干个目标造成一定物理伤害并使其减速，持续10秒，且自身获得自由效果（免疫移动限制）持续3秒。"
+},{
+    "job":"斗士",
+    "skillName":"致命一击",
+    "skillDec":"超高单体伤害，斩杀",
+    "skillDetail":"（目标生命值低于20%时激活）终结目标，对其造成一定物理伤害。（此技能不受公共冷却影响）"
+}],[{
+    "job":"牧师",
+    "skillName":"惩戒之光",
+    "skillDec":"",
+    "skillDetail":"引导纯粹光芒惩戒敌人，连续攻击目标四次，对其造成一定的法术伤害；武器速度越慢，伤害越高。"
+},{
+    "job":"牧师",
+    "skillName":"焰击术",
+    "skillDec":"单体瞬发伤害，点燃，减速",
+    "skillDetail":"圣焰从天而降，对目标造成一定点神圣伤害，将其点燃并减速，每2秒受到一定点法术伤害，效果持续14秒，点燃效果最多可叠加2次。同时你会获得圣焰涌动的效果，立即回复一定法力最大值的法力，并使接下来的8秒内，惩戒之光的伤害提升30%。"
+},{
+    "job":"牧师",
+    "skillName":"光耀脉冲",
+    "skillDec":"近战范围伤害",
+    "skillDetail":"神圣的光芒脉冲状向四周喷发，使5米范围内若干个敌方目标受到一定点法术伤害，并使其命中率降低一定，持续6秒。（每次施放有20%的几率重置焰击术的冷却）"
+},{
+    "job":"牧师",
+    "skillName":"虔诚护盾",
+    "skillDec":"强力护盾",
+    "skillDetail":"治疗目标并为目标施加虔诚护盾，护盾最多可吸收一定点的伤害，治疗量则为护盾吸收值的10%，效果持续15秒。护盾存在期间，使目标受治疗效果增加10%。"
+},{
+    "job":"牧师",
+    "skillName":"治疗真言",
+    "skillDec":"群体治疗，高蓝耗",
+    "skillDetail":"释放治疗真言，为目标及目标周围一定个友方单位恢复一定点生命值。（每次使用治疗真言，将使律令：愈合减少6秒冷却时间）"
+},{
+    "job":"牧师",
+    "skillName":"天使降临",
+    "skillDec":"战术位移，强力应急治疗，清除仇恨",
+    "skillDetail":"化身为天使飞向友方目标，治疗降落位置20米半径内最多6个友方目标一定点生命值，选中的目标会额外获得持续6秒的天使降临效果，每3秒恢复一定点生命值。同时，清除自身造成的仇恨值，并在一段时间内获得一定伤害减免和一定的移动速度提升；如果没有友方目标，则不会飞行，而是原地获得上述效果。"
+},{
+    "job":"牧师",
+    "skillName":"律令：愈合",
+    "skillDec":"强力群体治疗，驱散负面效果",
+    "skillDetail":"（仅限战斗状态下，周围20米内有团队成员或选定的友方目标生命值低于70%时激活）呼唤神力治疗自身周围至多6名友方目标，为其恢复一定点生命值，并驱散所有负面状态。"
+},{
+    "job":"牧师",
+    "skillName":"群体复生",
+    "skillDec":"复活队友，仅脱战可用",
+    "skillDetail":"（当30米内有团队成员死亡或选定友方目标死亡时激活，在战斗状态下无法使用，并且受到攻击时会立刻中断。）借助神圣之力，复活范围内所有死亡的友方玩家，并使其恢复35%最大生命值。"
+}],[{
+    "job":"法师",
+    "skillName":"冰棱",
+    "skillDec":"",
+    "skillDetail":"四次连续的攻击，对敌人造成一定的法术伤害。武器速度越慢，伤害越高。"
+},{
+    "job":"法师",
+    "skillName":"冰霜箭",
+    "skillDec":"单体伤害核心，吟唱，减速",
+    "skillDetail":"四次连续的攻击，对敌人造成一定的法术伤害。武器速度越慢，伤害越高。"
+},{
+    "job":"法师",
+    "skillName":"冰霜之环",
+    "skillDec":"瞬发定身控制",
+    "skillDetail":"唤起冰霜之力冲击目标及其周围5米内的目标，对敌人造成一定点冰霜伤害并将其定身。被选中的主要目标会额外受到一次伤害。"
+},{
+    "job":"法师",
+    "skillName":"延迟爆裂",
+    "skillDec":"群体伤害核心，传染爆炸",
+    "skillDetail":"将一颗烈焰炸弹置入目标体内，将其点燃持续6秒，每秒造成一定点火焰伤害。6秒后目标将爆炸，对周围5米内至多10个目标造成相当于每秒燃烧伤害4倍的爆炸伤害。爆炸击中的目标将被传染炸弹，并在6秒后进行第二次爆炸，但被传染的目标不会受到点燃伤害，爆炸也不会进行第二次传染。"
+},{
+    "job":"法师",
+    "skillName":"陨石术",
+    "skillDec":"强力群体伤害，减速",
+    "skillDetail":"召唤一颗陨石，1秒后从天而降，对5米范围内目标造成一定点火焰伤害，打断正在施法的目标，并使击中的目标移动速度降低40%，如果成功打断了施法，还会额外造成短暂的沉默效果。陨石火焰会灼烧大地，8秒内持续伤害范围内目标，每次一定火焰伤害。"
+},{
+    "job":"法师",
+    "skillName":"移形换影",
+    "skillDec":"战术瞬移，解除控制，护盾",
+    "skillDetail":"折叠次元，瞬间向前方移动一定的距离，解除所有控制效果，并额外获得一个护盾，吸收一定的点伤害（随攻击提升），持续一定的时间。移形换影不能穿过障碍物。"
+},{
+    "job":"法师",
+    "skillName":"冰封结界",
+    "skillDec":"终极自保，无敌，回复",
+    "skillDetail":"（自身生命值低于40%时激活）凝聚寒冰之晶包裹自己，期间免疫受到的任何伤害，且每2秒回复一定的点生命（随攻击提升），效果持续一段时间。"
+}],[{
+    "job":"射手",
+    "skillName":"自动攻击",
+    "skillDec":"",
+    "skillDetail":"连续的射击，对目标造成一定的物理伤害，武器速度越慢，伤害越高。"
+},{
+    "job":"射手",
+    "skillName":"快速射击",
+    "skillDec":"单体伤害核心",
+    "skillDetail":"快速的射击目标3次，造成一定点物理伤害。"
+},{
+    "job":"射手",
+    "skillName":"鹰击长空",
+    "skillDec":"直线范围伤害，回复能量核心",
+    "skillDetail":"射出一支化为巨鹰的箭矢，攻击前方直线范围内若干个敌人，造成一定物理伤害，并为自身恢复35点能量和相当于敏捷属性3倍的生命值，本技能有2次充能。"
+},{
+    "job":"射手",
+    "skillName":"牵制射击",
+    "skillDec":"范围伤害，减速",
+    "skillDetail":"对目标周围5米的区域释放出箭雨，在2秒内造成2次物理伤害，每次一定点，并使击中的所有目标减速。"
+},{
+    "job":"射手",
+    "skillName":"乱射",
+    "skillDec":"强力范围伤害，需引导",
+    "skillDetail":"向自身与目标之间的扇形区域扫射，每次对区域内若干个目标造成一定物理伤害，最多造成10次伤害。每次伤害消耗6点能量。"
+},{
+    "job":"射手",
+    "skillName":"逃脱",
+    "skillDec":"战术逃脱，范围定身",
+    "skillDetail":"向后跳跃10米，并在起跳位置周围5米放出捕网，使范围内若干个敌人定身，持续5秒，并在一段时间每3秒受到一定流血伤害（随攻击力提高），并提升自身移动速度30%，持续一段时间。"
+},{
+    "job":"射手",
+    "skillName":"麻痹毒箭",
+    "skillDec":"近身自保，群体迷惑，击退",
+    "skillDetail":"（仅限战斗状态下，自身周围10米内有敌对目标时激活）发射数支带有麻痹毒素的强力毒箭，击退周围敌对目标并造成一定物理伤害，使击中的目标睡眠一段时间，中毒，中毒期间目标每2秒受到一定点伤害，如果在中毒持续期间你消灭了任意目标，则重置毒箭的冷却。睡眠的目标如果受到攻击会提前醒来。"
+}],[{
+    "job":"黑暗贤者",
+    "skillName":"幽影矢",
+    "skillDec":"",
+    "skillDetail":"四次连续的攻击，对敌人造成一定的法术伤害。武器速度越慢，伤害越高。"
+},{
+    "job":"黑暗贤者",
+    "skillName":"生命汲取",
+    "skillDec":"单体引导伤害，吸血",
+    "skillDetail":"在6秒内不断吸取目标生命，每1秒造成一定点法术伤害，并将造成伤害的100%转化为自身生命值。当自身生命满时，吸取的生命能量能够治疗自身周围队友一定点生命值。"
+},{
+    "job":"黑暗贤者",
+    "skillName":"焚血术",
+    "skillDec":"群体伤害，群体治疗",
+    "skillDetail":"对目标周围5米造成一定点伤害并附加重伤效果，使目标受到的治疗效果降低20%；此外还会治疗目标周围10米内的最多3个友方一定点生命。"
+},{
+    "job":"黑暗贤者",
+    "skillName":"暗影治愈",
+    "skillDec":"瞬发应急治疗，带负面效果",
+    "skillDetail":"以暗影的威能为目标治疗，使其立即恢复一定点生命值，但会对目标附加暗影代价，在接下来的内，目标受到的所有治疗都会被吸收40%，直到其受到相当于本法术治疗量120%的总治疗为止。反复对同一个目标施放暗影治愈会导致新的暗影代价覆盖旧的代价。本技能不能对生命已满的目标使用。"
+},{
+    "job":"黑暗贤者",
+    "skillName":"幽冥鬼爪",
+    "skillDec":"范围伤害，群体吸血",
+    "skillDetail":"目标位置涌出鬼爪，在8秒内对范围内若干个敌人造成共9次，每次一定点法术伤害。击中带有重伤状态的目标时，目标将被定身3秒。鬼爪持续期间，你将除溅射伤害以外的所有伤害的20%转化为对周围友方的治疗。"
+},{
+    "job":"黑暗贤者",
+    "skillName":"魔雾护身",
+    "skillDec":"无敌，降低仇恨",
+    "skillDetail":"化作一团魔雾，降低你对敌人的仇恨，此后的4秒内无敌，且每0.5秒对自身周围最多6个友方目标造成一定点治疗。"
+},{
+    "job":"黑暗贤者",
+    "skillName":"生命回馈",
+    "skillDec":"消耗生命，回复法力",
+    "skillDetail":"（自身法力低于60%，生命高于40%时激活）分流生命能量，以自身10%最大生命值为代价，回复一定法力值，并提升攻击力，持续一定时间。"
+},{
+    "job":"黑暗贤者",
+    "skillName":"死者复活",
+    "skillDec":"复活队友，仅脱战可用",
+    "skillDetail":"（当30米内有团队成员死亡或选定友方目标死亡时激活，在战斗状态下无法使用，并且受到攻击时会立刻中断。）利用黑暗的力量，使死者复活。复活范围内死亡的友方玩家，并使他们恢复35%的最大生命值。"
+}],[{
+    "job":"圣骑士",
+    "skillName":"自动攻击",
+    "skillDec":"",
+    "skillDetail":"连续的攻击，对目标造成一定的物理伤害。武器速度越慢，伤害越高。"
+},{
+    "job":"圣骑士",
+    "skillName":"惩戒之盾",
+    "skillDec":"远程打断沉默",
+    "skillDetail":"向目标投掷盾牌，弹射至附近的几个目标，造成一定神圣伤害，并打断其施法且造成3秒沉默，产生大量仇恨值。"
+},{
+    "job":"圣骑士",
+    "skillName":"神圣盾击",
+    "skillDec":"强力单体伤害，自身防御核心",
+    "skillDetail":"用盾牌发起强大攻击，对目标造成一定神圣伤害，产生大量仇恨值，并使自身护甲和抗性提高一定力量值，持续一段时间，重复使用将使防御提高效果的时间累加。"
+},{
+    "job":"圣骑士",
+    "skillName":"正义烙印",
+    "skillDec":"区域范围伤害",
+    "skillDetail":"将圣力注入大地，在9秒内每秒对范围内若干个目标造成一定点神圣伤害，并使他们命中率降低20%。"
+},{
+    "job":"圣骑士",
+    "skillName":"神圣之握",
+    "skillDec":"远程拉回，嘲讽",
+    "skillDetail":"用神圣的力场笼罩目标区域，将至多几个目标拉回到身前并对他们进行嘲讽，造成一定神圣伤害。"
+},{
+    "job":"圣骑士",
+    "skillName":"天界战马",
+    "skillDec":"召唤战马，提升机动",
+    "skillDetail":"召唤一匹天界战马进行骑乘，持续，期间你的护甲和抗性提高,移动速度提高一定并免疫移动限制效果,且可使用额外技能：骑乘冲锋，朝目标位置冲锋，对路径上的所有敌人造成物理伤害并将他们击倒。"
+},{
+    "job":"圣骑士",
+    "skillName":"复苏之光",
+    "skillDec":"群体伤害，自我治疗",
+    "skillDetail":"（自身生命低于80%时激活）光芒治愈你并惩戒你的敌人，对自身周围5米内的所有敌方目标造成一定伤害，并恢复自身相当于一定力量属性的生命值，你的生命值越低，治疗量就越高，最高可造成初始治疗值2倍的治疗。"
+}],[{
+    "job":"潜伏者",
+    "skillName":"自动攻击",
+    "skillDec":"",
+    "skillDetail":"连续的攻击，对目标造成一定的物理伤害。武器速度越慢，伤害越高。"
+},{
+    "job":"潜伏者",
+    "skillName":"精准打击",
+    "skillDec":"单体伤害核心，积攒杀气",
+    "skillDetail":"打击技，快速使用武器打击敌人，对目标造成一定物理伤害，并获得1杀气值。在隐匿和影舞状态下使用此技能可额外造成50%伤害。"
+},{
+    "job":"潜伏者",
+    "skillName":"直捣要害",
+    "skillDec":"强力单体伤害，倾泻杀气",
+    "skillDetail":"终结技，消耗1点杀气时造成一定物理伤害，每多消耗1点杀气值，伤害额外提升100%。最多消耗5点杀气造成5倍伤害。"
+},{
+    "job":"潜伏者",
+    "skillName":"魅影切割",
+    "skillDec":"强力控制，持续伤害，倾泻杀气",
+    "skillDetail":"终结技，消耗1点杀气时，使目标减速，并每2秒造成一定流血伤害，持续8秒，此外使敌人昏迷1秒，每多消耗1点杀气值，流血和减速时间延长4秒，且昏迷时间延长1秒。最多消耗5点杀气造成24秒流血和减速，并使敌人昏迷5秒。"
+},{
+    "job":"潜伏者",
+    "skillName":"幻影剑舞",
+    "skillDec":"群体伤害，积攒杀气",
+    "skillDetail":"打击技，向四周投掷出匕首，对4米范围内的若干个敌人造成一定物理伤害，并获得1点杀气值。"
+},{
+    "job":"潜伏者",
+    "skillName":"隐匿",
+    "skillDec":"潜行，杀敌获得充能",
+    "skillDetail":"提升自身物理攻击，持续一定时间。在非战斗状态下使用时，会隐藏自己的气息，使得敌人无法察觉到你，移动速度提高，持续一定时间。当你进行攻击或受到伤害时，隐匿效果将提前消失。"
+},{
+    "job":"潜伏者",
+    "skillName":"影遁",
+    "skillDec":"突进，控制，积攒杀气",
+    "skillDetail":"（需使用隐匿技能后激活并立刻重置冷却）打击技，透过暗影，快速穿越至目标身后，使其昏迷，对其造成一定物理伤害，并在18秒内造成同等的流血伤害，并获得2点杀气值。"
+},{
+    "job":"潜伏者",
+    "skillName":"烟雾弹",
+    "skillDec":"超强自保，强行隐身脱战",
+    "skillDetail":"（仅当战斗状态下，自身生命值低于60%时可用）引爆烟雾弹，使自身周围的敌对目标迷惑，持续8秒；同时完全清除自身造成的仇恨，脱离战斗并进入隐匿状态，持续60秒，其中前3秒处于无敌状态且移动速度提高100%。敌方目标被击中会解除迷惑状态。使用此技能会停止自动攻击。"
+}],[{
+    "job":"战士",
+    "skillName":"自动攻击",
+    "skillDec":"",
+    "skillDetail":"连续的攻击，对目标造成一定的物理伤害并获得5点怒气。武器速度越慢，伤害越高。"
+},{
+    "job":"战士",
+    "skillName":"圆弧斩",
+    "skillDec":"倾泻怒气，群体伤害",
+    "skillDetail":"一记势大力沉的横扫，对目标及其周围最多5名敌人造成一定物理伤害。"
+},{
+    "job":"战士",
+    "skillName":"盾击",
+    "skillDec":"单体伤害核心，生成怒气",
+    "skillDetail":"使用盾牌重击目标，造成一定物理伤害并打断施法，产生大量仇恨值，并获得中量怒气。"
+},{
+    "job":"战士",
+    "skillName":"地动山摇",
+    "skillDec":"强力群体控制，击倒",
+    "skillDetail":"聚集力量，发出一道冲击波，攻击前方扇形范围内的敌人，造成一定物理伤害将其击倒，被击中的目标还会沉默。（若击中3个以上目标时，冷却时间缩短20秒）"
+},{
+    "job":"战士",
+    "skillName":"大地践踏",
+    "skillDec":"群体控场拉回",
+    "skillDetail":"汇聚大地之力，对一定距离范围内目标造成一定物理伤害，并将它们拉回到身边且减速10秒。产生中量怒气。"
+},{
+    "job":"战士",
+    "skillName":"冲锋",
+    "skillDec":"战术突进，控制",
+    "skillDetail":"向目标冲锋并造成一定物理伤害，使其昏迷并嘲讽目标，造成大量仇恨值，产生中量怒气。"
+},{
+    "job":"战士",
+    "skillName":"盾牌屏障",
+    "skillDec":"强力护盾",
+    "skillDetail":"（拥有至少60点怒气时激活）获得持续15秒的屏障，期间可吸收受到伤害的90%。屏障效果不能叠加，每次获得新的屏障时，会覆盖原有的屏障。"
+}],[{
+    "job":"魔导师",
+    "skillName":"奥术箭",
+    "skillDec":"",
+    "skillDetail":"发射纯粹的奥术能量攻击敌人，连续攻击目标四次，对其造成一定的法术伤害；武器速度越慢，伤害越高。"
+},{
+    "job":"魔导师",
+    "skillName":"魔法飞弹",
+    "skillDec":"力场伤害，单体伤害核心，产生奥能，奥能加成",
+    "skillDetail":"将纯粹的魔法能量凝聚为飞弹射向目标，对其造成一定点力场伤害，并获得1层奥能。（每层奥能会使法术伤害提高一定，法力消耗增加100%）"
+},{
+    "job":"魔导师",
+    "skillName":"奥术轰炸",
+    "skillDec":"力场伤害，强力伤害，消耗奥能，奥能加成",
+    "skillDetail":"凝聚奥术能量向目标发射奥术轰炸，对目标造成一定点力场伤害。该技能会消耗积累的全部奥能，每点奥能会使本技能的伤害提高一定且可以额外击中1个目标。"
+},{
+    "job":"魔导师",
+    "skillName":"恶意变形",
+    "skillDec":"强力单体控制，变形",
+    "skillDetail":"将目标变为绵羊，对其造成一定点法术伤害，并使其迷惑，效果持续。"
+},{
+    "job":"魔导师",
+    "skillName":"黑洞",
+    "skillDec":"强力群体控制，拉回",
+    "skillDetail":"撕裂空间，在目标位置生成一个存在5秒的黑洞，期间对周围5米范围内敌人造成6次，每次造成一定点力场伤害，并将这些目标牵引到裂隙中央。"
+},{
+    "job":"魔导师",
+    "skillName":"次元跳跃",
+    "skillDec":"战术瞬移，解除控制，沉默",
+    "skillDetail":"折叠次元，瞬间向前方移动15米距离，解除所有控制效果，并对位移终点周围5米内的所有敌人造成一定点法术伤害和沉默效果。次元跳跃不能穿过障碍物。"
+},{
+    "job":"魔导师",
+    "skillName":"法力漩涡",
+    "skillDec":"持续回复法力与生命",
+    "skillDetail":"（自身法力值低于40%时激活）将自身变为魔法的漩涡之眼，每秒对自身周围造成一定点法术伤害，持续6秒。持续期间，每秒为你回复10%最大法力和一定点生命（回复的生命值随攻击提升），并为你叠加秘法能量效果，每层秘法能量可使你的所有伤害提升10%，最多叠加6层，持续12秒。"
+}]];
+
+var  jobArr = [
+"<strong class='jop'>斗士</strong>&nbsp;&nbsp;<strong>定位：</strong>输出&nbsp;<strong>可转职：</strong>狂战士/武器大师/执政官<p>斗士追求力量的极致，只凭手中的武器，掀起钢铁的风暴。</p>",
+"<strong class='jop'>牧师</strong>&nbsp;&nbsp;<strong>定位：</strong>治疗&nbsp;<strong>可转职：</strong>光明使者/圣者/主教<p>在凡间以信仰之力践行神意，借助神力改变生死，正是牧师。</p>",
+"<strong class='jop'>法师</strong>&nbsp;&nbsp;<strong>定位：</strong>输出&nbsp;<strong>可转职：</strong>烈焰咏者/霜火法师/霜语者<p>冰与火的元素之力，在法师的手中，挥洒自如。</p>",
+"<strong class='jop'>射手</strong>&nbsp;&nbsp;<strong>定位：</strong>输出&nbsp;<strong>可转职：</strong>神射手/狩魔猎人/吟游诗人<p>在荒野之中，仅凭弓弩和陷阱，传播神力，这就是猎人。</p>",
+"<strong class='jop'>黑暗贤者</strong>&nbsp;&nbsp;<strong>定位：</strong>治疗&nbsp;<strong>可转职：</strong>混沌学者/死灵法师/吸血鬼<p>要小心，术士的治疗中蕴含暗影与邪术的力量，令你付出代价。</p>",
+"<strong class='jop'>圣骑士</strong>&nbsp;&nbsp;<strong>定位：</strong>坦克&nbsp;<strong>可转职：</strong>龙骑士/审判者/圣堂武士<p>圣骑士是神灵之拳，用盾牌捍卫信仰，凭手中剑贯彻神意。</p>",
+"<strong class='jop'>潜伏者</strong>&nbsp;&nbsp;<strong>定位：</strong>输出&nbsp;<strong>可转职：</strong>剑圣/魔剑士/影舞者<p>潜伏者无需蛮力，利用娴熟的技巧，环境的掩护，一击制胜。</p>",
+"<strong class='jop'>战士</strong>&nbsp;&nbsp;<strong>定位：</strong>坦克&nbsp;<strong>可转职：</strong>角斗士/守护者/铁卫<p>战士是战场的核心，手中盾牌不仅保护同伴，也是强力武器。</p>",
+"<strong class='jop'>魔导师</strong>&nbsp;&nbsp;<strong>定位：</strong>输出&nbsp;<strong>可转职：</strong>奥术师/灵晶学者/战斗法师<p>巫师掌握着奥术之力，能够释放出能量的洪流，或将敌人变形。</p>"
+]

2018专题/1808万王之王专题-商务/src/lib/util.js

@@ -0,0 +1,28 @@
+function decr(r) {
+    var e = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789@!~*-_.()'".split("");
+    var n = [];
+    var a = [];
+    r.split("").reverse().forEach(function (r, t) {
+        var o = e.indexOf(r);
+        if (parseInt((t + 1) % 2) == 1) {
+            a.push(o)
+        } else {
+            var p = parseInt(o - a[(t + 1) / 2 - 1]);
+            n.push(e[p])
+        }
+    });
+    var t = n.join("").replace(/@/g, "%");
+    return decodeURIComponent(t)
+}
+/**
+ * 解密数据
+ */
+function deCodeArg(target) {
+    var srcMap = {};
+    if (JSON.parse) {
+        srcMap = JSON.parse(decr(target));
+    } else {
+        srcMap = eval('(' + decr(target) + ')');
+    }
+    return srcMap;
+}

2018专题/1808万王之王专题-商务/src/modules/page/index.js

@@ -1,30 +1,347 @@
 var Swiper = require('swiper.min.js');//轮播
 
+__inline('../../lib/util.js');
+__inline('../../json/skill.js');
+
 var swiper 
 
+var p5Video1 = document.getElementById('p5-video1')
+var p5Video2 = document.getElementById('p5-video2')
+var p5Video3 = document.getElementById('p5-video3')
+
 var V = {
   init() {
+    this.getVideoSource()
     this.initSwiper()
   },
   initSwiper() {
     swiper = new Swiper('.swiper-container', {
       direction: 'vertical',
       mousewheel: true,
-      pagination: {
-        el: '.swiper-pagination',
-        clickable: true,
-      },
+      allowTouchMove: false,
+      threshold: 50,
+      speed: 600,
       on: {
         slideChangeTransitionStart: function(){
+
+          $('.nav-item').removeClass('current')
+          var ind = this.activeIndex
+          $('.nav-item').eq(ind).addClass('current')
+
+          if(this.activeIndex == 0) {
+            document.getElementById('game-video').play()
+          } else {
+            document.getElementById('game-video').pause()
+            $('.join-btn').show()
+          }
+
+          if(this.activeIndex == 3) {
+            // document.getElementById('p4-video').play()
+
+            C.handleP4()
+          } else {
+            document.getElementById('p4-video').pause()
+          }
+
           if(this.activeIndex == 4) {
-            $('.arrow-icon').hide()
+            var p5Ind = $('.p5-bottom-tab').find('.cur-tab').attr('data-video')
+            console.log(p5Ind)
+            switch (Number(p5Ind)) {
+              case 1: p5Video1.play()
+                      break;
+              case 2: p5Video2.play()
+                      break;
+              case 3: p5Video3.play()
+                      break;
+            }
           } else {
-            $('.arrow-icon').show()
+            p5Video1.pause()
+            p5Video2.pause()
+            p5Video3.pause()
           }
         },
       },  
     })
+  },
+  getVideoSource() {
+    let vids = ['8889311','8891835','8896619','8896621','8896623']
+    let videoMap = {
+        '8889311': 'game-video',
+        '8891835': 'p4-video',
+        '8896619': 'p5-video1',
+        '8896621': 'p5-video2',
+        '8896623': 'p5-video3',
+    }
+    $.ajax({
+        type: "GET",
+        dataType: "json",
+        url: `//video.duowan.com/jsapi/playPageVideoInfo/?vids=${vids.join(',')}`,
+        success: function(data) {
+            // console.log(data)
+            for(var i in data) {
+                let resouce = deCodeArg(data[i].c).all,
+                    source = resouce.yuanhua || resouce[1300] || resouce[1000] || resouce[350]
+
+                let id = videoMap[i]
+                document.getElementById(id).src = source.src
+            }
+        }
+    })
+  }
+}
+
+var C = {
+  init() {
+    this.circleClick()
+    this.handleP3()
+    this.handleP5()
+    this.handleP6()
+  },
+  // p2相关
+  circleClick() {
+    // 喇叭
+    $('#audio-control').click(function() {
+      var $this = $(this)
+      var classOn = $this.hasClass('on')
+      if(classOn) {
+        $this.removeClass('on').addClass('off')
+      } else {
+        $this.removeClass('off').addClass('on')
+      }
+    })
+
+    // gif出现
+    $('.circle').click(function() {
+      $(this).parent().addClass('on').css('zIndex', '6')
+      $('.mask').show()
+      return false
+    })
+
+    // 弹窗出现
+    $('.modal-circle').click(function() {
+      var id = $(this).attr('data-href')
+      $(id).fadeIn()
+      $('.mask').show()
+    })
+
+    $('.modal-close-icon').click(function() {
+      $('.mask').hide()
+      $('.p2-modal').fadeOut()
+    })
+    
+    // p2底部tab
+    $('.p2-bottom-tab').on('click', '.tab-item', function() {
+      $(this).addClass('cur-tab').siblings().removeClass('cur-tab')
+      var bgName = $(this).attr('data-bg')
+      $('.p2').removeClass('tab1-bg').removeClass('tab2-bg').removeClass('tab3-bg').removeClass('tab4-bg').addClass(bgName)
+      $('.box-icon').hide()
+      if(bgName == 'tab1-bg') {
+        $('.bg1-location').show()
+      }
+      if(bgName == 'tab2-bg') {
+        $('.bg2-location').show()
+      }
+      if(bgName == 'tab3-bg') {
+        $('.bg3-location').show()
+      }
+      if(bgName == 'tab4-bg') {
+        $('.bg4-location').show()
+      }
+    })
+    
+    // 关闭gif
+    $('.mask').click(function() {
+      $('.mask').hide()
+      $('.box-icon').removeClass('on').css('zIndex', '1')
+      $('.p2-modal').fadeOut()
+    })
+
+    // $('.box-icon').click(function() {
+    //   $('.mask').hide()
+    //   $('.box-icon').removeClass('on').css('zIndex', '1')
+    // })
+  },
+  // p3相关
+  handleP3() {
+    $('.human-tab').on('click', '.human-tab-item', function() {
+
+      var ind = $('.human-tab-item').index(this)
+      var classInd = ind + 1
+
+      $(this).addClass('hover').siblings().removeClass('hover')
+      $('.p3').removeClass('p3-human-bg1').removeClass('p3-human-bg2').removeClass('p3-human-bg3').removeClass('p3-human-bg4').addClass('p3-human-bg'+classInd)
+      $('.role-info-text .content').eq(ind).addClass('on').siblings().removeClass('on')
+
+    })
+
+    // 技能角色切换
+    // 职业,技能切换
+    $('.profession .skill-prev').click(function () {
+      var ele = $(this).parents('.profession').find('ul');
+      toMove(ele, -1, 77, true)
+    })
+    $('.profession .skill-next').click(function () {
+      var ele = $(this).parents('.profession').find('ul');
+      toMove(ele, 1, 77, true)
+    })
+    $('.skill-box .skill-prev').click(function () {
+      var ele = $(this).parents('.skill-list').find('ul');
+      toMove(ele, -1, 78, false)
+    })
+    $('.skill-box .skill-next').click(function () {
+      var ele = $(this).parents('.skill-list').find('ul');
+      toMove(ele, 1, 78, false)
+    })
+    var indexRole = 0;
+    $('.profession li').click(function () {
+      indexRole = $(this).index();
+      tabSkill(indexRole)
+    })
+    // 技能切换
+    $('.skill-list li').click(function () {
+      var index = $(this).index();
+      $(this).addClass('on').siblings().removeClass('on');
+      var obj = $(this).parents('.skill-list').find('ul');
+      tabJob(obj, index)
+    })
+    var isCan = true;;
+
+    function toMove(obj, num, big, skill) {
+      if (isCan) {
+          isCan = false;
+          setTimeout(function () {
+              isCan = true;
+          }, 500);
+          var length = obj.find('li').length - 4;
+          var left = parseInt(obj.css('left'));
+          var index = $(obj).find('li.on').index() + num;
+          if (index >= (length + 3)) {
+              index = length + 3;
+          } else if (index <= 0) {
+              index = 0;
+          }
+          if (skill) {
+              tabSkill(index);
+          } else {
+              tabJob(obj, index);
+          }
+          $(obj).find('li').removeClass('on').eq(index).addClass('on');
+          if (num > 0) {
+              if (left < (-length * big)) {
+                  return;
+              }
+              if(((index-2)*big) == (-left)){
+                  obj.css('left', (left - big) + 'px');
+              }
+              if(((index-3)*big) == (-left)){
+                  if((index-length)==3){
+                      obj.css('left', (left - big) + 'px');       
+                  }else{
+                      obj.css('left', (left - big*2) + 'px');
+                  }
+              }
+          } else {
+              if (left >= 0) {
+                  return;
+              }
+              if((index*big) == (-left)){
+                  obj.css('left', (left + big) + 'px');
+              }
+              if(index == 0){
+                  obj.css('left', (left + big) + 'px');
+              }else{
+                  obj.css('left', (left + big*2) + 'px');
+              }
+          }
+      }
+    }
+
+    function tabSkill(indexRole) {
+      $('.profession li').eq(indexRole).addClass('on').siblings().removeClass('on');
+      $('.skill-list').removeClass('on').eq(indexRole).addClass('on');
+      $('.profession').find('.skil-text').html(jobArr[indexRole])
+      // PTTSendClick('btn', 'skill_' + indexRole, '技能_' + indexRole);
+    }
+
+    function tabJob(obj, index) {
+      var obj2 = obj.parents('.skill-list').find('.skil-text');
+      obj2.find('.skill-name').html(skillArr[indexRole][index].skillName);
+      obj2.find('.skill-dec').html(skillArr[indexRole][index].skillDec);
+      obj2.find('p').html(skillArr[indexRole][index].skillDetail);
+      // PTTSendClick('btn', 'skill_' + indexRole + '_job_' + index, '技能_' + indexRole + '_职业_' + index);
+    }
+
+  },
+  // p4相关
+  handleP4() {
+    $('.cartoon1').addClass('bounceInLeft')
+    $('.cartoon2').addClass('bounceInUp')
+    $('.cartoon3').addClass('bounceInRight')
+    $('.cartoon4').addClass('bounceInDown')
+    $('#p4-video').addClass('fadeIn')
+
+    var playFlag = false // p4播放标识
+    var p4Video = document.getElementById('p4-video')
+    p4Video.play()
+    $('.play-icon').hide()
+    playFlag = true
+
+    $('.control-box').click(function() {
+      if(playFlag) {
+        p4Video.pause()
+        $('.play-icon').show()
+      } else {
+        p4Video.play()
+        $('.play-icon').hide()
+      }
+      playFlag = !playFlag
+    })
+
+    p4Video.addEventListener('ended', function() {
+      p4Video.currenttime = 0
+      playFlag = false
+      $('.play-icon').show()
+    })
+  },
+  // p5相关
+  handleP5() {
+    function videoPause() {
+      p5Video1.pause()
+      p5Video2.pause()
+      p5Video3.pause()
+    }
+    // p5底部tab
+    $('.p5-bottom-tab').on('click', '.tab-item', function() {
+      $(this).addClass('cur-tab').siblings().removeClass('cur-tab')
+      var ind = $(this).attr('data-video')
+      videoPause()
+      $('.full-video').hide()
+      if(ind == 1) {
+        $(p5Video1).show()
+        p5Video1.play()
+      }      
+      if(ind == 2) {
+        $(p5Video2).show()
+        p5Video2.play()
+      }      
+      if(ind == 3) {
+        $(p5Video3).show()
+        p5Video3.play()
+      }      
+    })
+  },
+  // p6相关
+  handleP6() {
+    var scrollMain = document.getElementById('scroll-main')
+    scrollMain.addEventListener('mousewheel', function(e) {
+      if (e) {
+        e.stopPropagation();
+      } else {
+        window.event.cancelBubble = true;
+      }
+    })
   }
 }
 
-V.init()
+V.init()
+C.init()

2018专题/1808万王之王专题-商务/src/sass/base/_base.scss

@@ -7,7 +7,6 @@ html, body, body div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquot
 	margin: 0;
 	padding: 0;
 	border: 0;
-	font-size: 100%;
 	font-weight: normal;
 	vertical-align: baseline;
 }

2018专题/1808万王之王专题-商务/src/sass/base/animate.min.css

@@ -0,0 +1,3195 @@
+@charset "UTF-8";
+/*!
+ * animate.css -http://daneden.me/animate
+ * Version - 3.6.0
+ * Licensed under the MIT license - http://opensource.org/licenses/MIT
+ *
+ * Copyright (c) 2018 Daniel Eden
+ */
+
+.animated {
+    -webkit-animation-duration: 1s;
+    animation-duration: 1s;
+    -webkit-animation-fill-mode: both;
+    animation-fill-mode: both;
+}
+
+.animated.infinite {
+    -webkit-animation-iteration-count: infinite;
+    animation-iteration-count: infinite;
+}
+
+@-webkit-keyframes bounce {
+    from,
+    20%,
+    53%,
+    80%,
+    to {
+        -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
+        animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
+        -webkit-transform: translate3d(0, 0, 0);
+        transform: translate3d(0, 0, 0);
+    }
+    40%,
+    43% {
+        -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
+        animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
+        -webkit-transform: translate3d(0, -30px, 0);
+        transform: translate3d(0, -30px, 0);
+    }
+    70% {
+        -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
+        animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
+        -webkit-transform: translate3d(0, -15px, 0);
+        transform: translate3d(0, -15px, 0);
+    }
+    90% {
+        -webkit-transform: translate3d(0, -4px, 0);
+        transform: translate3d(0, -4px, 0);
+    }
+}
+
+@keyframes bounce {
+    from,
+    20%,
+    53%,
+    80%,
+    to {
+        -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
+        animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
+        -webkit-transform: translate3d(0, 0, 0);
+        transform: translate3d(0, 0, 0);
+    }
+    40%,
+    43% {
+        -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
+        animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
+        -webkit-transform: translate3d(0, -30px, 0);
+        transform: translate3d(0, -30px, 0);
+    }
+    70% {
+        -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
+        animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
+        -webkit-transform: translate3d(0, -15px, 0);
+        transform: translate3d(0, -15px, 0);
+    }
+    90% {
+        -webkit-transform: translate3d(0, -4px, 0);
+        transform: translate3d(0, -4px, 0);
+    }
+}
+
+.bounce {
+    -webkit-animation-name: bounce;
+    animation-name: bounce;
+    -webkit-transform-origin: center bottom;
+    transform-origin: center bottom;
+}
+
+@-webkit-keyframes flash {
+    from,
+    50%,
+    to {
+        opacity: 1;
+    }
+    25%,
+    75% {
+        opacity: 0;
+    }
+}
+
+@keyframes flash {
+    from,
+    50%,
+    to {
+        opacity: 1;
+    }
+    25%,
+    75% {
+        opacity: 0;
+    }
+}
+
+.flash {
+    -webkit-animation-name: flash;
+    animation-name: flash;
+}
+
+/* originally authored by Nick Pettit - https://github.com/nickpettit/glide */
+
+@-webkit-keyframes pulse {
+    from {
+        -webkit-transform: scale3d(1, 1, 1);
+        transform: scale3d(1, 1, 1);
+    }
+    50% {
+        -webkit-transform: scale3d(1.05, 1.05, 1.05);
+        transform: scale3d(1.05, 1.05, 1.05);
+    }
+    to {
+        -webkit-transform: scale3d(1, 1, 1);
+        transform: scale3d(1, 1, 1);
+    }
+}
+
+@keyframes pulse {
+    from {
+        -webkit-transform: scale3d(1, 1, 1);
+        transform: scale3d(1, 1, 1);
+    }
+    50% {
+        -webkit-transform: scale3d(1.05, 1.05, 1.05);
+        transform: scale3d(1.05, 1.05, 1.05);
+    }
+    to {
+        -webkit-transform: scale3d(1, 1, 1);
+        transform: scale3d(1, 1, 1);
+    }
+}
+
+.pulse {
+    -webkit-animation-name: pulse;
+    animation-name: pulse;
+}
+
+@-webkit-keyframes rubberBand {
+    from {
+        -webkit-transform: scale3d(1, 1, 1);
+        transform: scale3d(1, 1, 1);
+    }
+    30% {
+        -webkit-transform: scale3d(1.25, 0.75, 1);
+        transform: scale3d(1.25, 0.75, 1);
+    }
+    40% {
+        -webkit-transform: scale3d(0.75, 1.25, 1);
+        transform: scale3d(0.75, 1.25, 1);
+    }
+    50% {
+        -webkit-transform: scale3d(1.15, 0.85, 1);
+        transform: scale3d(1.15, 0.85, 1);
+    }
+    65% {
+        -webkit-transform: scale3d(0.95, 1.05, 1);
+        transform: scale3d(0.95, 1.05, 1);
+    }
+    75% {
+        -webkit-transform: scale3d(1.05, 0.95, 1);
+        transform: scale3d(1.05, 0.95, 1);
+    }
+    to {
+        -webkit-transform: scale3d(1, 1, 1);
+        transform: scale3d(1, 1, 1);
+    }
+}
+
+@keyframes rubberBand {
+    from {
+        -webkit-transform: scale3d(1, 1, 1);
+        transform: scale3d(1, 1, 1);
+    }
+    30% {
+        -webkit-transform: scale3d(1.25, 0.75, 1);
+        transform: scale3d(1.25, 0.75, 1);
+    }
+    40% {
+        -webkit-transform: scale3d(0.75, 1.25, 1);
+        transform: scale3d(0.75, 1.25, 1);
+    }
+    50% {
+        -webkit-transform: scale3d(1.15, 0.85, 1);
+        transform: scale3d(1.15, 0.85, 1);
+    }
+    65% {
+        -webkit-transform: scale3d(0.95, 1.05, 1);
+        transform: scale3d(0.95, 1.05, 1);
+    }
+    75% {
+        -webkit-transform: scale3d(1.05, 0.95, 1);
+        transform: scale3d(1.05, 0.95, 1);
+    }
+    to {
+        -webkit-transform: scale3d(1, 1, 1);
+        transform: scale3d(1, 1, 1);
+    }
+}
+
+.rubberBand {
+    -webkit-animation-name: rubberBand;
+    animation-name: rubberBand;
+}
+
+@-webkit-keyframes shake {
+    from,
+    to {
+        -webkit-transform: translate3d(0, 0, 0);
+        transform: translate3d(0, 0, 0);
+    }
+    10%,
+    30%,
+    50%,
+    70%,
+    90% {
+        -webkit-transform: translate3d(-10px, 0, 0);
+        transform: translate3d(-10px, 0, 0);
+    }
+    20%,
+    40%,
+    60%,
+    80% {
+        -webkit-transform: translate3d(10px, 0, 0);
+        transform: translate3d(10px, 0, 0);
+    }
+}
+
+@keyframes shake {
+    from,
+    to {
+        -webkit-transform: translate3d(0, 0, 0);
+        transform: translate3d(0, 0, 0);
+    }
+    10%,
+    30%,
+    50%,
+    70%,
+    90% {
+        -webkit-transform: translate3d(-10px, 0, 0);
+        transform: translate3d(-10px, 0, 0);
+    }
+    20%,
+    40%,
+    60%,
+    80% {
+        -webkit-transform: translate3d(10px, 0, 0);
+        transform: translate3d(10px, 0, 0);
+    }
+}
+
+.shake {
+    -webkit-animation-name: shake;
+    animation-name: shake;
+}
+
+@-webkit-keyframes headShake {
+    0% {
+        -webkit-transform: translateX(0);
+        transform: translateX(0);
+    }
+    6.5% {
+        -webkit-transform: translateX(-6px) rotateY(-9deg);
+        transform: translateX(-6px) rotateY(-9deg);
+    }
+    18.5% {
+        -webkit-transform: translateX(5px) rotateY(7deg);
+        transform: translateX(5px) rotateY(7deg);
+    }
+    31.5% {
+        -webkit-transform: translateX(-3px) rotateY(-5deg);
+        transform: translateX(-3px) rotateY(-5deg);
+    }
+    43.5% {
+        -webkit-transform: translateX(2px) rotateY(3deg);
+        transform: translateX(2px) rotateY(3deg);
+    }
+    50% {
+        -webkit-transform: translateX(0);
+        transform: translateX(0);
+    }
+}
+
+@keyframes headShake {
+    0% {
+        -webkit-transform: translateX(0);
+        transform: translateX(0);
+    }
+    6.5% {
+        -webkit-transform: translateX(-6px) rotateY(-9deg);
+        transform: translateX(-6px) rotateY(-9deg);
+    }
+    18.5% {
+        -webkit-transform: translateX(5px) rotateY(7deg);
+        transform: translateX(5px) rotateY(7deg);
+    }
+    31.5% {
+        -webkit-transform: translateX(-3px) rotateY(-5deg);
+        transform: translateX(-3px) rotateY(-5deg);
+    }
+    43.5% {
+        -webkit-transform: translateX(2px) rotateY(3deg);
+        transform: translateX(2px) rotateY(3deg);
+    }
+    50% {
+        -webkit-transform: translateX(0);
+        transform: translateX(0);
+    }
+}
+
+.headShake {
+    -webkit-animation-timing-function: ease-in-out;
+    animation-timing-function: ease-in-out;
+    -webkit-animation-name: headShake;
+    animation-name: headShake;
+}
+
+@-webkit-keyframes swing {
+    20% {
+        -webkit-transform: rotate3d(0, 0, 1, 15deg);
+        transform: rotate3d(0, 0, 1, 15deg);
+    }
+    40% {
+        -webkit-transform: rotate3d(0, 0, 1, -10deg);
+        transform: rotate3d(0, 0, 1, -10deg);
+    }
+    60% {
+        -webkit-transform: rotate3d(0, 0, 1, 5deg);
+        transform: rotate3d(0, 0, 1, 5deg);
+    }
+    80% {
+        -webkit-transform: rotate3d(0, 0, 1, -5deg);
+        transform: rotate3d(0, 0, 1, -5deg);
+    }
+    to {
+        -webkit-transform: rotate3d(0, 0, 1, 0deg);
+        transform: rotate3d(0, 0, 1, 0deg);
+    }
+}
+
+@keyframes swing {
+    20% {
+        -webkit-transform: rotate3d(0, 0, 1, 15deg);
+        transform: rotate3d(0, 0, 1, 15deg);
+    }
+    40% {
+        -webkit-transform: rotate3d(0, 0, 1, -10deg);
+        transform: rotate3d(0, 0, 1, -10deg);
+    }
+    60% {
+        -webkit-transform: rotate3d(0, 0, 1, 5deg);
+        transform: rotate3d(0, 0, 1, 5deg);
+    }
+    80% {
+        -webkit-transform: rotate3d(0, 0, 1, -5deg);
+        transform: rotate3d(0, 0, 1, -5deg);
+    }
+    to {
+        -webkit-transform: rotate3d(0, 0, 1, 0deg);
+        transform: rotate3d(0, 0, 1, 0deg);
+    }
+}
+
+.swing {
+    -webkit-transform-origin: top center;
+    transform-origin: top center;
+    -webkit-animation-name: swing;
+    animation-name: swing;
+}
+
+@-webkit-keyframes tada {
+    from {
+        -webkit-transform: scale3d(1, 1, 1);
+        transform: scale3d(1, 1, 1);
+    }
+    10%,
+    20% {
+        -webkit-transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg);
+        transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg);
+    }
+    30%,
+    50%,
+    70%,
+    90% {
+        -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
+        transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
+    }
+    40%,
+    60%,
+    80% {
+        -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
+        transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
+    }
+    to {
+        -webkit-transform: scale3d(1, 1, 1);
+        transform: scale3d(1, 1, 1);
+    }
+}
+
+@keyframes tada {
+    from {
+        -webkit-transform: scale3d(1, 1, 1);
+        transform: scale3d(1, 1, 1);
+    }
+    10%,
+    20% {
+        -webkit-transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg);
+        transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg);
+    }
+    30%,
+    50%,
+    70%,
+    90% {
+        -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
+        transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
+    }
+    40%,
+    60%,
+    80% {
+        -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
+        transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
+    }
+    to {
+        -webkit-transform: scale3d(1, 1, 1);
+        transform: scale3d(1, 1, 1);
+    }
+}
+
+.tada {
+    -webkit-animation-name: tada;
+    animation-name: tada;
+}
+
+/* originally authored by Nick Pettit - https://github.com/nickpettit/glide */
+
+@-webkit-keyframes wobble {
+    from {
+        -webkit-transform: translate3d(0, 0, 0);
+        transform: translate3d(0, 0, 0);
+    }
+    15% {
+        -webkit-transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg);
+        transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg);
+    }
+    30% {
+        -webkit-transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg);
+        transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg);
+    }
+    45% {
+        -webkit-transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg);
+        transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg);
+    }
+    60% {
+        -webkit-transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg);
+        transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg);
+    }
+    75% {
+        -webkit-transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg);
+        transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg);
+    }
+    to {
+        -webkit-transform: translate3d(0, 0, 0);
+        transform: translate3d(0, 0, 0);
+    }
+}
+
+@keyframes wobble {
+    from {
+        -webkit-transform: translate3d(0, 0, 0);
+        transform: translate3d(0, 0, 0);
+    }
+    15% {
+        -webkit-transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg);
+        transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg);
+    }
+    30% {
+        -webkit-transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg);
+        transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg);
+    }
+    45% {
+        -webkit-transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg);
+        transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg);
+    }
+    60% {
+        -webkit-transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg);
+        transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg);
+    }
+    75% {
+        -webkit-transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg);
+        transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg);
+    }
+    to {
+        -webkit-transform: translate3d(0, 0, 0);
+        transform: translate3d(0, 0, 0);
+    }
+}
+
+.wobble {
+    -webkit-animation-name: wobble;
+    animation-name: wobble;
+}
+
+@-webkit-keyframes jello {
+    from,
+    11.1%,
+    to {
+        -webkit-transform: translate3d(0, 0, 0);
+        transform: translate3d(0, 0, 0);
+    }
+    22.2% {
+        -webkit-transform: skewX(-12.5deg) skewY(-12.5deg);
+        transform: skewX(-12.5deg) skewY(-12.5deg);
+    }
+    33.3% {
+        -webkit-transform: skewX(6.25deg) skewY(6.25deg);
+        transform: skewX(6.25deg) skewY(6.25deg);
+    }
+    44.4% {
+        -webkit-transform: skewX(-3.125deg) skewY(-3.125deg);
+        transform: skewX(-3.125deg) skewY(-3.125deg);
+    }
+    55.5% {
+        -webkit-transform: skewX(1.5625deg) skewY(1.5625deg);
+        transform: skewX(1.5625deg) skewY(1.5625deg);
+    }
+    66.6% {
+        -webkit-transform: skewX(-0.78125deg) skewY(-0.78125deg);
+        transform: skewX(-0.78125deg) skewY(-0.78125deg);
+    }
+    77.7% {
+        -webkit-transform: skewX(0.390625deg) skewY(0.390625deg);
+        transform: skewX(0.390625deg) skewY(0.390625deg);
+    }
+    88.8% {
+        -webkit-transform: skewX(-0.1953125deg) skewY(-0.1953125deg);
+        transform: skewX(-0.1953125deg) skewY(-0.1953125deg);
+    }
+}
+
+@keyframes jello {
+    from,
+    11.1%,
+    to {
+        -webkit-transform: translate3d(0, 0, 0);
+        transform: translate3d(0, 0, 0);
+    }
+    22.2% {
+        -webkit-transform: skewX(-12.5deg) skewY(-12.5deg);
+        transform: skewX(-12.5deg) skewY(-12.5deg);
+    }
+    33.3% {
+        -webkit-transform: skewX(6.25deg) skewY(6.25deg);
+        transform: skewX(6.25deg) skewY(6.25deg);
+    }
+    44.4% {
+        -webkit-transform: skewX(-3.125deg) skewY(-3.125deg);
+        transform: skewX(-3.125deg) skewY(-3.125deg);
+    }
+    55.5% {
+        -webkit-transform: skewX(1.5625deg) skewY(1.5625deg);
+        transform: skewX(1.5625deg) skewY(1.5625deg);
+    }
+    66.6% {
+        -webkit-transform: skewX(-0.78125deg) skewY(-0.78125deg);
+        transform: skewX(-0.78125deg) skewY(-0.78125deg);
+    }
+    77.7% {
+        -webkit-transform: skewX(0.390625deg) skewY(0.390625deg);
+        transform: skewX(0.390625deg) skewY(0.390625deg);
+    }
+    88.8% {
+        -webkit-transform: skewX(-0.1953125deg) skewY(-0.1953125deg);
+        transform: skewX(-0.1953125deg) skewY(-0.1953125deg);
+    }
+}
+
+.jello {
+    -webkit-animation-name: jello;
+    animation-name: jello;
+    -webkit-transform-origin: center;
+    transform-origin: center;
+}
+
+@-webkit-keyframes bounceIn {
+    from,
+    20%,
+    40%,
+    60%,
+    80%,
+    to {
+        -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
+        animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
+    }
+    0% {
+        opacity: 0;
+        -webkit-transform: scale3d(0.3, 0.3, 0.3);
+        transform: scale3d(0.3, 0.3, 0.3);
+    }
+    20% {
+        -webkit-transform: scale3d(1.1, 1.1, 1.1);
+        transform: scale3d(1.1, 1.1, 1.1);
+    }
+    40% {
+        -webkit-transform: scale3d(0.9, 0.9, 0.9);
+        transform: scale3d(0.9, 0.9, 0.9);
+    }
+    60% {
+        opacity: 1;
+        -webkit-transform: scale3d(1.03, 1.03, 1.03);
+        transform: scale3d(1.03, 1.03, 1.03);
+    }
+    80% {
+        -webkit-transform: scale3d(0.97, 0.97, 0.97);
+        transform: scale3d(0.97, 0.97, 0.97);
+    }
+    to {
+        opacity: 1;
+        -webkit-transform: scale3d(1, 1, 1);
+        transform: scale3d(1, 1, 1);
+    }
+}
+
+@keyframes bounceIn {
+    from,
+    20%,
+    40%,
+    60%,
+    80%,
+    to {
+        -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
+        animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
+    }
+    0% {
+        opacity: 0;
+        -webkit-transform: scale3d(0.3, 0.3, 0.3);
+        transform: scale3d(0.3, 0.3, 0.3);
+    }
+    20% {
+        -webkit-transform: scale3d(1.1, 1.1, 1.1);
+        transform: scale3d(1.1, 1.1, 1.1);
+    }
+    40% {
+        -webkit-transform: scale3d(0.9, 0.9, 0.9);
+        transform: scale3d(0.9, 0.9, 0.9);
+    }
+    60% {
+        opacity: 1;
+        -webkit-transform: scale3d(1.03, 1.03, 1.03);
+        transform: scale3d(1.03, 1.03, 1.03);
+    }
+    80% {
+        -webkit-transform: scale3d(0.97, 0.97, 0.97);
+        transform: scale3d(0.97, 0.97, 0.97);
+    }
+    to {
+        opacity: 1;
+        -webkit-transform: scale3d(1, 1, 1);
+        transform: scale3d(1, 1, 1);
+    }
+}
+
+.bounceIn {
+    -webkit-animation-duration: 0.75s;
+    animation-duration: 0.75s;
+    -webkit-animation-name: bounceIn;
+    animation-name: bounceIn;
+}
+
+@-webkit-keyframes bounceInDown {
+    from,
+    60%,
+    75%,
+    90%,
+    to {
+        -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
+        animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
+    }
+    0% {
+        opacity: 0;
+        -webkit-transform: translate3d(0, -3000px, 0);
+        transform: translate3d(0, -3000px, 0);
+    }
+    60% {
+        opacity: 1;
+        -webkit-transform: translate3d(0, 25px, 0);
+        transform: translate3d(0, 25px, 0);
+    }
+    75% {
+        -webkit-transform: translate3d(0, -10px, 0);
+        transform: translate3d(0, -10px, 0);
+    }
+    90% {
+        -webkit-transform: translate3d(0, 5px, 0);
+        transform: translate3d(0, 5px, 0);
+    }
+    to {
+        -webkit-transform: translate3d(0, 0, 0);
+        transform: translate3d(0, 0, 0);
+    }
+}
+
+@keyframes bounceInDown {
+    from,
+    60%,
+    75%,
+    90%,
+    to {
+        -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
+        animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
+    }
+    0% {
+        opacity: 0;
+        -webkit-transform: translate3d(0, -3000px, 0);
+        transform: translate3d(0, -3000px, 0);
+    }
+    60% {
+        opacity: 1;
+        -webkit-transform: translate3d(0, 25px, 0);
+        transform: translate3d(0, 25px, 0);
+    }
+    75% {
+        -webkit-transform: translate3d(0, -10px, 0);
+        transform: translate3d(0, -10px, 0);
+    }
+    90% {
+        -webkit-transform: translate3d(0, 5px, 0);
+        transform: translate3d(0, 5px, 0);
+    }
+    to {
+        -webkit-transform: translate3d(0, 0, 0);
+        transform: translate3d(0, 0, 0);
+    }
+}
+
+.bounceInDown {
+    -webkit-animation-name: bounceInDown;
+    animation-name: bounceInDown;
+}
+
+@-webkit-keyframes bounceInLeft {
+    from,
+    60%,
+    75%,
+    90%,
+    to {
+        -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
+        animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
+    }
+    0% {
+        opacity: 0;
+        -webkit-transform: translate3d(-3000px, 0, 0);
+        transform: translate3d(-3000px, 0, 0);
+    }
+    60% {
+        opacity: 1;
+        -webkit-transform: translate3d(25px, 0, 0);
+        transform: translate3d(25px, 0, 0);
+    }
+    75% {
+        -webkit-transform: translate3d(-10px, 0, 0);
+        transform: translate3d(-10px, 0, 0);
+    }
+    90% {
+        -webkit-transform: translate3d(5px, 0, 0);
+        transform: translate3d(5px, 0, 0);
+    }
+    to {
+        -webkit-transform: translate3d(0, 0, 0);
+        transform: translate3d(0, 0, 0);
+    }
+}
+
+@keyframes bounceInLeft {
+    from,
+    60%,
+    75%,
+    90%,
+    to {
+        -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
+        animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
+    }
+    0% {
+        opacity: 0;
+        -webkit-transform: translate3d(-3000px, 0, 0);
+        transform: translate3d(-3000px, 0, 0);
+    }
+    60% {
+        opacity: 1;
+        -webkit-transform: translate3d(25px, 0, 0);
+        transform: translate3d(25px, 0, 0);
+    }
+    75% {
+        -webkit-transform: translate3d(-10px, 0, 0);
+        transform: translate3d(-10px, 0, 0);
+    }
+    90% {
+        -webkit-transform: translate3d(5px, 0, 0);
+        transform: translate3d(5px, 0, 0);
+    }
+    to {
+        -webkit-transform: translate3d(0, 0, 0);
+        transform: translate3d(0, 0, 0);
+    }
+}
+
+.bounceInLeft {
+    -webkit-animation-name: bounceInLeft;
+    animation-name: bounceInLeft;
+}
+
+@-webkit-keyframes bounceInRight {
+    from,
+    60%,
+    75%,
+    90%,
+    to {
+        -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
+        animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
+    }
+    from {
+        opacity: 0;
+        -webkit-transform: translate3d(3000px, 0, 0);
+        transform: translate3d(3000px, 0, 0);
+    }
+    60% {
+        opacity: 1;
+        -webkit-transform: translate3d(-25px, 0, 0);
+        transform: translate3d(-25px, 0, 0);
+    }
+    75% {
+        -webkit-transform: translate3d(10px, 0, 0);
+        transform: translate3d(10px, 0, 0);
+    }
+    90% {
+        -webkit-transform: translate3d(-5px, 0, 0);
+        transform: translate3d(-5px, 0, 0);
+    }
+    to {
+        -webkit-transform: translate3d(0, 0, 0);
+        transform: translate3d(0, 0, 0);
+    }
+}
+
+@keyframes bounceInRight {
+    from,
+    60%,
+    75%,
+    90%,
+    to {
+        -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
+        animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
+    }
+    from {
+        opacity: 0;
+        -webkit-transform: translate3d(3000px, 0, 0);
+        transform: translate3d(3000px, 0, 0);
+    }
+    60% {
+        opacity: 1;
+        -webkit-transform: translate3d(-25px, 0, 0);
+        transform: translate3d(-25px, 0, 0);
+    }
+    75% {
+        -webkit-transform: translate3d(10px, 0, 0);
+        transform: translate3d(10px, 0, 0);
+    }
+    90% {
+        -webkit-transform: translate3d(-5px, 0, 0);
+        transform: translate3d(-5px, 0, 0);
+    }
+    to {
+        -webkit-transform: translate3d(0, 0, 0);
+        transform: translate3d(0, 0, 0);
+    }
+}
+
+.bounceInRight {
+    -webkit-animation-name: bounceInRight;
+    animation-name: bounceInRight;
+}
+
+@-webkit-keyframes bounceInUp {
+    from,
+    60%,
+    75%,
+    90%,
+    to {
+        -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
+        animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
+    }
+    from {
+        opacity: 0;
+        -webkit-transform: translate3d(0, 3000px, 0);
+        transform: translate3d(0, 3000px, 0);
+    }
+    60% {
+        opacity: 1;
+        -webkit-transform: translate3d(0, -20px, 0);
+        transform: translate3d(0, -20px, 0);
+    }
+    75% {
+        -webkit-transform: translate3d(0, 10px, 0);
+        transform: translate3d(0, 10px, 0);
+    }
+    90% {
+        -webkit-transform: translate3d(0, -5px, 0);
+        transform: translate3d(0, -5px, 0);
+    }
+    to {
+        -webkit-transform: translate3d(0, 0, 0);
+        transform: translate3d(0, 0, 0);
+    }
+}
+
+@keyframes bounceInUp {
+    from,
+    60%,
+    75%,
+    90%,
+    to {
+        -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
+        animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
+    }
+    from {
+        opacity: 0;
+        -webkit-transform: translate3d(0, 3000px, 0);
+        transform: translate3d(0, 3000px, 0);
+    }
+    60% {
+        opacity: 1;
+        -webkit-transform: translate3d(0, -20px, 0);
+        transform: translate3d(0, -20px, 0);
+    }
+    75% {
+        -webkit-transform: translate3d(0, 10px, 0);
+        transform: translate3d(0, 10px, 0);
+    }
+    90% {
+        -webkit-transform: translate3d(0, -5px, 0);
+        transform: translate3d(0, -5px, 0);
+    }
+    to {
+        -webkit-transform: translate3d(0, 0, 0);
+        transform: translate3d(0, 0, 0);
+    }
+}
+
+.bounceInUp {
+    -webkit-animation-name: bounceInUp;
+    animation-name: bounceInUp;
+}
+
+@-webkit-keyframes bounceOut {
+    20% {
+        -webkit-transform: scale3d(0.9, 0.9, 0.9);
+        transform: scale3d(0.9, 0.9, 0.9);
+    }
+    50%,
+    55% {
+        opacity: 1;
+        -webkit-transform: scale3d(1.1, 1.1, 1.1);
+        transform: scale3d(1.1, 1.1, 1.1);
+    }
+    to {
+        opacity: 0;
+        -webkit-transform: scale3d(0.3, 0.3, 0.3);
+        transform: scale3d(0.3, 0.3, 0.3);
+    }
+}
+
+@keyframes bounceOut {
+    20% {
+        -webkit-transform: scale3d(0.9, 0.9, 0.9);
+        transform: scale3d(0.9, 0.9, 0.9);
+    }
+    50%,
+    55% {
+        opacity: 1;
+        -webkit-transform: scale3d(1.1, 1.1, 1.1);
+        transform: scale3d(1.1, 1.1, 1.1);
+    }
+    to {
+        opacity: 0;
+        -webkit-transform: scale3d(0.3, 0.3, 0.3);
+        transform: scale3d(0.3, 0.3, 0.3);
+    }
+}
+
+.bounceOut {
+    -webkit-animation-duration: 0.75s;
+    animation-duration: 0.75s;
+    -webkit-animation-name: bounceOut;
+    animation-name: bounceOut;
+}
+
+@-webkit-keyframes bounceOutDown {
+    20% {
+        -webkit-transform: translate3d(0, 10px, 0);
+        transform: translate3d(0, 10px, 0);
+    }
+    40%,
+    45% {
+        opacity: 1;
+        -webkit-transform: translate3d(0, -20px, 0);
+        transform: translate3d(0, -20px, 0);
+    }
+    to {
+        opacity: 0;
+        -webkit-transform: translate3d(0, 2000px, 0);
+        transform: translate3d(0, 2000px, 0);
+    }
+}
+
+@keyframes bounceOutDown {
+    20% {
+        -webkit-transform: translate3d(0, 10px, 0);
+        transform: translate3d(0, 10px, 0);
+    }
+    40%,
+    45% {
+        opacity: 1;
+        -webkit-transform: translate3d(0, -20px, 0);
+        transform: translate3d(0, -20px, 0);
+    }
+    to {
+        opacity: 0;
+        -webkit-transform: translate3d(0, 2000px, 0);
+        transform: translate3d(0, 2000px, 0);
+    }
+}
+
+.bounceOutDown {
+    -webkit-animation-name: bounceOutDown;
+    animation-name: bounceOutDown;
+}
+
+@-webkit-keyframes bounceOutLeft {
+    20% {
+        opacity: 1;
+        -webkit-transform: translate3d(20px, 0, 0);
+        transform: translate3d(20px, 0, 0);
+    }
+    to {
+        opacity: 0;
+        -webkit-transform: translate3d(-2000px, 0, 0);
+        transform: translate3d(-2000px, 0, 0);
+    }
+}
+
+@keyframes bounceOutLeft {
+    20% {
+        opacity: 1;
+        -webkit-transform: translate3d(20px, 0, 0);
+        transform: translate3d(20px, 0, 0);
+    }
+    to {
+        opacity: 0;
+        -webkit-transform: translate3d(-2000px, 0, 0);
+        transform: translate3d(-2000px, 0, 0);
+    }
+}
+
+.bounceOutLeft {
+    -webkit-animation-name: bounceOutLeft;
+    animation-name: bounceOutLeft;
+}
+
+@-webkit-keyframes bounceOutRight {
+    20% {
+        opacity: 1;
+        -webkit-transform: translate3d(-20px, 0, 0);
+        transform: translate3d(-20px, 0, 0);
+    }
+    to {
+        opacity: 0;
+        -webkit-transform: translate3d(2000px, 0, 0);
+        transform: translate3d(2000px, 0, 0);
+    }
+}
+
+@keyframes bounceOutRight {
+    20% {
+        opacity: 1;
+        -webkit-transform: translate3d(-20px, 0, 0);
+        transform: translate3d(-20px, 0, 0);
+    }
+    to {
+        opacity: 0;
+        -webkit-transform: translate3d(2000px, 0, 0);
+        transform: translate3d(2000px, 0, 0);
+    }
+}
+
+.bounceOutRight {
+    -webkit-animation-name: bounceOutRight;
+    animation-name: bounceOutRight;
+}
+
+@-webkit-keyframes bounceOutUp {
+    20% {
+        -webkit-transform: translate3d(0, -10px, 0);
+        transform: translate3d(0, -10px, 0);
+    }
+    40%,
+    45% {
+        opacity: 1;
+        -webkit-transform: translate3d(0, 20px, 0);
+        transform: translate3d(0, 20px, 0);
+    }
+    to {
+        opacity: 0;
+        -webkit-transform: translate3d(0, -2000px, 0);
+        transform: translate3d(0, -2000px, 0);
+    }
+}
+
+@keyframes bounceOutUp {
+    20% {
+        -webkit-transform: translate3d(0, -10px, 0);
+        transform: translate3d(0, -10px, 0);
+    }
+    40%,
+    45% {
+        opacity: 1;
+        -webkit-transform: translate3d(0, 20px, 0);
+        transform: translate3d(0, 20px, 0);
+    }
+    to {
+        opacity: 0;
+        -webkit-transform: translate3d(0, -2000px, 0);
+        transform: translate3d(0, -2000px, 0);
+    }
+}
+
+.bounceOutUp {
+    -webkit-animation-name: bounceOutUp;
+    animation-name: bounceOutUp;
+}
+
+@-webkit-keyframes fadeIn {
+    from {
+        opacity: 0;
+    }
+    to {
+        opacity: 1;
+    }
+}
+
+@keyframes fadeIn {
+    from {
+        opacity: 0;
+    }
+    to {
+        opacity: 1;
+    }
+}
+
+.fadeIn {
+    -webkit-animation-name: fadeIn;
+    animation-name: fadeIn;
+}
+
+@-webkit-keyframes fadeInDown {
+    from {
+        opacity: 0;
+        -webkit-transform: translate3d(0, -100%, 0);
+        transform: translate3d(0, -100%, 0);
+    }
+    to {
+        opacity: 1;
+        -webkit-transform: translate3d(0, 0, 0);
+        transform: translate3d(0, 0, 0);
+    }
+}
+
+@keyframes fadeInDown {
+    from {
+        opacity: 0;
+        -webkit-transform: translate3d(0, -100%, 0);
+        transform: translate3d(0, -100%, 0);
+    }
+    to {
+        opacity: 1;
+        -webkit-transform: translate3d(0, 0, 0);
+        transform: translate3d(0, 0, 0);
+    }
+}
+
+.fadeInDown {
+    -webkit-animation-name: fadeInDown;
+    animation-name: fadeInDown;
+}
+
+@-webkit-keyframes fadeInDownBig {
+    from {
+        opacity: 0;
+        -webkit-transform: translate3d(0, -2000px, 0);
+        transform: translate3d(0, -2000px, 0);
+    }
+    to {
+        opacity: 1;
+        -webkit-transform: translate3d(0, 0, 0);
+        transform: translate3d(0, 0, 0);
+    }
+}
+
+@keyframes fadeInDownBig {
+    from {
+        opacity: 0;
+        -webkit-transform: translate3d(0, -2000px, 0);
+        transform: translate3d(0, -2000px, 0);
+    }
+    to {
+        opacity: 1;
+        -webkit-transform: translate3d(0, 0, 0);
+        transform: translate3d(0, 0, 0);
+    }
+}
+
+.fadeInDownBig {
+    -webkit-animation-name: fadeInDownBig;
+    animation-name: fadeInDownBig;
+}
+
+@-webkit-keyframes fadeInLeft {
+    from {
+        opacity: 0;
+        -webkit-transform: translate3d(-100%, 0, 0);
+        transform: translate3d(-100%, 0, 0);
+    }
+    to {
+        opacity: 1;
+        -webkit-transform: translate3d(0, 0, 0);
+        transform: translate3d(0, 0, 0);
+    }
+}
+
+@keyframes fadeInLeft {
+    from {
+        opacity: 0;
+        -webkit-transform: translate3d(-100%, 0, 0);
+        transform: translate3d(-100%, 0, 0);
+    }
+    to {
+        opacity: 1;
+        -webkit-transform: translate3d(0, 0, 0);
+        transform: translate3d(0, 0, 0);
+    }
+}
+
+.fadeInLeft {
+    -webkit-animation-name: fadeInLeft;
+    animation-name: fadeInLeft;
+}
+
+@-webkit-keyframes fadeInLeftBig {
+    from {
+        opacity: 0;
+        -webkit-transform: translate3d(-2000px, 0, 0);
+        transform: translate3d(-2000px, 0, 0);
+    }
+    to {
+        opacity: 1;
+        -webkit-transform: translate3d(0, 0, 0);
+        transform: translate3d(0, 0, 0);
+    }
+}
+
+@keyframes fadeInLeftBig {
+    from {
+        opacity: 0;
+        -webkit-transform: translate3d(-2000px, 0, 0);
+        transform: translate3d(-2000px, 0, 0);
+    }
+    to {
+        opacity: 1;
+        -webkit-transform: translate3d(0, 0, 0);
+        transform: translate3d(0, 0, 0);
+    }
+}
+
+.fadeInLeftBig {
+    -webkit-animation-name: fadeInLeftBig;
+    animation-name: fadeInLeftBig;
+}
+
+@-webkit-keyframes fadeInRight {
+    from {
+        opacity: 0;
+        -webkit-transform: translate3d(100%, 0, 0);
+        transform: translate3d(100%, 0, 0);
+    }
+    to {
+        opacity: 1;
+        -webkit-transform: translate3d(0, 0, 0);
+        transform: translate3d(0, 0, 0);
+    }
+}
+
+@keyframes fadeInRight {
+    from {
+        opacity: 0;
+        -webkit-transform: translate3d(100%, 0, 0);
+        transform: translate3d(100%, 0, 0);
+    }
+    to {
+        opacity: 1;
+        -webkit-transform: translate3d(0, 0, 0);
+        transform: translate3d(0, 0, 0);
+    }
+}
+
+.fadeInRight {
+    -webkit-animation-name: fadeInRight;
+    animation-name: fadeInRight;
+}
+
+@-webkit-keyframes fadeInRightBig {
+    from {
+        opacity: 0;
+        -webkit-transform: translate3d(2000px, 0, 0);
+        transform: translate3d(2000px, 0, 0);
+    }
+    to {
+        opacity: 1;
+        -webkit-transform: translate3d(0, 0, 0);
+        transform: translate3d(0, 0, 0);
+    }
+}
+
+@keyframes fadeInRightBig {
+    from {
+        opacity: 0;
+        -webkit-transform: translate3d(2000px, 0, 0);
+        transform: translate3d(2000px, 0, 0);
+    }
+    to {
+        opacity: 1;
+        -webkit-transform: translate3d(0, 0, 0);
+        transform: translate3d(0, 0, 0);
+    }
+}
+
+.fadeInRightBig {
+    -webkit-animation-name: fadeInRightBig;
+    animation-name: fadeInRightBig;
+}
+
+@-webkit-keyframes fadeInUp {
+    from {
+        opacity: 0;
+        -webkit-transform: translate3d(0, 100%, 0);
+        transform: translate3d(0, 100%, 0);
+    }
+    to {
+        opacity: 1;
+        -webkit-transform: translate3d(0, 0, 0);
+        transform: translate3d(0, 0, 0);
+    }
+}
+
+@keyframes fadeInUp {
+    from {
+        opacity: 0;
+        -webkit-transform: translate3d(0, 100%, 0);
+        transform: translate3d(0, 100%, 0);
+    }
+    to {
+        opacity: 1;
+        -webkit-transform: translate3d(0, 0, 0);
+        transform: translate3d(0, 0, 0);
+    }
+}
+
+.fadeInUp {
+    -webkit-animation-name: fadeInUp;
+    animation-name: fadeInUp;
+}
+
+@-webkit-keyframes fadeInUpBig {
+    from {
+        opacity: 0;
+        -webkit-transform: translate3d(0, 2000px, 0);
+        transform: translate3d(0, 2000px, 0);
+    }
+    to {
+        opacity: 1;
+        -webkit-transform: translate3d(0, 0, 0);
+        transform: translate3d(0, 0, 0);
+    }
+}
+
+@keyframes fadeInUpBig {
+    from {
+        opacity: 0;
+        -webkit-transform: translate3d(0, 2000px, 0);
+        transform: translate3d(0, 2000px, 0);
+    }
+    to {
+        opacity: 1;
+        -webkit-transform: translate3d(0, 0, 0);
+        transform: translate3d(0, 0, 0);
+    }
+}
+
+.fadeInUpBig {
+    -webkit-animation-name: fadeInUpBig;
+    animation-name: fadeInUpBig;
+}
+
+@-webkit-keyframes fadeOut {
+    from {
+        opacity: 1;
+    }
+    to {
+        opacity: 0;
+    }
+}
+
+@keyframes fadeOut {
+    from {
+        opacity: 1;
+    }
+    to {
+        opacity: 0;
+    }
+}
+
+.fadeOut {
+    -webkit-animation-name: fadeOut;
+    animation-name: fadeOut;
+}
+
+@-webkit-keyframes fadeOutDown {
+    from {
+        opacity: 1;
+    }
+    to {
+        opacity: 0;
+        -webkit-transform: translate3d(0, 100%, 0);
+        transform: translate3d(0, 100%, 0);
+    }
+}
+
+@keyframes fadeOutDown {
+    from {
+        opacity: 1;
+    }
+    to {
+        opacity: 0;
+        -webkit-transform: translate3d(0, 100%, 0);
+        transform: translate3d(0, 100%, 0);
+    }
+}
+
+.fadeOutDown {
+    -webkit-animation-name: fadeOutDown;
+    animation-name: fadeOutDown;
+}
+
+@-webkit-keyframes fadeOutDownBig {
+    from {
+        opacity: 1;
+    }
+    to {
+        opacity: 0;
+        -webkit-transform: translate3d(0, 2000px, 0);
+        transform: translate3d(0, 2000px, 0);
+    }
+}
+
+@keyframes fadeOutDownBig {
+    from {
+        opacity: 1;
+    }
+    to {
+        opacity: 0;
+        -webkit-transform: translate3d(0, 2000px, 0);
+        transform: translate3d(0, 2000px, 0);
+    }
+}
+
+.fadeOutDownBig {
+    -webkit-animation-name: fadeOutDownBig;
+    animation-name: fadeOutDownBig;
+}
+
+@-webkit-keyframes fadeOutLeft {
+    from {
+        opacity: 1;
+    }
+    to {
+        opacity: 0;
+        -webkit-transform: translate3d(-100%, 0, 0);
+        transform: translate3d(-100%, 0, 0);
+    }
+}
+
+@keyframes fadeOutLeft {
+    from {
+        opacity: 1;
+    }
+    to {
+        opacity: 0;
+        -webkit-transform: translate3d(-100%, 0, 0);
+        transform: translate3d(-100%, 0, 0);
+    }
+}
+
+.fadeOutLeft {
+    -webkit-animation-name: fadeOutLeft;
+    animation-name: fadeOutLeft;
+}
+
+@-webkit-keyframes fadeOutLeftBig {
+    from {
+        opacity: 1;
+    }
+    to {
+        opacity: 0;
+        -webkit-transform: translate3d(-2000px, 0, 0);
+        transform: translate3d(-2000px, 0, 0);
+    }
+}
+
+@keyframes fadeOutLeftBig {
+    from {
+        opacity: 1;
+    }
+    to {
+        opacity: 0;
+        -webkit-transform: translate3d(-2000px, 0, 0);
+        transform: translate3d(-2000px, 0, 0);
+    }
+}
+
+.fadeOutLeftBig {
+    -webkit-animation-name: fadeOutLeftBig;
+    animation-name: fadeOutLeftBig;
+}
+
+@-webkit-keyframes fadeOutRight {
+    from {
+        opacity: 1;
+    }
+    to {
+        opacity: 0;
+        -webkit-transform: translate3d(100%, 0, 0);
+        transform: translate3d(100%, 0, 0);
+    }
+}
+
+@keyframes fadeOutRight {
+    from {
+        opacity: 1;
+    }
+    to {
+        opacity: 0;
+        -webkit-transform: translate3d(100%, 0, 0);
+        transform: translate3d(100%, 0, 0);
+    }
+}
+
+.fadeOutRight {
+    -webkit-animation-name: fadeOutRight;
+    animation-name: fadeOutRight;
+}
+
+@-webkit-keyframes fadeOutRightBig {
+    from {
+        opacity: 1;
+    }
+    to {
+        opacity: 0;
+        -webkit-transform: translate3d(2000px, 0, 0);
+        transform: translate3d(2000px, 0, 0);
+    }
+}
+
+@keyframes fadeOutRightBig {
+    from {
+        opacity: 1;
+    }
+    to {
+        opacity: 0;
+        -webkit-transform: translate3d(2000px, 0, 0);
+        transform: translate3d(2000px, 0, 0);
+    }
+}
+
+.fadeOutRightBig {
+    -webkit-animation-name: fadeOutRightBig;
+    animation-name: fadeOutRightBig;
+}
+
+@-webkit-keyframes fadeOutUp {
+    from {
+        opacity: 1;
+    }
+    to {
+        opacity: 0;
+        -webkit-transform: translate3d(0, -100%, 0);
+        transform: translate3d(0, -100%, 0);
+    }
+}
+
+@keyframes fadeOutUp {
+    from {
+        opacity: 1;
+    }
+    to {
+        opacity: 0;
+        -webkit-transform: translate3d(0, -100%, 0);
+        transform: translate3d(0, -100%, 0);
+    }
+}
+
+.fadeOutUp {
+    -webkit-animation-name: fadeOutUp;
+    animation-name: fadeOutUp;
+}
+
+@-webkit-keyframes fadeOutUpBig {
+    from {
+        opacity: 1;
+    }
+    to {
+        opacity: 0;
+        -webkit-transform: translate3d(0, -2000px, 0);
+        transform: translate3d(0, -2000px, 0);
+    }
+}
+
+@keyframes fadeOutUpBig {
+    from {
+        opacity: 1;
+    }
+    to {
+        opacity: 0;
+        -webkit-transform: translate3d(0, -2000px, 0);
+        transform: translate3d(0, -2000px, 0);
+    }
+}
+
+.fadeOutUpBig {
+    -webkit-animation-name: fadeOutUpBig;
+    animation-name: fadeOutUpBig;
+}
+
+@-webkit-keyframes flip {
+    from {
+        -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -360deg);
+        transform: perspective(400px) rotate3d(0, 1, 0, -360deg);
+        -webkit-animation-timing-function: ease-out;
+        animation-timing-function: ease-out;
+    }
+    40% {
+        -webkit-transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg);
+        transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg);
+        -webkit-animation-timing-function: ease-out;
+        animation-timing-function: ease-out;
+    }
+    50% {
+        -webkit-transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg);
+        transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg);
+        -webkit-animation-timing-function: ease-in;
+        animation-timing-function: ease-in;
+    }
+    80% {
+        -webkit-transform: perspective(400px) scale3d(0.95, 0.95, 0.95);
+        transform: perspective(400px) scale3d(0.95, 0.95, 0.95);
+        -webkit-animation-timing-function: ease-in;
+        animation-timing-function: ease-in;
+    }
+    to {
+        -webkit-transform: perspective(400px);
+        transform: perspective(400px);
+        -webkit-animation-timing-function: ease-in;
+        animation-timing-function: ease-in;
+    }
+}
+
+@keyframes flip {
+    from {
+        -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -360deg);
+        transform: perspective(400px) rotate3d(0, 1, 0, -360deg);
+        -webkit-animation-timing-function: ease-out;
+        animation-timing-function: ease-out;
+    }
+    40% {
+        -webkit-transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg);
+        transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg);
+        -webkit-animation-timing-function: ease-out;
+        animation-timing-function: ease-out;
+    }
+    50% {
+        -webkit-transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg);
+        transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg);
+        -webkit-animation-timing-function: ease-in;
+        animation-timing-function: ease-in;
+    }
+    80% {
+        -webkit-transform: perspective(400px) scale3d(0.95, 0.95, 0.95);
+        transform: perspective(400px) scale3d(0.95, 0.95, 0.95);
+        -webkit-animation-timing-function: ease-in;
+        animation-timing-function: ease-in;
+    }
+    to {
+        -webkit-transform: perspective(400px);
+        transform: perspective(400px);
+        -webkit-animation-timing-function: ease-in;
+        animation-timing-function: ease-in;
+    }
+}
+
+.animated.flip {
+    -webkit-backface-visibility: visible;
+    backface-visibility: visible;
+    -webkit-animation-name: flip;
+    animation-name: flip;
+}
+
+@-webkit-keyframes flipInX {
+    from {
+        -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
+        transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
+        -webkit-animation-timing-function: ease-in;
+        animation-timing-function: ease-in;
+        opacity: 0;
+    }
+    40% {
+        -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
+        transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
+        -webkit-animation-timing-function: ease-in;
+        animation-timing-function: ease-in;
+    }
+    60% {
+        -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
+        transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
+        opacity: 1;
+    }
+    80% {
+        -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
+        transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
+    }
+    to {
+        -webkit-transform: perspective(400px);
+        transform: perspective(400px);
+    }
+}
+
+@keyframes flipInX {
+    from {
+        -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
+        transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
+        -webkit-animation-timing-function: ease-in;
+        animation-timing-function: ease-in;
+        opacity: 0;
+    }
+    40% {
+        -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
+        transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
+        -webkit-animation-timing-function: ease-in;
+        animation-timing-function: ease-in;
+    }
+    60% {
+        -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
+        transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
+        opacity: 1;
+    }
+    80% {
+        -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
+        transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
+    }
+    to {
+        -webkit-transform: perspective(400px);
+        transform: perspective(400px);
+    }
+}
+
+.flipInX {
+    -webkit-backface-visibility: visible !important;
+    backface-visibility: visible !important;
+    -webkit-animation-name: flipInX;
+    animation-name: flipInX;
+}
+
+@-webkit-keyframes flipInY {
+    from {
+        -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
+        transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
+        -webkit-animation-timing-function: ease-in;
+        animation-timing-function: ease-in;
+        opacity: 0;
+    }
+    40% {
+        -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
+        transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
+        -webkit-animation-timing-function: ease-in;
+        animation-timing-function: ease-in;
+    }
+    60% {
+        -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
+        transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
+        opacity: 1;
+    }
+    80% {
+        -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -5deg);
+        transform: perspective(400px) rotate3d(0, 1, 0, -5deg);
+    }
+    to {
+        -webkit-transform: perspective(400px);
+        transform: perspective(400px);
+    }
+}
+
+@keyframes flipInY {
+    from {
+        -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
+        transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
+        -webkit-animation-timing-function: ease-in;
+        animation-timing-function: ease-in;
+        opacity: 0;
+    }
+    40% {
+        -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
+        transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
+        -webkit-animation-timing-function: ease-in;
+        animation-timing-function: ease-in;
+    }
+    60% {
+        -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
+        transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
+        opacity: 1;
+    }
+    80% {
+        -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -5deg);
+        transform: perspective(400px) rotate3d(0, 1, 0, -5deg);
+    }
+    to {
+        -webkit-transform: perspective(400px);
+        transform: perspective(400px);
+    }
+}
+
+.flipInY {
+    -webkit-backface-visibility: visible !important;
+    backface-visibility: visible !important;
+    -webkit-animation-name: flipInY;
+    animation-name: flipInY;
+}
+
+@-webkit-keyframes flipOutX {
+    from {
+        -webkit-transform: perspective(400px);
+        transform: perspective(400px);
+    }
+    30% {
+        -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
+        transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
+        opacity: 1;
+    }
+    to {
+        -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
+        transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
+        opacity: 0;
+    }
+}
+
+@keyframes flipOutX {
+    from {
+        -webkit-transform: perspective(400px);
+        transform: perspective(400px);
+    }
+    30% {
+        -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
+        transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
+        opacity: 1;
+    }
+    to {
+        -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
+        transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
+        opacity: 0;
+    }
+}
+
+.flipOutX {
+    -webkit-animation-duration: 0.75s;
+    animation-duration: 0.75s;
+    -webkit-animation-name: flipOutX;
+    animation-name: flipOutX;
+    -webkit-backface-visibility: visible !important;
+    backface-visibility: visible !important;
+}
+
+@-webkit-keyframes flipOutY {
+    from {
+        -webkit-transform: perspective(400px);
+        transform: perspective(400px);
+    }
+    30% {
+        -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -15deg);
+        transform: perspective(400px) rotate3d(0, 1, 0, -15deg);
+        opacity: 1;
+    }
+    to {
+        -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
+        transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
+        opacity: 0;
+    }
+}
+
+@keyframes flipOutY {
+    from {
+        -webkit-transform: perspective(400px);
+        transform: perspective(400px);
+    }
+    30% {
+        -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -15deg);
+        transform: perspective(400px) rotate3d(0, 1, 0, -15deg);
+        opacity: 1;
+    }
+    to {
+        -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
+        transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
+        opacity: 0;
+    }
+}
+
+.flipOutY {
+    -webkit-animation-duration: 0.75s;
+    animation-duration: 0.75s;
+    -webkit-backface-visibility: visible !important;
+    backface-visibility: visible !important;
+    -webkit-animation-name: flipOutY;
+    animation-name: flipOutY;
+}
+
+@-webkit-keyframes lightSpeedIn {
+    from {
+        -webkit-transform: translate3d(100%, 0, 0) skewX(-30deg);
+        transform: translate3d(100%, 0, 0) skewX(-30deg);
+        opacity: 0;
+    }
+    60% {
+        -webkit-transform: skewX(20deg);
+        transform: skewX(20deg);
+        opacity: 1;
+    }
+    80% {
+        -webkit-transform: skewX(-5deg);
+        transform: skewX(-5deg);
+        opacity: 1;
+    }
+    to {
+        -webkit-transform: translate3d(0, 0, 0);
+        transform: translate3d(0, 0, 0);
+        opacity: 1;
+    }
+}
+
+@keyframes lightSpeedIn {
+    from {
+        -webkit-transform: translate3d(100%, 0, 0) skewX(-30deg);
+        transform: translate3d(100%, 0, 0) skewX(-30deg);
+        opacity: 0;
+    }
+    60% {
+        -webkit-transform: skewX(20deg);
+        transform: skewX(20deg);
+        opacity: 1;
+    }
+    80% {
+        -webkit-transform: skewX(-5deg);
+        transform: skewX(-5deg);
+        opacity: 1;
+    }
+    to {
+        -webkit-transform: translate3d(0, 0, 0);
+        transform: translate3d(0, 0, 0);
+        opacity: 1;
+    }
+}
+
+.lightSpeedIn {
+    -webkit-animation-name: lightSpeedIn;
+    animation-name: lightSpeedIn;
+    -webkit-animation-timing-function: ease-out;
+    animation-timing-function: ease-out;
+}
+
+@-webkit-keyframes lightSpeedOut {
+    from {
+        opacity: 1;
+    }
+    to {
+        -webkit-transform: translate3d(100%, 0, 0) skewX(30deg);
+        transform: translate3d(100%, 0, 0) skewX(30deg);
+        opacity: 0;
+    }
+}
+
+@keyframes lightSpeedOut {
+    from {
+        opacity: 1;
+    }
+    to {
+        -webkit-transform: translate3d(100%, 0, 0) skewX(30deg);
+        transform: translate3d(100%, 0, 0) skewX(30deg);
+        opacity: 0;
+    }
+}
+
+.lightSpeedOut {
+    -webkit-animation-name: lightSpeedOut;
+    animation-name: lightSpeedOut;
+    -webkit-animation-timing-function: ease-in;
+    animation-timing-function: ease-in;
+}
+
+@-webkit-keyframes rotateIn {
+    from {
+        -webkit-transform-origin: center;
+        transform-origin: center;
+        -webkit-transform: rotate3d(0, 0, 1, -200deg);
+        transform: rotate3d(0, 0, 1, -200deg);
+        opacity: 0;
+    }
+    to {
+        -webkit-transform-origin: center;
+        transform-origin: center;
+        -webkit-transform: translate3d(0, 0, 0);
+        transform: translate3d(0, 0, 0);
+        opacity: 1;
+    }
+}
+
+@keyframes rotateIn {
+    from {
+        -webkit-transform-origin: center;
+        transform-origin: center;
+        -webkit-transform: rotate3d(0, 0, 1, -200deg);
+        transform: rotate3d(0, 0, 1, -200deg);
+        opacity: 0;
+    }
+    to {
+        -webkit-transform-origin: center;
+        transform-origin: center;
+        -webkit-transform: translate3d(0, 0, 0);
+        transform: translate3d(0, 0, 0);
+        opacity: 1;
+    }
+}
+
+.rotateIn {
+    -webkit-animation-name: rotateIn;
+    animation-name: rotateIn;
+}
+
+@-webkit-keyframes rotateInDownLeft {
+    from {
+        -webkit-transform-origin: left bottom;
+        transform-origin: left bottom;
+        -webkit-transform: rotate3d(0, 0, 1, -45deg);
+        transform: rotate3d(0, 0, 1, -45deg);
+        opacity: 0;
+    }
+    to {
+        -webkit-transform-origin: left bottom;
+        transform-origin: left bottom;
+        -webkit-transform: translate3d(0, 0, 0);
+        transform: translate3d(0, 0, 0);
+        opacity: 1;
+    }
+}
+
+@keyframes rotateInDownLeft {
+    from {
+        -webkit-transform-origin: left bottom;
+        transform-origin: left bottom;
+        -webkit-transform: rotate3d(0, 0, 1, -45deg);
+        transform: rotate3d(0, 0, 1, -45deg);
+        opacity: 0;
+    }
+    to {
+        -webkit-transform-origin: left bottom;
+        transform-origin: left bottom;
+        -webkit-transform: translate3d(0, 0, 0);
+        transform: translate3d(0, 0, 0);
+        opacity: 1;
+    }
+}
+
+.rotateInDownLeft {
+    -webkit-animation-name: rotateInDownLeft;
+    animation-name: rotateInDownLeft;
+}
+
+@-webkit-keyframes rotateInDownRight {
+    from {
+        -webkit-transform-origin: right bottom;
+        transform-origin: right bottom;
+        -webkit-transform: rotate3d(0, 0, 1, 45deg);
+        transform: rotate3d(0, 0, 1, 45deg);
+        opacity: 0;
+    }
+    to {
+        -webkit-transform-origin: right bottom;
+        transform-origin: right bottom;
+        -webkit-transform: translate3d(0, 0, 0);
+        transform: translate3d(0, 0, 0);
+        opacity: 1;
+    }
+}
+
+@keyframes rotateInDownRight {
+    from {
+        -webkit-transform-origin: right bottom;
+        transform-origin: right bottom;
+        -webkit-transform: rotate3d(0, 0, 1, 45deg);
+        transform: rotate3d(0, 0, 1, 45deg);
+        opacity: 0;
+    }
+    to {
+        -webkit-transform-origin: right bottom;
+        transform-origin: right bottom;
+        -webkit-transform: translate3d(0, 0, 0);
+        transform: translate3d(0, 0, 0);
+        opacity: 1;
+    }
+}
+
+.rotateInDownRight {
+    -webkit-animation-name: rotateInDownRight;
+    animation-name: rotateInDownRight;
+}
+
+@-webkit-keyframes rotateInUpLeft {
+    from {
+        -webkit-transform-origin: left bottom;
+        transform-origin: left bottom;
+        -webkit-transform: rotate3d(0, 0, 1, 45deg);
+        transform: rotate3d(0, 0, 1, 45deg);
+        opacity: 0;
+    }
+    to {
+        -webkit-transform-origin: left bottom;
+        transform-origin: left bottom;
+        -webkit-transform: translate3d(0, 0, 0);
+        transform: translate3d(0, 0, 0);
+        opacity: 1;
+    }
+}
+
+@keyframes rotateInUpLeft {
+    from {
+        -webkit-transform-origin: left bottom;
+        transform-origin: left bottom;
+        -webkit-transform: rotate3d(0, 0, 1, 45deg);
+        transform: rotate3d(0, 0, 1, 45deg);
+        opacity: 0;
+    }
+    to {
+        -webkit-transform-origin: left bottom;
+        transform-origin: left bottom;
+        -webkit-transform: translate3d(0, 0, 0);
+        transform: translate3d(0, 0, 0);
+        opacity: 1;
+    }
+}
+
+.rotateInUpLeft {
+    -webkit-animation-name: rotateInUpLeft;
+    animation-name: rotateInUpLeft;
+}
+
+@-webkit-keyframes rotateInUpRight {
+    from {
+        -webkit-transform-origin: right bottom;
+        transform-origin: right bottom;
+        -webkit-transform: rotate3d(0, 0, 1, -90deg);
+        transform: rotate3d(0, 0, 1, -90deg);
+        opacity: 0;
+    }
+    to {
+        -webkit-transform-origin: right bottom;
+        transform-origin: right bottom;
+        -webkit-transform: translate3d(0, 0, 0);
+        transform: translate3d(0, 0, 0);
+        opacity: 1;
+    }
+}
+
+@keyframes rotateInUpRight {
+    from {
+        -webkit-transform-origin: right bottom;
+        transform-origin: right bottom;
+        -webkit-transform: rotate3d(0, 0, 1, -90deg);
+        transform: rotate3d(0, 0, 1, -90deg);
+        opacity: 0;
+    }
+    to {
+        -webkit-transform-origin: right bottom;
+        transform-origin: right bottom;
+        -webkit-transform: translate3d(0, 0, 0);
+        transform: translate3d(0, 0, 0);
+        opacity: 1;
+    }
+}
+
+.rotateInUpRight {
+    -webkit-animation-name: rotateInUpRight;
+    animation-name: rotateInUpRight;
+}
+
+@-webkit-keyframes rotateOut {
+    from {
+        -webkit-transform-origin: center;
+        transform-origin: center;
+        opacity: 1;
+    }
+    to {
+        -webkit-transform-origin: center;
+        transform-origin: center;
+        -webkit-transform: rotate3d(0, 0, 1, 200deg);
+        transform: rotate3d(0, 0, 1, 200deg);
+        opacity: 0;
+    }
+}
+
+@keyframes rotateOut {
+    from {
+        -webkit-transform-origin: center;
+        transform-origin: center;
+        opacity: 1;
+    }
+    to {
+        -webkit-transform-origin: center;
+        transform-origin: center;
+        -webkit-transform: rotate3d(0, 0, 1, 200deg);
+        transform: rotate3d(0, 0, 1, 200deg);
+        opacity: 0;
+    }
+}
+
+.rotateOut {
+    -webkit-animation-name: rotateOut;
+    animation-name: rotateOut;
+}
+
+@-webkit-keyframes rotateOutDownLeft {
+    from {
+        -webkit-transform-origin: left bottom;
+        transform-origin: left bottom;
+        opacity: 1;
+    }
+    to {
+        -webkit-transform-origin: left bottom;
+        transform-origin: left bottom;
+        -webkit-transform: rotate3d(0, 0, 1, 45deg);
+        transform: rotate3d(0, 0, 1, 45deg);
+        opacity: 0;
+    }
+}
+
+@keyframes rotateOutDownLeft {
+    from {
+        -webkit-transform-origin: left bottom;
+        transform-origin: left bottom;
+        opacity: 1;
+    }
+    to {
+        -webkit-transform-origin: left bottom;
+        transform-origin: left bottom;
+        -webkit-transform: rotate3d(0, 0, 1, 45deg);
+        transform: rotate3d(0, 0, 1, 45deg);
+        opacity: 0;
+    }
+}
+
+.rotateOutDownLeft {
+    -webkit-animation-name: rotateOutDownLeft;
+    animation-name: rotateOutDownLeft;
+}
+
+@-webkit-keyframes rotateOutDownRight {
+    from {
+        -webkit-transform-origin: right bottom;
+        transform-origin: right bottom;
+        opacity: 1;
+    }
+    to {
+        -webkit-transform-origin: right bottom;
+        transform-origin: right bottom;
+        -webkit-transform: rotate3d(0, 0, 1, -45deg);
+        transform: rotate3d(0, 0, 1, -45deg);
+        opacity: 0;
+    }
+}
+
+@keyframes rotateOutDownRight {
+    from {
+        -webkit-transform-origin: right bottom;
+        transform-origin: right bottom;
+        opacity: 1;
+    }
+    to {
+        -webkit-transform-origin: right bottom;
+        transform-origin: right bottom;
+        -webkit-transform: rotate3d(0, 0, 1, -45deg);
+        transform: rotate3d(0, 0, 1, -45deg);
+        opacity: 0;
+    }
+}
+
+.rotateOutDownRight {
+    -webkit-animation-name: rotateOutDownRight;
+    animation-name: rotateOutDownRight;
+}
+
+@-webkit-keyframes rotateOutUpLeft {
+    from {
+        -webkit-transform-origin: left bottom;
+        transform-origin: left bottom;
+        opacity: 1;
+    }
+    to {
+        -webkit-transform-origin: left bottom;
+        transform-origin: left bottom;
+        -webkit-transform: rotate3d(0, 0, 1, -45deg);
+        transform: rotate3d(0, 0, 1, -45deg);
+        opacity: 0;
+    }
+}
+
+@keyframes rotateOutUpLeft {
+    from {
+        -webkit-transform-origin: left bottom;
+        transform-origin: left bottom;
+        opacity: 1;
+    }
+    to {
+        -webkit-transform-origin: left bottom;
+        transform-origin: left bottom;
+        -webkit-transform: rotate3d(0, 0, 1, -45deg);
+        transform: rotate3d(0, 0, 1, -45deg);
+        opacity: 0;
+    }
+}
+
+.rotateOutUpLeft {
+    -webkit-animation-name: rotateOutUpLeft;
+    animation-name: rotateOutUpLeft;
+}
+
+@-webkit-keyframes rotateOutUpRight {
+    from {
+        -webkit-transform-origin: right bottom;
+        transform-origin: right bottom;
+        opacity: 1;
+    }
+    to {
+        -webkit-transform-origin: right bottom;
+        transform-origin: right bottom;
+        -webkit-transform: rotate3d(0, 0, 1, 90deg);
+        transform: rotate3d(0, 0, 1, 90deg);
+        opacity: 0;
+    }
+}
+
+@keyframes rotateOutUpRight {
+    from {
+        -webkit-transform-origin: right bottom;
+        transform-origin: right bottom;
+        opacity: 1;
+    }
+    to {
+        -webkit-transform-origin: right bottom;
+        transform-origin: right bottom;
+        -webkit-transform: rotate3d(0, 0, 1, 90deg);
+        transform: rotate3d(0, 0, 1, 90deg);
+        opacity: 0;
+    }
+}
+
+.rotateOutUpRight {
+    -webkit-animation-name: rotateOutUpRight;
+    animation-name: rotateOutUpRight;
+}
+
+@-webkit-keyframes hinge {
+    0% {
+        -webkit-transform-origin: top left;
+        transform-origin: top left;
+        -webkit-animation-timing-function: ease-in-out;
+        animation-timing-function: ease-in-out;
+    }
+    20%,
+    60% {
+        -webkit-transform: rotate3d(0, 0, 1, 80deg);
+        transform: rotate3d(0, 0, 1, 80deg);
+        -webkit-transform-origin: top left;
+        transform-origin: top left;
+        -webkit-animation-timing-function: ease-in-out;
+        animation-timing-function: ease-in-out;
+    }
+    40%,
+    80% {
+        -webkit-transform: rotate3d(0, 0, 1, 60deg);
+        transform: rotate3d(0, 0, 1, 60deg);
+        -webkit-transform-origin: top left;
+        transform-origin: top left;
+        -webkit-animation-timing-function: ease-in-out;
+        animation-timing-function: ease-in-out;
+        opacity: 1;
+    }
+    to {
+        -webkit-transform: translate3d(0, 700px, 0);
+        transform: translate3d(0, 700px, 0);
+        opacity: 0;
+    }
+}
+
+@keyframes hinge {
+    0% {
+        -webkit-transform-origin: top left;
+        transform-origin: top left;
+        -webkit-animation-timing-function: ease-in-out;
+        animation-timing-function: ease-in-out;
+    }
+    20%,
+    60% {
+        -webkit-transform: rotate3d(0, 0, 1, 80deg);
+        transform: rotate3d(0, 0, 1, 80deg);
+        -webkit-transform-origin: top left;
+        transform-origin: top left;
+        -webkit-animation-timing-function: ease-in-out;
+        animation-timing-function: ease-in-out;
+    }
+    40%,
+    80% {
+        -webkit-transform: rotate3d(0, 0, 1, 60deg);
+        transform: rotate3d(0, 0, 1, 60deg);
+        -webkit-transform-origin: top left;
+        transform-origin: top left;
+        -webkit-animation-timing-function: ease-in-out;
+        animation-timing-function: ease-in-out;
+        opacity: 1;
+    }
+    to {
+        -webkit-transform: translate3d(0, 700px, 0);
+        transform: translate3d(0, 700px, 0);
+        opacity: 0;
+    }
+}
+
+.hinge {
+    -webkit-animation-duration: 2s;
+    animation-duration: 2s;
+    -webkit-animation-name: hinge;
+    animation-name: hinge;
+}
+
+@-webkit-keyframes jackInTheBox {
+    from {
+        opacity: 0;
+        -webkit-transform: scale(0.1) rotate(30deg);
+        transform: scale(0.1) rotate(30deg);
+        -webkit-transform-origin: center bottom;
+        transform-origin: center bottom;
+    }
+    50% {
+        -webkit-transform: rotate(-10deg);
+        transform: rotate(-10deg);
+    }
+    70% {
+        -webkit-transform: rotate(3deg);
+        transform: rotate(3deg);
+    }
+    to {
+        opacity: 1;
+        -webkit-transform: scale(1);
+        transform: scale(1);
+    }
+}
+
+@keyframes jackInTheBox {
+    from {
+        opacity: 0;
+        -webkit-transform: scale(0.1) rotate(30deg);
+        transform: scale(0.1) rotate(30deg);
+        -webkit-transform-origin: center bottom;
+        transform-origin: center bottom;
+    }
+    50% {
+        -webkit-transform: rotate(-10deg);
+        transform: rotate(-10deg);
+    }
+    70% {
+        -webkit-transform: rotate(3deg);
+        transform: rotate(3deg);
+    }
+    to {
+        opacity: 1;
+        -webkit-transform: scale(1);
+        transform: scale(1);
+    }
+}
+
+.jackInTheBox {
+    -webkit-animation-name: jackInTheBox;
+    animation-name: jackInTheBox;
+}
+
+/* originally authored by Nick Pettit - https://github.com/nickpettit/glide */
+
+@-webkit-keyframes rollIn {
+    from {
+        opacity: 0;
+        -webkit-transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg);
+        transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg);
+    }
+    to {
+        opacity: 1;
+        -webkit-transform: translate3d(0, 0, 0);
+        transform: translate3d(0, 0, 0);
+    }
+}
+
+@keyframes rollIn {
+    from {
+        opacity: 0;
+        -webkit-transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg);
+        transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg);
+    }
+    to {
+        opacity: 1;
+        -webkit-transform: translate3d(0, 0, 0);
+        transform: translate3d(0, 0, 0);
+    }
+}
+
+.rollIn {
+    -webkit-animation-name: rollIn;
+    animation-name: rollIn;
+}
+
+/* originally authored by Nick Pettit - https://github.com/nickpettit/glide */
+
+@-webkit-keyframes rollOut {
+    from {
+        opacity: 1;
+    }
+    to {
+        opacity: 0;
+        -webkit-transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg);
+        transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg);
+    }
+}
+
+@keyframes rollOut {
+    from {
+        opacity: 1;
+    }
+    to {
+        opacity: 0;
+        -webkit-transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg);
+        transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg);
+    }
+}
+
+.rollOut {
+    -webkit-animation-name: rollOut;
+    animation-name: rollOut;
+}
+
+@-webkit-keyframes zoomIn {
+    from {
+        opacity: 0;
+        -webkit-transform: scale3d(0.3, 0.3, 0.3);
+        transform: scale3d(0.3, 0.3, 0.3);
+    }
+    50% {
+        opacity: 1;
+    }
+}
+
+@keyframes zoomIn {
+    from {
+        opacity: 0;
+        -webkit-transform: scale3d(0.3, 0.3, 0.3);
+        transform: scale3d(0.3, 0.3, 0.3);
+    }
+    50% {
+        opacity: 1;
+    }
+}
+
+.zoomIn {
+    -webkit-animation-name: zoomIn;
+    animation-name: zoomIn;
+}
+
+@-webkit-keyframes zoomInDown {
+    from {
+        opacity: 0;
+        -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -1000px, 0);
+        transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -1000px, 0);
+        -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
+        animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
+    }
+    60% {
+        opacity: 1;
+        -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);
+        transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);
+        -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
+        animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
+    }
+}
+
+@keyframes zoomInDown {
+    from {
+        opacity: 0;
+        -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -1000px, 0);
+        transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -1000px, 0);
+        -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
+        animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
+    }
+    60% {
+        opacity: 1;
+        -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);
+        transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);
+        -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
+        animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
+    }
+}
+
+.zoomInDown {
+    -webkit-animation-name: zoomInDown;
+    animation-name: zoomInDown;
+}
+
+@-webkit-keyframes zoomInLeft {
+    from {
+        opacity: 0;
+        -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(-1000px, 0, 0);
+        transform: scale3d(0.1, 0.1, 0.1) translate3d(-1000px, 0, 0);
+        -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
+        animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
+    }
+    60% {
+        opacity: 1;
+        -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(10px, 0, 0);
+        transform: scale3d(0.475, 0.475, 0.475) translate3d(10px, 0, 0);
+        -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
+        animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
+    }
+}
+
+@keyframes zoomInLeft {
+    from {
+        opacity: 0;
+        -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(-1000px, 0, 0);
+        transform: scale3d(0.1, 0.1, 0.1) translate3d(-1000px, 0, 0);
+        -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
+        animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
+    }
+    60% {
+        opacity: 1;
+        -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(10px, 0, 0);
+        transform: scale3d(0.475, 0.475, 0.475) translate3d(10px, 0, 0);
+        -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
+        animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
+    }
+}
+
+.zoomInLeft {
+    -webkit-animation-name: zoomInLeft;
+    animation-name: zoomInLeft;
+}
+
+@-webkit-keyframes zoomInRight {
+    from {
+        opacity: 0;
+        -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(1000px, 0, 0);
+        transform: scale3d(0.1, 0.1, 0.1) translate3d(1000px, 0, 0);
+        -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
+        animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
+    }
+    60% {
+        opacity: 1;
+        -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(-10px, 0, 0);
+        transform: scale3d(0.475, 0.475, 0.475) translate3d(-10px, 0, 0);
+        -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
+        animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
+    }
+}
+
+@keyframes zoomInRight {
+    from {
+        opacity: 0;
+        -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(1000px, 0, 0);
+        transform: scale3d(0.1, 0.1, 0.1) translate3d(1000px, 0, 0);
+        -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
+        animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
+    }
+    60% {
+        opacity: 1;
+        -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(-10px, 0, 0);
+        transform: scale3d(0.475, 0.475, 0.475) translate3d(-10px, 0, 0);
+        -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
+        animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
+    }
+}
+
+.zoomInRight {
+    -webkit-animation-name: zoomInRight;
+    animation-name: zoomInRight;
+}
+
+@-webkit-keyframes zoomInUp {
+    from {
+        opacity: 0;
+        -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 1000px, 0);
+        transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 1000px, 0);
+        -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
+        animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
+    }
+    60% {
+        opacity: 1;
+        -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);
+        transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);
+        -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
+        animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
+    }
+}
+
+@keyframes zoomInUp {
+    from {
+        opacity: 0;
+        -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 1000px, 0);
+        transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 1000px, 0);
+        -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
+        animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
+    }
+    60% {
+        opacity: 1;
+        -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);
+        transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);
+        -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
+        animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
+    }
+}
+
+.zoomInUp {
+    -webkit-animation-name: zoomInUp;
+    animation-name: zoomInUp;
+}
+
+@-webkit-keyframes zoomOut {
+    from {
+        opacity: 1;
+    }
+    50% {
+        opacity: 0;
+        -webkit-transform: scale3d(0.3, 0.3, 0.3);
+        transform: scale3d(0.3, 0.3, 0.3);
+    }
+    to {
+        opacity: 0;
+    }
+}
+
+@keyframes zoomOut {
+    from {
+        opacity: 1;
+    }
+    50% {
+        opacity: 0;
+        -webkit-transform: scale3d(0.3, 0.3, 0.3);
+        transform: scale3d(0.3, 0.3, 0.3);
+    }
+    to {
+        opacity: 0;
+    }
+}
+
+.zoomOut {
+    -webkit-animation-name: zoomOut;
+    animation-name: zoomOut;
+}
+
+@-webkit-keyframes zoomOutDown {
+    40% {
+        opacity: 1;
+        -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);
+        transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);
+        -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
+        animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
+    }
+    to {
+        opacity: 0;
+        -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 2000px, 0);
+        transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 2000px, 0);
+        -webkit-transform-origin: center bottom;
+        transform-origin: center bottom;
+        -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
+        animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
+    }
+}
+
+@keyframes zoomOutDown {
+    40% {
+        opacity: 1;
+        -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);
+        transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);
+        -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
+        animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
+    }
+    to {
+        opacity: 0;
+        -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 2000px, 0);
+        transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 2000px, 0);
+        -webkit-transform-origin: center bottom;
+        transform-origin: center bottom;
+        -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
+        animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
+    }
+}
+
+.zoomOutDown {
+    -webkit-animation-name: zoomOutDown;
+    animation-name: zoomOutDown;
+}
+
+@-webkit-keyframes zoomOutLeft {
+    40% {
+        opacity: 1;
+        -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(42px, 0, 0);
+        transform: scale3d(0.475, 0.475, 0.475) translate3d(42px, 0, 0);
+    }
+    to {
+        opacity: 0;
+        -webkit-transform: scale(0.1) translate3d(-2000px, 0, 0);
+        transform: scale(0.1) translate3d(-2000px, 0, 0);
+        -webkit-transform-origin: left center;
+        transform-origin: left center;
+    }
+}
+
+@keyframes zoomOutLeft {
+    40% {
+        opacity: 1;
+        -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(42px, 0, 0);
+        transform: scale3d(0.475, 0.475, 0.475) translate3d(42px, 0, 0);
+    }
+    to {
+        opacity: 0;
+        -webkit-transform: scale(0.1) translate3d(-2000px, 0, 0);
+        transform: scale(0.1) translate3d(-2000px, 0, 0);
+        -webkit-transform-origin: left center;
+        transform-origin: left center;
+    }
+}
+
+.zoomOutLeft {
+    -webkit-animation-name: zoomOutLeft;
+    animation-name: zoomOutLeft;
+}
+
+@-webkit-keyframes zoomOutRight {
+    40% {
+        opacity: 1;
+        -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(-42px, 0, 0);
+        transform: scale3d(0.475, 0.475, 0.475) translate3d(-42px, 0, 0);
+    }
+    to {
+        opacity: 0;
+        -webkit-transform: scale(0.1) translate3d(2000px, 0, 0);
+        transform: scale(0.1) translate3d(2000px, 0, 0);
+        -webkit-transform-origin: right center;
+        transform-origin: right center;
+    }
+}
+
+@keyframes zoomOutRight {
+    40% {
+        opacity: 1;
+        -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(-42px, 0, 0);
+        transform: scale3d(0.475, 0.475, 0.475) translate3d(-42px, 0, 0);
+    }
+    to {
+        opacity: 0;
+        -webkit-transform: scale(0.1) translate3d(2000px, 0, 0);
+        transform: scale(0.1) translate3d(2000px, 0, 0);
+        -webkit-transform-origin: right center;
+        transform-origin: right center;
+    }
+}
+
+.zoomOutRight {
+    -webkit-animation-name: zoomOutRight;
+    animation-name: zoomOutRight;
+}
+
+@-webkit-keyframes zoomOutUp {
+    40% {
+        opacity: 1;
+        -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);
+        transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);
+        -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
+        animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
+    }
+    to {
+        opacity: 0;
+        -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -2000px, 0);
+        transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -2000px, 0);
+        -webkit-transform-origin: center bottom;
+        transform-origin: center bottom;
+        -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
+        animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
+    }
+}
+
+@keyframes zoomOutUp {
+    40% {
+        opacity: 1;
+        -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);
+        transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);
+        -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
+        animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
+    }
+    to {
+        opacity: 0;
+        -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -2000px, 0);
+        transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -2000px, 0);
+        -webkit-transform-origin: center bottom;
+        transform-origin: center bottom;
+        -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
+        animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
+    }
+}
+
+.zoomOutUp {
+    -webkit-animation-name: zoomOutUp;
+    animation-name: zoomOutUp;
+}
+
+@-webkit-keyframes slideInDown {
+    from {
+        -webkit-transform: translate3d(0, -100%, 0);
+        transform: translate3d(0, -100%, 0);
+        visibility: visible;
+    }
+    to {
+        -webkit-transform: translate3d(0, 0, 0);
+        transform: translate3d(0, 0, 0);
+    }
+}
+
+@keyframes slideInDown {
+    from {
+        -webkit-transform: translate3d(0, -100%, 0);
+        transform: translate3d(0, -100%, 0);
+        visibility: visible;
+    }
+    to {
+        -webkit-transform: translate3d(0, 0, 0);
+        transform: translate3d(0, 0, 0);
+    }
+}
+
+.slideInDown {
+    -webkit-animation-name: slideInDown;
+    animation-name: slideInDown;
+}
+
+@-webkit-keyframes slideInLeft {
+    from {
+        -webkit-transform: translate3d(-100%, 0, 0);
+        transform: translate3d(-100%, 0, 0);
+        visibility: visible;
+    }
+    to {
+        -webkit-transform: translate3d(0, 0, 0);
+        transform: translate3d(0, 0, 0);
+    }
+}
+
+@keyframes slideInLeft {
+    from {
+        -webkit-transform: translate3d(-100%, 0, 0);
+        transform: translate3d(-100%, 0, 0);
+        visibility: visible;
+    }
+    to {
+        -webkit-transform: translate3d(0, 0, 0);
+        transform: translate3d(0, 0, 0);
+    }
+}
+
+.slideInLeft {
+    -webkit-animation-name: slideInLeft;
+    animation-name: slideInLeft;
+}
+
+@-webkit-keyframes slideInRight {
+    from {
+        -webkit-transform: translate3d(100%, 0, 0);
+        transform: translate3d(100%, 0, 0);
+        visibility: visible;
+    }
+    to {
+        -webkit-transform: translate3d(0, 0, 0);
+        transform: translate3d(0, 0, 0);
+    }
+}
+
+@keyframes slideInRight {
+    from {
+        -webkit-transform: translate3d(100%, 0, 0);
+        transform: translate3d(100%, 0, 0);
+        visibility: visible;
+    }
+    to {
+        -webkit-transform: translate3d(0, 0, 0);
+        transform: translate3d(0, 0, 0);
+    }
+}
+
+.slideInRight {
+    -webkit-animation-name: slideInRight;
+    animation-name: slideInRight;
+}
+
+@-webkit-keyframes slideInUp {
+    from {
+        -webkit-transform: translate3d(0, 100%, 0);
+        transform: translate3d(0, 100%, 0);
+        visibility: visible;
+    }
+    to {
+        -webkit-transform: translate3d(0, 0, 0);
+        transform: translate3d(0, 0, 0);
+    }
+}
+
+@keyframes slideInUp {
+    from {
+        -webkit-transform: translate3d(0, 100%, 0);
+        transform: translate3d(0, 100%, 0);
+        visibility: visible;
+    }
+    to {
+        -webkit-transform: translate3d(0, 0, 0);
+        transform: translate3d(0, 0, 0);
+    }
+}
+
+.slideInUp {
+    -webkit-animation-name: slideInUp;
+    animation-name: slideInUp;
+}
+
+@-webkit-keyframes slideOutDown {
+    from {
+        -webkit-transform: translate3d(0, 0, 0);
+        transform: translate3d(0, 0, 0);
+    }
+    to {
+        visibility: hidden;
+        -webkit-transform: translate3d(0, 100%, 0);
+        transform: translate3d(0, 100%, 0);
+    }
+}
+
+@keyframes slideOutDown {
+    from {
+        -webkit-transform: translate3d(0, 0, 0);
+        transform: translate3d(0, 0, 0);
+    }
+    to {
+        visibility: hidden;
+        -webkit-transform: translate3d(0, 100%, 0);
+        transform: translate3d(0, 100%, 0);
+    }
+}
+
+.slideOutDown {
+    -webkit-animation-name: slideOutDown;
+    animation-name: slideOutDown;
+}
+
+@-webkit-keyframes slideOutLeft {
+    from {
+        -webkit-transform: translate3d(0, 0, 0);
+        transform: translate3d(0, 0, 0);
+    }
+    to {
+        visibility: hidden;
+        -webkit-transform: translate3d(-100%, 0, 0);
+        transform: translate3d(-100%, 0, 0);
+    }
+}
+
+@keyframes slideOutLeft {
+    from {
+        -webkit-transform: translate3d(0, 0, 0);
+        transform: translate3d(0, 0, 0);
+    }
+    to {
+        visibility: hidden;
+        -webkit-transform: translate3d(-100%, 0, 0);
+        transform: translate3d(-100%, 0, 0);
+    }
+}
+
+.slideOutLeft {
+    -webkit-animation-name: slideOutLeft;
+    animation-name: slideOutLeft;
+}
+
+@-webkit-keyframes slideOutRight {
+    from {
+        -webkit-transform: translate3d(0, 0, 0);
+        transform: translate3d(0, 0, 0);
+    }
+    to {
+        visibility: hidden;
+        -webkit-transform: translate3d(100%, 0, 0);
+        transform: translate3d(100%, 0, 0);
+    }
+}
+
+@keyframes slideOutRight {
+    from {
+        -webkit-transform: translate3d(0, 0, 0);
+        transform: translate3d(0, 0, 0);
+    }
+    to {
+        visibility: hidden;
+        -webkit-transform: translate3d(100%, 0, 0);
+        transform: translate3d(100%, 0, 0);
+    }
+}
+
+.slideOutRight {
+    -webkit-animation-name: slideOutRight;
+    animation-name: slideOutRight;
+}
+
+@-webkit-keyframes slideOutUp {
+    from {
+        -webkit-transform: translate3d(0, 0, 0);
+        transform: translate3d(0, 0, 0);
+    }
+    to {
+        visibility: hidden;
+        -webkit-transform: translate3d(0, -100%, 0);
+        transform: translate3d(0, -100%, 0);
+    }
+}
+
+@keyframes slideOutUp {
+    from {
+        -webkit-transform: translate3d(0, 0, 0);
+        transform: translate3d(0, 0, 0);
+    }
+    to {
+        visibility: hidden;
+        -webkit-transform: translate3d(0, -100%, 0);
+        transform: translate3d(0, -100%, 0);
+    }
+}
+
+.slideOutUp {
+    -webkit-animation-name: slideOutUp;
+    animation-name: slideOutUp;
+}

2018专题/1808万王之王专题-商务/src/sass/global.scss

@@ -9,31 +9,42 @@ $pingfan:PingFangSC-Regular;
 @import "base/mMixins";
 
 @import "module/swiper.css";
+@import "base/animate.min.css";
+
+@import "module/page1";
+@import "module/page2";
+@import "module/page3";
+@import "module/page4";
+@import "module/page5";
+@import "module/page6";
+@import "module/page7";
 
 html {
     height: 100%; // overflow-y: scroll;
     font: 14px/1.5 PingFang sc,$yahei, "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 {
     height: 100%;
+    background-color: #312d29;
 }
 
 .swiper-container {
     width: 100%;
     height: 100%;
 }
-.arrow-icon{
+.swiper-slide{
+    overflow: hidden;
+}
+.arrow-down-icon{
     position: fixed;
     z-index: 10;
     bottom: px2rem(30);
     left: 50%;
     margin-left: -px2rem(30);
-    width: px2rem(60);
-    height: px2rem(29);
-    background: url('../img/arrow-down-icon.png') center center no-repeat;
+    width: px2rem(30);
+    height: px2rem(21);
+    background: url('../img/arrow.png') center center no-repeat;
     background-size: 100%;
     animation: jump 1.3s ease-in-out infinite;
 }
@@ -48,4 +59,85 @@ body {
     100%{
         transform: translateY(0);
     }
+}
+
+.pub-nav-box{
+    position: fixed;
+    z-index: 10;
+    right: px2rem(30);
+    top: 50%;
+    width: px2rem(120);
+    height: px2rem(380);
+    margin-top: -px2rem(190);
+    .nav-item{
+        position: relative;
+        height: px2rem(20);
+        font-size: 0;
+        line-height: px2rem(20);
+        margin-bottom: px2rem(40);
+        &:last-child{
+            margin-bottom: 0;
+            &::after{
+                display: none;
+            }
+        }
+        &:after{
+            content: '';
+            position: absolute;
+            width: 1px;
+            height: px2rem(40);
+            background-color: #624f38;
+            top: px2rem(19);
+            left: px2rem(8);
+        }
+        .icon{
+            display: inline-block;
+            width: px2rem(19);
+            height: px2rem(19);
+            background: url('../img/nav-icon.png') center center no-repeat;
+            vertical-align: top;
+            background-size: 100%;
+        }
+        .title{
+            display: inline-block;
+            font-size: px2rem(16);
+            color: #9e825f;
+            margin-left: px2rem(34);
+        }
+    }
+    .current{
+        .nav-current{
+            display: block;
+        }
+        .title{
+            color: #fbd184;
+            font-weight: bold;
+        }
+    }
+    .nav-current{
+        display: none;
+        position: absolute;
+        z-index: 20;
+        width: px2rem(62);
+        height: px2rem(62);
+        left: -px2rem(22);
+        top: -px2rem(26);
+    }
+}
+
+.join-btn{
+    display: none;
+    position: fixed;
+    z-index: 2;
+    right: 0;
+    bottom: px2rem(20);
+    width: px2rem(361);
+    height: px2rem(242);
+    background: url('../img/join-btn.png') center center no-repeat;
+    background-size: 100%;
+    cursor: pointer;
+    &:hover{
+        background: url('../img/join-btn-hover.png') center center no-repeat;
+        background-size: 100%;
+    }
 }

2018专题/1808万王之王专题-商务/src/sass/module/page1.scss

@@ -0,0 +1,16 @@
+.p1{
+    .main-text{
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        width: px2rem(1344);
+        height: px2rem(260);
+        margin-left: -px2rem(672);
+        margin-top: -px2rem(130);
+    }
+}
+.p1-video{
+    width: 100%;
+    height: auto;
+    object-fit: fill;
+}

2018专题/1808万王之王专题-商务/src/sass/module/page2.scss

@@ -0,0 +1,283 @@
+.p2{
+    position: relative;
+    transition: all .3s ease-in-out;
+    .audio-icon{
+        position: absolute;
+        top: 20px;
+        right: 20px;
+        width: 57px;
+        height: 56px;
+        cursor: pointer;
+        &.on{
+            background: url('../../img/audio-normal-icon.png?__sprite') center center no-repeat;
+        }
+        &.off{
+            background: url('../../img/audio-disable-icon.png?__sprite') center center no-repeat;
+        }
+    }
+}
+.tab1-bg{
+    background: url('../../img/p2-bg1.jpg') top center no-repeat;
+    background-size: 100% auto;
+}
+.tab2-bg{
+    background: url('../../img/p2-bg2.jpg') top center no-repeat;
+    background-size: 100% auto;
+}
+.tab3-bg{
+    background: url('../../img/p2-bg3.jpg') top center no-repeat;
+    background-size: 100% auto;
+}
+.tab4-bg{
+    background: url('../../img/p2-bg4.jpg') top center no-repeat;
+    background-size: 100% auto;
+}
+.box-icon{
+    position: absolute;
+    z-index: 4;
+    // width: px2rem(500);
+    // height: px2rem(200);
+    .circle{
+        position: absolute;
+        width: px2rem(20);
+        height: px2rem(20);
+        background-color: #ffffff;
+        border-radius: 50%;
+        border: 1px solid #141414;
+        cursor: pointer;
+        &:hover{
+            background-color: #37ced4;
+            box-shadow: #37ced4;
+        }
+    }
+    .modal-circle {
+        position: absolute;
+        width: px2rem(20);
+        height: px2rem(20);
+        background-color: #ffffff;
+        border-radius: 50%;
+        border: 1px solid #141414;
+        cursor: pointer;
+        &:hover{
+            background-color: #37ced4;
+            box-shadow: #37ced4;
+        }
+    }
+    .gif-cover{
+        display: none;
+        position: absolute;
+        z-index: 5;
+        opacity: 0;
+        width: px2rem(430);
+        border: 2px solid #cfb370;
+        left: px2rem(140);
+        top: px2rem(-100);
+        img{
+            width: 100%;
+            height: auto;
+        }
+    }
+    .line{
+        display: none;
+        width: 0;
+        border-top: 2px dotted #cfb370;
+        position: absolute;
+        top: px2rem(10);
+        left: px2rem(20);
+    }
+    &.on{
+        .gif-cover{
+            display: block;
+            animation: opaAnima .5s linear forwards;
+            animation-delay: .5s;
+        }
+        .line{
+            display: block;
+            animation: widthAnima .5s linear forwards;
+        }
+        .circle{
+            background-color: #37ced4;
+            box-shadow: #9ee5e7;
+        }
+        .modal-circle{
+            background-color: #37ced4;
+            box-shadow: #9ee5e7;
+        }
+    }
+}
+.bg1-icon1{
+    left: px2rem(579);
+    top: px2rem(640);
+}
+
+.bg2-icon1{
+    left: px2rem(490);
+    top: px2rem(750);
+    .gif-cover{
+        top: -px2rem(200);
+    }
+}
+.bg2-icon2{
+    left: px2rem(627);
+    top: px2rem(518);
+}
+.bg2-icon3{
+    left: px2rem(1027);
+    top: px2rem(612);
+    .gif-cover{
+        top: -px2rem(200);
+    }
+}
+.bg2-icon4{
+    left: px2rem(1390);
+    top: px2rem(677);
+    .line{
+        left: -px2rem(120);
+    }
+    .gif-cover{
+        left: -px2rem(550);
+        top: -px2rem(200);
+    }
+}
+
+.bg3-icon1{
+    left: px2rem(610);
+    top: px2rem(402);
+}
+.bg3-icon2{
+    left: px2rem(600);
+    top: px2rem(600);
+}
+.bg3-icon3{
+    left: px2rem(860);
+    top: px2rem(545);
+}
+.bg3-icon4{
+    left: px2rem(850);
+    top: px2rem(381);
+}
+
+.bg2-location{
+    display: none;
+}
+.bg3-location{
+    display: none;
+}
+.bg4-location{
+    display: none;
+}
+
+
+@keyframes opaAnima {
+    from {
+        opacity: 0;
+    }
+    to {
+        opacity: 1;
+    }
+}
+
+@keyframes widthAnima {
+    from {
+        width: px2rem(1);
+    }
+    to {
+        width: px2rem(120);
+    }
+}
+
+.mask{
+    position: absolute;
+    z-index: 2;
+    display: none;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background-color: rgba($color: #000000, $alpha: .5);
+}
+
+.p2-modal{
+    position: absolute;
+    display: none;
+    z-index: 11;
+    top: px2rem(30);
+    right: px2rem(200);
+    background: url('../../img/text-bg.png') center center no-repeat;
+    background-size: 100%;
+    width: px2rem(650);
+    height: px2rem(700);
+    padding: px2rem(40);
+    .title{
+        font-size: 20px;
+        color: #eed1a0;
+        margin: px2rem(30) 0 px2rem(10) 0;
+    }
+    .text{
+        font-size: 14px;
+        line-height: 1.6;
+        color: #cac5bb;
+    }
+    .modal-close-icon{
+        position: absolute;
+        top: px2rem(34);
+        right: px2rem(34);
+        background: url('../../img/modal-close-icon.png') center center no-repeat;
+        background-size: 100%;
+        width: px2rem(48);
+        height: px2rem(48);
+        cursor: pointer;
+    }
+}
+
+.p2-bottom-tab{
+    position: absolute;
+    z-index: 1;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    text-align: center;
+    font-size: 0;
+    background-color: #272725;
+    opacity: .8;
+    .two-line{
+        width: 100%;
+        height: 4px;
+        border-top: 1px solid #a19676;
+        border-bottom: 1px solid #a19676;
+    }
+    .tab-item{
+        display: inline-block;
+        vertical-align: top;
+        width: px2rem(160);
+        height: px2rem(60);
+        line-height: px2rem(60);
+        font-size: px2rem(16);
+        color: #efd4ac;
+        text-align: center;
+        cursor: pointer;
+        position: relative;
+        &:after{
+            content: '';
+            display: none;
+            position: absolute;
+            width: px2rem(67);
+            height: px2rem(42);
+            background: url('../../img/p2-select-icon.png') center center no-repeat;
+            background-size: 100%;
+            top: -12px;
+            left: 50%;
+            margin-left: -px2rem(33);
+        }
+        &:hover::after{
+            display: block;
+            background-image: url('../../img/p2-current-icon1.png');
+        }
+        &.cur-tab:after{
+            display: block;
+        }
+        &.cur-tab{
+            color: #ffcf85;
+        }
+    }
+}

2018专题/1808万王之王专题-商务/src/sass/module/page3.scss

@@ -0,0 +1,213 @@
+.p3{
+    transition: all .3s ease-in-out;
+}
+.p3-human-bg1{
+    background: url('../../img/p3-bg1.jpg') center top no-repeat;
+    background-size: cover;
+}
+.p3-human-bg2{
+    background: url('../../img/p3-bg2.jpg') center top no-repeat;
+    background-size: cover;
+}
+.p3-human-bg3{
+    background: url('../../img/p3-bg3.jpg') center top no-repeat;
+    background-size: cover;
+}
+.p3-human-bg4{
+    background: url('../../img/p3-bg4.jpg') center top no-repeat;
+    background-size: cover;
+}
+.human-tab{
+    position: absolute;
+    width: px2rem(830);
+    height: px2rem(727);
+    background: url('../../img/p3-line.png') no-repeat;
+    background-size: 100%;
+    top: px2rem(60);
+    left: px2rem(650);
+    &-item{
+        position: absolute;
+        width: px2rem(76);
+        height: px2rem(82);
+        cursor: pointer;
+        transition: .3s all linear;
+        &.hover{
+            transform: scale(1.3);
+        }
+        &:hover{
+            transform: scale(1.3);
+        }
+    }
+    #changeBg1{
+        top: px2rem(90);
+        left: px2rem(76);
+        background: url('../../img/human1-icon.png') no-repeat;
+        background-size: 100%;
+    }
+    #changeBg2{
+        top: 0;
+        left: px2rem(204);
+        background: url('../../img/human2-icon.png') no-repeat;
+        background-size: 100%;
+    }
+    #changeBg3{
+        top: -px2rem(50);
+        left: px2rem(374);
+        width: px2rem(76);
+        height: px2rem(89);
+        background: url('../../img/human3-icon.png') no-repeat;
+        background-size: 100%;
+    }
+    #changeBg4{
+        top: 0;
+        left: px2rem(560);
+        width: px2rem(80);
+        height: px2rem(75);
+        background: url('../../img/human4-icon.png') no-repeat;
+        background-size: 100%;
+    }
+}
+
+.role-info{
+    position: absolute;
+    width: px2rem(470);
+    left: px2rem(110);
+    top: px2rem(130);
+    .role-info-text{
+        margin-bottom: px2rem(26);
+    }
+    .content{
+        display: none;
+        &.on{
+            display: block;
+        }
+        img{
+            width: 100%;
+            position: relative;
+            left: -px2rem(70);
+        }
+        .span-line{
+            display: block;
+            background: url('../../img/p3-text-line.png') no-repeat;
+            background-size: 100%;
+            width: px2rem(219);
+            height: 1px;
+        }
+        .title{
+            font-size: px2rem(18);
+            color: #debf9a;
+            font-weight: bold;
+            margin: px2rem(14) 0;
+        }
+        .text{
+            width: px2rem(400);
+            color: #ffffff;
+            font-size: px2rem(14);
+            margin-bottom: px2rem(14);
+            line-height: 1.6;
+        }
+    }
+}
+
+.roleWarp .profession,.roleWarp .skill-box{position: relative;}
+.roleWarp .skill-box .skill-list{display: none;width: 400px;overflow:hidden;}
+.roleWarp .skill-box .skill-list.on{display: block;}
+.profession h3,.skill-box h3{font-size: 16px;color: #fbe3bf;margin-bottom: 10px;}
+.profession .tab-skill-box,.skill-box .tab-skill-box{display: block;width: 233px;overflow: hidden;clear: both;margin-left: 20px;position: relative;}
+.profession ul,.skill-box ul{width: 400px;overflow: hidden;clear: both;position: relative;transition: left .5s;-webkit-transition: left .5s;}
+.roleWarp ul.skill-7{width: 700px}
+.roleWarp ul.skill-8{width: 800px}
+.roleWarp ul.skill-9{width: 900px;}
+.profession ul li,.skill-box ul li{display: block;width: 56px;height: 57px;margin: 8px 10px;float: left;cursor: pointer;}
+.skill-box ul li{width: 40px;height: 40px;border-radius: 50%;border: 1px solid #ffe2a2;margin: 15px 18px 8px;border: none;}
+.profession ul li img,.skill-box ul li img{display: block;width: 59px;margin: 4px auto;}
+.skill-box ul li img{border: 1px solid #dec28c;border-radius: 50%;}
+.profession ul li.on img,.skill-box ul li.on img{/* width: 70px; */margin: 0;transform: scale(1.2);}
+.profession ul li.on,.skill-box ul li.on{transform: scale(1.2);-webkit-transform: scale(1.2);/* animation: pulse 3s infinite linear; */}
+.roleWarp .skil-text{display: block;width: 400px;height: 58px;color: #eab661;line-height: 24px;padding-top: 6px;text-align: left;font-size: 14px;}
+.roleWarp .skill-box .skil-text{height: 100px;}
+.roleWarp.btn-skil-left .skil-text {right: auto;left: 50px;}
+.roleWarp .skil-text strong.jop{font-size: 17px;color: #ffeccd;}
+.roleWarp .skil-text p{color: #fff;}
+.skill-box{margin-top: 10px;}
+.roleWarp a.skill-prev,.roleWarp a.skill-next{display: block;width: 25px;height: 30px;position: absolute;top: 47px;left: 0px;background: url('../../img/dir-spr.png') no-repeat;background-position: 0px -5px;z-index: 999;}
+.roleWarp a.skill-next{left: 240px;background-position: -75px -5px;}
+.icon-spr{background:url('../../img/icon-spr.png') no-repeat;}
+.icon-qfz-6{background-position:0 0;}
+.icon-qfz-7{background-position:-40px 0;}
+.icon-qfz-4{background-position:-80px 0;}
+.icon-qfz-5{background-position:-120px 0;}
+.icon-sqs-2{background-position:-160px 0;}
+.icon-sqs-3{background-position:-200px 0;}
+.icon-qfz-8{background-position:-240px 0;}
+.icon-sqs-1{background-position:-280px 0;}
+.icon-qfz-3{background-position:-320px 0;}
+.icon-ms-5{background-position:-360px 0;}
+.icon-zs-7{background-position:-400px 0;}
+.icon-ms-3{background-position:-440px 0;}
+.icon-ms-4{background-position:-480px 0;}
+.icon-qfz-1{background-position:-520px 0;}
+.icon-qfz-2{background-position:-560px 0;}
+.icon-ms-7{background-position:-600px 0;}
+.icon-ms-8{background-position:-640px 0;}
+.icon-zs-1{background-position:-680px 0;}
+.icon-zs-2{background-position:-720px 0;}
+.icon-ss-6{background-position:-760px 0;}
+.icon-ss-7{background-position:-800px 0;}
+.icon-zs-5{background-position:-840px 0;}
+.icon-zs-6{background-position:-880px 0;}
+.icon-zs-3{background-position:-920px 0;}
+.icon-zs-4{background-position:-960px 0;}
+.icon-ss-5{background-position:-1000px 0;}
+.icon-sqs-6{background-position:-1040px 0;}
+.icon-sqs-7{background-position:-1080px 0;}
+.icon-sqs-4{background-position:-1120px 0;}
+.icon-sqs-5{background-position:-1160px 0;}
+.icon-ss-3{background-position:-1200px 0;}
+.icon-ss-4{background-position:-1240px 0;}
+.icon-ss-1{background-position:-1280px 0;}
+.icon-ss-2{background-position:-1320px 0;}
+.icon-fs-4{background-position:-1360px 0;}
+.icon-fs-5{background-position:-1400px 0;}
+.icon-fs-2{background-position:-1440px 0;}
+.icon-fs-3{background-position:-1480px 0;}
+.icon-fs-6{background-position:-1520px 0;}
+.icon-haxz-2{background-position:-1560px 0;}
+.icon-haxz-3{background-position:-1600px 0;}
+.icon-fs-7{background-position:-1640px 0;}
+.icon-haxz-1{background-position:-1680px 0;}
+.icon-ds-2{background-position:-1720px 0;}
+.icon-ds-3{background-position:-1760px 0;}
+.icon-ms-6{background-position:-1800px 0;}
+.icon-ds-1{background-position:-1840px 0;}
+.icon-ds-4{background-position:-1880px 0;}
+.icon-ds-7{background-position:-1920px 0;}
+.icon-fs-1{background-position:-1960px 0;}
+.icon-ds-5{background-position:-2000px 0;}
+.icon-ds-6{background-position:-2040px 0;}
+.icon-mds-4{background-position:-2080px 0;}
+.icon-mds-5{background-position:-2120px 0;}
+.icon-mds-2{background-position:-2160px 0;}
+.icon-mds-3{background-position:-2200px 0;}
+.icon-ms-1{background-position:-2240px 0;}
+.icon-ms-2{background-position:-2280px 0;}
+.icon-mds-6{background-position:-2320px 0;}
+.icon-mds-7{background-position:-2360px 0;}
+.icon-mds-1{background-position:-2400px 0;}
+.icon-haxz-6{background-position:-2440px 0;}
+.icon-haxz-5{background-position:-2480px 0;}
+.icon-haxz-8{background-position:-2520px 0;}
+.icon-haxz-7{background-position:-2560px 0;}
+.icon-haxz-4{background-position:-2600px 0;}
+.icon-doushi{background-position:-2640px 0;}
+.icon-shenqishi{background-position:-2696px 0;}
+.icon-qianfuzhe{background-position:-2752px 0;}
+.icon-mushi{background-position:-2808px 0;}
+.icon-fashi{background-position:-2864px 0;}
+.icon-lieren{background-position:-2920px 0;}
+.icon-zhanshi{background-position:-2976px 0;}
+.icon-wushi{background-position:-3032px 0;}
+.icon-sushi{background-position:-3088px 0;}
+@media \0screen {
+	.skill-box ul li{border: none;}
+}

2018专题/1808万王之王专题-商务/src/sass/module/page4.scss

@@ -0,0 +1,109 @@
+.p4{
+    background-color: #000000;
+}
+.cartoon-box{
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    >div{
+        // opacity: 0;
+    }
+    .cartoon1{
+        position: absolute;
+        left: 0;
+        top: 0;
+        width: px2rem(436);
+        height: px2rem(887);
+        background: url('../../img/p4-part1.jpg') center center no-repeat;
+        background-size: 100%;
+    }
+    .cartoon2{
+        position: absolute;
+        left: 0;
+        top: px2rem(887);
+        width: px2rem(1518);
+        height: px2rem(193);
+        background: url('../../img/p4-part2.jpg') center center no-repeat;
+        background-size: 100%;
+    }
+    .cartoon3{
+        position: absolute;
+        right: 0;
+        top: px2rem(220);
+        width: px2rem(407);
+        height: px2rem(847);
+        background: url('../../img/p4-part3.jpg') center center no-repeat;
+        background-size: 100%;
+    }
+    .cartoon4{
+        position: absolute;
+        right: 0;
+        top: 0;
+        width: px2rem(1472);
+        height: px2rem(207);
+        background: url('../../img/p4-part4.jpg') center center no-repeat;
+        background-size: 100%;
+    }
+}
+.cover-bg{
+    position: absolute;
+    z-index: 3;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background: url('../../img/p4-bg.png') center top no-repeat;
+    background-size: 100%;
+}
+.p4-video-wrapper{
+    position: absolute;
+    top: px2rem(210);
+    left: px2rem(440);
+    right: px2rem(410);
+    height: px2rem(674);
+    video{
+        width: 100%;
+        height: px2rem(674);
+        object-fit: fill;
+    }
+}
+.control-box{
+    position: absolute;
+    top: px2rem(210);
+    left: px2rem(440);
+    right: px2rem(410);
+    height: px2rem(674);
+    z-index: 10;
+    cursor: pointer;
+    .play-icon{
+        display: none;
+        position: absolute;
+        width: px2rem(68);
+        height: px2rem(66);
+        background: url('../../img/play-icon.png') center center no-repeat;
+        background-size: 100%;
+        left: 50%;
+        top: 50%;
+        margin-left: -px2rem(34);
+        margin-top: -px2rem(33);
+        cursor: pointer;
+    }
+}
+
+.delay-200 {
+    animation-delay: .2s;
+}
+.delay-400 {
+    animation-delay: .4s;
+}
+.delay-600 {
+    animation-delay: .6s;
+}
+.delay-800 {
+    animation-delay: .8s;
+}
+.delay-1000 {
+    animation-delay: 1s;
+}

2018专题/1808万王之王专题-商务/src/sass/module/page5.scss

@@ -0,0 +1,56 @@
+.p5-bottom-tab{
+    position: absolute;
+    z-index: 1;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    text-align: center;
+    font-size: 0;
+    background-color: #272725;
+    opacity: .8;
+    .two-line{
+        width: 100%;
+        height: 4px;
+        border-top: 1px solid #a19676;
+        border-bottom: 1px solid #a19676;
+    }
+    .tab-item{
+        display: inline-block;
+        vertical-align: top;
+        width: px2rem(160);
+        height: px2rem(60);
+        line-height: px2rem(60);
+        font-size: px2rem(16);
+        color: #efd4ac;
+        text-align: center;
+        cursor: pointer;
+        position: relative;
+        &:after{
+            content: '';
+            display: none;
+            position: absolute;
+            width: px2rem(67);
+            height: px2rem(42);
+            background: url('../../img/p2-select-icon.png') center center no-repeat;
+            background-size: 100%;
+            top: -12px;
+            left: 50%;
+            margin-left: -px2rem(33);
+        }
+        &:hover::after{
+            display: block;
+            background-image: url('../../img/p2-current-icon1.png');
+        }
+        &.cur-tab:after{
+            display: block;
+        }
+        &.cur-tab{
+            color: #ffcf85;
+        }
+    }
+}
+.full-video{
+    width: 100%;
+    height: auto;
+    object-fit: fill;
+}

2018专题/1808万王之王专题-商务/src/sass/module/page6.scss

@@ -0,0 +1,82 @@
+.p6{
+    background: url('../../img/p6-bg.jpg') center top no-repeat;
+    .main-banner{
+        padding: px2rem(15);
+        border: 2px solid #cfb370;
+        background-color: #212121;
+        .poster{
+            float: left;
+            width: px2rem(430);
+        }
+        .main-info{
+            float: right;
+            width: px2rem(680);
+            margin-right: px2rem(20);
+            .title{
+                color: #ceb86c;
+                font-size: px2rem(46);
+                margin-bottom: px2rem(26);
+                text-align: center;
+                padding-top: px2rem(15);
+            }
+            .text{
+                font-size: px2rem(18);
+                color: #cac5bb;
+                line-height: 1.6;
+                span{
+                    color: #bd9466;
+                }
+            }
+        }
+    }
+    .main-intro{
+        .title{
+            color: #eed1a0;
+            font-size: px2rem(20);
+            font-weight: bold;
+            margin-bottom: px2rem(26);
+            margin-top: px2rem(46);
+        }
+        .text{
+            font-size: px2rem(18);
+            margin-bottom: px2rem(20);
+            color: #cac5bb;
+            line-height: 1.7;
+            span{
+                color: #bd9466;
+            }
+        }
+        .center-img{
+            display: block;
+            width: px2rem(330);
+            margin: px2rem(30) auto;
+        }
+    }
+}
+.scroll-main{
+    position: absolute;
+    top: px2rem(50);
+    bottom: px2rem(50);
+    width: px2rem(1280);
+    padding: 0 px2rem(40);
+    left: 50%;
+    margin-left: -px2rem(600);
+    box-sizing: border-box;
+    overflow-y: auto;
+    &::-webkit-scrollbar {
+        width: px2rem(10);
+        height: 1px;
+        cursor: pointer
+    }
+    &::-webkit-scrollbar-thumb {
+        -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, .2);
+        background: #bd9466
+    }
+    &::-webkit-scrollbar-thumb:hover {
+        background: #bd9466
+    }
+    &::-webkit-scrollbar-track {
+        -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, .2);
+        background: #212121
+    }
+}

2018专题/1808万王之王专题-商务/src/sass/module/page7.scss

@@ -0,0 +1,110 @@
+.p7{
+    background: url('../../img/p7-bg.jpg') center center no-repeat;
+}
+.animBox{
+    width: 36%;
+    margin: 4% auto;
+    height: auto;
+    position: relative;
+}
+.animBox img{position: absolute;}
+.animBox .dial1{
+    top: 0px;
+    width: 100%;
+    animation: animaShun 20s linear infinite;
+    position: relative;
+}
+.animBox .dial2{
+    left: 0%;
+    top: 0%;
+    width: 100%;
+    animation: animaNi 20s linear infinite;
+    transform: rotate(360deg);
+    -webkit-transform: rotate(360deg);
+}
+.animBox .slogan{
+    width: 100%;
+    top: 22%;
+    left: 0%;
+}
+
+.animBox .kv-order-box{
+    display: block;
+    width: 100%;
+    height: 30%;
+    position: absolute;
+    top: 61%;
+    text-align: center;
+    color: #ffe5ab;
+}
+.animBox .order-kv-num{
+    display: block;
+    background: url('../../img/p7-number-box.png') no-repeat;
+    width: 365px;
+    height: 63px;
+    margin: 0 auto 10px;
+}
+.animBox .order-kv-num span{
+    font-size: 45px;
+    letter-spacing: 26.6px;
+    display: block;
+    position: relative;
+    left: 12px;
+    top: 8px;
+}
+.animBox .kv-order-box p{font-size: 23px;letter-spacing: 4px;font-weight: 700;margin-bottom: 12px;}
+@keyframes animaShun{
+    form{
+        transform: rotate(0deg);
+    }
+    to{
+        transform: rotate(360deg);
+    }
+}
+
+@keyframes animaNi{
+    form{
+        transform: rotate(360deg);
+    }
+    to{
+        transform: rotate(0deg);
+    }
+}
+
+.btn-box{
+    position: absolute;
+    left: 0;
+    right: 0;
+    bottom: px2rem(50);
+    text-align: center;
+    .game-btn{
+        display: inline-block;
+        width: px2rem(210);
+        height: px2rem(71);
+        margin: 0 px2rem(50);
+    }
+    .game-btn-web {
+        background: url('../../img/game-web-btn.jpg') center center no-repeat;
+        background-size: px2rem(198) px2rem(59);
+        &:hover{
+            background: url('../../img/game-web-btn-hover.png') no-repeat;
+            background-size: 100%;
+        }
+    }
+    .game-btn-test {
+        background: url('../../img/game-test-btn.jpg') center center no-repeat;
+        background-size: px2rem(198) px2rem(59);
+        &:hover{
+            background: url('../../img/game-test-btn-hover.png') no-repeat;
+            background-size: 100%;
+        }
+    }
+    .game-btn-back {
+        background: url('../../img/game-back-btn.jpg') center center no-repeat;
+        background-size: px2rem(198) px2rem(59);
+        &:hover{
+            background: url('../../img/game-back-btn-hover.png') no-repeat;
+            background-size: 100%;
+        }
+    }
+}

2018专题/1808蜀门/src/modules/page/index.js

@@ -542,7 +542,6 @@ var C = {
             $('.mod-float').hide()
         })
 
-
         //花费钻石弹窗确认
         $(document).on("click", ".question-tips-dialog .btn-submit", function () {
             var gift_id = $(this).data('giftid')

2018专题/1808蜀门/src/sass/global.scss

@@ -186,6 +186,7 @@ body{
                     overflow: hidden;
                     padding: 47px 0 0 41px;
                     .gift-item{
+                        height: 96px;
                         float: left;
                         margin-right: 20px;
                         .item-level{
@@ -200,13 +201,12 @@ body{
                                 width: 60px;
                                 float: left;
                                 text-align: center;
-                                margin-bottom: 28px;
                                 p{
                                     height: 38px;
                                     width: 38px;
                                     background: #F1EDE5;
                                     border: 1px #AA8A52 solid;
-                                    margin: 0 auto 11px;
+                                    margin: 0 auto 6px;
                                     img{
                                         height: 100%;
                                         width: 100%;
@@ -216,6 +216,8 @@ body{
                                 em{
                                     font: bold 12px/17px '微软雅黑';
                                     color: #d4a15a;
+                                    display: block;
+                                    padding: 0 3px;
                                 }
                             }
                         }
@@ -546,15 +548,18 @@ body{
                     }
                 }
                 .auth{
+                    display: none;
                     height: 64px;
                     width: 266px;
-                    display: block;
                     cursor: default;
                     background: url(/src/img/bg-auth.jpg) no-repeat top center;
                     position: absolute;
                     bottom: 60px;
                     left: 50%;
                     margin-left: -133px;
+                    &.to-auth,&.authed{
+                        display: block;
+                    }
                     &.authed{
                         background-position: center -64px;
                     }