ul,ol{list-style: none} a{text-decoration:none;cursor:pointer; color:#666} #header{/*position:fixed;z-index: 10000;left: 0;right: 0;top: 0;*/background: #000;} #header .logo{height: 2.8rem;text-align: center;padding:0.2rem} #header .logo img{position: relative;height: 4rem;padding-top: 10px} #banner{width:100%;padding: 2rem 0.3rem 0.3rem;} #banner .bannerImg{width: 100%;border-radius:0.3rem;padding:0.1rem;/*background:rgb(233, 217, 181);*/box-shadow: 1px 1px 5px 1px;/*min-height: 12rem*/} #banner .caption{padding: 0.3rem} #banner .caption .tit{font-size: 1.5rem;font-weight: bold;color: #C20C0C;text-align: center;height:2.2rem;width:40%;margin: 0 auto;background-size: cover !important;} #banner .caption .info{color:#333;margin: 10px} #main{margin-top: 0.5rem;} #recommend ,#promotions{margin:0 auto;padding:0 0.3rem;} .hot{padding-bottom:5px;text-align:center;background-color: rgb(194,12,12);padding-top: 0.3rem;margin-bvottom: 0.3rem; margin-top: 0.3rem;} .hotTitle,.hotTit{color:#ffffff;font-size: 1.05rem;line-height: 1.5rem;font-weight: bold} #recommend .rand{overflow:scroll;width: auto;height: 25rem;position: relative;overflow-y: hidde n;-webkit-overflow-scrolling: touch; overflow-scrolling: touch } #recommend .thumbnailBox{position: absolute;white-space: nowrap;display: flex;flex-wrap: wrap;} #recommend .thumbnail{white-space: normal;display: inline-block;width:11.5rem;cursor: pointer;bottom:0;/*box-shadow: 1px 1px 3px rgb(97, 97, 97);*/border: 0.1rem solid rgb(0, 0, 0);overflow: hidden;margin-right: 5px;border-radius: 1rem;margin-bottom: 0.8rem;margin-left: 0.3rem;height: 5.6rem;} #recommend .thumbnail img{width:100%;height: 5.5rem} #recommend .thumbnail .caption{padding: 0 0.3rem 0.3rem;background:#121213} #recommend .thumbnail p{font-size: 0.8rem;} #recommend .thumbnail .tit{text-align: center;color:rgb(194,12,12);font-size:1rem;font-weight: bold;line-height:1.4rem;background-size: cover !important;margin: 0 auto;} #recommend .thumbnail .tit span,.hotTit span{display:none} #recommend .thumbnail .repIndex{text-align: center} #recommend .thumbnail .info{height:5rem;overflow: hidden;line-height: 1rem;font-size:0.7rem;font-weight: 300;} #recommend .thumbnail .info span{display:none} #recommend .thumbnail .star{color: #ffcc00;font-weight: 500;font-size:1rem} #recommend .thumbnail .login{text-align: center;} #recommend .thumbnail .login .btn{padding: 0.2rem 1.5rem;cursor:pointer;background: #C20C0C;color: #fff;font-weight: 500;border: none;border-radius: 0.5rem;} #promotions{overflow: hidden} #promotions .list{width: 100%;overflow: hidden;} #promotions .list li{margin-bottom: 0rem;padding:0.1rem;overflow: hidden;height: auto;display: inline-block;width:100%;cursor: pointer;/*box-shadow: 1px 1px 3px rgb(97, 97, 97);*/background: rgb(0, 0, 0);border-radius: 0.1rem;} #promotions .list .tit{color:#fff;font-size: 1.2rem;font-weight: normal;text-align: center;background: rgb(194,12,12);height: 2rem;margin-bottom: 0.8rem} #promotions .list img{width:100%;height: 4rem;float: left;margin-right: 0.5%;} #promotions .list div{width:62.5%;float: left;height: auto;} #promotions .list div h3{font-size: 0.8rem;font-weight: normal;color: rgb(194,12,12);padding-left: 0.3rem;} #promotions .list div p{font-size: 0.6rem;font-weight:300;height: 4rem;padding-left: 0.3rem;overflow: hidden;line-height: 1.2rem;background: #121213;} #promotions .list div p span{display:none} #footer{width: 100%;;text-align: center;color: #7d6032;padding: 10px 0;margin-top: 1rem} #footer .bott a{color: #7d6032} #footer .bott a:hover{color:#C20C0C} #footer .bott span{ background-image: url(images/icon-footergame_m.png); height: 48px; display: inline-block; margin-top: 0.5rem; margin-bottom: 1.2rem; margin-right: 1.5rem; } /*#footer .bott span{ background-image: url(images/icon-footergame_m.png); height: 48px; display: inline-block; margin-top: 0.5rem; margin-bottom: 1.2rem; margin-right: 1.5rem; }*/ #footer .bott span:first-child{width: 38px;} #footer .bott span:nth-child(2){background-position: -77px 0;width: 83px;} #footer .bott span:nth-child(3){background-position: -200px 0;width: 107px;} #footer .bott span:nth-child(4){background-position: -345px 0;width: 125px;} #footer .bott span:nth-child(5){background-position: -505px 0;width: 78px;} #footer .bott span:nth-child(6){background-position: -620px 0;width: 140px;} #footer .bott span:nth-child(7){background-position: -794px 0;width: 132px;} #footer .bott span:nth-child(8){background-position: -953px 0;width: 175px;margin-right: 0;} #footer .bott span:nth-child(8){background-position: -1128px 0;width: 32px;margin-right: 0;} .CarouselBox { width: 400px; height: 200px; margin: 0px auto; overflow: hidden; margin: 0px; } /*设置放置轮播图的盒子*/ .li1 { width: 400px; height: 200px; float: left; list-style: none; } /*对放置图片的li进行设置*/ /*设置动画的主要属性*/ .ul1 { width: 2000px; height: 200px; animation: myani 20s ease-out infinite; -ms-animation: myani 20s ease-out infinite; -moz-animation: myani 20s ease-out infinite; -webkit-animation: myani 20s ease-out infinite; } /* 对动画的关键帧进行设置*/ @keyframes myani { 0% { margin-left: 0px; } 20% { margin-left: -400px; } 40% { margin-left: -800px; } 60% { margin-left: -1200px; } 80% { margin-left: -1600px; } 100% { margin-left: -2000px; } } /*对动画的关键帧进行兼容处理*/ @-webkit-keyframes myani { 0% { margin-left: 0px; } 20% { margin-left: -400px; } 40% { margin-left: -800px; } 60% { margin-left: -1200px; } 80% { margin-left: -1600px; } 100% { margin-left: -2000px; } } @-moz-keyframes myani { 0% { margin-left: 0px; } 20% { margin-left: -400px; } 40% { margin-left: -800px; } 60% { margin-left: -1200px; } 80% { margin-left: -1600px; } 100% { margin-left: -2000px; } } @-moz-keyframes myani { 0% { margin-left: 0px; } 20% { margin-left: -400px; } 40% { margin-left: -800px; } 60% { margin-left: -1200px; } 80% { margin-left: -1600px; } 100% { margin-left: -2000px; } }