diff --git a/static/css/css.css b/static/css/css.css
index 81e0b99..9b625eb 100644
--- a/static/css/css.css
+++ b/static/css/css.css
@@ -330,6 +330,7 @@ transform: none;
   background-size: 100%;
   left: 49%;
   bottom: 30%;
+  display: none;
 }
 
 .game .leftInfor {
@@ -495,7 +496,20 @@ transform: none;
 .game .controls ul {
   /* Your styles for the <ul> element within .controls go here */
 }
-
+.game .controls ul li img{
+  width: 62%;
+  height: 100%;
+  object-fit: contain;
+}
+.game .controls ul li .num{
+  position: absolute;
+  color: white;
+  text-shadow: -2px -2px 0 black, 2px -2px 0 black, -2px 2px 0 black, 2px 2px 0 black;
+  right: 10px;
+  bottom: 10px;
+  z-index: 44;
+  font-size: 14px;
+}
 .game .controls ul li {
   /* Your styles for the <li> elements within .controls ul go here */
   width: 78px;
@@ -504,6 +518,8 @@ transform: none;
   background: url(../images/common_item_bg.png) no-repeat center center;
   background-size: 100%;
   cursor: pointer;
+  vertical-align: middle;
+  position: relative;
 }
 
 
@@ -1227,15 +1243,36 @@ left: auto;
     
 bottom: auto;
 }
+.creatMain .content3 >*{
+    /* position: relative; */
+    /* z-index: 4; */
+}
+.creatMain .content3 .con:after{
+
+background: url(../images/common_popup_frame014.png) no-repeat center center;
+
+content: "";
+
+background-size: 100% 100%;
+
+position: absolute;
+
+left: 0px;
+
+top: 0px;
+
+width: 100%;
+
+height: 100%;
+
+z-index: 3;
+}
 .creatMain .content3{
     
 width: 1100px;
     
 height: 714px;
-    
-background: url(../images/common_popup_frame014.png) no-repeat center center;
-    
-background-size: 100% 100%;
+
     
 position: absolute;
     
@@ -1260,6 +1297,10 @@ position: absolute;
 left: 24px;
 
 top: -26px;
+
+/* position: relative; */
+
+z-index: 4;
 }
 .creatMain .content3 .con .left .dec1{
   border-bottom: 2px solid #5D4D44;
@@ -1279,6 +1320,10 @@ margin-left: 82px;
 margin-top: 73px;
 
 padding: 24px;
+
+position: relative;
+
+z-index: 5;
 }
 
 .creatMain .content3 .con .left .dec1 p {font-size: 24px;font-family: Grandstander;font-weight: bold;color: #0A0316;line-height: 40px;zoom: 1;overflow: hidden;padding-bottom: 26px;}
@@ -1348,7 +1393,19 @@ vertical-align: middle;
 float: right;
 }
 
-.creatMain .content3 .con .left .dec2 p {font-size: 20px;font-family: Grandstander;font-weight: bold;color: #0A0316;line-height: 2;padding-bottom: 20px;zoom: 1;overflow: hidden;}
+.creatMain .content3 .con .left .dec2 p:after{
+    content: "";
+    display: table;
+    clear: both;
+}
+.creatMain .content3 .con .left .dec2 p {
+    font-size: 20px;
+    font-family: Grandstander;
+    font-weight: bold;
+    color: #0A0316;
+    line-height: 2.4;
+    padding-bottom: 20px;
+    }
 .creatMain .content3 .con .left .dec2 {
   padding-top:20px;
   padding-left: 5px;
@@ -1361,8 +1418,12 @@ float: right;
 .creatMain .content3 .con .left .dec2 .s2 {
 
 }
-
-.creatMain .content3 .con .left .dec2 p .s1 {float: left;}
+.creatMain .content3 .con .left .dec2 p .s1 .slide{position: absolute;width: 346px;height: 205px;background: url(../images/slide.png) no-repeat center center;background-size: 100% 100%;font-size: 16px;font-family: Grandstander;font-weight: 300;color: #F8EED5;line-height: 24px;padding: 22px;left: 100%;top: 34px;display: none;}
+.creatMain .content3 .con .left .dec2 p .s1 .tit{
+    display: block;
+    cursor: pointer;
+}
+.creatMain .content3 .con .left .dec2 p .s1 {float: left;position: relative;}
 
 .creatMain .content3 .con .left .dec2 p .s2 {float: right;}
 
@@ -1375,7 +1436,39 @@ float: right;
 text-align: center;
     
 width: 600px;
+    
+position: relative;
+    
+z-index: 5;
 }
+  .creatMain .content3 .con .right .imgbox{
+    
+display: inline-block;
+    
+position: relative;
+    
+margin-top: 75px;
+    
+margin-bottom: 56px;
+  }
+  .creatMain .content3 .con .right .delet{
+    
+width: 47px;
+    
+height: 47px;
+    
+background: url(../images/button_delete.png) no-repeat center center;
+    
+position: absolute;
+    
+right: 0;
+    
+bottom: 0;
+    
+cursor: pointer;
+    
+right: -68px;
+  }
 .creatMain .content3 .con .right .people {
 
 display: block;
@@ -1384,9 +1477,9 @@ margin: auto;
 
 width: 209px;
 
-margin-top: 75px;
+/* margin-top: 75px; */
 
-margin-bottom: 66px;
+/* margin-bottom: 66px; */
 }
 
 .creatMain .content3 .con .right .btn {
@@ -1399,6 +1492,10 @@ background: url(../images/common_button_015.png) no-repeat center center;
 
 border: none;
 
+margin: auto;
+
+display: block;
+
 font-size: 24px;
 
 font-family: Grandstander;
@@ -1420,4 +1517,240 @@ color: #0A0316;
 }
 .itemNase {
     z-index: 2;
+}
+
+
+.creatMain .content3 .con .tab{
+    
+position: absolute;
+    
+left: -117px;
+    
+top: 22px;
+    
+width: 128px;
+    
+z-index: 1;
+}
+.creatMain .content3 .con .tab a.current{
+    
+background: url(../images/role_button_list_s.png) no-repeat center center;
+    
+background-size: 100% 100%;
+    
+/* padding-top: 16px; */
+}
+.creatMain .content3 .con .tab a{
+    
+display: block;
+    
+margin-bottom: 6px;
+    
+background: url(../images/role_button_add.png) no-repeat center center;
+    
+height: 126px;
+    
+position: relative;
+    
+text-align: center;
+    
+background-size: 100% 100%;
+    
+padding-top: 16px;
+    
+padding-left: 10px;
+}
+.creatMain .content3 .con .tab a img{
+    
+display: block;
+    
+margin: auto;
+}
+.creatMain .content3 .con .tab a .name{
+    
+font-size: 16px;
+    
+font-family: Grandstander;
+    
+font-weight: bold;
+    
+color: #0A0316;
+    
+display: block;
+    
+padding-top: 5px;
+}
+.creatMain .content3 .con .none{
+    
+z-index: 12;
+    
+position: relative;
+    
+text-align: center;
+    
+position: absolute;
+    
+top: 50%;
+    
+left: 50%;
+    
+-o-transform: translate(-50%, -50%);
+    
+-webkit-transform: translate(-50%, -50%);
+    
+-moz-transform: translate(-50%, -50%);
+    
+-ms-transform: translate(-50%, -50%);
+    
+transform: translate(-50%, -50%);
+    
+width: 100%;
+}
+.creatMain .content3 .con .none .title{
+    font-size: 20px;
+    font-family: Grandstander;
+    font-weight: 400;
+    color: #5D4D44;
+    position: static;
+}
+.creatMain .content3 .con .none .btn{
+    
+width: 316px;
+    
+height: 50px;
+    
+background: url(../images/common_button_015.png) no-repeat center center;
+    
+border: none;
+    
+margin: auto;
+    
+display: block;
+    
+font-size: 24px;
+    
+font-family: Grandstander;
+    
+font-weight: bold;
+    
+color: #0A0316;
+    
+margin-top: 59px;
+}
+
+.alertmodel{
+position: fixed;
+left: 0px;
+top: 0px;
+width: 100%;
+height: 100%;
+z-index: 9999;
+background: rgba(0,0,0,0.5);
+}
+.alertmodel .center{
+    background: url(../images/common_popup_frame01a.png) no-repeat center center;
+    background-size: 100% 100%;
+    width: 672px;
+    height: 458px;
+
+position:absolute;
+top: 50%;
+left: 50%;
+-o-transform: translate(-50%, -50%);
+-webkit-transform: translate(-50%, -50%);
+-moz-transform: translate(-50%, -50%);
+-ms-transform: translate(-50%, -50%);
+transform: translate(-50%, -50%);
+text-align: center;
+}
+.alertmodel .close{
+    
+cursor: pointer;
+    
+width: 52px;
+    
+height: 52px;
+    
+position: absolute;
+    
+right: -13px;
+    
+top: -1px;
+    
+background: url(../images/close.png) no-repeat center center;
+    
+background-size: 100%;
+}
+.alertmodel .title{
+    
+font-size: 30px;
+    
+font-weight: 400;
+    
+color: #000000;
+    
+padding-top: 44px;
+}
+.alertmodel .dec{
+    
+height: 274px;
+    
+display: -webkit-box;
+    
+display: -moz-box;
+    
+display: -webkit-flex;
+    
+display: -moz-flex;
+    
+display: -ms-flexbox;
+    
+display: flex;
+    
+flex-direction: column;
+    
+justify-content: center;
+    
+width: 428px;
+    
+font-size: 24px;
+    
+font-family: Grandstander;
+    
+font-weight: bold;
+    
+color: #000000;
+    
+margin: auto;
+    
+line-height: 1.7;
+}
+.alertmodel .dec b{
+    
+color: #B53B3B;
+}
+.alertmodel .btns{
+    font-size: 0px;
+}
+.alertmodel .btns *{
+    margin: 0px 38px;
+    width: 206px;
+    height: 50px;
+    font-size: 24px;
+    font-family: Grandstander;
+    font-weight: bold;
+    color: #0A0316;
+    border: none;
+}
+.alertmodel .btns .btn1{
+    
+background: url(../images/btm1.png) no-repeat center center;
+    
+background-size: 100% 100%;
+}
+.alertmodel .btns .btn2{
+    
+background: url(../images/btm2.png) no-repeat center center;
+    
+background-size: 100% 100%;
 }
\ No newline at end of file
diff --git a/static/images/btm1.png b/static/images/btm1.png
new file mode 100644
index 0000000..23b858b
Binary files /dev/null and b/static/images/btm1.png differ
diff --git a/static/images/btm2.png b/static/images/btm2.png
new file mode 100644
index 0000000..d675eca
Binary files /dev/null and b/static/images/btm2.png differ
diff --git a/static/images/button_delete.png b/static/images/button_delete.png
new file mode 100644
index 0000000..41bc244
Binary files /dev/null and b/static/images/button_delete.png differ
diff --git a/static/images/common_popup_frame01a.png b/static/images/common_popup_frame01a.png
new file mode 100644
index 0000000..1ad62f6
Binary files /dev/null and b/static/images/common_popup_frame01a.png differ
diff --git a/static/images/game.jpg b/static/images/game.jpg
index 221a39b..01de4d2 100644
Binary files a/static/images/game.jpg and b/static/images/game.jpg differ
diff --git a/static/images/role_button_add.png b/static/images/role_button_add.png
new file mode 100644
index 0000000..e8a8dbd
Binary files /dev/null and b/static/images/role_button_add.png differ
diff --git a/static/images/role_button_list_s.png b/static/images/role_button_list_s.png
new file mode 100644
index 0000000..d5914d1
Binary files /dev/null and b/static/images/role_button_list_s.png differ
diff --git a/static/images/set1.png b/static/images/set1.png
new file mode 100644
index 0000000..152da6a
Binary files /dev/null and b/static/images/set1.png differ
diff --git a/static/images/set2.png b/static/images/set2.png
new file mode 100644
index 0000000..a7bf05d
Binary files /dev/null and b/static/images/set2.png differ
diff --git a/static/images/set3.png b/static/images/set3.png
new file mode 100644
index 0000000..2d1ea0b
Binary files /dev/null and b/static/images/set3.png differ
diff --git a/static/images/set4.png b/static/images/set4.png
new file mode 100644
index 0000000..fc214f7
Binary files /dev/null and b/static/images/set4.png differ
diff --git a/static/images/slide.png b/static/images/slide.png
new file mode 100644
index 0000000..1c12533
Binary files /dev/null and b/static/images/slide.png differ
diff --git a/static/js/global.js b/static/js/global.js
index e502b7e..597b7e4 100644
--- a/static/js/global.js
+++ b/static/js/global.js
@@ -89,8 +89,14 @@ initTab('#tab2');
 initTab('#tab3');
 
 
+$('.creatMain .content3 .con .left .dec2 p .s1 ').hover(function(){
+  $(this).find('.slide').stop()
+  $(this).find('.slide').slideToggle(200)
+})
 
 
-
+$('.alertmodel .close').click(function(){
+  $(this).parents('.alertmodel').fadeOut(200)
+})
 
 });
