body{
    transition: 2s;
    overflow-x: hidden;
    width:100%;
}
.weatherSnow{
    background: url(../img/weathersky/bg.jpg) repeat center top;
}
.weatherSnowgj{
    background: url(../img/weathersky/bggj.jpg) repeat center top;
}
.tab{
    margin-bottom: 0.5rem;
    border:none;
}
.tab a{
    display: block;
    width:48%;
    text-align: center;
    line-height: 3rem;
    color:#fff;
    border-radius: 0.3rem;
    height:3rem;
    font-weight: 600;
    font-size: 0.9rem;
}
.width94{
    width:94%;
    margin:auto;
}
.tab a.on{
    background-color: #29C0BF;
    color:#fff;
}
.tab a i{
    margin-left: 0.6rem;
}
.tab .gn{
    background: url(../img/weathersky/gnbg.png) no-repeat center center/100%;
}
.tab .gj{
    background: url(../img/weathersky/gjbg.png) no-repeat center center/100%;
}
.weathers h3{
    text-align: center;
    padding:0rem 0 0.5rem 0;
    line-height: 2.5rem;
}
.labelbox {
    overflow: hidden;
    border-top:1px solid #f6f5f5;
    padding:1rem 0.5rem;
}
.labelbox a{
    padding:0.2rem 0.5rem;
    border-radius: 5rem;
    color:#fff;
    background-color: #d4cdcd;
    font-size: 0.75rem;
    display: block;
    float: left;
    margin-bottom: 0.4rem;
    margin-right: 0.4rem;
}
.labelbox .on{
    background-color: #4993f8;
    box-shadow: 0px 3px 0px #1a6bdb;
} 
.videoTitle{
    line-height:1.6rem;
    margin-top:0.4rem;
    display:block;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    color:#333;
}
.gametitle{
    display: flex;
    align-items: center;
    margin:1rem auto;
}
.gametitle .long{
    width:0rem;
    margin-left: 5rem;
    opacity: 0;
    transition: all 1s;
}
.on .gametitle .long{
    margin-left: 0.8rem;
    opacity: 1;
    width:10rem;
}
.gametitle .nums{
    width: 3rem;
}
.gamecontent{
    background: url(../img/weathersky/bg.png) no-repeat center top/100% 100%;
    height:11rem;
    position: relative;
    padding:1.5rem 1.5rem;
}
.contentimg{
    position: absolute;
}
#one .contentimg{
    right:-10rem;
    bottom:0rem;
    width:1rem;
    opacity: 0;
    transition: all 1s;
}
#one.on .contentimg{
    right:2rem;
    bottom:2rem;
    width:8rem;
    opacity: 1;
}

