html,body {height: 100%;width: 100%;}
.w70{width: 70%;}
.w100{width:100%;}
.l0 {left: 0}
.r0 {right: 0}
.bYelley{background-color: #ffe80d;}
.bBlue{background-color: #18aaff;}
.w50{width: 50%;}
.fl{float: left;}
.fr{float: right;}
.oHide{overflow: hidden;}
.rPostion{position: relative;}
.aPostion{position: absolute;}
.bWite{background-color: #fff;}
.mAuto{margin:auto;}
.mT30{margin-top: 30px;}
.bRadius{border-radius: 10px;}
.mL25{margin-left: 25%;}
.fPostion{position: fixed;}
.h50{height:50px;}
.bPink{background-color: #f29c9f;}
ul,li{list-style: none;}
.lineH50{line-height: 50px;}
.p10{padding:0px 10px;}
.colorW{color:#fff;}
.cusP{cursor: pointer;}
.zIndex{z-index: 999;}
.mL11{margin-left: 11%;}
.mT80{margin-top: 80px;}
.t0{top: 0px;}
.w30{width: 30%;}
.mL20{margin-left: 20%;}
.p25{padding:0px 25px;}
.h140{height:140px;}
.wPx127{width: 127px;}
.h80{height: 80px;}
.bOranger{background-color: #f97707;}
.h50{height: 50px;}
.wPx100{width: 100px;}
.pT100{padding-top:100px;}
.bTRadius{border-radius: 5px 5px 0px 0px;}
.bBRadius{border-radius: 0px 0px 5px 5px;}
.zI1000 {z-index: 1000}
.xContent {height: 100%;width: 100%;position: relative;}
.xBox {top: 50px;bottom: 0;left:0;width: 100%;position: absolute;}
.xItem {height: 100%;width: 100%;position: relative;transition: 1s}
.xWhitebox {z-index:10;top: 50px;bottom: 50px;width:30%;position: absolute;    margin: 0 auto;transition:   .8s cubic-bezier(1, -1, 0, 2)}
.xList {width: 60%;height: 100%;    position: absolute;top: 0;display: none;}
.xList.left {left: 0}
.xList.right {right: 0}