* {
	margin: 0 auto;
	padding: 0;
	box-sizing: border-box;
  }
  
  body,
  html {
	overscroll-behavior: none;
	background-color: #000;
	height: 100vh;
   font-family: 'NanumSquareNeo';
	width: 100%;
	transition: background-color 1s ease;
	font-size: 1.7rem;
  }
  
  main {
	position: fixed;
	width: 100%;
	height: 100vh;
  }
  
  .scrollable {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	will-change: transform;
  }
  
  .image-container {
	position: relative;
	width: 100%;
	height: 100vh;
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
  }

  ul li{
	display: inline-block;
}


.container .yoystit {
	  position: absolute;
    left: 50%;
    top: 50%;
    z-index: 25;
    color: #fff;
    mix-blend-mode: difference;
    transform: translate(-50%, -50%);
    text-align: center;
    mix-blend-mode: difference;
  }
	.container .low{
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    position: absolute;
  }

  .container .bot_tit{
    position: absolute;
    left: 50%;
    z-index: 20;
    bottom: 100px;
    font-size: 20px;
    color: #fff;
    transform: translate(-50%, -50%);
  }


  .container img {
    /* position: absolute; */
    width: 100%;
    height: auto;
    visibility: hidden;    
    z-index: 10;
  }
  
  .container .full{
    width: 100vw;
    height: 100vh;
    object-fit: contain;
    position: absolute;
    width: 300px;
    height: auto;
    top: 30%;
    right: 19%;
  }





  .tit_conti{
	  background-color: #000;
    width: 100vw;
    height: 100vh;
    position: absolute;
    z-index: 20;
    opacity: 0.5;
	  left: 0;
	  bottom: 0;
  }

  .image-container.hit {
	width: 100%;
    height: 100vh;
	overflow: hidden;
  }
  .tit_conti h1{
	color: #fff;
  }
  canvas {
	position: fixed;
	z-index: -1;
	top: 0;
	left: 0;
	pointer-events: none;
  }
  


  
/* 드래그 텍스트 */
.drag-text::selection {
	color: #ff2d00;
	background-color: #ffffff38;
}




.nanum{
    font-family: 'NanumSquareNeo';
}
.minitit{
	transition:0.5s all ease-in-out;
    font-size: 16px;
}


/* 스크롤시  */

.content {
	overflow: hidden;
	width: 100%;
	position: relative;
  z-index: 20;
}
.scrollbox{
padding: 120px 0; 
}
.content2 {
  overflow: hidden;
  padding-bottom: 140px;
  margin-bottom: -140px;
}
.scroll_txt	 {
	text-align: center;
	font-size: 24px;
	font-weight: 700;
	padding:50px 0; 
	color: #ff2d00;
}
.work.scroll_txt{
	color: #fff;
    font-size: 10px;
    position: relative;
    padding-bottom: 0;
    padding-top: 0;
}

.work.scroll_txt::before{
	position: absolute;
    width: 100%;
    height: 1px;
    background-color: #ff2d002b;
    left: 50%;
    top: 50%;
    content: '';
    transform: translate(-50%, 0);
}
.work.scroll_txt .worktit{
	background-color: #000;
    display: inline-block;
    position: absolute;
    top: 50%;
    width: 43px;
    left: 50%;
    transform: translate(-50%, -50%);
}


.about.scroll_txt{
	font-size: 10px;
	color: #fff;
}
/* rotate */

.topbtn{
	position: fixed;
	top: 50px;
	left: 50px;
	z-index: 50;
	display: flex;
    align-items: center;
    justify-content: flex-start;
    font-size: 15px;
}

.topbtn .gototop{
	position: absolute;
	z-index: 50;
	left: -6px;
	color: #1fff13;

}
.rotate {
  position: relative;
  width: 30px;
  height: 20px;
  left: -44%;
  bottom: -10%;
    z-index: 20;
  border: 2px solid #818181;
  border-radius: 50%;
  animation: rotate 2s linear infinite;
}



.moving-circle {
  position: absolute;
  width: 10px;
  height: 10px;
  background-color: #1fff13;
  border-radius: 50%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  animation: rotate-moving 2s linear infinite;
}

