You cannot select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

1157 lines
26 KiB
CSS

5 years ago
 @charset "utf-8";
.green {
color: #029d1e;
}
.orange {
color: #ffa000;
}
.blue {
color: #4badff;
}
.pq_icon {
background-image: url(../images/pq_icon.png);
background-repeat: no-repeat
}
.m_box {
background: #FFF
}
.input_t {
border: 1px solid #dedede;
font-size: 14px;
font-family: "微软雅黑";
color: #999;
line-height: 20px;
padding: 9px 15px;
margin: 0;
transition: border-color 0.3s linear 0s
}
input:-webkit-autofill,
textarea:-webkit-autofill,
select:-webkit-autofill {
-webkit-box-shadow: 0 0 0px 1000px transparent inset !important;
background-color: transparent;
background-image: none;
transition: background-color 50000s ease-in-out 0s; //
}
.input_yes {
border-color: #80ce8e;
}
.input_error {
border-color: #ffaf8d;
}
/*下拉列表*/
.select_down * {
margin: 0;
padding: 0
}
.select_down {
float: left;
display: inline;
border: 1px solid #e8e8e8;
padding: 9px 15px
}
.select_down div {
float: left
}
/* 子选择器在FF等非IE浏览器中识别 */
.select_down>div {
min-width: 120px;
height: 20px;
overflow: hidden
}
/* 通配选择符只在IE浏览器中识别 */
*html .select_down div select {
display: block;
float: left;
margin: -2px
}
.select_down div>select {
display: block;
border: none;
font-size: 14px;
font-family: "微软雅黑";
color: #999;
height: 20px;
min-width: 120px;
margin: 0;
padding: 0px
}
.select_down:hover {
border: 1px solid #CCC
}
.select_down select>option {
text-indent: 2px; //optionFFIE2px}
/*按钮*/
.btn_game {
display: inline-block;
border-width: 1px;
border-style: solid;
border-radius: 3px;
font-size: 14px;
font-family: "微软雅黑";
line-height: 43px;
height: 43px;
padding: 0 20px;
cursor: pointer;
margin: 0 5px;
transition: all 0.3s linear
}
.btn_game_c1 {
border-color: #a7d6af;
color: #029d1e
}
.btn_game_c1:hover {
background: #029d1e;
border-color: #029d1e;
color: rgba(255, 255, 255, 0.8)
}
.btn_game_c2 {
border-color: #f3c5ad;
color: #ff6716
}
.btn_game_c2:hover {
background: #ff6716;
border-color: #ff6716;
color: rgba(255, 255, 255, 0.8)
}
.btn_game_c3 {
border-color: #c7d0e7;
color: #4563ae
}
.btn_game_c3:hover {
background: #4563ae;
border-color: #4563ae;
color: rgba(255, 255, 255, 0.8)
}
.game_btn1,
.game_btn2,
.game_btn3 {
display: inline-block;
background: #fe5a5a;
border: none;
border-radius: 3px;
font-size: 16px;
font-family: "微软雅黑";
color: rgba(255, 255, 255, 0.8);
text-align: center;
min-width: 140px;
line-height: 45px;
height: 45px;
cursor: pointer;
transition: background 0.3s linear
}
.game_btn1:hover {
background: #fe3636;
color: rgba(255, 255, 255, 0.8)
}
.game_btn2 {
background: #ff9c00
}
.game_btn2:hover {
background: #ff8800;
color: rgba(255, 255, 255, 0.8)
}
.game_btn3 {
background: #4badff
}
.game_btn3:hover {
background: #4badff;
color: rgba(255, 255, 255, 0.8)
}
/*图标*/
.ic16_home,
.ic16_fav,
.ic16_exit,
.ic16_people,
.ic16_menue,
.ic16_phone,
.ic16_plus,
.ic16_mail {
display: inline-block;
width: 16px;
height: 16px;
margin-top: -3px;
vertical-align: middle;
transition: all 0.2s linear
}
.ic16_home {
background-position: 0 -80px;
}
.ic16_exit {
background-position: 0 -32px
}
.ic16_people {
background-position: 0 -48px
}
.ic16_menue {
background-position: 0 -64px
}
.ic16_phone {
background-position: 0 -80px
}
.ic16_plus {
background-position: 0 -96px
}
.ic16_mail {
background-position: 0 -112px
}
/*星星*/
.icon_stars {
display: inline-block;
background: url(../images/icon_stars.png) 0 0 no-repeat;
text-align: left;
width: 75px;
height: 15px;
line-height: 15px;
vertical-align: middle
}
.icon_stars i {
display: inline-block;
background: url(../images/icon_stars.png) 0 -15px no-repeat;
width: 100%;
height: 15px;
line-height: 15px
}
.icon_stars2 {
display: inline-block;
background: url(../images/icon_stars.png) 0 -30px no-repeat;
text-align: left;
width: 84px;
height: 17px;
line-height: 15px;
vertical-align: middle
}
.icon_stars2 i {
display: inline-block;
background: url(../images/icon_stars.png) 0 -47px no-repeat;
width: 100%;
height: 17px;
line-height: 17px
}
/*进度100%*/
.progre_slider {
background: #ccc;
display: inline-block;
border-radius: 2px;
line-height: 4px;
height: 4px;
width: 120px;
vertical-align: middle;
overflow: hidden
}
.progre_slider .goso {
background: #ff6716;
display: inline-block;
border-radius: 2px;
line-height: 4px;
height: 4px
}
/*翻页*/
.page {
text-align: center;
line-height: 30px
}
// .page a, .page span{display:inline-block; border-radius:3px; font-size:14px; color:#999; line-height:35px; padding:0 15px; vertical-align:middle; transition:all 0.3s linear}
// .page a:hover{background:#EEE}
// .page .updow{font-family:"宋体"}
// .page .on, .page .on:hover{background-color:#ff6364; color:rgba(255,255,255,0.8)}
// .page span{background:#ffc100; color:rgba(255,255,255,0.8)}
.page a,
.page span {
display: inline-block;
border-radius: 3px;
font-size: 12px;
line-height: 12px;
color: #333;
padding: 6px 12px;
transition: all 0.3s;
background-color: #f7f7f7;
border: 1px solid #e6e6e6;
}
.page span,
.page a:hover,
.page a.on {
background-color: #ffc100;
color: #fff;
border-color: #ffc100;
}
/*弹出层*/
.popup_box {
background: #FFF;
position: fixed;
top: 50%;
left: 50%;
_position: absolute;
z-index: 998
}
.popup_box .popup_title {
background: #fafafa;
height: 50px;
line-height: 50px;
padding: 0 30px
}
.popup_box .popup_title h3 {
display: inline-block;
font-size: 18px;
font-weight: 100;
color: #333
}
.popup_box .popup_close {
display: block;
background: url(../images/x_but.png) no-repeat;
width: 18px;
height: 18px;
position: absolute;
top: 15px;
right: 20px;
transition: all 0.2s linear
}
.popup_box .popup_close:hover {
transform: rotate(180deg)
}
.popup_bg {
display: none;
background: rgba(0, 0, 0, 0.5);
width: 100%;
height: 100vh;
position: fixed;
_position: absolute;
z-index: 997
}
/*弹出层礼包领取*/
.popup_gift_box {
width: 600px;
min-height: 300px;
margin: -150px 0 0 -300px;
_top: expression(documentElement.scrollTop + 100 + "px");
}
.popup_gift_info {
padding: 20px
}
.popup_gift_info li {
font-size: 14px;
line-height: 35px;
position: relative
}
.popup_gift_info label {
display: block;
float: left;
font-size: 14px;
color: #999;
text-align: right;
line-height: 35px;
width: 150px;
padding-right: 10px
}
.popup_gift_info .rc {
padding-left: 160px
}
/*min*/
.min {
background: #f7f7f7;
border-bottom: 1px solid #e8e8e8;
font-size: 12px;
color: #999;
line-height: 31px;
height: 31px;
min-width: 1200px
}
#ok_login {
display: block;
}
.min .line {
display: block;
float: left;
height: 11px;
border-left: 1px dotted #ddd;
margin: 10px;
}
.min a {
display: block;
float: left;
color: #525252;
transition: all 0.3s linear
}
.min a:hover {
color: #03b4f5
}
.min a:hover .ic16_home {
background-position: -16px 0
}
.min a:hover .ic16_fav {
background-position: -16px 0
}
.min a:hover .ic16_exit {
background-position: -16px -32px
}
.min a:hover .ic16_people {
background-position: -16px -48px
}
.min a:hover .ic16_menue {
background-position: -16px -64px
}
.min a:hover .ic16_phone {
background-position: -16px -80px
}
.min a:hover .ic16_mail {
background-position: -16px -112px
}
/*搜索*/
.min_search {
float: left;
background: #FFF;
border: 1px solid #03b4f5;
border-radius: 5px;
height: 21px;
margin: 4px 0 0 685px;
position: relative
}
.min_search li {
float: left;
line-height: 23px
}
.min_search .search_input {
background: none;
border: none;
font-size: 14px;
color: #999;
line-height: 21px;
height: 21px;
width: 115px;
margin: -5px 0 0 12px;
}
.min_search .search_btn {
/*background-position: -160px -45px;*/
background-position: -194px -45px;
background-color: #fff;
border-radius: 0 5px 5px 0;
border-left: 1px solid #03b4f5;
border-top: none;
border-bottom: none;
border-right: none;
width: 34px;
height: 21px;
padding: 0;
cursor: pointer;
vertical-align: top;
transition: all 0.3s linear
}
.min_search:hover .search_btn {
/*background-position: -194px -45px;*/
border-left: 1px solid #03b4f5
}
/*.min_search:hover {
border-color: #03b4f5
}*/
/*游戏信息*/
.min_game_down {
float: right;
position: relative
}
.min_game_down:hover .min_game_list {
visibility: visible;
opacity: 1;
top: 30px
}
.min_game_down .menu_hd {
display: block;
font-size: 14px;
color: #525252;
line-height: 31px;
height: 31px
}
.min_game_down .menu_hd .arrow {
display: inline-block;
border-top: 5px solid #cbcdd1;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
height: 0;
line-height: 0;
margin-left: 10px;
position: relative;
transition: all 0.2s linear
}
.min_game_down .menu_hd .arrow em {
display: inline-block;
border-top: 5px solid #f7f7f7;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
height: 0;
line-height: 0;
margin-left: 10px;
position: absolute;
top: -7px;
left: -15px;
transition: all 0.2s linear
}
.min_game_down .menu_hd_on .arrow {
border-top: 5px solid #ff9c00;
transform: rotate(180deg)
}
.min_game_down .menu_hd_on {
color: #ff9c00
}
.min_game_down .menu_hd_on .ic16_menue {
background-position: -16px -64px
}
/*游戏名称*/
.min_game_list {
background: #FFF;
border: 1px solid #e8e8e8;
border-right: none;
width: 294px;
position: absolute;
top: 60px;
right: 0;
visibility: hidden;
opacity: 0;
transition: all 0.6s cubic-bezier(0.18, 0.89, 0.32, 1.28);
z-index: 99
}
.min_game_list .arrow {
display: inline-block;
border-bottom: 7px solid #cbcdd1;
border-left: 7px solid transparent;
border-right: 7px solid transparent;
height: 0;
line-height: 0;
position: absolute;
top: -7px;
right: 52px
}
.min_game_list .arrow em {
display: inline-block;
border-bottom: 7px solid #FFF;
border-left: 7px solid transparent;
border-right: 7px solid transparent;
height: 0;
line-height: 0;
position: absolute;
top: 1px;
right: -7px
}
.min_game_list li {
float: left;
border-right: 1px solid #e8e8e8;
border-bottom: 1px solid #e8e8e8;
width: 146px
}
.min_game_list li a {
display: block;
float: none;
font-size: 12px;
font-family: "微软雅黑";
color: #525252;
line-height: 30px;
padding-left: 25px
}
.min_game_list li a:hover {
background: #fafafa;
color: #ff9c00
}
.min_game_list .name {
display: inline-block;
padding-right: 5px
}
.min_game_list .title {
background: linear-gradient(to bottom, #FFF, #fafafa);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#FFFFFF', endColorstr='#fafafa');
border-bottom: 1px solid #e8e8e8;
border-right: 1px solid #e8e8e8;
height: 30px;
padding: 0 10px
}
.min_game_list .more {
display: block;
float: none;
border-top: 1px solid #e8e8e8;
border-right: 1px solid #e8e8e8;
font-weight: bold;
color: #9f9f9f;
text-align: center;
line-height: 30px;
margin-top: -1px
}
.min_game_list .more:hover {
background: #fafafa;
color: #ff9c00
}
.min_game_list .more i {
transition: all 0.2s linear
}
.min_game_list .more:hover i {
transform: rotate(180deg)
}
.min_game_list .min_ic_hot {
display: inline-block;
width: 9px;
height: 9px;
background-position: -250px 0
}
.min_game_list .min_ic_new {
display: inline-block;
width: 9px;
height: 9px;
background-position: -259px 0
}
/* 头部 */
.head {
background-color: #fff;
background-color: rgba(255, 255, 255, 0.6);
width: 100%;
position: relative;
top: 0;
left: 0;
z-index: 11;
box-shadow: 0 3px 4px rgba(0, 0, 0, 0.05);
}
.head .m1200 {
position: relative;
}
.head .logo {
width: 190px;
height: 100px;
float: left;
line-height: 100px;
}
.head .logo img {
width: 190px;
height:60px;
}
.head .nav {
float: right;
margin-right: -30px;
}
.head .nav li {
float: left;
padding: 0 10px;
position: relative;
}
.head .nav li .on {
background: #ffffff;
}
.head .nav li:after {
content: '';
width: 2px;
height: 2px;
background-color: #999;
position: absolute;
right: 0;
top: 49px;
}
.head .nav li:last-child:after {
display: none;
}
.head .nav li a {
font-size: 18px;
height: 100px;
padding: 0 10px;
line-height: 100px;
color: #999;
display: block;
position: relative;
}
.head .nav li a:before {
content: '';
position: absolute;
left: 0;
right: 0;
bottom: 0;
margin: auto;
width: 0px;
height: 5px;
background-color: #03b4f5;
transition: 0.3s;
}
.head .nav li a:hover:before,
.head .nav li a.on:before {
width: 100%;
}
.head .nav li a:hover,
.head .nav li a.on {
color: #ff7e00;
}
.head .top-menu {
width: 100px;
height: 100px;
float: right;
background: #ffd600;
position: relative;
transition: 0.3s;
}
.head .top-menu em {
width: 27px;
height: 2px;
display: inline-block;
background-color: #333;
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;
transition: 0.3s;
}
.head .top-menu em:before,
.head .top-menu em:after {
content: '';
width: 27px;
height: 2px;
display: inline-block;
background-color: #333;
position: absolute;
left: -999px;
right: -999px;
margin: auto;
transition: 0.3s;
}
.head .top-menu em:before {
top: -10px;
}
.head .top-menu em:after {
top: 10px;
}
.head .top-menu.show {
background: #282b2d;
}
.head .top-menu.show em:before,
.head .top-menu.show em:after {
background-color: #ffd600;
top: 0;
width: 34px;
border-radius: 2px;
}
.head .top-menu.show em:before {
transform: rotate(45deg);
}
.head .top-menu.show em:after {
transform: rotate(-45deg);
}
.head .top-menu.show em {
background-color: transparent;
}
/* 热门推荐游戏 */
.game-menu-box {
width: 100%;
padding-bottom: 80px;
position: absolute;
top: 100px;
background-color: #313334;
background-color: rgba(40, 43, 45, 0.9);
display: none;
}
.game-menu-box .top {
height: 94px;
border-top: 6px solid #ffd600;
line-height: 94px;
padding: 0 35px;
background-color: #282b2d;
background-color: rgba(40, 43, 45, 0.9);
}
.game-menu-box .top p {
font-size: 22px;
color: #fff;
}
.game-menu-box .top span {
float: right;
font-size: 12px;
margin-left: 45px;
position: relative;
}
.game-menu-box .top span:before {
content: '';
width: 12px;
height: 12px;
display: inline-block;
background: url(../images/pq_icon.png) no-repeat;
position: absolute;
left: -15px;
top: 40px;
}
.game-menu-box .top .icon-h:before {
background-position: -322px -45px;
}
.game-menu-box .top .icon-n:before {
background-position: -310px -45px;
}
.game-menu-box .game-list-box:after {
content: '';
clear: both;
height: 0;
display: block;
}
.game-menu-box .game-list {
width: 565px;
padding-left: 35px;
float: left;
position: relative;
}
.game-menu-box .game-list:after {
content: '';
width: 1px;
height: 100%;
background-color: #626262;
position: absolute;
right: 0;
top: 0;
}
.game-menu-box .game-list p {
font-size: 18px;
line-height: 1em;
padding: 25px 0 15px;
color: #fff;
position: relative;
text-indent: 0.7em;
}
.game-menu-box .game-list p:before {
content: '';
width: 3px;
height: 18px;
background-color: #ffd600;
position: absolute;
left: 0;
top: 25px;
}
.game-menu-box .game-list ul:after {
content: '';
clear: both;
height: 0;
display: block;
}
.game-menu-box .game-list li {
float: left;
width: 30.33333%;
padding-right: 3%;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
color: #fff;
}
.game-menu-box .game-list li a {
color: #fff;
font-size: 12px;
line-height: 30px;
position: relative;
}
.game-menu-box .game-list li a:hover {
color: #ffd600;
}
.game-menu-box .game-list li a:after {
width: 12px;
height: 12px;
content: '';
position: absolute;
right: -15px;
top: 50%;
margin-top: -6px;
background: url(../images/pq_icon.png) no-repeat;
}
.game-menu-box .game-list-new li a:after {
background-position: -310px -45px;
}
.game-menu-box .game-list-hot li a:after {
background-position: -322px -45px;
}
.game-menu-box .top-menu-hide {
width: 59px;
height: 22px;
background: url(../images/pq_icon.png) no-repeat -160px -263px;
position: absolute;
bottom: 25px;
left: 0;
right: 0;
margin: auto;
cursor: pointer;
}
/*页脚*/
.foot {
background-color: #282b2d;
min-width: 1200px;
padding: 29px 0;
margin-top: 50px;
}
.foot_logo {
padding: 13px 25px 0 177px;
}
.foot_info {
border-left: 1px dotted #b3b3b3;
padding: 0 0 5px 30px;
}
.foot_logo img{
width:190px;
height:auto;
max-height:60px;
}
/*页脚导航*/
.foot_nav {
font-size: 14px;
color: #acacac;
padding-bottom: 10px
}
.foot_nav .line {
display: inline-block;
padding: 0 15px;
color: rgba(255, 255, 255, 0.3);
}
.foot .split_line {
width: 100%;
height: 1px;
background: rgba(255, 255, 255, 0.06);
margin: 20px 0 10px;
}
.foot_tips {
font-size: 14px;
color: #fff;
text-align: center;
opacity: 0.6;
}
.foot_nav a {
display: inline-block;
color: #fff
}
.foot_nav a:hover {
color: #f39d0a
}
/*版权*/
.foot_copy {
font-size: 12px;
color: #fff;
line-height: 22px
}
.foot_copy a {
color: #fff;
}
.foot_copy a:hover {
color: #f39d0a
}
.foot_copy a img {
position: relative;
top: -1px;
}
.foot.index-foot {
margin-top: 0;
}
.foot.user_foot {
background-color: #fff;
border: none;
margin-top: 0;
}
.foot .foot_user {
border-left: none;
text-align: center;
}
.foot .foot_user .foot_nav a {
color: #525252;
}
.foot .foot_user .foot_nav a:hover {
color: #f39d0a;
}
.foot .foot_user .foot_nav .line {
color: #525252;
}
.foot .foot_user .foot_copy,
.foot .foot_user .foot_copy a {
color: #656565;
}
.foot .foot_user .foot_copy a:hover {
color: #f39d0a
}
/*浮动层*/
.float_contact_position {
width: 1200px;
margin: 0 auto;
}
.float_contact {
position: fixed;
bottom: 80px;
right: -130px;
z-index: 999;
right: 10px;
}
.float_contact .float-bg {
width: 52px;
height: 143px;
background: url(../images/float_contact.png);
position: absolute;
top: 0;
left: 0;
z-index: 3;
}
.float_contact ul {
width: 52px;
height: 171px;
padding-top: 14px;
}
.float_contact ul li {
float: left;
width: 100%;
margin-bottom: 9px;
position: relative;
}
.float_contact ul li a {
width: 100%;
height: 37px;
display: inline-block;
float: left;
position: relative;
z-index: 9;
}
.float_contact .kf_pic {
visibility: hidden;
opacity: 0;
transition: 0.3s;
width: 160px;
height: 30px;
padding: 10px 20px;
background-color: #fff;
border-radius: 6px;
position: absolute;
left: -200px;
top: 0px;
box-shadow: 0 0 7px rgba(0, 0, 0, 0.2);
z-index: 4;
}
.float_contact .kf_pic a {
width: 100%;
}
.float_contact .kf_pic img {
vertical-align: middle;
}
.float_contact .kf_pic span {
width: 30px;
height: 30px;
display: inline-block;
float: left;
margin-right: 5px;
}
.float_contact .kf_pic b {
padding-top: 25px;
line-height: 33px;
}
.float_contact .kf_pic .arrow {
width: 23px;
height: 26px;
display: inline-block;
background: url(../images/arrow.png);
position: absolute;
right: -20px;
top: 12px;
}
.float_contact .wx_pic {
visibility: hidden;
opacity: 0;
transition: 0.3s;
width: 200px;
height: 200px;
background-color: #fff;
border-radius: 6px;
position: absolute;
left: -200px;
top: -20px;
box-shadow: 0 0 7px rgba(0, 0, 0, 0.2);
z-index: 4;
text-align:center;
}
.float_contact .wx_pic img {
width: 160px;
border-radius: 6px;
}
.float_contact .wx_pic .arrow {
width: 23px;
height: 26px;
display: inline-block;
background: url(../images/arrow.png);
position: absolute;
right: -20px;
top: 35px;
}
.float_contact .rz_pic {
visibility: hidden;
opacity: 0;
transition: 0.3s;
position: absolute;
width: 142px;
height: 210px;
left: -85px;
bottom: -42px;
}
.float_contact .rz_pic .close {
width: 18px;
height: 18px;
display: inline-block;
cursor: pointer;
position: absolute;
bottom: 70px;
right: 47px;
z-index: 10;
}
.float_contact .rz_pic .rz-bg1 {
position: absolute;
top: 0;
left: 0;
z-index: 2;
cursor: pointer;
}
.float_contact .rz_pic .rz-bg2 {
position: absolute;
top: 0;
left: 0;
z-index: 8;
cursor: pointer;
}
.float_contact ul .active {
opacity: 1;
visibility: visible;
left: -211px;
}
.float_contact .rz .active {
opacity: 1;
visibility: visible;
left: -96px;
}
/*底部弹窗*/
.bottom-popup {
width: 100%;
height: 200px;
position: fixed;
bottom: 0;
z-index: 9999;
background: url(../images/bottom_popup_bg.png) center no-repeat;
}
.bottom-popup .down {
display: block;
width: 100%;
height: 100%;
}
.close {
width: 50px;
height: 50px;
background: #4d1e98;
;
border-radius: 25px;
position: absolute;
top: 10px;
right: 20px;
cursor: pointer;
}
.close:hover {
background: #341466;
}