html {height:100%}
.area-select-box {width:100%;height:100%;position:fixed;top:0;z-index:1000;overflow:hidden;display:none}
.area-select-background {width:100%;height:100%;background-color:#000;opacity:.7}
.area-select-obj {position:absolute;top:0;width:78.4%;height:101%;background-color:#f8f8f8;display:table;border:1px solid #eee;font-size:16px;-webkit-transform:translate3d(27.6%,0,0);-moz-transform:translate3d(27.6%,0,0);-ms-transform:translate3d(27.6%,0,0);-o-transform:translate3d(27.6%,0,0);transform:translate3d(27.6%,0,0);-webkit-transition:all .4s;-moz-transition:all .4s;-o-transition:all .4s;transition:all .4s}
.area-mark {-webkit-transform:translate3d(128%,0,0);-moz-transform:translate3d(128%,0,0);-ms-transform:translate3d(128%,0,0);-o-transform:translate3d(128%,0,0);transform:translate3d(128%,0,0)}
.area-select-obj .area-select {display:table-cell;height:100%;position:relative}
.area-province {width:56%;background:#fff}
.area-select-province li {background:#fff;border-right:1px solid #eee}
.area-select-province li.on {background:#f8f8f8;border-right:0;color:#34c083}
.area-select-province li.on .area-select-option {color:#34c083}
.area-select-option {margin-left:20px;padding-top:14px;padding-bottom:14px;border-bottom:1px solid #eee}
.area-select li:last-child .area-select-option {border:none}
.area-select-option>span {margin-right:7px;color:#c7c7c7;float:right;}
.area-select-city li.on,.area-select-province li.on .area-select-option>span {color:#34c083}
.area-select-city,.area-select-province {width:100%;position:absolute;top:0}
.area-select-city {background:#f8f8f8}
.area-select .area-background-tab {background:#ececec}
.transition-select {-webkit-transition:all .5s ease-out;-moz-transition:all .5s ease-out;-o-transition:all .5s ease-out;transition:all .5s ease-out}
.area-select::after {display:none}