@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@100;300;400;500;700&display=swap');

* {box-sizing:border-box;}

body {
	margin:0;
	padding:0;
	background:#000000;
	font-family: 'Roboto', sans-serif;
	color:#FCF49D;
}

.logo {
	width:250px;
	margin:0 auto;
	margin-top:40px;
	margin-bottom:70px;
	position:relative;
	/*left:50%;
	top:50%;
	transform:translate(-50%,-50%);*/
}

.logo img {
	width:250px;
}

.flex-box {display:flex;align-items:center;flex-wrap:wrap;max-width:1200px;position:relative;margin:0 auto;padding:0px 15px 50px 15px;}
.flex-box.normal {align-items:inherit;}
.flex-box .detail-left {width:50%;padding-right:50px;}
.flex-box .detail-left a {background:#DC0813;color:#FCF49D;text-decoration:none;display:inline-block;padding:8px 12px;transition:.2s all;}
.flex-box .detail-left a:hover {opacity:.7;}
.flex-box .detail-left h1 {font-size:26px;font-weight:500;width:100%;display:block;border-bottom:solid 1px #fcf49d1f;margin-bottom:20px;padding-bottom:20px;}
.flex-box .detail-left .divider {width:100%;position:relative;border-bottom:solid 1px #fcf49d1f;margin-bottom:20px;padding-bottom:20px;}
.flex-box .detail-left p {margin-bottom:0px;}
.flex-box .detail-left p.opa {opacity:.6;}
.flex-box .detail-right {width:50%;}
.flex-box .detail-right img {width:100%;}
.flex-box .box {width:23%;margin-right:2%;margin-bottom:40px;}
.flex-box .box:nth-child(4n+4) {margin-right:0%;}
.flex-box .box a {text-decoration:none;}
.flex-box .box a img {object-fit:cover;width:100%;height:170px;margin-bottom:10px;}
.flex-box .box a span {color:#FCF49D;font-size:16px;}

@media (max-width:991px) {
	.flex-box .box {width:32%;margin-right:2%;}
	.flex-box .detail-left {padding-right:30px;}
	.flex-box .detail-left h1 {font-size:22px;}
	.flex-box .box:nth-child(3n+3) {margin-right:0%;}
	.flex-box .box:nth-child(4n+4) {margin-right:2%;}
	.flex-box .box a img {height:180px;}
}

@media (max-width:767px) {
	.logo {
		width:180px;
	}
	.logo img {
		width:180px;
	}
	.flex-box .box {width:48%;margin-right:2%;}
	.flex-box .detail-left {width:100%;padding-right:0px;}
	.flex-box .detail-left h1 {font-size:22px;}
	.flex-box .detail-right {width:100%;margin-top:20px;}
	.flex-box .box:nth-child(2n+2) {margin-right:0%;}
	.flex-box .box:nth-child(3n+3) {margin-right:2%;}
	.flex-box .box:nth-child(4n+4) {margin-right:2%;}
	.flex-box .box a img {height:180px;}
}