@font-face {
    font-family: 'Spoqa Han Sans';
    font-weight: 700;
    src: local('Spoqa Han Sans Bold'),
    url('../2020/assets/fonts/SpoqaHanSansBold.woff2') format('woff2'),
    url('../2020/assets/fonts/SpoqaHanSansBold.woff') format('woff'),
    url('../2020/assets/fonts/SpoqaHanSansBold.ttf') format('truetype'),
}

@font-face {
    font-family: 'Spoqa Han Sans';
    font-weight: 400;
    src: local('Spoqa Han Sans Regular'),
    url('../2020/assets/fonts/SpoqaHanSansRegular.woff2') format('woff2'),
    url('../2020/assets/fonts/SpoqaHanSansRegular.woff') format('woff'),
    url('../2020/assets/fonts/SpoqaHanSansRegular.ttf') format('truetype');
}

@font-face {
    font-family: 'Spoqa Han Sans';
    font-weight: 300;
    src: local('Spoqa Han Sans Light'),
    url('../2020/assets/fonts/SpoqaHanSansLight.woff2') format('woff2'),
    url('../2020/assets/fonts/SpoqaHanSansLight.woff') format('woff'),
    url('../2020/assets/fonts/SpoqaHanSansLight.ttf') format('truetype');
}

@font-face {
    font-family: 'Spoqa Han Sans';
    font-weight: 100;
    src: local('Spoqa Han Sans Thin'),
    url('../2020/assets/fonts/SpoqaHanSansThin.woff2') format('woff2'),
    url('../2020/assets/fonts/SpoqaHanSansThin.woff') format('woff'),
    url('../2020/assets/fonts/SpoqaHanSansThin.ttf') format('truetype');
}


/* container */
.wrapper{
	display: flex;
    flex-direction: column;
    font-family: 'Spoqa Han Sans', 'Sans-serif'; 
}
.container{
	display: flex;
	flex-wrap: wrap;
	flex-direction: row;
	align-items: center;
	justify-content: space-between;
}

.item{
	width: 14vw;
    height: auto;
	transition: all .4s;
}
.container a:hover .item{
    opacity: .3;

	/* -webkit-filter: invert(1);
	filter: invert(1); */
}
.container .text {
    padding: 15px 20px;
    width: 14vw;
    height: 70px;
    background-color: #ffd50099;
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: center;
    box-sizing: border-box;
    font-family: 'Spoqa Han Sans', 'Sans-serif'; 
}
.container .text em {
    font-weight: bold;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.container .text p {
    font-weight: 100;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
	font-family: 'Spoqa Han Sans', 'Sans-serif'; 
}


@media only screen and (max-width: 1400px) {
	.item {
        width: 19vw;
    }
    .container .text {
        width: 19vw;
    }
}
@media only screen and (max-width: 1000px) {
	.item {
        width: 25vw;
    }
    .container .text {
        width: 25vw;
    }
}
@media only screen and (max-width: 640px) {
	.item {
        width: 40vw;
    }
    .container .text {
        width: 40vw;
    }
}