@charset "utf-8";
/*zhuyan*/
/* CSS Document */
body {
/*上top下bottom左left右right*/
	/*background-color:#F05654; #8B4513马鞍棕色#D7000F中国红#F05654银红#007bff;amway蓝#fcf8e3;amway白*/
	margin: 0;
	padding: 0;
}
.logo0,.logo0-1{
	width:100%;
	height:auto;
	/*background-color:#F05654;银红*/
display: flex;
justify-content:center; /*居中*/
border-radius: 50px; /*圆角*/
}

.kfk{
	width:100%;
	height:100px;
	/*background-color:#000;*/
display: flex;
justify-content:center; /*居中*/
}



.wangan{
	width:15px;
	height:auto;
justify-content:center; //居中
}
.logo0-2{
	width:25px;
	height:auto;
	//background-color:#000;
display: flex;
justify-content:center; //居中
z-index:15;/*吸顶功能-层*/
}
.logo0-3-1,.logo0-3-2,.logo0-3-3,.logo0-3-4,.logo0-3-5,.logo0-3-6,.logo0-3-7,.logo0-3-8,.logo0-3-9,.logo0-3-10,.logo0-3-11,.logo0-3-12,.logo0-3-13,.logo0-3-14{
	padding:10px 5px 10px 5px;/*padding-内边距，margin-外边距*/
	margin:10px 5px 10px 0px;/*padding-内边距，margin-外边距*/
border-radius: 50px; /*圆角*/
}

.logo1{
	float:left;
margin-left:0.5%;
margin-bottom:0.5%;
	width:100%;
	height:auto;
	/*background-color:#FFE76F;松花（255,231,111）*/
	/* background: rgba(0, 128, 0, 0.3) ;*/
	/* 30% 不透明度的绿色背景 */
background: rgba(255,231,111, 0.3) ;
border-radius: 100px; /*圆角*/
display: flex;
justify-content:center; //居中
        position: -webkit-sticky;/*吸顶功能*/
        position: sticky;/*吸顶功能*/
        top: 15px;/*吸顶功能-距离顶部高度*/
	z-index:15;/*吸顶功能-层数*/
}

.logo1-1,.logo1-2,.logo1-3,.logo1-4,.logo1-5,.logo1-6,.logo1-7,.logo1-8,.logo1-9,.logo1-10,.logo1-11,.logo1-12,.logo1-13,.logo1-14{
	padding :10px 5px 10px 5px;/*padding-内边距，margin-外边距*/
	border-radius:50px; /*圆角*/
}

.logo1-1,.logo0-3-1{
	background-color:#01847F;/*马尔斯绿*/
}
.logo1-2,.logo0-3-2{
	background-color:#91B822;/*茶绿*/
}
.logo1-3,.logo0-3-3{
	background-color:#8BA583;/*莫兰迪绿*/
}
.logo1-4,.logo0-3-4{
	background-color:#FFE78F;/*拿波里黄*/ 
}
.logo1-5,.logo0-3-5{
	background-color:#80D1C8;/*蒂芙尼蓝*/
}
.logo1-6,.logo0-3-6{
	background-color:#E4C6D0;/*藕荷色*/
}
.logo1-7,.logo0-3-7{
	background-color:#F9D2E4;/*玫瑰粉*/
}
.logo1-8,.logo0-3-8{
	background-color:#FFE76F;/*松花*/ 
}
.logo1-9,.logo0-3-9{
	background-color:#CDA59E;/*莫兰迪粉*/
}
.logo1-10,.logo0-3-10{
	background-color:#FFE78F;/*拿波里黄*/
}
.logo1-11,.logo0-3-11{
	background-color:#F8F5D6;/*奶酪色*/
}
.logo1-12,.logo0-3-12{
	background-color:#75878A;/*苍色*/
}
.logo1-13,.logo0-3-13{
	background-color:#F2C867;/*鹅黄*/
}
.logo1-14,.logo0-3-14{
	background-color:#30AECF;/*法蓝*/
}



.logo2{
position:fixed;
bottom:0px;
right:10px;
	padding:0px;
	margin:0px;
	border-radius: 25px; /*圆角*/
}
.logo{
	float:left;
	width:150px;
	/*margin-left:40%;*/
	}
