*{
	padding:0;
	margin:0;
	/*box-sizing: border-box;*/
}
html,
body,
ul,
ol,
div {
    margin: 0;
    padding: 0;
	transform-origin: 0 0; /* 缩放基准点设为左上角 */
}
body{
	font-family: "Microsoft YaHei", "微软雅黑", sans-serif;
}

li {
    list-style: none;
}

a {
    text-decoration: none;
}

img {
    border: 0;
}

.app-container {
	background-color: #fff;/*#0e0e0e;*/
	display: flex;
	flex-direction: column;
	min-height: 100vh;
	margin:0 auto;
	width:1920px;
}

.row{
	margin:0 auto;
	width:1400px;
}
.mt-50{
	margin-top:50px;
}
.border{
	border:1px solid red;
}



/*header部分*/
.header-container {
  height:40px;
  width:100%;
  background-color: #ffffff;
  overflow-x: visible; /* 禁止隐藏溢出 */
}
.header-main{
	margin:0 auto;
    width:1280px;
    height: 100%;
	position: relative;
}

.header-logo{
	width:120px;
	float:left;
}
.header-logo img{
	height:40px;
	width:auto;
}
.header-navigate{
	width:150px;
	height:100%;
	display: flex;
	float:right;
	text-align: right;
	align-items: center;
}
.header-navigate a{
	font-weight:400;
	color:#2aa0fe;
	font-size:16px;
	margin-left:20px;
	text-decoration: none;
}
.header-navigate a:hover{
	text-decoration: underline;
}

.main-top-container{
	background-image: url("../images/main_top_background.jpg");
	height:1383px;
	width: 1920px;
	margin:0 auo;
	position: relative;
}

.game-main-navigate-contaier{
	position: relative;
	width:1280px;
	height:100px;
	margin:0 auto;
}

.game-main-navigate{
	position: absolute;
	width:680px;
	heiht:100px;
	right:0px;
	top:0px;
	/*
	border:1px solid red;
	*/
}

.game-main-navigate ul{
	display: flex;
	flex-wrap: wrap; /* 允许换行 */
	gap: 15px;      /* 可选：设置图片间距 */
	padding: 0;     /* 清除默认内边距 */
	margin: 0;      /* 清除默认外边距 */
	list-style: none; /* 清除列表默认样式 */
	width: calc(6 * 100px + 5 * 15px); /* 4列宽度 + 3个间隙（如果设置了gap） */
	font-size:20px; /* 增大符号大小 */
}

.game-main-navigate ul li {
	  display: list-item; /* 默认值，显示为列表项 */
	  margin: 10px 10px;       /* 外边距 */
	  padding:0px;
}
.game-main-navigate a{
	text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
	text-decoration: none;
	font-size:22px;
	font-weight:500;
	color:#fcd290;
}
.game-main-navigate a:hover{
	color:#fcd290;
	text-decoration: underline;
}

.game-main-navigate .active{
	list-style-type: disc;
	color:#fcd290;
}
.game-main-navigate .active a{
	color:#fcd290;
}

.main-body-container{
	background-image: url("../images/main_body_background.jpg");
	height:1025px;
	width: 1920px;
	margin:0 auo;
}
.main-download-container{
	position: relative;
	margin-top:860px;
}
.main-download-body{
	width:1400px;
	height:500px;
	color:#fff;
	display:flex;
	flex-direction:row;
	justify-content: flex-start;
	align-items: center;
	gap:15px;
}

.main-download-left{
	background-image: url("../images/main_download_left_background.jpg");
	width:593px;
	height:478px;
}

.download-btn-pc{
	background-image: url("../images/download_btn_pc.png");
	width:517px;
	height:164px;
	margin:0 auto;
	cursor: pointer;
}

.download-btn-android{
	background-image: url("../images/download_btn_android.png");
	width:517px;
	height:156px;
	margin:0 auto;
	cursor: pointer;
}
.download-btn-ios{
	background-image: url("../images/download_btn_ios.png");
	width:517px;
	height:156px;
	margin:0 auto;
	cursor: pointer;
}

.main-download-right{
	background-image: url("../images/main_download_right_background.jpg");
	width:791px;
	height:478px;
	cursor: pointer;
	position: relative;
}

.download-title{
	color:#fff;
	font-weight:500;
	font-size:40px;
	text-align: center;
	padding:0px;
	height:62px;
}
.down-title-image{
	width:326px;
	border-radius: 3px;
}

.download-left{
	position: absolute;
	width:325px;
	height:390px;
	top:50px;
	left:40px;
}
.download-right{
	position: absolute;
	width:325px;
	height:390px;
	top:50px;
	right:40px;
}

