.banner-section{
padding:24px 0;
box-sizing:border-box;
overflow:hidden;
}
.banner-section .banner-box{
background: #fff;
padding:24px 0;
box-shadow: 0px 1px 15px 1px rgba(166,166,166,0.3);
}
.banner-section .banner-box .img{
display: block;
width: 55.5%;
height:400px;
margin-left:24px;
}
.banner-section .banner-box .info-wrap{
width: 38.5%;
padding:130px 50px 22px;
box-sizing: border-box;
}
.banner-section .banner-box .info-wrap .title{
font-size: 34px;
color: #d20000;
font-weight:bold;
}
.banner-section .banner-box .info-wrap .desc{
margin-top: 40px;
font-size: 24px;
color: #999;
line-height: 40px;
}
.swiper-container-horizontal>.swiper-pagination-bullets, .swiper-pagination-custom, .swiper-pagination-fraction{
width: 15%;
left: auto;
right:12%;
bottom:70px;
}
.swiper-pagination-bullet{
width:13px;
height:13px;
border-radius:13px;
}
.main-section{
width: 100%;
padding-bottom: 30px;
}
.main-section .left-nav{
width: 100%;
margin-right: 44px;
padding-top: 7px;
}
.main-section .left-nav .nav-item{
float: left;
width: 368px;
font-size: 40px;
color: #fff;
text-align: center;
border-radius: 75px;
padding-bottom: 40px;
margin-top: 42px;
margin-right: 47px;
font-weight:bold;
}
.main-section .left-nav .nav-item:nth-child(1){
background: linear-gradient(0deg, #707ffa 0%, #8d98f8 100%);
}
.main-section .left-nav .nav-item:nth-child(2){
background: linear-gradient(0deg, #4ea859 0%, #7fd28a 100%);
}
.main-section .left-nav .nav-item:nth-child(3){
background: linear-gradient(180deg, #fcba47 0%, #fcd347 100%);
}
.main-section .left-nav .nav-item:nth-child(4){
background: linear-gradient(180deg, #fd721d 0%, #fca61e 99%);
}
.main-section .left-nav .nav-item:nth-child(5){
background: linear-gradient(0deg, #44cefc 0%, #2097fd 100%);
}
.main-section .left-nav .nav-item:nth-child(6){
background: linear-gradient(0deg, #ff6678 0%, #fb4157 100%);
}
.main-section .left-nav .nav-item:nth-child(3n 3){
margin-right: 0;
}
.main-section .left-nav .nav-item img{
display: block;
width:110px;
margin:53px auto 42px;
}
.server-wrap-item{
margin-top: 37px;
position: relative;
padding-top: 16px;
padding-bottom: 31px;
box-sizing: border-box;
height: auto;
width: 100%;
box-shadow: 0px 0px 13px 0px rgba(209, 209, 209, 0.5);
background-size:100% auto;
}
.server-wrap-item.hot-server{
background: no-repeat;
}
.server-wrap-item.search-server{
background: no-repeat;
}
.server-wrap-item .hot-tit{
width:80%;
margin:0 auto;
}
.server-wrap-item .hot-tit .left-line,.server-wrap-item .hot-tit .right-line{
display:inline-block;
height:2px;
width:33%;
}
.server-wrap-item.hot-server .hot-tit .left-line,.server-wrap-item.hot-server .hot-tit .right-line{
background:#f08a28;
}
.server-wrap-item.search-server .hot-tit .left-line,.server-wrap-item.search-server .hot-tit .right-line{
background:#1a7bd1;
}
.server-wrap-item .hot-tit .tit{
display:inline-block;
width:33%;
font-size:40px;
font-weight:bold;
line-height:51px;
text-align:center;
}
.server-wrap-item.hot-server .hot-tit .tit{
color:#d1731a;
}
.server-wrap-item.search-server .hot-tit .tit{
color:#1a7bd1;
}
.server-wrap-item .server-list{
padding:0 2%;
width:100%;
box-sizing:border-box;
margin-top:72px;
overflow:auto;
}
.server-wrap-item.search-server .server-list{
margin-top:52px;
}
.server-wrap-item .server-list .list-item{
display:block;
float:left;
width:31%;
margin:0 1%;
background:#fff;
padding:20px;
box-sizing:border-box;
box-shadow:0px 0px 13px 0px #ccc;
border-radius:10px;
}
.server-wrap-item .server-list .list-item .top-img{
width:100%;
height:140px;
overflow:hidden;
}
.server-wrap-item.search-server .server-list .list-item .top-img{
height:160px;
}
.server-wrap-item .server-list .list-item .top-img .img{
display:block;
width:100%;
height:auto;
transition-duration:.3s
}
.server-wrap-item .server-list .list-item .top-img .img:hover{
transform:scale(1.1);
}
.server-wrap-item .server-list .list-item .bottom-tit{
font-size:24px;
margin-top:10px;
color:#333;
height:60px;
line-height:60px;
text-align:center;
}
.ywbl-wrap{
margin-top:30px;
width:100%;
}
.ywbl-nav{
width:80%;
overflow:hidden;
margin:0 auto;
}
.ywbl-nav .nav-item{
font-size:26px;
font-weight:bold;
float:left;
padding:6px 29px;
border-radius:30px;
margin:0 15px;
color:#333;
}
.ywbl-nav .nav-item.cur{
color:#fff;
background:#3778e6;
}
.ywbl-info-box{
margin-top:15px;
}
.ywbl-info-box .info-box-item{
display:none;
}
.ywbl-info-box .box-item{
height: 280px;
padding: 20px 40px 20px 40px;
box-shadow: 0 0px 10px rgba(35,85,175, .12);
}
.ywbl-info-box .hasmore{
display:none;
}
.ywbl-info-box .hasmore.curr{
display:block;
}
.ywbl-info-box .info-box-item.cur{
display:block;
}
.ywbl-info-box .box-item li{
float: left;
width: 46%;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
margin-left: 10px;
line-height: 46px;
padding-left: 20px;
background: url(/uploads/image/zimages/listicon.png) no-repeat left center;
}
.ywbl-info-box .box-item li:nth-child(even){
margin-left:2%;
}
.ywbl-info-box .box-item li a{
display:block;
width:100%;
overflow:hidden;
text-overflow: ellipsis;
white-space: nowrap;
color:#555;
font-size:20px;
}
.more-nav{
margin:20px 0;
}
.more-nav span{
display:none;
color:#0085c3;
font-size:24px;
width:25%;
margin:0 auto;
text-align:center;
cursor:pointer;
}
.more-nav span.curr{
display:block;
}
@media screen and (max-width:800px){
.banner-section{
padding:28px 0 25px;
}
.banner-section .banner-box .info-wrap{
padding: 11px 25px 36px;
}
.banner-section .banner-box .info-wrap .title{
font-size: 16px;
line-height: 30px;
}
.banner-section .banner-box .info-wrap .desc{
display: none;
}
.swiper-container-horizontal>.swiper-pagination-bullets, .swiper-pagination-custom, .swiper-pagination-fraction{
width: 25%;
right:10px;
}
.main-box{
padding:0 12px;
box-sizing: border-box;
}
.main-section .left-nav{
width: 60%;
margin-right: 2%;
}
.main-section .left-nav .nav-item{
width:48%;
margin-top: 10px;
font-size: 20px;
padding-bottom: 30px;
}
.main-section .left-nav .nav-item:nth-child(odd){
margin-right: 4%;
}
.main-section .left-nav .nav-item img{
width: 45px;
margin: 40px auto 15px;
}
.main-section .right-nav{
width: 38%;
padding-top: 8px;
}
.main-section .right-nav .nav-item{
margin-top: 10px;
font-size: 20px;
padding: 16px 0 12px;
}
.main-section .right-nav .nav-item img{
width: 42px;
margin-bottom: 10px;
}
.server-wrap-item{
width:100%;
margin-top:10px;
padding-top:10px;
padding-bottom:10px;
background-size:100% 100%!important;
}
.server-wrap-item .hot-tit .tit{
font-size:22px;
line-height:25px;
}
.server-wrap-item .server-list{
margin-top:10px;
}
.server-wrap-item .server-list .list-item{
padding:4px;
border-radius:4px;
width:32%;
margin:0 .5%;
}
.server-wrap-item .server-list .list-item .top-img{
height:auto;
}
.server-wrap-item.search-server .server-list{
margin-top:30px;
}
.search-server.server-wrap-item .server-list .list-item .top-img{
height:auto;
}
.server-wrap-item .server-list .list-item .bottom-tit{
font-size:18px;
height:50px;
line-height:normal;
}
.ywbl-nav{
width:100%;
box-sizing:border-box;
}
.ywbl-nav .nav-item{
font-size:18px;
padding:6px 10px;
margin:0 12px;
}
.ywbl-info-box .box-item{
padding:10px 15px;
height:auto;
box-shadow:none;
}
.ywbl-info-box .box-item li{
width:100%;
margin-left:5px;
line-height:40px;
padding-left:15px;
box-sizing:border-box;
}
.ywbl-info-box .box-item li a{
font-size:18px;
}
.more-nav span{
font-size:18px;
margin-top:15px;
}
}