@charset "utf-8";
/* CSS Document */

/* Body内布局 */
#htmlbody{
	display: flex;
	justify-content: center;
}

/* 总体显示区域 */
#wholediv{
	left: 0px;
	right: 0px;
	margin: auto;
	width: 1280px;
	height: 800px;
	background-color: white;
}

/* 网站备案文本 */
#onrecord{
	left: 0%;
	top: 113%;
	width: 100%;
	height: 4%;
	font: 16px "微软雅黑";
	text-align: center;
	justify-content: center;
}

/* 对各个显示大区分块 */
#divarea1{
	left: 0%;
	top: 0%;
	width: 100%;
	height: 40%;
}

/* 各个大区的共同属性 */
.divareas{
	position: absolute;
	margin: 0%;
	padding: 0%;
	background-color: transparent;
	background-repeat: no-repeat;
	background-position: 0% 0%;
	background-size: 100% 100%;
	line-height: 24px;
	font: 24px "微软雅黑";
	text-align: left;
}

/* 区域1分小块 */
#divarea1_logo{
	left: 0%;
	top: 0%;
	width: 24%;
	height: 32%;
	background-image: url("../images/logo.png");
}
#divarea1_texts{
	left: 30%;
	top: 0%;
	width: 60%;
	height: 32%;
}
/* 区域1又有四个文字块(选项卡) */
#divarea1_texts_1{
	left: 0%;
	top: 23%;
	width: 18%;
	height: 54%;
	text-align: center;
}
#divarea1_texts_2{
	left: 20%;
	top: 23%;
	width: 18%;
	height: 54%;
	text-align: center;
}
#divarea1_texts_3{
	left: 40%;
	top: 23%;
	width: 18%;
	height: 54%;
	text-align: center;
}
#divarea1_texts_4{
	left: 60%;
	top: 23%;
	width: 18%;
	height: 54%;
	text-align: center;
}
#divarea1_texts_5{
	left: 80%;
	top: 23%;
	width: 18%;
	height: 54%;
	text-align: center;
}

/* 头部的网页链接图片 */
.top_pichref{
	left: 0%;
	top: 0%;
	width: 100%;
	height: 100%;
}

/* 扫描二维码下载APP */
#div_qrcode{
	left: 90%;
	top: 1%;
	width: 6.25%;
	height: 10%;
	line-height: 24px;
	font: 24px "微软雅黑";
	color: #000000;
	background-image: url("../images/QRCodeB.png");
	text-align: left;
}
#div_qrdesc{
	left: 35%;
	top: 33%;
	width: 50%;
	height: 5%;
	line-height: 24px;
	font: 24px "微软雅黑";
	color: #000000;
	text-align: left;
}

#divarea1_textback{
	left: 40%;
	top: 0%;
	width: 12.5%;
	height: 26.5%;
	background-image: url("../images/uppertextback.png");
}
.box{
	position: absolute;
	left: 0%;
	top: 25%;
	width: 100%;
	height: 75%;
	margin: 0%;
	padding: 0%;
	overflow: hidden;
}
.box li{
	float: left;
	width: 800px;
	height: 160px;
}
.box img{
	width: 100%;
	height: 100%;
}
@keyframes move{
	/*
	from{
		transform: translateX(0px);
	}
	to{
		transform: translateX(-4800px);
	}
	*/
	0% {transform: translateX(0) translateY(0); }
	25% {transform: translateX(-1200px) translateY(0); }
	50% {transform: translateX(-2400px) translateY(0); }
	75% {transform: translateX(-3600px) translateY(0); }
	100% {transform: translateX(-4800px) translateY(0); }
}
.box ul{
	width: 7200px;
	animation: move 60s infinite linear;
}
.box ul:hover{
	animation-play-state: paused;
}

/* 区域2分小块 */
#divarea2{
	left: 0%;
	top: 36%;
	width: 100%;
	height: 60%;
}
#divarea2_backpic{
	left: 0%;
	top: 35%;
	width: 100%;
	height: 100%;
	background-image: url("../images/back1.jpg");
}
/* 区域2中的标题和三个选项卡 */
#divarea2_ribbon1{
	left: 1.5%;
	top: 0%;
	width: 25%;
	height: 8%;
	padding-left: 3%;
	line-height: 24px;
	font: 24px "微软雅黑";
	color: #FFFFFF;
	background-image: url("../images/titleribbon1.png");
	text-align: left;
}
#divarea2_ribbon2{
	left: 34.5%;
	top: 0%;
	width: 25%;
	height: 8%;
	padding-left: 3%;
	line-height: 24px;
	font: 24px "微软雅黑";
	color: #FFFFFF;
	background-image: url("../images/titleribbon1.png");
	text-align: left;
}
#divarea2_ribbon3{
	left: 67.5%;
	top: 0%;
	width: 25%;
	height: 8%;
	padding-left: 3%;
	line-height: 24px;
	font: 24px "微软雅黑";
	color: #FFFFFF;
	background-image: url("../images/titleribbon1.png");
	text-align: left;
}
#divarea2_function1{
	left: 1.5%;
	top: 13%;
	width: 32%;
	height: 110%;
	line-height: 24px;
	font: 24px "微软雅黑";
	color: #000000;
	background-image: url("../images/titlearea1.png");
	text-align: left;
}
#divarea2_function2{
	left: 34.5%;
	top: 13%;
	width: 32%;
	height: 110%;
	line-height: 24px;
	font: 24px "微软雅黑";
	color: #000000;
	background-image: url("../images/titlearea2.png");
	text-align: left;
}
#divarea2_function3{
	left: 67.5%;
	top: 13%;
	width: 32%;
	height: 110%;
	line-height: 24px;
	font: 24px "微软雅黑";
	color: #000000;
	background-image: url("../images/titlearea3.png");
	text-align: left;
}
/* 区域2的内部文字 */
.divarea2_functions{
	position: absolute;
	margin: 0%;
	padding: 0%;
	left: 5%;
	top: 40%;
	width: 90%;
	height: 50%;
	background-color: transparent;
	line-height: 24px;
	font: 24px "微软雅黑";
	text-align: left;
}
/* 文字提示 */
.divarea2_textprompt{
	left: 0%;
	width: 12%;
	height: 12%;
	position: absolute;
	margin: 0%;
	padding: 0%;
	background-color: transparent;
	background-repeat: no-repeat;
	background-position: 0% 0%;
	background-size: 100% 100%;
	background-image: url("../images/selectlogo.png");
}

/* 下部功能链接图片 */
.divarea2_gohref{
	left: 10%;
	width: 80%;
	height: 16%;
	position: absolute;
	margin: 0%;
	padding: 0%;
}
/* 一区 */
#divarea2_gohref11{
	top: 0%;
}
#divarea2_gohref12{
	top: 19%;
}
#divarea2_gohref13{
	top: 38%;
}
#divarea2_gohref14{
	top: 57%;
}
#divarea2_gohref15{
	top: 76%;
}
#divarea2_gohref16{
	top: 95%;
}
/* 二区 */
#divarea2_gohref21{
	top: 0%;
}
#divarea2_gohref22{
	top: 19%;
}
#divarea2_gohref23{
	top: 38%;
}
#divarea2_gohref24{
	top: 57%;
}
#divarea2_gohref25{
	top: 76%;
}
#divarea2_gohref26{
	top: 95%;
}
/* 三区 */
#divarea2_gohref31{
	top: 0%;
}
#divarea2_gohref32{
	top: 19%;
}
#divarea2_gohref33{
	top: 38%;
}