前端菜j（仿我的世界官网首页）

最新推荐文章于 2024-05-18 11:09:56 发布

生きている123

最新推荐文章于 2024-05-18 11:09:56 发布

阅读量253

点赞数

文章标签：前端

本文链接：https://blog.csdn.net/m0_64589342/article/details/125034271

版权


<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<link rel="shortcut icon" href="favicon.ico">
		<link rel="stylesheet" href="css/index.css">
	</head>
	<body>
		<!-- 页面整体 -->
		<div class="page">
			<!-- 头部位置 -->
			<div class="header">
				<ul>
					<li><a href="#">登录</a></li>
					<li><a href="#">兑换</a></li>
				</ul>
			</div>
			<!-- 导航栏部分 -->
			<div class="nav">
				<div class="nav_left">
					<ul>
						<li><a href="#" class="game">游戏</a></li>
						<li><a href="#">社区</a></li>
						<li><a href="#">商品</a></li>
						<li><a href="#">支持</a></li>
					</ul>
				</div>
				<div class="nav_center">
					<a href="#"><img src="img/logo-minecraft.svg" alt=""></a>
				</div>
				<div class="nav_right">
					<a href="#">获取 MINECRAFT</a>
				</div>
			</div>
			<!-- 内容部分 -->
			<div class="content">
				<div class="download">
					<h1>欢迎来到 MINECRAFT</h1>
					<p>新游戏、新更新、新畅玩方式应有尽有，快来加入最大的游戏社区之<br />一，今天就开启创作之旅吧！</p>
					<div>
						<a href="#">获取 MINECRAFT</a>
					</div>
				</div>
			</div>
			<!-- 更多游戏部分 -->
			<div class="more">
				<div class="more_game">
					<h2>探索 MINECRAFT 游戏</h2>
					<div class="box">
						<div class="box_left">
							<a href="#">←</a>
						</div>
						<div class="game first">
							<img src="img/Games_Subnav_Minecraft-228x350.jpg" alt="">
							<div class="mes1">
								<a href="#">MINECRAFT</a>
								<p>探索自己独一无二的世界，挺过黑<br />夜，并创建您能想象的一切！</p>
							</div>
						</div>
						<div class="game">
							<img src="img/Games_Subnav_Dungeona-228x350.jpg" alt="">
							<div class="mes2">
								<a href="#">MINECRAFT DUNGEONS</a>
								<p>发现一款以经典地牢爬虫为灵感来<br />源的全新动作冒险游戏！</p>
							</div>
						</div>
						<div class="game last">
							<img src="img/MC_Education_KeyArt_650x1000-final.jpg" alt="">
							<div class="mes3">
								<a href="#">MINECRAFT 教育版</a>
								<p>一个基于游戏的学习平台，支持来<br />自100多个国家/地区的成千上万<br />名教育工作者！</p>
							</div>
						</div>
						<div class="box_right">
							<a href="#">→</a>
						</div>
					</div>
				</div>
			</div>
			<!-- 最新消息部分 -->
			<div class="news">
				<h1>最新消息</h1>
				<div class="new_content">
					<div class="new_left">
						<a href="#">←</a>
					</div>
					<div class="new1">
						<img src="img/java_realms_june_440x250.jpg" alt="">
						<div class="link">
							<a href="#">NEW ON REALMS:<br /> HARDCORE PARKOUR</a>
						</div>
					</div>
					<div class="new2">
						<img src="img/Xbox_Minecraft_WildUpdate_Main_.Net_440x250.jpg" alt="">
						<div class="link">
							<a href="#">THE WILD UPDATE IS<br />COMING</a>
							<p>Experience the greater outdoors on<br /> june 7</p>
						</div>
					</div>
					<div class="new3">
						<img src="img/Minecraft_Yr1_NET_440x250.jpg" alt="">
						<div class="link">
							<a href="#">FAN FAVOURITES:YEAR 1</a>
						</div>
					</div>
					<div class="new_right">
						<a href="#">→</a>
					</div>
				</div>
			</div>
			<!-- 其他部分 -->
			<div class="another">
				<div class="black"></div>
				<div class="more1">
					<img src="img/Xbox_Minecraft_MarketPlace_5YearAnniversary_.Net_600x360.jpg" alt="">
					<h1>庆祝商城 5 周年！</h1>
					<p>在 5 月 24 日和 7 月 12 日之间，尽情探索粉丝最爱的五周年庆典，<br />邂逅最热门商城世界幕后的创作者。</p>
					<a href="#">了解更多</a>
				</div>
				<div class="more2">
					<img src="img/MinecraftDungeons_S2LuminousNight_.net_600x360.jpg" alt="">
					<h1>闪耀吧，冒险者！</h1>
					<p>在夜幕降临之际，通过各个楼层的神秘壁画、复杂的谜题和棘手的<br />敌人，以全新角度开启探索高塔之旅。</p>
					<a href="#">了解更多</a>
				</div>
				<div class="more3">
					<img src="img/Minecraft-Birthday_2022-PromoTile-600x360.jpg" alt="">
					<h1>别具风格的庆祝</h1>
					<p>参加Minecraft主题派对，你只需要准备个性化的服装、配饰和派对<br />用品！</p>
					<a href="#">了解更多</a>
				</div>
				<div class="black_bottom"></div>
			</div>
			<!-- 社区部分 -->
			<div class="community">
				<div class="black_top"></div>
				<div class="headline">
					<h1>社区创作品</h1>
					<p>发现最好的 Add-On、模组，以及非凡的 Minecraft 社区正在创建的更多内<br />容！</p>
					<a href="#">探索</a>
				</div>
				<div class="middle">
					<ul>
						<li class="pic1">
							<img src="img/meet-the-allay-header 277x277.jpg" alt="">
							<div class="mask">
								<h3>MEET THE ALLAY</h3>
							</div>
						</li>
						<li class="pic2">
							<img src="img/java_realms_june_277x277.jpg" alt="">
							<div class="mask">
								<h3>NEW ON REALMS:HARDCORE<br />OARKOUR</h3>
							</div>
						</li>
						<li class="pic3">
							<img src="img/waste-1x1(2).jpg" alt="">
							<div class="mask">
								<h3>AROUND THE BLOCK:NETHER<br />WASTES</h3>
							</div>
						</li>
						<li class="pic4">
							<img src="img/Xbox_Minecraft_WildUpdate_Main_.Net_277x277.jpg" alt="">
							<div class="mask">
								<h3>THE WILD UPDATE IS<br />COMING</h3>
							</div>
						</li>
					</ul>
				</div>
				<div class="btn">
					<a href="#">
						<h3>加载更多内容</h3>
					</a>
				</div>
				<div class="message">
					<p>Xbox One、PlayStation 4、Nintendo Switch、iOS、Android 和 Windows 10 都支持跨平台游戏。跨平台游戏需要 Microsoft<br />
						账号。Xbox One 在线多人游戏需要 Xbox Live 金会员资格。 4 在线多人游戏需要 PlayStation Plus 会员资格 。<br />Nintendo Switch
						在线多人游戏需要 Nintendo Switch Online 会员资格。</p>
				</div>
			</div>
			<!-- 底部 -->
			<div class="footer">
				<div class="attention">
					<h3>关注 MINECRAFT</h3>
					<ul>
						<li></li>
						<li></li>
						<li></li>
						<li></li>
						<li></li>
					</ul>
				</div>
				<div class="footer_middle">
					<div class="middle_content">
						<div class="footer_left">
							<img class="img1" src="img/Mojang2020Logo.png" alt="">
							<img src="img/Logo_ Xbox_Game_Studio.jpg" alt="">
							<p>Mojang ©2009-2022.“Minecraft”是 Mojang Synergies AB 的商标</p>
							<ul>
								<li><a href="#">查看 Mojang 条款和条件</a></li>
								<li><a href="#">查看 Mojang 品牌和资产指南</a></li>
								<li class="last1"><a href="#">管理同意</a></li>
							</ul>
						</div>
						<div class="footer_center1">
							<div>
								<h3>游戏</h3>
								<ul>
									<li><a href="#">Minecraft</a></li>
									<li><a href="#">Minecraft Dungeons</a></li>
									<li><a href="#">Minecraft: Education Edition</a></li>
								</ul>
							</div>
							<div>
								<h3>社区</h3>
								<ul>
									<li><a href="#">社区</a></li>
									<li><a href="#">创建者学习门户</a></li>
									<li><a href="#">Mojang Studios 招贤纳士</a></li>
								</ul>
							</div>
						</div>
						<div class="footer_center2">
							<div>
								<h3>商店</h3>
								<ul>
									<li><a href="#">商城</a></li>
									<li><a href="#">Minecraft 商店</a></li>
								</ul>
							</div>
							<div>
								<h3>支持</h3>
								<ul>
									<li><a href="#">讨论与帮助</a></li>
									<li><a href="#">反馈</a></li>
									<li><a href="#">网站地图</a></li>
								</ul>
							</div>
							<div>
								<h3>账户</h3>
								<ul>
									<li><a href="#">档案</a></li>
									<li><a href="#">兑换</a></li>
								</ul>
							</div>
						</div>
						<div class="footer_right">
							<img src="img/esrb_2021.svg" alt="">
						</div>
					</div>
				</div>
				<div class="footer_bottom">
					<div class="language">
						<a href="#">简体中文</a>
					</div>
					<div class="about">
						<ul>
							<li><a href="#">隐私和 Cookie</a></li>
							<li><a href="#">使用条款</a></li>
							<li><a href="#">商标</a></li>
							<li><a href="#">关于我们的广告</a></li>
							<li><a href="#">© 2022 Microsoft</a></li>
						</ul>
					</div>
					<div class="logo">
						<img src="img/Logo_ Microsoft.svg" alt="">
					</div>
				</div>
			</div>
		</div>
	</body>
