.button_box{float: left; margin-top: 90px; margin-bottom: 50px; width: 335px;}

.button_link{float: left;position:relative;width: 200px; height: 200px; margin: 0 100px;}
.button_link h3{font-size: 16px; text-align: center; margin-top: 220px; font-weight: bold; color: #e7141a;}
.button_link h2{ border: 2px solid #e7141a; border-radius: 50%; background: #FFF; padding: 30px; position: absolute; z-index: 9; cursor: pointer;}
.button_link h2 img{max-width: 100%;transition: all 0.5s;}
.button_link h2 img:hover{transform:scale(1.1);}
.button_link li{}
.button_link a span{ color: #e7141a;}
.button_link .line{
	display: flex;
	align-items: center;
	justify-content: center;
	 width: 120px;
	 height: 120px;
	 border-radius: 50%;
	 line-height: 20px;
     padding: 10px;
	 text-align: center;
	background:#FFF;
	border: 1px solid #e7141a; 
	position:absolute;
	-webkit-transition:0.5s ease;
	-o-transition:0.5s ease;
	transition:0.5s ease; 
	z-index: 1;
	font-weight: normal;
	}

.button_link li:nth-of-type(1) span{left:40px;top:30px;}
.button_link:hover li:nth-of-type(1) span{top:-80px;left:-90px;}

.button_link li:nth-of-type(2) span{left:40px;top:30px;}
.button_link:hover li:nth-of-type(2) span{top:-80px; left:170px;}

.button_link li:nth-of-type(3) span{left:40px;top:30px; }
.button_link:hover li:nth-of-type(3) span{top:160px; left:-90px;}

.button_link li:nth-of-type(4) span{left:40px;top:30px; }
.button_link:hover li:nth-of-type(4) span{top:160px; left:170px;}

.button_link li:nth-of-type(5) span{left:40px;top:30px; }
.button_link:hover li:nth-of-type(5) span{top:40px; left:-125px;}

.button_link li:nth-of-type(6) span{left:40px;top:30px; }
.button_link:hover li:nth-of-type(6) span{top:40px; left:210px;}



/* 蓝色圈 */

.button_link_blue{float: left;position:relative;width: 200px; height: 200px; margin: 0 100px;}
.button_link_blue h3{font-size: 16px; text-align: center; margin-top: 220px; font-weight: bold; color: #3c94de;}
.button_link_blue h2{ border: 2px solid #3c94de; border-radius: 50%; background: #FFF; padding: 30px; position: absolute; z-index: 9; cursor: pointer;}
.button_link_blue h2 img{max-width: 100%;transition: all 0.5s;}
.button_link_blue h2 img:hover{transform:scale(1.1);}
.button_link_blue li{}
.button_link_blue a span{ color: #3c94de;}
.button_link_blue .line{
	display: flex;
	align-items: center;
	justify-content: center;
	 width: 120px;
	 height: 120px;
	 border-radius: 50%;
	 line-height: 20px;
     padding: 10px;
	 text-align: center;
	background:#FFF;
	border: 1px solid #3c94de; 
	position:absolute;
	-webkit-transition:0.5s ease;
	-o-transition:0.5s ease;
	transition:0.5s ease; 
	z-index: 1;
	font-weight: normal;
	}

.button_link_blue li:nth-of-type(1) span{left:40px;top:30px;}
.button_link_blue:hover li:nth-of-type(1) span{top:-80px;left:-90px;}

.button_link_blue li:nth-of-type(2) span{left:40px;top:30px;}
.button_link_blue:hover li:nth-of-type(2) span{top:-80px; left:170px;}



/* 黄色圈 */

.button_link_yellow{float: left;position:relative;width: 200px; height: 200px; margin: 0 100px;}
.button_link_yellow h3{font-size: 16px; text-align: center; margin-top: 220px; font-weight: bold; color: #ef7b0b;}
.button_link_yellow h2{ border: 2px solid #ef7b0b; border-radius: 50%; background: #FFF; padding: 30px; position: absolute; z-index: 9; cursor: pointer;}
.button_link_yellow h2 img{max-width: 100%;transition: all 0.5s;}
.button_link_yellow h2 img:hover{transform:scale(1.1);}
.button_link_yellow li{}
.button_link_yellow a span{ color: #ef7b0b;}
.button_link_yellow .line{
	display: flex;
	align-items: center;
	justify-content: center;
	 width: 120px;
	 height: 120px;
	 border-radius: 50%;
	 line-height: 20px;
     padding: 10px;
	 text-align: center;
	background:#FFF;
	border: 1px solid #ef7b0b; 
	position:absolute;
	-webkit-transition:0.5s ease;
	-o-transition:0.5s ease;
	transition:0.5s ease; 
	z-index: 1;
	font-weight: normal;
	}


.button_link_yellow li:nth-of-type(1) span{left:40px;top:30px;}
.button_link_yellow:hover li:nth-of-type(1) span{top:-80px;left:-90px;}

.button_link_blue li:nth-of-type(2) span{left:40px;top:30px;}
.button_link_blue:hover li:nth-of-type(2) span{top:-80px; left:170px;}



/* 绿色圈 */

.button_link_green{float: left;position:relative;width: 200px; height: 200px; margin: 0 100px;}
.button_link_green h3{font-size: 16px; text-align: center; margin-top: 220px; font-weight: bold; color: #6dc118;}
.button_link_green h2{ border: 2px solid #6dc118; border-radius: 50%; background: #FFF; padding: 30px; position: absolute; z-index: 9; cursor: pointer;}
.button_link_green h2 img{max-width: 100%;transition: all 0.5s;}
.button_link_green h2 img:hover{transform:scale(1.1);}
.button_link_green li{}
.button_link_green a span{ color: #6dc118;}
.button_link_green .line{
	display: flex;
	align-items: center;
	justify-content: center;
	 width: 120px;
	 height: 120px;
	 border-radius: 50%;
	 line-height: 20px;
     padding: 10px;
	 text-align: center;
	background:#FFF;
	border: 1px solid #6dc118; 
	position:absolute;
	-webkit-transition:0.5s ease;
	-o-transition:0.5s ease;
	transition:0.5s ease; 
	z-index: 1;
	font-weight: normal;
	}

.button_link_green li:nth-of-type(1) span{left:40px;top:30px;}
.button_link_green:hover li:nth-of-type(1) span{top:-80px;left:-90px;}

.button_link_green li:nth-of-type(2) span{left:40px;top:30px;}
.button_link_green:hover li:nth-of-type(2) span{top:-80px; left:170px;}

.button_link_green li:nth-of-type(3) span{left:40px;top:30px; }
.button_link_green:hover li:nth-of-type(3) span{top:160px; left:-90px;}

.button_link_green li:nth-of-type(4) span{left:40px;top:30px; }
.button_link_green:hover li:nth-of-type(4) span{top:160px; left:170px;}


.button_link_green li:nth-of-type(5) span{left:40px;top:30px; }
.button_link_green:hover li:nth-of-type(5) span{top:40px; left:-125px;}

.button_link_green li:nth-of-type(6) span{left:40px;top:30px; }
.button_link_green:hover li:nth-of-type(6) span{top:40px; left:210px;}



/* 紫色圈 */

.button_link_purple{float: left;position:relative;width: 200px; height: 200px; margin: 0 100px;}
.button_link_purple h3{font-size: 16px; text-align: center; margin-top: 220px; font-weight: bold; color: #bd05c4;}
.button_link_purple h2{ border: 2px solid #bd05c4; border-radius: 50%; background: #FFF; padding: 30px; position: absolute; z-index: 9; cursor: pointer;}
.button_link_purple h2 img{max-width: 100%;transition: all 0.5s;}
.button_link_purple h2 img:hover{transform:scale(1.1);}
.button_link_purple li{}
.button_link_purple a span{ color: #bd05c4;}
.button_link_purple .line{
	display: flex;
	align-items: center;
	justify-content: center;
	 width: 120px;
	 height: 120px;
	 border-radius: 50%;
	 line-height: 20px;
     padding: 10px;
	 text-align: center;
	background:#FFF;
	border: 1px solid #bd05c4; 
	position:absolute;
	-webkit-transition:0.5s ease;
	-o-transition:0.5s ease;
	transition:0.5s ease; 
	z-index: 1;
	font-weight: normal;
	}

.button_link_purple li:nth-of-type(1) span{left:40px;top:30px;}
.button_link_purple:hover li:nth-of-type(1) span{top:-80px;left:-90px;}

.button_link_purple li:nth-of-type(2) span{left:40px;top:30px;}
.button_link_purple:hover li:nth-of-type(2) span{top:-80px; left:170px;}

.button_link_purple li:nth-of-type(3) span{left:40px;top:30px; }
.button_link_purple:hover li:nth-of-type(3) span{top:160px; left:-90px;}

.button_link_purple li:nth-of-type(4) span{left:40px;top:30px; }
.button_link_purple:hover li:nth-of-type(4) span{top:160px; left:170px;}


.button_link_purple li:nth-of-type(5) span{left:40px;top:30px; }
.button_link_purple:hover li:nth-of-type(5) span{top:40px; left:-125px;}

.button_link_purple li:nth-of-type(6) span{left:40px;top:30px; }
.button_link_purple:hover li:nth-of-type(6) span{top:40px; left:210px;}


@media (min-width:768px) and (max-width:1023px) {
	

.button_box{width: 340px;}
	
}

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

.button_box{width: 100%;}

.button_link{width: 150px; height: 150px;}
.button_link h3{margin-top: 170px;}



.button_link li:nth-of-type(1) span{left:10px;top:20px;}
.button_link:hover li:nth-of-type(1) span{top:-80px;left:-90px;}

.button_link li:nth-of-type(2) span{left:10px;top:20px;}
.button_link:hover li:nth-of-type(2) span{top:-80px; left:120px;}

.button_link li:nth-of-type(3) span{left:10px;top:20px; }
.button_link:hover li:nth-of-type(3) span{top:160px; left:-90px;}

.button_link li:nth-of-type(4) span{left:10px;top:20px; }
.button_link:hover li:nth-of-type(4) span{top:160px; left:120px;}

.button_link li:nth-of-type(5) span{left:10px;top:20px; }
.button_link:hover li:nth-of-type(5) span{top:40px; left:-125px;}
/* 
.button_link li:nth-of-type(6) span{left:10px;top:20px; }
.button_link:hover li:nth-of-type(6) span{top:40px; left:150px;}

button_link_blue */

.button_link_blue{width: 150px; height: 150px;}
.button_link_blue h3{margin-top: 170px;}

.button_link_blue li:nth-of-type(1) span{left:10px;top:20px;}
.button_link_blue:hover li:nth-of-type(1) span{top:-80px;left:-90px;}

.button_link_blue li:nth-of-type(2) span{left:10px;top:20px;}
.button_link_blue:hover li:nth-of-type(2) span{top:-80px; left:120px;}


/* button_link_green */

.button_link_green{width: 150px; height: 150px;}
.button_link_green h3{margin-top: 170px;}

.button_link_green li:nth-of-type(1) span{left:10px;top:20px;}
.button_link_green:hover li:nth-of-type(1) span{top:-80px;left:-90px;}

.button_link_green li:nth-of-type(2) span{left:10px;top:20px;}
.button_link_green:hover li:nth-of-type(2) span{top:-80px; left:120px;}

.button_link_green li:nth-of-type(3) span{left:10px;top:20px; }
.button_link_green:hover li:nth-of-type(3) span{top:120px; left:-90px;}

.button_link_green li:nth-of-type(4) span{left:10px;top:20px; }
.button_link_green:hover li:nth-of-type(4) span{top:120px; left:120px;}


.button_link_green li:nth-of-type(5) span{left:10px;top:20px; }
.button_link_green:hover li:nth-of-type(5) span{top:20px; left:-125px;}

.button_link_green li:nth-of-type(6) span{left:10px;top:20px; }
.button_link_green:hover li:nth-of-type(6) span{top:20px; left:155px;}


/* button_link_purple */

.button_link_purple{width: 150px; height: 150px;}
.button_link_purple h3{margin-top: 170px;}

.button_link_purple li:nth-of-type(1) span{left:10px;top:20px;}
.button_link_purple:hover li:nth-of-type(1) span{top:-80px;left:-90px;}

.button_link_purple li:nth-of-type(2) span{left:10px;top:20px;}
.button_link_purple:hover li:nth-of-type(2) span{top:-80px; left:120px;}

.button_link_purple li:nth-of-type(3) span{left:10px;top:20px; }
.button_link_purple:hover li:nth-of-type(3) span{top:120px; left:-90px;}

.button_link_purple li:nth-of-type(4) span{left:10px;top:20px; }
.button_link_purple:hover li:nth-of-type(4) span{top:120px; left:120px;}


.button_link_purple li:nth-of-type(5) span{left:10px;top:20px; }
.button_link_purple:hover li:nth-of-type(5) span{top:20px; left:-125px;}

.button_link_purple li:nth-of-type(6) span{left:10px;top:20px; }
.button_link_purple:hover li:nth-of-type(6) span{top:20px; left:155px;}


/*
 button_link_yellow */

.button_link_yellow{width: 150px; height: 150px;}
.button_link_yellow h3{margin-top: 170px;}


.button_link_yellow li:nth-of-type(1) span{left:10px;top:20px;}
.button_link_yellow:hover li:nth-of-type(1) span{top:-80px;left:-90px;}

.button_link_yellow li:nth-of-type(2) span{left:10px;top:20px;}
.button_link_yellow:hover li:nth-of-type(2) span{top:-80px; left:120px;}

}