/*全局*/
html { margin: 0; padding: 0; width: 100%; min-width: 1920px; background: #000; }
body { margin: 0 auto; padding: 0; width: 1920px; font-size:12px; font-family:"Microsoft YaHei",Tahoma,SimSun,Verdana; line-height: normal; background: #fcf1da; }
address,caption,cite,code,dfn,em,th,var{font-weight:normal;font-style:normal}
abbr,acronym,img,input{border:0}
input,button,textarea,select,optgroup,option{font-family:inherit;font-size:inherit;font-style:inherit;font-weight:inherit}
ul,ol,li{list-style:none;}
table{border-collapse:collapse;border-spacing:0}
a{color:#d7b591; text-decoration:none}
a:hover{color:#fff; text-decoration: none; }
a:focus,input:focus{outline:0}
img{vertical-align: bottom; }
/*------ banner大图 ------*/
#banner {
width: 1920px;
min-height: 100vh;
z-index: 9;
position: relative;
display: block;
clear:both;
}
#bannerbg {
position: relative;
top: 0;
left: 0;
width: 1920px;
min-height: 300px;
}
#bannerbg img {
width: 1920px;
height: auto;
display: block;
}
#yetou {
position: absolute;
top: 0;
left: 0;
width: 1920px;
height: 300px;
z-index: 10;
}
#yetou img {
width: 100%;
height: auto;
display: block;
}
/* 叠加图片 - 可调整位置和大小 */
#xzljwm {
position: absolute;
top: 1195px; /* 距离顶部位置 */
left: 1390px; /* 距离左侧位置 */
width: 295px; /* 图片宽度 */
height: 500px; /* 图片高度 */
z-index: 15; /* 层级 */
}
#xzljwm img {
width: 100%;
height: 100%;
display: block;
object-fit: contain;
}
/*四个按钮*/
#btn-group {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 10;
}
.banner-btn {
position: absolute;
display: block;
width: 120px;
height: 40px;
background: #d7b591;
color: #fff;
text-align: center;
line-height: 40px;
text-decoration: none;
font-size: 14px;
}
.banner-btn:hover {
background: #c19a64;
}
.banner-btn.btn1 { top: 1141px; left: 145px; width: 498px; height: 240px; background: url(mobile/images/pc/yx1.webp) no-repeat center; background-size: contain; }
.banner-btn.btn2 { top: 1323px; left: 253px; width: 312px; height: 160px; background: url(mobile/images/pc/sy1.webp) no-repeat center; background-size: contain; }
.banner-btn.btn2:hover { filter: brightness(1.3); }
.banner-btn.btn3 { top: 1430px; left: 253px; width: 312px; height: 160px; background: url(mobile/images/pc/ios1.webp) no-repeat center; background-size: contain; }
.banner-btn.btn3:hover { filter: brightness(1.3); }
.banner-btn.btn4 { top: 1537px; left: 253px; width: 312px; height: 160px; background: url(mobile/images/pc/pc1.webp) no-repeat center; background-size: contain; }
.banner-btn.btn4:hover { filter: brightness(1.3); }
/*顶部悬浮按钮*/
.top-btn {
position: absolute;
display: block;
background: none;
background-size: contain;
background-repeat: no-repeat;
background-position: center;
z-index: 999;
}
.top-btn1 { top: -15px; left: 540px; width: 151px; height: 130px; }
.top-btn1:hover { background: url(mobile/images/pc/shouye2.webp) no-repeat center; background-size: contain; }
.top-btn2 { top: -15px; left: 691px; width: 151px; height: 130px; }
.top-btn2:hover { background: url(mobile/images/pc/xinwen2.webp) no-repeat center; background-size: contain; }
.top-btn3 { top: -15px; left: 1075px; width: 151px; height: 130px; }
.top-btn3:hover { background: url(mobile/images/pc/xiazai2.webp) no-repeat center; background-size: contain; }
.top-btn4 { top: -15px; left: 1226px; width: 151px; height: 130px; }
.top-btn4:hover { background: url(mobile/images/pc/kefu2.webp) no-repeat center; background-size: contain; }
/*游戏特色*/
.tese { width: 750px; height: 577px; display: block; position: relative; }
.title-tese { width: 750px; height: 55px; position: absolute; top:0; background: url(mobile/images/title-tese.png) no-repeat center; z-index: 99; background-size: cover;}
/*版本特色轮播*/
.tese-carousel { width: 750px; position: absolute; top: 1760px; left: 328px; z-index: 10; }
.tese-carousel .pb-carouselWarp { background: transparent; border: none; width: 486px; height: 678px; margin: 0 auto; }
.tese-carousel .pb-carousel { transition: none; animation: none; }
.tese-carousel .pb-carousel li { display: none; position: absolute; width: 100%; height: 100%; top: 0; left: 0; }
.tese-carousel .pb-carousel li.pb-this { display: block; }
.tese-carousel .pb-carousel li img { width: 100%; height: 100%; object-fit: contain; }
/*职业特色切换展示图*/
.zhiye-switch { width: 800px; height: 430px; position: absolute; top: 3020px; left: 484px; z-index: 10; }
.zhiye-switch .pb-carouselWarp { background: transparent; border: none; width: 945px; height: 520px; margin: 0 auto; overflow: hidden; }
.zhiye-switch .pb-carousel { position: relative; height: 100%; width: 100%; }
.zhiye-switch .pb-carousel li { display: none; position: absolute; width: 100%; height: 100%; top: 0; left: 0; }
.zhiye-switch .pb-carousel li.pb-this { display: block; }
.zhiye-switch .pb-carousel li img { width: 100% !important; height: 100% !important; display: block !important; margin: 0 auto !important; object-fit: fill !important; }
.zhiye-switch .pb-carousel-ind { display: none !important; }
.zhiye-switch .qiehuan-box { position: absolute; top: 0; bottom: 0; left: 0; right: 0; pointer-events: none; }
.zhiye-switch .qiehuan-btn { width: 100px !important; height: 180px !important; position: absolute; top: 77%; transform: translateY(-50%); cursor: pointer; opacity: 0.7; pointer-events: auto; }
.zhiye-switch .qiehuan-prev { left: -140px;}
.zhiye-switch .qiehuan-next { right: -292px; transform: translateY(-50%) rotate(180deg); }
/*图片轮播*/
.pb-carouselWarp{position:relative;width:712px;height:457px;overflow:hidden;margin-left:auto;margin-right:auto; top:75px; padding: 2px; background:#f6e2b5; border: 1px solid #f6e2b5; }
.pb-carouselWarp .pb-carousel{position:relative;height:100%;}
.pb-carouselWarp .pb-carousel li{display:none;position:absolute;width:99.5%;height:100%;top:0;left:0;}
.pb-carouselWarp .pb-carousel li img{width:100%;height:100%;vertical-align:middle; }
.pb-carouselWarp .pb-carousel .pb-this{display:block;left:0;}
.pb-carouselWarp .pb-carousel-ind{position:absolute;bottom:20px;left:50%;transform:translateX(-50%); }
.pb-carouselWarp .pb-carousel-ind li{float:left;width:15px;height:15px;border-radius:50%;background-color:#fff;margin:0 5px;cursor:pointer; }
.pb-carouselWarp .pb-carousel-ind .pb-this{background-color:#f6e2b5;}
.pb-carouselWarp .pb-arrow{position:absolute;top:42%;margin-top:-20px;width:50px;height:120px; opacity: .8; cursor:pointer;border:none;}
.pb-carouselWarp .pb-arrow-prev{left:20px;background: url(mobile/images/btn-prev.png) no-repeat center;background-size: cover;}
.pb-carouselWarp .pb-arrow-next{right:20px;background: url(mobile/images/btn-next.png) no-repeat center;background-size: cover;}
/*背景音乐*/
#musicbox { position: absolute; width: 60px; height: 60px; z-index: 9999999; top:20px; right: 25px; opacity: 0.6; }
#musicbox a {
display: inline-block;
width: 60px;
height:60px;
text-align: center;
background-color: #CCCCCC;
border-radius: 60px;
font-size: 26px;
margin-top: 20px;
background-image: url(mobile/images/m.png);
background-position: center;
background-repeat: no-repeat;
background-size: 100% 100%;
}
#musicbox a.play { animation: rotates 3s linear infinite;}
#musicbox a img { width: 100%; height: 100%; }
@keyframes rotates {
from { transform: rotate(0); }
to { transform: rotate(360deg); }
}
/*微信引导提示*/
#pMask { position: fixed; z-index:99999; top: 0; width: 100%; height: 100%; display: none; }
/*游戏海报轮播*/
#haibao-carousel { position: absolute; top: 1192px; left: 560px; width: 64.2%; height: 22.25%; z-index: 100; }
#haibao-carousel .carousel-container { position: relative; width: 65%; height: 56.2%; }
#haibao-carousel .carousel-list { position: relative; width: 100%; height: 100%; z-index: 1; }
#haibao-carousel .carousel-item { display: none; position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
#haibao-carousel .carousel-item.active { display: block; }
#haibao-carousel .carousel-item img { width: 100%; height: 100%; object-fit: cover; display: block; }
#haibao-carousel .carousel-indicators { position: absolute; bottom: 3px; left: 53.8%; transform: translateX(-50%); display: flex; gap: 10px; z-index: 20; padding: 10px 5px; }
#haibao-carousel .indicator { width: 60px; height: 4px; background: rgba(255,255,255,0.5); cursor: pointer; transition: background 0.3s; }
#haibao-carousel .indicator:hover { background: rgba(255,255,255,0.9); }
#haibao-carousel .indicator.active { background: #fff; }