/*! normalize.css v3.0.2 | MIT License | git.io/normalize */html{font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}body{margin:0}article,aside,details,figcaption,figure,footer,header,hgroup,main,menu,nav,section,summary{display:block}audio,canvas,progress,video{display:inline-block;vertical-align:baseline}audio:not([controls]){display:none;height:0}[hidden],template{display:none}a{background-color:transparent}a:active,a:hover{outline:0}abbr[title]{border-bottom:1px dotted}b,strong{font-weight:700}dfn{font-style:italic}h1{font-size:2em;margin:.67em 0}mark{background:#ff0;color:#000}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sup{top:-.5em}sub{bottom:-.25em}img{border:0}svg:not(:root){overflow:hidden}figure{margin:1em 40px}hr{-moz-box-sizing:content-box;box-sizing:content-box;height:0}pre{overflow:auto}code,kbd,pre,samp{font-family:monospace,monospace;font-size:1em}button,input,optgroup,select,textarea{color:inherit;font:inherit;margin:0}button{overflow:visible}button,select{text-transform:none}button,html input[type=button],input[type=reset],input[type=submit]{-webkit-appearance:button;cursor:pointer}button[disabled],html input[disabled]{cursor:default}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0}input{line-height:normal}input[type=checkbox],input[type=radio]{box-sizing:border-box;padding:0}input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button{height:auto}input[type=search]{-webkit-appearance:textfield;-moz-box-sizing:content-box;-webkit-box-sizing:content-box;box-sizing:content-box}input[type=search]::-webkit-search-cancel-button,input[type=search]::-webkit-search-decoration{-webkit-appearance:none}fieldset{border:1px solid silver;margin:0 2px;padding:.35em .625em .75em}legend{border:0;padding:0}textarea{overflow:auto}optgroup{font-weight:700}table{border-collapse:collapse;border-spacing:0}td,th{padding:0}
@media (min-width:300px){
.btn-hamburger {
    border: none;
    position: absolute;
    bottom:50%;height: 0;
    left: 0px;
    padding: 0;
    outline: none;
    background: url(../images/menu.png) no-repeat left center;
    -background: url(styles.css) no-repeat left center;
}
.tooltip {
    display: block;
    position: relative;
    top: 50%;
    left: 0px;
    margin-top: -22px;
    width: 50px;
    height: 50px;
    background: transparent;
    opacity: 1;
    cursor: pointer;
    z-index: 5;
    border-top-right-radius: 2px;
    border-bottom-right-radius: 2px;
}
.tooltip:before {
    content: '';
    position: absolute;
    left: 5px;
    top: 9px;
    width: 12px;
    height: 13px;
    background: url(https://gw.alicdn.com/tfs/TB14cSQg_JYBeNjy1zeXXahzVXa-400-800.png) -390px -70px no-repeat;
}

}
@media (min-width:756px){
.tooltip {

		display: block;

    position: relative;

    top: 50%;

		left: 0px;

    margin-top: -22px;

    width: 12px;

    height: 46px;

    background: rgb(26, 26, 26);opacity: 0.5;

    cursor: pointer;

    z-index: 5;

		border-top-right-radius: 2px;

    border-bottom-right-radius: 2px;

}



.tooltip:hover{color: #000000;font-weight:bold;/* 字体加粗*/background-color: rgb(0, 188, 212);border:1px solid rgb(0, 188, 212);}



.tooltip:before{

	content: '';

  position: absolute;

  left: 3px;

  top: 16px;

  width: 8px;

  height: 13px;

  background: url(https://gw.alicdn.com/tfs/TB14cSQg_JYBeNjy1zeXXahzVXa-400-800.png) -390px -70px no-repeat;

}
.btn-hamburger {

  border: none;

  position: absolute;

	bottom: 50%;

  left: 0px;

	padding:0;

  outline:none;

 /* background: url('../images/menu.png') no-repeat left center;*/

  background: url('') no-repeat left center; 

}
}

/* Reset */

*,*:after,*:before {-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;}



/*使用CSS美化浏览器下的滚动条样式*/

::-webkit-scrollbar {width: 5px;height: 5px;/*background-color: #ddd;*/}

/*滑块*/

::-webkit-scrollbar-thumb {background-color: #333;border-radius: 5px;}

::-webkit-scrollbar-thumb:hover {background-color: #777;}

/*滑道*/

::-webkit-scrollbar-track {box-shadow: inset 0 0 6px #000000;border-radius: 10px;}

body,.panel {background-color: #fff;}

.menu {background-color: #1f1f1f;/*border-right:1px solid #484646; 右边框*/}

a {color: #4B5;text-decoration: none;}

.menu a {color: #fff;}

.menu a:hover {text-decoration: underline;}

.menu-header {border-bottom: 1px solid #2a2d2f;padding: 20px 0 20px 60px;background: url('../images/github.png') no-repeat 15px 15px;background-size: 32px;}

.menu-header-title {font-weight: 400;letter-spacing: 0.5px;margin: 0;}

.menu-section {}

.menu-section-title {text-transform: uppercase;color: rgb(0, 188, 212);font-weight: 300;font-size: 20px;letter-spacing: 1px;padding: 10px 20px;margin:0;text-align:center;border-bottom:1px solid #282828 ;border-radius:4px;}

.beipy-bq,.beipy-bq a{text-align: center;font-size: 14px;padding-top: 20px;border-top: 1px solid #000000;color: #999;}

.beipy-bq span{font-size: 12px;}

.menu-section-list {padding:0;margin-bottom: 10px;list-style:none;margin-top: 0;}

.menu-section-list li, .menu-section-list a{

	display: block;

	font-size: 14px;

	padding: 8px 10px;

	text-align:center;

	border-radius:5px;

	margin: 5px 0;

	/* 边框圆角，半径为20 */

	top: 2px;

	cursor:pointer;/* 鼠标设置为手型 */}

.menu-section-list li:hover ,.menu-section-list a:hover {background-color: #101016;text-decoration: none;color: rgb(0, 188, 212);}

.panel {text-align: center;padding-top: 0px;min-height: 100%;}

/**

 * Header

 */

.panel-header {margin: 85px auto 55px;}

.title {font-size: 3.2em;line-height: 1em;margin: 0 0 15px;color: #4B5;font-weight: 400;padding-top: 82px;background: url('../images/mango-logo.png') no-repeat center top;}



.subtitle {font-weight: 400;font-size: 1.3em;line-height: 1.2em;margin:0 0 45px 0;color: #767676;}



/**

 * Action buttons

 */

.panel-actions {margin: 20px 0;}

.btn {text-decoration: none;padding: 0px 14px;border-radius: 4px;line-height: 50px;display: inline-block;border: 1px solid #4B5;width: 35%;font-size: 1.2em;}



.btn-download {

  margin-right: 5px;

  background-color: #4B5;

  color: #fff;

  font-weight: 600;

}



.btn-download:hover {

  background-color: #3da84b;

  border-color: #369643;

}



.btn-fork {

  margin-left: 5px;

  background-color: #fff;

}



.btn-fork:hover {

  background-color: rgba(0,0,0,.02);

}



/**

 * iPhone

 */

.iphone {

  background: url('../images/iphone5.png') no-repeat;

  position: relative;

  margin: 0 auto;

  width: 298px;

  height: 597px;

}



.iphone img,

.iphone video {

  position: absolute;

  top: 73px;

  left: 25px;

  height: 446px;

  max-width: 100%;

}



.iphone video {

  display: none;

}



/**

 * hamburger

 */

 /*.btn-hamburger {

  border: none;

  position: absolute;

	top: 50%;

  left: 0px;

	padding:0;

  outline:none;

 background: url('../images/menu.png') no-repeat left center;

  background: url('') no-repeat left center; 

}*/




/*滚动字体 样式设置 开始*/

.btns-hamburger {

  font-size: 14px;

  width:80%;

  border: none;

  position: absolute;

  top: 0px;

	right: 20%;

  outline:none;

 /* background: url('../images/menu.png') no-repeat left center;*/

  background: url('') no-repeat left center; 

  cursor: pointer;

}



.AD_AD {

	/*border:1px solid #F00;边框*/

	padding: 7px 0px 0px 0px; /*上 左 下 右间隔*/

}

/*滚动字体 样式设置 结束*/





/*.tooltip {

		display: block;

    position: relative;

    top: 50%;

		left: 0px;

    margin-top: -22px;

    width: 12px;

    height: 46px;

    background: rgb(26, 26, 26);opacity: 0.5;

    cursor: pointer;

    z-index: 5;

		border-top-right-radius: 2px;

    border-bottom-right-radius: 2px;

}



.tooltip:hover{color: #000000;font-weight:bold;/* 字体加粗*/background-color: rgb(0, 188, 212);border:1px solid rgb(0, 188, 212);}



.tooltip:before{

	content: '';

  position: absolute;

  left: 3px;

  top: 16px;

  width: 8px;

  height: 13px;

  background: url(https://gw.alicdn.com/tfs/TB14cSQg_JYBeNjy1zeXXahzVXa-400-800.png) -390px -70px no-repeat;

}*/



 

/**

 * Boxes

 */

.box {

  border: 1px solid #4b5;

  border-radius: 4px;

  text-align: left;

  margin: 50px 10px;

  position: relative;

}



.box:before,

.box:after {

  content: ' ';

  display: inline-block;

  width: 1px;

  height: 50px;

  border-left: 1px solid #4b5;

  position: absolute;

  left: 50%;

}



.box:before {

  top: -50px;

}



.box:after {

  bottom: -50px;

}



.box-title {

  margin: 0;

  padding:10px 20px;

  border-bottom: 1px solid #4b5;

  color: #4b5;

  font-size: 1.2em;

  font-weight: 400;

}



.box-content {

  padding:20px;

  background-color: #f8f8f8;

}

#playad img {
    width: 60px;
    margin-top: 10px;
}

/**

 * Medium Screens

 */

@media all and (min-width:40em) {



  .btn-hamburger {

   /* top: 0px;

    left: 0px; */

  }



  .panel-header {

    margin-top: 40px;

    width: 455px;

  }



  .title {

    font-size: 4.2em;

  }



  .subtitle {

    font-size: 1.8em;

  }



  .btn-download {

    margin-right: 20px;

  }



  .btn-fork {

    margin-left: 20px;

  }



  /*.iphone {

    transition: transform 1s ease, top 1s ease;

    transform: translateY(305px);

    top: 305px;

  }



  .iphone.shown {

    transform: translateY(0);

    top: 0;

  }*/

}



/**

 * Large Screens

 */

@media all and (min-width: 54em) {

  .box {

    width: 70%;

    max-width: 1200px;

    margin: 50px auto;

  }



  .iphone video {

    display: block;

  }



  .iphone img {

    display: none;

  }

}



/**

 * Footer

 */

.panel-footer {

  margin: 10px auto 20px;

}



.panel-footer p {

  padding-bottom: 20px;

}



.heart {

  font-style: normal;

  font-weight: 500;

  color: #c0392b;

  text-decoration: none;

}



.share-buttons {

  display: block;

  margin: 20px auto 0;

  padding: 15px 20px 5px;

  width: 190px;

  overflow: hidden;

}



#github-button {

  float: left;

  width: 90px;

}



/**

 * Slideout module styles

 */

html,

body {

  width: 100%;

  height: 100%;

}





.panel,

.slideout-panel {

  position: relative;

  z-index: 1;

}



.slideout-open,

.slideout-open body {

  overflow: hidden;

}



.slideout-open .slideout-menu {

  display: block;

}



/* Animation

---------------------------------- */

@-webkit-keyframes shake {

  0%, 100% {

    -webkit-transform:translate3d(0, 0, 0);

    transform:translate3d(0, 0, 0);

  }



  50% {

    -webkit-transform:translate3d(-10px, 0, 0);

    transform:translate3d(-10px, 0, 0);

  }

}



@keyframes shake {

  0%, 100% {

    -webkit-transform:translate3d(0, 0, 0);

    transform:translate3d(0, 0, 0);

  }



  50% {

    -webkit-transform:translate3d(-10px, 0, 0);

    transform:translate3d(-10px, 0, 0);

  }

}



.shake {

  -webkit-animation-name:shake;

  animation-name:shake;

  -webkit-animation-duration:2s;

  animation-duration:2s;

  -webkit-animation-iteration-count: 4;

  animation-iteration-count: 4;

}

strong,.shaky{display: inline-block;padding: 1px;font-size: 12px;-webkit-transform-origin: center center;-ms-transform-origin: center center;transform-origin: center center;-webkit-animation-name: shaky-slow;-ms-animation-name: shaky-slow;animation-name: shaky-slow;-webkit-animation-duration: 4s;-ms-animation-duration: 4s;animation-duration: 4s;-webkit-animation-iteration-count: infinite;-ms-animation-iteration-count: infinite;animation-iteration-count: infinite;-webkit-animation-timing-function: ease-in-out;-ms-animation-timing-function: ease-in-out;animation-timing-function: ease-in-out;-webkit-animation-delay: 0s;-ms-animation-delay: 0s;animation-delay: 0s;-webkit-animation-play-state: running;-ms-animation-play-state: running;animation-play-state: running;}
@-webkit-keyframes shaky-slow{0%{-webkit-transform: translate(0px, 0px) rotate(0deg)}
2%{-webkit-transform: translate(-1px, 1.5px) rotate(1.5deg)}
4%{-webkit-transform: translate(1.3px, 0px) rotate(-0.5deg)}
6%{-webkit-transform: translate(1.4px, 1.4px) rotate(-2deg)}
8%{-webkit-transform: translate(-1.3px, -1px) rotate(-1.5deg)}
10%{-webkit-transform: translate(1.4px, 0px) rotate(-2deg)}
12%{-webkit-transform: translate(-1.3px, -1px) rotate(-2deg)}
14%{-webkit-transform: translate(1.5px, 1.3px) rotate(1.5deg)}
16%{-webkit-transform: translate(1.5px, -1.5px) rotate(-1.5deg)}
18%{-webkit-transform: translate(1.3px, -1.3px) rotate(-2deg)}
20%{-webkit-transform: translate(1px, 1px) rotate(-0.5deg)}
22%{-webkit-transform: translate(1.3px, 1.5px) rotate(-2deg)}
24%{-webkit-transform: translate(-1.4px, -1px) rotate(2deg)}
26%{-webkit-transform: translate(1.3px, -1.3px) rotate(0.5deg)}
28%{-webkit-transform: translate(1.6px, -1.6px) rotate(-2deg)}
30%{-webkit-transform: translate(-1.3px, -1.3px) rotate(-1.5deg)}
32%{-webkit-transform: translate(-1px, 0px) rotate(2deg)}
34%{-webkit-transform: translate(1.3px, 1.3px) rotate(-0.5deg)}
36%{-webkit-transform: translate(1.3px, 1.6px) rotate(1.5deg)}
38%{-webkit-transform: translate(1.3px, -1.6px) rotate(1.5deg)}
40%{-webkit-transform: translate(-1.4px, -1px) rotate(-0.5deg)}
42%{-webkit-transform: translate(-1.4px, 1.3px) rotate(-0.5deg)}
44%{-webkit-transform: translate(-1.6px, 1.4px) rotate(0.5deg)}
46%{-webkit-transform: translate(-2.1px, -1.3px) rotate(-0.5deg)}
48%{-webkit-transform: translate(1px, 1.6px) rotate(1.5deg)}
50%{-webkit-transform: translate(1.6px, 1.6px) rotate(1.5deg)}
52%{-webkit-transform: translate(-1.4px, 1.6px) rotate(0.5deg)}
54%{-webkit-transform: translate(1.6px, -1px) rotate(-2deg)}
56%{-webkit-transform: translate(1.3px, -1.6px) rotate(-2deg)}
58%{-webkit-transform: translate(-1.3px, -1.6px) rotate(0.5deg)}
60%{-webkit-transform: translate(1.3px, 1.6px) rotate(-0.5deg)}
62%{-webkit-transform: translate(0px, 0px) rotate(-1.5deg)}
64%{-webkit-transform: translate(-1.6px, -1.6px) rotate(-2deg)}
66%{-webkit-transform: translate(1.6px, -1.6px) rotate(0.5deg)}
68%{-webkit-transform: translate(0px, -1.6px) rotate(-2deg)}
70%{-webkit-transform: translate(-1.6px, 1px) rotate(1.5deg)}
72%{-webkit-transform: translate(-1.6px, 1.6px) rotate(2deg)}
74%{-webkit-transform: translate(1.3px, -1.6px) rotate(-0.5deg)}
76%{-webkit-transform: translate(1.4px, 1px) rotate(-0.5deg)}
78%{-webkit-transform: translate(-1px, 1.4px) rotate(2deg)}
80%{-webkit-transform: translate(1.4px, 1.6px) rotate(2deg)}
82%{-webkit-transform: translate(-1.6px, -1.6px) rotate(-0.5deg)}
84%{-webkit-transform: translate(-1.4px, 1.4px) rotate(-2deg)}
86%{-webkit-transform: translate(1px, 1.4px) rotate(-2deg)}
88%{-webkit-transform: translate(-1.4px, 1.4px) rotate(-1.5deg)}
90%{-webkit-transform: translate(-1.6px, -1.6px) rotate(-2deg)}
92%{-webkit-transform: translate(-1.6px, 1.6px) rotate(2deg)}
94%{-webkit-transform: translate(-1.6px, -1.6px) rotate(-2deg)}
96%{-webkit-transform: translate(-1.4px, 1.3px) rotate(-2deg)}
98%{-webkit-transform: translate(1.3px, 1px) rotate(-0.5deg)}} @keyframes shaky-slow{0%{transform: translate(0px, 0px) rotate(0deg)}
2%{transform: translate(-1px, 1.5px) rotate(1.5deg)}
4%{transform: translate(1.3px, 0px) rotate(-0.5deg)}
6%{transform: translate(1.4px, 1.4px) rotate(-2deg)}
8%{transform: translate(-1.3px, -1px) rotate(-1.5deg)}
10%{transform: translate(1.4px, 0px) rotate(-2deg)}
12%{transform: translate(-1.3px, -1px) rotate(-2deg)}
14%{transform: translate(1.5px, 1.3px) rotate(1.5deg)}
16%{transform: translate(1.5px, -1.5px) rotate(-1.5deg)}
18%{transform: translate(1.3px, -1.3px) rotate(-2deg)}
20%{transform: translate(1px, 1px) rotate(-0.5deg)}
22%{transform: translate(1.3px, 1.5px) rotate(-2deg)}
24%{transform: translate(-1.4px, -1px) rotate(2deg)}
26%{transform: translate(1.3px, -1.3px) rotate(0.5deg)}
28%{transform: translate(1.6px, -1.6px) rotate(-1.5deg)}
30%{transform: translate(-1.3px, -1.3px) rotate(-1.5deg)}
32%{transform: translate(-1px, 0px) rotate(2deg)}
34%{transform: translate(1.3px, 1.3px) rotate(-0.5deg)}
36%{transform: translate(1.3px, 1.6px) rotate(1.5deg)}
38%{transform: translate(1.3px, -1.6px) rotate(1.5deg)}
40%{transform: translate(-1.4px, -1px) rotate(-0.5deg)}
42%{transform: translate(-1.4px, 1.3px) rotate(-0.5deg)}
44%{transform: translate(-1.6px, 1.4px) rotate(0.5deg)}
46%{transform: translate(-2.1px, -1.3px) rotate(-0.5deg)}
48%{transform: translate(1px, 1.6px) rotate(1.5deg)}
50%{transform: translate(1.6px, 1.6px) rotate(1.5deg)}
52%{transform: translate(-1.4px, 1.6px) rotate(0.5deg)}
54%{transform: translate(1.6px, -1px) rotate(-2deg)}
56%{transform: translate(1.3px, -1.6px) rotate(-2deg)}
58%{transform: translate(-1.3px, -1.6px) rotate(0.5deg)}
60%{transform: translate(1.3px, 1.6px) rotate(-0.5deg)}
62%{transform: translate(0px, 0px) rotate(-1.5deg)}
64%{transform: translate(-1.6px, -1.6px) rotate(-2deg)}
66%{transform: translate(1.6px, -1.6px) rotate(0.5deg)}
68%{transform: translate(0px, -1.6px) rotate(-2deg)}
70%{transform: translate(-1.6px, 1px) rotate(1.5deg)}
72%{transform: translate(-1.6px, 1.6px) rotate(2deg)}
74%{transform: translate(1.3px, -1.6px) rotate(-0.5deg)}
76%{transform: translate(1.4px, 1px) rotate(-0.5deg)}
78%{transform: translate(-1px, 1.4px) rotate(2deg)}
80%{transform: translate(1.4px, 1.6px) rotate(2deg)}
82%{transform: translate(-1.6px, -1.6px) rotate(-0.5deg)}
84%{transform: translate(-1.4px, 1.4px) rotate(-2deg)}
86%{transform: translate(1px, 1.4px) rotate(-2deg)}
88%{transform: translate(-1.4px, 1.4px) rotate(-1.5deg)}
90%{transform: translate(-1.6px, -1.6px) rotate(-2deg)}
92%{transform: translate(-1.4px, 1.6px) rotate(2deg)}
94%{transform: translate(-1.6px, -1.6px) rotate(-2deg)}
96%{transform: translate(-1.4px, 1.3px) rotate(-2deg)}
98%{transform: translate(1.3px, 1px) rotate(-0.5deg)}}