@keyframes rotate {
  0% {
      transform: rotate(0deg);
  }
  100% {
      transform: rotate(360deg);
  }
}

@keyframes orbit {
  0% {
      transform: translate(-50%, -50%) rotate(0deg) translateX(50px) rotate(0deg);
  }
  100% {
      transform: translate(-50%, -50%) rotate(360deg) translateX(50px) rotate(-360deg);
  }
}

@keyframes rotate-moving {
  0% {
      transform: translate(-50%, -50%) rotate(0deg) translateX(40px);
  }
  100% {
      transform: translate(-50%, -50%) rotate(360deg) translateX(40px);
  }
}


/* 스크롤시 배경색변하는거 */

.panel {
	/* min-height: 100vh; */
	display: block;
 	transition: background-color 1s ease;
  }
  .color-blue {
	background-color: #000; 
  }

  .color-indigo {
	background-color: #fff; 
  }
  .color-blt {
	background-color: #ff2d00; 
  }


.image-container.unst{
  overflow: unset;
  width: 100%;
}
.image-container.panel.offy{
	min-height: 100px;
}


.iner {
	display: grid;
	border-collapse: collapse;
	/* grid-template-columns: repeat(5, 1fr); */
	grid-template-columns: 1fr 1fr 0.5fr 0.5fr 0.5fr ;
	grid-template-rows: repeat(4, minmax(auto-fit,100px));gap: 1px; /* you can use gap instead of grid-gap */
}

.item{
	background-color: #ff2d00;
	outline: 1px solid #fff; /* Use outline instead of border */
	width: 100%;
	padding: 10px;

}
.item.m{
	font-size: 30px;
}
/* skill */
.item{
	transition:0.5s all ease-in-out;
	color: #fff;
}
.item .minitit.hid{
	transition:0.5s all ease-in-out;
	line-height: 1.7;
}
.item .minitit.nam{
	font-weight: 600;
	margin-bottom: 20px;
}
.item:hover{
	background-color: #2B2B2B;
	transition:0.5s all ease-in-out;
}
.item:hover .minitit.hid{
	display: block;
	transition:0.5s all ease-in-out;
	font-size: 20px;

}
.item:hover .minitit.nam{
	transition:0.5s all ease-in-out;
	font-size: 24px;
	font-weight: 600;
}


.item:nth-child(1) {
	/* 1번 라인에서 2칸 */
	grid-column: 1 / span 2;
	/* 1번 라인에서 3칸 */
	grid-row: 1 / span 2;
	padding: 0;
	display: inline;
}



.item:nth-child(2),
.item:nth-child(3),
.item:nth-child(4),
.item:nth-child(5),
.item:nth-child(6),
.item:nth-child(7){
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	flex-direction: column;
}

.item:nth-child(2):hover{
	background-color: #EA6325;
}

.item:nth-child(3):hover{
	background-color: #28A3D9;
}
.item:nth-child(4):hover{
	background-color: #EAB921;
}

.item:nth-child(5):hover{
	background-color: #FFF;
	color: #000;
}

.item:nth-child(6):hover{
	background-color: #001D34;
}

.item:nth-child(7):hover{
	background-color: #310000;
}

.item:nth-child(9) {
	/* 1번 라인에서 2칸 */
	grid-column: 2 / span 4;
	/* 1번 라인에서 3칸 */
}

.item:nth-child(10) {
	/* 1번 라인에서 2칸 */
	grid-column: 1 / span 2;
	/* 1번 라인에서 3칸 */
}





/* 지도 */
gmp-map {
	height: 100%;
  }
.maps{
	position: relative;
}
.maps .maptit{
	position: absolute;
	left: 50%;
	bottom: 40px;
	z-index: 12;
	color: #fff;
	font-size: 16px;
	transform: translate(-50%,0);
}
.maps .fre{
	height: 400px;
}
/* 3딘 */
.set_t{
  display: flex;
  flex-wrap: wrap;
  padding-top: 150px;
}
.set_t>div{
  width: 100%;
  height: 200px;
  overflow: hidden;
}

.set_t .set00{
  display: flex;
}

.set_t .set_text{
  width: 60%;
transition:0.5s all ease-in-out;
  color: #818181;
  position: relative;
}

