@charset "utf-8";
.mobileSelect{position: relative;z-index: 0;opacity: 0;visibility: hidden;-webkit-transition: opacity 0.4s, z-index 0.4s;transition: opacity 0.4s, z-index 0.4s;}
.mobileSelect *{margin: 0;padding: 0;-webkit-box-sizing: border-box;box-sizing: border-box;}
.mobileSelect .grayLayer{position: fixed;top: 0;left: 0;bottom: 0;right: 0;background: #eee;background: rgba(0, 0, 0, 0.6);z-index: 888;display: block;}
.mobileSelect .content{width: 100%;display: block;position: fixed;z-index: 889;color: #3d4145;-webkit-transition: all 0.4s;transition: all 0.4s;bottom: -350px;left: 0;background: white;}
.mobileSelect .content .fixWidth{width: 100%;margin: 0 auto;position: relative;}
.mobileSelect .content .fixWidth:after{content: ".";display: block;height: 0;clear: both;visibility: hidden;}
.mobileSelect .content .btnBar{border-bottom: 1px solid #DCDCDC;font-size: 15px;position: relative;text-align: center; line-height:2.2rem; z-index:9999;}
.mobileSelect .content .btnBar .cancel,
.mobileSelect .content .btnBar .ensure{width: 55px;cursor: pointer;position: absolute;top: 0;}
.mobileSelect .content .btnBar .cancel{left: 0;color: #666;}
.mobileSelect .content .btnBar .ensure{right: 0;color: #c00;}
.mobileSelect .content .btnBar .title{font-size: 0.875rem;background:#f7f7f8;color:#3d4145; padding: 0 15%;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;}
.mobileSelect .content .panel:after{content: ".";display: block;height: 0;clear: both;visibility: hidden;}
.mobileSelect .content .panel .wheels{width: 100%;height: 200px;overflow: hidden;background:#EFEFF4;  -webkit-mask-box-image: -webkit-linear-gradient(bottom, transparent, transparent 5%, white 20%, white 80%, transparent 95%, transparent);
   -webkit-mask-box-image: linear-gradient(to top, transparent, transparent 5%, white 20%, white 80%, transparent 95%, transparent); 
}
.mobileSelect .content .panel .wheel{position: relative;z-index: 0;float: left;width: 50%;height: 200px;overflow: hidden;-webkit-transition: width 0.3s ease;transition: width 0.3s ease;}
.mobileSelect .content .panel .wheel .selectContainer{display: block;text-align: center;-webkit-transition: -webkit-transform 0.18s ease-out;transition: -webkit-transform 0.18s ease-out;transition: transform 0.18s ease-out;transition: transform 0.18s ease-out, -webkit-transform 0.18s ease-out;}
.mobileSelect .content .panel .wheel .selectContainer li{font-size: 15px;display: block;height: 40px;line-height: 40px;cursor: pointer;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;}
.mobileSelect .content .panel .selectLine{height: 40px;width: 100%;position: absolute;top: 80px;pointer-events: none;-webkit-box-sizing: border-box;box-sizing: border-box;border-top: 1px solid #DCDCDC;border-bottom: 1px solid #DCDCDC;}
.mobileSelect .content .panel .shadowMask{position: absolute;top: 0;width: 100%;height: 200px;background: -webkit-gradient(linear, left top, left bottom, from(#EFEFF4), color-stop(rgba(255, 255, 255, 0)), to(#EFEFF4));background: -webkit-linear-gradient(top, #ffffff, rgba(255, 255, 255, 0), #EFEFF4);background: linear-gradient(to bottom, #EFEFF4, rgba(255, 255, 255, 0), #EFEFF4);opacity: 0.9;pointer-events: none;}

/*.mobileSelect .content .panel .shadowMask{position: absolute;top: 0;width: 100%;height: 200px;-webkit-mask-box-image: -webkit-linear-gradient(bottom, transparent, transparent 5%, white 20%, white 80%, transparent 95%, transparent); -webkit-mask-box-image: linear-gradient(to top, transparent, transparent 5%, white 20%, white 80%, transparent 95%, transparent);opacity: 0.9;pointer-events: none;}*/

.mobileSelect-show{opacity: 1;z-index: 10000;visibility: visible;}
.mobileSelect-show .content{bottom: 0;}