.zt-1{
	float:left;
	width:100%;
hight:auto;
display: flex;
	border-radius: 25px 0px 0px 25px; /*圆角*/

}
.zt-2{
	float:right;
	width:100%;
hight:auto;
display: flex;
	border-radius: 0px 25px 25px 0px; /*圆角*/
}



h1
{
font-size:18px;
margin:0px 0px 20px 0px;
float:left;
color: #000;/*黑色*/
   /*-webkit-text-stroke: 1px #75878A;苍色*/
}
h2
{
font-size:18px;
margin:0px 0px 0px 0px;
float:left; /*left right*/
margin-left:5px;
/*color: #000;黑色*/
  /* -webkit-text-stroke: 1px #75878A;苍色*/
 }


p{

font-size:15px;
margin:20px 0px 0px 5px;
color:#F1F2E5; /*鱼肚白*/
   -webkit-text-stroke: 0.1px #75878A;/*苍色*/

	}
a{
text-decoration:none;
color:#000; /*黑色*/
}
/*#D7000F中国红#F05654银红#007bff;amway蓝#fcf8e3;amway白*/
#1,#2,#3{
	width:100%;
	height:10px;
}
.div-x {/*logo*/
	background-color:#007bff;
	width:50%;
	height:auto;
	float:left;
margin:0px 0px 0px 0px;
	/*
	margin-left:auto;
	margin-right:auto;
	*/

	border-radius:30px 0px 0px 30px;
			}
.div-y {/*logo*/
	background-color:#fcf8e3;
	width:50%;
	height:auto;
	float:left;
margin:0px 0px 0px 0px;
	/*
	margin-left:auto;
	margin-right:auto;
	*/

	border-radius:0px 30px 30px 0px;
			}
 .div-3{/*logo*/
	//background-color:#33F;
	width:100%;
	height:auto;
	float:left;
	border-radius:30px 30px 30px 30px;
			}



.divx{
	width:100%;
	height:auto;
	//background-color:#000;
display: flex;
justify-content:center; //居中
}
.div0{
	width:1650px;
	height:auto;
	float:left;
	/*background-color:#F05654;#F05654银红#FF2121;大红#8B4513深棕色*/
	margin-top:5px ;
	margin-left:0px;
/*	display: flex;  
	justify-content:space-around; //两端对齐

//display:block; //块
display: flex;
//display:inline-flex; //内联
//justify-content:space-around; //两端对齐,和display: flex;配合使用，修改的是盒子内部的元素
//justify-content:center; //居中，和display: flex;配合使用，修改的是盒子内部的元素

*/
	}

.div1,.div2,.div3,.div4,.div5,.div6,.div7,.div8,.div9,.div10,.div11,.div12,.div13,.div14  {
border-radius: 25px; /*圆角*/
	float:left;
	width:290px;
	height:290px;
	margin-bottom:100px;
	margin-left:100px;
display: flex;
justify-content:center; /*居中*/
}

.div1-1,.div2-1,.div3-1,.div4-1,.div5-1,.div6-1,.div7-1,.div8-1,.div9-1,.div10-1,.div11-1,.div12-1,.div13-1,.div14-1{
border-radius: 25px; /*圆角*/
	width:280px;
	height:280px;
	margin-top:5px;
}
.div1{
	background-color:#F9D2E4;/*玫瑰粉*/
	}
.div2{
	background-color:#FFE76F;/*松花*/
	}
.div3{
	background-color:#CDA59E;/*莫兰迪粉*/
	}
.div4{
	background-color:#FFE78F;/*拿波里黄*/
	}
.div5{
	background-color:#F8F5D6;/*奶酪色*/
	}
.div6{
	background-color:#75878A;/*苍色*/
	}
.div7{
	background-color:#007bff;/*安利蓝*/ 
	}
.div8{
	background-color:#fcf8e3;/*安利白*/
	}
.div9{
	background-color:#007bff;/*安利蓝*/ 
	}
.div10{
	background-color:#fcf8e3;/*安利白*/
	}
.div11{
	background-color:#007bff;/*安利蓝*/ 
	}
.div12{
	background-color:#fcf8e3;/*安利白*/
	}
.div13{
	background-color:#007bff;/*安利蓝*/ 
	}
.div14{
	background-color:#fcf8e3;/*安利白*/
	}


.div1-1{
	background-color:#01847F;/*马尔斯绿*/
	}

