@charset "utf-8";
body,div,h1,h2,h3,h4,h5,h6,html,input,li,ol,p,ul{ margin: 0;padding: 0;box-sizing: border-box;}
ul,li{list-style: none;padding:0;margin:0;}
a{ text-decoration: none;color: #333;transition: all .3s}

.calendar{max-width: 376px;margin: 24px auto;}
.calendar .dateSelector{height: auto;min-height: 393px;padding: 20px;box-sizing: border-box;margin: -20px;background: url(../images/szf/zfcwhy_rl_bg.png) no-repeat left top #fff;background-size: 100% 100%;border-radius: 4px}

.calendar .choice{position: relative; height: 62px;line-height: 62px;margin: 0 14px;border-bottom: 1px solid #D3E0EBFF;position: relative;}
.calendar .choice .tit{font-size: 22px;color: #005293FF;display: inline-block;font-weight: bold;vertical-align: middle;}
.calendar .choice .tit:before{content:"";display: inline-block;vertical-align: middle;margin:-3px 5px 0 0; width: 31px;height: 31px;background: url(../images/szf/zfcwhy_icon_tit.png) no-repeat center;background-size: contain;}
.calendar .choice .year{padding: 0;position: absolute;right:0;top:50%;margin-top: -17.5px;width: 110px;height: 35px;line-height: 35px; background: #EDF4FAFF;border: 1px solid #BED5E8FF; }
.calendar .choice .current{cursor: pointer;position: relative;height: 100%; color:#3FA2F2FF;padding: 0 20px 0 8px;font-weight: bold; color:transparent;background: linear-gradient(180deg, #3FA2F2FF 0%, #046FC7FF 100%);-webkit-background-clip: text;text-align: left;}
.calendar .choice .current:after{content:"";position: absolute;right: 8px;top: 50%;margin-top: -4px;border: 6px solid transparent;border-top-color: #005293FF;}
.calendar .choices{display: none; position: absolute;left:0;right: 0;top:35px; padding:  6px 0;border-radius: 0 0 4px 4px;border: 1px solid #e4e7ed; background: #fff;box-shadow: inset 0 3px 10px 0 #f3f3f3;z-index: 1;font-size: 15px;}
/*.calendar .choices:before,.choices:after{content:"";border: 8px solid transparent;border-bottom-color: #f3f3f3;position: absolute;left: 50%;top: -16px;margin-left: -8px;}
.calendar .choices:before{z-index: 2;}
.calendar .choices:after{border-width: 9px;margin-left:-9px;top: -19px;border-bottom-color: #e4e7ed;z-index: 1;} */
.calendar .choices p{cursor: pointer;padding: 5px 8px;line-height: 1.3;margin:0;font-weight: normal;float: none;}
.calendar .choices p:hover{background: #f5f7fa;}

.calendar .calendar_date{overflow: hidden;margin: 15px 10px 30px 2px;}
.calendar .calendar_date ul{overflow: hidden;}
.calendar .calendar_date li{width: 50%;float: left;list-style: none;}
.calendar .calendar_date li .box{margin-left: 8px;}
.calendar .calendar_date li p{width: 20%;float: left;}
.calendar .calendar_date li p>*{display: block;height: 24px;line-height: 24px;text-align: center;/*text-align: left;padding-left: 4px;*/margin: 15px 4px 0;background: #F5FAFFFF;border: 1px solid #DFEAF2FF; border-radius: 2px;font-size: 15px; }
.calendar .calendar_date li p.month span{font-size: 12px; font-weight: bold;height: 26px; line-height: 31px;text-align: center;padding:0; background: url(../images/szf/zfcwhy_icon_rl.png) no-repeat center;background-size: 100% 100%;color:#005293FF;border:none;}

@media (max-width:991px){
  .calendar .choice .tit{font-size: 19px;}
}

@media (max-width:480px){ 
  .calendar{width: 100%;margin: 0px auto 6px;box-sizing: initial;}
  .calendar .dateSelector{width: auto;min-height: 353px;box-sizing: initial;margin: 0 -7px;}
  .calendar .choice .year{width: 100px;}
  .calendar .choice .tit:before{width: 28px;}
}
@media (max-width:375px){
  .calendar{overflow: hidden;}
  
}