.main-news-container{
	margin-top:0px;
}

.main-news-body{
	width:1400px;
	height:430px;
	color:#fff;
	display:flex;
	flex-direction:row;
	justify-content: flex-start;
	align-items: center;
	gap:15px;
}
.main-news-left{
	background-image: url("../images/main_news_left_background.jpg");
	width: 593px;
	height: 423px;
}

.main-news-right{
	background-image: url("../images/main_news_right_background.jpg");
	width: 791px;
	height:423px;
}
.main-news-scroll-image-frame{
	margin-top:4px;
	margin-left:3px;
	width:587px;
	height:360px;
}
.main-news-scroll-image{
	width:587px;
	height:360px;
	border-radius: 5px;
	display: block;
}
.main-news-scroll-image.hide{
	display: none;
}

.main-news-scroll-menu{
	width:590px;
	display: flex;
	flex-direction:row;
	justify-content: flex-start;
	align-items: center;
	gap:10px;
	margin-left:4px;
	padding:2px;
}

.main-news-scroll-column{
	margin-top:3px;
	width:145px;
	height:47px;
	text-align: center;
	color:#bdb5a7;
	font-size:24px;
	line-height: 47px;
	cursor: pointer;
}
.main-news-scroll-column.selected{
	background-image: url("../images/main_news_scroll_menu_selected.png");
	color:#282520;
	cursor: pointer;
}
.main-news-scroll-column:hover{
	background-image: url("../images/main_news_scroll_menu_selected.png");
	color:#282520;
	cursor: pointer;
}

.main-news-title-container{
	width:780px;
	height:50px;
	padding:5px;
	display: flex;
	flex-direction:row;
	justify-content: flex-start;
	align-items: center;
	gap:10px;
}
.main-news-title-menu{
	flex:1;
	padding-left:15px;
	display: flex;
	flex-direction:row;
	justify-content: flex-start;
	align-items: center;
	gap:10px;
}
.main-news-title-column{
	border:1px solid ray;
	width:134px;
	height:46px;
	text-align: center;
	color:#f3e1bc;
	font-size:28px;
	line-height: 46px;
	cursor: pointer;
}
.main-news-title-column:hover{
	background-image: url("../images/main_news_title_menu_selected.png");
	color:#393023;
}
.main-news-title-column.selected{
	background-image: url("../images/main_news_title_menu_selected.png");
	color:#393023;
}

.main-strategy-title-container{
	width:780px;
	height:50px;
	padding:5px;
	display: flex;
	flex-direction:row;
	justify-content: flex-start;
	align-items: center;
	gap:10px;
}
.main-strategy-title-column{
	border:1px solid ray;
	width:163px;
	height:47px;
	text-align: center;
	color:#f3e1bc;
	font-size:28px;
	line-height: 46px;
	cursor: pointer;
}
.main-strategy-title-column:hover{
	background-image: url("../images/main_strategy_title_menu_selected.png");
	color:#393023;
}
.main-strategy-title-column.selected{
	background-image: url("../images/main_strategy_title_menu_selected.png");
	color:#393023;
}
.main-news-title-more{
	width:50px;
	height:47px;
	line-height: 47px;
	text-align: center;
	color:#ddcb9a;
	font-size:40px;
	font-weight: 500;
	cursor: pointer;
}

.main-news-list{
	width:790px;
	height:340px;
	padding-top:10px;
	display: block;
}

.main-news-list.hide{
	display: none;
}