.div2-1{
	background-color:#91B822;/*茶绿*/
	}	

.div3-1{
	background-color:#8BA583;/*莫兰迪绿*/
	}

.div4-1{
	background-color:#002FA7;/*克莱因蓝*/
	}

.div5-1{
	background-color:#80D1C8;/*蒂芙尼蓝*/
	}
.div6-1{
	background-color:#E4C6D0;/*藕荷色*/
	}
.div7-1{
	background-color:#F9D2E4;/*玫瑰粉*/
	}
.div8-1{
	background-color:#FFE76F;/*松花*/ 
	}
.div9-1{
	background-color:#CDA59E;/*莫兰迪粉*/
	}
.div10-1{
	background-color:#FFE78F;/*拿波里黄*/
	}
.div11-1{
	background-color:#F8F5D6;/*奶酪色*/
	}
.div12-1{
	background-color:#75878A;/*苍色*/
	}
.div13-1{
	background-color:#F2C867;/*鹅黄*/
	}
.div14-1{
	background-color:#30AECF;/*法蓝*/
	}

.tp{/*图片*/
	width:100%;
	height:100%;
	float:left;
	/*object-fit: scale-down;保持原有尺寸比例。内容的尺寸与 none 或 contain 中的一个相同，取决于它们两个之间谁得到的对象尺寸会更小一些。|cover 保持原有尺寸比例。但部分内容可能被剪切。 */
	object-fit: cover;
	margin-right:auto;
	background-color:#FF2121;
	border-radius: 25px; /*圆角*/
	}

.beian{
float:left;
width:100%;

}
/*旧的居中策略，不适应响应式布局
.beian{
float:left;
margin-left:40%;
}
*/

<!--********************** 伪类开始***********************************-->
/* unvisited link 未访问的链接-首页目前暂时用不上*/
a:link {
    color: #000;/*黑色*/
}

/* visited link已访问链接 */
a:visited {
    color: #FF8C00;/*8B4513;马鞍棕色，#FF8C00;深橙色#D7000F中国红*/     

}

/* mouse over link 鼠标悬停链接*/
a:hover {/*先要有a标签的伪类，不然没反应*/

 color: #F1F2E5; /red*鱼肚白*/
}

.zd:hover,.logo1-1:hover,.logo1-2:hover,.logo1-3:hover,.logo1-4:hover,.logo1-5:hover,.logo1-6:hover,.logo1-7:hover,.logo1-8:hover,.logo1-9:hover,.logo1-10:hover,.logo1-11:hover,.logo1-12:hover,.logo1-13:hover,.logo1-14:hover,.logo0-3-1:hover,.logo0-3-2:hover,.logo0-3-3:hover,.logo0-3-4:hover,.logo0-3-5:hover,.logo0-3-6:hover,.logo0-3-7:hover,.logo0-3-8:hover,.logo0-3-9:hover,.logo0-3-10:hover,.logo0-3-11:hover,.logo0-3-12:hover,.logo0-3-13:hover,.logo0-3-14:hover{
	background-color:#000;/*黑色*/
}

.zd:hover,.logo1:hover,.logo1-1:hover,.logo1-2:hover,.logo1-3:hover,.logo1-4:hover,.logo1-5:hover,.logo1-6:hover,.logo1-7:hover,.logo1-8:hover,.logo1-9:hover,.logo1-10:hover,.logo1-11:hover,.logo1-12:hover,.logo1-13:hover,.logo1-14:hover,.logo0-3-1:hover,.logo0-3-2:hover,.logo0-3-3:hover,.logo0-3-4:hover,.logo0-3-5:hover,.logo0-3-6:hover,.logo0-3-7:hover,.logo0-3-8:hover,.logo0-3-9:hover,.logo0-3-10:hover,.logo0-3-11:hover,.logo0-3-12:hover,.logo0-3-13:hover,.logo0-3-14:hover{
transform:scale(1,1.05);/*图片和DIV放大缩小*/
}
img:hover{
transform:scale(1.05,1.05);/*图片和DIV放大缩小*/
}
.div1:hover{
	background-color:#01847F;/*马尔斯绿*/
	}
.div2:hover{
	background-color:#91B822;/*茶绿*/
	}
.div3:hover{
	background-color:#8BA583;/*莫兰迪绿*/
	}
