body {
	height: 100vh;
	background: #0F2027;
	background: linear-gradient(10deg, #2C5364, #203A43, #0F2027);
	font-family: 'Jua', sans-serif;
}
.hover_wrap {
	display: flex; 
	justify-content: center; 
	align-items: center;
	height: 100vh;
}
.hover_wrap figure {
    position: relative;
    width: 400px;
    margin: 10px;
    cursor: pointer;
    background-image: linear-gradient(45deg, #874da2, #c43a30);
    overflow: hidden;
}
/*가상요소*/
.hover_wrap figure.hover3::before {content: '';
    width: 60px;
    height: 1px;
    background: #fff;
    position:absolute;
    left: 100%; top: 50%; z-index:1;
    transform: translate(-50%, -50%);
    transition: all 0.3s ease;
    opacity: 0;}
.hover_wrap figure.hover3::after {content: '';
    width: 1px;
    height: 60px;
    background: #fff;
    position:absolute;
    left: 50%; top: 0; z-index:1;
    transform: translate(-50%, -50%);
    transition: all 0.3s ease;
    opacity: 0;}
.hover_wrap figure.hover4::before {content: '';
    width: 60px;
    height: 1px;
    background: #fff;
    position:absolute;
    left: 0%; top: 50%; z-index:1;
    transform: translate(-50%, -50%);
    transition: all 0.3s ease;
    opacity: 0;}
.hover_wrap figure.hover4::after {content: '';
    width: 1px;
    height: 60px;
    background: #fff;
    position:absolute;
    left: 50%; top: 100%; z-index:1;
    transform: translate(-50%, -50%);
    transition: all 0.3s ease;
    opacity: 0;}
.hover_wrap figure img {
    width: 100%;
    display: block; /* 인라인 구조 없애서 여백 없애기 */
    /* opacity: 0.3; */
    transition: all 0.3s ease;
}

/* media query */
@media (max-width: 800px) {
    .hover_wrap {flex-direction: column;}
}

/* hover wrap */
.hover_wrap figure.hover3:hover img {opacity: 0.6;}
.hover_wrap figure.hover3:hover::before {left:50%; opacity: 1;}
.hover_wrap figure.hover3:hover::after {top:50%; opacity: 1;}
.hover_wrap figure.hover4:hover img {opacity: 0.6;}
.hover_wrap figure.hover4:hover::before {left:50%; opacity: 1;}
.hover_wrap figure.hover4:hover::after {top:50%; opacity: 1;}