</html>

* {
	margin: 0;
	padding: 0;
	list-style: none;
	text-decoration: none;
	font-family: '微软雅黑';
}

a:visited {
	color: #a0e080;
}

.header {
	width: 100%;
	height: 35px;
	background-color: #000000;
}

.header ul {
	display: block;
	float: right;
	margin-right: 62px;
}

.header ul li {
	float: left;
	line-height: 35px;
}

.header ul li a {
	font-size: 12px;
	padding: 0 28px;
	font-weight: 700;
}

.header ul li a:link {
	color: #a0e080;
}

.header ul li a:hover {
	color: #ffffff;
}

.nav {
	width: 100%;
	height: 84px;
	background-color: #171615;
	border-bottom: 1px solid #ffffff;
	z-index: 1;
}

.nav_left ul {
	display: block;
	padding-left: 55px;
}

.nav_left ul li {
	float: left;
	line-height: 84px;
}

.nav_left ul li .game {
	padding: 35px 49px 35px 0;
}

.nav_left ul li a {
	font-size: 12px;
	font-weight: 700;
	padding: 35px 26px;
	color: #ffffff;
}

.nav_left ul li a:link {
	color: #ffffff;
}

.nav_left ul li a:hover {
	color: #a0e080;
}

.nav_center {
	float: left;
	width: 235px;
	height: 42px;
	margin-top: 22px;
	margin-left: 253px;
}

