Ver Fonte

Merge branch 'master' of http://svn.ouj.com:3000/FED/fortnite

Eechon há 6 anos atrás
pai
commit
5a957acbda

BIN
web/1807-新手专题/src/img/require/arms-tag-bg.png


BIN
web/1807-新手专题/src/img/require/image-placeholder.png


BIN
web/1807-新手专题/src/img/require/text-icon-arrow.png


BIN
web/1807-新手专题/src/img/require/to-weapon-sql.png


BIN
web/1807-新手专题/src/img/wap/about/swiper-item-image.png


BIN
web/1807-新手专题/src/img/wap/about/swiper-item-img-2.png


+ 18 - 1
web/1807-新手专题/src/modules/page/lib.js

@@ -58,6 +58,22 @@ function initTagChange(ele){
     });
 }
 
+// 移动端tag切换
+function initMobileTagChange(navID) {
+    var navList = $(navID + ' .box-tab_nav').find('.nav-item')
+    var contentList = $(navID + ' .box-tab_cont .box-tab_pannel')
+    navList.on('click', function () {
+        if($(this).hasClass('active')) return
+        var index = navList.index($(this))
+        navList.each(function (_index, _ele) {
+            _index === index ? $(_ele).addClass('active') : $(_ele).removeClass('active')
+        })
+        contentList.each(function (_index, _ele) {
+            _index === index ? $(_ele).removeClass('u-hide') : $(_ele).addClass('u-hide')
+        })
+    })
+}
+
 //侧边栏滚动-新手专题
 function initSidebarZt(){
     var self = this;
@@ -219,4 +235,5 @@ exports.getParam = getParam;
 exports.initTagChange = initTagChange;
 exports.initSidebarZt = initSidebarZt;
 exports.initSidebarTool = initSidebarTool;
-exports.popVideo = popVideo;
+exports.popVideo = popVideo;
+exports.initMobileTagChange = initMobileTagChange

+ 4 - 0
web/1807-新手专题/src/modules/page/zt.js

@@ -47,6 +47,10 @@ var C = {
       lib.initTagChange(".page-require .re-section4 .box-tab-prop")
       lib.initTagChange(".page-require .re-section5 .box-tab-resource")
       lib.initTagChange(".page-require .re-section6 .box-tab-chests")
+        lib.initMobileTagChange('#section31')
+        lib.initMobileTagChange('#section33')
+        lib.initMobileTagChange('#section42')
+        lib.initMobileTagChange('#section62')
     }
 
     //进阶内容

Diff do ficheiro suprimidas por serem muito extensas
+ 1019 - 7
web/1807-新手专题/src/page2.html


+ 18 - 15
web/1807-新手专题/src/page3.html

@@ -20,7 +20,7 @@
 </head>
 
 <body data-ztnav="3">
-    <div class="page-advanced">
+    <div class="page-advanced" id="page3">
         <link rel="import" href="./ztNav.html?__inline">
         <div class="zt-sidebar-zt">
             <div class="sidebar-zt_hd">进阶内容</div>
@@ -102,7 +102,7 @@
                             <p>《堡垒之夜》是一款融合建造与射击的百人战术竞技游戏。</p>
                             <div class="box-tab-lr ext-advanced clearfix">
                                 <div class="box-tab_nav">
-                                    <ul data-switchable-role="nav">
+                                    <ul data-switchable-role="nav" class="clearfix">
                                         <li class="active">
                                             <a href="javascript:;">地点一</a>
                                         </li>
@@ -191,14 +191,14 @@
                                     </div>
                                     <div class="shop-bd">
                                         <ul class="zt-list-goods clearfix">
-                                            <li>
+                                            <li class="week-free">
                                                 <img src="/src/img/advanced/pic-good1.jpg" alt="">
                                                 <div class="mask">
                                                     <h4>Burnout</h4>
                                                     <p><span>500</span></p>
                                                 </div>
                                             </li>
-                                            <li>
+                                            <li class="week-free">
                                                 <img src="/src/img/advanced/pic-good1.jpg" alt="">
                                                 <div class="mask">
                                                     <h4>Burnout</h4>
@@ -214,42 +214,42 @@
                                     </div>
                                     <div class="shop-bd">
                                         <ul class="zt-list-goods clearfix">
-                                            <li class="item-common">
+                                            <li class="item-common day-free">
                                                 <img src="/src/img/advanced/pic-good2.jpg" alt="">
                                                 <div class="mask">
                                                     <h4>Burnout</h4>
                                                     <p><span>500</span></p>
                                                 </div>
                                             </li>
-                                            <li class="item-uncommon">
+                                            <li class="item-uncommon day-free">
                                                 <img src="/src/img/advanced/pic-good2.jpg" alt="">
                                                 <div class="mask">
                                                     <h4>Burnout</h4>
                                                     <p><span>500</span></p>
                                                 </div>
                                             </li>
-                                            <li class="item-epic">
+                                            <li class="item-epic day-free">
                                                 <img src="/src/img/advanced/pic-good2.jpg" alt="">
                                                 <div class="mask">
                                                     <h4>Burnout</h4>
                                                     <p><span>500</span></p>
                                                 </div>
                                             </li>
-                                            <li class="item-legendary">
+                                            <li class="item-legendary day-free">
                                                 <img src="/src/img/advanced/pic-good2.jpg" alt="">
                                                 <div class="mask">
                                                     <h4>Burnout</h4>
                                                     <p><span>500</span></p>
                                                 </div>
                                             </li>
-                                            <li class="item-rare">
+                                            <li class="item-rare day-free">
                                                 <img src="/src/img/advanced/pic-good2.jpg" alt="">
                                                 <div class="mask">
                                                     <h4>Burnout</h4>
                                                     <p><span>500</span></p>
                                                 </div>
                                             </li>
-                                            <li>
+                                            <li class="day-free" >
                                                 <img src="/src/img/advanced/pic-good2.jpg" alt="">
                                                 <div class="mask">
                                                     <h4>Burnout</h4>
@@ -260,7 +260,7 @@
                                     </div>
                                 </div>
                             </div>
-                            <a href="#" class="zt-link-more">快捷查看每日商城 &gt;</a>
+                            <a href="#" class="zt-link-more">快捷查看每日商城 ></a>
                         </div>
                     </div>
                 </div>
@@ -330,7 +330,7 @@
                                         <div class="task-cont">
                                             <h3>活跃勋章任务</h3>
                                             <p>《堡垒之夜》是一款融合建造与射击的百人战术竞技游戏。玩家将与其他参赛者一起 搭乘空中巴士,选择合适的降落地点,搜集材料、武器和多种道具,建造掩体和堡垒,与敌人枪战对决,在节奏紧张的战斗中脱颖而出,成为最后赢家。</p>
-                                            <img src="http://fed.webdev.ouj.com/686x382" alt="">
+                                            <img src="./img/require/image-placeholder.png" alt="">
                                         </div>
                                     </li>
                                     <li>
@@ -340,7 +340,7 @@
                                         <div class="task-cont">
                                             <h3>活跃勋章任务</h3>
                                             <p>《堡垒之夜》是一款融合建造与射击的百人战术竞技游戏。玩家将与其他参赛者一起 搭乘空中巴士,选择合适的降落地点,搜集材料、武器和多种道具,建造掩体和堡垒,与敌人枪战对决,在节奏紧张的战斗中脱颖而出,成为最后赢家。</p>
-                                            <img src="http://fed.webdev.ouj.com/686x382" alt="">
+                                            <img src="./img/require/image-placeholder.png" alt="">
                                         </div>
                                     </li>
                                 </ul>
@@ -355,7 +355,6 @@
                             <div class="box-bd_bgr"></div>
                             <div class="box-bd_cont">
                                 <p>堡垒之夜中建造的板式共分为4种:横板、竖板、斜板面和锥形。通过四种板式的结合...</p>
-                                
                                 <a href="#" class="zt-link-more">进入任务列表专题页 &gt;</a>
                             </div>
                         </div>
@@ -368,7 +367,7 @@
                             <div class="box-bd_bgr"></div>
                             <div class="box-bd_cont">
                                 <p>《堡垒之夜》是一款融合建造与射击的百人战术竞技游戏。玩家将与其他 参赛者一起 搭乘空中巴士,选择合适的降落地点,搜集材料、武器和多种道具,建造掩体和堡垒,与敌人枪战对决,在节奏紧张的战斗中脱颖而出,成为最后赢家。...</p>
-                                <img class="pic pic_sm" src="http://fed.webdev.ouj.com/904x609" alt="">
+                                <img class="pic pic_sm"  src="./img/require/image-placeholder.png" alt="">
                                 <a href="#" class="zt-link-more">进入任务列表专题页 &gt;</a>
                             </div>
                         </div>
@@ -376,6 +375,10 @@
                 </div>
             </div>
         </div>
+        <div class="page-bottom clearfix">
+            <a class="bottom-btn" href="javascipt: void 0">完全掌握 <i class="icon-arrow"></i></a>
+            <a class="bottom-btn" href="javascipt: void 0">仍有疑惑 <i class="icon-arrow"></i></a>
+        </div>
     </div>
 
     <script src="lib/mod.js"></script>

+ 4 - 1
web/1807-新手专题/src/page4.html

@@ -20,7 +20,7 @@
 </head>
 
 <body data-ztnav="4">
-    <div class="page-fad">
+    <div class="page-fad" id="page4">
         <link rel="import" href="./ztNav.html?__inline">
         <div class="fd-section fd-section1">
             <div class="zt-inner">
@@ -84,6 +84,9 @@
                 </div>
             </div>
         </div>
+        <div class="page-bottom">
+            <div class="bottom-btn text-bg remember">我熟记游戏内容<i class="icon-arrow"></i></div>
+        </div>
     </div>
 
     <script src="lib/mod.js"></script>

+ 3103 - 2211
web/1807-新手专题/src/sass/global.scss

@@ -1,15 +1,15 @@
 @charset "UTF-8";
 $yahei: "Microsoft YaHei";
-$pingfan:PingFangSC-Regular;
-$commonColor : #97c1cd;
-$uncommonColor : #2cd070;
-$rareColor : #43c2ff;
-$epicColor : #b457e9;
-$legendaryColor : #ff9139;
+$pingfan: PingFangSC-Regular;
+$commonColor: #97c1cd;
+$uncommonColor: #2cd070;
+$rareColor: #43c2ff;
+$epicColor: #b457e9;
+$legendaryColor: #ff9139;
 
 /*通用变量*/
 
-$bfz:14px;
+$bfz: 14px;
 /*基础样式*/
 
 @import "base/mBase";
@@ -17,2306 +17,3198 @@ $bfz:14px;
 @import "base/ui-dialog";
 
 @font-face {
-    /* font-properties */
-    font-family: titleFont;
-    src:url('/src/font/HYLILIANGHEIJ.TTF');
+	/* font-properties */
+	font-family: titleFont;
+	src: url('/src/font/HYLILIANGHEIJ.TTF');
 }
 
 [v-cloak] {
-  display: none;
+	display: none;
 }
 
-html{
-    font-size: 60px;
+html {
+	font-size: 60px;
 }
 
 body {
-    font-size: $bfz;
-    font-family: $pingfan, $yahei, Helvetica, Arial, sans-serif;
-    color: #333333;
-    -webkit-overflow-scrolling: touch;
+	font-size: $bfz;
+	font-family: $pingfan, $yahei, Helvetica, Arial, sans-serif;
+	color: #333333;
+	-webkit-overflow-scrolling: touch;
 }
 
 a {
-    text-decoration: none;
-    &.g-link {
-        position: relative;
-        display: block;
-        width: 100%;
-        height: 100%;
-    }
+	text-decoration: none;
+	&.g-link {
+		position: relative;
+		display: block;
+		width: 100%;
+		height: 100%;
+	}
 }
 
-img{
-    position: relative;
-    width: 100%;
-    display: block;
-    overflow: hidden;
+img {
+	position: relative;
+	width: 100%;
+	display: block;
+	overflow: hidden;
 }
 
-.fl{
-    float: left;
+.fl {
+	float: left;
 }
 
-.fr{
-    float: right;
+.fr {
+	float: right;
 }
 
-.u-hide{
-    display: none;
+.u-hide {
+	display: none;
 }
 
-.skew-1{
-    transform: skew(-1deg)
+.skew-1 {
+	transform: skew(-1deg)
 }
 
-.skew-6{
-    transform: skew(-6deg)
+.skew-6 {
+	transform: skew(-6deg)
 }
 
-.zt-inner{
-    width: px2rem(1260);
-    margin: 0 auto;
+.zt-inner {
+	width: px2rem(1260);
+	margin: 0 auto;
 }
 
-.zt-crumbs{
-    color: #3f402a;
-    line-height: px2rem(60);
-    font-size: 14px;
-    a{
-        color: inherit;
-        &:first-child{
-            font-size: 18px;
-            font-weight: 700;
-        }
-        &:hover{
-            text-decoration: underline;
-        }
-    }
+.zt-crumbs {
+	color: #3f402a;
+	line-height: px2rem(60);
+	font-size: 14px;
+	a {
+		color: inherit;
+		&:first-child {
+			font-size: 18px;
+			font-weight: 700;
+		}
+		&:hover {
+			text-decoration: underline;
+		}
+	}
 }
 
-.clearfix{
-    @include clearfix();
+.clearfix {
+	@include clearfix();
 }
 
 #app {
-    position: relative;
+	position: relative;
 }
 
-.zt-mod-header{
-    &:hover{
-        .row-expand{
-            transform: translateY(0);
-        }
-    }
-    .zt-inner{
-        height: 100%;
-    }
-    .hItem-logo{
-        width: px2rem(156);
-        height: 100%;
-        img{
-            margin-top: px2rem(12);
-        }
-    }
-    .hItem-menu{
-        text-align: center;
-        margin-right: px2rem(-60);
-        li{
-            position: relative;
-            float: left;
-            margin-right: px2rem(38);
-            a{
-                display: block;
-                color: #999999;
-                font-size: px2rem(12);
-                border-bottom: px2rem(4) solid transparent;
-                padding: 0 px2rem(6);
-                height: px2rem(90);
-                overflow: hidden;
-                &.active,&:hover{
-                    color: #989000;
-                    span{
-                        color: #fff100;
-                    }
-                }
-                &.active{
-                    border-color: #fff100;
-                }
-            }
-            span{
-                display: block;
-                color: #FFFFFF;
-                font-family: titleFont;
-                font-size: px2rem(24);
-                margin: px2rem(20) 0 px2rem(12);
-            }
-        }
-    } 
-    .row-nomal{
-        position: relative;
-        z-index: 2;
-        background: #000000;
-        height: px2rem(90);
-    }
-    .row-expand{
-        position: absolute;
-        width: 100%;
-        z-index: 1;
-        line-height: px2rem(30);
-        font-size: px2rem(14);
-        background: rgba(0,0,0,0.7);
-        padding: px2rem(20) 0;
-        transform: translateY(-100%);
-        transition: all .2s;
-        .hItem-expand_col{
-            &:nth-child(1){
-                margin: 0 px2rem(39) 0 px2rem(351);
-            }
-            &:nth-child(4){
-                margin-right: px2rem(81);
-            }
-            &:nth-child(5){
-                margin-right: px2rem(81);
-            }
-        }
-        &.task-col-1{
-            .hItem-expand_col{
-                &:nth-child(2){
-                    margin-right: px2rem(39);
-                }
-                &:nth-child(3){
-                    margin-right: px2rem(60);
-                }
-            }
-        }
-        &.task-col-2{
-            .hItem-expand_col{
-                &:nth-child(2){
-                    margin-right: px2rem(-12);
-                }
-                &:nth-child(3){
-                     margin-right: px2rem(12);
-                }
-            }
-        }
-        a{
-            position: relative;
-            color: #cccccc;
-            &:hover{
-                text-decoration: underline;
-            }
-            &:before{
-                content: "";
-                position: absolute;
-                top: px2rem(-2);
-                right: px2rem(-20);
-                width: px2rem(16);
-                height: px2rem(13);
-            }
-            &.icon-new{
-                &:before{
-                    background: url(/src/img/icon-new.png) 0 / 100% no-repeat;
-                }
-            }
-            &.icon-hot{
-                &:before{
-                    background: url(/src/img/icon-hot.png) 0 / 100% no-repeat;
-                }
-            }
-        }
-    }
-    .hItem-expand_col{
-        float: left;
-        text-align: center;
-        ul{
-            float: left;
-            width: px2rem(100);
-        }
-        li{
-            @include ellipsis();
-        }
-    }
+.web-hide-hook{
+	display: none;
 }
 
-.zt-mod-primary{
-    
+.zt-mod-header {
+	&:hover {
+		.row-expand {
+			transform: translateY(0);
+		}
+	}
+	.zt-inner {
+		height: 100%;
+	}
+	.hItem-logo {
+		width: px2rem(156);
+		height: 100%;
+		img {
+			margin-top: px2rem(12);
+		}
+	}
+	.hItem-menu {
+		text-align: center;
+		margin-right: px2rem(-60);
+		li {
+			position: relative;
+			float: left;
+			margin-right: px2rem(38);
+			a {
+				display: block;
+				color: #999999;
+				font-size: px2rem(12);
+				border-bottom: px2rem(4) solid transparent;
+				padding: 0 px2rem(6);
+				height: px2rem(90);
+				overflow: hidden;
+				&.active, &:hover {
+					color: #989000;
+					span {
+						color: #fff100;
+					}
+				}
+				&.active {
+					border-color: #fff100;
+				}
+			}
+			span {
+				display: block;
+				color: #FFFFFF;
+				font-family: titleFont;
+				font-size: px2rem(24);
+				margin: px2rem(20) 0 px2rem(12);
+			}
+		}
+	}
+	.row-nomal {
+		position: relative;
+		z-index: 2;
+		background: #000000;
+		height: px2rem(90);
+	}
+	.row-expand {
+		position: absolute;
+		width: 100%;
+		z-index: 1;
+		line-height: px2rem(30);
+		font-size: px2rem(14);
+		background: rgba(0, 0, 0, 0.7);
+		padding: px2rem(20) 0;
+		transform: translateY(-100%);
+		transition: all .2s;
+		.hItem-expand_col {
+			&:nth-child(1) {
+				margin: 0 px2rem(39) 0 px2rem(351);
+			}
+			&:nth-child(4) {
+				margin-right: px2rem(81);
+			}
+			&:nth-child(5) {
+				margin-right: px2rem(81);
+			}
+		}
+		&.task-col-1 {
+			.hItem-expand_col {
+				&:nth-child(2) {
+					margin-right: px2rem(39);
+				}
+				&:nth-child(3) {
+					margin-right: px2rem(60);
+				}
+			}
+		}
+		&.task-col-2 {
+			.hItem-expand_col {
+				&:nth-child(2) {
+					margin-right: px2rem(-12);
+				}
+				&:nth-child(3) {
+					margin-right: px2rem(12);
+				}
+			}
+		}
+		a {
+			position: relative;
+			color: #cccccc;
+			&:hover {
+				text-decoration: underline;
+			}
+			&:before {
+				content: "";
+				position: absolute;
+				top: px2rem(-2);
+				right: px2rem(-20);
+				width: px2rem(16);
+				height: px2rem(13);
+			}
+			&.icon-new {
+				&:before {
+					background: url(/src/img/icon-new.png) 0 / 100% no-repeat;
+				}
+			}
+			&.icon-hot {
+				&:before {
+					background: url(/src/img/icon-hot.png) 0 / 100% no-repeat;
+				}
+			}
+		}
+	}
+	.hItem-expand_col {
+		float: left;
+		text-align: center;
+		ul {
+			float: left;
+			width: px2rem(100);
+		}
+		li {
+			@include ellipsis();
+		}
+	}
 }
 
-.zt-mod-nav{
-    background: #222222;
-    padding: px2rem(20) 0 px2rem(26);
-    ul{
-        margin-right: px2rem(-30);
-    }
-    li{
-        float: left;
-        margin-right: px2rem(28);
-    }
-    a{
-        position: relative;
-        display: block;
-        color: #FFFFFF;
-        width: px2rem(230);
-        height: px2rem(132);
-        outline: none;
-        &:hover,&.active{
-            .bg-nav{
-                filter: grayscale(0);
-                filter: 0;
-                &:before{
-                    right: 0;
-                }
-            }
-        }
-        &.active{
-            &:before{
-                display: block;
-            }
-        }
-        &:before{
-            content: "";
-            position: absolute;
-            display: none;
-            bottom: px2rem(-32);
-            left: px2rem(20);
-            width: 0;
-            height: 0;
-        }
-    }
-    h2{
-        position: relative;
-        font-size: px2rem(26);
-        font-weight: 700;
-        padding: px2rem(40) 0 px2rem(16) px2rem(12);
-    }
-    p{
-        position: relative;
-        font-size: px2rem(14);
-        padding: 0 0 0 px2rem(12);
-    }
-    .bg-nav{
-        position: absolute;
-        top: 0;
-        left: 0;
-        width: 100%;
-        height: 100%;
-        overflow: hidden;
-        filter: grayscale(100%);
-        filter: gray;
-        transition: all .2s;
-        &:before{
-            content: "";
-            position: absolute;
-            width: px2rem(134);
-            height: 100%;
-            right: px2rem(-50);
-            transition: all .4s ease-in;
-        }
-    }
-    @for $i from 1 through 5{
-        .nav#{$i}{
-            .bg-nav{
-                &:before{
-                    background: url(/src/img/nav#{$i}-icon.png) right 0 / auto 100% no-repeat;
-                }
-            }
-        }
-    }
-    .nav1{
-        &:before{
-            border: px2rem(16) solid #f5a848;
-            border-color: #f5a848 transparent transparent transparent;
-        }
-        .bg-nav{
-            background: url(/src/img/nav1-bg.png) 0 0 / 100% 100% no-repeat;
-        }
-    }
-    .nav2{
-        &:before{
-            border: px2rem(16) solid #1367fa;
-            border-color: #1367fa transparent transparent transparent;
-        }
-        .bg-nav{
-            background: url(/src/img/nav2-bg.png) 0 0;
-        }
-    }
-    .nav3{
-        &:before{
-            border: px2rem(16) solid #16bf82;
-            border-color: #16bf82 transparent transparent transparent;
-        }
-        .bg-nav{
-            background: url(/src/img/nav3-bg.png) 0 0 / 100% no-repeat;
-        }
-    }
-    .nav4{
-        &:before{
-            border: px2rem(16) solid #00bbd4;
-            border-color: #00bbd4 transparent transparent transparent;
-        }
-        .bg-nav{
-            background: url(/src/img/nav4-bg.png) 0 0 repeat;
-        }
-    }
-    .nav5{
-        &:before{
-            border: px2rem(16) solid #6817f0;
-            border-color: #6817f0 transparent transparent transparent;
-        }
-        .bg-nav{
-            background: #6817f0;
-        }
-    }
+.zt-mod-primary {
+
 }
 
-.zt-sidebar-zt{
-    position: fixed;
-    left: 50%;
-    width: px2rem(186);
-    margin: px2rem(180) 0 0 px2rem(-900);
-    z-index: 10;
-    &.is-scroll{
-        margin-top: 0; 
-        top: px2rem(240);
-    }
-    .sidebar-zt_hd{
-        font-size: px2rem(30);
-        font-family: titlefont;
-        color: #FFFFFF;
-        height: px2rem(111);
-        line-height: px2rem(159);
-        margin: 0 px2rem(-54) px2rem(-6) 0;
-        background: url(/src/img/icon-sidebar_zt.png) right 0 / auto 100% no-repeat;
-    }
-    .sidebar-zt_bd{
-        font-weight: 700;
-    }
-    .section-item{
-        &.is-expend{
-            .section-item_hd{
-                @for $i from 1 through 3{
-                    &.hd-bg#{$i}{
-                        background-image: url(/src/img/bg-sidebar_zt#{$i}_hover.png);
-                    }
-                } 
-            }
-        }
-    }
-    .section-item_hd{
-        position: relative;
-        z-index: 2;
-        display: block;
-        height: px2rem(54);
-        line-height: px2rem(54);
-        color: #FFFFFF;
-        text-align: right;
-        font-size: px2rem(18);
-        padding-right: px2rem(54);
-        @for $i from 1 through 3{
-            &.hd-bg#{$i}{
-                background: url(/src/img/bg-sidebar_zt#{$i}.png) 0 0 / 100% 100% no-repeat;
-            }
-        } 
-    }
-    .section-item_bd{
-        background: #a71616;
-        margin: px2rem(-9) px2rem(9) 0;
-        padding: px2rem(18) 0;
-        line-height: px2rem(30);
-        font-size: 12px;
-        display: none;
-        a{
-            position: relative;
-            display: block;
-            color: #ff9090;
-            padding: 0 px2rem(9) 0 px2rem(27);
-            &:before{
-                content: "";
-                position: absolute;
-                top: 50%;
-                left: px2rem(12);
-                margin-top: px2rem(-2);
-                width: px2rem(4);
-                height: px2rem(4);
-                background: #FFFFFF;
-                display: none;
-            }
-            &.active{
-                color: #FFFFFF;
-                &:before{
-                    display: block;
-                }
-            }
-        }
-    }
+.zt-mod-nav {
+	background: #222222;
+	padding: px2rem(20) 0 px2rem(26);
+	ul {
+		margin-right: px2rem(-30);
+	}
+	li {
+		float: left;
+		margin-right: px2rem(28);
+	}
+	a {
+		position: relative;
+		display: block;
+		color: #FFFFFF;
+		width: px2rem(230);
+		height: px2rem(132);
+		outline: none;
+		&:hover, &.active {
+			.bg-nav {
+				filter: grayscale(0);
+				filter: 0;
+				&:before {
+					right: 0;
+				}
+			}
+		}
+		&.active {
+			&:before {
+				display: block;
+			}
+		}
+		&:before {
+			content: "";
+			position: absolute;
+			display: none;
+			bottom: px2rem(-32);
+			left: px2rem(20);
+			width: 0;
+			height: 0;
+		}
+	}
+	h2 {
+		position: relative;
+		font-size: px2rem(26);
+		font-weight: 700;
+		padding: px2rem(40) 0 px2rem(16) px2rem(12);
+	}
+	p {
+		position: relative;
+		font-size: px2rem(14);
+		padding: 0 0 0 px2rem(12);
+	}
+	.bg-nav {
+		position: absolute;
+		top: 0;
+		left: 0;
+		width: 100%;
+		height: 100%;
+		overflow: hidden;
+		filter: grayscale(100%);
+		filter: gray;
+		transition: all .2s;
+		&:before {
+			content: "";
+			position: absolute;
+			width: px2rem(134);
+			height: 100%;
+			right: px2rem(-50);
+			transition: all .4s ease-in;
+		}
+	}
+	@for $i from 1 through 5 {
+		.nav#{$i} {
+			.bg-nav {
+				&:before {
+					background: url(/src/img/nav#{$i}-icon.png) right 0 / auto 100% no-repeat;
+				}
+			}
+		}
+	}
+	.nav1 {
+		&:before {
+			border: px2rem(16) solid #f5a848;
+			border-color: #f5a848 transparent transparent transparent;
+		}
+		.bg-nav {
+			background: url(/src/img/nav1-bg.png) 0 0 / 100% 100% no-repeat;
+		}
+	}
+	.nav2 {
+		&:before {
+			border: px2rem(16) solid #1367fa;
+			border-color: #1367fa transparent transparent transparent;
+		}
+		.bg-nav {
+			background: url(/src/img/nav2-bg.png) 0 0;
+		}
+	}
+	.nav3 {
+		&:before {
+			border: px2rem(16) solid #16bf82;
+			border-color: #16bf82 transparent transparent transparent;
+		}
+		.bg-nav {
+			background: url(/src/img/nav3-bg.png) 0 0 / 100% no-repeat;
+		}
+	}
+	.nav4 {
+		&:before {
+			border: px2rem(16) solid #00bbd4;
+			border-color: #00bbd4 transparent transparent transparent;
+		}
+		.bg-nav {
+			background: url(/src/img/nav4-bg.png) 0 0 repeat;
+		}
+	}
+	.nav5 {
+		&:before {
+			border: px2rem(16) solid #6817f0;
+			border-color: #6817f0 transparent transparent transparent;
+		}
+		.bg-nav {
+			background: #6817f0;
+		}
+	}
 }
 
-.zt-sidebar-tool{
-    position: fixed;
-    left: 50%;
-    margin: px2rem(90) 0 0 px2rem(690); 
-    z-index: 10;
-    width: px2rem(234);
-    height: px2rem(708);
-    background: url(../src/img/bg-sidebar_tool.png) 0 0 / 100% 100% no-repeat;
-    animation: sidebaFloat 2s ease-in infinite alternate;
-    &.is-scroll{
-        margin-top: 0; 
-        top: px2rem(12);
-    }
-    ul{
-        position: absolute;
-        bottom: 0;
-        width: 100%;
-        text-align: center;
-        line-height: px2rem(42);
-        font-size: px2rem(15);
-        font-weight: 700;
-        a{
-            display: block;
-            color: #FFFFFF;
-            &:hover{
-                text-decoration: underline;
-            }
-        }
-    }
+.zt-sidebar-zt {
+	position: fixed;
+	left: 50%;
+	width: px2rem(186);
+	margin: px2rem(180) 0 0 px2rem(-900);
+	z-index: 10;
+	&.is-scroll {
+		margin-top: 0;
+		top: px2rem(240);
+	}
+	.sidebar-zt_hd {
+		font-size: px2rem(30);
+		font-family: titlefont;
+		color: #FFFFFF;
+		height: px2rem(111);
+		line-height: px2rem(159);
+		margin: 0 px2rem(-54) px2rem(-6) 0;
+		background: url(/src/img/icon-sidebar_zt.png) right 0 / auto 100% no-repeat;
+	}
+	.sidebar-zt_bd {
+		font-weight: 700;
+	}
+	.section-item {
+		&.is-expend {
+			.section-item_hd {
+				@for $i from 1 through 3 {
+					&.hd-bg#{$i} {
+						background-image: url(/src/img/bg-sidebar_zt#{$i}_hover.png);
+					}
+				}
+			}
+		}
+	}
+	.section-item_hd {
+		position: relative;
+		z-index: 2;
+		display: block;
+		height: px2rem(54);
+		line-height: px2rem(54);
+		color: #FFFFFF;
+		text-align: right;
+		font-size: px2rem(18);
+		padding-right: px2rem(54);
+		@for $i from 1 through 3 {
+			&.hd-bg#{$i} {
+				background: url(/src/img/bg-sidebar_zt#{$i}.png) 0 0 / 100% 100% no-repeat;
+			}
+		}
+	}
+	.section-item_bd {
+		background: #a71616;
+		margin: px2rem(-9) px2rem(9) 0;
+		padding: px2rem(18) 0;
+		line-height: px2rem(30);
+		font-size: 12px;
+		display: none;
+		a {
+			position: relative;
+			display: block;
+			color: #ff9090;
+			padding: 0 px2rem(9) 0 px2rem(27);
+			&:before {
+				content: "";
+				position: absolute;
+				top: 50%;
+				left: px2rem(12);
+				margin-top: px2rem(-2);
+				width: px2rem(4);
+				height: px2rem(4);
+				background: #FFFFFF;
+				display: none;
+			}
+			&.active {
+				color: #FFFFFF;
+				&:before {
+					display: block;
+				}
+			}
+		}
+	}
 }
 
-.zt-pop-video{
-    position: relative;
-    width: px2rem(1200);
-    height: px2rem(675);
-    video{
-        width: 100%;
-        height: 100%;
-    }
+.zt-sidebar-tool {
+	position: fixed;
+	left: 50%;
+	margin: px2rem(90) 0 0 px2rem(690);
+	z-index: 10;
+	width: px2rem(234);
+	height: px2rem(708);
+	background: url(../src/img/bg-sidebar_tool.png) 0 0 / 100% 100% no-repeat;
+	animation: sidebaFloat 2s ease-in infinite alternate;
+	&.is-scroll {
+		margin-top: 0;
+		top: px2rem(12);
+	}
+	ul {
+		position: absolute;
+		bottom: 0;
+		width: 100%;
+		text-align: center;
+		line-height: px2rem(42);
+		font-size: px2rem(15);
+		font-weight: 700;
+		a {
+			display: block;
+			color: #FFFFFF;
+			&:hover {
+				text-decoration: underline;
+			}
+		}
+	}
 }
 
-.zt-pop-video_close{
-    position: absolute;
-    top: -1px;
-    right: px2rem(-40);
-    width: px2rem(40);
-    height: px2rem(40);
-    background: url(/src/img/icon-close.png) center/76% no-repeat;
-    background-color: rgba(31, 31, 31, 0.6);
+.zt-pop-video {
+	position: relative;
+	width: px2rem(1200);
+	height: px2rem(675);
+	video {
+		width: 100%;
+		height: 100%;
+	}
 }
 
-.zt-box{
-    position: relative;
-    margin-top: px2rem(88);
-    &.ext-box{
-        margin-top: 0;
-    }
-    .box-hd{
-        position: absolute;
-        top: px2rem(-40);
-        left: px2rem(-16);
-        z-index: 3;
-        background: #ff6600;
-        line-height: px2rem(66);
-        height: px2rem(66);
-        font-size: px2rem(30);
-        font-weight: 700;
-        color: #ffffff;
-        padding: 0 px2rem(20);
-        span{
-            position: relative;
-            z-index: 2;
-        }
-        &:before,&:after{
-            content: "";
-            position: absolute;
-            top: 0;
-            z-index: 1;
-            width: 100%;
-            height: 100%;
-            background: #ff6600;
-        }
-        &:before{
-            left: px2rem(-10);
-            transform: skew(-7deg);
-        }
-        &:after{
-            right: px2rem(-10);
-            background: #ff6600;
-        }
-    }
-    .box-bd{
-        position: relative;
-    }
-    .box-bd_bgr{
-        position: absolute;
-        top: 0;
-        right: px2rem(-10);
-        z-index: 1;
-        width: 100%;
-        height: 100%;
-        padding: px2rem(12) px2rem(12) px2rem(12) px2rem(8);
-        border: px2rem(12) solid #FFFFFF;
-        border-left: px2rem(8) solid #FFFFFF;
-    }
-    .box-bd_cont{
-        position: relative;
-        z-index: 2;
-        padding: px2rem(40) px2rem(30);
-        border: px2rem(12) solid #FFFFFF;
-        border-right: 0;
-        &:before{
-            content: "";
-            position: absolute;
-            top: 0;
-            left: 0;
-            width: 60%;
-            height: 100%;
-        }
-        p{
-            position: relative;
-        }
-    }
+.zt-pop-video_close {
+	position: absolute;
+	top: -1px;
+	right: px2rem(-40);
+	width: px2rem(40);
+	height: px2rem(40);
+	background: url(/src/img/icon-close.png) center/76% no-repeat;
+	background-color: rgba(31, 31, 31, 0.6);
 }
 
-.zt-list-goods{
-    position: relative;
-    z-index: 2;
-    padding: px2rem(30) 0 px2rem(12) px2rem(42);
-    margin: 0 px2rem(-100) 0 0;
-    &.ext-store{
-        padding: px2rem(57) 0 px2rem(12) px2rem(48);
-        margin: 0 px2rem(-100) px2rem(-12) 0;
-        li{
-            width: px2rem(330);
-            height: px2rem(210);
-            margin: 0 px2rem(75) px2rem(57) 0;
-        }
-        .mask{
-            background: rgba(0,8,37,0.7);
-        }
-        p{
-            background: none;
-        }
-    }
-    li{
-        float: left;
-        margin: 0 px2rem(18) px2rem(24) 0;
-        position: relative;
-        width: px2rem(207);
-        border: px2rem(4) solid $commonColor;
-        overflow: hidden;
-        line-height: px2rem(36);
-        color: #ffffff;
-        font-size: px2rem(14);
-        line-height: px2rem(30);
-        cursor: pointer;
-        &.item-uncommon{
-            border-color: $uncommonColor;
-            .icon-rarity{
-                background: $uncommonColor;
-                &:before{
-                    content: "罕见"
-                }
-            }
-        }
-        &.item-epic{
-            border-color: $epicColor;
-            .icon-rarity{
-                background: $epicColor;
-                &:before{
-                    content: "史诗"
-                }
-            }
-        }
-        &.item-legendary{
-            border-color: $legendaryColor;
-            .icon-rarity{
-                background: $legendaryColor;
-                &:before{
-                    content: "传奇"
-                }
-            }
-        }
-        &.item-rare{
-            border-color: $rareColor;
-            .icon-rarity{
-                background: $rareColor;
-                &:before{
-                    content: "稀有"
-                }
-            }
-        }
-        &:hover{
-            .icon-play{
-            }
-        }
-    }
-    .mask{
-        position: absolute;
-        bottom: 0;
-        left: 0;
-        right: 0;
-        text-align: center;
-        background: rgba(0,0,0,0.7)
-    }
-    p{
-        background: #000825;
-    }
-    span{
-        display: inline-block;
-        padding-left: px2rem(27);
-        background: url(/src/img/advanced/icon-gold.png) 0 center / px2rem(18) no-repeat;
-    }
-    .icon-rarity{
-        position: absolute;
-        top: 0;
-        left: px2rem(-45);
-        z-index: 2;
-        width: px2rem(120);
-        font-size: 12px;
-        height: px2rem(36);
-        line-height: px2rem(36);
-        transform: rotate(-45deg);
-        color: #FFFFFF;
-        text-align: center;
-        background: $commonColor;
-        &:before{
-            position: relative;
-            z-index: 1;
-            content: "普通"
-        }
-    }
-    .icon-play{
-        position: absolute;
-        top: 50%;
-        left: 50%;
-        margin: px2rem(-16) 0 0 px2rem(-33);
-        width: px2rem(66);
-        height: px2rem(33);
-        transition: all .2s;
-        background: url(/src/img/icon-play2.png) 0 / 100% no-repeat;
-    }
+.zt-box {
+	position: relative;
+	margin-top: px2rem(88);
+	&.ext-box {
+		margin-top: 0;
+	}
+	.box-hd {
+		position: absolute;
+		top: px2rem(-40);
+		left: px2rem(-16);
+		z-index: 3;
+		background: #ff6600;
+		line-height: px2rem(66);
+		height: px2rem(66);
+		font-size: px2rem(30);
+		font-weight: 700;
+		color: #ffffff;
+		padding: 0 px2rem(20);
+		span {
+			position: relative;
+			z-index: 2;
+		}
+		&:before, &:after {
+			content: "";
+			position: absolute;
+			top: 0;
+			z-index: 1;
+			width: 100%;
+			height: 100%;
+			background: #ff6600;
+		}
+		&:before {
+			left: px2rem(-10);
+			transform: skew(-7deg);
+		}
+		&:after {
+			right: px2rem(-10);
+			background: #ff6600;
+		}
+	}
+	.box-bd {
+		position: relative;
+	}
+	.box-bd_bgr {
+		position: absolute;
+		top: 0;
+		right: px2rem(-10);
+		z-index: 1;
+		width: 100%;
+		height: 100%;
+		padding: px2rem(12) px2rem(12) px2rem(12) px2rem(8);
+		border: px2rem(12) solid #FFFFFF;
+		border-left: px2rem(8) solid #FFFFFF;
+	}
+	.box-bd_cont {
+		position: relative;
+		z-index: 2;
+		padding: px2rem(40) px2rem(30);
+		border: px2rem(12) solid #FFFFFF;
+		border-right: 0;
+		&:before {
+			content: "";
+			position: absolute;
+			top: 0;
+			left: 0;
+			width: 60%;
+			height: 100%;
+		}
+		p {
+			position: relative;
+		}
+	}
 }
 
-.box-tab{
-    position: relative;
-    text-align: center;
-    &.ext-bullet{
-        .box-tab_nav{
-            td{
-                color: #5b6177;
-                text-align: left;
-                padding: 0 px2rem(20);
-                @include gradient-horizontal(#b1badd,#b7bfe1);
-                &:after{
-                    content: "";
-                    position: absolute;
-                    top: 0;
-                    right: 0;
-                    width: px2rem(60);
-                    height: px2rem(58);
-                    background: url(/src/img/require/icon-tab-nav.png) 0 / auto 100% no-repeat;
-                }
-                &.active{
-                    background: #5161a6;
-                    color: #FFFFFF;
-                    &:before{
-                        @include triangle-down(px2rem(10),#5161a6);
-                    }
-                }
-            }
-        }
-    }
-    &.ext-prop{
-        .box-tab_nav{
-            td{
-                color: #4a4b35;
-                padding: 0 px2rem(20);
-                background: #eceeac;
-                &.active{
-                    background: #5b5d2f;
-                    color: #FFFFFF;
-                    &:before{
-                        @include triangle-down(px2rem(10),#5b5d2f);
-                    }
-                }
-            }
-        }
-        .box-tab_desc{
-            color: #fdffdd;
-        }
-    }
-    &.ext-arsenal{
-        .box-tab_nav{
-            td{
-                background: #dbdda6;
-                color: #797a55;
-                &:after{
-                    content: "";
-                    position: absolute;
-                    top: 0;
-                    right: px2rem(12);
-                    width: px2rem(21);
-                    height: px2rem(6);
-                    background: url(/src/img/tool/icon-deco-gt.png) 0 0 / 100% 100% no-repeat;
-                }
-            }
-        }
-    }
-    .box-tab_nav{
-        margin: px2rem(30) 0;
-        width: 100%;
-        table-layout: fixed;
-        td{
-            position: relative;
-            flex: 1;
-            background: #bdc5e6;
-            color: #5b6177;
-            font-size: px2rem(22);
-            font-weight: 700;
-            line-height: px2rem(58);
-            border-right: 6px solid transparent;
-            cursor: pointer;
-            &.active{
-                background: #fff100;
-                color: #716c14;
-                &:before{
-                    @include triangle-down(px2rem(10),#fff100);
-                }
-            }
-            &:before{
-                content: "";
-                position: absolute;
-                bottom: px2rem(-20);
-                left: px2rem(16);
-            }
-        }
-    }
-    .box-tab_desc{
-        margin: 0 auto;
-        width: px2rem(826);
-        line-height: px2rem(36);
-        font-size: px2rem(20);
-        font-weight: 700;
-        color: #373d56;
-    }
+.zt-list-goods {
+	position: relative;
+	z-index: 2;
+	padding: px2rem(30) 0 px2rem(12) px2rem(42);
+	margin: 0 px2rem(-100) 0 0;
+	&.ext-store {
+		padding: px2rem(57) 0 px2rem(12) px2rem(48);
+		margin: 0 px2rem(-100) px2rem(-12) 0;
+		li {
+			width: px2rem(330);
+			height: px2rem(210);
+			margin: 0 px2rem(75) px2rem(57) 0;
+		}
+		.mask {
+			background: rgba(0, 8, 37, 0.7);
+		}
+		p {
+			background: none;
+		}
+	}
+	li {
+		float: left;
+		margin: 0 px2rem(18) px2rem(24) 0;
+		position: relative;
+		width: px2rem(207);
+		border: px2rem(4) solid $commonColor;
+		overflow: hidden;
+		line-height: px2rem(36);
+		color: #ffffff;
+		font-size: px2rem(14);
+		line-height: px2rem(30);
+		cursor: pointer;
+		&.item-uncommon {
+			border-color: $uncommonColor;
+			.icon-rarity {
+				background: $uncommonColor;
+				&:before {
+					content: "罕见"
+				}
+			}
+		}
+		&.item-epic {
+			border-color: $epicColor;
+			.icon-rarity {
+				background: $epicColor;
+				&:before {
+					content: "史诗"
+				}
+			}
+		}
+		&.item-legendary {
+			border-color: $legendaryColor;
+			.icon-rarity {
+				background: $legendaryColor;
+				&:before {
+					content: "传奇"
+				}
+			}
+		}
+		&.item-rare {
+			border-color: $rareColor;
+			.icon-rarity {
+				background: $rareColor;
+				&:before {
+					content: "稀有"
+				}
+			}
+		}
+		&:hover {
+			.icon-play {
+			}
+		}
+	}
+	.mask {
+		position: absolute;
+		bottom: 0;
+		left: 0;
+		right: 0;
+		text-align: center;
+		background: rgba(0, 0, 0, 0.7)
+	}
+	p {
+		background: #000825;
+	}
+	span {
+		display: inline-block;
+		padding-left: px2rem(27);
+		background: url(/src/img/advanced/icon-gold.png) 0 center / px2rem(18) no-repeat;
+	}
+	.icon-rarity {
+		position: absolute;
+		top: 0;
+		left: px2rem(-45);
+		z-index: 2;
+		width: px2rem(120);
+		font-size: 12px;
+		height: px2rem(36);
+		line-height: px2rem(36);
+		transform: rotate(-45deg);
+		color: #FFFFFF;
+		text-align: center;
+		background: $commonColor;
+		&:before {
+			position: relative;
+			z-index: 1;
+			content: "普通"
+		}
+	}
+	.icon-play {
+		position: absolute;
+		top: 50%;
+		left: 50%;
+		margin: px2rem(-16) 0 0 px2rem(-33);
+		width: px2rem(66);
+		height: px2rem(33);
+		transition: all .2s;
+		background: url(/src/img/icon-play2.png) 0 / 100% no-repeat;
+	}
 }
-.box-tab-lr{
-    position: relative;
-    padding: px2rem(42) 0 px2rem(63);
-    margin: 0 px2rem(57);
-    &.ext-advanced{
-        .box-tab_nav{
-            li{
-                background: #6d869a;
-                &.active{
-                    background: #7894aa;
-                    a{
-                        color: #ffffff;
-                        &:before{
-                            content: "";
-                            position: absolute;
-                            left: px2rem(33);
-                            bottom: 0;
-                            width: px2rem(21);
-                            height: px2rem(12);
-                            background: url(/src/img/advanced/icon-deco_wb.jpg) 0 0 / 100% no-repeat;
-                        }
-                    }
-                }
-                &:before{
-                    background: #6d869a;
-                }
-            }
-            a{
-                color: #a4c4de;
-            }
-        }
-        .cont-skew_top,.cont-skew_bottom{
-            background: #7894aa;
-        }
-    }
-    .box-tab_nav{
-        position: absolute;
-        z-index: 3;
-        line-height: px2rem(56);
-        li{
-            position: relative;
-            width: px2rem(220);
-            background: #eba135;
-            margin-bottom: px2rem(18);
-            box-sizing: content-box;
-            &:before{
-                content: "";
-                position: absolute;
-                top: px2rem(3);
-                width: 100%;
-                height: 100%;
-                background: #eba135;
-                transform: skew(0, -1deg);
-            }
-            &.active{
-                background: #ffa016;
-                border: px2rem(9) solid #ffffff;
-                border-right: 0;
-                padding-right: px2rem(15);
-                &:before{
-                    display: none;
-                }
-            }
-        }
-        a{
-            position: relative;
-            display: block;
-            color: #ffe7c4;
-            font-size: px2rem(20);
-            font-weight: 700;
-            text-align: center;
-        }
-    }
-    .box-tab_cont{
-        position: relative;
-        z-index: 2;
-        width: px2rem(840);
-    }
-    .box-tab_panel{
-        position: relative;
-    }
-    .panel-cont{
-        position: relative;
-        z-index: 2;
-        @include clearfix();
-        padding: px2rem(40) px2rem(24) 0;
-    }
-    .cont-skew_top,.cont-skew_bottom{
-        position: absolute;
-        left: 0;
-        width: 100%;
-        height: 60%;
-        padding: px2rem(9);
-        background: #ffa016;
-        border: px2rem(9) solid #FFFFFF;
-        &:before{
-            content: "";
-            position: absolute;
-        }
-    }
-    .cont-skew_top{
-        top: px2rem(-7);
-        border-bottom: 0;
-        transform: skew(0,-1deg);
-        &:before{
-            top: -1px;
-            left: 50%;
-            width: px2rem(19);
-            height: px2rem(12);
-            background: url(/src/img/require/icon-deco_wt.png) 0 0 / 100% no-repeat;
-        }
-    }
-    .cont-skew_bottom{
-        bottom: px2rem(-20);
-        border-top: 0;
-        transform: skew(0,1deg);
-        &:before{
-            bottom: 0;
-            right: px2rem(80);
-            width: px2rem(29);
-            height: px2rem(6);
-            background: url(/src/img/require/icon-deco_wb.png) 0 0 / 100% no-repeat;
-        }
-    }
+
+.box-tab {
+	position: relative;
+	text-align: center;
+	&.ext-bullet {
+		.box-tab_nav {
+			td {
+				color: #5b6177;
+				text-align: left;
+				padding: 0 px2rem(20);
+				@include gradient-horizontal(#b1badd, #b7bfe1);
+				&:after {
+					content: "";
+					position: absolute;
+					top: 0;
+					right: 0;
+					width: px2rem(60);
+					height: px2rem(58);
+					background: url(/src/img/require/icon-tab-nav.png) 0 / auto 100% no-repeat;
+				}
+				&.active {
+					background: #5161a6;
+					color: #FFFFFF;
+					&:before {
+						@include triangle-down(px2rem(10), #5161a6);
+					}
+				}
+			}
+		}
+	}
+	&.ext-prop {
+		.box-tab_nav {
+			td {
+				color: #4a4b35;
+				padding: 0 px2rem(20);
+				background: #eceeac;
+				&.active {
+					background: #5b5d2f;
+					color: #FFFFFF;
+					&:before {
+						@include triangle-down(px2rem(10), #5b5d2f);
+					}
+				}
+			}
+		}
+		.box-tab_desc {
+			color: #fdffdd;
+		}
+	}
+	&.ext-arsenal {
+		.box-tab_nav {
+			td {
+				background: #dbdda6;
+				color: #797a55;
+				&:after {
+					content: "";
+					position: absolute;
+					top: 0;
+					right: px2rem(12);
+					width: px2rem(21);
+					height: px2rem(6);
+					background: url(/src/img/tool/icon-deco-gt.png) 0 0 / 100% 100% no-repeat;
+				}
+			}
+		}
+	}
+	.box-tab_nav {
+		margin: px2rem(30) 0;
+		width: 100%;
+		table-layout: fixed;
+		td {
+			position: relative;
+			flex: 1;
+			background: #bdc5e6;
+			color: #5b6177;
+			font-size: px2rem(22);
+			font-weight: 700;
+			line-height: px2rem(58);
+			border-right: 6px solid transparent;
+			cursor: pointer;
+			&.active {
+				background: #fff100;
+				color: #716c14;
+				&:before {
+					@include triangle-down(px2rem(10), #fff100);
+				}
+			}
+			&:before {
+				content: "";
+				position: absolute;
+				bottom: px2rem(-20);
+				left: px2rem(16);
+			}
+		}
+	}
+	.box-tab_desc {
+		margin: 0 auto;
+		width: px2rem(826);
+		line-height: px2rem(36);
+		font-size: px2rem(20);
+		font-weight: 700;
+		color: #373d56;
+	}
 }
-.box-tab-award{
-    position: relative;
-    margin: 0 px2rem(30);
-    .box-tab_nav{
-        position: relative;
-        width: 100%;
-        table-layout: fixed;
-        margin-top: px2rem(30);
-        td{
-            position: relative;
-            z-index: 2;
-            font-size: px2rem(21);
-            font-weight: 700;
-            line-height: px2rem(48);
-            text-align: center;
-            cursor: pointer;
-            transform: skew(0,-1deg);
-            background: #8597da;
-            border-left: 6px solid transparent;
-            &.active{
-                z-index: 3;
-                transform: skew(0,1deg);
-                background: #92a3e1;
-                border: px2rem(9) solid #FFFFFF;
-                &:before{
-                    content: "";
-                    position: absolute;
-                    left: 0;
-                    right: 0;
-                    height: 150%;
-                    background: #92a3e1;
-                }
-                a{
-                    color: #ffffff;
-                }
-            }
-        }
-        a{
-            position: relative;
-            display: block;
-            color: #4e5985;
-        }
-    }
-    .box-tab_cont{
-        position: relative;
-        z-index: 2;
-        background: #92a3e1;
-        border: px2rem(9) solid #FFFFFF;
-        padding: px2rem(30);
-        margin-top: px2rem(-9);
-    }
-    .award-wrap{
-        line-height: px2rem(57);
-        margin-top: px2rem(-20);
-        font-size: px2rem(16);
-    }
-    .award-cover{
-        width: px2rem(444);
-    }
-    .award-table{
-        width: px2rem(522);
-        h3{
-            font-size: px2rem(18);
-            font-weight: 700;
-            color: #ffffff;
-        }
-        table{
-            width: 100%;
-            line-height: px2rem(30);
-            font-size: px2rem(14);
-            table-layout: fixed;
-            td{
-                padding: 0 px2rem(21);
-                &:nth-child(2){
-                    text-align: center;
-                }
-                &:nth-child(3){
-                    text-align: right;
-                }
-            }
-        }
-        thead{
-            tr{
-                font-weight: 700;
-                background: #7384c2;
-            }
-        }
-        tbody{
-            tr{
-                border-top: 1px solid #92a3e1;
-                background: #7c8dce;
-            }
-        }
-    }
+
+.box-tab-lr {
+	position: relative;
+	padding: px2rem(42) 0 px2rem(63);
+	margin: 0 px2rem(57);
+	&.ext-advanced {
+		.box-tab_nav {
+			li {
+				background: #6d869a;
+				&.active {
+					background: #7894aa;
+					a {
+						color: #ffffff;
+						&:before {
+							content: "";
+							position: absolute;
+							left: px2rem(33);
+							bottom: 0;
+							width: px2rem(21);
+							height: px2rem(12);
+							background: url(/src/img/advanced/icon-deco_wb.jpg) 0 0 / 100% no-repeat;
+						}
+					}
+				}
+				&:before {
+					background: #6d869a;
+				}
+			}
+			a {
+				color: #a4c4de;
+			}
+		}
+		.cont-skew_top, .cont-skew_bottom {
+			background: #7894aa;
+		}
+	}
+	.box-tab_nav {
+		position: absolute;
+		z-index: 3;
+		line-height: px2rem(56);
+		li {
+			position: relative;
+			width: px2rem(220);
+			background: #eba135;
+			margin-bottom: px2rem(18);
+			box-sizing: content-box;
+			&:before {
+				content: "";
+				position: absolute;
+				top: px2rem(3);
+				width: 100%;
+				height: 100%;
+				background: #eba135;
+				transform: skew(0, -1deg);
+			}
+			&.active {
+				background: #ffa016;
+				border: px2rem(9) solid #ffffff;
+				border-right: 0;
+				padding-right: px2rem(15);
+				&:before {
+					display: none;
+				}
+			}
+		}
+		a {
+			position: relative;
+			display: block;
+			color: #ffe7c4;
+			font-size: px2rem(20);
+			font-weight: 700;
+			text-align: center;
+		}
+	}
+	.box-tab_cont {
+		position: relative;
+		z-index: 2;
+		width: px2rem(840);
+	}
+	.box-tab_panel {
+		position: relative;
+	}
+	.panel-cont {
+		position: relative;
+		z-index: 2;
+		@include clearfix();
+		padding: px2rem(40) px2rem(24) 0;
+	}
+	.cont-skew_top, .cont-skew_bottom {
+		position: absolute;
+		left: 0;
+		width: 100%;
+		height: 60%;
+		padding: px2rem(9);
+		background: #ffa016;
+		border: px2rem(9) solid #FFFFFF;
+		&:before {
+			content: "";
+			position: absolute;
+		}
+	}
+	.cont-skew_top {
+		top: px2rem(-7);
+		border-bottom: 0;
+		transform: skew(0, -1deg);
+		&:before {
+			top: -1px;
+			left: 50%;
+			width: px2rem(19);
+			height: px2rem(12);
+			background: url(/src/img/require/icon-deco_wt.png) 0 0 / 100% no-repeat;
+		}
+	}
+	.cont-skew_bottom {
+		bottom: px2rem(-20);
+		border-top: 0;
+		transform: skew(0, 1deg);
+		&:before {
+			bottom: 0;
+			right: px2rem(80);
+			width: px2rem(29);
+			height: px2rem(6);
+			background: url(/src/img/require/icon-deco_wb.png) 0 0 / 100% no-repeat;
+		}
+	}
 }
 
-.zt-link-more{
-    position: relative;
-    display: block;
-    width: px2rem(309);
-    height: px2rem(99);
-    line-height: px2rem(108);
-    color: #716c14;
-    font-size: px2rem(24);
-    font-family: titlefont;
-    text-align: center;
-    margin: px2rem(42) auto 0;
-    background: url(/src/img/bg-more.png) 0 0 / 100% no-repeat;
-    &:hover{
-        background: url(/src/img/bg-more_hover.png) 0 0 / 100% no-repeat;
-    }
-    &.ext-about{
-        width: px2rem(432);
-        height: px2rem(138);
-        line-height: px2rem(150);
-        color: #865813;
-        font-size: px2rem(48);
-        background: url(/src/img/bg-more_about.png) 0 0 / 100% no-repeat;
-        &:hover{
-            opacity: 0.8;
-        }
-    }
+.box-tab-award {
+	position: relative;
+	margin: 0 px2rem(30);
+	.box-tab_nav {
+		position: relative;
+		width: 100%;
+		table-layout: fixed;
+		margin-top: px2rem(30);
+		td {
+			position: relative;
+			z-index: 2;
+			font-size: px2rem(21);
+			font-weight: 700;
+			line-height: px2rem(48);
+			text-align: center;
+			cursor: pointer;
+			transform: skew(0, -1deg);
+			background: #8597da;
+			border-left: 6px solid transparent;
+			&.active {
+				z-index: 3;
+				transform: skew(0, 1deg);
+				background: #92a3e1;
+				border: px2rem(9) solid #FFFFFF;
+				&:before {
+					content: "";
+					position: absolute;
+					left: 0;
+					right: 0;
+					height: 150%;
+					background: #92a3e1;
+				}
+				a {
+					color: #ffffff;
+				}
+			}
+		}
+		a {
+			position: relative;
+			display: block;
+			color: #4e5985;
+		}
+	}
+	.box-tab_cont {
+		position: relative;
+		z-index: 2;
+		background: #92a3e1;
+		border: px2rem(9) solid #FFFFFF;
+		padding: px2rem(30);
+		margin-top: px2rem(-9);
+	}
+	.award-wrap {
+		line-height: px2rem(57);
+		margin-top: px2rem(-20);
+		font-size: px2rem(16);
+	}
+	.award-cover {
+		width: px2rem(444);
+	}
+	.award-table {
+		width: px2rem(522);
+		h3 {
+			font-size: px2rem(18);
+			font-weight: 700;
+			color: #ffffff;
+		}
+		table {
+			width: 100%;
+			line-height: px2rem(30);
+			font-size: px2rem(14);
+			table-layout: fixed;
+			td {
+				padding: 0 px2rem(21);
+				&:nth-child(2) {
+					text-align: center;
+				}
+				&:nth-child(3) {
+					text-align: right;
+				}
+			}
+		}
+		thead {
+			tr {
+				font-weight: 700;
+				background: #7384c2;
+			}
+		}
+		tbody {
+			tr {
+				border-top: 1px solid #92a3e1;
+				background: #7c8dce;
+			}
+		}
+	}
 }
 
-#pageNum {
-    text-align: center;
-    font-size: 14px;
-    padding-bottom: 15px;
-    padding-top: 20px;
-    span{
-        position: relative;
-        display: inline-block;
-        padding: 4px 9px;
-        margin: 0 3px;
-        cursor: pointer;
-        &.current{
-            cursor: not-allowed;
-            &:before,&:after{
-                background-color: #80a6c4;
-            }
-        }
-        &:before,&:after{
-            content: "";
-            position: absolute;
-            top: -2px;
-            width: 70%;
-            height: 100%;
-            background-color: #567186;
-            border: 2px solid #FFFFFF;
-        }
-        &:before{
-            left: 0;
-            border-right: 0;
-            transform: skewX(3deg);
-        }
-        &:after{
-            right: 0;
-            border-left: 0;
-            transform: skewX(-4deg);
-        }
-        &:hover {
-            &:before,&:after{
-                background-color: #80a6c4;
-            }
-        }
-    }
-    a {
-        position: relative;
-        z-index: 2;
-        text-decoration: none;
-        color: #fff;
-    }
+.zt-link-more {
+	position: relative;
+	display: block;
+	width: px2rem(309);
+	height: px2rem(99);
+	line-height: px2rem(108);
+	color: #716c14;
+	font-size: px2rem(24);
+	font-family: titlefont;
+	text-align: center;
+	margin: px2rem(42) auto 0;
+	background: url(/src/img/bg-more.png) 0 0 / 100% no-repeat;
+	&:hover {
+		background: url(/src/img/bg-more_hover.png) 0 0 / 100% no-repeat;
+	}
+	&.ext-about {
+		width: px2rem(432);
+		height: px2rem(138);
+		line-height: px2rem(150);
+		color: #865813;
+		font-size: px2rem(48);
+		background: url(/src/img/bg-more_about.png) 0 0 / 100% no-repeat;
+		&:hover {
+			opacity: 0.8;
+		}
+	}
 }
 
+#pageNum {
+	text-align: center;
+	font-size: 14px;
+	padding-bottom: 15px;
+	padding-top: 20px;
+	span {
+		position: relative;
+		display: inline-block;
+		padding: 4px 9px;
+		margin: 0 3px;
+		cursor: pointer;
+		&.current {
+			cursor: not-allowed;
+			&:before, &:after {
+				background-color: #80a6c4;
+			}
+		}
+		&:before, &:after {
+			content: "";
+			position: absolute;
+			top: -2px;
+			width: 70%;
+			height: 100%;
+			background-color: #567186;
+			border: 2px solid #FFFFFF;
+		}
+		&:before {
+			left: 0;
+			border-right: 0;
+			transform: skewX(3deg);
+		}
+		&:after {
+			right: 0;
+			border-left: 0;
+			transform: skewX(-4deg);
+		}
+		&:hover {
+			&:before, &:after {
+				background-color: #80a6c4;
+			}
+		}
+	}
+	a {
+		position: relative;
+		z-index: 2;
+		text-decoration: none;
+		color: #fff;
+	}
+}
 
 //了解游戏
-.page-about{
-    .ab-section{
-        .zt-inner{
-            @include clearfix();
-            overflow: hidden;
-        }
-        .section-image{
-            float: left;
-            position: relative;
-            width: px2rem(600);
-            cursor: pointer;
-            &:hover{
-                .icon-play{
-                    transform: rotate(180deg);
-                    opacity: 0.8;
-                }
-            }
-            &.ext-video{
-                width: px2rem(394);
-            }
-            img{
-                display: block;
-                width: auto;
-                max-width: 100%;
-                overflow: hidden;
-            }
-            .icon-play{
-                position: absolute;
-                top: 50%;
-                left: 50%;
-                margin: px2rem(-50) 0 0 px2rem(-58);
-                width: px2rem(116);
-                height: px2rem(100);
-                transition: all .2s;
-                background: url(/src/img/icon-play.png) center / 100% no-repeat;
-            }
-        }
-        .section-cont{
-            float: left;
-            width: px2rem(545);
-            margin: 0 px2rem(12);
-            h2{
-                font-size: px2rem(50);
-                font-family: titleFont;
-            }
-            p{
-                font-size: px2rem(20);
-                line-height: px2rem(40);
-                margin-top: px2rem(26);
-            }
-            .cont-opr{
-                width: px2rem(474);
-                height: px2rem(265);
-                overflow: hidden;
-                margin-top: px2rem(30);
-                h3{
-                    font-size: px2rem(30);
-                    height: px2rem(47);
-                    color: #9c562c;
-                    line-height: px2rem(56);
-                    font-weight: 700;
-                    padding-left: px2rem(58);
-                    margin: px2rem(26) 0 0 px2rem(20);
-                    background: url(/src/img/about/icon-light.png) 0 0 /auto 100% no-repeat;
-                }
-                ul{
-                    font-size: px2rem(16);
-                    line-height: px2rem(30);
-                    color: #a6804c;
-                    padding: 0 px2rem(20) 0 px2rem(74);
-                }
-                li{
-                    margin-top: px2rem(10);
-                }
-                label{
-                    font-weight: 700;
-                    color: #7f633e;
-                }
-                i{
-                    display: inline-block;
-                    font-size: px2rem(12);
-                    font-weight: normal;
-                    color: #ffcb84;
-                    background: #FFFFFF;
-                    vertical-align: middle;
-                    height: px2rem(20);
-                    line-height: px2rem(20);
-                    min-width: px2rem(20);
-                    text-align: center;
-                    margin-right: px2rem(12);
-                    border-radius: 2px;
-                    &.icon-mouse{
-                        height: px2rem(28);
-                        background: url(/src/img/about/icon-mouse.png) 0 0 / auto 100% no-repeat;
-                    }
-                }
-            }
-            .cont-opr_yellow{
-                background: url(/src/img/about/opr-yellow.png) no-repeat;
-            }
-            .cont-opr_yellowsm{
-                height: px2rem(165);
-                background: url(/src/img/about/opr-yellow-sm.png) no-repeat;
-            }
-            .cont-opr_graysm{
-                height: px2rem(165);
-                background: url(/src/img/about/opr-gray-sm.png) no-repeat;
-                h3{
-                    color: #ffffff;
-                    background: url(/src/img/about/icon-light2.png) 0 0 /auto 100% no-repeat;
-                }
-                ul{
-                    color: #ffffff;
-                    label{
-                        color: #ffffff;
-                    }
-                    i{
-                        color: #595f70;
-                    }
-                }
-            }
-        }
-    }
+.page-about {
+	.ab-section {
+		.zt-inner {
+			@include clearfix();
+			overflow: hidden;
+		}
+		.section-image {
+			float: left;
+			position: relative;
+			width: px2rem(600);
+			cursor: pointer;
+			&:hover {
+				.icon-play {
+					transform: rotate(180deg);
+					opacity: 0.8;
+				}
+			}
+			&.ext-video {
+				width: px2rem(394);
+			}
+			img {
+				display: block;
+				width: auto;
+				max-width: 100%;
+				overflow: hidden;
+			}
+			.icon-play {
+				position: absolute;
+				top: 50%;
+				left: 50%;
+				margin: px2rem(-50) 0 0 px2rem(-58);
+				width: px2rem(116);
+				height: px2rem(100);
+				transition: all .2s;
+				background: url(/src/img/icon-play.png) center / 100% no-repeat;
+			}
+		}
+		.section-cont {
+			float: left;
+			width: px2rem(545);
+			margin: 0 px2rem(12);
+			h2 {
+				font-size: px2rem(50);
+				font-family: titleFont;
+			}
+			p {
+				font-size: px2rem(20);
+				line-height: px2rem(40);
+				margin-top: px2rem(26);
+			}
+			.cont-opr {
+				width: px2rem(474);
+				height: px2rem(265);
+				overflow: hidden;
+				margin-top: px2rem(30);
+				h3 {
+					font-size: px2rem(30);
+					height: px2rem(47);
+					color: #9c562c;
+					line-height: px2rem(56);
+					font-weight: 700;
+					padding-left: px2rem(58);
+					margin: px2rem(26) 0 0 px2rem(20);
+					background: url(/src/img/about/icon-light.png) 0 0 /auto 100% no-repeat;
+				}
+				ul {
+					font-size: px2rem(16);
+					line-height: px2rem(30);
+					color: #a6804c;
+					padding: 0 px2rem(20) 0 px2rem(74);
+				}
+				li {
+					margin-top: px2rem(10);
+				}
+				label {
+					font-weight: 700;
+					color: #7f633e;
+				}
+				i {
+					display: inline-block;
+					font-size: px2rem(12);
+					font-weight: normal;
+					color: #ffcb84;
+					background: #FFFFFF;
+					vertical-align: middle;
+					height: px2rem(20);
+					line-height: px2rem(20);
+					min-width: px2rem(20);
+					text-align: center;
+					margin-right: px2rem(12);
+					border-radius: 2px;
+					&.icon-mouse {
+						height: px2rem(28);
+						background: url(/src/img/about/icon-mouse.png) 0 0 / auto 100% no-repeat;
+					}
+				}
+			}
+			.cont-opr_yellow {
+				background: url(/src/img/about/opr-yellow.png) no-repeat;
+			}
+			.cont-opr_yellowsm {
+				height: px2rem(165);
+				background: url(/src/img/about/opr-yellow-sm.png) no-repeat;
+			}
+			.cont-opr_graysm {
+				height: px2rem(165);
+				background: url(/src/img/about/opr-gray-sm.png) no-repeat;
+				h3 {
+					color: #ffffff;
+					background: url(/src/img/about/icon-light2.png) 0 0 /auto 100% no-repeat;
+				}
+				ul {
+					color: #ffffff;
+					label {
+						color: #ffffff;
+					}
+					i {
+						color: #595f70;
+					}
+				}
+			}
+		}
+	}
 
-    .ab-section1{
-        color: #3a3e4d;
-        height: px2rem(850);
-        background: url(/src/img/about/bg1.jpg) center 0 / 100% auto no-repeat #a3afe3;
-        .section-cont{
-            margin: px2rem(184) 0 0 px2rem(720);
-        }
-    }
+	.ab-section1 {
+		color: #3a3e4d;
+		height: px2rem(850);
+		background: url(/src/img/about/bg1.jpg) center 0 / 100% auto no-repeat #a3afe3;
+		.section-cont {
+			margin: px2rem(184) 0 0 px2rem(720);
+		}
+	}
 
-    .ab-section2{
-        color: #6e330f;
-        height: px2rem(850);
-        background: url(/src/img/about/bg2.jpg) center 0/ 100% auto no-repeat #f1aa4c;
-        .section-cont{
-            margin-top: px2rem(150);
-            width: px2rem(480);
-            .cont-opr{
-                margin-top: px2rem(60);
-            }
-        }
-    }
+	.ab-section2 {
+		color: #6e330f;
+		height: px2rem(850);
+		background: url(/src/img/about/bg2.jpg) center 0/ 100% auto no-repeat #f1aa4c;
+		.section-cont {
+			margin-top: px2rem(150);
+			width: px2rem(480);
+			.cont-opr {
+				margin-top: px2rem(60);
+			}
+		}
+	}
 
-    .ab-section3{
-        color: #3a3e4d;
-        height: px2rem(850);
-        background: url(/src/img/about/bg3.jpg) center 0/ 100% auto no-repeat #f1eff9;
-        .section-image{
-            margin: px2rem(340) px2rem(70) 0 px2rem(196);
-        }
-        .section-cont{
-            margin-top: px2rem(300);
-        }
-    }
+	.ab-section3 {
+		color: #3a3e4d;
+		height: px2rem(850);
+		background: url(/src/img/about/bg3.jpg) center 0/ 100% auto no-repeat #f1eff9;
+		.section-image {
+			margin: px2rem(340) px2rem(70) 0 px2rem(196);
+		}
+		.section-cont {
+			margin-top: px2rem(300);
+		}
+	}
 
-    .ab-section4{
-        color: #3a3e4d;
-        height: px2rem(850);
-        background: url(/src/img/about/bg4.jpg) center 0/ 100% auto no-repeat #a3afe3;
-        .section-image{
-            margin: px2rem(334) 0 0 px2rem(20);
-        }
-        .section-cont{
-            margin-top: px2rem(288);
-        }
-    }
+	.ab-section4 {
+		color: #3a3e4d;
+		height: px2rem(850);
+		background: url(/src/img/about/bg4.jpg) center 0/ 100% auto no-repeat #a3afe3;
+		.section-image {
+			margin: px2rem(334) 0 0 px2rem(20);
+		}
+		.section-cont {
+			margin-top: px2rem(288);
+		}
+	}
 
-    .ab-section5{
-        color: #cbdcff;
-        height: px2rem(850);
-        background: url(/src/img/about/bg5.jpg) center 0/ 100% auto no-repeat #394053;
-        .section-image{
-            margin: px2rem(190) px2rem(50) 0 0;
-        }
-        .section-cont{
-            margin-top: px2rem(212);
-        }
-    }
+	.ab-section5 {
+		color: #cbdcff;
+		height: px2rem(850);
+		background: url(/src/img/about/bg5.jpg) center 0/ 100% auto no-repeat #394053;
+		.section-image {
+			margin: px2rem(190) px2rem(50) 0 0;
+		}
+		.section-cont {
+			margin-top: px2rem(212);
+		}
+	}
 
-    .ab-section6{
-        color: #6e330f;
-        height: px2rem(850);
-        background: url(/src/img/about/bg6.jpg) center 0/ 100% auto no-repeat #eeb14d;
-        .section-image{
-            margin: px2rem(350) 0 0 px2rem(20);
-        }
-        .section-cont{
-            margin-top: px2rem(212);
-        }
-    }
+	.ab-section6 {
+		color: #6e330f;
+		height: px2rem(850);
+		background: url(/src/img/about/bg6.jpg) center 0/ 100% auto no-repeat #eeb14d;
+		.section-image {
+			margin: px2rem(350) 0 0 px2rem(20);
+		}
+		.section-cont {
+			margin-top: px2rem(212);
+		}
+	}
 
-    .ab-section7{
-        color: #3a3e4d;
-        padding-bottom: px2rem(200);
-        background: url(/src/img/about/bg7.jpg) center 0/ 100% auto no-repeat #ffffff;
-        .section-image{
-            margin: px2rem(230) px2rem(40) 0 0;
-        }
-        .section-cont{
-            margin-top: px2rem(266);
-        }
-        .zt-link-more{
-            margin-top: px2rem(120);
-        }
-    }
+	.ab-section7 {
+		color: #3a3e4d;
+		padding-bottom: px2rem(200);
+		background: url(/src/img/about/bg7.jpg) center 0/ 100% auto no-repeat #ffffff;
+		.section-image {
+			margin: px2rem(230) px2rem(40) 0 0;
+		}
+		.section-cont {
+			margin-top: px2rem(266);
+		}
+		.zt-link-more {
+			margin-top: px2rem(120);
+		}
+	}
 }
 
-.page-require .re-section,.page-advanced .ad-section,.page-fad .fd-section{
-    overflow: hidden;
-    font-size: px2rem(18);
-    line-height: px2rem(40);
-    .section-hd{
-        height: px2rem(142);
-    }
-    .section-hd_sm{
-        height: px2rem(56);
-    }
+.page-require .re-section, .page-advanced .ad-section, .page-fad .fd-section {
+	overflow: hidden;
+	font-size: px2rem(18);
+	line-height: px2rem(40);
+	.section-hd {
+		height: px2rem(142);
+	}
+	.section-hd_sm {
+		height: px2rem(56);
+	}
 }
 
 //萌新入门
-.page-require{
-    @for $i from 1 through 6{
-        .re-section#{$i}{
-            .section-hd{
-                background: url(/src/img/require/title#{$i}.png) center 0 /auto 100% no-repeat;
-            }
-        }
-    }
-    .re-section1{
-        color: #cbe8ff;
-        padding-bottom: px2rem(80);
-        background: url(/src/img/require/bg1.jpg) center 0 / 100% auto no-repeat #68869e;
-        .box-bd_bgr{
-            background: #567186;
-        }
-        .box-bd_cont{
-            &:before{
-                background: #567186;
-            }
-        }
-        .swiper-wrapper{
-            position: relative;
-            margin: px2rem(12) px2rem(60) 0;
-        }
-    }
-    .re-section2{
-        padding: 0 0 px2rem(10);
-        background: url(/src/img/require/bg2.jpg) center 0 / 100% auto no-repeat #e27541;
-        .box-bd_bgr{
-            background: #ffc600;
-        }
-        .box-bd_cont{
-            &:before{
-                background: #ffc600;
-            }
-        }
-        .list-pic{
-            position: relative;
-            margin: px2rem(20) px2rem(-40) 0 px2rem(80);
-            &.ext-sm{
-                margin: px2rem(20) px2rem(-40) 0 px2rem(20);
-                li{
-                    width: px2rem(350);
-                    margin: 0 px2rem(40) px2rem(40) 0;
-                    &:before{
-                        transform: skew(2deg,0);
-                    }
-                    &:after{
-                        transform: skew(-2deg,0);
-                    }
-                }
-                img{
-                    height: px2rem(204);
-                }
-                a{
-                    &:before{
-                        right: px2rem(81);
-                    }
-                }
-            }
-            li{
-                position: relative;
-                float: left;
-                width: px2rem(487);
-                margin: 0 px2rem(40) px2rem(60) 0;
-                &:before,&:after{
-                    content: "";
-                    position: absolute;
-                    top: 0;
-                    width: 60%;
-                    height: 100%;
-                    background: #FFFFFF;
-                }
-                &:before{
-                    left: 0;
-                    transform: skew(-2deg,0);
-                }
-                &:after{
-                    right: 0;
-                    transform: skew(2deg,0);
-                }
-            }
-            a{
-                position: relative;
-                z-index: 1;
-                display: block;
-                color: #33414c;
-                padding: px2rem(12) px2rem(12) px2rem(24);
-                &:before{
-                    content: "";
-                    position: absolute;
-                    right: px2rem(42);
-                    bottom: -1px;
-                    width: px2rem(12);
-                    height: px2rem(18);
-                    background: url(/src/img/require/icon-deco_yb.png) 0 / 100% no-repeat;
-                }
-            }
-            .pic-item_cover{
-                
-            }
-            img{
-                width: 100%;
-                height: px2rem(234);
-                display: block;
-                overflow: hidden;
-            }
-            .pic-item_title{
-                font-size: px2rem(24);
-                font-weight: bold;
-                line-height: px2rem(60);
-            }
-            .pic-item_desc{
-                font-size: px2rem(16);
-                line-height: px2rem(24);
-                height: px2rem(48);
-                overflow: hidden;
-            }
-        }
-        .list-txt{
-            position: relative;
-            padding: px2rem(20) 0 0 px2rem(30);
-            margin-right: px2rem(-30);
-            li{
-                float: left;
-                margin: 0 px2rem(30) px2rem(24) 0;
-            }
-            a{
-                color: #a0893a;
-                font-size: px2rem(20);
-                font-weight: 700;
-                display: block;
-                width: px2rem(260);
-                height: px2rem(78);
-                line-height: px2rem(78);
-                background: url(/src/img/require/set2-bg-txt.png) 0 0 / 100% no-repeat;
-                &:hover{
-                    background: url(/src/img/require/set2-bg-txt2.png) 0 0 / 100% no-repeat;
-                }
-                span{
-                    position: relative;
-                    display: inline-block;
-                    padding: 0 px2rem(20);
-                    &:before{
-                        content: "";
-                        position: absolute;
-                        top: 50%;
-                        right: 0;
-                        margin-top: px2rem(-6);
-                        width: px2rem(10);
-                        height: px2rem(10);
-                        border: px2rem(4) solid #a0893a;
-                        border-left: 0;
-                        border-bottom: 0;
-                        transform: rotate(45deg);
-                    }
-                }
-            }
-        }
-        .box-image{
-            position: relative;
-            width: px2rem(840);
-            margin: px2rem(20) auto 0 auto;
-            cursor: pointer;
-            border: px2rem(8) solid #FFFFFF;
-            &:hover{
-                .icon-play{
-                    transform: rotate(180deg);
-                    opacity: 0.8;
-                }
-            }
-            img{
-                display: block;
-                width: auto;
-                max-width: 100%;
-                overflow: hidden;
-            }
-            .icon-play{
-                position: absolute;
-                top: 50%;
-                left: 50%;
-                margin: px2rem(-50) 0 0 px2rem(-58);
-                width: px2rem(116);
-                height: px2rem(100);
-                transition: all .2s;
-                background: url(/src/img/icon-play.png) center / 100% no-repeat;
-            }
-        }
-    }
-    .re-section3{
-        color: #d6dfff;
-        padding: px2rem(60) 0 px2rem(120);
-        background: url(/src/img/require/bg3.jpg) center 0 / 100% auto no-repeat #686e9e;
-        .box-bd_bgr{
-            background: #7887bd;
-        }
-        .box-bd_cont{
-            &:before{
-                background: #7887bd;
-            }
-        }
-        .list-rarity{
-            position: relative;
-            margin: px2rem(30) px2rem(-30) 0 0;
-            li{
-                float: left;
-                margin-right: px2rem(30);
-            }
-            a{
-                position: relative;
-                display: block;
-                width: px2rem(210);
-                padding: px2rem(8);
-                background: #FFFFFF;
-                transition: all .2s;
-                overflow: hidden;
-                line-height: px2rem(36);
-                &:before{
-                    content: "";
-                    position: absolute;
-                    top: 0;
-                    left: px2rem(-45);
-                    z-index: 2;
-                    width: px2rem(120);
-                    font-size: 12px;
-                    font-weight: 700;
-                    height: px2rem(36);
-                    transform: rotate(-45deg);
-                    color: #FFFFFF;
-                    text-align: center;
-                }
-                &:hover{
-                    opacity: 0.8;
-                }
-                &.icon-rarity1{
-                     &:before{
-                         content: "普通";
-                         background: #909caf;
-                     }
-                }
-                &.icon-rarity2{
-                     &:before{
-                         content: "罕见";
-                         background: #25b460;
-                     }
-                }
-                &.icon-rarity3{
-                     &:before{
-                         content: "稀有";
-                         background: #0faadf;
-                     }
-                }
-                &.icon-rarity4{
-                     &:before{
-                         content: "史诗";
-                         background: #763c97;
-                     }
-                }
-                &.icon-rarity5{
-                     &:before{
-                         content: "传说";
-                         background: #e7893e;
-                     }
-                }
-            }
-            img{
-                display: block;
-                width: 100%;
-                overflow: hidden;
-            }
-        }
-        .list-recommend{
+.page-require {
+	@for $i from 1 through 6 {
+		.re-section#{$i} {
+			.section-hd {
+				background: url(/src/img/require/title#{$i}.png) center 0 /auto 100% no-repeat;
+			}
+		}
+	}
+	.re-section1 {
+		color: #cbe8ff;
+		padding-bottom: px2rem(80);
+		background: url(/src/img/require/bg1.jpg) center 0 / 100% auto no-repeat #68869e;
+		.box-bd_bgr {
+			background: #567186;
+		}
+		.box-bd_cont {
+			&:before {
+				background: #567186;
+			}
+		}
+		.swiper-wrapper {
+			position: relative;
+			margin: px2rem(12) px2rem(60) 0;
+		}
+		.ui-carousel__prev{
+			top: 50%;
+			left: -0.2rem;
+		}
+		.ui-carousel__next{
+			top: 50%;
+			right: -0.2rem;;
+		}
+	}
+	.re-section2 {
+		padding: 0 0 px2rem(10);
+		background: url(/src/img/require/bg2.jpg) center 0 / 100% auto no-repeat #e27541;
+		.box-bd_bgr {
+			background: #ffc600;
+		}
+		.box-bd_cont {
+			&:before {
+				background: #ffc600;
+			}
+		}
+		.ui-carousel__prev{
+			top: 50%;
+			left: -0.2rem;
+		}
+		.ui-carousel__next{
+			top: 50%;
+			right: -0.2rem;;
+		}
+		.list-pic {
+			position: relative;
+			margin: px2rem(20) px2rem(-40) 0 px2rem(80);
+			&.ext-sm {
+				margin: px2rem(20) px2rem(-40) 0 px2rem(20);
+				li {
+					width: px2rem(350);
+					margin: 0 px2rem(40) px2rem(40) 0;
+					&:before {
+						transform: skew(2deg, 0);
+					}
+					&:after {
+						transform: skew(-2deg, 0);
+					}
+				}
+				img {
+					height: px2rem(204);
+				}
+				a {
+					&:before {
+						right: px2rem(81);
+					}
+				}
+			}
+			li {
+				position: relative;
+				float: left;
+				width: px2rem(487);
+				margin: 0 px2rem(40) px2rem(60) 0;
+				&:before, &:after {
+					content: "";
+					position: absolute;
+					top: 0;
+					width: 60%;
+					height: 100%;
+					background: #FFFFFF;
+				}
+				&:before {
+					left: 0;
+					transform: skew(-2deg, 0);
+				}
+				&:after {
+					right: 0;
+					transform: skew(2deg, 0);
+				}
+			}
+			a {
+				position: relative;
+				z-index: 1;
+				display: block;
+				color: #33414c;
+				padding: px2rem(12) px2rem(12) px2rem(24);
+				&:before {
+					content: "";
+					position: absolute;
+					right: px2rem(42);
+					bottom: -1px;
+					width: px2rem(12);
+					height: px2rem(18);
+					background: url(/src/img/require/icon-deco_yb.png) 0 / 100% no-repeat;
+				}
+			}
+			.pic-item_cover {
+
+			}
+			img {
+				width: 100%;
+				height: px2rem(234);
+				display: block;
+				overflow: hidden;
+			}
+			.pic-item_title {
+				font-size: px2rem(24);
+				font-weight: bold;
+				line-height: px2rem(60);
+			}
+			.pic-item_desc {
+				font-size: px2rem(16);
+				line-height: px2rem(24);
+				height: px2rem(48);
+				overflow: hidden;
+			}
+		}
+		.list-txt {
+			position: relative;
+			padding: px2rem(20) 0 0 px2rem(30);
+			margin-right: px2rem(-30);
+			li {
+				float: left;
+				margin: 0 px2rem(30) px2rem(24) 0;
+			}
+			a {
+				color: #a0893a;
+				font-size: px2rem(20);
+				font-weight: 700;
+				display: block;
+				width: px2rem(260);
+				height: px2rem(78);
+				line-height: px2rem(78);
+				background: url(/src/img/require/set2-bg-txt.png) 0 0 / 100% no-repeat;
+				&:hover {
+					background: url(/src/img/require/set2-bg-txt2.png) 0 0 / 100% no-repeat;
+				}
+				span {
+					position: relative;
+					display: inline-block;
+					padding: 0 px2rem(20);
+					&:before {
+						content: "";
+						position: absolute;
+						top: 50%;
+						right: 0;
+						margin-top: px2rem(-6);
+						width: px2rem(10);
+						height: px2rem(10);
+						border: px2rem(4) solid #a0893a;
+						border-left: 0;
+						border-bottom: 0;
+						transform: rotate(45deg);
+					}
+				}
+			}
+		}
+		.box-image {
+			position: relative;
+			width: px2rem(840);
+			height: px2rem(600);
+			margin: px2rem(20) auto 0 auto;
+			cursor: pointer;
+			border: px2rem(8) solid #FFFFFF;
+			&:hover {
+				.icon-play {
+					transform: rotate(180deg);
+					opacity: 0.8;
+				}
+			}
+			img {
+				display: block;
+				width: auto;
+				max-width: 100%;
+				overflow: hidden;
+			}
+			.icon-play {
+				position: absolute;
+				top: 50%;
+				left: 50%;
+				margin: px2rem(-50) 0 0 px2rem(-58);
+				width: px2rem(116);
+				height: px2rem(100);
+				transition: all .2s;
+				background: url(/src/img/icon-play.png) center / 100% no-repeat;
+			}
+		}
+	}
+	.re-section3 {
+		color: #d6dfff;
+		padding: px2rem(60) 0 px2rem(120);
+		background: url(/src/img/require/bg3.jpg) center 0 / 100% auto no-repeat #686e9e;
+		.box-bd_bgr {
+			background: #7887bd;
+		}
+		.box-bd_cont {
+			&:before {
+				background: #7887bd;
+			}
+		}
+		.list-rarity {
+			position: relative;
+			margin: px2rem(30) px2rem(-30) 0 0;
+			li {
+				float: left;
+				margin-right: px2rem(30);
+				height: px2rem(210);
+			}
+			a {
+				position: relative;
+				height: px2rem(210);
+				display: block;
+				width: px2rem(210);
+				padding: px2rem(8);
+				background: #FFFFFF;
+				transition: all .2s;
+				overflow: hidden;
+				line-height: px2rem(36);
+				&:before {
+					content: "";
+					position: absolute;
+					top: px2rem(10);
+					left: px2rem(-30);
+					z-index: 2;
+					width: px2rem(120);
+					font-size: 12px;
+					font-weight: 700;
+					height: px2rem(36);
+					transform: rotate(-45deg);
+					color: #FFFFFF;
+					text-align: center;
+				}
+				&:hover {
+					opacity: 0.8;
+				}
+				&.icon-rarity1 {
+					&:before {
+						content: "普通";
+						background: #909caf;
+					}
+				}
+				&.icon-rarity2 {
+					&:before {
+						content: "罕见";
+						background: #25b460;
+					}
+				}
+				&.icon-rarity3 {
+					&:before {
+						content: "稀有";
+						background: #0faadf;
+					}
+				}
+				&.icon-rarity4 {
+					&:before {
+						content: "史诗";
+						background: #763c97;
+					}
+				}
+				&.icon-rarity5 {
+					&:before {
+						content: "传说";
+						background: #e7893e;
+					}
+				}
+			}
+			img {
+				display: block;
+				width: 100%;
+				overflow: hidden;
+			}
+		}
+		.list-recommend {
 
-        }
-        .recommend-item{
-            position: relative;
-            margin: px2rem(12) auto 0 auto;
-            width: px2rem(970);
-            height: px2rem(180);
-            font-weight: 700;
-            font-size: px2rem(16);
-            line-height: px2rem(26);
-            color: #ffffff;
-            background: url(/src/img/require/set3-bg-recommend.png) 0 0 / 100% 100% no-repeat;
-            .fl{
-                width: px2rem(220);
-                margin: px2rem(30) px2rem(50) 0 px2rem(24);
-            }
-            h3{
-                font-size: px2rem(20);
-                margin-bottom: px2rem(10);
-            }
-            .list-arms{
-                @include clearfix();
-                padding-top: px2rem(30);
-                margin-right: px2rem(-20);
-                li{
-                    float: left;
-                    text-align: center;
-                    margin-right: px2rem(20);
-                }
-                .arms-cover{
-                    width: px2rem(90);
-                    height: px2rem(90);
-                    background: #4f546d;
-                }
-                em{
-                    display: inline-block;
-                    font-weight: 700;
-                    font-size: px2rem(18);
-                    color: #ffffff;
-                    line-height: px2rem(26);
-                    padding: 0 px2rem(6);
-                    border: 1px solid #FFFFFF;
-                    margin-top: px2rem(8);
-                }
-            }
-        }
-    }
-    .re-section4{
-        color: #fdffdd;
-        padding-bottom: px2rem(150);
-        background: url(/src/img/require/bg4.jpg) center 0 / 100% auto no-repeat #b1a476;
-        .box-bd_bgr{
-            background: #96986c;
-        }
-        .box-bd_cont{
-            &:before{
-                background: #96986c;
-            }
-        }
-        .list-recommend{
-            position: relative;
-            margin-right: px2rem(-40);
-            line-height: px2rem(24);
-            font-size: px2rem(16);
-            li{
-                float: left;
-                width: px2rem(356);
-                @include clearfix();
-                margin: px2rem(30) px2rem(40) 0 0;
-            }
-            .item-cover{
-                width: px2rem(128);
-                margin-right: px2rem(14);
-                background: #FFFFFF;
-                padding: px2rem(9);
-            }
-            h3{
-                font-size: px2rem(24);
-                font-weight: 700;
-                line-height: px2rem(30);
-                margin-bottom: px2rem(10);
-            }
-        }
-    }
-    .re-section5{
-        color: #ffefd7;
-        padding-bottom: px2rem(120);
-        background: url(/src/img/require/bg5.jpg) center 0/ 100% auto no-repeat #e17340;
-        .box-bd_bgr{
-            background: #da8100;
-        }
-        .box-bd_cont{
-            &:before{
-                background: #da8100;
-            }
-        }
-        .source-cont{
-            .source-cover{
-                width: px2rem(445);
-                height: px2rem(312);
-                background: #a86300;
-            }
-            .source-score{
-                float: left;
-                margin: px2rem(3) 0 0 px2rem(24);
-                li{
-                    @include clearfix();
-                    line-height: px2rem(27);
-                    margin-bottom: px2rem(24);
-                }
-                label{  
-                    float: left;
-                    font-size: px2rem(18);
-                    font-weight: 700;
-                }
-                .star{
-                    position: relative;
-                    float: left;
-                    width: px2rem(171);
-                    height: px2rem(27);
-                    background: url(/src/img/require/star-init.png) 0 0 / auto 100% no-repeat;
-                    &:before{
-                        content: "";
-                        display: block;
-                        width: 0;
-                        height: 100%;
-                        background: url(/src/img/require/star.png) 0 0 / auto 100% no-repeat;
-                    }
-                }
-                .star1:before{
-                    width: 20%;
-                }
-                .star2:before{
-                    width: 40%;
-                }
-                .star3:before{
-                    width: 60%;
-                }
-                .star4:before{
-                    width: 80%;
-                }
-                .star5:before{
-                    width: 100%;
-                }
-            }
-            p{
-                font-size: px2rem(16);
-                margin-top: px2rem(12);
-            }
-        }
-    }
-    .re-section6{
-        color: #d6dfff;
-        padding: px2rem(70) 0 px2rem(190);
-        background: url(/src/img/require/bg6.jpg) center 0/ 100% auto no-repeat #696f9f;
-        .box-bd_bgr{
-            background: #7887bd;
-        }
-        .box-bd_cont{
-            &:before{
-                background: #7887bd;
-            }
-        }
-    }
-    .re-list-show{
-        position: relative;
-        margin: 0 px2rem(-30) 0 px2rem(36);
-        &.ext-list{
-            .show-cover{
-                background: url(/src/img/require/bg-show2.png) center / 100% auto no-repeat;
-            }
-        }
-        li{
-            float: left;
-            width: px2rem(200);
-            margin: px2rem(36) px2rem(30) px2rem(36) 0;
-        }
-        a{
-            display: block;
-            &:hover{
-                .icon-play{
-                    transform: rotate(180deg);
-                    opacity: 0.8;
-                }
-            }
-        }
-        .show-cover{
-            position: relative;
-            height: px2rem(248);
-            line-height: px2rem(248);
-            background: url(/src/img/require/bg-show.png) center / 100% auto no-repeat;
-        }
-        h4{
-            position: absolute;
-            top: px2rem(20);
-            left: px2rem(-20);
-            background: #fae15c;
-            line-height: px2rem(42);
-            height: px2rem(36);
-            padding: 0 px2rem(20);
-            color: #333333;
-            font-weight: 700;
-            &:before{
-                content: "";
-                position: absolute;
-                left: 0;
-                bottom: px2rem(-3);
-                width: 100%;
-                height: 40%;
-                background: #fae15c;
-                transform: skew(0,-2deg);
-            }
-        }
-        span{
-            position: relative;
-        }
-        img{
-            position: relative;
-            margin-left: -10%;
-            width: 120%;
-            display: inline-block;
-            vertical-align: middle;
-        }
-        .icon-play{
-            position: absolute;
-            right: px2rem(20);
-            bottom: px2rem(30);
-            width: px2rem(48);
-            height: px2rem(40);
-            transition: all .2s;
-            background: url(/src/img/icon-play.png) 0 / 100% no-repeat;
-        }
-        .show-desc{
-            font-size: px2rem(14);
-            line-height: px2rem(20);
-            margin: px2rem(10) px2rem(8) 0;
-            color: #ffffff;
-        }
-    }
-    .re-view-wrap{
-            position: relative;
-            z-index: 1;
-            width: px2rem(1101);
-            margin: px2rem(12) px2rem(42) 0;
-            .view-wrap-cont{
-                position: relative;
-            }
-            &:before,&:after{
-                content: "";
-                position: absolute;
-                top: 0;
-                width: 60%;
-                height: 100%;
-                background: #FFFFFF;
-            }
-            &:before{
-                left: px2rem(-12);
-                transform: skew(-1deg,0);
-            }
-            &:after{
-                right: px2rem(-12);
-                transform: skew(1deg,0);
-            }
-            a{
-                position: relative;
-                z-index: 2;
-                display: block;
-                color: #33414c;
-                padding: px2rem(9) px2rem(0) px2rem(24);
-                &:before{
-                    content: "";
-                    position: absolute;
-                    right: px2rem(54);
-                    bottom: 0;
-                    width: px2rem(24);
-                    height: px2rem(21);
-                    background: url(/src/img/require/icon-deco_bb.png) 0 / 100% no-repeat;
-                }
-            }
-            .pic-item_cover{
-                @include clearfix();
-                &.cover-num2{
-                    padding-top: px2rem(18);
-                    img{
-                        float: left;
-                        width: 46%;
-                        margin: 0 2%;
-                    }
-                }
-            }
-            .pic-item_title{
-                font-size: px2rem(24);
-                font-weight: bold;
-                line-height: px2rem(60);
-            }
-            .pic-item_desc{
-                font-size: px2rem(18);
-                line-height: px2rem(36);
-                height: px2rem(108);
-            }
-        }
+		}
+		.recommend-item {
+			position: relative;
+			margin: px2rem(12) auto 0 auto;
+			width: px2rem(970);
+			height: px2rem(180);
+			font-weight: 700;
+			font-size: px2rem(16);
+			line-height: px2rem(26);
+			color: #ffffff;
+			background: url(/src/img/require/set3-bg-recommend.png) 0 0 / 100% 100% no-repeat;
+			.fl {
+				width: px2rem(220);
+				margin: px2rem(30) px2rem(50) 0 px2rem(24);
+			}
+			h3 {
+				font-size: px2rem(20);
+				margin-bottom: px2rem(10);
+			}
+			.list-arms {
+				@include clearfix();
+				padding-top: px2rem(30);
+				margin-right: px2rem(-20);
+				li {
+					float: left;
+					text-align: center;
+					margin-right: px2rem(20);
+				}
+				.arms-cover {
+					width: px2rem(90);
+					height: px2rem(90);
+					background: #4f546d;
+				}
+				em {
+					display: inline-block;
+					font-weight: 700;
+					font-size: px2rem(18);
+					color: #ffffff;
+					line-height: px2rem(26);
+					padding: 0 px2rem(6);
+					border: 1px solid #FFFFFF;
+					margin-top: px2rem(8);
+				}
+			}
+		}
+	}
+	.re-section4 {
+		color: #fdffdd;
+		padding-bottom: px2rem(150);
+		background: url(/src/img/require/bg4.jpg) center 0 / 100% auto no-repeat #b1a476;
+		.box-bd_bgr {
+			background: #96986c;
+		}
+		.box-bd_cont {
+			&:before {
+				background: #96986c;
+			}
+		}
+		.list-recommend {
+			position: relative;
+			margin-right: px2rem(-40);
+			line-height: px2rem(24);
+			font-size: px2rem(16);
+			li {
+				float: left;
+				width: px2rem(356);
+				@include clearfix();
+				margin: px2rem(30) px2rem(40) 0 0;
+			}
+			.item-cover {
+				height: px2rem(128);
+				width: px2rem(128);
+				margin-right: px2rem(14);
+				background: #FFFFFF;
+				padding: px2rem(9);
+				border: 3px solid #fff;
+			}
+			h3 {
+				font-size: px2rem(24);
+				font-weight: 700;
+				line-height: px2rem(30);
+				margin-bottom: px2rem(10);
+			}
+		}
+	}
+	.re-section5 {
+		color: #ffefd7;
+		padding-bottom: px2rem(120);
+		background: url(/src/img/require/bg5.jpg) center 0/ 100% auto no-repeat #e17340;
+		.box-bd_bgr {
+			background: #da8100;
+		}
+		.box-bd_cont {
+			&:before {
+				background: #da8100;
+			}
+		}
+		.ui-carousel__prev{
+			top: 50%;
+			left: -0.2rem;
+		}
+		.ui-carousel__next{
+			top: 50%;
+			right: -0.2rem;
+		}
+		.source-cont {
+			.source-cover {
+				width: px2rem(445);
+				height: px2rem(312);
+				background: #a86300;
+			}
+			.source-score {
+				float: left;
+				margin: px2rem(3) 0 0 px2rem(24);
+				li {
+					@include clearfix();
+					line-height: px2rem(27);
+					margin-bottom: px2rem(24);
+				}
+				label {
+					float: left;
+					font-size: px2rem(18);
+					font-weight: 700;
+				}
+				.star {
+					position: relative;
+					float: left;
+					width: px2rem(171);
+					height: px2rem(27);
+					background: url(/src/img/require/star-init.png) 0 0 / auto 100% no-repeat;
+					&:before {
+						content: "";
+						display: block;
+						width: 0;
+						height: 100%;
+						background: url(/src/img/require/star.png) 0 0 / auto 100% no-repeat;
+					}
+				}
+				.star1:before {
+					width: 20%;
+				}
+				.star2:before {
+					width: 40%;
+				}
+				.star3:before {
+					width: 60%;
+				}
+				.star4:before {
+					width: 80%;
+				}
+				.star5:before {
+					width: 100%;
+				}
+			}
+			p {
+				font-size: px2rem(16);
+				margin-top: px2rem(12);
+			}
+		}
+	}
+	.re-section6 {
+		color: #d6dfff;
+		padding: px2rem(70) 0 px2rem(190);
+		background: url(/src/img/require/bg6.jpg) center 0/ 100% auto no-repeat #696f9f;
+		.box-bd_bgr {
+			background: #7887bd;
+		}
+		.box-bd_cont {
+			&:before {
+				background: #7887bd;
+			}
+		}
+	}
+	.re-list-show {
+		position: relative;
+		margin: 0 px2rem(-30) 0 px2rem(36);
+		&.ext-list {
+			.show-cover {
+				background: url(/src/img/require/bg-show2.png) center / 100% auto no-repeat;
+			}
+		}
+		li {
+			float: left;
+			width: px2rem(200);
+			margin: px2rem(36) px2rem(30) px2rem(36) 0;
+		}
+		a {
+			display: block;
+			&:hover {
+				.icon-play {
+					transform: rotate(180deg);
+					opacity: 0.8;
+				}
+			}
+		}
+		.show-cover {
+			position: relative;
+			height: px2rem(248);
+			line-height: px2rem(248);
+			background: url(/src/img/require/bg-show.png) center / 100% auto no-repeat;
+		}
+		h4 {
+			position: absolute;
+			top: px2rem(20);
+			left: px2rem(-20);
+			background: #fae15c;
+			line-height: px2rem(42);
+			height: px2rem(36);
+			padding: 0 px2rem(20);
+			color: #333333;
+			font-weight: 700;
+			&:before {
+				content: "";
+				position: absolute;
+				left: 0;
+				bottom: px2rem(-3);
+				width: 100%;
+				height: 40%;
+				background: #fae15c;
+				transform: skew(0, -2deg);
+			}
+		}
+		span {
+			position: relative;
+		}
+		img {
+			position: relative;
+			margin-left: -10%;
+			width: 120%;
+			display: inline-block;
+			vertical-align: middle;
+		}
+		.icon-play {
+			position: absolute;
+			right: px2rem(20);
+			bottom: px2rem(30);
+			width: px2rem(48);
+			height: px2rem(40);
+			transition: all .2s;
+			background: url(/src/img/icon-play.png) 0 / 100% no-repeat;
+		}
+		.show-desc {
+			font-size: px2rem(14);
+			line-height: px2rem(20);
+			margin: px2rem(10) px2rem(8) 0;
+			color: #ffffff;
+		}
+	}
+	.re-view-wrap {
+		position: relative;
+		z-index: 1;
+		width: px2rem(1101);
+		margin: px2rem(12) px2rem(42) 0;
+		.view-wrap-cont {
+			position: relative;
+		}
+		&:before, &:after {
+			content: "";
+			position: absolute;
+			top: 0;
+			width: 60%;
+			height: 100%;
+			background: #FFFFFF;
+		}
+		&:before {
+			left: px2rem(-12);
+			transform: skew(-1deg, 0);
+		}
+		&:after {
+			right: px2rem(-12);
+			transform: skew(1deg, 0);
+		}
+		a {
+			position: relative;
+			z-index: 2;
+			display: block;
+			color: #33414c;
+			padding: px2rem(9) px2rem(0) px2rem(24);
+			&:before {
+				content: "";
+				position: absolute;
+				right: px2rem(54);
+				bottom: 0;
+				width: px2rem(24);
+				height: px2rem(21);
+				background: url(/src/img/require/icon-deco_bb.png) 0 / 100% no-repeat;
+			}
+		}
+		.pic-item_cover {
+			@include clearfix();
+			&.cover-num2 {
+				padding-top: px2rem(18);
+				img {
+					float: left;
+					width: 46%;
+					margin: 0 2%;
+				}
+			}
+		}
+		.pic-item_title {
+			font-size: px2rem(24);
+			font-weight: bold;
+			line-height: px2rem(60);
+		}
+		.pic-item_desc {
+			font-size: px2rem(18);
+			line-height: px2rem(36);
+			height: px2rem(108);
+		}
+	}
 }
 
 //进阶内容
-.page-advanced{
-    @for $i from 1 through 3{
-        .ad-section#{$i}{
-            .section-hd{
-                background: url(/src/img/advanced/title#{$i}.png) center 0 /auto 100% no-repeat;
-            }
-        }
-    }
-    .ad-section1{
-        color: #cbe8ff;
-        padding: px2rem(75) 0 px2rem(93);
-        background: url(/src/img/advanced/bg1.jpg) center 0 / 100% auto no-repeat #68869e;
-        .box-bd_bgr{
-            background: #567186;
-        }
-        .box-bd_cont{
-            &:before{
-                background: #567186;
-            }
-        }
-        .deco-cont{
-            color: #ffffff;
-            padding: px2rem(40) px2rem(32) px2rem(24) px2rem(36);
-            text-align: justify;
-        }
-        .deco-cover{
-            width: px2rem(360);
-            margin-right: px2rem(21);
-        }
-        .shop-wrap{
-            position: relative;
-            margin: px2rem(30) px2rem(-60) 0 px2rem(51);
-        }
-        .shop-box{
-            float: left;
-            width: px2rem(507);
-            margin-right: px2rem(60);
-            &.ext-shop{
-                li{
-                    width: px2rem(135);
-                }
-            }
-        }
-        .shop-hd{
-            position: relative;
-            z-index: 2;
-            width: px2rem(210);
-            text-align: center;
-            border: px2rem(6) solid #FFFFFF;
-            background: #334350;
-            transform: skew(0,-1deg);
-            font-size: px2rem(21);
-            font-weight: 700;
-            line-height: px2rem(54);
-            color: #FFFFFF;
-            span{
-                position: relative;
-                display: block;
-            }
-            &:before{
-                content: "";
-                position: absolute;
-                top: 0;
-                left: 0;
-                width: 100%;
-                height: 150%;
-                background: #334350;
-            }
-        }
-        .shop-bd{
-            position: relative;
-            &:before,&:after{
-                content: "";
-                position: absolute;
-                z-index: 1;
-                width: 100%;
-                height: 60%;
-                border: px2rem(6) solid #FFFFFF;
-                background: #334350;
-            }
-            &:before{
-                top: px2rem(-6);
-                border-bottom: 0;
-                transform: skew(0,-1deg);
-            }
-            &:after{
-                border-top: 0;
-                bottom: px2rem(-6);
-                transform: skew(0,1deg);
-            }
-        }
-    }
-    .ad-section2{
-        color: #d6dfff;
-        padding: px2rem(72) 0 px2rem(141);
-        background: url(/src/img/advanced/bg2.jpg) center 0 / 100% auto no-repeat #777ead;
-        .box-bd_bgr{
-            background: #7887bd;
-        }
-        .box-bd_cont{
-            &:before{
-                background: #7887bd;
-            }
-        }
-        .pic-map{
-            position: relative;
-            width: px2rem(675);
-            margin: px2rem(24) auto 0;
-        }
-    }
-    .ad-section3{
-        color: #fdffdd;
-        padding: px2rem(72) 0 px2rem(51);
-        background: url(/src/img/advanced/bg3.jpg) center 0 / 100% auto no-repeat #b0a376;
-        .box-bd_bgr{
-            background: #96986c;
-        }
-        .box-bd_cont{
-            &:before{
-                background: #96986c;
-            }
-        }
-        .pic{
-            width: px2rem(927);
-            margin: px2rem(48) auto 0;
-            background: #707151;
-            &.pic_sm{
-                width: px2rem(906);
-            }
-        }
-        .list-task{
-            position: relative;
-            margin: px2rem(60) px2rem(102) 0 px2rem(102);
-            li{
-                position: relative;
-                margin-bottom: px2rem(84);
-                padding: px2rem(24) px2rem(105) px2rem(69) px2rem(96);
-                &:before{
-                    content: "";
-                    position: absolute;
-                    top: px2rem(114);
-                    right: 0;
-                    z-index: 2;
-                    width: px2rem(27);
-                    height: px2rem(36);
-                    background: url(/src/img/advanced/icon-deco_gr.jpg) 0 / 100% no-repeat;
-                }
-            }
-            .task-cont{
-                position: relative;
-                font-size: px2rem(16);
-                line-height: px2rem(24);
-                color: #ffffff;
-            }
-            h3{
-                font-size: px2rem(24);
-                font-weight: 700;
-                text-align: center;
-            }
-            p{
-                margin: px2rem(20) 0;
-            }
-            .cont-skew_top,.cont-skew_bottom,.cont-skew_left{
-                position: absolute;
-                top: 0;
-                left: 0;
-                width: 100%;
-                height: 100%;
-                background: #b9bc82;
-            }
-            .cont-skew_top{
-                top: px2rem(9);
-                transform: skew(0,1deg);
-                &:before{
-                    content: "";
-                    position: absolute;
-                    bottom: 0;
-                    left: px2rem(45);
-                    z-index: 2;
-                    width: px2rem(39);
-                    height: px2rem(24);
-                    background: url(/src/img/advanced/icon-deco_gb.jpg) 0 / 100% no-repeat;
-                }
-            }
-            .cont-skew_bottom{
-                height: 50%;
-                top: px2rem(-9);
-                transform: skew(0,-1deg);
-            }
-            .cont-skew_left{
-                left: px2rem(-9);
-                transform: skew(-1deg, 0);
-            }
-        }
-    }
+.page-advanced {
+	@for $i from 1 through 3 {
+		.ad-section#{$i} {
+			.section-hd {
+				background: url(/src/img/advanced/title#{$i}.png) center 0 /auto 100% no-repeat;
+			}
+		}
+	}
+	.ad-section1 {
+		color: #cbe8ff;
+		padding: px2rem(75) 0 px2rem(93);
+		background: url(/src/img/advanced/bg1.jpg) center 0 / 100% auto no-repeat #68869e;
+		.box-bd_bgr {
+			background: #567186;
+		}
+		.box-bd_cont {
+			&:before {
+				background: #567186;
+			}
+		}
+		.deco-cont {
+			color: #ffffff;
+			padding: px2rem(40) px2rem(32) px2rem(24) px2rem(36);
+			text-align: justify;
+		}
+		.deco-cover {
+			width: px2rem(360);
+			margin-right: px2rem(21);
+		}
+		.shop-wrap {
+			position: relative;
+			margin: px2rem(30) px2rem(-60) 0 px2rem(51);
+		}
+		.shop-box {
+			float: left;
+			width: px2rem(507);
+			margin-right: px2rem(60);
+			&.ext-shop {
+				li {
+					width: px2rem(135);
+				}
+			}
+		}
+		.shop-hd {
+			position: relative;
+			z-index: 2;
+			width: px2rem(210);
+			text-align: center;
+			border: px2rem(6) solid #FFFFFF;
+			background: #334350;
+			transform: skew(0, -1deg);
+			font-size: px2rem(21);
+			font-weight: 700;
+			line-height: px2rem(54);
+			color: #FFFFFF;
+			span {
+				position: relative;
+				display: block;
+			}
+			&:before {
+				content: "";
+				position: absolute;
+				top: 0;
+				left: 0;
+				width: 100%;
+				height: 150%;
+				background: #334350;
+			}
+		}
+		.shop-bd {
+			position: relative;
+			&:before, &:after {
+				content: "";
+				position: absolute;
+				z-index: 1;
+				width: 100%;
+				height: 60%;
+				border: px2rem(6) solid #FFFFFF;
+				background: #334350;
+			}
+			&:before {
+				top: px2rem(-6);
+				border-bottom: 0;
+				transform: skew(0, -1deg);
+			}
+			&:after {
+				border-top: 0;
+				bottom: px2rem(-6);
+				transform: skew(0, 1deg);
+			}
+		}
+	}
+	.ad-section2 {
+		color: #d6dfff;
+		padding: px2rem(72) 0 px2rem(141);
+		background: url(/src/img/advanced/bg2.jpg) center 0 / 100% auto no-repeat #777ead;
+		.box-bd_bgr {
+			background: #7887bd;
+		}
+		.box-bd_cont {
+			&:before {
+				background: #7887bd;
+			}
+		}
+		.pic-map {
+			position: relative;
+			width: px2rem(675);
+			margin: px2rem(24) auto 0;
+		}
+	}
+	.ad-section3 {
+		color: #fdffdd;
+		padding: px2rem(72) 0 px2rem(51);
+		background: url(/src/img/advanced/bg3.jpg) center 0 / 100% auto no-repeat #b0a376;
+		.box-bd_bgr {
+			background: #96986c;
+		}
+		.box-bd_cont {
+			&:before {
+				background: #96986c;
+			}
+		}
+		.pic {
+			width: px2rem(927);
+			margin: px2rem(48) auto 0;
+			background: #707151;
+			&.pic_sm {
+				width: px2rem(906);
+			}
+		}
+		.list-task {
+			position: relative;
+			margin: px2rem(60) px2rem(102) 0 px2rem(102);
+			li {
+				position: relative;
+				margin-bottom: px2rem(84);
+				padding: px2rem(24) px2rem(105) px2rem(69) px2rem(96);
+				&:before {
+					content: "";
+					position: absolute;
+					top: px2rem(114);
+					right: 0;
+					z-index: 2;
+					width: px2rem(27);
+					height: px2rem(36);
+					background: url(/src/img/advanced/icon-deco_gr.jpg) 0 / 100% no-repeat;
+				}
+			}
+			.task-cont {
+				position: relative;
+				font-size: px2rem(16);
+				line-height: px2rem(24);
+				color: #ffffff;
+			}
+			h3 {
+				font-size: px2rem(24);
+				font-weight: 700;
+				text-align: center;
+			}
+			p {
+				margin: px2rem(20) 0;
+			}
+			.cont-skew_top, .cont-skew_bottom, .cont-skew_left {
+				position: absolute;
+				top: 0;
+				left: 0;
+				width: 100%;
+				height: 100%;
+				background: #b9bc82;
+			}
+			.cont-skew_top {
+				top: px2rem(9);
+				transform: skew(0, 1deg);
+				&:before {
+					content: "";
+					position: absolute;
+					bottom: 0;
+					left: px2rem(45);
+					z-index: 2;
+					width: px2rem(39);
+					height: px2rem(24);
+					background: url(/src/img/advanced/icon-deco_gb.jpg) 0 / 100% no-repeat;
+				}
+			}
+			.cont-skew_bottom {
+				height: 50%;
+				top: px2rem(-9);
+				transform: skew(0, -1deg);
+			}
+			.cont-skew_left {
+				left: px2rem(-9);
+				transform: skew(-1deg, 0);
+			}
+		}
+	}
 }
 
 //常见问题
-.page-fad{
-    .fd-section1{
-        color: #cbe8ff;
-        padding: px2rem(75) 0 px2rem(93);
-        background: url(/src/img/advanced/bg1.jpg) center 0 / 100% auto no-repeat #68869e;
-        .box-bd_bgr{
-            background: #567186;
-        }
-        .box-bd_cont{
-            &:before{
-                background: #567186;
-            }
-        }
-        .list-problem{
-            position: relative;
-            margin-bottom: px2rem(-21);
-            li{
-                margin-bottom: px2rem(21);
-            }
-            h4{
-                font-weight: bold;
-            }
-            p{
-                padding-left: px2rem(36);
-            }
-        }
-    }
+.page-fad {
+	.fd-section1 {
+		color: #cbe8ff;
+		padding: px2rem(75) 0 px2rem(93);
+		background: url(/src/img/advanced/bg1.jpg) center 0 / 100% auto no-repeat #68869e;
+		.box-bd_bgr {
+			background: #567186;
+		}
+		.box-bd_cont {
+			&:before {
+				background: #567186;
+			}
+		}
+		.list-problem {
+			position: relative;
+			margin-bottom: px2rem(-21);
+			li {
+				margin-bottom: px2rem(21);
+			}
+			h4 {
+				font-weight: bold;
+			}
+			p {
+				padding-left: px2rem(36);
+			}
+		}
+	}
 }
 
 //轮播图
-.ui-carousel{
-    position: relative;
+.ui-carousel {
+	position: relative;
 }
-.ui-carousel__scroller{
-    position: relative;
-    overflow: hidden;
+
+.ui-carousel__scroller {
+	position: relative;
+	overflow: hidden;
 }
-.ui-carousel__item{
-    float: left;
+
+.ui-carousel__item {
+	float: left;
 }
-.ui-carousel__content{
-    @include clearfix();
-    width: 300000px;
+
+.ui-carousel__content {
+	@include clearfix();
+	width: 300000px;
 }
-.ui-carousel__prev,.ui-carousel__next{
-    position: absolute;
-    top: px2rem(240);
-    z-index: 3;
-    width: px2rem(39);
-    height: px2rem(57);
-    cursor: pointer;
+
+.ui-carousel__prev, .ui-carousel__next {
+	position: absolute;
+	top: px2rem(240);
+	z-index: 3;
+	width: px2rem(39);
+	height: px2rem(57);
+	cursor: pointer;
 }
-.ui-carousel__prev{
-    left: px2rem(-9);
-    background: url(/src/img/icon-prev.png) 0 0 / 100% 100% no-repeat;
-    &:hover{
-        background: url(/src/img/icon-prev_hover.png) 0 0 / 100% 100% no-repeat;
-    }
+
+.ui-carousel__prev {
+	left: px2rem(-9);
+	background: url(/src/img/icon-prev.png) 0 0 / 100% 100% no-repeat;
+	&:hover {
+		background: url(/src/img/icon-prev_hover.png) 0 0 / 100% 100% no-repeat;
+	}
 }
 
-.ui-carousel__next{
-    right: px2rem(-9);
-    background: url(/src/img/icon-next.png) 0 0 / 100% 100% no-repeat;
-    &:hover{
-        background: url(/src/img/icon-next_hover.png) 0 0 / 100% 100% no-repeat;
-    }
+.ui-carousel__next {
+	right: px2rem(-9);
+	background: url(/src/img/icon-next.png) 0 0 / 100% 100% no-repeat;
+	&:hover {
+		background: url(/src/img/icon-next_hover.png) 0 0 / 100% 100% no-repeat;
+	}
 }
 
 //-------animate---------
-@keyframes sidebaFloat{
-    0%{
-        transform: translate3d(0,px2rem(-40),0)
-    }
-    100%{
-        transform: translate3d(0,px2rem(20),0)
-    }
+@keyframes sidebaFloat {
+	0% {
+		transform: translate3d(0, px2rem(-40), 0)
+	}
+	100% {
+		transform: translate3d(0, px2rem(20), 0)
+	}
 }
 
 //H5适配
 @media screen and (max-width: 800px) {
-    .zt-mod-header,.zt-sidebar-zt,.zt-sidebar-tool{
-        display: none;
-    }
-    .zt-inner{
-        width: 100%;
-        box-sizing: border-box;
-    }
-    .zt-mod-nav{
-        li{
-            &:last-child{
-                display: none;
-            }
-        }
-        a{
-            width: wpx2rem(312);
-            height: wpx2rem(180);
-        }
-    }
-    .zt-link-more{
-        &.ext-about{
-            font-size: wpx2rem(48);
-            width: wpx2rem(432);
-            height: wpx2rem(135);
-            line-height: wpx2rem(150);
-        }
-    }
-    .page-about{
-        .ab-section{
-            .section-cont{
-                float: initial;
-                width: auto;
-                margin: 0 px2rem(36) 0 px2rem(24);
-                h2{
-                    font-size: wpx2rem(51);
-                }
-                p{
-                    margin-top: wpx2rem(30);
-                    font-size: wpx2rem(27);
-                    line-height: wpx2rem(48);
-                }
-                .cont-opr{
-                    margin: wpx2rem(30) wpx2rem(27) 0;
-                    width: auto;
-                    height: wpx2rem(345);
-                    ul{
-                        font-size: wpx2rem(24);
-                        line-height: wpx2rem(48);
-                        padding: 0 wpx2rem(60) 0 wpx2rem(69);
-                    }
-                    h3{
-                        font-size: wpx2rem(39);
-                        height: wpx2rem(60);
-                        line-height: wpx2rem(72);
-                        padding-left: wpx2rem(78);
-                        margin: wpx2rem(36) 0 0 wpx2rem(30);
-                    }
-                    i{
-                        font-size: wpx2rem(15);
-                        height: wpx2rem(27);
-                        line-height: wpx2rem(27);
-                        min-width: wpx2rem(27);
-                        margin-right: wpx2rem(15);
-                        &.icon-mouse{
-                            height: wpx2rem(39);
-                        }
-                    }
-                }
-            }
-            .section-image{
-                float: initial;
-                width: wpx2rem(598);
-                margin: 0 0 wpx2rem(72) wpx2rem(30);
-                &.ext-video{
-                    width: wpx2rem(390);
-                }
-                .icon-play{
-                    width: wpx2rem(114);
-                    height: wpx2rem(99);
-                    margin: wpx2rem(-49) 0 0 wpx2rem(-57);
-                }
-            }
-        }
-        .ab-section1{
-            padding: wpx2rem(570) 0 px2rem(48) 0;
-            height: auto;
-            background-image: url(/src/img/wap/about/bg1.jpg);
-        }
-        .ab-section2{
-            padding: wpx2rem(570) 0 px2rem(48) 0;
-            height: auto;
-            background-image: url(/src/img/wap/about/bg2.jpg);
-        }
-        .ab-section3{
-            padding: wpx2rem(69) 0 px2rem(48) 0;
-            height: auto;
-            background-image: url(/src/img/wap/about/bg3.jpg);
-        }
-        .ab-section4{
-            position: relative;
-            padding: wpx2rem(450) 0 px2rem(84) 0;
-            height: auto;
-            background-image: url(/src/img/wap/about/bg4.jpg);
-            .section-image{
-                position: absolute;
-                top: wpx2rem(132);
-                right: wpx2rem(15);
-            }
-        }
-        .ab-section5{
-            padding: wpx2rem(54) 0 px2rem(48) 0;
-            height: auto;
-            background-image: none;
-            background-color: #4b566a;
-            .section-cont{
-                h2{
-                    text-align: center;
-                }
-            }
-        }
-        .ab-section6{
-            position: relative;
-            padding: wpx2rem(450) 0 px2rem(48) 0;
-            height: auto;
-            background-image: url(/src/img/wap/about/bg6.jpg);
-            .section-cont{
-                h2{
-                    text-align: right;
-                }
-            }
-            .section-image{
-                position: absolute;
-                top: wpx2rem(48);
-                right: wpx2rem(48);
-            }
-        }
-        .ab-section7{
-            padding: wpx2rem(64) 0 px2rem(180) 0;
-            height: auto;
-            background-image: url(/src/img/wap/about/bg7.jpg);
-        }
-    }
+	.zt-mod-header, .zt-sidebar-zt, .zt-sidebar-tool {
+		display: none;
+	}
+	.zt-inner {
+		width: 100%;
+		box-sizing: border-box;
+	}
+	.zt-mod-nav {
+		li {
+			&:last-child {
+				display: none;
+			}
+		}
+		a {
+			width: wpx2rem(312);
+			height: wpx2rem(180);
+		}
+	}
+	.zt-link-more {
+		&.ext-about {
+			font-size: wpx2rem(48);
+			width: wpx2rem(432);
+			height: wpx2rem(135);
+			line-height: wpx2rem(150);
+		}
+	}
+	.page-about {
+		.ab-section {
+			.section-cont {
+				float: initial;
+				width: auto;
+				margin: 0 px2rem(36) 0 px2rem(24);
+				h2 {
+					font-size: wpx2rem(51);
+				}
+				p {
+					margin-top: wpx2rem(30);
+					font-size: wpx2rem(27);
+					line-height: wpx2rem(48);
+				}
+				.cont-opr {
+					margin: wpx2rem(30) wpx2rem(27) 0;
+					width: auto;
+					height: wpx2rem(345);
+					ul {
+						font-size: wpx2rem(24);
+						line-height: wpx2rem(48);
+						padding: 0 wpx2rem(60) 0 wpx2rem(69);
+					}
+					h3 {
+						font-size: wpx2rem(39);
+						height: wpx2rem(60);
+						line-height: wpx2rem(72);
+						padding-left: wpx2rem(78);
+						margin: wpx2rem(36) 0 0 wpx2rem(30);
+					}
+					i {
+						font-size: wpx2rem(15);
+						height: wpx2rem(27);
+						line-height: wpx2rem(27);
+						min-width: wpx2rem(27);
+						margin-right: wpx2rem(15);
+						&.icon-mouse {
+							height: wpx2rem(39);
+						}
+					}
+				}
+			}
+			.section-image {
+				float: initial;
+				width: wpx2rem(598);
+				margin: 0 0 wpx2rem(72) wpx2rem(30);
+				&.ext-video {
+					width: wpx2rem(390);
+				}
+				.icon-play {
+					width: wpx2rem(114);
+					height: wpx2rem(99);
+					margin: wpx2rem(-49) 0 0 wpx2rem(-57);
+				}
+			}
+		}
+		.ab-section1 {
+			padding: wpx2rem(570) 0 px2rem(48) 0;
+			height: auto;
+			background-image: url(/src/img/wap/about/bg1.jpg);
+		}
+		.ab-section2 {
+			padding: wpx2rem(570) 0 px2rem(48) 0;
+			height: auto;
+			background-image: url(/src/img/wap/about/bg2.jpg);
+		}
+		.ab-section3 {
+			padding: wpx2rem(69) 0 px2rem(48) 0;
+			height: auto;
+			background-image: url(/src/img/wap/about/bg3.jpg);
+		}
+		.ab-section4 {
+			position: relative;
+			padding: wpx2rem(450) 0 px2rem(84) 0;
+			height: auto;
+			background-image: url(/src/img/wap/about/bg4.jpg);
+			.section-image {
+				position: absolute;
+				top: wpx2rem(132);
+				right: wpx2rem(15);
+			}
+		}
+		.ab-section5 {
+			padding: wpx2rem(54) 0 px2rem(48) 0;
+			height: auto;
+			background-image: none;
+			background-color: #4b566a;
+			.section-cont {
+				h2 {
+					text-align: center;
+				}
+			}
+		}
+		.ab-section6 {
+			position: relative;
+			padding: wpx2rem(450) 0 px2rem(48) 0;
+			height: auto;
+			background-image: url(/src/img/wap/about/bg6.jpg);
+			.section-cont {
+				h2 {
+					text-align: right;
+				}
+			}
+			.section-image {
+				position: absolute;
+				top: wpx2rem(48);
+				right: wpx2rem(48);
+			}
+		}
+		.ab-section7 {
+			padding: wpx2rem(64) 0 px2rem(180) 0;
+			height: auto;
+			background-image: url(/src/img/wap/about/bg7.jpg);
+		}
+	}
+	// 头部图片及头部导航
+	.zt-mod-primary{
+		img{
+			width: 100%;
+			height: px2rem(750);
+		}
+	}
+	.zt-mod-nav{
+		li{
+			margin: 0.12rem;
+			h2{
+				font-size: 0.9rem;
+				font-weight: bold;
+				line-height: 1.1;
+				transform: translate3d(px2rem(90), px2rem(70), 0);
+			}
+			p{
+				font-size: 0.6rem;
+				font-weight: bold;
+				line-height: 1.1;
+				transform: translate3d(px2rem(90), px2rem(90), 0);
+			}
+			.bg-nav{
+				&::before{
+					width: 100%;
+				}
+			}
+		}
+	}
+	// 适配公共类
+	.icon-arrow{
+		background-image: url("src/img/require/text-icon-arrow.png");
+		width: px2rem(70);
+		height: px2rem(100);
+		background-size: contain;
+		display: block;
+		position: absolute;
+		right: px2rem(50);
+		top: 50%;
+		transform: translateY(-40%);
+	}
+	.page-require .re-section .section-hd {
+		height: 3rem;
+	}
+	.zt-box {
+		margin: 0 3px;
+		.box-hd {
+			margin-left: px2rem(60);
+			padding: 0 10px;
+			&::after, &::before {
+				height: 230%;
+			}
+			span {
+				font-size: 0.6rem;
+				line-height: 2;
+			}
+		}
+		.box-bd {
+			.box-bd_cont {
+				border: 0.15rem solid #FFFFFF;
+				padding: 0.7666rem 1rem;
+				p {
+					font-size: 0.6rem;
+					line-height: 1.5;
+					margin-top: 5px;
+				}
+				margin-bottom: px2rem(100);
+			}
+			.ui-carousel {
+				margin-top: px2rem(50);
+				height: px2rem(1400);
+				min-height: px2rem(1400);
+				.banner-wrap {
+					height: 100%;
+				}
+				.ui-carousel__content {
+					height: 100%;
+				}
+				.ui-carousel__item {
+					height: 100%;
+					width: 13.5rem;
+					background-color: #fff;
+					padding: 5px;
+					box-sizing: border-box;
+					.re-view-wrap {
+						margin: 0;
+						width: 100%;
+					}
+					.pic-item_pic {
+						width: 100%;
+						height: px2rem(800);
+						position: relative;
+						z-index: 9;
+						background-size: cover;
+						&.pic_1{
+							background-image: url(/src/img/wap/about/swiper-item-image.png);
+						}
+					}
+					.pic-item_title {
+						font-size: 0.7rem;
+						margin: px2rem(32) 0;
+						text-indent: 4px;
+						line-height: 1.3;
+					}
+					.pic-item_desc {
+						font-size: 0.555rem;
+					}
+				}
+				.ui-carousel__prev {
+					top: 50%;
+					transform: translateY(-50%) scale3d(2.5, 2.5, 2.5);
+					left: -0.7rem;
+				}
+				.ui-carousel__next {
+					right: -0.7rem;
+					top: 50%;
+					transform: translateY(-50%) scale3d(2.5, 2.5, 2.5);
+				}
+			}
+
+		}
+	};
+	.h5-hide-hook{
+		display: none;
+	}
+	.web-hide-hook{
+		display: block;
+	}
+	// page2
+	#section21{
+		.list-pic{
+			display: none;
+		}
+	}
+	#section22{
+		.list-pic{
+			display: none;
+		}
+		.ext-video{
+			margin-top: px2rem(40);
+			width: 100%;
+			height: px2rem(700);
+		}
+	}
+	#section23{
+		.list-pic{
+			display: none;
+		}
+	}
+	#section24{
+		.box-bd_cont{
+			padding-left: 0.1rem;
+		}
+		.list-txt{
+			li {
+				width: calc(50% - 14px);
+				height: px2rem(200);
+				text-align: center;
+				margin: px2rem(28) 7px;
+				span{
+					&::before{
+						transform: scale3d(3,3,3) rotateZ(45deg);
+					}
+				}
+				a{
+					width: 100%;
+					height: 100%;
+					line-height: px2rem(200);
+					font-size: 0.5555rem;
+				}
+			}
+		}
+	}
+	#section3{
+		.section-hd{
+			height: 1rem;
+		}
+		.box-bd_cont{
+			padding: 0.7666rem 0.4rem;
+		}
+		.section-bd{
+			margin-top: px2rem(100);
+			.box-tab_nav{
+				border-collapse:separate;
+				border-spacing:5px 10px;
+				.box-tab_nav_pc{
+					display: none;
+				}
+				td{
+					text-align: center;
+					height: px2rem(160);
+					line-height: px2rem(160);
+					font-size: 0.6rem;
+					width: px2rem(1000);
+				}
+				li{
+					text-align: center;
+					height: px2rem(160);
+					line-height: px2rem(160);
+					font-size: 0.6rem;
+					width: px2rem(1000);
+				}
+			}
+			.box-tab_desc{
+				width: 100%;
+				text-align: left;
+				margin-bottom: px2rem(40);
+			}
+			.ui-carousel__item{
+				width: 13.666666rem;
+				margin-left: 0.5rem;
+				margin-right: 0.5rem;
+				background-color: inherit;
+				.item-weapon{
+					width: 45%;
+					height: 100%;
+					float: left;
+					&:first-child{
+						margin-right: px2rem(120);
+					}
+					.weapon-img{
+						width: 100%;
+						height: 75%;
+						background-image: url(src/img/require/bg-show.png);
+						background-repeat: no-repeat;
+						background-size: contain;
+						position: relative;
+						img{
+							position: absolute;
+							top: 25%;
+							width: 120%;
+							left: px2rem(-40);
+						}
+						.weapon-tag{
+							width: px2rem(300);
+							height: px2rem(150);
+							position: absolute;
+							left: px2rem(-30);
+							top: px2rem(60);
+							background-image: url('src/img/require/arms-tag-bg.png');
+							background-repeat: no-repeat;
+							background-size: cover;
+							line-height: px2rem(130);
+							font-size: 0.6rem;
+							color: #333;
+							font-weight: bold;
+							text-align: center;
+						}
+					}
+					.weapon-desc{
+						margin-top: px2rem(-60);
+						font-size: .6rem;
+						line-height: 1.4;
+						color: #fff;
+						text-align: left;
+					}
+				}
+			}
+			.ui-carousel__next{
+				right: 0.1rem;
+			}
+			.ui-carousel__prev{
+				left: 0rem;
+			}
+			.to-weapon-sql{
+				display: block;
+				width: px2rem(1000);
+				height: px2rem(300);
+				margin: 0 auto;
+				background-image: url("src/img/require/to-weapon-sql.png");
+				background-repeat: no-repeat;
+				background-size: cover;
+				line-height: px2rem(300);
+				color: #716c14;
+				font-size: 0.8rem;
+				font-weight: bold;
+				position: relative;
+			}
+		}
+	}
+	#section32{
+		.list-rarity{
+			width: 100%;
+			li{
+				width: 45%;
+				height: px2rem(750);
+				float: left;
+				margin: 0 auto;
+				position: relative;
+				margin: px2rem(40) px2rem(40);
+				border: 3px solid #fff;
+				img{
+					position: absolute;
+					left: -3px;
+					top: -3px;
+					width: px2rem(320);
+					height: px2rem(320);
+				}
+				&:last-child{
+					transform: translateX(55%);
+				}
+			}
+		}
+	}
+	#section33{
+		.box-tab_nav{
+			td{
+				width: px2rem(700);
+				&::after{
+					width: 1.2rem;
+					height: 1.48333rem;
+					right: 0;
+				}
+			}
+		}
+	}
+	#section34{
+		.list-recommend{
+			width: 100%;
+			.recommend-item{
+				width: 100%;
+				height: px2rem(1000);
+				box-sizing: border-box;
+				padding: px2rem(60);
+				.fl{
+					width: 100%;
+					float: none;
+					h3{
+						font-size: 0.8rem;
+						line-height: 1.4;
+					}
+					p{
+						font-weight: normal;
+						margin-bottom: px2rem(100);
+					}
+				}
+				.list-arms{
+					li{
+						margin: 0 5px;
+						width: calc(2.3rem - 10px);
+						height: calc(2.3rem - 10px);
+						.arms-cover{
+							width: 100%;
+							height: 100%;
+						}
+						em{
+							font-size: 0.6rem;
+							margin-top: px2rem(40);
+							padding: 5px 3px;
+						}
+					}
+				}
+			}
+		}
+	}
+	#section42{
+		.box-bd_cont{
+			padding: 0.76666rem 0.5rem;
+			.box-tab_nav{
+				border-collapse:separate;
+				border-spacing:10px 10px;
+				td{
+					height: px2rem(180);
+					line-height: px2rem(180);
+					font-size: 0.6rem;
+					width: px2rem(700);
+				}
+			}
+			.box-tab_desc{
+				width: 100%;
+				text-align: left;
+			}
+			.ui-carousel__content{
+				.ui-carousel__item{
+					width: calc(14.453333rem - 1rem);
+					margin-left: 0.5rem;
+					margin-right: 0.5rem;
+					background-color: inherit;
+					.item-weapon{
+						width: 45%;
+						height: 100%;
+						float: left;
+						&:first-child{
+							 margin-right: px2rem(120);
+						}
+						.weapon-img{
+							width: 100%;
+							height: 75%;
+							background-image: url(src/img/require/bg-show2.png);
+							background-repeat: no-repeat;
+							background-size: contain;
+							position: relative;
+							img{
+								position: absolute;
+								top: 25%;
+								width: 120%;
+								left: px2rem(-40);
+							}
+							.play-icon{
+								position: absolute;
+								left: 75%;
+								transform: translateY(px2rem(450));
+								width: px2rem(100);
+								height: px2rem(100);
+							}
+							.weapon-tag{
+								width: px2rem(300);
+								height: px2rem(150);
+								position: absolute;
+								left: px2rem(-30);
+								top: px2rem(60);
+								background-image: url('src/img/require/arms-tag-bg.png');
+								background-repeat: no-repeat;
+								background-size: cover;
+								line-height: px2rem(130);
+								font-size: 0.6rem;
+								color: #333;
+								font-weight: bold;
+								text-align: center;
+							}
+						}
+						.weapon-desc{
+							margin-top: px2rem(-60);
+							font-size: .5555rem;
+							line-height: 1.4;
+							color: #fff;
+							text-align: left;
+						}
+					}
+
+				}
+			}
+			.ui-carousel__next{
+				right: 0.1rem;
+			}
+			.ui-carousel__prev{
+				left: -0.1rem;
+			}
+		}
+	}
+	#section43{
+		.list-recommend{
+			margin-top: px2rem(60);
+			li{
+				float: none;
+				width: 100%;
+				.item-cover{
+					width: px2rem(360);
+					height: px2rem(440);
+					margin-right: 10px;
+					border: none;
+				}
+				h3{
+					font-size: 0.6rem;
+					font-weight: bold;
+					line-height: 1.5;
+				}
+				p{
+					padding-left: 10px;
+					font-size: 0.5555rem;
+				}
+			}
+		}
+	}
+	#section52{
+		.box-bd_cont{
+			padding: 0.7666rem 0.5rem;
+		}
+		.box-tab-lr{
+			margin: 0;
+			.box-tab_nav{
+				position: static;
+				li{
+					float: left;
+					width: 31%;
+					height: px2rem(160);
+					line-height: px2rem(160);
+					margin: 3px 3px;
+					a{
+						font-size: 0.6rem;
+						color: #a86300;
+					}
+					&.active{
+						border: none;
+						padding-right: 0;
+						a{
+							color: #fff;
+						}
+					}
+				}
+			}
+		}
+		.box-tab_cont{
+			float: none;
+			width: 100%;
+			.cont-skew_top{
+				transform: none;
+				border: none;
+				background-color: inherit;
+			}
+			.cont-skew_bottom{
+				transform: none;
+				border: none;
+				background-color: inherit;
+			}
+			.panel-cont{
+				div.fl{
+					float: none;
+					width: 100%;
+					.source-cover{
+						width: 100%;
+						height: px2rem(1000);
+					}
+				}
+				.source-score{
+					float: none;
+					li{
+						width: 50%;
+						float: left;
+						line-height: 1.5;
+						position: relative;
+						label{
+							font-size: 0.5555rem;
+						}
+						.star{
+							transform: scale3d(2,2,2);
+							position: absolute;
+							left: 60%;
+							top: px2rem(40);
+						}
+					}
+				}
+				p{
+					color:rgba(255,255,255,.5);
+					font-size: 0.555555rem;
+					line-height: 1.2;
+					margin-top: 5px;
+					margin-bottom: 20px;
+				}
+			}
+		}
+	}
+	#section6{
+		padding: 1.08333rem 0 0 0;
+		.box-bd_cont{
+			padding: 0.7666rem 0.3rem;
+		}
+		.section-hd{
+			height: 1.3rem;
+		}
+		#section61{
+			margin-top: px2rem(120);
+		}
+		.reward-refresh{
+			background-image: url("src/img/require/to-weapon-sql.png");
+			margin: px2rem(60) auto ;
+			position: relative;
+			color: #716c14;
+		}
+		.box-tab_nav{
+			border-collapse:separate;
+			border-spacing: 10px 5px;
+			td{
+				width: px2rem(1300);
+				height: px2rem(160);
+				border: none;
+				transform: initial;
+				a{
+					line-height: px2rem(160);
+					font-size: 0.6rem;
+				}
+				&.active{
+					transform: none;
+				}
+				&::before{
+					display: none;
+				}
+			}
+		}
+		.box-tab_cont{
+			border: none;
+			background-color: initial;
+			.award-cover{
+				float: none;
+				width: 100%;
+				height: px2rem(300);
+			}
+			.award-table{
+				float: none;
+				width: 100%;
+				h3{
+					color: #fff;
+					font-size: 0.7rem;
+					line-height: 1.2;
+				}
+				tr{
+					height: px2rem(180);
+					font-size: 0.6rem;
+					line-height: px2rem(180);
+					td{
+						text-align: center;
+					}
+				}
+			}
+		}
+	}
+	.next-page{
+		background-image: url("src/img/bg-more_about.png");
+		margin: px2rem(300) auto !important;
+		position: relative;
+		color: #716c14;
+	}
+	.text-bg{
+		background-repeat: no-repeat;
+		background-size: cover;
+		line-height: px2rem(300);
+		color: #666;
+		font-size: 0.8rem;
+		font-weight: bold;
+		text-align: center;
+		display: block;
+		width: px2rem(1000);
+		height: px2rem(300);
+		margin: 0 auto;
+	}
+	// page3
+	#page3{
+		.section-hd{
+			height: 1.5rem;
+			margin-top: 0.4rem;
+			margin-bottom: 1rem;
+		}
+		.zt-link-more{
+			width: 7.575rem;
+			height: 1.875rem;
+			line-height: 2.175rem;
+			font-size: 0.7rem;
+			margin: 0.75rem auto 0;
+			position: relative;
+		}
+		#section12{
+			.box-bd_cont{
+				padding: 0.7666rem 0.3rem;
+			}
+			.box-tab_nav{
+				position: static;
+				width: 100%;
+				li{
+					width: calc(25% - 10px);
+					float: left;
+					height: px2rem(200);
+					margin: 5px;
+					&::before{
+						transform: none;
+					}
+					a{
+						width: 100%;
+						line-height: px2rem(200);
+						font-size: 0.6rem;
+						&::before{
+							display: none;
+						}
+					}
+					&.active{
+						border: none;
+						padding-right: 0;
+					}
+				}
+			}
+			.box-tab_cont{
+				float: none;
+				position: static;
+				width: 100%;
+				margin-top: px2rem(50);
+				.panel-cont{
+					background-color: transparent;
+				}
+				.cont-skew_top,.cont-skew_bottom{
+					transform: none;
+					border: none;
+					background-color: transparent;
+				}
+				img{
+					display: block;
+				}
+			}
+		}
+		#section13{
+			.box-bd_cont{
+				padding: 0.7666rem 0.3rem;
+			}
+			.shop-box{
+				float: none;
+				width: 95%;
+				.shop-hd{
+					width: 4.75rem;
+					font-size: 0.7rem;
+					line-height: 1.45rem;
+					border: none;
+				}
+				&:first-child{
+					margin-top: px2rem(100);
+				}
+				&:not(:first-child){
+					margin-top: px2rem(150);
+				}
+				.zt-list-goods{
+					padding: 0.65rem 0.35rem 0.65rem 0.35rem;
+				}
+				.shop-bd{
+					&::before{
+						border: none;
+					}
+					&::after{
+						border: none;
+					}
+					.zt-list-goods{
+						.week-free{
+							width: 45%;
+							border-width: 3px;
+							margin-right: px2rem(40);
+							&:last-child{
+								border-color: #2cd070;
+							}
+						}
+						.day-free{
+							width: 30%;
+							border-width: 3px;
+							margin-right: px2rem(40);
+							margin-bottom: px2rem(40);
+						}
+						.mask{
+							h4{
+								font-size: 0.5rem;
+								line-height: 1.3;
+							}
+							p{
+								margin-top: 0;
+							}
+							span{
+								padding-left: 0.625rem;
+								background: url(../..//img/advanced/icon-gold.png) 0 center/0.5rem no-repeat
+							}
+						}
+					}
+				}
+			}
+
+		}
+		#section22{
+			.pic-map{
+				width: 13.625rem;
+			}
+		}
+		#section32{
+			.list-task{
+				margin: 0.5rem 0;
+				li{
+					margin-bottom: 1rem;
+					padding: 0.3rem;
+					h3{
+						font-size: 0.6rem;
+						line-height: 1.2;
+					}
+					p{
+						font-size: 0.5rem;
+					}
+					img{
+						width: 90%;
+						margin: px2rem(50) auto;
+					}
+				}
+			}
+
+		}
+		.page-bottom{
+			width: 100%;
+			height: px2rem(1000);
+			background: linear-gradient(#B0A376, #eee, #eee, #fff);
+			position: relative;
+			.bottom-btn{
+				display: block;
+				float: left;
+				position: relative;
+				width: calc(50% - 2rem);
+				height: px2rem(350);
+				text-align: center;
+				line-height: px2rem(300);
+				font-size: 0.7rem;
+				font-weight: 900;
+				margin: 0 1rem;
+				background-image: url('src/img/bg-more_about.png');
+				background-size: cover;
+				color:#865813;
+				top: 30%;
+				&:first-child{
+					&::before{
+						position: absolute;
+						content: '开始锄宗生涯';
+						font-size: 0.5rem;
+						color: #865813;
+						top: 27%;
+						left: 27%;
+					}
+				}
+				&:last-child{
+					&::before{
+						position: absolute;
+						content: '查看疑难解答';
+						font-size: 0.5rem;
+						color: #865813;
+						top: 27%;
+						left: 27%;
+					}
+				}
+
+			}
+		}
+	}
+	// page4
+	#page4{
+		.list-problem{
+			h4{
+				font-size: 0.6rem;
+				margin-top: px2rem(60);
+				line-height: 1;
+			}
+			p{
+				text-indent: 8px;
+			}
+		}
+		.page-bottom{
+			width: 100%;
+			height: px2rem(1000);
+			background: linear-gradient(#68869E, #eee, #eee, #fff);
+			position: relative;
+			.remember{
+				position: relative;
+				top: 40%;
+				background-image: url("src/img/bg-more_about.png");
+				color: #865813 !important;
+				&::before{
+					content: '开始我的锄宗生涯';
+					color: #865813;
+					font-size: 0.2rem;
+					position: absolute;
+					left: 50%;
+					top: 50%;
+					transform: translate3d(-50%, -20%, 0);
+				}
+			}
+		}
+	}
 }

Alguns ficheiros não foram mostrados porque muitos ficheiros mudaram neste diff