@charset "GB2312";

* {font-family: "Microsoft YaHei", Arial, Helvetica, sans-serif; font-size: 14px;}

body {background: url(../images/bg.png); }
a {text-decoration: none;}
a.block {display: block; width: 100%; height: 100%;}
p {margin: 0; padding: 0;}

.main {width: 1200px; height: 100%; margin: 0 auto;}
.icon {background: url(../images/icons.png) no-repeat;}
.logo {width: 140px; height: 25px; background-position: -5px -5px; margin: 18px 40px 0 0;}
i.icon {display: block; float: left; width: 15px; height: 11px;}
i.icon.big {width: 20px; height: 20px;}
i.icon.r {float: right;}
i.icon.new {background-position: -304px -30px;}
i.icon.hot {background-position: -320px -30px;}
i.icon.remmand {background-position: -336px -30px;}
i.icon.good {background-position: -352px -30px;}
i.icon.new.big {background-position: -404px -30px;}
i.icon.hot.big {background-position: -425px -30px;}
i.icon.remmand.big {background-position: -446px -30px;}
i.icon.good.big {background-position: -467px -30px;}
i.icon.small {width: 11px; height: 11px;}
i.icon.play.small {background-position: -372px -30px;}
i.icon.time {background-position: -184px -5px;}
i.icon.comment {background-position: -204px -5px;}
i.icon.home {background-position: -225px -5px;}
i.icon.comment1 {background-position: -324px -5px;}
i.icon.author {background-position: -245px -5px;}
i.icon.view {background-position: -305px -5px;}
i.icon.praise {background-position: -285px -5px;}

