.demo{text-align:center}
.button {display: inline-block;outline: none;cursor: pointer;text-align: center;text-decoration: none;font: 22px/100% 'Microsoft yahei',Arial, Helvetica, sans-serif;padding: .5em 2em .55em;text-shadow: 0 1px 1px rgba(0,0,0,.3);-webkit-border-radius: .5em; -moz-border-radius: .5em;border-radius: .5em;-webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2);-moz-box-shadow: 0 1px 2px rgba(0,0,0,.2);box-shadow: 0 1px 2px rgba(0,0,0,.2); }
.button:hover {text-decoration: none;}
.button:active {position: relative;top: 1px;}
/* green */
.green {color: #e8f0de;border: solid 1px #538312;background: #64991e;background: -webkit-gradient(linear, left top, left bottom, from(#7db72f), to(#4e7d0e));background: -moz-linear-gradient(top,  #7db72f,  #4e7d0e);filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#7db72f', endColorstr='#4e7d0e');}
.green:hover {background: #538018;background: -webkit-gradient(linear, left top, left bottom, from(#6b9d28), to(#436b0c));background: -moz-linear-gradient(top,  #6b9d28,  #436b0c);filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#6b9d28', endColorstr='#436b0c');color:#fff}
.green:active {color: #a9c08c;background: -webkit-gradient(linear, left top, left bottom, from(#4e7d0e), to(#7db72f));background: -moz-linear-gradient(top,  #4e7d0e,  #7db72f);filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#4e7d0e', endColorstr='#7db72f');}
#walkthrough-content{display:none}
#walkthrough-content h3{height:30px; line-height:30px}
#walkthrough-content p{line-height:28px}



.step_one .overlay-hole{ width:160px; height: 40px; position: absolute; right:30px; top:0;}
.walkthrough-1_arrow { text-align: right; margin-bottom: 55px;}
.walkthrough-1_arrow img{ display: inline-block; margin-right:68px;}
.w_shu{ font-size:20px; text-align: left; padding:25px 0 15px;}
.w_shu img{ display: inline-block; position: relative; top:3px; }
.walkthrough_btn{ display: block;float:right; padding-top:25px;}

.step_two{ padding-top:31px;}
.step_two .arrow{ padding-left:273px; margin-bottom: 40px;}
.step_three{  left: -75px;padding-top: 216px;position: relative;}
.step_four{ padding-top:150px; position: relative; left:100px;}
.step_four .arrow{ padding-left:294px;margin-bottom: 40px;}
.step_two .walkthrough_btn,.step_three .walkthrough_btn,.step_four .walkthrough_btn{ padding-top:40px;}



#jpwClose,
#jpwNext,
#jpwPrevious,
#jpwFinish {
  color: #00c7ff;
  cursor: pointer;
  font-family: 'xjlFont','Microsoft yahei';
  font-size: 18px;
  font-weight: lighter;
}
#jpwOverlay {
  background: rgba(0, 0, 0, 0.6);
  filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000,endColorstr=#99000000);
  position: fixed;
  z-index: 999999;
  top: 0;
  width: 100%;
  height: 100%;
  display: block;
}
#jpwOverlay.transparent {
  background: none;
}
#jpWalkthrough.jpw-scrolling .overlay-hole > div {
  /*box-shadow: inset 0 0 5px 1000px rgba(0, 0, 0, 0.6);*/
    border:1px solid #cc0000;
}
#jpWalkthrough .overlay-hole > div {
  /*box-shadow: inset 0 0 5px 10px rgba(0, 0, 0, 0.6);*/
    border:1px solid #cc0000;
}
#jpWalkthrough #jpwTooltip {
  overflow: visible;
  padding: 10px;
  background: none;
}
#jpWalkthrough #jpwTooltip #tooltipWrapper {
  overflow: visible;
}
#jpWalkthrough #jpwTooltip #bottom-scratch {
  background: url("/atzd../images/scratch-border.png") no-repeat left top;
  width: 358px;
  height: 42px;
  display: block;
  top: 25px;
  clear: both;
}
#jpWalkthrough #jpwTooltip .draggable-area {
  display: block;
  width: 44px;
  height: 40px;
  position: absolute;
  top: -35px;
  right: -30px;
  background: url("/atzd../images/guide/drag.png") no-repeat;
  z-index: 10000;
}
#jpWalkthrough #jpwTooltip .top {
  background: url("/atzd../images/guide/arrow-bottom.png") no-repeat scroll 0 0 transparent;
  bottom: -86px;
  height: 86px;
  left: 130px;
  position: absolute;
  width: 75px;
  display: block;
  z-index: 1000;
}
#jpWalkthrough #jpwTooltip .right {
  background: url("/atzd../images/guide/arrow-left.png") no-repeat scroll 0 0 transparent;
  height: 73px;
  left: -140px;
  position: absolute;
  top: 35px;
  width: 117px;
  display: block;
  z-index: 1000;
}
#jpWalkthrough #jpwTooltip .bottom {
  /*background: url("/atzd../images/guide/arrow-top.png") no-repeat scroll 0 0 transparent;*/
  height: 100px;
  left: 130px;
  position: absolute;
  top: -86px;
  width: 96px;
  display: block;
  z-index: 1000;
}
#jpWalkthrough #jpwTooltip .left {
  /*background: url("/atzd../images/guide/step_two_arrow.png") no-repeat scroll 0 0 transparent;*/
  height: 101px;
  position: absolute;
  right: -145px;
  top: 35px;
  width: 95px;
  display: block;
  z-index: 1000;
}
#jpWalkthrough #jpwTooltip #tooltipInner {
  font-family: 'xjlFont','Microsoft yahei';
  color: #ffffff;
  text-align: center;
  font-size: 22px; line-height:26px;
}
#jpWalkthrough #jpwTooltip #tooltipInner a {
  font-size: 22px;
}
#jpWalkthrough #jpwTooltip #tooltipInner .tooltipTitle {
  font-size: 32px;
}
#jpWalkthrough .killOverlay {
  background-image: none !important;
  background-color: none !important;
}
#jpwClose {
  position: fixed;
  top: 28px;
  right: 50px;
  z-index: 1000000;
  color: #ffffff;
  text-align: center;
  display: block;
    width:32px; height: 32px;
    overflow:hidden;
}
#jpwClose:hover {
  color: #7eff00;
}
#jpwClose:before {
  content: '';
  display: inline-block;
  *display: inline;
  *zoom: 1;
  width: 44px;
  height: 40px;
  background: url("/atzd../images/guide/close.png") no-repeat;

  top: -45px;
  left: 36px;
}
#jpwNext,
#jpwFinish {
  float: right;
}
#jpwPrevious {
  float: left;
}
@font-face {
  font-family: 'xjlFont';
  src: url('/atzd/common/css/font/xjlfont.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}