.set_t .set_text::after{
  content: '';
  position: absolute;
  bottom: 20px;
  right: 0;
  width: 100%;
  height: 2px;
  background-color: #ff2d00;
	transition:0.5s all ease-in-out;
  opacity: 0;
}
.set_t .viewbtn{
	position: absolute;
	transition:0.5s all ease-in-out;
    right: 0;
    top: 20px;
    border: 1px solid #ff1313;
    width: 150px;
    height: 34px;
    border-radius: 20px;
    background: transparent;
	display: none;
	color: #ff1313;
}
.set_t .set00:hover .viewbtn{
	transition:0.5s all ease-in-out;
	display: block;
	cursor: pointer;
}
.set_t .set_img {
	max-width: 300px;
	width: 40%;
	padding: 10px;
}

.set_t .sett01{
  background: url(./images/project/pro01.png);
  background-size: 100% auto;
  /* background-size: auto 100%; */
  width: 100%;
  height: 100%;
  object-fit: cover;
  background-repeat: no-repeat;
  background-position: 50% 50%;
}

.set_t .sett02{
	background: url(./images/project/card.png);
	background-size: 100% auto;
    width: 100%;
    height: 100%;
    object-fit: cover;
    background-repeat: no-repeat;
    background-position: 50% 50%;
}

.set_t .sett03{
	background: url(./images/project/busan.png);
	background-size: 100% auto;
	/* background-size: auto 100%; */
    width: 100%;
    height: 100%;
    object-fit: cover;
    background-repeat: no-repeat;
    background-position: 50% 50%;
  }

  .set_t .sett04{
	background: url(./images/project/tem.png);
	background-size: 100% auto;
	/* background-size: auto 100%; */
    width: 100%;
    height: 100%;
    object-fit: cover;
    background-repeat: no-repeat;
    background-position: 50% 50%;
  }



.set_t .set00:hover .set_text{
  font-size: 50px;
	transition:0.5s all ease-in-out;
  color: #ff2d00;
}


.set_t .set00:hover .minitit{
  font-size: 25px;
  padding-top: 15px;
}
.set_t .set00:hover .middlet{
  font-weight: 800;
}
.set_t .middlet{
  padding: 10px 0;
}

.set_t .se01{
	width: 100px;
    background: url(/images/project/logos01.svg);
    display: inline-block;
    height: 25px;
    background-size: 100% 100%;
	transition:0.5s all ease-in-out;
	opacity: 0;
}
.set_t .se02{
	width: 120px;
    background: url(/images/project/logos03.svg);
    display: inline-block;
    height: 25px;
    background-size: 100% 100%;
	transition:0.5s all ease-in-out;
	opacity: 0;
}

.set_t .se03{
	width: 100px;
    background: url(/images/project/naver_bi.png);
    display: inline-block;
    height: 20px;
    background-size: 100% 100%;
	transition:0.5s all ease-in-out;
	opacity: 0;
}

.set_t .se04{
	width: 95px;
    background: url(/images/project/instragram.png);
    display: inline-block;
    height: 25px;
    background-size: 100% 100%;
	transition:0.5s all ease-in-out;
	opacity: 0;
}
.set_t .se05{
	width: 95px;
    background: url(/images/project/busans.png);
    display: inline-block;
    height: 25px;
    background-size: 100% 100%;
	transition:0.5s all ease-in-out;
	opacity: 0;
}
.set_t .se06{
	width: 95px;
    background: url(/images/project/cafe24.svg);
    display: inline-block;
    height: 25px;
    background-size: 100% 100%;
	transition:0.5s all ease-in-out;
	opacity: 0;
}
.set_t .se07{
	width: 95px;
    background: url(/images/project/imweb.png);
    display: inline-block;
    height: 25px;
    background-size: 100% 100%;
	transition:0.5s all ease-in-out;
	opacity: 0;
}
.set_t .set00:hover .se01,
.set_t .set00:hover .se02,
.set_t .set00:hover .se03,
.set_t .set00:hover .se04,
.set_t .set00:hover .se05,
.set_t .set00:hover .se06,
.set_t .set00:hover .se07,
.set_t .set00:hover .set_text::after{
	transition:0.5s all ease-in-out;
	  opacity: 1;
	}


