.dd_wrap a,.dd_wrap img,.dd_wrap ul,.dd_wrap li,.dd_wrap div { margin:0; padding:0; list-style:none; -webkit-box-sizing: initial !important; -moz-box-sizing: initial !important; box-sizing: initial !important; -webkit-tap-highlight-color: rgba(0,0,0,0); font-family: sans-serif; } /* wrap */ .dd_wrap { position: absolute; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; -o-user-select: none; user-select: none; outline: none; width: 100%; height: 100%; top: 0; left: 0; display:none; z-index:99; } .dd_overlay { position: fixed; width: 100%; height: 100%; top: 0; left: 0; z-index:1; } /* window */ .dd_ { border: 2px solid #000000; background: #FFF; border-radius: 8px; -moz-border-radius: 8px; -webkit-border-radius: 8px; position: absolute; width: 100px; color:#000000; display: none; z-index: 10; box-shadow: 0 0px 0px 6px rgba(0,0,0,0.05); -webkit-box-shadow: 0 0px 0px 6px rgba(0,0,0,0.05); -moz-box-shadow: 0 0px 0px 6px rgba(0,0,0,0.05); -webkit-animation-fill-mode: both; animation-fill-mode: both; } .dd_:after { content: ""; width: 10px; height: 10px; transform: rotate(45deg); -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -sand-transform: rotate(45deg); background: #FFF; top: -7px; left: 50%; margin-left: -4px; position: absolute; border-top: 2px solid #000000; border-left: 2px solid #000000; border-radius: 1px; -moz-border-radius: 1px; -webkit-border-radius: 1px; } /* swiper */ .dd_ .dd_sw_ { width:100px; overflow:hidden; position:relative; z-index:1; } .dd_ .dd_sw_ .dd_sl_ { overflow-x:scroll; overflow-y:hidden; } .dd_ .dd_sw_ .dd_sl_ ul { padding:0; margin:0; list-style:none; color:inherit; font-size:inherit; } .dd_ .dd_sw_ .dd_sl_ li { width:100px; float:left; text-align:center; font-weight:bold; cursor:pointer; } .dd_ .dd_sw_ .dd_sl_ li:hover { background: rgba(0,0,0,0.04); } .dd_ li.dd_sltd_{ position:relative; } /* nativagion buttons */ .dd_ .dd_sw_:hover .dd_nav_ { display:block; } .dd_ .dd_sw_ .dd_nav_ { position:absolute; width:24px; height:100%; color:#ccc; font-size:12px; text-align:center; z-index:11; top:0; cursor:pointer; display:none; background-size:12px 12px !important; opacity:0.3; } .dd_ .dd_sw_ .dd_nav_.dd_prev_ { left:0; background:url(icons/prev.png) center no-repeat; } .dd_ .dd_sw_ .dd_nav_.dd_next_ { right:0; background:url(icons/next.png) center no-repeat; } /* month */ .dd_ .dd_m_ { font-size:24px; -webkit-border-top-left-radius: 8px; -webkit-border-top-right-radius: 8px; -moz-border-radius-topleft: 8px; -moz-border-radius-topright: 8px; border-top-left-radius: 8px; border-top-right-radius: 8px; } .dd_ .dd_m_,.dd_ .dd_m_ .dd_sl_ ul,.dd_ .dd_m_ .dd_sl_ ul li { height:30px; } .dd_ .dd_m_ .dd_sl_ ul li { line-height:30px; } /* day */ .dd_ .dd_d_ { font-size:44px; border-bottom: 1px solid rgba(0,0,0,0.1); border-top: 1px solid rgba(0,0,0,0.1); } .dd_ .dd_d_,.dd_ .dd_d_ .dd_sl_ ul,.dd_ .dd_d_ .dd_sl_ ul li { height:60px; } .dd_ .dd_d_ .dd_sl_ ul li { line-height:48px; position:relative; } .dd_ .dd_d_ .dd_sl_ ul li em { position:absolute; bottom:2px; left:10px; right:10px; text-align:center; font-style:normal; font-size:14px; line-height:normal; color:#a5cedb; } .dd_ .dd_all_ { position:absolute; width:100%; height:100%; top:0; left:0; z-index:2; color:#000; background:#FFF; border-radius:8px; transform: scale3d(0,0,1); -webkit-transform: scale3d(0,0,1); -moz-transform: scale3d(0,0,1); opacity:0; } .dd_ .dd_all_.dd_open_ { transform: scale3d(1,1,1); -webkit-transform: scale3d(1,1,1); -moz-transform: scale3d(1,1,1); opacity:1; } .dd_ .dd_all_ ul { float:left; padding: 1px 4px 4px 4px; } .dd_ .dd_all_ ul li { width: 20.5%; float: left; margin: 0 2px; padding: 3px 0 1px 0; font-size: 10pt; letter-spacing: -1px; line-height: 10pt; text-align: center; font-weight: 900; cursor: pointer; border-bottom: 2px solid rgba(0,0,0,0.2); color: rgba(0,0,0,0.2); } .dd_ .dd_all_ ul li.dd_sunday { color:#FFF; } .dd_ .dd_all_ ul li:hover,.dd_ .dd_all_ ul li.dd_sltd_{ color:#000000; border-bottom: 2px solid #000000; } .dd_ .dd_all_.dd_a_y_ ul li { width: 45.5%; } /* year */ .dd_ .dd_y_ { font-size:18px; position:relative; } .dd_ .dd_y_,.dd_ .dd_y_ .dd_sl_ ul,.dd_ .dd_y_ .dd_sl_ ul li { height:30px; } .dd_ .dd_y_ .dd_sl_ ul li { line-height:30px; } /* range */ .dd_ .dd_r_ { padding: 0 2px; text-align: center; margin: 0 0 6px 0px; position:relative; clear:both; font-size: 0; } .dd_ .dd_r_:after { left: 0; right: 0; border-bottom: 2px solid rgba(0,0,0,0.1); content: ""; position: absolute; top: 8px; } .dd_ .dd_r_ ul { list-style: none; margin: 0; padding: 0; text-align:center; } .dd_ .dd_r_ ul li { display: inline-block; border:2px solid; position: relative; cursor: pointer; width:8px; height: 8px; z-index:1; border-radius:50%; background:#FFF; text-align:center; margin: 3px; } .dd_ .dd_r_ ul li { -webkit-transition: all 0.2s cubic-bezier(.7, 0, .175, 1) 0s; -moz-transition: all 0.2s cubic-bezier(.7, 0, .175, 1) 0s; -ms-transition: all 0.2s cubic-bezier(.7, 0, .175, 1) 0s; transition: all 0.2s cubic-bezier(.7, 0, .175, 1) 0s; } .dd_ .dd_all_ { -webkit-transition: all 0.4s cubic-bezier(.7, 0, .175, 1) 0s; -moz-transition: all 0.4s cubic-bezier(.7, 0, .175, 1) 0s; -ms-transition: all 0.4s cubic-bezier(.7, 0, .175, 1) 0s; transition: all 0.4s cubic-bezier(.7, 0, .175, 1) 0s; } .dd_ .dd_r_ ul li:hover { transform:scale3d(2,2,1); -webkit-transform:scale3d(2,2,1); -moz-transform:scale3d(2,2,1); z-index:11; } .dd_ .dd_r_ ul li.dd_sltd_ { transform: scale3d(1,1,1); -webkit-transform: scale3d(1,1,1); -moz-transform: scale3d(1,1,1); } .dd_ .dd_d_ .dd_sl_{ height:80px; } .dd_ .dd_y_ .dd_sl_,.dd_ .dd_m_ .dd_sl_{ height:50px; } /* sybmit */ .dd_ .dd_submit { -webkit-border-bottom-right-radius: 5px; -webkit-border-bottom-left-radius: 5px; -moz-border-radius-bottomright: 5px; -moz-border-radius-bottomleft: 5px; border-bottom-right-radius: 5px; border-bottom-left-radius: 5px; color:#fff; text-align:center; padding:6px 0; cursor:pointer; height:20px; background-image:url(icons/done.png); background-position: center; background-repeat:no-repeat; background-size:16px 16px; } /* effects */ @-webkit-keyframes dd_bounce { 0% { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } 20% { -webkit-transform: scale3d(1.25, 0.75, 1); transform: scale3d(1.25, 0.75, 1); } 30% { -webkit-transform: scale3d(0.75, 1.25, 1); transform: scale3d(0.75, 1.25, 1); } 60% { -webkit-transform: scale3d(1.15, 0.85, 1); transform: scale3d(1.15, 0.85, 1); } 70% { -webkit-transform: scale3d(.95, 1.05, 1); transform: scale3d(.95, 1.05, 1); } 80% { -webkit-transform: scale3d(1.05, .95, 1); transform: scale3d(1.05, .95, 1); } 100% { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } } @keyframes dd_bounce { 0% { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } 20% { -webkit-transform: scale3d(1.25, 0.75, 1); transform: scale3d(1.25, 0.75, 1); } 30% { -webkit-transform: scale3d(0.75, 1.25, 1); transform: scale3d(0.75, 1.25, 1); } 60% { -webkit-transform: scale3d(1.15, 0.85, 1); transform: scale3d(1.15, 0.85, 1); } 70% { -webkit-transform: scale3d(.95, 1.05, 1); transform: scale3d(.95, 1.05, 1); } 80% { -webkit-transform: scale3d(1.05, .95, 1); transform: scale3d(1.05, .95, 1); } 100% { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } } .dd_.dd_bounce { -webkit-animation-name: dd_bounce; animation-name: dd_bounce; -webkit-animation-duration: 1s; animation-duration: 1s; } @-webkit-keyframes dd_fadein { 0% {opacity: 0;} 100% {opacity: 1;} } @keyframes dd_fadein { 0% {opacity: 0;} 100% {opacity: 1;} } .dd_.dd_fadein { -webkit-animation-name: dd_fadein; animation-name: dd_fadein; -webkit-animation-duration: .3s; animation-duration: .3s; } @-webkit-keyframes dd_fadeout { 0% {opacity: 1;} 100% {opacity: 0;} } @keyframes dd_fadeout { 0% {opacity: 1;} 100% {opacity: 0;} } .dd_.dd_fadeout { -webkit-animation-name: dd_fadeout; animation-name: dd_fadeout; -webkit-animation-duration: .3s; animation-duration: .3s; } @-webkit-keyframes dd_dropdown { 0% { opacity: 0; -webkit-transform: translate3d(0, -30%, 0); transform: translate3d(0, -30%, 0); } 100% { opacity: 1; -webkit-transform: none; transform: none; } } @keyframes dd_dropdown { 0% { opacity: 0; -webkit-transform: translate3d(0, -30%, 0); transform: translate3d(0, -30%, 0); } 100% { opacity: 1; -webkit-transform: none; transform: none; } } .dd_.dd_dropdown { -webkit-animation-name: dd_dropdown; animation-name: dd_dropdown; -webkit-animation-duration: .5s; animation-duration: .5s; } @-webkit-keyframes dd_alert { 0%, 100% { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } 10%, 30%, 50%, 70%, 90% { -webkit-transform: translate3d(-10px, 0, 0); transform: translate3d(-10px, 0, 0); } 20%, 40%, 60%, 80% { -webkit-transform: translate3d(10px, 0, 0); transform: translate3d(10px, 0, 0); } } @keyframes dd_alert { 0%, 100% { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } 25% { -webkit-transform: translate3d(-5px, 0, 0); transform: translate3d(-5px, 0, 0); } 50% { -webkit-transform: translate3d(5px, 0, 0); transform: translate3d(5px, 0, 0); } } .dd_alert { -webkit-animation-name: dd_alert; animation-name: dd_alert; -webkit-animation-duration: .5s; animation-duration: .5s; }