html, body { margin: 0; }
.mup { margin:0 auto; width:20px; height:26px; background: url(../images/mupdown.png) no-repeat top center;}
.mdown { margin:0 auto; width:20px; height:26px; background: url(../images/mupdown.png) no-repeat bottom center;}
.cx-time-main { padding:  0; }
ul { white-space: nowrap; margin: 0; padding: 0; }
ul li { outline: none; list-style-type: none; margin: 0px; }
.cx-time-main { width: 100%; height: auto; }
.cx-time-box { position: relative; width: 100%; height: auto; }
.cx-time-main ul li { position: relative; padding: 10px 0 20px 0; height: auto; }
.cx-time-main ul li:nth-child(2n) { padding-left: 54%; text-align: left; }
.cx-time-main ul li:nth-child(2n+1) { padding-right: 54%; text-align: right; }
.cx-main-box::before { content: ''; position: absolute; top: 50%; left: 50%; width: 16px; height: 16px; margin: -8px 0 0 -8px; border-radius: 50%; z-index: 2; border: 2px solid #2089c8; }
.cx-main-box::after { content: ''; position: absolute; top: calc(50% - 1px); left: calc(50% + 6px); width: calc(4% - 6px); height: 2px; background: #2089c8; }
.cx-time-main ul li:nth-child(2n+1) .cx-main-box::after { left: auto; right: calc(50% + 6px); }
.cx-time-main .active::before { background: #2089c8; border: 2px solid #eee; }
.cx-time-main ul li::before, .cx-time-main ul li::after { content: ''; position: absolute; top: 0; width: 4px; height: calc(50% - 8px); left: 50%; background: #2089c8; margin-left: -2px; }
.cx-time-main ul li::after { top: auto; bottom: 0; }
.cx-main-box { display: inline-block; min-width: 40%; width: 300px; min-height: 40px; background: #2089c8; border-radius: 10px; text-align:center; padding: 20px; cursor: pointer; font-size: 14px; }
.cx-main-box div { font-size: 14px; }