@charset "utf-8";
/* topo */
*{margin: 0;padding: 0;text-decoration: none;list-style: none;font-family: 'arial';font-size: 12px;scroll-behavior: smooth;}

body{background-color: #0b0b0b;color: #fff;}

/* menu */
.banner{width: 100%;max-width: 1024px;margin: 0 auto;}
	.area{width: calc(100% - 20px);max-width: calc(1024px - 10px);margin: 0 auto;}.p20{padding: 20px 10px;}
	.dfb{display: flex;justify-content: space-between;align-items: center;}
	.fw{flex-wrap: wrap;}
	.mobile{display: none !important;}
	.logo{width: 150px;border-radius: 50%;overflow: hidden;}
	.pos{margin-top: -100px;}
	.ico{font-size: 24px;}
	.scroll{height: 80vh; overflow-y: scroll;}
	.link-menu{width: 100%;padding: 15px 5px;border-bottom: 1px solid #4E4E4E;color: #fff;font-size: 16px;}

/* vitrine */
.card{width: calc(30% - 21px);background-color: #1B1414;padding: 20px 10px;border-radius: 15px;height: 470px;}
	.dfc{display: flex;}
	.vitrine{width: calc(100% - 21px);padding: 0px 10px;display: grid;}
	.gtc{grid-template-columns: repeat(3, 1fr);gap:10px;}
	.gtc4{grid-template-columns: repeat(4, 1fr);gap:10px;}
	.cards{text-align: center;border: 1px solid #1D1D1D;background-color: #170E0F;padding: 5px;border-radius: 15px;}.cards:hover{box-shadow: 0 0 5px #6C6C6C;}
	.btn{width: 100%; padding: 10px 0; background-color: #145E08;color: #fff;border: none; cursor: pointer;border-radius: 0 0 15px 15px;}
	.cards:hover img{transform: scale(102%);transition: all 0.3s linear;}
	
	@media(max-width:1020px){
		.mobile{display: flex !important;}
		.desk{display: none !important;}
		.logo{width: 120px;}
		.pos{margin-top: -80px;}
		.menu{background-color: #1B1515;width: calc(100% - 20px);height: 100vh;position: fixed;top: 0;z-index: 1000;padding: 10px;}
		.link-menu{width: 100%;padding: 15px 5px;border-bottom: 1px solid #4E4E4E;color: #fff;}
		.dl{display: block;transition: all 0.2s linear;left: -100%;opacity: 0;}
		.dl-hover{display: block;transition: all 0.2s linear; left: 0;opacity: 1;}
	}
	@media(max-width:1020px){
		.vitrine{width: calc(100% - 21px);padding: 0px 10px;display: grid;}
		.gtc{grid-template-columns: repeat(2, 1fr);gap:10px;}
		.gtc4{grid-template-columns: repeat(2, 1fr);gap:10px;}
		.cards{text-align: center;border: 1px solid #1D1D1D;background-color: #170E0F;padding: 5px;border-radius: 15px;height: auto;}
	}