.box {

	width: 240px;

	height: 350px;

	padding: 0 30px;

	position: relative;

	background: rgba(255,215,0,0.5);

	display: inline-block;

	margin: 0 20px;

	cursor: pointer;

	color: #2c3e50;

	box-shadow: inset 0 0 0 2px #2c3e50;

	-webkit-transition: background 0.4s 0.5s;

	transition: background 0.4s 0.5s;

}

.demo-1{

	margin-top: 150px;

}

.box:hover {

	background: rgba(255,255,255,0);

	-webkit-transition-delay: 0s;

	transition-delay: 0s;

}



.box h2 {



	font-size: 30px;

	line-height: 50px;

	color: #fff;



	width: 100%;

}



.box span {

	display: block;

	font-weight: 400;

	

	letter-spacing: 1px;

	font-size: 16px;

	line-height: 30px;

	color: #fff;

	text-align: left;

	padding: 5px;

}



.box h3,

.box span {

	-webkit-transition: color 0.4s 0.5s;

	transition: color 0.4s 0.5s;

}



.box:hover h3,

.box:hover span {

	color: #fff;

	-webkit-transition-delay: 0s;

	transition-delay: 0s;

}



.box svg {

	position: absolute;

	top: 0;

	left: 0;

}



.box svg line {

	stroke-width: 3;

	stroke: #ffd700;

	fill: none;

	-webkit-transition: all .8s ease-in-out;

	transition: all .8s ease-in-out;

}



.box:hover svg line {

	-webkit-transition-delay: 0.1s;

	transition-delay: 0.1s;

}



.box svg line.top,

.box svg line.bottom {

	stroke-dasharray: 330 240; 

}



.box svg line.left,

.box svg line.right {

	stroke-dasharray: 490 400;

}



.box:hover svg line.top {

	-webkit-transform: translateX(-600px);

	transform: translateX(-600px);

}



.box:hover svg line.bottom {

	-webkit-transform: translateX(600px);

	transform: translateX(600px);

}



.box:hover svg line.left {

	-webkit-transform: translateY(920px);

	transform: translateY(920px);

}



.box:hover svg line.right {

	-webkit-transform: translateY(-920px);

	transform: translateY(-920px);

}



/* Alternatives */



/* Color */

.demo-2 .box {

	box-shadow: inset 0 0 0 10px #2c3e50;

}



.demo-2 .box:hover h3,

.demo-2 .box:hover span {

	color: #fe6f83;

}



.demo-2 .box svg line {

	stroke-width: 8;

}



.demo-2 .box:hover svg line {

	stroke: #fe6f83;

}



/* Frame */

.demo-3 .box {

	background: rgba(0,0,0,0);

	color: #fff;

	box-shadow: none;

	-webkit-transition: background 0.3s;

	transition: background 0.3s;

}



.demo-3 .box:hover {

	background: rgba(0,0,0,0.4);

}



.demo-3 .box h3,

.demo-3 .box span {

	-webkit-transition: none;

	transition: none;

}



.demo-3 .box svg line {

	-webkit-transition: all .5s;

	transition: all .5s;

}



.demo-3 .box:hover svg line {

	stroke-width: 10;

	-webkit-transition-delay: 0s;

	transition-delay: 0s;

}



.demo-3 .box:hover svg line.top {

	-webkit-transform: translateX(-300px);

	transform: translateX(-300px);

}



.demo-3 .box:hover svg line.bottom {

	-webkit-transform: translateX(300px);

	transform: translateX(300px);

}



.demo-3 .box:hover svg line.left {

	-webkit-transform: translateY(460px);

	transform: translateY(460px);

}



.demo-3 .box:hover svg line.right {

	-webkit-transform: translateY(-460px);

	transform: translateY(-460px);

}



/* Spin */

.demo-4 .box {

	box-shadow: none;

	background: rgba(0,0,0,0.4);

	-webkit-transition: none;

	transition: none;

	color: #fff;

}



.demo-4 .box h3,

.demo-4 .box span {

	-webkit-transform: scale(0.9);

	transform: scale(0.9);

	-webkit-backface-visibility: hidden;

	backface-visibility: hidden;

	-webkit-transition: -webkit-transform 0.5s;

	transition: transform 0.5s;

}



.demo-4 .box:hover h3,

.demo-4 .box:hover span {

	-webkit-transform: scale(1);

	transform: scale(1);

}



.demo-4 .box svg line {

	stroke-width: 30;

	-webkit-transition: all .4s;

	transition: all .4s;

}



.demo-4 .box:hover svg line {

	-webkit-transition-delay: 0s;

	transition-delay: 0s;

}



.demo-4 .box:hover svg line {

	stroke-width: 0;

}



.demo-4 .box svg line.top,

.demo-4 .box svg line.bottom {

	stroke-dasharray: 300; 

}



.demo-4 .box svg line.left,

.demo-4 .box svg line.right {

	stroke-dasharray: 460;

}



.demo-4 .box:hover svg line.top {

	-webkit-transform: translateX(-300px);

	transform: translateX(-300px);

}



.demo-4 .box:hover svg line.bottom {

	-webkit-transform: translateX(300px);

	transform: translateX(300px);

}



.demo-4 .box:hover svg line.left {

	-webkit-transform: translateY(460px);

	transform: translateY(460px);

}



.demo-4 .box:hover svg line.right {

	-webkit-transform: translateY(-460px);

	transform: translateY(-460px);

}





@media (max-width:1230px){

	section {

		padding: 0em 0em;}

	.container{

		padding: 0;

	}.box{

		margin: 0 10px;

	}

	

}





@media (max-width:1070px){

	.box{

		width: 170px;margin: 0 5px;

		height: 350px;

	padding: 0 10px;}

	

	.box:nth-child(2){

		top:-200px!important;

	}

	.box:nth-child(4){

		top:-40px!important;

	}

	

	

}<!--ºÄʱ1756491620.8062Ãë-->