.nav_right {
	float: left;
	width: 200px;
	height: 42px;
	background-color: #3b8526;
	margin-left: 255px;
	border-top: 4px solid #6bc349;
	border-bottom: 4px solid #2a631c;
	margin-top: 17px;
	text-align: center;
	box-shadow: ;
	box-shadow: -1px 2px #111010;
	cursor: pointer;

}

.nav_right a {
	font-size: 18px;
	font-weight: 700;
	line-height: 42px;
	color: #ffffff;
}

.nav_right:hover {
	background-color: #bfc1c5;
	border-top: 4px solid #bfc1c5;
	border-bottom: 4px solid #bfc1c5;
	transition: .4s;
}

.nav_right:hover a {
	color: #252525;
	transition: .4s;
}

.content {
	width: 100%;
	height: 600px;
	background-color: #000000;
}

.download {
	margin: 0 auto;
	width: 1200px;
	height: 600px;
	background-image: url(../img/home-hero-1200x600.jpg);
	color: #ffffff;
}

.download h1 {
	font-size: 36px;
	padding-top: 104px;
	margin-left: 100px;
	color: #ffffff;
}

.download p {
	padding: 16px 0;
	font-size: 18px;
	margin-left: 100px;
}

.download div {
	width: 270px;
	height: 65px;
	font-weight: 700;
	margin-top: 24px;
	line-height: 65px;
	font-size: 19px;
	background-color: #3b8526;
	margin-left: 100px;
	border-top: 4px solid #6bc349;
	border-bottom: 4px solid #2a631c;
	text-align: center;
	box-shadow: 0 4px rgba(0, 0, 0, .2);
	cursor: pointer;
}

