div, ul, li { margin: 0; padding: 0; } ul, li { list-style: none outside none; } /* layer begin */ .ios-select-widget-box.olay { position: fixed; z-index: 1000; top: 0; left: 0; width: 100%; height: 100%; opacity: 1; } .ios-select-widget-box.olay > div { position: fixed; z-index: 1000; width: 100%; height: 100%; bottom: 0; left: 0; visibility: visible; border-top:4px solid #ccc; } .ios-select-widget-box header.iosselect-header { height: 60px; line-height: 60px; background-color: #fff; width: 100%; z-index: 9999; text-align: center; } .ios-select-widget-box header.iosselect-header a { font-size:30px; color: #567fe6; text-decoration: none; } .ios-select-widget-box header.iosselect-header a.close { float: left; padding-left: 15px; height: 44px; line-height: 44px; } .ios-select-widget-box header.iosselect-header a.sure { float: right; padding-right: 15px; height: 44px; line-height: 44px; } .ios-select-widget-box { padding-top: 44px; } .ios-select-widget-box .one-level-contain, .ios-select-widget-box .two-level-contain, .ios-select-widget-box .three-level-contain, .ios-select-widget-box .four-level-contain, .ios-select-widget-box .five-level-contain { height: 100%; overflow: hidden; } .ios-select-widget-box .iosselect-box { overflow: hidden; } .ios-select-widget-box .iosselect-box > div { display: block; float: left; } .ios-select-widget-box ul { background-color: #fff; } .ios-select-widget-box ul li { font-size: 28px; height:90px; line-height: 90px; background-color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: center; color: #999999; opacity: .5; } .ios-select-widget-box ul li a{color:#4b4b4b;} .ios-select-widget-box ul li.at { font-size: 36px; opacity: 1; color:#4b4b4b; background:#f5f5f9; } .ios-select-widget-box ul li.side1 { font-size: 28px; opacity: .7; } .ios-select-widget-box ul li.side2 { font-size: 28px; opacity: .5; } .ios-select-widget-box.one-level-box .one-level-contain { width: 100%; } .ios-select-widget-box.one-level-box .two-level-contain, .ios-select-widget-box.one-level-box .three-level-contain, .ios-select-widget-box.one-level-box .four-level-contain, .ios-select-widget-box.one-level-box .five-level-contain, .ios-select-widget-box.one-level-box .six-level-contain { width: 0; } .ios-select-widget-box.two-level-box .one-level-contain, .ios-select-widget-box.two-level-box .two-level-contain { width: 50%; } .ios-select-widget-box.two-level-box .three-level-contain, .ios-select-widget-box.two-level-box .four-level-contain, .ios-select-widget-box.two-level-box .five-level-contain, .ios-select-widget-box.two-level-box .six-level-contain { width: 0; } .ios-select-widget-box.three-level-box .one-level-contain, .ios-select-widget-box.three-level-box .two-level-contain { width: 30%; } .ios-select-widget-box.three-level-box .three-level-contain { width: 40%; } .ios-select-widget-box.three-level-box .four-level-contain .ios-select-widget-box.three-level-box .five-level-contain, .ios-select-widget-box.three-level-box .six-level-contain { width: 0%; } .ios-select-widget-box.four-level-box .one-level-contain, .ios-select-widget-box.four-level-box .two-level-contain, .ios-select-widget-box.four-level-box .three-level-contain, .ios-select-widget-box.four-level-box .four-level-contain { width: 25%; } .ios-select-widget-box.four-level-box .five-level-contain, .ios-select-widget-box.four-level-box .six-level-contain { width: 0%; } .ios-select-widget-box.five-level-box .one-level-contain, .ios-select-widget-box.five-level-box .two-level-contain, .ios-select-widget-box.five-level-box .three-level-contain, .ios-select-widget-box.five-level-box .four-level-contain, .ios-select-widget-box.five-level-box .five-level-contain { width: 20%; } .ios-select-widget-box.five-level-box .six-level-contain { width: 0%; } .ios-select-widget-box.six-level-box .one-level-contain, .ios-select-widget-box.six-level-box .two-level-contain, .ios-select-widget-box.six-level-box .three-level-contain, .ios-select-widget-box.six-level-box .four-level-contain, .ios-select-widget-box.six-level-box .five-level-contain { width: 16%; } .ios-select-widget-box.six-level-box .six-level-contain { width: 20%; } .ios-select-widget-box .cover-area1 { width: 100%; border: none; border-top: 1px solid #d9d9d9; position: absolute; top: 149px; margin: 0; height: 0; } .ios-select-widget-box .cover-area2 { width: 100%; border: none; border-top: 1px solid #d9d9d9; position: absolute; top: 183px; margin: 0; height: 0; } .ios-select-widget-box #iosSelectTitle { margin: 0; padding: 0; display: inline-block; font-size: 30px; font-weight: normal; color: #333; } .ios-select-body-class { overflow: hidden; } .ios-select-body-class body { touch-action: none; } .ios-select-widget-box.olay > div > .ios-select-loading-box { width: 100%; height: 100%; position: absolute; top: 0; bottom: 0; left: 0; right: 0; background-color: rgba(0,0,0,.5); display: none; } .ios-select-widget-box.olay > div > .ios-select-loading-box > .ios-select-loading { width: 50px; height: 50px; position: absolute; left: 50%; top: 50%; margin-top: -25px; margin-left: -25px; background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAoCAYAAACM/rhtAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyFpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNS1jMDE0IDc5LjE1MTQ4MSwgMjAxMy8wMy8xMy0xMjowOToxNSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIChXaW5kb3dzKSIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDo1OEMxMEI3NDI3MEIxMUU2ODVGMzhFNjYyMDIyOUFCMCIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDo1OEMxMEI3NTI3MEIxMUU2ODVGMzhFNjYyMDIyOUFCMCI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOjU4QzEwQjcyMjcwQjExRTY4NUYzOEU2NjIwMjI5QUIwIiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOjU4QzEwQjczMjcwQjExRTY4NUYzOEU2NjIwMjI5QUIwIi8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+GeWqMwAAA+BJREFUeNrMmVlsTGEUx+9cXZQiLZWKklhbQSSlSMUWSxAiJGJ5aSQehOiDF7yI4EFILW99I3iRSJGUPkiILSKp2OuJVtHWkrRVapn2jv+R/ycnn5l27rQz10l+mWlyl/+c833nO+c0FIlEnATMBbPAIn5OBuPAENAKToC74BtoB59AG/D9spBPgaPBdrAFjJH7Fa66TkRuNe8gP8Bb8Ap8j/eFaXFelwv286WZfKG2WL9SX5cFCuntBvAc/OoPD64HJ8EI5Q3tmW7whl4pAl/AUfAEDKZnQ1HuFXGPQGOiAsW7x8A26wUhirgMLnGtfe3hGcO5NApARpRnSchrY0UhlkAJxxmw0npYBzgOKinSj6WDCfRyphWFJnAPdMUjUH71WbDKElcDykGL0zcbCEroVf389+CW7Uk3ygNk/azghYIHDoCN/SDO4W6+A55aAiUrzImWz7StA2WWuF2gIpEc1ovVgQeWyELm06gCc8ARJU44DM45yTPZII8tkXO5DP4RuI8iPYqr4YmQbJN8+E4JlA1abAuUBbtZeU526O4khDWW3QdhK9TZWmAZd6/x3inw0UmdSZJ/pgSKlilGoMvTwoiTw/20k3p7yTyovRgScTNAvgrvFSbkVJuE+LU6GiXEefJHqfKefF5zgrMGVRnJZ4HEerryXjdzU1DWbB2BI10mRuPBej+1WhKsi8vLeDDXZRllwtvoBG8davNmS4gHUZyTQIWSrM1iQpyZptafo4QGabp9+JNmOijMY9MTtGWpEHe5PDHMGsz/DwQOUwI7XVYUZheP1ZVEAJbOFsGswTYR+EKF2NWVRABWwHPYeLDFZWKOKJFLAhRYpMQJjS7rsWYlcjlTT6pNOr5pahfL5m12KaparUPpZTcEILCEjjGniCy9iMk3F9hImzCXcZqQKhOnLFShjbBX/psQP4Aq5UUpdfZEGXEkKzGvZf4zu/exOdV0T1LJCZTx4gK2msm2Uq494z1pS29Ea5ra2RPrrm4HpwvJsplgtTW/kXq0M1ZffF2F2uMNe+nJUD+HVWaLm8AAtXNrOXTqcfQh2fwQmKdST4TTgAp6ui+WTWFTrUpedu15Fs29Do/kuDsIZlsiW7njryZQ2MrAaD5Yqko88+w6zoPCfsdv5VwjnnXayA67zYmUdGM/e0i+E7nWivnDPUWEz6iyPedngLkY7ARDrQeb72GOz5roVY/eylMHvxflXjkpLoKHfZ2wmhJIkvcylUi9BAnTa9U9DD59CzQm/csaZv0cn0JbOeK4ye/xbfcE/w0hYZvElnU8GEXBGRQjeewzi5B6rtP6RGY9vwUYACMHTam1T1ebAAAAAElFTkSuQmCC) no-repeat 0 0; background-size: contain; -webkit-animation: loading-keyframe 1s infinite linear; animation: loading-keyframe 1s infinite linear; } .fadeInUp .layer{ -webkit-animation: fadeInUp .5s; animation: fadeInUp .5s; } .fadeOutDown .layer{ -webkit-animation: fadeOutDown .5s!important; animation: fadeOutDown .5s!important; } @-webkit-keyframes loading-keyframe { from { -webkit-transform: rotate(0deg); } to { -webkit-transform: rotate(360deg); } } @keyframes loading-keyframe { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } @-webkit-keyframes fadeInUp { from { opacity: 0; -webkit-transform: translate3d(0,100%,0); } to { opacity: 1; -webkit-transform: none; } } @keyframes fadeInUp { from { opacity: 0; transform: translate3d(0,100%,0); } to { opacity: 1; transform: none; } } @-webkit-keyframes fadeOutDown { from { opacity: 1; } to { opacity: 0; -webkit-transform: translate3d(0, 100%, 0); } } @keyframes fadeOutDown { from { opacity: 1; } to { opacity: 0; transform: translate3d(0, 100%, 0); } }