.dateMain{ z-index: 100; width: 100%; max-width:450px; height: 100%; background: #f8f8f8; overflow: hidden; position: fixed; top: 0; left: 0;  -webkit-user-select:none; -moz-user-select:none; -ms-user-select:none; user-select:none; -webkit-backface-visibility: hidden; -webkit-transform-style: preserve-3d; color:#333;font-family:tahoma,"microsoft yahei",SimSun;}
.dateMain .top{ width: 100%; text-align: center; position: fixed; top: 0; left: 0; z-index: 99; background: #e60012;}
.dateMain .top::before{display: none;}
.dateMain .top .close{ padding: 9px; position: absolute; top: 0; left: 0; cursor:pointer}
.dateMain .top .close span{ width: 25px; height: 25px; line-height: 25px; font-size: 0px; color: #fff; text-align: center; display: block; border: 1px solid #fff; -moz-border-radius: 100%; -webkit-border-radius: 100%; border-radius: 100%;}
.dateMain .top .close span::before{
    font-family: 'VV-font';
    content: "\a077";
    font-size: 14px;
    color: #fff;
    position: relative;
    left: -1px;

}
.dateMain .top .title{ height: 45px; line-height: 45px; font-size: 14px; font-weight: bold; color: #fff;}
.dateMain .top .decide{ padding: 9px; position: absolute; top: 0; right: 0; cursor:pointer}
.dateMain .top .decide span{ height: 25px; line-height: 27px; padding: 0 10px; font-size: 13px; color: #e60012; text-align: center; display: block; background: #fff; -moz-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 4px;}
.dateMain .top .week{ height: 28px; line-height: 26px; font-size: 14px; color: #fff; background: #e60012; overflow: hidden;}
.dateMain .top .week span{ width: 14.2587%; float: left;}
.dateMain .middle{ width: 100%; height: calc(100% - 73px); position: relative; z-index: 0; margin-top: 73px; box-sizing: border-box; overflow-y: auto; overflow-x:hidden; -webkit-backface-visibility:hidden; -webkit-scrollbar:none; -webkit-overflow-scrolling:touch;}
.dateMain .middle::-moz-scrollbar{ display:none;}
.dateMain .middle::-webkit-scrollbar{ display:none;}
.dateMain .middle .flot{ width: 50px; height: 50px; -webkit-backface-visibility: hidden; -webkit-transform-style: preserve-3d; transition:all 0.3s ease 0s; background: #fc6e51; position: absolute; z-index: 2; -moz-border-radius: 100%; -webkit-border-radius: 100%; border-radius: 100%;}
.dateMain .middle .title{ text-align: center; background: #fdedee; position: relative; z-index: 1;}
.dateMain .middle .title .prevMiddle,
.dateMain .middle .title .nextMiddle{ font-size: 16px; padding: 6px 16px; font-family: simsun; position: absolute; top: 0; cursor: pointer;}
.dateMain .middle .title .prevMiddle{ left: 0;}
.dateMain .middle .title .nextMiddle{ right: 0;}
.dateMain .middle .title span{ display: block; font-size: 16px; padding: 6px 0; color: #333;}
.dateMain .middle .days{ padding: 10px 0; overflow: hidden;}
.dateMain .middle .days li{ width: 14.2587%; height: 50px; line-height: 50px; border: 1px solid #f8f8f8; box-sizing: border-box; font-size: 16px; float: left; text-align: center; position: relative; z-index: 9;}
.dateMain .middle .days li.click{ background: #fff; cursor: pointer;}
.dateMain .middle .days li.onClick{ color: #999;}
.dateMain .middle .days li.start,
.dateMain .middle .days li.end{ color: #fff; background: #e60012;}
.dateMain .middle .days li.and{ color: #e60012; background: #fdedee;}
.dateMain .middle .days li .s-2{ width: 100%; line-height: 1; font-size: 10px; text-align: center; position: absolute; bottom: 4px; left: 0;}
.dateMain .middle .days li .s-3{ width: 100%; color: #e60012; line-height: 1; font-size: 10px; text-align: center; position: absolute; top: 4px; left: 0;}
.dateMain .middle .days li.onClick .s-3{ color: #999;}
.dateMain .middle .days li.start .s-3,
.dateMain .middle .days li.and .s-3,
.dateMain .middle .days li.end .s-3{ color: #fff;}
.dateMain .middle .months{ padding: 10px 0; overflow: hidden;}
.dateMain .middle .months li{ width: 25%; height: 80px; line-height: 80px; border: 1px solid #f8f8f8; box-sizing: border-box; background: #fff; font-size: 16px; float: left; text-align: center; position: relative; z-index: 9; cursor: pointer;}
.dateMain .middle .months li.active{ background: #e60012; color: #fff;}
.dateMain .middle .years{ padding: 10px 0; overflow: hidden;}
.dateMain .middle .years li{ width: 20%; height: 50px; line-height: 50px;  border: 1px solid #f8f8f8; box-sizing: border-box; background: #fff; font-size: 16px; float: left; text-align: center; position: relative; z-index: 9; cursor: pointer;}
.dateMain .middle .years li.active{ background: #e60012; color: #fff;}
.dateMain .bot{ width: 50px; height: 50px; line-height: 52px; font-size: 16px; text-align: center; background: #fff; cursor: pointer; z-index: 9; position: fixed; bottom: 10px; color: #fff; background: #b4b9c7; -moz-border-radius: 100%; -webkit-border-radius: 100%; border-radius: 100%;}
.dateMain .bot.btn01{ right: 10px;}
.dateMain .bot.btn02{ right: 70px;}
.dateMain .bot.btn03{ right: 130px; background: #e60012;}

.dateMainPC{ padding: 5px 5px 0; background: #f8f8f8; border: 1px solid #e4e4e4; box-shadow: 0 2px 8px rgba(8,1,3,0.12); position: absolute; left: 20px; top: 50px;z-index: 10;}
.dateMainPC .top{ position: relative;}
.dateMainPC .prevMiddle,
.dateMainPC .nextMiddle{ height: 20px; line-height: 20px; font-size: 20px; padding: 4px 7px; color: #fff; font-family: simsun; position: absolute; top: 0; cursor: pointer;}
.dateMainPC .prevMiddle{ left: 0;}
.dateMainPC .nextMiddle{ right: 0;}
.dateMainPC .title{ width: 100%; height: 28px; line-height: 28px; text-align: center; display: table; color: #fff; font-weight: bold; background: #e60012;}
.dateMainPC .title span{ text-align: center; display: table-cell;}
.dateMainPC .middle{ display: table;}
.dateMainPC .middle .list{ border-left: 2px solid #e4e4e4; padding-bottom: 5px; display: table-cell; vertical-align: top;}
.dateMainPC .middle .list:first-child{ border-left: none;}
.dateMainPC .middle .week{ height: 25px; line-height: 25px; margin-bottom: 1px; background: #e60012; overflow: hidden;color: #fff;}
.dateMainPC .middle .week span{ width: 14.2587%; text-align: center; float: left;}
.dateMainPC .middle .days{ width: 259px;}
.dateMainPC .middle .days li{ width: 35px; height: 35px; line-height: 35px; text-align: center; margin: 1px; position: relative; float: left;}
.dateMainPC .middle .days li.click{ background: #fff; cursor: pointer;}
.dateMainPC .middle .days li.onClick{ color: #999;}
.dateMainPC .middle .days li.start,
.dateMainPC .middle .days li.end{ color: #fff; background: #e60012;}
.dateMainPC .middle .days li.and{ color: #fff; background: #fdedee;}
.dateMainPC .middle .days li .s-2{ width: 100%; line-height: 1; font-size: 10px; text-align: center; position: absolute; bottom: 4px; left: 0;}
.dateMainPC .middle .days li .s-3{ width: 100%; color: #e60012; line-height: 1; font-size: 10px; text-align: center; position: absolute; top: 4px; left: 0;}
.dateMainPC .middle .days li.onClick .s-3{ color: #999;}
.dateMainPC .middle .days li.start .s-3,
.dateMainPC .middle .days li.and .s-3,
.dateMainPC .middle .days li.end .s-3{ color: #fff;}
.dateMainPC .middle .months{ width: 259px; padding: 10px 0; box-sizing: border-box; overflow: hidden;}
.dateMainPC .middle .months li{ width: 25%; height: 60px; line-height: 60px; box-sizing: border-box; border: 1px solid #f8f8f8; box-sizing: border-box; background: #fff; font-size: 14px; float: left; text-align: center; position: relative; z-index: 9; cursor: pointer;}
.dateMainPC .middle .months li.active{ background: #e60012; color: #fff;}
.dateMainPC .middle .years{ width: 259px; height: 216px; padding: 10px 0; overflow-x: hidden; overflow-y: auto;}
.dateMainPC .middle .years li{ width: 20%; height: 50px; line-height: 50px;  border: 1px solid #f8f8f8; box-sizing: border-box; background: #fff; font-size: 16px; float: left; text-align: center; position: relative; z-index: 9; cursor: pointer;}
.dateMainPC .middle .years li.active{ background: #e60012; color: #fff;}

.dateMainBg{ width: 100%; height: 100%; position: fixed; top: 0; left: 0; z-index: 9999;}
@media (min-width: 450px) {
    .dateMain{
        left:50%;
        margin-left:-225px;}
}