.download div a {
	color: #ffffff;
}

.download div:hover {
	background-color: #252322;
	border-top: 4px solid #252322;
	border-bottom: 4px solid #252322;
	transition: .4s;
}

.more {
	width: 100%;
	height: 792px;
	background: url(../img/bg-wool-dark.png);
	position: relative;
}

.more_game {
	position: absolute;
	overflow: hidden;
	width: 1140px;
	height: 742px;
	background-color: #eeeeee;
	margin-top: 50px;
	left: 105px;
}

.more_game h2 {
	text-align: center;
	font-size: 28px;
	margin-top: 80px;
}

.box {
	width: 1000px;
	height: 500px;
	margin: 0 auto;
}

.box_left {
	float: left;
	width: 50px;
	height: 48px;
	background-color: #3b8526;
	margin-left: 23px;
	margin-top: 136px;
	border-top: 4px solid #6bc349;
	border-bottom: 4px solid #2a631c;
	box-shadow: 0 4px rgba(0, 0, 0, .2);
	cursor: pointer;
	font-size: 24px;
	text-align: center;
	line-height: 48px;
}

.box_left:hover {
	border-top: 4px solid #242221;
	border-bottom: 4px solid #242221;
	background-color: #242221;
	transition: all .4s;
}

.box_right {
	float: right;
	width: 50px;
	height: 48px;
	background-color: #3b8526;
	border-top: 4px solid #6bc349;
	border-bottom: 4px solid #2a631c;
	box-shadow: 0 4px rgba(0, 0, 0, .2);
	margin-top: 136px;
	margin-right: 23px;
	cursor: pointer;
	font-size: 24px;
	text-align: center;
	line-height: 48px;
}

.box_right:hover {
	border-top: 4px solid #242221;
	border-bottom: 4px solid #242221;
	background-color: #242221;
	transition: all .4s;
}

.game img {
	float: left;
	width: 216px;
	height: 335px;
	margin-top: 63px;
	margin-right: 64px;
	margin: 63px 32px 0 32px;
	box-sizing: border-box;
	cursor: pointer;
}

.game img:hover {
	transform: scale(1.05);
	border: 2px solid #84c94c;
	transition: .2s;
}


.mes1 {
	position: absolute;
	bottom: 100px;
	left: 172px;
	width: 220px;
	height: 100px;
	text-align: center;
}

.mes1 a {
	font-size: 18px;
	font-weight: 700;
	color: #196d17;
}

.mes1:hover a {
	color: #181818;
	transition: .2s;
	border-bottom: 1px solid #181818;
}

.mes1 p {
	font-size: 14px;
}

.mes2 {
	position: absolute;
	bottom: 100px;
	left: 452px;
	width: 220px;
	height: 100px;
	text-align: center;
}

.mes2 a {
	font-size: 18px;
	font-weight: 700;
	color: #196d17;
}

.mes2:hover a {
	color: #181818;
	transition: .2s;
	border-bottom: 1px solid #181818;
}

.mes2 p {
	font-size: 14px;
}