.div4:hover{
	background-color:#002FA7;/*克莱因蓝*/
	}
.div5:hover{
	background-color:#80D1C8;/*蒂芙尼蓝*/
	}
.div6:hover{
	background-color:#E4C6D0;/*藕荷色*/
	}
.div7:hover{
	background-color:#F9D2E4;/*玫瑰粉*/
	}
.div8:hover{
	background-color:#FFE76F;/*松花*/ 
	}
.div9:hover{
	background-color:#CDA59E;/*莫兰迪粉*/
	}
.div10:hover{
	background-color:#FFE78F;/*拿波里黄*/
	}
.div11:hover{
	background-color:#F8F5D6;/*奶酪色*/
	}
.div12:hover{
	background-color:#75878A;/*苍色*/
	}
.div13:hover{
	background-color:#F2C867;/*鹅黄*/
	}
.div14:hover{
	background-color:#30AECF;/*法蓝*/
	}


/* selected link 选定的链接(鼠标按下未松开）红色*/
a:active {
    color: #0000FF ;/*蓝色*/
}
.zd:active,img:active,.logo1-1:active,.logo1-2:active,.logo1-3:active,.logo1-4:active,.logo1-5:active,.logo1-6:active,.logo1-7:active,.logo1-8:active,.logo1-9:active,.logo1-10:active,.logo1-11:active,.logo1-12:active,.logo1-13:active,.logo1-14:active,.logo2:active,.logo0-3-1:active,.logo0-3-2:active,.logo0-3-3:active,.logo0-3-4:active,.logo0-3-5:active,.logo0-3-6:active,.logo0-3-7:active,.logo0-3-8:active,.logo0-3-9:active,.logo0-3-10:active,.logo0-3-11:active,.logo0-3-12:active,.logo0-3-13:active,.logo0-3-14:active{
transform:scale(0.98,0.98);/*图片放大缩小*/
 background-color: #D7000F;/*中国红*/
}
.div1:active,.div2:active,.div3:active,.div4:active,.div5:active,.div6:active,.div7:active,.div8:active,.div9:active,.div10:active,.div11:active,.div12:active,.div13:active,.div14:active{

 background-color: #D7000F;/*中国红*/
}

/*(css中不用“<!---->”做备注)*/
/*<!--********************** 伪类结尾***********************************-->*/
 /*************************响应式布局*****************************/


@media only screen and (max-width: 1665px) {
.div0{
	width:1250px;
	margin-left:65px;
	}
.div1,.div2,.div3,.div4,.div5,.div6,.div7,.div8,.div9,.div10,.div11,.div12,.div13,.div14  {
	margin-bottom:5px;
	margin-left:5px;
	}


}


@media only screen and (max-width: 1400px) {
.div0{
	width:1000px;
	margin-left:40px;
	}
.div1,.div2,.div3,.div4,.div5,.div6,.div7,.div8,.div9,.div10,.div11,.div12,.div13,.div14 {
	margin-bottom:20px;
	margin-left:20px;
	}

}

@media only screen and (max-width: 1100px) {
.div0{
	width:800px;
	margin-left:0px;
	}
.div1,.div2,.div3,.div4,.div5,.div6,.div7,.div8,.div9,.div10,.div11,.div12,.div13,.div14 {
	margin-bottom:73px;
	margin-left:73px;
	}
h1
{
font-size:12px;
}
h2
{
font-size:12px;
margin-left:0px;
}
.logo0-2{
	width:15px;
}

}

@media only screen and (max-width: 800px) {
.div0{
	width:700px;
	margin-left:0px;
	}

.div1,.div2,.div3,.div4,.div5,.div6,.div7,.div8,.div9,.div10,.div11,.div12,.div13,.div14 {
	width:350px;
	height:350px;
	margin-bottom:5px;
	margin-left:0px;
	}
.div1-1,.div2-1,.div3-1,.div4-1,.div5-1,.div6-1,.div7-1,.div8-1,.div9-1,.div10-1,.div11-1,.div12-1,.div13-1,.div14-1{
	width:340px;
	height:340px;
}

}
@media only screen and (max-width: 750px) {
.div0{
	width:350px;
	margin-left:0px;
	}
.div1,.div2,.div3,.div4,.div5,.div6 {
	width:350px;
	height:350px;
	margin-bottom:5px;
	margin-left:0px;
	}
.div1 .div1-1,.div2 .div2-1,.div3 .div3-1,.div4 .div4-1,.div5 .div5-1,.div6 .div6-1,.div7 .div7-1,.div8 .div8-1,.div9 .div9-1,.div10 .div10-1,.div11 .div11-1,.div12 .div12-1,.div13 .div13-1,.div14 .div14-1{
	width:340px;
	height:340px;
}

h1
{
font-size:12px;
}
h2
{
font-size:12px;
margin-left:0px;
}
.logo0-2{
	width:15px;
}
}