.jiantou{
    position: absolute;
    width:0;
    transition: all 1s;
}
.on .jiantou{
    width:2rem;
    opacity: 1;
}
#one .jiantou{
    left:2rem;
    bottom:3.5rem;
}
.gamecontent .t{
    color:#020202;
    font-size: 0.8rem;
    font-weight: 600;
}
.gamecontent .t span{
    font-size: 1.2rem;
    height:0.5rem;
    position: relative;
    background-color: #11f8df;
    opacity: 0;
    transition: all 1s;
}
.on .gamecontent .t span{
    opacity: 1;
}
/* .gamecontent .t span i{
    background-color: #11f8df;
    padding: 0.2rem 0.2rem;
    position: absolute;
    width: 100%;
    bottom: 0;
    z-index: 0;
    left: 0;
}
.gamecontent .t span b{
    position: absolute;
    width: 100%;
    bottom: 0;
    left: 0;
    z-index: 1;
    text-align: center;
} */
#two .jiantou{
    left:auto;
    right:0rem;
    opacity: 0;
    transition: all 1s;
}
#two.on .jiantou{
    right:2rem;
    opacity: 1;
}
#two .gamecontent, #three .gamecontent{
    background: url(../img/weathersky/bg2.png) no-repeat center top/100% 100%;
    height:9rem;
}
.buyao{
    width:0rem;
    left: -10rem;
    bottom: -0.7rem;
    opacity: 0;
    transition: all 1s;
}
#two.on .buyao{
    width:4rem;
    left: 1.2rem;
    bottom: -0.7rem;
    opacity: 1;
}
.taifeng{
    width:0rem;
    right: -10rem;
    left:auto;
    bottom: 0.6rem;
    opacity: 0;
    transition: all 1s;
}
#two.on .taifeng{
    right:auto;
    width:4rem;
    right: 6rem;
    bottom: 0.6rem;
    opacity: 1;
}
#three .jiantou{
    left:2rem;
    bottom:2rem;
}
.bucunzaide{
    width:0rem;
    left: 0rem;
    bottom: -0.7rem;
    opacity: 0;
    transition: all 1s;
}
#three.on .bucunzaide{
    width:5rem;
    left: 5rem;
    opacity: 1;
    bottom: -0.7rem;
}
.duochuandian{
    width: 0rem;
    right: 0rem;
    bottom: 0.5rem;
    opacity: 0;
    transition: all 1s;
}
#three.on .duochuandian{
    width: 4.5rem;
    right: 2.5rem;
    bottom: 0.5rem;
    opacity: 1;
    bottom: -0.7rem;
}
.masonry { 
    width: 102%;
    margin-top:5rem;
    position:relative;
    opacity: 0;
    transition: all 1s;
}
.masonry a{
    color:#333;
}
.masonry .gametitle{
    margin:auto;
}
.item { 
    z-index: 10;
    transition: 0.25s;
    overflow: inherit;
    position: absolute;
    width:48% !important;
    background-color: #fff;
    /* padding:2%; */
    border-radius: 0.5rem;

}
.item img{
    width: 100%;
    height:100%;
    transition: 0.25s;
    border-radius: 0.2rem;
}
.item a{
    color:#333;
}
.color828282{
    color:#828282;
}
.item:hover img{
    z-index: 100;
    transition: 0.25s;
    overflow: hidden;
    animation: bounceIn 0.25s ease-in 2 alternate;
}
.clearfix::after{
    height:0;
    display:block;
    clear:both
}
@keyframes bounceIn{
    100% {
        transform: scale(1.07);
    }
}
.masonry .item .Avatar{
    width:1rem;
    border-radius: 100%;
    height:1rem;
}
.masonry .item i{
    margin-right: 0.4rem;
    color:#999;
    font-size: 1.2rem;
}
.masonry .item .likered{
    color:red
}
.masonry .item{
    background-color: rgba(255,255,255,0) !important;
    border-radius: 0;
}
.masonry .gametitle .long{
    width:5rem;
    margin-left:0.8rem;
    opacity: 1;
    transition: all 1s;
}
.masonry.on{
    margin-top:1rem;
    opacity: 1;
}
.gameBottom{
    background-color: #ffffff;
    border:2px solid #040404;
    padding:0.4rem;
    min-height: 6rem;
}
#two .gametitle{
    margin-left: 3rem;
}
.item .xunqi{
    width:5rem;
}
.item .jiantou{
    width:0rem;
    height:0rem;
    right: -2rem;
    bottom: 0rem;
    opacity: 0;
    transition: all 1s;
}
.on .item .jiantou{
    width:2rem;
    height:2rem;
    right: 0.5rem;
    bottom: 0.8rem;
    opacity: 1;
}
.item .baoxue1{
    width:100%;
}
.item .baoxue{
    width: 4rem;
    margin-left: 3rem;
}
.item .jiantou2{
    right:auto;
    left: 1rem;
    bottom: 1.5rem;
}
.item .kouzhao{
    width:5rem;
    height:auto;
    left:1rem;
    bottom:-0.5rem;
}
.item .gaowen{
    width:5rem;
    height:auto;
    left:1rem;
    bottom:-0.5rem;
}
.nine{
    width:100%;
    height:6rem;
    background: url(../img/weathersky/09bg.png) no-repeat center center/100% 100%;
    position: relative;
    padding:1.5rem 1.5rem;
    margin-top: 2rem;
    color:#333;
}
.nine a div{
    color:#333; 
}
.ninetitle{
    position: absolute;
    left: 2rem;
    top: -5rem;
    width: 14rem;
    opacity: 0;
    transition: all 1s;
}
.on .ninetitle{
    left: 2rem;
    top: -1rem;
    width: 14rem;
    opacity: 1;
}
.baoyu{
    width:0rem;
    right: -5rem;
    opacity: 0;
    transition: all 1s;
}
.on .baoyu{
    width:5rem;
    right: 0rem;
    opacity: 1;
}
#ten{
    margin-top:5rem;
}
#nine{
    margin-top: 2rem;
}
#eight .jiantou, #nine .jiantou{
    left: 8rem;
    bottom: 1rem;
}
.ditu{
    width:0rem;
    left: -5rem;
    opacity: 0;
    transition: all 1s;
}
.on .ditu{
    width:5rem;
    left:0.4rem;
    opacity: 1;
}
.zhibei{
    width:0rem;
    left: 4rem;
    bottom: 0.5rem;
    opacity: 0;
    transition: all 1s;
}
.on .zhibei{
    width:5rem;
    left: 6.5rem;
    bottom: 0.5rem;
    opacity: 1;
}
#ten .jiantou{
    right: 1rem;
    bottom: 1rem;
}
.weatherSnowgj #one .jiantou{
    left: 14rem;
    bottom: 1rem;
}
.qiti{
    left: 0rem;
    bottom: 0rem;
    width: 0rem;
    opacity: 0;
    transition: all 1s;
}
.on .qiti{
    left: 4rem;
    bottom: 0rem;
    width: 4rem;
    opacity: 1;
}
.qiwen{
    right: 0rem;
    bottom: 0.3rem;
    width: 0rem;
    opacity: 0;
    transition: all 1s;
}
.on .qiwen{
    right: 2rem;
    bottom: 0.3rem;
    width: 4rem;
    opacity: 1;
}
.vs{
    left: 8rem;
    bottom: 3rem;
    width: 3rem;
    opacity: 0;
    transition: all 1s;
}
.on .vs{
    bottom:1.5rem;
    opacity: 1;
}
.weatherSnowgj #two .jiantou{
    left: 1rem;
    bottom: 1rem;
}
.honglao{
    width: 8rem;
    left: 6rem;
    bottom: -5rem;
    opacity: 0;
    transition: all 1s;
}
.on .honglao{
    bottom: -0.5rem;
    opacity: 1;
}
.meiyu{
    width:5rem !important;
    margin-left: 0.5rem;
    margin-bottom: -1rem;
}
.weatherSnowgj .item .jiantou2{
    right:0.5rem;
    left:auto;
}
.huangzai{
    width: 8rem;
    right: 0.5rem;
    bottom: 3rem;
    opacity: 0;
    transition: all 1s;
}
.on .huangzai{
    opacity: 1;
    width: 8rem;
    right: 0.5rem;
    bottom: -1rem;
}
.weatherSnowgj #eight .jiantou, .weatherSnowgj #nine .jiantou{
    left: 7rem;
    bottom: 1rem;
}
.huoshan{
    width: 7rem;
    left: 7rem;
    bottom: 2rem;
    opacity: 0;
    transition: all 1s;
}
.on .huoshan{
    width: 7rem;
    left: 7rem;
    bottom: -0.5rem;
    opacity: 1;
}
.gaowengj{
    width: 7rem;
    left: 4rem;
    bottom: 1rem;
    opacity: 0;
    transition: all 1s;
}
.on .gaowengj{
    opacity: 1;
    width: 7rem;
    left: 4rem;
    bottom: -2.5rem;
}
.weatherph{
    margin-bottom: 0.5rem;
}
.weatherph .kapian{
    box-shadow: none;
    position: relative;
    overflow:inherit;
    margin-top: 1.2rem;
}
.weatherph .weathers{
    border:5px solid #26eeca;
    margin-top: 0.5rem;
}
.weatherphtitle{
    margin-top: -1.2rem;
    margin-left: -0.5rem;
    background-color: #1a2bcd;
    border-radius: 0.2rem;
    color: #fff;
    text-shadow:1px 1px 1px #000;
    padding: 0 0.5rem;
    line-height: 1.8rem;
}
.xinwenbox{
    margin-top: 0.5rem;
}
.xinwenbox a{
    overflow: hidden;
    display: block;
}
.weathercontent{
    padding:0.5rem 0 0rem 0;
}
.weathercontent img{
    max-width: 100%;
    display: block;
}
.shiyi{
    background: url(../img/weathersky/shiyi.png) no-repeat center center/100% 100%;
    margin-top: 0.5rem !important;
    color:#fff;
    font-size: 0.75rem;
    text-align: center;
    min-height: 9rem;
}
.shiyi h2{
    color:#fff;
}
.shiyi p{
    line-height: 1.4rem;
    text-align: left;
}