.public_title {
padding-bottom: 16px;
border-bottom: 1px solid #f9f9f9;
overflow: hidden;
}
.public_title h2 {
height: 30px;
line-height: 30px;
font-size: 20px;
font-family: "microsoft yahei";
color: #333;
font-weight: bold;
position: relative;
padding-left: 42px;
float: left;
margin-right: 28px;
}
.public_title h2::before {
content: '';
display: block;
width: 30px;
height: 30px;
background-position: -3px -3px;
position: absolute;
left: 0;
top: 50%;
transform: translatey(-50%);
background-image: ;
background-repeat: no-repeat;
background-size: 96px 68px;
}
.public_title ul {
float: left;
width: auto;
overflow: hidden;
}
.public_title ul li {
float: left;
height: 30px;
line-height: 30px;
color: #666;
font-size: 14px;
font-weight: 400;
border: 1px solid #e0e0e0;
padding: 0 16px;
margin-right: 16px;
box-sizing: border-box;
border-radius: 16px;
cursor: pointer;
}
.public_title ul li:last-child {
margin-right: 0;
}
.public_title .more {
float: right;
width:26px;
height:26px;
display: block;
background-position:-67px -3px;
background-image: url(/uploads/image/rimages/icon_1.png);
background-repeat: no-repeat;
background-size:96px 68px;
margin-top: 2px;
}
.page {
background-color: #f1f1f1
}
.main {
width: 1200px;
margin: 0 auto;
margin-bottom: 60px;
}
.game_nav {
overflow: hidden;
border-radius: 10px;
padding: 30px 0;
box-sizing: border-box
}
.game_nav .item {
width: 84px;
float: left;
margin-right: 40px;
overflow: auto;
display: block
}
.game_nav .item:hover span {
color: #45bb6d;
}
.game_nav .item:last-child {
margin-right: 0
}
.game_nav .item .img {
width: 100%;
height: 84px;
margin-bottom: 12px;
border-radius: 24px;
overflow: hidden;
background: #eee;
float: left;
position: relative
}
.game_nav .item .img::after {
content: "";
position: absolute;
left: -100%;
top: 0;
width: 30%;
height: 100%;
background: linear-gradient(to right,rgba(255,255,255,0) 0,rgba(255,255,255,0.3) 50%,rgba(255,255,255,0) 100%);
transform: skewx(-45deg)
}
.game_nav .item .img:hover::after {
left: 150%;
transition: 0.6s ease
}
.game_nav .item .img img {
width: 100%;
height: 100%
}
.game_nav .item span {
display: block;
text-align: center;
font-size: 14px;
color: #545454;
float: left;
width: 100%;
transition: color 0.3s;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.news_box {
overflow: hidden;
height: 420px;
background-color: #fff;
margin-bottom: 30px;
}
.loops {
float: left;
width: 640px;
height: 100%;
}
.loops .swiper-container {
width: 100%;
height: 300px;
margin-left: auto;
margin-right: auto;
}
.loops .swiper-slide {
background-size: cover;
background-position: center;
}
.loops .gallery-top {
width: 100%;
height: 370px;
}
.loops .gallery-top .item {
height: 100%;
display: block;
overflow: hidden;
}
.loops .gallery-top .item img {
width: 100%;
height: 100%;
transition: all 0.6s ease;
}
.loops .gallery-top .item:hover img {
transform: scale(1.1);
}
.loops .gallery-thumbs {
height: 50px;
box-sizing: border-box;
background-color: #272a2c;
}
.loops .gallery-thumbs .swiper-slide {
cursor: pointer;
}
.loops .gallery-thumbs .swiper-slide p {
width: 100%;
color: #fff;
line-height: 50px;
text-align: center;
padding: 0 5px;
box-sizing: border-box;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
position: relative;
}
.loops .gallery-thumbs .swiper-slide-active {
opacity: 1;
}
.loops .gallery-thumbs .swiper-slide-thumb-active p:after {
content: '';
width: 100%;
height: 4px;
display: block;
background-color: #45bb6d;
position: absolute;
left: 0;
bottom: 0;
}
.headlines {
float: left;
width: 560px;
height: 100%;
padding: 0 30px;
box-sizing: border-box;
}
.headlines h2 {
padding: 20px 0;
margin-top: 8px;
box-sizing: border-box;
border-bottom: 1px dashed #e4e4e4;;
}
.headlines h2 a {
color: #333;
font-size: 24px;
font-weight: 400;
line-height: 32px;
}
.headlines .list {
margin-top: 20px
}
.headlines .list .item {
width: 100%;
height: 33px;
line-height: 33px;
display: inline-block;
overflow: hidden;
}
.headlines .list .item .name {
float: left;
width: 440px;
margin-right: 15px;
overflow: hidden
}
.headlines .list .item .name i {
width: 10px;
color: #454545;
font-size: 14px;
margin-right: 10px;
float: left
}
.headlines .list .item .name span {
width: 420px;
color: #454545;
font-size: 14px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
float: left
}
.headlines .list .item:hover .name span {
color: #45bb6d
}
.headlines .list .item .time {
float: right;
line-height: 30px;
text-align: center;
color: #999;
font-size: 15px
}
.soft_down {
overflow: hidden;
margin-bottom: 30px;
margin-left: -20px;
box-sizing: border-box;
}
.soft_down .item {
float: left;
width: 285px;
display: block;
position: relative;
margin-left: 20px;
}
.soft_down .item .photo {
width: 100%;
height: 180px;
overflow: hidden;
}
.soft_down .item .photo img {
width: 100%;
height: 100%;
transition: all 0.6s ease;
}
.soft_down .item:hover .photo img {
transform: scale(1.1);
}
.soft_down .item p {
width: 100%;
height: 100px;
text-align: center;
position: absolute;
z-index: 3;
left: 0;
bottom: 0;
background: linear-gradient(to top,rgb(0,0,0) 0%,rgba(0,0,0,0.6) 45%,rgba(255,255,255,0) 100%)
}
.soft_down .item p span {
width: 100%;
color: #fff;
font-size: 15px;
font-weight: bold;
text-align: center;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
padding: 0 5px;
box-sizing: border-box;
position: absolute;
left: 0;
bottom: 15px;
}
.need_box {
padding: 30px 20px 10px 20px;
box-sizing: border-box;
background-color: #fff;
margin-bottom: 30px;
}
.need_box .title {
overflow: hidden;
border-bottom: 1px solid #f9f9f9;;
}
.need_box .title ul {
float: left;
height: 100%;
overflow: hidden;
}
.need_box .title ul li {
float: left;
color: #b1b1b1;
font-size: 20px;
font-weight: bold;
margin-right: 52px;
padding-bottom: 20px;
box-sizing: border-box;
position: relative;
cursor: pointer;
}
.need_box .title ul li:after {
content: '/';
color: #b1b1b1;
font-size: 20px;
font-weight: bold;
position: absolute;
right: -26px;
top: 3px;
}
.need_box .title ul li.active {
color: #45bb6d;
}
.need_box .title ul li.active:before {
content: '';
width: 100%;
height: 3px;
display: block;
background-color: #45bb6d;
position: absolute;
left: 0;
bottom: 0;
}
.need_box .title .more {
float: right;
width:26px;
height:26px;
display: block;
background-position:-67px -3px;
background-image: url(/uploads/image/rimages/icon_1.png);
background-repeat: no-repeat;
background-size:96px 68px;
}
.need_box .tab {
}
.need_box .tab .box {
margin-top: 30px;
margin-left: -22px;
overflow: hidden;
}
.need_box .tab .box .list {
float: left;
width: 372px;
height: 352px;
border: 1px solid #eff1f4;
border-radius: 10px;
padding: 0 30px;
box-sizing: border-box;
margin-left: 22px;
margin-bottom: 20px;
}
.need_box .tab .box .list h3 {
color: #333;
font-size: 20px;
font-weight: bold;
margin-top: 20px;
margin-bottom: 20px;
}
.need_box .tab .box .list .item {
overflow: hidden;
margin-left: -29px;
}
.need_box .tab .box .list .item a {
float: left;
width: 84px;
display: block;
margin-left: 29px;
margin-bottom: 20px;
}
.need_box .tab .box .list .item a .photo {
width: 100%;
height: 84px;
margin-bottom: 14px;
}
.need_box .tab .box .list .item a .photo img {
width: 100%;
height: 100%;
border-radius: 22px;
}
.need_box .tab .box .list .item a span {
width: 100%;
color: #545454;
font-size: 14px;
text-align: center;
display: block;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.need_box .tab .box .list .item a:hover span {
color: #45bb6d;
}
.soft_box {
padding: 30px 20px 10px 20px;
box-sizing: border-box;
background-color: #fff;
margin-bottom: 30px;
}
.soft_box .public_title ul li.active {
color: #fff;
background-color: #45bb6d;
}
.soft_box .list {
margin-top: 30px;
margin-left: -20px;
overflow: hidden;
}
.soft_box .list .item {
float: left;
width: 216px;
height: 108px;
display: block;
padding: 20px;
box-sizing: border-box;
border: 1px dashed #eff1f4;
border-radius: 10px;
margin-left: 20px;
margin-bottom: 10px;
}
.soft_box .list .item:hover {
border: 1px dashed #45bb6d;
}
.soft_box .list .item .photo {
float: left;
width: 68px;
height: 68px;
overflow: hidden;
margin-right: 14px;
}
.soft_box .list .item .photo img {
width: 100%;
height: 100%;
border-radius: 18px;
}
.soft_box .list .item .msg {
float: left;
width: 92px;
}
.soft_box .list .item .msg p {
color: #333;
font-size: 15px;
font-weight: 400;
margin-top: 10px;
}
.soft_box .list .item .msg span {
color: #999;
font-size: 12px;
font-weight: 400;
display: inline-block;
margin-top: 10px;
}
.info_box {
height: 580px;
overflow: hidden;
margin-bottom: 30px;
}
.information {
float: left;
width: 830px;
height: 100%;
background-color: #fff;
padding: 30px 20px;
box-sizing: border-box;
}
.information .public_title h2::before {
background-position:-35px -3px;
}
.information .public_title ul li.active {
color: #fff;
background-color: #1c93ef;
}
.information .list {
margin-left: -20px;
margin-top: 15px;
}
.information .list .item {
width: 380px;
height: 42px;
line-height: 42px;
display: inline-block;
overflow: hidden;
border-bottom: 1px dashed #ececec;
margin-left: 20px;
}
.information .list .item .name {
float: left;
width: 320px;
margin-right: 15px;
overflow: hidden
}
.information .list .item .name i {
width: 10px;
color: #454545;
font-size: 14px;
margin-right: 10px;
float: left
}
.information .list .item .name span {
width: 300px;
color: #454545;
font-size: 14px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
float: left
}
.information .list .item:hover .name span {
color: #45bb6d;
}
.information .list .item .time {
float: right;
line-height: 40px;
text-align: center;
color: #999;
font-size: 14px;
}
.hot {
float: right;
width: 340px;
height: 100%;
background-color: #fff;
padding: 30px 20px;
box-sizing: border-box;
}
.hot .public_title h2::before {
background-position:-3px -35px;
}
.hot .list {
margin-top: 15px;
}
.hot .list .item {
height: 42px;
line-height: 42px;
display: inline-block;
overflow: hidden;
border-bottom: 1px dashed #ececec;
position: relative;
}
.hot .list .item i {
float: left;
width: 22px;
height: 22px;
line-height: 22px;
display: block;
border-radius: 50%;
text-align: center;
color: #fff;
font-size: 14px;
font-weight: bold;
background-color: #d0d0d0;
position: absolute;
left: 0;
top: 0;
bottom: 0;
margin: auto;
}
.hot .list .item:first-child i {
background-color: #fc546c;
}
.hot .list .item:nth-child(2) i {
background-color: #ff8839;
}
.hot .list .item:nth-child(3) i {
background-color: #ffbc3c;
}
.hot .list .item span {
float: left;
width: 266px;
color: #454545;
font-size: 14px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
margin-left: 34px;
}
.hot .list .item:hover span {
color: #45bb6d;
}
.friendship {
padding: 30px 20px 10px 20px;
box-sizing: border-box;
background-color: #fff;
margin-bottom: 30px;
}
.friendship .public_title h2::before {
background-position: -35px -35px;
}
.friendship .list {
margin-left: -25px;
overflow: hidden;
}
.friendship .list .item {
float: left;
color: #454545;
font-size: 14px;
font-weight: 400;
margin-left: 25px;
margin-bottom: 15px;
display: block;
}
.friendship .list .item:hover {
color: #45bb6d;
}