.main-news-column{
	margin:0 auto;
	width:700px;
	height:55px;
	border-bottom: 1px solid #3a3532;
	display: flex;
	flex-direction:row;
	justify-content: flex-start;
	align-items: center;
	gap:10px;
	font-size:20px;
}
.main-news-column-link{
	flex:1;
	color:#efddb9;
	text-align: left;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.main-news-column-link a{
	color:#efddb9;
	text-decoration: none;
}
.main-news-column-link a:hover{
	text-decoration: underline;
}
.main-news-column-date{
	width:120px;
	color:#efddb9;
	text-align: right;
}
.main-news-column.clean{
	border:none;
}

.main-role-container{
	width:1400px;
	height:530px;
	margin-top:30px;
}

.main-role-body{
	margin:0 auto;
	display: flex;
	flex-direction:row;
	justify-content: flex-start;
	align-items: center;
	gap:15px;
}
.main-role-navgaite{
	background-image: url("../images/main_role_navigate_background2.jpg");
	width: 593px;
	height:467px;
	padding-top:57px;
}
.role-navgaite-row{
	margin-top:0px;
	margin-bottom:1px;
	margin-left:2px;
	position: relative;
	display: flex;
	flex-direction:row;
	justify-content: flex-start;
	align-items: center;
	gap:2px;
}
.role-navgaite-col{
	width:195px;
	height:155px;
	cursor: pointer;
}
.role-navgaite-col:hover{
	background-image: url("../images/role_navigate_selected.png");
}


.main-role-introduce{
	flex:1;
	background-image: url("../images/main_role_introduce_background.jpg");
	width:793px;
	height:528px;
	position: relative;
}
.main-role-show{
	position: absolute;
	top:10px;
	right:0px;
}
.main-role-show-image{
	/*
	width: 250px;
	height: 309px;
	*/
   width:380px;
}

.main-role-switch{
	width:550px;
	height:140px;
	position: absolute;
	left:10px;
	bottom: 10px;;
	display: flex;
	flex-direction:row;
	justify-content: flex-start;
	align-items: center;
	gap:2px;
}
.role-btn-1.selected{
	background-image: url("../images/role_btn_1_selected.png");
	width:96px;
	height:126px;
}
.role-btn-1{
	background-image: url("../images/role_btn_1_unselect.png");
	width:96px;
	height:126px;
	cursor: pointer;
}
.role-btn-1:hover{
	background-image: url("../images/role_btn_1_selected.png");
	width:96px;
	height:126px;
	cursor: pointer;
}
.role-btn-2{
	background-image: url("../images/role_btn_2_unselect.png");
	width:96px;
	height:126px;
	cursor: pointer;
}
.role-btn-2.selected{
	background-image: url("../images/role_btn_2_selected.png");
	width:96px;
	height:126px;
	cursor: pointer;
}
.role-btn-2:hover{
	background-image: url("../images/role_btn_2_selected.png");
	width:96px;
	height:126px;
	cursor: pointer;
}
.role-btn-3{
	background-image: url("../images/role_btn_3_unselect.png");
	width:96px;
	height:126px;
	cursor: pointer;
}
.role-btn-3:hover{
	background-image: url("../images/role_btn_3_selected.png");
	width:96px;
	height:126px;
	cursor: pointer;
}
.role-btn-3.selected{
	background-image: url("../images/role_btn_3_selected.png");
	width:96px;
	height:126px;
	cursor: pointer;
}
.role-btn-4{
	background-image: url("../images/role_btn_4_unselect.png");
	width:96px;
	height:126px;
	cursor: pointer;
}
.role-btn-4:hover{
	background-image: url("../images/role_btn_4_selected.png");
	width:96px;
	height:126px;
	cursor: pointer;
}
.role-btn-4.selected{
	background-image: url("../images/role_btn_4_selected.png");
	width:96px;
	height:126px;
	cursor: pointer;
}
.role-btn-5{
	background-image: url("../images/role_btn_5_unselect.png");
	width:96px;
	height:126px;
	cursor: pointer;
}
.role-btn-5:hover{
	background-image: url("../images/role_btn_5_selected.png");
	width:96px;
	height:126px;
	cursor: pointer;
}
.role-btn-5.selected{
	background-image: url("../images/role_btn_5_selected.png");
	width:96px;
	height:126px;
	cursor: pointer;
}

.main-role-tips{
	position:absolute;
	top:15px;
	left:15px;
	width:400px;
	height: 300px;
}

.main-role-tips-title{
	color:#f0ce7a;
	font-size:50px;
	font-weight: 400;
}

.main-role-tips-content{
	margin-top:10px;
	color:#d2c8a7;
	font-size:24px;
	font-weight: 400;
	letter-spacing:2px;
	word-spacing: 5px;
}

.main-footer-container{
	background-image: url("../images/main_footer_background.jpg");
	width:1920px;
	height:1345px;
}

.main-game-strategy-container{
	width:1400px;
	height:430px;
	margin:0 auto;
	margin-top:-20px;
	display: flex;
	flex-direction:row;
	justify-content: flex-start;
	align-items: center;
	gap:10px;
}

.main-game-strategy-info{
	background-image: url("../images/main_game_strategy_info_background.jpg");
	width:594px;
	height:423px;
	position: relative;
}
.main-game-strategy-info-list-play{
	position: absolute;
	top:70px;
	left:203px;
	width:380px;
	height:160px;
}

.main-game-strategy-info-list-system{
	position: absolute;
	bottom:13px;
	left:203px;
	width:380px;
	height:160px;
}

.game-strategy-list-row{
	color:#f1e1c0;
	font-size:22px;
	font-weight: 500;
	width:350px;
	padding:10px;
	margin-top:5px;
}
.game-strategy-list-row a{
	color:#f1e1c0;
	text-decoration: none;
}
.game-strategy-list-row a:hover{
	text-decoration: underline;
}

.main-game-strategy-news{
	background-image: url("../images/main_game_strategy_news_background.jpg");
	width:792px;
	height:423px;
	position: relative;
}
.news-strategy-list{
	width:770px;
	height:340px;
	padding:10px;
	display:block;
}
.news-strategy-list.hide{
	display: none;
}

.news-strategy-row{
	width:750px;
	height:20px;
	padding:10px;
	position: relative;
	display: flex;
	flex-direction:row;
	justify-content: flex-start;
	align-items: center;
	gap:10px;
}

.news-strategy-date{
	width:120px;
	color:#e1d4a7;
	font-size:20px;
	text-align: right;
}
.news-strategy-title{
	flex:1;
	font-size:20px;
	color:#e1d4a7;
	text-decoration:none;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.news-strategy-title a{
	font-size:20px;
	color:#e1d4a7;
}
.news-strategy-title a:hover{
	text-decoration: underline;
}

.main-game-version-container{
	background-image: url("../images/main_game_version_background2.jpg");
	width:1405px;
	height:334px;
	margin:0 auto;
	margin-top:30px;
}

.main-game-service-container{
	background-image: url("../images/main_game_service_background.jpg");
	width:1408px;
	height:336px;
	margin:0 auto;
	margin-top:30px;
	position: relative;
}

.main-game-service-wechat{
	width:235px;
	height:235px;
	position: absolute;
	left:50px;
	top:50px;
}
.main-game-service-wechat img{
	width:235px;
	height:235px;
}

.main-game-service-qq{
	position: absolute;
	width:235px;
	height:235px;
	top:50px;
	left:320px;
}

.main-game-service-qq p{
	color:#d6c7a3;
	font-size:22px;
	text-align: center;
	margin-top:5px;
	padding:5px;
}
.border-bottom{
	border-bottom: 1px solid #d6c7a3;
}

.main-game-serivce-telephone{
	width:240px;
	height:160px;
	position: absolute;
	top:100px;
	left:660px;
	text-align: center;
	color:#d6c7a3;
	font-size:28px;
	line-height: 1.6; /* 行高为字体大小的1.6倍 */
	letter-spacing: 0.5px; /* 字间距 */
	word-spacing: 2px; /* 词间距 */
	padding: 20px; /* div 内边距 */
}
.main-game-serivce-telephone p {
	margin-bottom:15px;
}

.main-game-serivce-contact{
	width:320px;
	height:160px;
	position: absolute;
	top:100px;
	right:80px;
	text-align: center;
	color:#d6c7a3;
	font-size:28px;
	line-height: 1.6; /* 行高为字体大小的1.6倍 */
	letter-spacing: 0.5px; /* 字间距 */
	word-spacing: 2px; /* 词间距 */
	padding: 20px; /* div 内边距 */
}

.game-serivce-link{
	margin-bottom:15px;
}
.game-serivce-link a{
	color:#28e6ef;

	text-decoration: none;
}
.game-serivce-link a:hover{
	text-decoration: underline;
}

.game_age_tips_btn{
	position: absolute;
	top:0;
	right:0;
	width:80px;
	height:auto;
	cursor: pointer;
}

.footer-main{
	margin:0 auto;
	margin-top:50px;
	width:1280px;
	height:130px;
	display: flex;
	justify-content: space-between;
	gap:10px;
	position: relative;
}

.footer-company{
	margin:20px 0;
	width:450px;
	height:100px;
	border-left:2px solid #ffffff;
}

.footer-company-link {
	padding:0px 20px;
	font-weight:600;
	font-size:14px;
	color:#ffffff;
}

.footer-company-link a{
	font-weight:600;
	font-size:14px;
	color:#ffffff;
	text-decoration: none;
}
.footer-company-link a:hover{
	text-decoration: underline;
}

.footer-company-link .row-link{
	margin-top:5px;
}
.footer-company-link .row-title{
	margin-top:15px;
}

.footer-copyright{
	flex:1;
	margin:20px 0;
	height:100px;
	border-left:2px solid #ffffff;
}

.footer-copyright-title{
	padding:0px 20px;
	font-size:14px;
	color:#ffffff;
	font-weight:600;
}
.footer-copyright-title .row-title{
	margin-top:5px;
}
.footer-copyright-title .row-title2{
	margin-top:15px;
}
.row-copyright{
	display: flex;
	justify-content: space-between;
	gap:10px;
	margin-top:15px;
}
.row-copyright-left{
	width:170px;
}
.row-copyright-right{
	flex:1;
}

.row-copyright-right a{
    font-size:14px;
    color:#ffffff;
    font-weight:600;
    text-decoration: none;
}
.row-copyright-right a:hover{
    text-decoration: underline;
}