.mes3 {
	position: absolute;
	bottom: 100px;
	left: 732px;
	width: 220px;
	height: 100px;
	text-align: center;
}

.mes3 a {
	font-size: 18px;
	font-weight: 700;
	color: #196d17;
}

.mes3:hover a {
	color: #181818;
	transition: .2s;
	border-bottom: 1px solid #181818;
}

.mes3 p {
	font-size: 14px;
}

.news {
	width: 100%;
	height: 605px;
	background: url(../img/bg-wool-dark.png);
}

.news h1 {
	font-size: 28px;
	color: #ffffff;
	text-align: center;
	padding-top: 73px;
}

.new_content {
	position: relative;
	width: 1236px;
	height: 400px;
	margin: 0 auto;
	box-sizing: border-box;
}

.new_content .new1 {
	position: absolute;
	margin-top: 53px;
	margin-left: 91px;
	transform: scale(0.9);
}

.new_content .new2 {
	position: absolute;
	margin-top: 53px;
	margin-left: 454px;
	font-size: 12px;
	font-weight: 700;
}

.new_content .new2::after {
	content: "NEWS";
	display: block;
	position: absolute;
	width: 70px;
	height: 30px;
	background-color: #ffffff;
	top: 180px;
	left: 138px;
	line-height: 30px;
	text-align: center;
}

.new_content .new3 {
	position: absolute;
	margin-top: 53px;
	margin-left: 816px;
	transform: scale(0.9);
}

.new_content img {
	width: 345px;
	height: 198px;
	border: 2px solid #ffffff;
	cursor: pointer;
}

.new_content img:hover {
	border: 2px solid #84c94c;
}

.link {
	width: 310px;
	height: 80px;
	text-align: center;
	margin: 18px auto 0;
}

.link p {
	font-size: 15px;
	color: #ffffff;
	font-weight: 700;
}

.new_content a {
	font-size: 18px;
	color: #ffffff;
	font-weight: 700;
}

.new_content a:hover {
	color: #84c94c;
}

.new_left {
	float: left;
	width: 50px;
	height: 44px;
	background-color: #3b8526;
	margin-left: 33px;
	margin-top: 136px;
	border-top: 4px solid #6bc349;
	border-bottom: 4px solid #2a631c;
	box-shadow: 0 4px rgba(0, 0, 0, .2);
	cursor: pointer;
	font-size: 24px;
	text-align: center;
	line-height: 44px;
}

.new_left:hover {
	border-top: 4px solid #242221;
	border-bottom: 4px solid #242221;
	background-color: #242221;
	transition: all .4s;
}

.new_right {
	float: right;
	width: 50px;
	height: 44px;
	background-color: #3b8526;
	margin-right: 13px;
	margin-top: 136px;
	border-top: 4px solid #6bc349;
	border-bottom: 4px solid #2a631c;
	box-shadow: 0 4px rgba(0, 0, 0, .2);
	cursor: pointer;
	font-size: 24px;
	text-align: center;
	line-height: 44px;
}

.new_right:hover {
	border-top: 4px solid #242221;
	border-bottom: 4px solid #242221;
	background-color: #242221;
	transition: all .2s;
}

.another {
	width: 100%;
	height: 1250px;
	background: url(../img/bg-wool-light.png);
}

.another a {
	font-size: 15px;
	font-weight: 700;
	color: #196d17;
}

.another .black {
	width: 100%;
	height: 100px;
	background: url(../img/trans-top-darkwool.png);
}

.another div {
	width: 1000px;
	height: 350px;
	margin: 0 auto;
}

.another div img {
	width: 475px;
	height: 285px;
}

.more1 h1 {
	padding-top: 65px;
}

.more1 p {
	padding-top: 18px;
}

.more2 {
	padding-left: 70px;
}

.more2 h1 {
	padding-top: 65px;
}

.more2 p {
	padding-top: 18px;
}

.more3 h1 {
	padding-top: 65px;
}

.more3 p {
	padding-top: 18px;
}

.more1 img {
	float: left;
	padding-right: 30px;
}

