.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; } }