\ No newline at end of file
diff --git "a/static/\345\210\233\350\247\2221.html" "b/static/\345\210\233\350\247\2221.html"
new file mode 100644
index 0000000..8d362aa
--- /dev/null
+++ "b/static/\345\210\233\350\247\2221.html"
@@ -0,0 +1,225 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
+<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1" >
+<meta name="renderer" content="webkit">
+<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1" />
+<meta name="apple-mobile-web-app-capable" content="yes" />
+<meta name="format-detection" content="telephone=no" />
+<title>标题</title>
+<meta name="keywords" content="关键词" />
+<meta name="description" content="描述" />
+<link href="css/magic.min.css" rel="stylesheet" type="text/css" />
+<link href="css/swiper.min.css" rel="stylesheet" type="text/css" />
+<link href="css/css.css" rel="stylesheet" type="text/css" />
+<link href="css/media.css" rel="stylesheet" type="text/css" />
+<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
+    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
+<!--[if lt IE 9]>
+      <script src="https://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js"></script>
+      <script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
+<![endif]-->
+
+</head>
+<body>
+<div class="loading">
+	<span class="loadingfa xuanzhuan"><img src="images/loading.png" alt=""></span>
+</div>
+
+
+<div class="creatMain">
+  <a href="#" class="Skip">Skip</a>
+  <div class="contBase  itemNase " >
+    <div class="title">A mysterious voice:</div>
+    <div class="text">
+      Welcome to the land of Talas, brave adventurer!
+    </div>
+    <div class="next"></div>
+  </div>
+  <div class="content2 itemNase">
+    <input type="text" placeholder="Some text about user name" class="words">
+    <div class="warning">*Some text about error tips</div>
+    <button class="btnBase">CONFIRM</button>
+  </div>
+  <div class="contBase itemNase" >
+    <div class="title">A mysterious voice:</div>
+    <div class="text">
+      Talas is located in the southeastern corner of the world, brimming with mystery and magic. It holds valuable mineral resources, especially the enigmatic 'Nightstone,' which draws adventurers. 
+    </div>
+    <div class="next"></div>
+  </div>
+  <div class="itemNase step3">
+    <div class="contBase  ">
+      <div class="title">A mysterious voice:</div>
+      <div class="text">
+        Talas is located in the southeastern corner of the world, brimming with mystery and magic. It holds valuable mineral resources, especially the enigmatic 'Nightstone,' which draws adventurers. 
+      </div>
+      <div class="next"></div>
+    </div>
+    <div class="listItems">
+      <ul>
+        <li>
+          <div class="num">A</div>
+          <div class="ri">Seek help and collaborate with other adventurers to solve the problem</div>
+        </li>
+        <li>
+          <div class="num">B</div>
+          <div class="ri">Quickly assess the situation, formulate a plan, and tackle the challenge alone</div>
+        </li>
+        <li>
+          <div class="num">C</div>
+          <div class="ri">Utilize your creativity and wisdom to find unconventional solutions.</div>
+        </li>
+        <li>
+          <div class="num">D</div>
+          <div class="ri">Seek out mysterious magic or treasures to address the crisis.</div>
+        </li>
+      </ul>
+    </div>
+  </div>
+  <div class="content3 itemNase">
+    <div class="title">
+      <img src="images/title.png" alt="">
+    </div>
+    <div class="con">
+      <div class="tab">
+        <a href="javascript:;" class="current">
+          <img src="images/user.png" alt="">
+          <span class="name">Some text...</span>
+        </a>
+        <a href="javascript:;"></a>
+        <a href="javascript:;"></a>
+        <a href="javascript:;"></a>
+        <a href="javascript:;"></a>
+      </div>
+      <div class="left">
+        <div class="dec1">
+          <p>
+            <span class="s1">
+              <span class="icon"><img src="images/icon1.png" alt=""></span>
+              <span class="ti">Vitality</span>
+            </span>
+            <span class="s2">100/100</span>
+          </p>
+          <p>
+            <span class="s1">
+              <span class="icon"><img src="images/icon2.png" alt=""></span>
+              <span class="ti">Morality</span>
+            </span>
+            <span class="s2">90/90</span>
+          </p>
+        </div>
+        <div class="dec2">
+          <p>
+            <span class="s1">
+              <span class="tit">Strength</span>
+              <span class="slide">
+                The wisdom attribute represents a character's wisdom and insight. Characters with high wisdom excel at solving puzzles and making wise decisions. In the game, wisdom influences dialogues, decisions, and a character's learning speed.
+              </span>
+            </span>
+            <span class="s2">50</span>
+          </p>
+          <p>
+            <span class="s1">
+              <span class="tit">Agility</span>
+              <span class="slide">
+                The wisdom attribute represents a character's wisdom and insight. Characters with high wisdom excel at solving puzzles and making wise decisions. In the game, wisdom influences dialogues, decisions, and a character's learning speed.
+              </span>
+            </span>
+            <span class="s2">50</span>
+          </p>
+          <p>
+            <span class="s1">
+              <span class="tit">Wisdom</span>
+              <span class="slide">The wisdom attribute represents a character's wisdom and insight. Characters with high wisdom excel at solving puzzles and making wise decisions. In the game, wisdom influences dialogues, decisions, and a character's learning speed.</span>
+            </span>
+            <span class="s2">50</span>
+          </p>
+          <p>
+            <span class="s1">
+              <span class="tit">Intelligence</span>
+              <span class="slide">The wisdom attribute represents a character's wisdom and insight. Characters with high wisdom excel at solving puzzles and making wise decisions. In the game, wisdom influences dialogues, decisions, and a character's learning speed.</span>
+            </span>
+            <span class="s2">50</span>
+          </p>
+          <p>
+            <span class="s1">
+              <span class="tit">Luck</span>
+              <span class="slide">The wisdom attribute represents a character's wisdom and insight. Characters with high wisdom excel at solving puzzles and making wise decisions. In the game, wisdom influences dialogues, decisions, and a character's learning speed.</span>
+            </span>
+            <span class="s2">50</span>
+          </p>
+        </div>
+      </div>
+      <div class="right">
+        <div class="title">Some text about name</div>
+        <div class="imgbox">
+          <img src="images/people.png" class="people" alt="">
+          <div class="delet"></div>
+        </div>
+        <button class="btn">Start Adventure</button>
+      </div>
+    </div>
+  </div>
+  <div class="content3 itemNase">
+    <div class="title">
+      <img src="images/title.png" alt="">
+    </div>
+    <div class="con">
+      <div class="tab">
+        <a href="javascript:;" class="current">
+          <img src="images/user.png" alt="">
+          <span class="name">Some text...</span>
+        </a>
+        <a href="javascript:;"></a>
+        <a href="javascript:;"></a>
+        <a href="javascript:;"></a>
+        <a href="javascript:;"></a>
+      </div>
+      <div class="none">
+        <div class="title">
+          <p>
+            Uh-oh! It's empty here！
+          </p>
+          <p>
+            Create a character by answering questions!
+          </p>
+        </div>
+        <button class="btn">Create Character</button>
+      </div>
+    </div>
+  </div>
+  <div class="shadow"></div>
+</div>
+
+
+<div class="alertmodel">
+  <div class="center">
+    <div class="close"></div>
+    <div class="title">Notification</div>
+    <div class="dec">
+      <p>
+        Are you sure you want to completely delete '<b>some text baout name</b>'?  
+      </p>
+      <p>This action is irreversible!</p>
+    </div>
+    <div class="btns">
+      <button class="btn1">CANCEL</button>
+      <button class="btn2">confirm</button>
+    </div>
+  </div>
+</div>
+
+
+<script src="js/jquery.min.js"></script>
+<script type="text/javascript" src="js/swiper.min.js"></script>
+<script type="text/javascript" src="js/wow.min.js"></script>
+<script type="text/javascript" src="js/global.js"></script>
+<script>
+  $('.itemNase').click(function(){
+    $(this).hide()
+  })
+</script>
+</body>
+</html>
diff --git "a/static/\350\243\205\345\244\207\345\210\266\351\200\240.html" "b/static/\350\243\205\345\244\207\345\210\266\351\200\240.html"
new file mode 100644
index 0000000..40593e5
--- /dev/null
+++ "b/static/\350\243\205\345\244\207\345\210\266\351\200\240.html"
@@ -0,0 +1,1547 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
+<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1" >
+<meta name="renderer" content="webkit">
+<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1" />
+<meta name="apple-mobile-web-app-capable" content="yes" />
+<meta name="format-detection" content="telephone=no" />
+<title>标题</title>
+<meta name="keywords" content="关键词" />
+<meta name="description" content="描述" />
+<link href="css/magic.min.css" rel="stylesheet" type="text/css" />
+<link href="css/swiper.min.css" rel="stylesheet" type="text/css" />
+<link href="css/css.css" rel="stylesheet" type="text/css" />
+<link href="css/media.css" rel="stylesheet" type="text/css" />
+<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
+    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
+<!--[if lt IE 9]>
+      <script src="https://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js"></script>
+      <script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
+<![endif]-->
+
+</head>
+<body>
+<div class="loading">
+	<span class="loadingfa xuanzhuan"><img src="images/loading.png" alt=""></span>
+</div>
+
+
+<div class="game">
+  <div class="people"></div>
+  <div class="leftInfor">
+    <div class="user"><img src="images/user.png" alt=""></div>
+    <div class="infor">
+      <div class="name">Some text about name</div>
+      <div class="Wallet">Wallet</div>
+    </div>
+  </div>
+  <div class="typeItem type1">
+    <div class="add"></div>
+    <div class="ov">
+      <div class="icon"><img src="images/icon1.png" alt=""></div>
+      <div class="val">20/90</div>
+      <div class="line"></div>
+    </div>
+  </div>
+  <div class="typeItem type2" style="top:120px">
+    <div class="add"></div>
+    <div class="ov">
+      <div class="icon"><img src="images/icon2.png" alt=""></div>
+      <div class="val">20/90</div>
+      <div class="line"></div>
+    </div>
+  </div>
+  <div class="typeItem type3" style="top:220px">
+    <div class="add"></div>
+    <div class="ov">
+      <div class="icon"><img src="images/icon2.png" alt=""></div>
+      <div class="val">20/90</div>
+      <div class="line"></div>
+    </div>
+  </div>
+  <div class="controls">
+    <ul>
+      <li>
+        <img src="images/set1.png" alt="">
+        <div class="num">99</div>
+      </li>
+      <li>
+        <img src="images/set2.png" alt="">
+        <div class="num">99</div>
+      </li>
+      <li>
+        <img src="images/set3.png" alt="">
+        <div class="num">99</div>
+      </li>
+      <li>
+        <img src="images/set4.png" alt="">
+        <div class="num">99</div>
+      </li>
+      <li></li>
+      <li></li>
+      <li></li>
+      <li></li>
+      <li></li>
+      <li></li>
+      <li></li>
+    </ul>
+  </div>
+
+<div class="alertModel">
+  <div class="content">
+    <div class="logo"><img src="images/logo2.png" alt=""></div>
+    <div class="close"></div>
+    <div class="tab" id="tab1">
+      <div class="left">
+        <div class="hd">
+          <a href="javascript:;" class="current">Equipment</a>
+          <a href="javascript:;">Food</a>
+          <a href="javascript:;">TOOLS</a>
+          <a href="javascript:;">Materials</a>
+        </div>
+        <div class="bd">
+          <div class="model">
+            <ul>
+              <li>
+                <h2 class="h2tit"><img src="images/ic1.png" alt=""><span>Headgear</span></h2>             
+                <dl>
+                <dd>
+                  <a href="#" class="dis">Helmet of Valor</a>
+                </dd>
+                <dd>
+                  <a href="#" class="current">Helmet of Valor</a>
+                </dd>
+                <dd>
+                  <a href="#">Helmet of Valor</a>
+                </dd>
+                <dd>
+                  <a href="#">Helmet of Valor</a>
+                </dd>
+                <dd>
+                  <a href="#">Helmet of Valor</a>
+                </dd>
+                </dl>
+              </li>
+              <li>
+                <h2 class="h2tit"><img src="images/ic2.png" alt=""><span>Headgear</span></h2>             
+                <dl>
+                <dd>
+                  <a href="#" class="dis">Helmet of Valor</a>
+                </dd>
+                <dd>
+                  <a href="#" class="current">Helmet of Valor</a>
+                </dd>
+                <dd>
+                  <a href="#">Helmet of Valor</a>
+                </dd>
+                <dd>
+                  <a href="#">Helmet of Valor</a>
+                </dd>
+                <dd>
+                  <a href="#">Helmet of Valor</a>
+                </dd>
+                </dl>
+              </li>
+              <li>
+                <h2 class="h2tit"><img src="images/ic3.png" alt=""><span>Headgear</span></h2>             
+                <dl>
+                <dd>
+                  <a href="#" class="dis">Helmet of Valor</a>
+                </dd>
+                <dd>
+                  <a href="#" class="current">Helmet of Valor</a>
+                </dd>
+                <dd>
+                  <a href="#">Helmet of Valor</a>
+                </dd>
+                <dd>
+                  <a href="#">Helmet of Valor</a>
+                </dd>
+                <dd>
+                  <a href="#">Helmet of Valor</a>
+                </dd>
+                </dl>
+              </li>
+              <li>
+                <h2 class="h2tit"><img src="images/ic4.png" alt=""><span>Headgear</span></h2>             
+                <dl>
+                <dd>
+                  <a href="#" class="dis">Helmet of Valor</a>
+                </dd>
+                <dd>
+                  <a href="#" class="current">Helmet of Valor</a>
+                </dd>
+                <dd>
+                  <a href="#">Helmet of Valor</a>
+                </dd>
+                <dd>
+                  <a href="#">Helmet of Valor</a>
+                </dd>
+                <dd>
+                  <a href="#">Helmet of Valor</a>
+                </dd>
+                </dl>
+              </li>
+              <li>
+                <h2 class="h2tit"><img src="images/ic5.png" alt=""><span>Headgear</span></h2>             
+                <dl>
+                <dd>
+                  <a href="#" class="dis">Helmet of Valor</a>
+                </dd>
+                <dd>
+                  <a href="#" class="current">Helmet of Valor</a>
+                </dd>
+                <dd>
+                  <a href="#">Helmet of Valor</a>
+                </dd>
+                <dd>
+                  <a href="#">Helmet of Valor</a>
+                </dd>
+                <dd>
+                  <a href="#">Helmet of Valor</a>
+                </dd>
+                </dl>
+              </li>
+
+            </ul>
+          </div>
+          <div class="model">
+            <ul>
+              <li>
+                <h2 class="h2tit"><img src="images/ic1.png" alt=""><span>Headgear</span></h2>             
+                <dl>
+                <dd>
+                  <a href="#" class="dis">Helmet of Valor</a>
+                </dd>
+                <dd>
+                  <a href="#" class="current">Helmet of Valor</a>
+                </dd>
+                <dd>
+                  <a href="#">Helmet of Valor</a>
+                </dd>
+                <dd>
+                  <a href="#">Helmet of Valor</a>
+                </dd>
+                <dd>
+                  <a href="#">Helmet of Valor</a>
+                </dd>
+                </dl>
+              </li>
+              <li>
+                <h2 class="h2tit"><img src="images/ic2.png" alt=""><span>Headgear</span></h2>             
+                <dl>
+                <dd>
+                  <a href="#" class="dis">Helmet of Valor</a>
+                </dd>
+                <dd>
+                  <a href="#" class="current">Helmet of Valor</a>
+                </dd>
+                <dd>
+                  <a href="#">Helmet of Valor</a>
+                </dd>
+                <dd>
+                  <a href="#">Helmet of Valor</a>
+                </dd>
+                <dd>
+                  <a href="#">Helmet of Valor</a>
+                </dd>
+                </dl>
+              </li>
+              <li>
+                <h2 class="h2tit"><img src="images/ic3.png" alt=""><span>Headgear</span></h2>             
+                <dl>
+                <dd>
+                  <a href="#" class="dis">Helmet of Valor</a>
+                </dd>
+                <dd>
+                  <a href="#" class="current">Helmet of Valor</a>
+                </dd>
+                <dd>
+                  <a href="#">Helmet of Valor</a>
+                </dd>
+                <dd>
+                  <a href="#">Helmet of Valor</a>
+                </dd>
+                <dd>
+                  <a href="#">Helmet of Valor</a>
+                </dd>
+                </dl>
+              </li>
+              <li>
+                <h2 class="h2tit"><img src="images/ic4.png" alt=""><span>Headgear</span></h2>             
+                <dl>
+                <dd>
+                  <a href="#" class="dis">Helmet of Valor</a>
+                </dd>
+                <dd>
+                  <a href="#" class="current">Helmet of Valor</a>
+                </dd>
+                <dd>
+                  <a href="#">Helmet of Valor</a>
+                </dd>
+                <dd>
+                  <a href="#">Helmet of Valor</a>
+                </dd>
+                <dd>
+                  <a href="#">Helmet of Valor</a>
+                </dd>
+                </dl>
+              </li>
+              <li>
+                <h2 class="h2tit"><img src="images/ic5.png" alt=""><span>Headgear</span></h2>             
+                <dl>
+                <dd>
+                  <a href="#" class="dis">Helmet of Valor</a>
+                </dd>
+                <dd>
+                  <a href="#" class="current">Helmet of Valor</a>
+                </dd>
+                <dd>
+                  <a href="#">Helmet of Valor</a>
+                </dd>
+                <dd>
+                  <a href="#">Helmet of Valor</a>
+                </dd>
+                <dd>
+                  <a href="#">Helmet of Valor</a>
+                </dd>
+                </dl>
+              </li>
+
+            </ul>
+          </div>
+          <div class="model">
+            <ul>
+              <li>
+                <h2 class="h2tit"><img src="images/ic1.png" alt=""><span>Headgear</span></h2>             
+                <dl>
+                <dd>
+                  <a href="#" class="dis">Helmet of Valor</a>
+                </dd>
+                <dd>
+                  <a href="#" class="current">Helmet of Valor</a>
+                </dd>
+                <dd>
+                  <a href="#">Helmet of Valor</a>
+                </dd>
+                <dd>
+                  <a href="#">Helmet of Valor</a>
+                </dd>
+                <dd>
+                  <a href="#">Helmet of Valor</a>
+                </dd>
+                </dl>
+              </li>
+              <li>
+                <h2 class="h2tit"><img src="images/ic2.png" alt=""><span>Headgear</span></h2>             
+                <dl>
+                <dd>
+                  <a href="#" class="dis">Helmet of Valor</a>
+                </dd>
+                <dd>
+                  <a href="#" class="current">Helmet of Valor</a>
+                </dd>
+                <dd>
+                  <a href="#">Helmet of Valor</a>
+                </dd>
+                <dd>
+                  <a href="#">Helmet of Valor</a>
+                </dd>
+                <dd>
+                  <a href="#">Helmet of Valor</a>
+                </dd>
+                </dl>
+              </li>
+              <li>
+                <h2 class="h2tit"><img src="images/ic3.png" alt=""><span>Headgear</span></h2>             
+                <dl>
+                <dd>
+                  <a href="#" class="dis">Helmet of Valor</a>
+                </dd>
+                <dd>
+                  <a href="#" class="current">Helmet of Valor</a>
+                </dd>
+                <dd>
+                  <a href="#">Helmet of Valor</a>
+                </dd>
+                <dd>
+                  <a href="#">Helmet of Valor</a>
+                </dd>
+                <dd>
+                  <a href="#">Helmet of Valor</a>
+                </dd>
+                </dl>
+              </li>
+              <li>
+                <h2 class="h2tit"><img src="images/ic4.png" alt=""><span>Headgear</span></h2>             
+                <dl>
+                <dd>
+                  <a href="#" class="dis">Helmet of Valor</a>
+                </dd>
+                <dd>
+                  <a href="#" class="current">Helmet of Valor</a>
+                </dd>
+                <dd>
+                  <a href="#">Helmet of Valor</a>
+                </dd>
+                <dd>
+                  <a href="#">Helmet of Valor</a>
+                </dd>
+                <dd>
+                  <a href="#">Helmet of Valor</a>
+                </dd>
+                </dl>
+              </li>
+              <li>
+                <h2 class="h2tit"><img src="images/ic5.png" alt=""><span>Headgear</span></h2>             
+                <dl>
+                <dd>
+                  <a href="#" class="dis">Helmet of Valor</a>
+                </dd>
+                <dd>
+                  <a href="#" class="current">Helmet of Valor</a>
+                </dd>
+                <dd>
+                  <a href="#">Helmet of Valor</a>
+                </dd>
+                <dd>
+                  <a href="#">Helmet of Valor</a>
+                </dd>
+                <dd>
+                  <a href="#">Helmet of Valor</a>
+                </dd>
+                </dl>
+              </li>
+
+            </ul>
+          </div>
+          <div class="model">
+            <ul>
+              <li>
+                <h2 class="h2tit"><img src="images/ic1.png" alt=""><span>Headgear</span></h2>             
+                <dl>
+                <dd>
+                  <a href="#" class="dis">Helmet of Valor</a>
+                </dd>
+                <dd>
+                  <a href="#" class="current">Helmet of Valor</a>
+                </dd>
+                <dd>
+                  <a href="#">Helmet of Valor</a>
+                </dd>
+                <dd>
+                  <a href="#">Helmet of Valor</a>
+                </dd>
+                <dd>
+                  <a href="#">Helmet of Valor</a>
+                </dd>
+                </dl>
+              </li>
+              <li>
+                <h2 class="h2tit"><img src="images/ic2.png" alt=""><span>Headgear</span></h2>             
+                <dl>
+                <dd>
+                  <a href="#" class="dis">Helmet of Valor</a>
+                </dd>
+                <dd>
+                  <a href="#" class="current">Helmet of Valor</a>
+                </dd>
+                <dd>
+                  <a href="#">Helmet of Valor</a>
+                </dd>
+                <dd>
+                  <a href="#">Helmet of Valor</a>
+                </dd>
+                <dd>
+                  <a href="#">Helmet of Valor</a>
+                </dd>
+                </dl>
+              </li>
+              <li>
+                <h2 class="h2tit"><img src="images/ic3.png" alt=""><span>Headgear</span></h2>             
+                <dl>
+                <dd>
+                  <a href="#" class="dis">Helmet of Valor</a>
+                </dd>
+                <dd>
+                  <a href="#" class="current">Helmet of Valor</a>
+                </dd>
+                <dd>
+                  <a href="#">Helmet of Valor</a>
+                </dd>
+                <dd>
+                  <a href="#">Helmet of Valor</a>
+                </dd>
+                <dd>
+                  <a href="#">Helmet of Valor</a>
+                </dd>
+                </dl>
+              </li>
+              <li>
+                <h2 class="h2tit"><img src="images/ic4.png" alt=""><span>Headgear</span></h2>             
+                <dl>
+                <dd>
+                  <a href="#" class="dis">Helmet of Valor</a>
+                </dd>
+                <dd>
+                  <a href="#" class="current">Helmet of Valor</a>
+                </dd>
+                <dd>
+                  <a href="#">Helmet of Valor</a>
+                </dd>
+                <dd>
+                  <a href="#">Helmet of Valor</a>
+                </dd>
+                <dd>
+                  <a href="#">Helmet of Valor</a>
+                </dd>
+                </dl>
+              </li>
+              <li>
+                <h2 class="h2tit"><img src="images/ic5.png" alt=""><span>Headgear</span></h2>             
+                <dl>
+                <dd>
+                  <a href="#" class="dis">Helmet of Valor</a>
+                </dd>
+                <dd>
+                  <a href="#" class="current">Helmet of Valor</a>
+                </dd>
+                <dd>
+                  <a href="#">Helmet of Valor</a>
+                </dd>
+                <dd>
+                  <a href="#">Helmet of Valor</a>
+                </dd>
+                <dd>
+                  <a href="#">Helmet of Valor</a>
+                </dd>
+                </dl>
+              </li>
+
+            </ul>
+          </div>
+        </div>
+        <div class="check">
+          <span>Show craftable gea</span>
+        </div>
+      </div>
+      <div class="right">
+        <div class="type1">
+          <div class="title">Ingredient Recipe</div>
+          <div class="list">
+            <ul>
+              <li></li>
+              <li></li>
+              <li></li>
+              <li></li>
+              <li></li>
+              <li></li>
+              <li></li>
+              <li></li>
+              <li></li>
+              <li></li>
+            </ul>
+          </div>
+          <div class="title2"><img src="images/ic1.png" alt=""><span>Feathered Crest</span></div>
+          <div class="num">
+            <i class="ic1"></i>
+            <input type="text" value="10" class="words">
+            <i class="ic2"></i>
+          </div>
+          <a href="javascript:;" class="Craft">Craft</a>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+
+
+
+<div class="alertModel">
+  <div class="content">
+    <div class="logo"><img src="images/logo2.png" alt=""></div>
+    <div class="close"></div>
+    <div class="tab" id="tab2">
+      <div class="left">
+        <div class="hd">
+          <a href="javascript:;" class="current">Equipment</a>
+          <a href="javascript:;">Food</a>
+          <a href="javascript:;">TOOLS</a>
+          <a href="javascript:;">Materials</a>
+        </div>
+        <div class="bd">
+          <div class="model">
+            <ul>
+              <li>
+                <h2 class="h2tit"><img src="images/ic1.png" alt=""><span>Headgear</span></h2>             
+                <dl>
+                <dd>
+                  <a href="#" class="dis">Helmet of Valor</a>
+                </dd>
+                <dd>
+                  <a href="#" class="current">Helmet of Valor</a>
+                </dd>
+                <dd>
+                  <a href="#">Helmet of Valor</a>
+                </dd>
+                <dd>
+                  <a href="#">Helmet of Valor</a>
+                </dd>
+                <dd>
+                  <a href="#">Helmet of Valor</a>
+                </dd>
+                </dl>
+              </li>
+              <li>
+                <h2 class="h2tit"><img src="images/ic2.png" alt=""><span>Headgear</span></h2>             
+                <dl>
+                <dd>
+                  <a href="#" class="dis">Helmet of Valor</a>
+                </dd>
+                <dd>
+                  <a href="#" class="current">Helmet of Valor</a>
+                </dd>
+                <dd>
+                  <a href="#">Helmet of Valor</a>
+                </dd>
+                <dd>
+                  <a href="#">Helmet of Valor</a>
+                </dd>
+                <dd>
+                  <a href="#">Helmet of Valor</a>
+                </dd>
+                </dl>
+              </li>
+              <li>
+                <h2 class="h2tit"><img src="images/ic3.png" alt=""><span>Headgear</span></h2>             
+                <dl>
+                <dd>
+                  <a href="#" class="dis">Helmet of Valor</a>
+                </dd>
+                <dd>
+                  <a href="#" class="current">Helmet of Valor</a>
+                </dd>
+                <dd>
+                  <a href="#">Helmet of Valor</a>
+                </dd>
+                <dd>
+                  <a href="#">Helmet of Valor</a>
+                </dd>
+                <dd>
+                  <a href="#">Helmet of Valor</a>
+                </dd>
+                </dl>
+              </li>
+              <li>
+                <h2 class="h2tit"><img src="images/ic4.png" alt=""><span>Headgear</span></h2>             
+                <dl>
+                <dd>
+                  <a href="#" class="dis">Helmet of Valor</a>
+                </dd>
+                <dd>
+                  <a href="#" class="current">Helmet of Valor</a>
+                </dd>
+                <dd>
+                  <a href="#">Helmet of Valor</a>
+                </dd>
+                <dd>
+                  <a href="#">Helmet of Valor</a>
+                </dd>
+                <dd>
+                  <a href="#">Helmet of Valor</a>
+                </dd>
+                </dl>
+              </li>
+              <li>
+                <h2 class="h2tit"><img src="images/ic5.png" alt=""><span>Headgear</span></h2>             
+                <dl>
+                <dd>
+                  <a href="#" class="dis">Helmet of Valor</a>
+                </dd>
+                <dd>
+                  <a href="#" class="current">Helmet of Valor</a>
+                </dd>
+                <dd>
+                  <a href="#">Helmet of Valor</a>
+                </dd>
+                <dd>
+                  <a href="#">Helmet of Valor</a>
+                </dd>
+                <dd>
+                  <a href="#">Helmet of Valor</a>
+                </dd>
+                </dl>
+              </li>
+
+            </ul>
+          </div>
+          <div class="model">
+            <ul>
+              <li>
+                <h2 class="h2tit"><img src="images/ic1.png" alt=""><span>Headgear</span></h2>             
+                <dl>
+                <dd>
+                  <a href="#" class="dis">Helmet of Valor</a>
+                </dd>
+                <dd>
+                  <a href="#" class="current">Helmet of Valor</a>
+                </dd>
+                <dd>
+                  <a href="#">Helmet of Valor</a>
+                </dd>
+                <dd>
+                  <a href="#">Helmet of Valor</a>
+                </dd>
+                <dd>
+                  <a href="#">Helmet of Valor</a>
+                </dd>
+                </dl>
+              </li>
+              <li>
+                <h2 class="h2tit"><img src="images/ic2.png" alt=""><span>Headgear</span></h2>             
+                <dl>
+                <dd>
+                  <a href="#" class="dis">Helmet of Valor</a>
+                </dd>
+                <dd>
+                  <a href="#" class="current">Helmet of Valor</a>
+                </dd>
+                <dd>
+                  <a href="#">Helmet of Valor</a>
+                </dd>
+                <dd>
+                  <a href="#">Helmet of Valor</a>
+                </dd>
+                <dd>
+                  <a href="#">Helmet of Valor</a>
+                </dd>
+                </dl>
+              </li>
+              <li>
+                <h2 class="h2tit"><img src="images/ic3.png" alt=""><span>Headgear</span></h2>             
+                <dl>
+                <dd>
+                  <a href="#" class="dis">Helmet of Valor</a>
+                </dd>
+                <dd>
+                  <a href="#" class="current">Helmet of Valor</a>
+                </dd>
+                <dd>
+                  <a href="#">Helmet of Valor</a>
+                </dd>
+                <dd>
+                  <a href="#">Helmet of Valor</a>
+                </dd>
+                <dd>
+                  <a href="#">Helmet of Valor</a>
+                </dd>
+                </dl>
+              </li>
+              <li>
+                <h2 class="h2tit"><img src="images/ic4.png" alt=""><span>Headgear</span></h2>             
+                <dl>
+                <dd>
+                  <a href="#" class="dis">Helmet of Valor</a>
+                </dd>
+                <dd>
+                  <a href="#" class="current">Helmet of Valor</a>
+                </dd>
+                <dd>
+                  <a href="#">Helmet of Valor</a>
+                </dd>
+                <dd>
+                  <a href="#">Helmet of Valor</a>
+                </dd>
+                <dd>
+                  <a href="#">Helmet of Valor</a>
+                </dd>
+                </dl>
+              </li>
+              <li>
+                <h2 class="h2tit"><img src="images/ic5.png" alt=""><span>Headgear</span></h2>             
+                <dl>
+                <dd>
+                  <a href="#" class="dis">Helmet of Valor</a>
+                </dd>
+                <dd>
+                  <a href="#" class="current">Helmet of Valor</a>
+                </dd>
+                <dd>
+                  <a href="#">Helmet of Valor</a>
+                </dd>
+                <dd>
+                  <a href="#">Helmet of Valor</a>
+                </dd>
+                <dd>
+                  <a href="#">Helmet of Valor</a>
+                </dd>
+                </dl>
+              </li>
+
+            </ul>
+          </div>
+          <div class="model">
+            <ul>
+              <li>
+                <h2 class="h2tit"><img src="images/ic1.png" alt=""><span>Headgear</span></h2>             
+                <dl>
+                <dd>
+                  <a href="#" class="dis">Helmet of Valor</a>
+                </dd>
+                <dd>
+                  <a href="#" class="current">Helmet of Valor</a>
+                </dd>
+                <dd>
+                  <a href="#">Helmet of Valor</a>
+                </dd>
+                <dd>
+                  <a href="#">Helmet of Valor</a>
+                </dd>
+                <dd>
+                  <a href="#">Helmet of Valor</a>
+                </dd>
+                </dl>
+              </li>
+              <li>
+                <h2 class="h2tit"><img src="images/ic2.png" alt=""><span>Headgear</span></h2>             
+                <dl>
+                <dd>
+                  <a href="#" class="dis">Helmet of Valor</a>
+                </dd>
+                <dd>
+                  <a href="#" class="current">Helmet of Valor</a>
+                </dd>
+                <dd>
+                  <a href="#">Helmet of Valor</a>
+                </dd>
+                <dd>
+                  <a href="#">Helmet of Valor</a>
+                </dd>
+                <dd>
+                  <a href="#">Helmet of Valor</a>
+                </dd>
+                </dl>
+              </li>
+              <li>
+                <h2 class="h2tit"><img src="images/ic3.png" alt=""><span>Headgear</span></h2>             
+                <dl>
+                <dd>
+                  <a href="#" class="dis">Helmet of Valor</a>
+                </dd>
+                <dd>
+                  <a href="#" class="current">Helmet of Valor</a>
+                </dd>
+                <dd>
+                  <a href="#">Helmet of Valor</a>
+                </dd>
+                <dd>
+                  <a href="#">Helmet of Valor</a>
+                </dd>
+                <dd>
+                  <a href="#">Helmet of Valor</a>
+                </dd>
+                </dl>
+              </li>
+              <li>
+                <h2 class="h2tit"><img src="images/ic4.png" alt=""><span>Headgear</span></h2>             
+                <dl>
+                <dd>
+                  <a href="#" class="dis">Helmet of Valor</a>
+                </dd>
+                <dd>
+                  <a href="#" class="current">Helmet of Valor</a>
+                </dd>
+                <dd>
+                  <a href="#">Helmet of Valor</a>
+                </dd>
+                <dd>
+                  <a href="#">Helmet of Valor</a>
+                </dd>
+                <dd>
+                  <a href="#">Helmet of Valor</a>
+                </dd>
+                </dl>
+              </li>
+              <li>
+                <h2 class="h2tit"><img src="images/ic5.png" alt=""><span>Headgear</span></h2>             
+                <dl>
+                <dd>
+                  <a href="#" class="dis">Helmet of Valor</a>
+                </dd>
+                <dd>
+                  <a href="#" class="current">Helmet of Valor</a>
+                </dd>
+                <dd>
+                  <a href="#">Helmet of Valor</a>
+                </dd>
+                <dd>
+                  <a href="#">Helmet of Valor</a>
+                </dd>
+                <dd>
+                  <a href="#">Helmet of Valor</a>
+                </dd>
+                </dl>
+              </li>
+
+            </ul>
+          </div>
+          <div class="model">
+            <ul>
+              <li>
+                <h2 class="h2tit"><img src="images/ic1.png" alt=""><span>Headgear</span></h2>             
+                <dl>
+                <dd>
+                  <a href="#" class="dis">Helmet of Valor</a>
+                </dd>
+                <dd>
+                  <a href="#" class="current">Helmet of Valor</a>
+                </dd>
+                <dd>
+                  <a href="#">Helmet of Valor</a>
+                </dd>
+                <dd>
+                  <a href="#">Helmet of Valor</a>
+                </dd>
+                <dd>
+                  <a href="#">Helmet of Valor</a>
+                </dd>
+                </dl>
+              </li>
+              <li>
+                <h2 class="h2tit"><img src="images/ic2.png" alt=""><span>Headgear</span></h2>             
+                <dl>
+                <dd>
+                  <a href="#" class="dis">Helmet of Valor</a>
+                </dd>
+                <dd>
+                  <a href="#" class="current">Helmet of Valor</a>
+                </dd>
+                <dd>
+                  <a href="#">Helmet of Valor</a>
+                </dd>
+                <dd>
+                  <a href="#">Helmet of Valor</a>
+                </dd>
+                <dd>
+                  <a href="#">Helmet of Valor</a>
+                </dd>
+                </dl>
+              </li>
+              <li>
+                <h2 class="h2tit"><img src="images/ic3.png" alt=""><span>Headgear</span></h2>             
+                <dl>
+                <dd>
+                  <a href="#" class="dis">Helmet of Valor</a>
+                </dd>
+                <dd>
+                  <a href="#" class="current">Helmet of Valor</a>
+                </dd>
+                <dd>
+                  <a href="#">Helmet of Valor</a>
+                </dd>
+                <dd>
+                  <a href="#">Helmet of Valor</a>
+                </dd>
+                <dd>
+                  <a href="#">Helmet of Valor</a>
+                </dd>
+                </dl>
+              </li>
+              <li>
+                <h2 class="h2tit"><img src="images/ic4.png" alt=""><span>Headgear</span></h2>             
+                <dl>
+                <dd>
+                  <a href="#" class="dis">Helmet of Valor</a>
+                </dd>
+                <dd>
+                  <a href="#" class="current">Helmet of Valor</a>
+                </dd>
+                <dd>
+                  <a href="#">Helmet of Valor</a>
+                </dd>
+                <dd>
+                  <a href="#">Helmet of Valor</a>
+                </dd>
+                <dd>
+                  <a href="#">Helmet of Valor</a>
+                </dd>
+                </dl>
+              </li>
+              <li>
+                <h2 class="h2tit"><img src="images/ic5.png" alt=""><span>Headgear</span></h2>             
+                <dl>
+                <dd>
+                  <a href="#" class="dis">Helmet of Valor</a>
+                </dd>
+                <dd>
+                  <a href="#" class="current">Helmet of Valor</a>
+                </dd>
+                <dd>
+                  <a href="#">Helmet of Valor</a>
+                </dd>
+                <dd>
+                  <a href="#">Helmet of Valor</a>
+                </dd>
+                <dd>
+                  <a href="#">Helmet of Valor</a>
+                </dd>
+                </dl>
+              </li>
+
+            </ul>
+          </div>
+        </div>
+        <div class="check">
+          <span>Show craftable gea</span>
+        </div>
+      </div>
+      <div class="right">
+        <div class="none">Select equipment on the left to view crafting recipes</div>
+      </div>
+    </div>
+  </div>
+</div>
+
+
+
+
+<div class="alertModel">
+  <div class="content">
+    <div class="logo"><img src="images/logo2.png" alt=""></div>
+    <div class="close"></div>
+    <div class="tab"  id="tab3">
+      <div class="left">
+        <div class="hd">
+          <a href="javascript:;" class="current">Equipment</a>
+          <a href="javascript:;">Food</a>
+          <a href="javascript:;">TOOLS</a>
+          <a href="javascript:;">Materials</a>
+        </div>
+        <div class="bd">
+          <div class="model">
+            <ul>
+              <li>
+                <h2 class="h2tit"><img src="images/ic1.png" alt=""><span>Headgear</span></h2>             
+                <dl>
+                <dd>
+                  <a href="#" class="dis">Helmet of Valor</a>
+                </dd>
+                <dd>
+                  <a href="#" class="current">Helmet of Valor</a>
+                </dd>
+                <dd>
+                  <a href="#">Helmet of Valor</a>
+                </dd>
+                <dd>
+                  <a href="#">Helmet of Valor</a>
+                </dd>
+                <dd>
+                  <a href="#">Helmet of Valor</a>
+                </dd>
+                </dl>
+              </li>
+              <li>
+                <h2 class="h2tit"><img src="images/ic2.png" alt=""><span>Headgear</span></h2>             
+                <dl>
+                <dd>
+                  <a href="#" class="dis">Helmet of Valor</a>
+                </dd>
+                <dd>
+                  <a href="#" class="current">Helmet of Valor</a>
+                </dd>
+                <dd>
+                  <a href="#">Helmet of Valor</a>
+                </dd>
+                <dd>
+                  <a href="#">Helmet of Valor</a>
+                </dd>
+                <dd>
+                  <a href="#">Helmet of Valor</a>
+                </dd>
+                </dl>
+              </li>
+              <li>
+                <h2 class="h2tit"><img src="images/ic3.png" alt=""><span>Headgear</span></h2>             
+                <dl>
+                <dd>
+                  <a href="#" class="dis">Helmet of Valor</a>
+                </dd>
+                <dd>
+                  <a href="#" class="current">Helmet of Valor</a>
+                </dd>
+                <dd>
+                  <a href="#">Helmet of Valor</a>
+                </dd>
+                <dd>
+                  <a href="#">Helmet of Valor</a>
+                </dd>
+                <dd>
+                  <a href="#">Helmet of Valor</a>
+                </dd>
+                </dl>
+              </li>
+              <li>
+                <h2 class="h2tit"><img src="images/ic4.png" alt=""><span>Headgear</span></h2>             
+                <dl>
+                <dd>
+                  <a href="#" class="dis">Helmet of Valor</a>
+                </dd>
+                <dd>
+                  <a href="#" class="current">Helmet of Valor</a>
+                </dd>
+                <dd>
+                  <a href="#">Helmet of Valor</a>
+                </dd>
+                <dd>
+                  <a href="#">Helmet of Valor</a>
+                </dd>
+                <dd>
+                  <a href="#">Helmet of Valor</a>
+                </dd>
+                </dl>
+              </li>
+              <li>
+                <h2 class="h2tit"><img src="images/ic5.png" alt=""><span>Headgear</span></h2>             
+                <dl>
+                <dd>
+                  <a href="#" class="dis">Helmet of Valor</a>
+                </dd>
+                <dd>
+                  <a href="#" class="current">Helmet of Valor</a>
+                </dd>
+                <dd>
+                  <a href="#">Helmet of Valor</a>
+                </dd>
+                <dd>
+                  <a href="#">Helmet of Valor</a>
+                </dd>
+                <dd>
+                  <a href="#">Helmet of Valor</a>
+                </dd>
+                </dl>
+              </li>
+
+            </ul>
+          </div>
+          <div class="model">
+            <ul>
+              <li>
+                <h2 class="h2tit"><img src="images/ic1.png" alt=""><span>Headgear</span></h2>             
+                <dl>
+                <dd>
+                  <a href="#" class="dis">Helmet of Valor</a>
+                </dd>
+                <dd>
+                  <a href="#" class="current">Helmet of Valor</a>
+                </dd>
+                <dd>
+                  <a href="#">Helmet of Valor</a>
+                </dd>
+                <dd>
+                  <a href="#">Helmet of Valor</a>
+                </dd>
+                <dd>
+                  <a href="#">Helmet of Valor</a>
+                </dd>
+                </dl>
+              </li>
+              <li>
+                <h2 class="h2tit"><img src="images/ic2.png" alt=""><span>Headgear</span></h2>             
+                <dl>
+                <dd>
+                  <a href="#" class="dis">Helmet of Valor</a>
+                </dd>
+                <dd>
+                  <a href="#" class="current">Helmet of Valor</a>
+                </dd>
+                <dd>
+                  <a href="#">Helmet of Valor</a>
+                </dd>
+                <dd>
+                  <a href="#">Helmet of Valor</a>
+                </dd>
+                <dd>
+                  <a href="#">Helmet of Valor</a>
+                </dd>
+                </dl>
+              </li>
+              <li>
+                <h2 class="h2tit"><img src="images/ic3.png" alt=""><span>Headgear</span></h2>             
+                <dl>
+                <dd>
+                  <a href="#" class="dis">Helmet of Valor</a>
+                </dd>
+                <dd>
+                  <a href="#" class="current">Helmet of Valor</a>
+                </dd>
+                <dd>
+                  <a href="#">Helmet of Valor</a>
+                </dd>
+                <dd>
+                  <a href="#">Helmet of Valor</a>
+                </dd>
+                <dd>
+                  <a href="#">Helmet of Valor</a>
+                </dd>
+                </dl>
+              </li>
+              <li>
+                <h2 class="h2tit"><img src="images/ic4.png" alt=""><span>Headgear</span></h2>             
+                <dl>
+                <dd>
+                  <a href="#" class="dis">Helmet of Valor</a>
+                </dd>
+                <dd>
+                  <a href="#" class="current">Helmet of Valor</a>
+                </dd>
+                <dd>
+                  <a href="#">Helmet of Valor</a>
+                </dd>
+                <dd>
+                  <a href="#">Helmet of Valor</a>
+                </dd>
+                <dd>
+                  <a href="#">Helmet of Valor</a>
+                </dd>
+                </dl>
+              </li>
+              <li>
+                <h2 class="h2tit"><img src="images/ic5.png" alt=""><span>Headgear</span></h2>             
+                <dl>
+                <dd>
+                  <a href="#" class="dis">Helmet of Valor</a>
+                </dd>
+                <dd>
+                  <a href="#" class="current">Helmet of Valor</a>
+                </dd>
+                <dd>
+                  <a href="#">Helmet of Valor</a>
+                </dd>
+                <dd>
+                  <a href="#">Helmet of Valor</a>
+                </dd>
+                <dd>
+                  <a href="#">Helmet of Valor</a>
+                </dd>
+                </dl>
+              </li>
+
+            </ul>
+          </div>
+          <div class="model">
+            <ul>
+              <li>
+                <h2 class="h2tit"><img src="images/ic1.png" alt=""><span>Headgear</span></h2>             
+                <dl>
+                <dd>
+                  <a href="#" class="dis">Helmet of Valor</a>
+                </dd>
+                <dd>
+                  <a href="#" class="current">Helmet of Valor</a>
+                </dd>
+                <dd>
+                  <a href="#">Helmet of Valor</a>
+                </dd>
+                <dd>
+                  <a href="#">Helmet of Valor</a>
+                </dd>
+                <dd>
+                  <a href="#">Helmet of Valor</a>
+                </dd>
+                </dl>
+              </li>
+              <li>
+                <h2 class="h2tit"><img src="images/ic2.png" alt=""><span>Headgear</span></h2>             
+                <dl>
+                <dd>
+                  <a href="#" class="dis">Helmet of Valor</a>
+                </dd>
+                <dd>
+                  <a href="#" class="current">Helmet of Valor</a>
+                </dd>
+                <dd>
+                  <a href="#">Helmet of Valor</a>
+                </dd>
+                <dd>
+                  <a href="#">Helmet of Valor</a>
+                </dd>
+                <dd>
+                  <a href="#">Helmet of Valor</a>
+                </dd>
+                </dl>
+              </li>
+              <li>
+                <h2 class="h2tit"><img src="images/ic3.png" alt=""><span>Headgear</span></h2>             
+                <dl>
+                <dd>
+                  <a href="#" class="dis">Helmet of Valor</a>
+                </dd>
+                <dd>
+                  <a href="#" class="current">Helmet of Valor</a>
+                </dd>
+                <dd>
+                  <a href="#">Helmet of Valor</a>
+                </dd>
+                <dd>
+                  <a href="#">Helmet of Valor</a>
+                </dd>
+                <dd>
+                  <a href="#">Helmet of Valor</a>
+                </dd>
+                </dl>
+              </li>
+              <li>
+                <h2 class="h2tit"><img src="images/ic4.png" alt=""><span>Headgear</span></h2>             
+                <dl>
+                <dd>
+                  <a href="#" class="dis">Helmet of Valor</a>
+                </dd>
+                <dd>
+                  <a href="#" class="current">Helmet of Valor</a>
+                </dd>
+                <dd>
+                  <a href="#">Helmet of Valor</a>
+                </dd>
+                <dd>
+                  <a href="#">Helmet of Valor</a>
+                </dd>
+                <dd>
+                  <a href="#">Helmet of Valor</a>
+                </dd>
+                </dl>
+              </li>
+              <li>
+                <h2 class="h2tit"><img src="images/ic5.png" alt=""><span>Headgear</span></h2>             
+                <dl>
+                <dd>
+                  <a href="#" class="dis">Helmet of Valor</a>
+                </dd>
+                <dd>
+                  <a href="#" class="current">Helmet of Valor</a>
+                </dd>
+                <dd>
+                  <a href="#">Helmet of Valor</a>
+                </dd>
+                <dd>
+                  <a href="#">Helmet of Valor</a>
+                </dd>
+                <dd>
+                  <a href="#">Helmet of Valor</a>
+                </dd>
+                </dl>
+              </li>
+
+            </ul>
+          </div>
+          <div class="model">
+            <ul>
+              <li>
+                <h2 class="h2tit"><img src="images/ic1.png" alt=""><span>Headgear</span></h2>             
+                <dl>
+                <dd>
+                  <a href="#" class="dis">Helmet of Valor</a>
+                </dd>
+                <dd>
+                  <a href="#" class="current">Helmet of Valor</a>
+                </dd>
+                <dd>
+                  <a href="#">Helmet of Valor</a>
+                </dd>
+                <dd>
+                  <a href="#">Helmet of Valor</a>
+                </dd>
+                <dd>
+                  <a href="#">Helmet of Valor</a>
+                </dd>
+                </dl>
+              </li>
+              <li>
+                <h2 class="h2tit"><img src="images/ic2.png" alt=""><span>Headgear</span></h2>             
+                <dl>
+                <dd>
+                  <a href="#" class="dis">Helmet of Valor</a>
+                </dd>
+                <dd>
+                  <a href="#" class="current">Helmet of Valor</a>
+                </dd>
+                <dd>
+                  <a href="#">Helmet of Valor</a>
+                </dd>
+                <dd>
+                  <a href="#">Helmet of Valor</a>
+                </dd>
+                <dd>
+                  <a href="#">Helmet of Valor</a>
+                </dd>
+                </dl>
+              </li>
+              <li>
+                <h2 class="h2tit"><img src="images/ic3.png" alt=""><span>Headgear</span></h2>             
+                <dl>
+                <dd>
+                  <a href="#" class="dis">Helmet of Valor</a>
+                </dd>
+                <dd>
+                  <a href="#" class="current">Helmet of Valor</a>
+                </dd>
+                <dd>
+                  <a href="#">Helmet of Valor</a>
+                </dd>
+                <dd>
+                  <a href="#">Helmet of Valor</a>
+                </dd>
+                <dd>
+                  <a href="#">Helmet of Valor</a>
+                </dd>
+                </dl>
+              </li>
+              <li>
+                <h2 class="h2tit"><img src="images/ic4.png" alt=""><span>Headgear</span></h2>             
+                <dl>
+                <dd>
+                  <a href="#" class="dis">Helmet of Valor</a>
+                </dd>
+                <dd>
+                  <a href="#" class="current">Helmet of Valor</a>
+                </dd>
+                <dd>
+                  <a href="#">Helmet of Valor</a>
+                </dd>
+                <dd>
+                  <a href="#">Helmet of Valor</a>
+                </dd>
+                <dd>
+                  <a href="#">Helmet of Valor</a>
+                </dd>
+                </dl>
+              </li>
+              <li>
+                <h2 class="h2tit"><img src="images/ic5.png" alt=""><span>Headgear</span></h2>             
+                <dl>
+                <dd>
+                  <a href="#" class="dis">Helmet of Valor</a>
+                </dd>
+                <dd>
+                  <a href="#" class="current">Helmet of Valor</a>
+                </dd>
+                <dd>
+                  <a href="#">Helmet of Valor</a>
+                </dd>
+                <dd>
+                  <a href="#">Helmet of Valor</a>
+                </dd>
+                <dd>
+                  <a href="#">Helmet of Valor</a>
+                </dd>
+                </dl>
+              </li>
+
+            </ul>
+          </div>
+        </div>
+        <div class="check">
+          <span>Show craftable gea</span>
+        </div>
+      </div>
+      <div class="right">
+        <div class="type2">
+          <div class="title">Crafting Complete</div>
+          <div class="list2">
+            <ul>
+              <li>
+                <div class="infor1">
+                  <div class="icon"><img src="images/ic1.png" alt=""></div>
+                  <div class="tit">Feathered Crest</div>
+                </div>
+                <div class="dec">
+                  <p>Healthy:+20</p>
+                  <p>power:+20</p>
+                  <p>Healthy:+20</p>
+                  <p>power:+20</p>
+                </div>
+              </li>
+              <li>
+                <div class="infor1">
+                  <div class="icon"><img src="images/ic1.png" alt=""></div>
+                  <div class="tit">Feathered Crest</div>
+                </div>
+                <div class="dec">
+                  <p>Healthy:+20</p>
+                  <p>power:+20</p>
+                  <p>Healthy:+20</p>
+                  <p>power:+20</p>
+                </div>
+              </li>
+              <li>
+                <div class="infor1">
+                  <div class="icon"><img src="images/ic1.png" alt=""></div>
+                  <div class="tit">Feathered Crest</div>
+                </div>
+                <div class="dec">
+                  <p>Healthy:+20</p>
+                  <p>power:+20</p>
+                  <p>Healthy:+20</p>
+                  <p>power:+20</p>
+                </div>
+              </li>
+              <li>
+                <div class="infor1">
+                  <div class="icon"><img src="images/ic1.png" alt=""></div>
+                  <div class="tit">Feathered Crest</div>
+                </div>
+                <div class="dec">
+                  <p>Healthy:+20</p>
+                  <p>power:+20</p>
+                  <p>Healthy:+20</p>
+                  <p>power:+20</p>
+                </div>
+              </li>
+              <li>
+                <div class="infor1">
+                  <div class="icon"><img src="images/ic1.png" alt=""></div>
+                  <div class="tit">Feathered Crest</div>
+                </div>
+                <div class="dec">
+                  <p>Healthy:+20</p>
+                  <p>power:+20</p>
+                  <p>Healthy:+20</p>
+                  <p>power:+20</p>
+                </div>
+              </li>
+              <li>
+                <div class="infor1">
+                  <div class="icon"><img src="images/ic1.png" alt=""></div>
+                  <div class="tit">Feathered Crest</div>
+                </div>
+                <div class="dec">
+                  <p>Healthy:+20</p>
+                  <p>power:+20</p>
+                  <p>Healthy:+20</p>
+                  <p>power:+20</p>
+                </div>
+              </li>
+            </ul>
+          </div>
+          <a href="javascript:;" class="Craft">confirm</a>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+
+
+
+
+
+</div>
+
+
+
+<script src="js/jquery.min.js"></script>
+<script type="text/javascript" src="js/swiper.min.js"></script>
+<script type="text/javascript" src="js/wow.min.js"></script>
+<script type="text/javascript" src="js/global.js"></script>
+</body>
+</html>