*{
    margin: 0;
    padding: 0;
    text-decoration: none;
    cursor: none;
}

.main{
    width: 100%;
    height: 100%;
    position: absolute;
    background:url("../img/bg2.png") no-repeat;
}

.left-div{
    position: relative;
    float: left;
    width: 33.33%;
    height: 33.33%;
}

/*每个网格中的title*/
.left-div-title{
    position: absolute;
    z-index: 1000;
    font-size: 20px;
    padding-left: 15px;
    text-align: left;
    height: 40px;
    line-height: 40px;
    color: yellow;
}

.left-div-title span{
    background: yellow;
    height: 15px;
    width: 2px;
    display: inline-block;
    margin-right: 10px;
}

/*表格的样式*/
.table-div{
    width: 100%;
}

.table{
    border-collapse:collapse;
    border-spacing:0;
    margin: 5%;
    width: 90%;
    border-left:1px solid #EEE;
    border-top:1px solid #EEE;
}

.table th,.table td{
    border-right:1px solid #EEE;
    border-bottom:1px solid #EEE;
    padding: 8px 5px;
    color:#DDD;
    text-align: center;
}

.table th{
    font-weight:bold;
}


/*第一网格****************************************************/
/*第一网格中 的天气*/
.weather-content{
    text-align: center;
    width:100%;
    float: left;
    color:#DDD;
    text-shadow: 0 0 5px #00c6ff;
}

.weather-content #tq1{
    text-align: center;
    font-size: 20px;
    display: inline-block;
}

.weather-content #tq1>div{
    margin: 0 10px;
}

.min-height-60{
    min-height: 30px;
    float: left;
    line-height: 30px;
}

/*第一网格中 的的圆圈*/
.circle1 {
    background-color: rgba(0,0,0,0);
    border:3px solid rgba(24,225,200,0.9);
    opacity:.9;
    border-right:5px solid rgba(0,0,0,0);
    border-left:5px solid rgba(0,0,0,0);
    -webkit-border-radius: 65px;
    -moz-border-radius: 65px;
    border-radius: 65px;
    box-shadow: 0 0 35px #18E1C8;
    width:130px;
    height:130px;
    margin:0 auto;
    -moz-animation:spinPulse 3s infinite ease-in-out;
    -webkit-animation:spinPulse 3s infinite linear;
}

.circle2 {
    background-color: rgba(0,0,0,0);
    border:3px solid rgba(24,225,200,0.9);
    opacity:.9;
    border-left:5px solid rgba(0,0,0,0);
    border-right:5px solid rgba(0,0,0,0);
    -webkit-border-radius: 55px;
    -moz-border-radius: 55px;
    border-radius: 55px;
    box-shadow: 0 0 15px #18E1C8;
    width:110px;
    height:110px;
    margin:0 auto;
    position:relative;
    top:-120px;
    -moz-animation:spinoffPulse 3s infinite linear;
    -webkit-animation:spinoffPulse 3s infinite linear;
}

.circle3 {
    background-color: rgba(0,0,0,0);
    border:3px solid rgba(230,25,183,0.9);
    opacity:.9;
    border-right:5px solid rgba(0,0,0,0);
    border-left:5px solid rgba(0,0,0,0);
    -webkit-border-radius: 65px;
    -moz-border-radius: 65px;
    border-radius: 65px;
    box-shadow: 0 0 35px #E619B7;
    width:130px;
    height:130px;
    margin:0 auto;
    -moz-animation:spinPulsess 3s infinite ease-in-out;
    -webkit-animation:spinPulsess 3s infinite linear;
}

.circle4 {
    background-color: rgba(0,0,0,0);
    border:3px solid rgba(230,25,183,0.9);
    opacity:.9;
    border-left:5px solid rgba(0,0,0,0);
    border-right:5px solid rgba(0,0,0,0);
    -webkit-border-radius: 55px;
    -moz-border-radius: 55px;
    border-radius: 55px;
    box-shadow: 0 0 15px #E619B7;
    width:110px;
    height:110px;
    margin:0 auto;
    position:relative;
    top:-120px;
    -moz-animation:spinoffPulse2 3s infinite linear;
    -webkit-animation:spinoffPulse2 3s infinite linear;
}

