* {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Microsoft YaHei', sans-serif;
        }
        
        body {
            background-color: #f5f5f5;
            color: #333;
            line-height: 1.6;
            padding: 5px;
        }
        a{color:#000;text-decoration:none}
        a:hover{color:red;text-decoration:none}
        .calendar-container {
            max-width: 1000px;
            margin: 0 auto;
            background: white;
            border-radius: 10px;
            box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
            overflow: hidden;
        }
        
        .calendar-header {
            background: linear-gradient(135deg, #6a11cb 0%, #2575fc 100%);
            color: white;
            text-align: center;
        }
        
        .calendar-header h1 {
            font-size: 28px;
            margin-bottom: 10px;
        }
        
        .calendar-nav {
            justify-content: space-between;
            align-items: center;
            background-color: #CB7A43;
        }
        
        .nav-btn {
            background: rgba(255, 255, 255, 0.2);
            color: white;
            border: none;
            padding: 5px 10px;
            border-radius: 5px;
            cursor: pointer;
            transition: background 0.3s;
            text-decoration: none;
            display: inline-block;
        }
        
        .nav-btn:hover {
            background: rgba(255, 255, 255, 0.3);
        }
        
        .calendar {
            width: 100%;
            border-collapse: inherit;
        }
        
        .weekdays {
            background-color: #f8f9fa;
        }
        
        .weekdays th {
            padding: 15px;
            text-align: center;
            font-weight: 600;
            border-bottom: 2px solid #e9ecef;
        }
        
        .calendar td {
            padding: 12px;
            text-align: center;
            vertical-align: top;
            height: 100px;
            border: 1px solid #e9ecef;
            position: relative;
            transition: background 0.3s;
        }
        
        .calendar td:hover {
            background-color: #f8f9fa;
        }
        
        .day-number {
            font-size: 30px;
            font-weight: bold;
            margin-bottom: 0px;
        }
        
        .lunar-date {
            font-size: 12px;
            color: #666;
            margin-bottom: 0px;
        }
        
        .festival,.festival2 {
            font-size: 14px;
            color: #ff5722;
            font-weight: bold;
            margin-bottom: 0px;
        }
        
        .jieqi {
            font-size: 12px;
            color: #4caf50;
            font-weight: bold;
            margin-bottom: 0px;
        }
        
        .today {
            background-color: #e3f2fd !important;
            border: 2px solid #4caf50 !important;
            z-index:9999;
        }
        
        .rest-day {
            color: #f44336;
            background-color: #ffebee;
        }
        
        .other-month {
            color: #aaa;
            background-color: #f9f9f9;
        }
        
        .other-month .lunar-date {
            color: #bbb;
        }
        
        .work-marker {
            position: absolute;
            top: 0px;
            left: 0px;
            background: #ff9800;
            color: white;
            font-size: 10px;
            padding: 2px 4px;
            border-radius: 3px;
        }
        
        .date-link {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            display: flex;
            flex-direction: column;
            justify-content: flex-start;
            align-items: center;
            padding-top: 10px;
            text-decoration: none;
            color: inherit;
        }
        
        .footer {
            text-align: center;
            padding: 15px;
            background-color: #f8f9fa;
            color: #6c757d;
            font-size: 14px;
        }
        
        .legend {
            display: flex;
            justify-content: center;
            margin-top: 10px;
            flex-wrap: wrap;
        }
        
        .legend-item {
            display: flex;
            align-items: center;
            margin: 0 10px;
        }
        
        .legend-color {
            width: 15px;
            height: 15px;
            margin-right: 5px;
            border-radius: 3px;
        }
        
.month-water {
  position: absolute;
  left: 0;
  font-size: 120px;
  width: 100%;
  height: 442px;
  text-align: center;
  line-height: 442px;
  color: #999;
  opacity: 0.1;
  filter: alpha(opacity=10);
}
        @media (max-width: 768px) {
            .calendar td {
                height: 80px;
                padding: 8px;
            }
            
            .day-number {
                font-size: 24px;
            }
            
            .lunar-date, .festival, .jieqi {
                font-size: 12px;
            }
        }
        
        @media (max-width: 480px) {
            .calendar td {
                height: 75px;
                padding: 2px;
            }
            
            .day-number {
                font-size: 22px;
            }
            
.month-water {
  position: absolute;
  left: 0;
  font-size: 50px;
  width: 100%;
  height: 442px;
  text-align: center;
  line-height: 442px;
  color: #999;
  opacity: 0.1;
  filter: alpha(opacity=10);
}
            .lunar-date, .festival, .jieqi {
                font-size: 9px;
            }
            .legend {
                flex-direction: column;
                align-items: center;
            }
            
            .legend-item {
                margin: 5px 0;
            }
        }
        
        .mod-panel .bd {
  margin-bottom:20px
}
.mod-panel .calendar {
  position:relative;
  height:446px;
  border:2px solid #cb7a43
}
.mod-panel .calendar .panel-main {
  margin:0 240px;
  border-left:1px solid #cb7a43;
  border-right:1px solid #cb7a43;
  background:#fcf8ef;
  box-sizing:border-box;
  height: 442px;
}
.mod-panel .calendar .panel-main .date {
  position:relative;
  height:140px;
  line-height:140px;
  text-align:center;
  font-size:120px;
  font-weight:bold;
  color:#d3463d
}
.mod-panel .calendar .panel-main .prev,
.mod-panel .calendar .panel-main .next {
  position:absolute;
  display:block;
  width:21px;
  height:36px
}
.mod-panel .calendar .panel-main .prev {
  top:52px;
  left:35px;
  background:url("/images/prev.png") no-repeat
}
.mod-panel .calendar .panel-main .next {
  top:52px;
  right:35px;
  background:url("/images/next.png") no-repeat
}
.mod-panel .calendar .panel-main .head {
  height:auto
}
.mod-panel .calendar .panel-main .head .time {
  padding-top:12px;
  height:48px;
  line-height:48px;
  text-align:center;
  font-weight:bold;
  font-size:16px;
  color:#444
}
.mod-panel .calendar .panel-main .head .time span {
  margin:0 5px
}
.mod-panel .calendar .panel-main .head .lunar {
  line-height:30px;
  text-align:center;
  font-size:16px;
  font-weight:bold;
  color:#444
}
.mod-panel .calendar .panel-main .body {
  margin:58px 5px;
  border:1px solid #f4c493;
  padding:7px 5px;
  background:rgba(255,255,255,.8);
  border-radius:4px
}
.mod-panel .calendar .panel-main .body p {
  line-height:24px;
  text-align:center
}
.mod-panel .calendar .panel-main .foot {
  line-height:30px;
  text-align:center
}
.mod-panel .calendar .panel-main .foot span {
  margin:0 3px
}
.mod-panel .calendar .panel-side {
  width:240px;
  height:450px
}
.mod-panel .calendar .panel-side .head {
  position:relative;
  height:200px;
  overflow:hidden
}
.mod-panel .calendar .panel-side .head:after {
  position:absolute;
  left:50%;
  top:0;
  width:0;
  height:100%;
  content:"";
  border-right:1px solid #f0f0f0
}
.mod-panel .calendar .panel-side .head .item {
  float:left;
  width:50%;
  height:200px
}
.mod-panel .calendar .panel-side .head .item h4 {
  height:50px;
  line-height:50px;
  text-align:center;
  font-weight:bold;
  font-size:18px;
  color:#bc2f3f
}
.mod-panel .calendar .panel-side .head .item ul {
  overflow:hidden
}
.mod-panel .calendar .panel-side .head .item ul li {
  text-align:center;
  display: block;
}
.mod-panel .calendar .panel-side .head .item ul.list-2 li {
  float:left;
  width:50%;
  display: block;
}
.mod-panel .calendar .panel-side .body {
  height:33px;
  background:#cb7a43;
  line-height:33px;
  text-align:center;
  color:#fff
}
.mod-panel .calendar .panel-side .foot {
  height:210px
}
.mod-panel .calendar .panel-side .foot .suitable {
  height:80px;
  overflow:hidden
}
.mod-panel .calendar .panel-side .foot .suitable span {
  display:block;
  width:48px;
  height:48px;
  margin:15px auto;
  background:#bc2f3f;
  border-radius:50%;
  text-align:center;
  line-height:48px;
  font-size:30px;
  color:#fff;
  font-family:"SongTi";
  box-shadow:0 0 0 3px #fff,0 0 0 5px rgba(212,71,61,.25)
}
.mod-panel .calendar .panel-side .foot .suitable span.ji {
  background:#278338;
  box-shadow:0 0 0 3px #fff,0 0 0 5px rgba(39,131,56,.25)
}
.mod-panel .calendar .panel-side .foot .suitable_con {
  height:130px;
  overflow:hidden
}
.mod-panel .calendar .panel-side .foot .suitable_con ul {
  overflow:hidden
}
.mod-panel .calendar .panel-side .foot .suitable_con ul li {
  float:left;
  font-size:14px;
  min-width:25%;
  text-align:center;
  height:22px;
  overflow:hidden;
  padding-top:1px;
  line-height:22px
}
.mod-panel .calendar .panel-side .foot .suitable_con ul li span {
  display:block;
  padding:0 5px
}
.mod-panel .calendar .panel-left {
  position:absolute;
  left:0px;
  top:0px
}
.mod-panel .calendar .panel-right {
  position:absolute;
  right:0px;
  top:0px
}
.mod-panel .date-picker a:hover {
  text-decoration:none
}
.mod-panel .date-picker .box {
  border:2px solid #cb7a43;
  background:#fff
}
.mod-panel .date-picker .selector {
  position:relative;
  padding:5px 15px;
  background:#cb7a43;
  vertical-align:middle;
  text-align:center;
  overflow:hidden
}
.mod-panel .date-picker .selector span {
  display:inline-block;
  vertical-align:middle;
  font-size:0
}
.mod-panel .date-picker .selector a {
  display:inline-block;
  position:relative;
  height:30px;
  padding:0 5px;
  background:rgba(255,255,255,.75);
  line-height:30px;
  vertical-align:middle;
  font-size:14px
}
.mod-panel .date-picker .selector a:hover {
  background:#fc9000;
  color:#fff
}
.mod-panel .date-picker .selector .goback {
  margin-left:7px
}
.mod-panel .date-picker .selector .prev {
  left:1px
}
.mod-panel .date-picker .selector .next {
  margin-right:7px;
  right:1px
}
.mod-panel .date-picker .selector select {
  min-width:60px;
  height:30px;
  padding-left:4px;
  border:medium none;
  background:rgba(255,255,255,.75);
  line-height:30px;
  vertical-align:middle;
  font-size:14px;
  color:#666;
  outline:none
}
.mod-panel .date-picker .selector button {
  height:26px;
  border:1px solid #ebebeb;
  line-height:24px;
  background:#fafafa
}
.mod-panel .date-picker table {
  width:100%;
  table-layout:fixed;
  color:#666
}
.mod-panel .date-picker table tr {
  border-top:1px solid #ebebeb
}
.mod-panel .date-picker table th,
.mod-panel .date-picker table td {
  border:1px solid #ebebeb;
  text-align:center
}
.mod-panel .date-picker table th {
  line-height:30px;
  font-weight:normal
}
.mod-panel .date-picker table td {
  position:relative;
  line-height:22px
}
.mod-panel .date-picker table thead {
  background:#f8f8f8
}
.mod-panel .date-picker table tbody a {
  display:block;
  position:relative;
  margin:0 auto;
  padding:5px 0;
  border:1px solid rgba(0,0,0,0);
  cursor:pointer
}
.mod-panel .date-picker table tbody a.active,
.mod-panel .date-picker table tbody a:hover {
  border:1px solid #fc9000
}
.mod-panel .date-picker table tbody span {
  display:block;
  overflow:hidden;
  white-space:nowrap;
  text-overflow:ellipsis
}
.mod-panel .date-picker table tbody i {
  position:absolute;
  right:2px;
  top:0;
  line-height:20px;
  font-style:normal;
  color:#fff
}
.mod-panel .date-picker table tbody .s1 {
  font-size:20px;
  color:#212121
}
.mod-panel .date-picker table tbody .s2 {
  color:#757575
}
.mod-panel .date-picker table tbody .holiday a {
  background:#f1f9f1
}
.mod-panel .date-picker table tbody .holiday i {
  color:#4bae4f
}
.mod-panel .date-picker table tbody .work a {
  background:#fef0ef
}
.mod-panel .date-picker table tbody .work i {
  color:#f44336
}
.mod-panel .date-picker table tbody .today a {
  background:#fc9000
}
.mod-panel .date-picker table tbody .today span {
  color:#fff
}
.mod-panel .date-picker table tbody .disabled a {
  background:#fff
}
.mod-panel .date-picker table tbody .disabled .s1,
.mod-panel .date-picker table tbody .disabled .s2 {
  color:#bdbdbd
}
.mod-panel widget-calendar {
  width:auto;
  --primary-color: #CB7A43;
  display:block;
  max-width:none
}
.mod-panel .ft {
  margin:0 20px
}
.mod-panel .ft ul {
  overflow:hidden;
  margin-bottom:15px
}
.mod-panel .ft ul li {
  float:left;
  width:11.11%
}
.mod-panel .ft ul a {
  display:block;
  line-height:36px;
  text-align:center;
  background:#fcf8ef;
  border:1px solid #f4c493;
  border-radius:4px;
  margin:0 3px 6px
}
.mod-panel .ft ul a:hover {
  background:#cb7a43;
  border:1px solid #cb7a43;
  color:#fff
}
.mod-panel .ft .table-inner {
  padding:0 .1px;
  margin-bottom:10px;
  overflow-x:auto
}
.mod-panel .ft table {
  width:100%;
  table-layout:fixed;
  color:#666
}
.mod-panel .ft table thead {
  background:#cb7a43
}
.mod-panel .ft table th,
.mod-panel .ft table td {
  padding:7px 8px;
  line-height:18px;
  text-align:center
}
.mod-panel .ft table th.th,
.mod-panel .ft table td.th {
  background:#fcf8ef
}
.mod-panel .ft table th {
  color:#fff
}
.mod-panel .ft table th span {
  display:block
}
.mod-panel .ft table th span.time {
  color:rgba(255,255,255,.8)
}
.mod-panel .ft table tbody td {
  border:1px solid #ebd8a5
}
.mod-intro .hd {
  margin-bottom:12px;
  line-height:36px;
  text-align:center;
  font-weight:bold;
  font-size:18px
}
.mod-intro p {
  margin-bottom:12px;
  line-height:24px;
  text-indent:2em
}
@media screen and (max-width: 799px) {
  .module {
    margin-bottom:15px
  }
  .module .bd {
    margin:0
  }
  .mod-panel .bd {
    margin-bottom:20px
  }
  .mod-panel .calendar {
    height:auto;
    overflow:hidden
  }
  .mod-panel .calendar .panel-main {
    height:auto;
    margin:0;
    border-left:none;
    border-right:none;
    padding-bottom:10px;
    border-bottom:1px solid #ff9f9f
  }
  .mod-panel .calendar .panel-main .head {
    height:auto
  }
  .mod-panel .calendar .panel-main .head h1 {
    height:36px;
    line-height:36px;
    font-size:15px
  }
  .mod-panel .calendar .panel-main .date {
    height:90px;
    line-height:90px;
    font-size:60px
  }
  .mod-panel .calendar .panel-main .prev {
    top:25px
  }
  .mod-panel .calendar .panel-main .next {
    top:25px
  }
  .mod-panel .calendar .panel-main .week {
    line-height:30px;
    font-size:20px
  }
  .mod-panel .calendar .panel-main .lunar {
    font-size:14px
  }
  .mod-panel .calendar .panel-main .body {
    margin:5px 5px
  }
  .mod-panel .calendar .panel-main .body p {
    line-height:20px
  }
  .mod-panel .calendar .panel-side {
    height:auto
  }
  .mod-panel .calendar .panel-side .head {
    height:auto
  }
  .mod-panel .calendar .panel-side .head .suitable {
    height:auto
  }
  .mod-panel .calendar .panel-side .head .suitable span {
    zoom:.75
  }
  .mod-panel .calendar .panel-side .head .suitable_con ul li {
    font-size:12px
  }
  .mod-panel .calendar .panel-side .body {
    font-size:13px
  }
  .mod-panel .calendar .panel-side .foot .item h4 {
    height:40px;
    line-height:40px;
    font-size:16px
  }
  .mod-panel .calendar .panel-side .foot li {
    font-size:12px
  }
  .mod-panel .calendar .panel-left,
  .mod-panel .calendar .panel-right {
    float:left;
    position:static;
    width:50%
  }
  .mod-panel .calendar .panel-left {
    box-sizing:border-box;
    border-right:1px solid #f0f0f0
  }
  .mod-panel .date-picker .selector {
    position:relative;
    padding:3px 10px 5px
  }
  .mod-panel .date-picker .selector select,
  .mod-panel .date-picker .selector a {
    height:28px;
    line-height:28px
  }
  .mod-panel .date-picker .selector .prev,
  .mod-panel .date-picker .selector .next {
    margin:0
  }
  .mod-panel .date-picker .selector .prev-year,
  .mod-panel .date-picker .selector .next-year {
    display:none
  }
  .mod-panel .date-picker .selector .prev-month {
    position:absolute;
    left:5px;
    top:3px
  }
  .mod-panel .date-picker .selector .next-month {
    position:absolute;
    right:5px;
    top:3px
  }
  .mod-panel .date-picker .selector .goback {
    padding:0 7px
  }
  .mod-panel .date-picker table tbody .s1 {
    font-size:16px
  }
  .mod-panel .date-picker table tbody .s2 {
    font-size:12px
  }
  .mod-panel .date-picker table td {
    line-height:18px
  }
  .mod-panel .ft {
    margin:0 auto
  }
  .mod-panel .ft ul li {
    width:33.33%
  }
  .mod-panel .ft table {
    width:720px
  }
  .mod-intro .hd {
    font-size:16px
  }
  .mod-intro p {
    line-height:22px
  }
}
.foot{text-align:center;}
.foot p{padding-top:10px;clear:both;color:#666666;}