table,
tr,
td {
  border-collapse:collapse;
  border-spacing:0;
  border:0;
  margin:0 0 0 0;
  padding:0 0 0 10px;
}
#whf {height:30px;width:100%; padding:0 0;}
#Cu_y, #Cu_d, #Cx_y, #Cx_m, #Cx_d, #ganzi, #gzi {height:30px; width:100%; text-align: center; padding:0 0 0 0; border:0;}
#Cu_m, #myms {width:100%; height:30px; text-align: center; padding:1px 0 0 0; border:0;}

@media screen and (min-width: 500px) {
#mystr {font-size:3em;color:#ff0000;}
#db1 {position:relative;top:-115px;}
#db2 {position:relative;top:-146px;}
#txtHint {width:100%;position:relative;top:-200px;}
div.daiv {position:relative;top:-173px;}

/* 针对 Safari 浏览器的样式 */
@media screen and (-webkit-min-device-pixel-ratio: 0) {
  /* Safari 浏览器 */
  .selector {
    #db1 {position:relative;top:-115px;}
    #db2 {position:relative;top:-154px;}
    #txtHint {width:100%;position:relative;top:-220px;}
    div.daiv {position:relative;top:-190px;}
  }
}

#j1 {
  transform: rotate(304deg);
  -ms-transform: rotate(304deg); /* IE 9 */
  -moz-transform: rotate(304deg); /* Firefox */
  -webkit-transform: rotate(304deg); /* Safari and Chrome */
  -o-transform: rotate(304deg); /* Opera */
  position:absolute;left:448px;top:99px;
}
#j2 {
  transform: rotate(284deg);
  -ms-transform: rotate(284deg); /* IE 9 */
  -moz-transform: rotate(284deg); /* Firefox */
  -webkit-transform: rotate(284deg); /* Safari and Chrome */
  -o-transform: rotate(284deg); /* Opera */
  position:absolute;left:368px;top:59px;
}
#j3 {
  transform: rotate(264deg);
  -ms-transform: rotate(264deg); /* IE 9 */
  -moz-transform: rotate(264deg); /* Firefox */
  -webkit-transform: rotate(264deg); /* Safari and Chrome */
  -o-transform: rotate(264deg); /* Opera */
  position:absolute;left:270px;top:48px;
}
#j4 {
  transform: rotate(240deg);
  -ms-transform: rotate(240deg); /* IE 9 */
  -moz-transform: rotate(240deg); /* Firefox */
  -webkit-transform: rotate(240deg); /* Safari and Chrome */
  -o-transform: rotate(240deg); /* Opera */
  position:absolute;left:159px;top:79px;
}
#j5 {
  transform: rotate(197deg);
  -ms-transform: rotate(197deg); /* IE 9 */
  -moz-transform: rotate(197deg); /* Firefox */
  -webkit-transform: rotate(197deg); /* Safari and Chrome */
  -o-transform: rotate(197deg); /* Opera */
  position:absolute;left:65px;top:177px;
}
#j6 {
  transform: rotate(143deg);
  -ms-transform: rotate(143deg); /* IE 9 */
  -moz-transform: rotate(143deg); /* Firefox */
  -webkit-transform: rotate(143deg); /* Safari and Chrome */
  -o-transform: rotate(143deg); /* Opera */
  position:absolute;left:79px;top:310px;
}
#j7 {
  transform: rotate(108deg);
  -ms-transform: rotate(108deg); /* IE 9 */
  -moz-transform: rotate(108deg); /* Firefox */
  -webkit-transform: rotate(108deg); /* Safari and Chrome */
  -o-transform: rotate(108deg); /* Opera */
  position:absolute;left:193px;top:392px;
}
#j8 {
  transform: rotate(87deg);
  -ms-transform: rotate(87deg); /* IE 9 */
  -moz-transform: rotate(87deg); /* Firefox */
  -webkit-transform: rotate(87deg); /* Safari and Chrome */
  -o-transform: rotate(87deg); /* Opera */
  position:absolute;left:305px;top:407px;
}
#j9 {
  transform: rotate(64deg);
  -ms-transform: rotate(64deg); /* IE 9 */
  -moz-transform: rotate(64deg); /* Firefox */
  -webkit-transform: rotate(64deg); /* Safari and Chrome */
  -o-transform: rotate(64deg); /* Opera */
  position:absolute;left:400px;top:385px;
}
#ja {
  transform: rotate(40deg);
  -ms-transform: rotate(40deg); /* IE 9 */
  -moz-transform: rotate(40deg); /* Firefox */
  -webkit-transform: rotate(40deg); /* Safari and Chrome */
  -o-transform: rotate(40deg); /* Opera */
  position:absolute;left:475px;top:334px;
}
#jb {
  transform: rotate(7deg);
  -ms-transform: rotate(7deg); /* IE 9 */
  -moz-transform: rotate(7deg); /* Firefox */
  -webkit-transform: rotate(7deg); /* Safari and Chrome */
  -o-transform: rotate(7deg); /* Opera */
  position:absolute;left:515px;top:255px;
}
#jc {
  transform: rotate(330deg);
  -ms-transform: rotate(330deg); /* IE 9 */
  -moz-transform: rotate(330deg); /* Firefox */
  -webkit-transform: rotate(330deg); /* Safari and Chrome */
  -o-transform: rotate(330deg); /* Opera */
  position:absolute;left:504px;top:167px;
}
#el {
  transform: rotate(75deg);
  -ms-transform: rotate(75deg); /* IE 9 */
  -moz-transform: rotate(75deg); /* Firefox */
  -webkit-transform: rotate(75deg); /* Safari and Chrome */
  -o-transform: rotate(75deg); /* Opera */
  position:absolute;left:454px;top:197px;
}
#ek {
  transform: rotate(15deg);
  -ms-transform: rotate(15deg); /* IE 9 */
  -moz-transform: rotate(15deg); /* Firefox */
  -webkit-transform: rotate(15deg); /* Safari and Chrome */
  -o-transform: rotate(15deg); /* Opera */
  position:absolute;left:455px;top:267px;
}
#ej {
  transform: rotate(45deg);
  -ms-transform: rotate(45deg); /* IE 9 */
  -moz-transform: rotate(45deg); /* Firefox */
  -webkit-transform: rotate(45deg); /* Safari and Chrome */
  -o-transform: rotate(45deg); /* Opera */
  position:absolute;left:415px;top:321px;
}
#ei {
  transform: rotate(345deg);
  -ms-transform: rotate(345deg); /* IE 9 */
  -moz-transform: rotate(345deg); /* Firefox */
  -webkit-transform: rotate(345deg); /* Safari and Chrome */
  -o-transform: rotate(345deg); /* Opera */
  position:absolute;left:355px;top:353px;
}
#eh {
  transform: rotate(15deg);
  -ms-transform: rotate(15deg); /* IE 9 */
  -moz-transform: rotate(15deg); /* Firefox */
  -webkit-transform: rotate(15deg); /* Safari and Chrome */
  -o-transform: rotate(15deg); /* Opera */
  position:absolute;left:282px;top:363px;
}
#eg {
  transform: rotate(316deg);
  -ms-transform: rotate(316deg); /* IE 9 */
  -moz-transform: rotate(316deg); /* Firefox */
  -webkit-transform: rotate(316deg); /* Safari and Chrome */
  -o-transform: rotate(316deg); /* Opera */
  position:absolute;left:197px;top:338px;
}
#ef {
  transform: rotate(75deg);
  -ms-transform: rotate(75deg); /* IE 9 */
  -moz-transform: rotate(75deg); /* Firefox */
  -webkit-transform: rotate(75deg); /* Safari and Chrome */
  -o-transform: rotate(75deg); /* Opera */
  position:absolute;left:105px;top:270px;
}
#ee {
  transform: rotate(13deg);
  -ms-transform: rotate(13deg); /* IE 9 */
  -moz-transform: rotate(13deg); /* Firefox */
  -webkit-transform: rotate(13deg); /* Safari and Chrome */
  -o-transform: rotate(13deg); /* Opera */
  position:absolute;left:100px;top:163px;
}
#ed {
  transform: rotate(40deg);
  -ms-transform: rotate(40deg); /* IE 9 */
  -moz-transform: rotate(40deg); /* Firefox */
  -webkit-transform: rotate(40deg); /* Safari and Chrome */
  -o-transform: rotate(40deg); /* Opera */
  position:absolute;left:188px;top:108px;
}
#ec {
  transform: rotate(340deg);
  -ms-transform: rotate(340deg); /* IE 9 */
  -moz-transform: rotate(340deg); /* Firefox */
  -webkit-transform: rotate(340deg); /* Safari and Chrome */
  -o-transform: rotate(340deg); /* Opera */
  position:absolute;left:280px;top:95px;
}
#eb {
  transform: rotate(15deg);
  -ms-transform: rotate(15deg); /* IE 9 */
  -moz-transform: rotate(15deg); /* Firefox */
  -webkit-transform: rotate(15deg); /* Safari and Chrome */
  -o-transform: rotate(15deg); /* Opera */
  position:absolute;left:353px;top:110px;
}
#ea {
  transform: rotate(47deg);
  -ms-transform: rotate(47deg); /* IE 9 */
  -moz-transform: rotate(47deg); /* Firefox */
  -webkit-transform: rotate(47deg); /* Safari and Chrome */
  -o-transform: rotate(47deg); /* Opera */
  position:absolute;left:414px;top:143px;
}
}