/* 第一个圈 */
/* 外逆时针*/
@-moz-keyframes spinPulse {
    0% { -moz-transform:rotate(160deg); opacity:0; box-shadow:0 0 1px #2187e7;}
    50% { -moz-transform:rotate(145deg); opacity:1; }
    100% { -moz-transform:rotate(-320deg); opacity:0; }
}
@-webkit-keyframes spinPulse {
    0% { -webkit-transform:rotate(160deg); opacity:0; box-shadow:0 0 1px #2187e7; }
    50% { -webkit-transform:rotate(145deg); opacity:1;}
    100% { -webkit-transform:rotate(-320deg); opacity:0; }
}
/*内顺时针*/
@-moz-keyframes spinoffPulse {
    0% { -moz-transform:rotate(0deg); }
    100% { -moz-transform:rotate(360deg);  }
}
@-webkit-keyframes spinoffPulse {
    0% { -webkit-transform:rotate(0deg); }
    100% { -webkit-transform:rotate(360deg); }
}

/* 第二个圈 */
/* 外顺时针*/
@-moz-keyframes spinPulsess {
    0% { -moz-transform:rotate(-340deg); opacity:0; box-shadow:0 0 1px #2187e7;}
    50% { -moz-transform:rotate(-325deg); opacity:1; }
    100% { -moz-transform:rotate(140deg); opacity:0; }
}
@-webkit-keyframes spinPulsess {
    0% { -webkit-transform:rotate(-340deg); opacity:0; box-shadow:0 0 1px #2187e7; }
    50% { -webkit-transform:rotate(-325deg); opacity:1;}
    100% { -webkit-transform:rotate(140deg); opacity:0; }
}

/*内逆时针*/
@-moz-keyframes spinoffPulse2 {
    0% { -moz-transform:rotate(360deg); }
    100% { -moz-transform:rotate(0deg);  }
}
@-webkit-keyframes spinoffPulse2 {
    0% { -webkit-transform:rotate(360deg); }
    100% { -webkit-transform:rotate(0deg); }
}

.count-circle1{
    position: relative;
    height: 150px;
    width: 35%;
    float: left;
    margin-top: 10px;
    margin-left: 15%;
    box-sizing: border-box;
}
.count-circle2{
    position: relative;
    height: 150px;
    width: 35%;
    float: left;
    margin-top: 10px;
    margin-right: 15%;
    box-sizing: border-box;
}

.counter{
    z-index: 999999;
    color: #FFF;
    position: absolute;
    top: 50px;
    height: 30px;
    line-height: 30px;
    text-align: center;
    font-size: 24px;
    width: 100%;
}

.demo p{
    position: absolute;
    top: 150px;
    color: #FFF;
    /* right: 39%; */
    width: 100%;
    text-align: center;
    font-size: 20px;
}

/*第一网格 中的时间*/
.time ul {
    list-style:none;
    display: inline-block;
    margin: 0 auto;
}

.time ul li {
    display: block;
    font-size: 20px;
    text-align: center;
    text-shadow: 0 0 5px #00c6ff;
    float: left;
}

#point { position:relative;
    -moz-animation:mymove 1s ease infinite;
    -webkit-animation:mymove 1s ease infinite;
    padding-left:5px; padding-right:5px;
}

@-webkit-keyframes mymove
{
    0% {opacity:1.0; text-shadow:0 0 20px #00c6ff;}
    50% {opacity:0; text-shadow:none; }
    100% {opacity:1.0; text-shadow:0 0 20px #00c6ff; }
}

@-moz-keyframes mymove
{
    0% {opacity:1.0; text-shadow:0 0 20px #00c6ff;}
    50% {opacity:0; text-shadow:none; }
    100% {opacity:1.0; text-shadow:0 0 20px #00c6ff; }
}

.time{
    margin: 0 auto;
    text-align: center;
    font-size: 20px;
    color:#DDD;
    display: inline-block;
    height: 100px;
}

.time #Date{
    text-shadow: 0 0 5px #00c6ff;
    text-align: right;
    height: 50px;
    line-height: 60px;
}

.time ul{
    text-align: left;
    height: 50px;
    line-height: 20px;
}

.div-logo{
    width: 100%;
    text-align: center;
    margin: 0 auto;
}

/*第五网格中 活动预告***************/
#div1{
    padding: 0;
    box-sizing: border-box;
    height:240px;
    width: 95%;
    display: block;
    overflow:hidden;
}

#div1 p{
    margin: 0;
    text-align: left;
    padding: 0 15px;
    line-height: 35px;
    height: 35px;
    font-size: 18px;
    text-shadow: none;
    /*以下为一行，多出的显示省略号*/
    display: -webkit-box!important;
    overflow: hidden;
    word-break: break-all;
    text-overflow: ellipsis;
    word-wrap: break-word;
    white-space: normal;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
}

#div1 p:nth-child(1){
    line-height: 40px;
    height: 40px;
    font-size: 24px;
}

#div1 img{
    width: 160px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
    height: 90px;
}

#div1 li{
    position: relative;
    list-style: none;
    color: #DDD;
    width: 100%;
    height: 120px;
    padding: 5px 15px;
    box-sizing: border-box;
}

/*设置二维码的位置，大小*/
#div1 li .code-img{
    width: 65px;
    height: 65px;
    position: absolute;
    right: 20px;
    bottom: 10px;
    border-radius: 0;
}

.font-size-22{
    font-size: 22px;
}

.color-yellow{
    color:#0CF;
}

#LoopDiv{
    margin-top: 40px;
}