i.tags {display: block; float: left; width: 50px; height: 20px; background-color: #2c353e; line-height: 20px; text-align: center; color: white; font-style: normal;}

.header {width: 100%; min-width: 1200px; height: 60px; background-color: rgba(24, 24, 24, 0.5); position: fixed; z-index: 99;}
.header .main > div {float: left; line-height: 60px;}
.header .menu-item > a {padding: 20px 15px; color: white;}
.header .menu-item > a:hover {color: #ffbf00;}
.header .main .menu-item .child-nav {position: absolute; width: 130px; margin-left: -45px;}
.header .main .menu-item .child-nav .sub-menu {width: 100%; padding-left:5px; padding-top:4px; height: 36px; line-height: 30px; border-bottom: 1px solid rgba(255, 255, 255, 0.1); background-color: rgba(0, 0, 0, 0.7);}
.header .main .menu-item .child-nav .sub-menu .text_single {width: 115px; text-align:center;}
.header .main .menu-item .child-nav .sub-menu a {color: white;}
.header .main .menu-item .child-nav .sub-menu:hover { background-color: rgba(0, 0, 0, 0.9);}
.header .main .menu-item .child-nav .sub-menu:hover a {color: #ffbf00;}
.header .main .menu-item .child-nav .sub-menu a > div {float: left; color: white; font-size: 14px; line-height: 30px;}
.header .main .menu-item .child-nav .sub-menu .icon {width: 18px; height: 18px; background: no-repeat center / contain; margin: 6px 10px 6px 6px;}
.header .main .menu-item.headimg {width: 40px; height: 40px; border-radius: 20px; margin-top: 10px; overflow: hidden; background: url(http://ucenter.colg.cn/images/noavatar_big.gif) no-repeat center / cover;}
.header .main .menu-item.headimg a {padding: 0;}
.header .main .menu-item.bbs {width: 40px; height: 20px; background: url(../images/btn-bbs-0.gif) no-repeat center;}

.header .menu-item.right {float: right;}
.header .menu-item.reg a {padding-right: 0;}
.header .search-area {margin-right: 30px;}
.header .search-area input[type=text] {padding: 0 10px; border: 1px solid white; border-right: none; width: 170px; height: 26px; background-color: inherit; color: white; line-height: 28px;}
.header .search-area input[type=submit] {width: 30px; height: 28px; border: 1px solid white; border-left: none; background-color: inherit; display: block; float: right; margin-top: 16px;}
.header .search-area .btn-search {background-position: -150px -3px;}

.banner {height: 380px; min-width: 1200px; overflow: hidden;}
.banner .image-area {width: 1000%; min-width: 1200px; height: 100%;}
.banner .image {float: left; width: 10%; min-width: 1200px; height: 100%; background-position: center;}
.banner .btn {position: absolute; width: 50px; height: 90px; margin-top: -205px; z-index: 9;}
.banner .btn.prev {left: 20px; background-position: -400px -330px;}
.banner .btn.next {right: 20px; background-position: -470px -330px;}

.area {width: 1200px; margin: 40px auto 0;}
.area .title {float: left; width: 115px; height: 23px; margin-bottom: 25px;}
.area .a {float: left; margin-left: 20px; margin-top: 7px;}
.area .a.first {margin-left: 25px;}
.area .a a {color: #575d6a;}
.area .a:hover a, .area .a.on a {color: #2c353e; font-weight: bold;}
.area .main {clear: both;}
.area .main > div {float: left; height: 100%;}

.area.news .title {background-position: -5px -495px;}
.area.news .main {height: 260px;}
.area.news .main .left {width: 770px; background: center / cover;}
.area.news .main .left .news-title {width: 740px; height: 100px; background-color: rgba(0,0,0,0.5); padding: 0 15px; color: white;}
.area.news .main .left .news-title .main-title {line-height: 50px; font-size: 16px; font-weight: bold; margin-top: -100px; height:50px; overflow:hidden;}
.area.news .main .left .news-title .sub-title {height: 40px; overflow: hidden;}
.area.news .main .right {margin-left: 25px; width: 400px; height:260px; overflow:hidden;}
.area.news .main .right .item {height: 29px; line-height: 28px; overflow: hidden; margin-left: -6px;}
.area.news .main .right .item a {display: block; float: left; width: 350px; height: 100%; color: #2c353e;}
.area.news .main .right .item a:hover {color: #ff7800;}
.area.news .main .right .item .date {float: right; color: #aaaaaa;}
.area.news .main .right .item.top {width:400px; height:63px; overflow:hidden; padding-left:7px;}
.area.news .main .right .item.top .top-image {width:98px; height:57px; background: no-repeat center; background-size:cover; margin-top:2px; float:left; margin-right:16px; overflow:hidden;}
.area.news .main .right .item.top .top-text {width:284px; height:57px; overflow:hidden; float:left;}
.area.news .main .right .item.top .top-text .text-title {padding-bottom:3px; margin-left:-7px;}
.area.news .main .right .item.top .top-text .text-title a {font-size:15px; color: #2c353e; line-height:18px; height: 18px; overflow: hidden;}
.area.news .main .right .item.top .top-text .text-title a:hover {color:#ec4828;}
.area.news .main .right .item.top .top-text .text-description {font-size:13px; color:#aaaaaa; padding-top:2px;line-height:20px;}

.area.original .title {background-position: -5px -519px;}
.area.original .main {height: 354px;}
.area.original .main .left {width: 470px; background: no-repeat center / cover;}
.area.original .main .left:hover {opacity: 0.8;}
.area.original .main .right .item {float: left; width: 243px; height: 100%; background-color: white;}
.area.original .main .right .item:hover {box-shadow: 0 0 10px 0 #bbbbbb;}
.area.original .main .right .item .image {height: 223px; background: no-repeat center / cover;}
.area.original .main .right .item:hover .image {opacity: 0.8;}
.area.original .main .right .item .issue {color: white; float: left; padding: 2px 10px; text-align: center; background-color: #c7455c; margin-top: -23px; position: absolute;}
.area.original .main .right .item .main-title {padding: 0 10px; line-height: 42px; height: 34px; overflow: hidden;}
.area.original .main .right .item .main-title a {color:#2c353e;}
.area.original .main .right .item .main-title a:hover {color:#ff7800;}
.area.original .main .right .item .remark {font-size: 12px; color: #aaaaaa; padding: 0 10px; height: 60px; overflow: hidden; line-height: 20px;}
.area.original .main .right .item .show-detail {width: 98px; height: 21px; line-height: 21px; float: right; text-align: center; font-size: 12px; margin-top: 16px; color: white; background-color: #aaaaaa; cursor: pointer;}
.area.original .main .right .item .show-detail:hover { background:#ff7800;}

.area.original.newgames .title {background: url(../images/title-newgames.png) no-repeat center;}

.area .main .icon-title {width: 120px; height: 25px; margin: 18px 0px 8px 20px;}

/*.area.all-round .title {background-position: -5px -543px;}*/
.area.all-round .title {background: url(../images/title-activity.png) no-repeat center;}
.area.all-round .main {height: 384px;}
.area.all-round .main .left {width: 181px; height: 100%; background-color: #ededee;}
.area.all-round .main .left .item {height: 48px; line-height: 47px; color: #2c353e; background-color: #ededee; overflow: hidden; cursor: pointer;}
.area.all-round .main .left .item .game-logo {float: left; height: 100%; width: 68px; background: no-repeat center; background-size: 40px;}
.area.all-round .main .left .item i {margin: 18px 5px 18px 0;}
.area.all-round .main .left .item:hover, .area.all-round .main .left .item.on {color: white; background-color: #2c353e;}
.area.all-round .main .center {width: 711px; height: 100%; background-color: white;}
.area.all-round .main .center:hover {box-shadow: 0 0 10px 0 #bbbbbb;}
.area.all-round .main .center > div {float: left;}
.area.all-round .main .center .image {width: 363px; height: 219px; background: black no-repeat center / cover;}
.area.all-round .main .center .image:hover {opacity: 0.7;}
.area.all-round .main .center .info {width: 348px; height: 219px;}
.area.all-round .main .center .info .icon-title {background-position: -435px -165px;}
.area.all-round .main .center .info .content {padding: 0 20px; font-size: 12px; line-height: 26px; color: #2c353e;}
.area.all-round .main .center .info .content em {font-style: normal; color: #ff7800; font-size: 12px;}
.area.all-round .main .center .info .content .show-detail {float: right; width: 70px; height: 20px; background-color: #2c353e; margin-right: 158px; margin-top: 4px;}
.area.all-round .main .center .info .content .show-detail a {text-align: center; font-size: 12px; color: white; line-height: 20px;}
.area.all-round .main .center .info .content .show-detail a:hover { background-color:#ff7800;}
.area.all-round .main .center .title-area {width: 362px; height: 105px; border-right: 1px solid #ededee; margin-top: 28px; overflow: hidden; text-overflow: ellipsis;}
.area.all-round .main .center .title-area p {margin: 0 20px;}
.area.all-round .main .center .title-area p a {float: left; color: #2c353e; margin-left: 15px; width: 250px; height: 20px; overflow: hidden; font-size: 16px; font-weight: bold;}
.area.all-round .main .center .title-area p a:hover { color:#ff7800;}
.area.all-round .main .center .title-area p.remark {clear: both; margin-top: 30px; color: #aaaaaa; line-height: 26px;}
.area.all-round .main .center .related {width: 348px; height: 164px;}
.area.all-round .main .center .related .icon-title {background-position: -435px -192px; margin-top: 23px;}
.area.all-round .main .center .related .link {padding: 0 20px;}
.area.all-round .main .center .related .link a,
.area.all-round .main .center .related .link .date {float: left; font-size: 12px; color: #2c353e; width: 235px; height: 24px; line-height: 24px; overflow: hidden;}
.area.all-round .main .center .related .link a:hover {color: #ff7800;}
.area.all-round .main .center .related .link .date {float: right; width: 65px; color: #aaaaaa; text-align: right;}

.area.all-round .main .right {margin-left: 20px; width: 285px; background-color: white;}
.area.all-round .main .right > div {width: 258px; margin: 0 14px;}
.area.all-round .main .right .head {border-bottom: 1px solid #ededee; height: 35px; margin-top: 15px;}
.area.all-round .main .right .head .icon-title {float: left; background-position: -435px -221px; margin: 0;}
.area.all-round .main .right .head .more {float: right; height: 30px; line-height: 30px;}
.area.all-round .main .right .head .more a {color: #aaaaaa; font-size: 12px;}
.area.all-round .main .right .head .more a:hover {color: #ff7800;}
.area.all-round .main .right .main {height: 332px;}
.area.all-round .main .right .main .item {height: 35px; line-height: 35px; width: 100%; color: #a3a3a3; overflow: hidden;}
.area.all-round .main .right .main .item:hover {color: #ff7800;}
.area.all-round .main .right .main .item:hover > div:nth-child(3) a {background-color: #ff7800;}
.area.all-round .main .right .main .item.t {font-weight: bold; color: #2c353e;}
.area.all-round .main .right .main .item > div {text-align: center; font-size: 12px; float: left;}
.area.all-round .main .right .main .item > div:nth-child(1) {width: 40%;}
.area.all-round .main .right .main .item > div:nth-child(1) i {margin-top: 12px;}
.area.all-round .main .right .main .item > div:nth-child(2) {width: 40%;}
.area.all-round .main .right .main .item > div:nth-child(3) {width: 20%;}
.area.all-round .main .right .main .item > div:nth-child(3) a {font-size: 12px; color: white; background-color: #2c353e; height: 21px; line-height: 22px; margin-top: 7px;}

.area.ad {height: 113px; margin-top: 36px;}

.area.videos .title {background-position: -5px -567px;}
.area.videos .main {height: 398px;}
.area.videos .main .left { width:247px; height:398px; overflow:hidden; padding:0px 20px;}
.area.videos .main .left > div {width: 247px;}
.area.videos .main .left {background-color: white;}
.area.videos .main .left .head {border-bottom: 1px solid #ededee; height: 35px; margin-top: 15px;}
.area.videos .main .left .head .icon-title {float: left; background-position: -435px -250px; margin: 0;}
.area.videos .main .left .head .more {float: right; width: 35px; height: 20px; line-height: 20px; text-align: center; border-radius: 3px; margin: 5px 2px;}
.area.videos .main .left .head .more a {color: #2c353e; font-size: 12px;}
.area.videos .main .left .head .more:hover, .area.videos .main .left .head .more.on {background-color: #2c353e;}
.area.videos .main .left .head .more:hover a, .area.videos .main .left .head .more.on a {color: white;}
.area.videos .main .left .list {width:247px; height: 330px; overflow:hidden;}
.area.videos .main .left .list .item {width:247px; height: 20px; margin-bottom:11px; line-height: 20px; overflow:hidden;}
.area.videos .main .left .list .item > div {float: left; height: 20px; font-size: 12px; color: #2c353e;}
.area.videos .main .left .list .item .index {width: 20px; height: 100%; margin-right: 20px; text-align: center; background-color: #ff7800; color: white;}
.area.videos .main .left .list .item .video-title {width: 135px; overflow: hidden; padding-right:15px;}
.area.videos .main .left .list .item .video-title a {font-size: 12px; color: #2c353e;}
.area.videos .main .left .list .item .video-title a:hover {color:#ff7800;}
.area.videos .main .left .list .item .play-times {width: 57px; color: #aaaaaa; text-align: left;}
.area.videos .main .left .list .item .play-times i {margin-top: 4px; margin-right:6px;}
.area.videos .main .left .list .item:first-child {height: 60px; margin-bottom: 13px; margin-top:16px;}
.area.videos .main .left .list .item:first-child .index {width: 25px; height: 35px; margin-top: 12px; margin-right: 15px; background-color: inherit; background-position: -394px -222px;}
.area.videos .main .left .list .item:first-child .image {width: 85px; height: 50px; margin-top: 1px; background: no-repeat center / cover}
.area.videos .main .left .list .item:first-child .video-title {width: 110px; height: 35px; padding-left: 12px; line-height:18px; margin-right:0px; padding-right:0px;}
.area.videos .main .left .list .item:first-child .play-times {margin-left: 12px; text-align:left; padding-right:0px;}
.area.videos .main .left .list .item.video-info{ width:247px; height:20px;  margin-bottom:11px;}

.area.videos .main .right {width: 892px; height: 100%; margin-left: 20px;}
.area.videos .main .right .item {width: 436px; height: 189px; float: left; margin-right: 20px; margin-bottom: 20px; background-color: white; cursor: pointer;}
.area.videos .main .right .item:nth-child(2) {margin-right: 0;}
.area.videos .main .right .item:nth-child(3) {margin-bottom: 0;}
.area.videos .main .right .item:nth-child(4) {margin-right: 0; margin-bottom: 0;}
.area.videos .main .right .item .image {float: left; width: 169px; height: 100%; background: black no-repeat center / cover;}
.area.videos .main .right .item .image .tags {float: left; margin-top: 166px; padding: 2px 10px; background-color: rgba(0,0,0,0.4); color: white;}
.area.videos .main .right .item .image:hover {opacity: 0.7;}
.area.videos .main .right .item .content {float: left; padding: 0 20px; width: 227px; height: 100%;}
.area.videos .main .right .item .content p {font-size: 12px; color: #aaaaaa; line-height: 20px; height: 140px; overflow: hidden;}
.area.videos .main .right .item .content p:first-child {font-size: 14px; color: #2c353e; height: 36px; overflow: hidden; line-height: 36px; padding-top: 7px; font-weight:bold;}
.area.videos .main .right .item .content p:first-child:hover { color:#ff7800;}
.area.videos .main .right .item .content .tags {float: right; background-color: #ff7800; color: white; font-size: 12px; font-style: normal; border-radius: 3px; margin-top: 7px;}

.area.videos .main .right .nitem {width: 208px; height: 189px; float: left; margin-right: 20px; margin-bottom: 20px; background-color: white;}
.area.videos .main .right .nitem:hover {box-shadow: 0 0 10px 0 #bbbbbb;}
.area.videos .main .right .nitem:nth-child(4n) {margin-right: 0;}
.area.videos .main .right .nitem.mr {margin-right: 0;}
.area.videos .main .right .nitem.mb {margin-bottom: 0;}
.area.videos .main .right .nitem .cover {width: 100%; height: 104px; background: black no-repeat center / cover;}
.area.videos .main .right .nitem:hover .cover {opacity: 0.8;}
.area.videos .main .right .nitem .vtitle {padding: 0 10px; line-height: 26px; overflow: hidden; height: 26px;}
.area.videos .main .right .nitem .vtitle a {color: black;}
.area.videos .main .right .nitem:hover .vtitle a {color: #ce4828;}
.area.videos .main .right .nitem .content {font-size: 12px; color: #aaaaaa; line-height: 18px; overflow: hidden; padding: 0 10px; height: 54px;}
.area.videos .main .right .nitem .cover .tags {float: right; background-color: #ff7800; color: white; font-size: 12px; font-style: normal; border-radius: 3px; padding: 1px 3px; margin-top: 7px; margin-right: 7px;}

.area.forum .title {background-position: -5px -591px;}
.area.forum .main {height: 383px;}
.area.forum .main .item {float: left; width: 285px; height: 100%; margin-left: 20px; background-color: white;}
.area.forum .main .item:hover {box-shadow: 0 0 10px 0 #bbbbbb;}
.area.forum .main .item:first-child {margin-left: 0;}
.area.forum .main .item .image {width: 100%; height: 176px; background: black no-repeat center / cover;}
.area.forum .main .item:hover .image {opacity: 0.8;}
.area.forum .main .item .author-info {height: 25px; padding: 0 10px;}
.area.forum .main .item .author-info .headimg {float: left; width: 46px; height: 46px; border-radius: 25px; border: 2px solid white; margin-top: -25px; background: white url(http://ucenter.colg.cn/images/noavatar_big.gif) no-repeat center / cover; position: absolute;}
.area.forum .main .item .author-info .name {float: left; height: 25px; line-height: 25px; padding: 0 10px; color: #a3a3a3; margin-left: 50px;}
.area.forum .main .item .forum-title {padding: 14px 10px; color: #2c353e; line-height: 20px; height: 40px; overflow: hidden;}
.area.forum .main .item .forum-title a {color: #2c353e;}
.area.forum .main .item .forum-title a:hover {color: #ff7800;}
.area.forum .main .item .remark {margin: 0 10px; border-top: 1px dashed #aaaaaa;}
.area.forum .main .item .remark p {font-size: 12px; color: #a3a3a3; margin: 13px 0; line-height: 20px; height: 40px; overflow: hidden;}
.area.forum .main .item .other-info {margin: 30px 10px 0; height: 20px;}
.area.forum .main .item .other-info > div {height: 100%; color: #a3a3a3; line-height: 20px;}
.area.forum .main .item .other-info > div i {margin-right: 7px;}
.area.forum .main .item .other-info .time {float: left;}
.area.forum .main .item .other-info .comment-nums {float: right;}

.site-map {min-width: 1200px; height: 243px; margin-top: 58px; border-top: 1px solid #e8e8e8; border-bottom: 1px solid #e8e8e8;}
.site-map .main {height: 244px;}
.site-map .main .item {float: left; width: 90px; height: 100%; margin-left: 40px;}
.site-map .main .item:first-child {margin-left: 0;}
.site-map .main .item .area-name {color: #4c4c4c; height: 64px; line-height: 76px; font-size: 16px;}
.site-map .main .item .link {line-height: 29px;}
.site-map .main .item .link a {color: #878787;}
.site-map .main .item .link a:hover {color: #ff7800;}
.site-map .main .item.double .link {float: left; width: 50%;}
.site-map .main .item.width {width: 135px;}
.site-map .main .item .qr-area {width: 100px; height: 100px; margin-top: 7px;}
.site-map .main .item.qr-wx .qr-area {background-position: -193px -328px;}
.site-map .main .item.qr-app .qr-area {background-position: -295px -327px;}

.friendly-link {border-bottom: 1px solid #e8e8e8; height: 147px;}
.friendly-link .main .area-name {color: #4c4c4c; height: 64px; line-height: 76px; font-size: 16px;}
.friendly-link .main .link-area {line-height: 29px; color: #878787;}
.friendly-link .main .link-area a {color: #878787;}
.friendly-link .main .link-area a:hover {color: #ff7800;}

.footer .main {text-align: center; line-height: 100px; height: 100px; color: #878787;}

.space {clear: both;}