@media screen and (max-width: 500px) {
#mystr {font-size:2em;color:#ff0000;position:relative;top:-60px;}
#db1 {position:relative;top:-160px;}
#db2 {position:relative;top:-180px;}
#txtHint {width:100%;position:relative;top:-215px;}
div.daiv {position:relative;top:-198px;}
#j1 {                                     /* Safari and Chrome */
  transform: rotate(304deg);
  -ms-transform: rotate(304deg); /* IE 9 */
  -moz-transform: rotate(304deg); /* Firefox */
  -webkit-transform: rotate(304deg); /* Safari and Chrome */
  -o-transform: rotate(304deg); /* Opera */
  position:absolute;left:240px;top:45px;     /* 立春 */
}
#j2 {
  transform: rotate(284deg);
  -ms-transform: rotate(284deg); /* IE 9 */
  -moz-transform: rotate(284deg); /* Firefox */
  -webkit-transform: rotate(284deg); /* Safari and Chrome */
  -o-transform: rotate(284deg); /* Opera */
  position:absolute;left:195px;top:25px;     /* 惊蛰 */
}
#j3 {
  transform: rotate(264deg);
  -ms-transform: rotate(264deg); /* IE 9 */
  -moz-transform: rotate(264deg); /* Firefox */
  -webkit-transform: rotate(264deg); /* Safari and Chrome */
  -o-transform: rotate(264deg); /* Opera */
  position:absolute;left:140px;top:20px;     /* 清明 */
}
#j4 {
  transform: rotate(240deg);
  -ms-transform: rotate(240deg); /* IE 9 */
  -moz-transform: rotate(240deg); /* Firefox */
  -webkit-transform: rotate(240deg); /* Safari and Chrome */
  -o-transform: rotate(240deg); /* Opera */
  position:absolute;left:80px;top:40px;     /* 立夏 */
}
#j5 {
  transform: rotate(197deg);
  -ms-transform: rotate(197deg); /* IE 9 */
  -moz-transform: rotate(197deg); /* Firefox */
  -webkit-transform: rotate(197deg); /* Safari and Chrome */
  -o-transform: rotate(197deg); /* Opera */
  position:absolute;left:35px;top:97px;     /* 芒种 */
}
#j6 {
  transform: rotate(143deg);
  -ms-transform: rotate(143deg); /* IE 9 */
  -moz-transform: rotate(143deg); /* Firefox */
  -webkit-transform: rotate(143deg); /* Safari and Chrome */
  -o-transform: rotate(143deg); /* Opera */
  position:absolute;left:50px;top:170px;     /* 小暑 */
}
#j7 {
  transform: rotate(108deg);
  -ms-transform: rotate(108deg); /* IE 9 */
  -moz-transform: rotate(108deg); /* Firefox */
  -webkit-transform: rotate(108deg); /* Safari and Chrome */
  -o-transform: rotate(108deg); /* Opera */
  position:absolute;left:110px;top:210px;     /* 立秋 */
}
#j8 {
  transform: rotate(87deg);
  -ms-transform: rotate(87deg); /* IE 9 */
  -moz-transform: rotate(87deg); /* Firefox */
  -webkit-transform: rotate(87deg); /* Safari and Chrome */
  -o-transform: rotate(87deg); /* Opera */
  position:absolute;left:175px;top:215px;     /* 白露 */
}
#j9 {
  transform: rotate(64deg);
  -ms-transform: rotate(64deg); /* IE 9 */
  -moz-transform: rotate(64deg); /* Firefox */
  -webkit-transform: rotate(64deg); /* Safari and Chrome */
  -o-transform: rotate(64deg); /* Opera */
  position:absolute;left:225px;top:200px;     /* 寒露 */
}
#ja {
  transform: rotate(40deg);
  -ms-transform: rotate(40deg); /* IE 9 */
  -moz-transform: rotate(40deg); /* Firefox */
  -webkit-transform: rotate(40deg); /* Safari and Chrome */
  -o-transform: rotate(40deg); /* Opera */
  position:absolute;left:265px;top:170px;     /* 立冬 */
}
#jb {
  transform: rotate(7deg);
  -ms-transform: rotate(7deg); /* IE 9 */
  -moz-transform: rotate(7deg); /* Firefox */
  -webkit-transform: rotate(7deg); /* Safari and Chrome */
  -o-transform: rotate(7deg); /* Opera */
  position:absolute;left:280px;top:125px;     /* 大雪 */
}
#jc {
  transform: rotate(330deg);
  -ms-transform: rotate(330deg); /* IE 9 */
  -moz-transform: rotate(330deg); /* Firefox */
  -webkit-transform: rotate(330deg); /* Safari and Chrome */
  -o-transform: rotate(330deg); /* Opera */
  position:absolute;left:270px;top:75px;     /* 小寒 */
}
#el {                                               /* 0 */
  transform: rotate(75deg);
  -ms-transform: rotate(75deg); /* IE 9 */
  -moz-transform: rotate(75deg); /* Firefox */
  -webkit-transform: rotate(75deg); /* Safari and Chrome */
  -o-transform: rotate(75deg); /* Opera */
  position:absolute;left:240px;top:90px;           /* 摩羯 */
}
#ek {                                               /* 1 */
  transform: rotate(15deg);
  -ms-transform: rotate(15deg); /* IE 9 */
  -moz-transform: rotate(15deg); /* Firefox */
  -webkit-transform: rotate(15deg); /* Safari and Chrome */
  -o-transform: rotate(15deg); /* Opera */
  position:absolute;left:240px;top:140px;           /* 射手 */
}
#ej {                                               /* 2 */
  transform: rotate(45deg);
  -ms-transform: rotate(45deg); /* IE 9 */
  -moz-transform: rotate(45deg); /* Firefox */
  -webkit-transform: rotate(45deg); /* Safari and Chrome */
  -o-transform: rotate(45deg); /* Opera */
  position:absolute;left:230px;top:180px;           /* 天蝎 */
}
#ei {
  transform: rotate(345deg);
  -ms-transform: rotate(345deg); /* IE 9 */
  -moz-transform: rotate(345deg); /* Firefox */
  -webkit-transform: rotate(345deg); /* Safari and Chrome */
  -o-transform: rotate(345deg); /* Opera */
  position:absolute;left:180px;top:200px;           /* 天秤 */
}
#eh {
  transform: rotate(15deg);
  -ms-transform: rotate(15deg); /* IE 9 */
  -moz-transform: rotate(15deg); /* Firefox */
  -webkit-transform: rotate(15deg); /* Safari and Chrome */
  -o-transform: rotate(15deg); /* Opera */
  position:absolute;left:150px;top:170px;           /* 处女 */
}
#eg {
  transform: rotate(316deg);
  -ms-transform: rotate(316deg); /* IE 9 */
  -moz-transform: rotate(316deg); /* Firefox */
  -webkit-transform: rotate(316deg); /* Safari and Chrome */
  -o-transform: rotate(316deg); /* Opera */
  position:absolute;left:80px;top:200px;           /* 狮子 */
}
#ef {
  transform: rotate(75deg);
  -ms-transform: rotate(75deg); /* IE 9 */
  -moz-transform: rotate(75deg); /* Firefox */
  -webkit-transform: rotate(75deg); /* Safari and Chrome */
  -o-transform: rotate(75deg); /* Opera */
  position:absolute;left:30px;top:170px;          /* 巨蟹 */
}
#ee {
  transform: rotate(13deg);
  -ms-transform: rotate(13deg); /* IE 9 */
  -moz-transform: rotate(13deg); /* Firefox */
  -webkit-transform: rotate(13deg); /* Safari and Chrome */
  -o-transform: rotate(13deg); /* Opera */
  position:absolute;left:50px;top:90px;      /* 双子 */
}
#ed {
  transform: rotate(40deg);
  -ms-transform: rotate(40deg); /* IE 9 */
  -moz-transform: rotate(40deg); /* Firefox */
  -webkit-transform: rotate(40deg); /* Safari and Chrome */
  -o-transform: rotate(40deg); /* Opera */
  position:absolute;left:98px;top:68px;      /* 金牛 */
}
#ec {
  transform: rotate(340deg);
  -ms-transform: rotate(340deg); /* IE 9 */
  -moz-transform: rotate(340deg); /* Firefox */
  -webkit-transform: rotate(340deg); /* Safari and Chrome */
  -o-transform: rotate(340deg); /* Opera */
  position:absolute;left:145px;top:55px;      /* 白羊 */
}
#eb {
  transform: rotate(15deg);
  -ms-transform: rotate(15deg); /* IE 9 */
  -moz-transform: rotate(15deg); /* Firefox */
  -webkit-transform: rotate(15deg); /* Safari and Chrome */
  -o-transform: rotate(15deg); /* Opera */
  position:absolute;left:170px;top:50px;      /* 双鱼 */
}
#ea {
  transform: rotate(47deg);
  -ms-transform: rotate(47deg); /* IE 9 */
  -moz-transform: rotate(47deg); /* Firefox */
  -webkit-transform: rotate(47deg); /* Safari and Chrome */
  -o-transform: rotate(47deg); /* Opera */
  position:absolute;left:210px;top:70px;      /* 水瓶 */
}	
}