@charset "utf-8";
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,textarea,p,blockquote,th,td,input,select,textarea,button {margin:0;padding:0}
fieldset,img {border:0 none}
dl,ul,ol,menu,li {list-style:none}
blockquote, q {quotes: none}
blockquote:before, blockquote:after,q:before, q:after {content:'';content:none}
button {border:0 none;background-color:transparent;cursor:pointer}
input,button,select,textarea{outline:none}
input{border: none; font-style: normal;}
address,caption,cite,code,dfn,em,var,i {font-style:normal;font-weight:normal}
caption {display:none;}
table {width:100%;border-collapse:collapse;border-spacing:0;table-layout:fixed;}
img{vertical-align: middle;}
* {
    line-height: 1em;
    margin: 0;
    padding: 0;
}
html {
    font-family:"微软雅黑";
    height: 100%;
    font-size: 0.8em;
}
body {
    color: #666;
    font-size: 24px;
    overflow-x: hidden;
    max-width:800px;
    margin:0 auto;
}
h1 {
font-size: 1.5em;
}

input,button,select,textarea{outline:none}
input{border: none; font-style: normal;}
img{vertical-align: middle;}
a {outline: none;text-decoration:none; color: #636f79; font-size: 1em;} 
a:hover {text-decoration:none}
a:active {star:expression(this.onFocus=this.blur());}
.clearfix:after{
  content: "020"; 
  display: block; 
  height: 0; 
  clear: both; 
  visibility: hidden;  
  }

.clearfix {
  /* 触发 hasLayout */ 
  zoom: 1; 
  }
@media only screen and (max-width: 1920px) and (min-width: 720px) { body{ font-size: 20px; }.viewport{max-width: 720px;}}
@media only screen and (max-width: 719px) and (min-width:690px) { body{ font-size: 19.4444px; }.viewport{max-width: 700px;}}
@media only screen and (max-width: 689px) and (min-width:660px) { body{ font-size: 18.6331px; }.viewport{max-width: 689px;}}
@media only screen and (max-width: 659px) and (min-width:630px) { body{ font-size: 17.8217px; }.viewport{max-width: 659px;}}
@media only screen and (max-width: 629px) and (min-width:600px) { body{ font-size: 17.0103px; }.viewport{max-width: 629px;}}
@media only screen and (max-width: 599px) and (min-width:570px) { body{ font-size: 16.1989px; }.viewport{max-width: 599px;}}
@media only screen and (max-width: 569px) and (min-width:540px) { body{ font-size: 15.3876px; }.viewport{max-width: 569px;}}
@media only screen and (max-width: 539px) and (min-width:510px) { body{ font-size: 14.5763px; }.viewport{max-width: 539px;}}
@media only screen and (max-width: 509px) and (min-width:480px) { body{ font-size: 13.7650px; }.viewport{max-width: 509px;}}
@media only screen and (max-width: 479px) and (min-width:450px) { body{ font-size: 12.9537px; }.viewport{max-width: 479px;}}
@media only screen and (max-width: 449px) and (min-width:420px) { body{ font-size: 12.1424px; }.viewport{max-width: 449px;}}
@media only screen and (max-width: 419px) and (min-width:390px) { body{ font-size: 11.3311px; }.viewport{max-width: 419px;}}
@media only screen and (max-width: 389px) and (min-width:360px) { body{ font-size: 10.5189px; }.viewport{max-width: 389px;}}
@media only screen and (max-width: 359px) and (min-width:330px) { body{ font-size: 9.7067px; }.viewport{max-width: 359px;}}
@media only screen and (max-width: 329px) and (min-width:250px) { body{ font-size: 8.8955px; }.viewport{min-width: 320px;}}


.clear{clear:both;}
.data_top{ width: 100%; background-color:#00AAFF; padding: 3% 0;  text-align: center; margin-bottom: 2%;}
.data_top p{ color: #fff; font-size: 1.3em;}
.pull-left img{width: 15%; float: left;}
.pull-right img{width: 15%; float: right;}

#remainder{ position: absolute; right: 2%; top: 10%;}
#Date{ width:96%; padding:2%;}
#Date .Years{ width:100%; color:#000; border:1px solid #BCBCBC; font-size: 1.3em;}
#Date .Years td{text-align: center; padding: 2%;}
#Date .Week{ width:100%; text-align:center; color:#079fe8; background-color:#EEEEEE; border:1px solid #BCBCBC;}
#Date .Week td{line-height:2em;font-size: 1.3em; color:#000;}
#Date .Day{ width:100%; color:#a8a8a8; background-color:#fff;}
#Date .Day td{border:2px solid #DCDCDC;}
#Date .Day td .circle{ display:block; height:5em; padding: 10%;}
#Date .Day td .circle p{ font-size:1.3em; width:100%; height:1.8em;}
#Date .Day td .circle .red{ color:#FD453C;}
#Date .Day td.pink{background-color:#FFF0D9;position: relative;}
#Date .Day td.That_day{ background-color:#fffae0;}
#Date .Day td.Next_month{ background-color:#EEEEEE;}