/* 흐르는텍스트*/
.wavetit{
	width: 100%;
    /* background-color: aquamarine; */
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}


.marquee {
    white-space: nowrap;
    overflow: hidden;
    display: block;
    position: relative;
    width: 100%;
}

.marquee span {
	display: inline-block;
    padding-left: 100%;
    font-size: 100px;
    min-width: 100%;color: #58e58bcf;
    animation: marquee 8s linear infinite;
}
.bli{
	height: 100px;
    min-height: 76vh;
}
	/* 반응형 */


	@media (max-width:950px){
		.image-container{
			height: unset;
		}
		.cursor{
			display: none;
		}

		.set_t .set00{
			flex-wrap: wrap;
		}
		.set_t>div{
			
		}
		.set_t .set_text,
		.set_t .set_img{
			width: 100%;
			max-width: 100%;
		}
		.set_t .set_img{
			height: 250px;
			margin-bottom: 60px;
			padding: 10px 0;
		}
		.iner {
			display: grid;
			border-collapse: collapse;
			grid-template-columns: 1fr ;
			/* grid-template-rows: repeat(6, minmax(auto-fit,100px)); gap: 1px; */
			 /* you can use gap instead of grid-gap */
		}
		.item{
			/* grid-column: 1 / span 1; */
			grid-column: unset;
    		font-size: 12px;
		}
		.item:nth-child(9){
			grid-column: 1 / span 1;

		}
		.item:nth-child(1){
			grid-column: 1 / span 2;
			grid-row: 1 / span 2;
		}


		.scroll_txt{
			transition:0.5s all ease-in-out;
			padding: 23px 0;
			font-size: 16px;
		}
		

		
		.set_t{
			width: 92%;
			margin: 0 auto;
			font-size: 16px;
		}
		.set_t .set00{
			height: auto;
		}
		.set_t .minitit{
			padding-top: 15px;
		}
		.set_t .set00:hover .set_text,
		.set_t .set00:hover .minitit{
			font-size: 16px;
			color: #ff2d00;
		}
		.set_t .middlet{
			font-size: 20px;
			font-weight: 600;
		}
		.set_t .set_text{
			color: #ff2d00;

		}
		.set_t .se01{
			opacity: 1;
			height: 26px;width: 76px;
			display: none !important;
		}
		.set_t .se02{
			display: none !important;

		}
		.set_t .se03{
			width: 79px;
			height: 15px;
			display: none !important;

		}
		.set_t .se04{
			width: 69px;
   			 height: 16px;
			display: none !important;
		}
		.set_t .se05{
			width: 60px;
			height: 14px;
			display: none !important;

		}
		.set_t .se06{
			width: 70px;
			height: 13px;
			display: none !important;

		}
		.set_t .se07{
			width: 66px;
    		height: 21px;
			display: none !important;
		}

		.set_t .se01,
		.set_t .se02{
			opacity: 1;
			display: inline-block;
			display: none !important;
		}
		.set_t .viewbtn{
			bottom: 29px;
			width: 74px;
			height: 34px;
			opacity: 1;display: block;
			top: auto;
		}
		.set_t .set_text::after{
			display: inline-block;
			opacity: 0 !important;
			bottom: 9px;
		}

		.set_t .se01, 
		.set_t  .se02, 
		.set_t .se03, 
		.set_t .se04, 
		.set_t .se05, 
		.set_t .se06, 
		.set_t .se07, 
		.set_t .set_text::after{
			opacity: 0 ;
			display: inline-block;
		}

		.item.m{
			font-size: 30px;
		}
		
	}


	@media (max-width:600px){
		.mains .nav{
			font-size: 20px;
		}
		.container .yoystit{
			font-size: 20px;
		}
		.scroll_txt{
			padding: 23px 0;
			font-size: 12px;
		}
		.item .minitit.nam,
		.minitit{
			font-size: 12px;
		}
		.item.m{
			font-size: 15px;
		}
		footer{
			padding: 16px 0;
		}
		.footer-contact{
			padding-bottom: 35px;
		}
		.footer-contact>div{
			height: 30px;
		}
	}