|
|
@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; //option在FF等非IE浏览器缩进2px}
|
|
|
/*按钮*/
|
|
|
.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;
|
|
|
}
|
|
|
.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;
|
|
|
} |