@charset "utf-8";

body{margin: 0; padding: 0; background: #000; font-family: "Montserrat", "Noto Sans KR", sans-serif;}
h1,h2,h3,h4,h5,h6,p{margin: 0;}
a{text-decoration: none; color: #fff;}
ul{list-style: none; padding: 0; margin: 0;}
img{display: block;}
.material-symbols-outlined {
  font-variation-settings:
  'FILL' 0,
  'wght' 200,
  'GRAD' 0,
  'opsz' 24
}
.box{background: #1b1b1b; border: 1px solid #333333;}
.brr20{border-radius: 20px;}
.dpFlex{display: flex;}
.between{justify-content: space-between;}
.pad10{padding: 10px;}
.center{display: flex; justify-content: center; align-items: center;}

.container{display: grid; height: 100%; padding: 30px; box-sizing: border-box; gap: 30px;}

.leftMenu{display: grid; grid-template-columns:20% auto; gap: 30px;}
.hTop{justify-content: space-between; align-items: center; padding: 10px 20px;}
.hTop h1{color: #fff; font-size: 18px;}
.contactBtn{background: url(/images/graBg.jpg); background-size: 100%; padding: 10px; border-radius: 10px;}
.contactBtn span{display: block;}

.menu{padding: 20px;}
.menu ul{display: flex; gap: 30px;}
.menu li{line-height: 60px; font-size: 18px;}
.menu li a{display: flex; align-items: center; gap: 10px; color: #999; transition: all 0.3s;}
.menu li:hover a{color: #fff;}
.menu li span{background: #333; padding: 10px; border-radius: 10px;}

.itemAll{display: grid; column-gap: 30px; row-gap: 30px; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, minmax(174px, auto));}
.item{position: relative;border-radius: 20px; border: 1px solid #333333; overflow: hidden; box-shadow: 0 0 30px rgba(0,0,0,0.5); cursor: pointer;}
.item a{color: #000;}
.img{width: 100%; height: 100%;}
.item img{width: 100%; height: 100%; object-fit: cover;}
.infoBox{position: absolute; left:50%; transform: translateX(-50%); bottom: 10px; backdrop-filter:blur(3px); background: rgba(255,255,255,0.3); width: 90%; border: 1px solid #888; border-radius: 10px; padding: 10px;}
.infoBox h3{font-size: 16px;}
.work{display: flex; font-size: 12px; align-items: center;}
.infoBox p{font-size: 14px; margin-top: 5px;}
.work>div{padding: 3px 10px; height: 25px; line-height: 20px; box-sizing: border-box; backdrop-filter:blur(3px); background: rgba(0,0,0,0.2); color: #333;}

.tabBtn{cursor: pointer;}
.tabBtn.active span{background: url(/images/graBg.jpg); color: #fff;}
.tabBtn.active{font-weight: bold; }
.tabBtn.active a,.tabBtn.active:hover a{color: #a366cb;}
.tabCon{display: none;}
.tabCon.active{display: grid;}

.tit{color: #fff; margin-left: 20px; margin-bottom: 20px; font-size: 16px;}
.logoCon.active{grid-template-columns: repeat(5, 1fr);}

#lightbox { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.85); z-index: 999; text-align: center;}
#lightboxImg{width: 100%;}
.imgArrow{width: 40%; position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%);}
#prev,#next{position: absolute; background: none; border: none; color: white; cursor: pointer; font-weight: 100; top:50%; transform: translateY(-50%);}
#prev{left: -50px;}
#next{right: -50px;}
#prev span,#next span{font-size: 35px;}
.close { position: absolute; top: 20px; right: 30px; color: #fff; font-size: 70px; cursor: pointer; font-weight: 100;}


@media (max-width: 1200px) {
  .leftMenu{grid-template-columns: auto; gap: 20px;}
  .itemAll{grid-template-columns: repeat(2, 1fr);}
  .item{height: 280px;}
  .infoBox>.dpFlex{display: block;}
  .work{margin-top: 10px;}
}

/*모바일*/
@media (max-width: 768px) {
  .container{padding: 20px;}
  .leftMenu,.tabCon.active{grid-template-columns: auto; gap: 20px;}
  .menu{padding: 10px;}
  .menu ul{justify-content: center; gap: 15%;}
  .infoBox{width: 90%;}
  .work{margin-top: 10px;}
}