@media only screen and (max-width: 420px) {
.logo1,.logo1-1,.logo1-2,.logo1-3,.logo1-4,.logo1-5,.logo1-6,.logo1-7,.logo1-8,.logo1-9,.logo1-10,.logo1-11,.logo1-12,.logo1-13,.logo1-14,.logo2{
padding:0px;
}
}
@media only screen and (max-width: 350px) {
.div0{
	width:300px;
	margin-left:-20px;
	}
.div1,.div2,.div3,.div4,.div5,.div6 {
	width:250px;
	height:250px;
	margin-bottom:5px;
	margin-left:35px;
	}
.div1 .div1-1,.div2 .div2-1,.div3 .div3-1,.div4 .div4-1,.div5 .div5-1,.div6 .div6-1{
	width:240px;
	height:240px;
}
h2
{

margin-left:6px;
margin-top:6px;
}
p{
font-size:12px;
	}
 .div-3,.div-x,.div-y {
		
		 width:100%;
	border-radius:30px;
			}
}
@media only screen and (max-width: 250px) {
.div0{
	width:190px;
	margin-left:0px;
	}
.div1,.div2,.div3,.div4,.div5,.div6 {
	width:190px;
	height:190px;
	margin-bottom:5px;
	margin-left:0px;
	}
.div1 .div1-1,.div2 .div2-1,.div3 .div3-1,.div4 .div4-1,.div5 .div5-1,.div6 .div6-1{
	width:180px;
	height:180px;
}
h1
{
font-size:12px;
}
h2
{
font-size:8px;
}

.logo0-3-1,.logo0-3-2,.logo0-3-3,.logo0-3-4,.logo0-3-5,.logo0-3-6,.logo0-3-7,.logo0-3-8,.logo0-3-9,.logo0-3-10,.logo0-3-11,.logo0-3-12,.logo0-3-13,.logo0-3-14{
	padding:0px;/*padding-内边距，margin-外边距*/
	margin:0px;/*padding-内边距，margin-外边距*/

}


}
@media only screen and (max-width: 249px) {
.div0{
	width:130px;
	margin-left:-170px;
	}
.div1,.div2,.div3,.div4,.div5,.div6 {
	width:160px;
	height:160px;
	margin-bottom:5px;
	margin-left:70px;
	}
.div1 .div1-1,.div2 .div2-1,.div3 .div3-1,.div4 .div4-1,.div5 .div5-1,.div6 .div6-1{
	width:150px;
	height:150px;
}
h1
{
font-size:12px;
}
h2
{
font-size:12px;
margin-left:0px;
}
p{
font-size:6px;
margin-left:2px;
	}

.logo1,.logo1-1,.logo1-2,.logo1-3,.logo1-4,.logo1-5,.logo1-6,.logo1-7,.logo1-8,.logo1-9,.logo1-10,.logo1-11,.logo1-12,.logo1-13,.logo1-14{
display:none/*隐藏元素*/
}
}

@media only screen and (max-width: 150px) {

.div0{
	width:160px;
	margin-left:0px;
	}
.div1,.div2,.div3,.div4,.div5,.div6 {
	width:150px;
	height:150px;
	margin-bottom:5px;
	margin-left:0px;
	}
.div1 .div1-1,.div2 .div2-1,.div3 .div3-1,.div4 .div4-1,.div5 .div5-1,.div6 .div6-1{
	width:140px;
	height:140px;
}
h1
{
font-size:5px;
}
h2
{
font-size:5px;
margin-left:0px;
}
}

/*
//display:block; //块
display: flex;
//display:inline-flex; //内联
//justify-content:space-around; //两端对齐
//justify-content:center; //居中
*/