.more2 img {
	float: right;
}

.more3 img {
	float: left;
	padding-right: 30px;
}

.another .black_bottom {
	background: url(../img/trans-bottom-darkwool.png);
	width: 100%;
	height: 100px;
}

.community {
	width: 100%;
	height: 850px;
	background-color: #f8f5f4;
}

.black_top {
	background: url(../img/bg-wool-dark.png);
	width: 100%;
	height: 100px;
}

.headline {
	width: 600px;
	height: 160px;
	margin: 80px auto 0;
	text-align: center;
}

.headline h1 {
	font-size: 28px;
	margin-bottom: 20px;
}

.headline p {
	font-size: 15px;
	margin-bottom: 20px;
}

.headline a {
	font-size: 15px;
	font-weight: 700;
	color: #196d17;
}

.middle {
	width: 1140px;
	height: 300px;
	margin: 0 auto;
}

.middle ul {
	margin-top: 30px;
}

.middle ul li {
	float: left;
	margin: 0 7px;
	height: 266px;
	position: relative;
}

.middle ul li img {
	width: 270px;
	height: 266px;
}

.mask {
	position: absolute;
	color: #ffffff;
	font-weight: 700;
	text-align: center;
	bottom: 0;
	width: 270px;
	height: 84px;
	background-color: rgba(0, 0, 0, .7);
}

.mask h3 {
	padding-top: 32px;
	font-size: 18px;
}

.pic2 .mask h3 {
	padding-top: 32px;
	font-size: 14px;
}

.pic3 .mask h3 {
	padding-top: 32px;
	font-size: 14px;
}

.pic1::after {
	content: "DEEP DIVE S";
	display: block;
	position: absolute;
	bottom: 64px;
	height: 34px;
	background-color: #ffffff;
	padding: 0 18px;
	line-height: 34px;
	font-size: 12px;
	font-weight: 700;
	left: 78px;
}

.pic2::after {
	content: "NEWS";
	display: block;
	position: absolute;
	bottom: 64px;
	height: 34px;
	background-color: #ffffff;
	padding: 0 18px;
	line-height: 34px;
	font-size: 12px;
	font-weight: 700;
	left: 99px;
}

.pic3::after {
	content: "DEEP DIVE S";
	display: block;
	position: absolute;
	bottom: 64px;
	height: 34px;
	background-color: #ffffff;
	padding: 0 18px;
	line-height: 34px;
	font-size: 12px;
	font-weight: 700;
	left: 78px;
}

.pic4::after {
	content: "NWES";
	display: block;
	position: absolute;
	bottom: 64px;
	height: 34px;
	background-color: #ffffff;
	padding: 0 18px;
	line-height: 34px;
	font-size: 12px;
	font-weight: 700;
	left: 99px;
}

.pic1 {
	overflow: hidden;
	cursor: pointer;
}

.pic2 {
	overflow: hidden;
	cursor: pointer;
}

.pic3 {
	overflow: hidden;
	cursor: pointer;
}

.pic4 {
	overflow: hidden;
	cursor: pointer;
}

.pic1:hover img {
	transform: scale(1.1);
	transition: all .4s;
}

.pic1:hover .mask {
	color: #ffffff;
	font-weight: 700;
	text-align: center;
	bottom: 0;
	width: 270px;
	height: 103px;
	background-color: rgba(0, 0, 0, .7);
	transition: all .4s;
}

.pic1:hover::after {
	bottom: 83px;
	transition: all .4s;
}

.pic2:hover img {
	transform: scale(1.1);
	transition: all .4s;
}

.pic2:hover .mask {
	color: #ffffff;
	font-weight: 700;
	text-align: center;
	bottom: 0;
	width: 270px;
	height: 154px;
	background-color: rgba(0, 0, 0, .7);
	transition: all .4s;
}

.pic2:hover::after {
	bottom: 134px;
	transition: all .4s;
}

.pic3:hover img {
	transform: scale(1.1);
	transition: all .4s;
}

