@charset "utf-8"; /* */
/**
* @author CodeClicker
*/


.portfolio_section02_container { position: relative; width: 100%; height: 100%; overflow: hidden; border-radius: 55px 55px 0px 0px; background: #FAFAFA; padding: 258px 321px; }


.portfolio_section02_container .portfolio_section02_wrapper img { width: 100%; height: 100%; }

.portfolio_section02_container .portfolio_section02_wrapper .mob { display: none; }

.portfolio_section02_container .portfolio_section02_wrapper .tab-section { display: flex; justify-content: center; margin-bottom: 30px; gap: 20px;  align-items: center; font-size: 14px; color: #7e7e7e; font-weight: 400; }
.portfolio_section02_container .portfolio_section02_wrapper .tab-section .tab-list { padding: 5px 10px; cursor: pointer; }
.portfolio_section02_container .portfolio_section02_wrapper .tab-section .tab-list.active {color: #F89B11; font-weight: 600;}

.portfolio_section02_container .portfolio_section02_wrapper .img-container .img-wrapper { display: grid;  grid-template-columns: repeat(4, 1fr); gap: 10px;  }
.portfolio_section02_container .portfolio_section02_wrapper .img-container .img-wrapper img { border-radius: 5px; display: none; } 

.portfolio_section02_container .portfolio_section02_wrapper .img-container .img-wrapper img.active { display: block;  }

@media screen and (max-width: 768px) { 
	.portfolio_section02_container  { padding:120px 15px; }
	.portfolio_section02_container .portfolio_section02_wrapper .img-container .img-wrapper {grid-template-columns: repeat(2, 1fr);}
	.portfolio_section02_container .portfolio_section02_wrapper .mob { display: block; }
	.portfolio_section02_container .portfolio_section02_wrapper .pc { display: none; }
}