.pic3:hover .mask {
	color: #ffffff;
	font-weight: 700;
	text-align: center;
	bottom: 0;
	width: 270px;
	height: 154px;
	background-color: rgba(0, 0, 0, .7);
	transition: all .4s;
}

.pic3:hover::after {
	bottom: 134px;
	transition: all .4s;
}

.pic4:hover img {
	transform: scale(1.1);
	transition: all .4s;
}

.pic4:hover .mask {
	color: #ffffff;
	font-weight: 700;
	text-align: center;
	bottom: 0;
	width: 270px;
	height: 103px;
	background-color: rgba(0, 0, 0, .7);
	transition: all .4s;
}

.pic4:hover::after {
	bottom: 83px;
	transition: all .4s;
}

.btn {
	width: 600px;
	height: 80px;
	margin: 0 auto;
	text-align: center;
}

.btn a {
	display: inline-block;
	width: 171px;
	height: 44px;
	background-color: #3b8526;
	border-top: 4px solid #6bc349;
	border-bottom: 4px solid #2a631c;
	box-shadow: 0 3px rgba(0, 0, 0, .3);
	line-height: 44px;
}

.btn a h3 {
	font-size: 18px;
	color: #ffffff;
}

.btn a:hover {
	background-color: #2f2c2b;
	border-top: 4px solid #2f2c2b;
	border-bottom: 4px solid #2f2c2b;
	transition: all .4s;
}

.message {
	width: 934px;
	height: 100px;
	margin: 0 auto;
	text-align: center;
}

.message p {
	font-size: 16px;
	font-style: italic;
}

.footer {
	width: 100%;
	height: 650px;
}

.attention {
	width: 100%;
	height: 141px;
	background-color: #000000;
}

.attention h3 {
	color: #ffffff;
	font-size: 15px;
	text-align: center;
	padding-top: 25px;
}

.attention ul {
	padding-top: 25px;
	text-align: center;
}

.attention ul li {
	display: inline-block;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	background-color: #2a2a2a;
	margin: 0 30px;
}

.footer_middle {
	width: 100%;
	height: 408px;
	background-color: #111111;
}

.middle_content {
	width: 1140px;
	height: 408px;
	margin: 0 auto;
	padding-top: 78px;
}

.footer_left {
	float: left;
	width: 420px;
	height: 408px;
}

.footer_left .img1 {
	margin-right: 60px;
}

.footer_left p {
	font-size: 12px;
	color: #d1cfce;
	padding-top: 45px;
}

.footer_left ul {
	padding-top: 18px;
}

.footer_left ul li {
	display: inline-block;
	font-size: 12px;
	border-right: 1px solid #ffffff;
	padding-right: 8px;
}

.footer_left ul .last1 {
	border: none;
}

.footer_center1 {
	float: left;
	margin-left: 80px;
}

.footer_center1 h3 {
	color: #ffffff;
	font-size: 15px;
}

.footer_center1 ul li {
	font-size: 12px;
	padding: 5px 0;
}

.footer_center2 {
	float: left;
	margin-left: 80px;
}

.footer_center2 h3 {
	color: #ffffff;
	font-size: 15px;
}

.footer_center2 ul li {
	font-size: 12px;
	padding: 5px 0;
}

.footer_right {
	float: right;
	width: 300px;
	height: 300px;
}

.footer_right img {
	width: 190px;
	height: 127px;
	padding-left: 100px;
}

.footer_bottom {
	position: relative;
	width: 100%;
	height: 100px;
	background-color: #313131;
}

.language {
	position: absolute;
	width: 94px;
	height: 30px;
	border-radius: 2px;
	left: 120px;
	top: 36px;
}

.language a {
	color: #ffffff;
	font-size: 12px;
	font-weight: 700;
}

.about {
	position: absolute;
	left: 460px;
	top: 36px;
}

.about ul {
	display: inline-block;
}

.about ul li {
	float: left;
	font-size: 12px;
	font-weight: 700;
	padding: 0 8px;
}

.logo {
	position: absolute;
	top: 34px;
	right: 170px;
}