canvas {
  background: radial-gradient(ellipse at bottom, #1B2735 0%, #090A0F 100%);
  margin: 0;
  overflow: hidden; position:absolute; left:0; top:0; width:100%; height:100%
}


.main_vi {height:100%; display:inline-block; width:100%; }

.main_con {width:90%; position:absolute; height:65%; margin-left:5%; bottom:10%;  box-sizing:border-box;   }
.main_con > div {position:absolute; width:25%; height:50%;   display:flex; align-items:center; justify-content:center}
.main_con  div > div {width:80%; height:90%; position:absolute; transition: all 0.3s ease-out; cursor:pointer  }

.main_con div div img {max-width:100%; max-height:100%; position:absolute; left:50%; top:50%;  transform: translate(-50%, -50%);}
.main_con div div img.ani_img { z-index:99; /*  -webkit-animation: opacity 1s infinite linear;  animation: opacity 1s infinite linear;  */ }

/*******비쥬얼 이미지******/

.main_con div.img1 {   animation: slide-left 21s infinite linear;  }
.main_con div.img1 div {}

.main_con div.img2 { animation: slide-left 21s infinite linear;  animation-delay: 3s;}
.main_con div.img2 div {}

.main_con div.img3 {  animation: slide-left 21s infinite linear;  animation-delay: 6s; }
.main_con div.img3 div {}

.main_con div.img4 { animation: slide-left 21s infinite linear;  animation-delay: 9s; }

.main_con div.img5 {  animation: slide-left 21s infinite linear;  animation-delay:12s;  }

.main_con div.img6 {  animation: slide-left 21s infinite linear;  animation-delay:15s;   }
 
.main_con div.img7 { animation: slide-left 21s infinite linear;  animation-delay: 18s;   }


.main_con div.img1 div {height:98%}
.main_con div.img4 div {height:87%}
.main_con div.img5 div {height:95%}
.main_con div.img6 div {height:90%}
.main_con div.img7 div {height:95%}


/*********************/


 
@media all and (min-width:950px) {
   
		.main_con div.img1 {top:0%; left:0%; }
		.main_con div.img2 {top:0%; left:25%; }
		.main_con div.img3 {top:0%; right:25%; }
		.main_con div.img4 {top:0%; right:0%;   }
		.main_con div.img5 {bottom:0; left:12%; }
		.main_con div.img6 {bottom:0; left:36%; }
		.main_con div.img7 {bottom:0; right:12%; }


		.main_con div div:hover {width:90%; height:110%; } 
		.main_con div.img4 div:hover {height:103%}
		.main_con div.img5 div:hover {height:115%}
		.main_con div.img6 div:hover {height:105%}
		.main_con div.img7 div:hover {height:110%}


}

@media all and (max-width:950px) {
		.main_con  {width:94%; margin-left:3%;   height:calc(100vh - 200px); top:50%;  transform: translate(0, -47%);}
		.main_con > div { width:33%;   height:33.33333%;   }
		.main_con  div > div {width:95%; position:absolute; transition: all 0.3s ease-out; cursor:pointer  }

		.main_con div.img1 {top:0%; left:0%; }
		.main_con div.img2 {top:0%; left:33%; }
		.main_con div.img3 {top:0; right:0%; }
		.main_con div.img4 {top:33%; left:0%; }
		.main_con div.img5 {top:33%; left:33%; width: 35%;}
		.main_con div.img6 {top:33%; right:0%; width: 26%;}
		
		.main_con div.img7 {bottom:0%; left:33%;   }

		.main_con div.img1 div {width:100%}
		.main_con div.img2 div {width:100%}
		.main_con div.img3 div {width:100%}
		.main_con div.img4 div {width:100%}
		.main_con div.img5 div {width:85%}
		.main_con div.img6 div {width:100%}
		.main_con div.img7 div {width:100%}
 }
 

 

 /* 움직이는 텍스트 */

.animated-title {  position: relative; width: 100%;  max-width:100%; height: auto; padding:100px 0; overflow-x: hidden; overflow-y: hidden;  line-height:0;}
.animated-title .track {position: absolute; white-space: nowrap;will-change: transform;animation: marquee 30s linear infinite; }
.content { font-family: 'SBAggroB'; color:#111; font-size:65px;  font-weight:800;}
.content span { font-family: 'SBAggroB'; color:#ff4a00; font-size:65px;  font-weight:800;}
.main_tt { font-family: 'SBAggroB'; color:#111; font-size:45px;  font-weight:800; margin-top:40px; margin-bottom:40px}

 

 @media all and (max-width:950px) {
  .animated-title  { padding:40px 0;}
  .content {font-size:1.8rem;  }
  .content span {font-size:1.8rem;  }

  .main_tt {font-size:6vw; margin-top:30px; margin-bottom:30px }


 }
	 

.main_gall_lsit {padding:0 3%; max-width:1650px; margin:0 auto; margin-bottom:90px; width:100%; box-sizing:border-box; }
.main_gall_lsit  ul.gall_list {margin-top:0;}
.main_gall_lsit ul.gall_list li {width:23.5%;  } 
.main_gall_lsit  ul.gall_list.illust li  {width:32%}

 @media all and (max-width:950px) {
 	  .main_gall_lsit {margin-bottom:50px }
      .main_gall_lsit ul.gall_list li {width:48%; } 
 	 .main_gall_lsit ul.gall_list.illust  li  {width:48%}
	 	 
}




.m_top div a {color:#fff !important}
.cd-nav-trigger span.ham {background-color:#fff;}
.menu {  display:block }

.top ul li  a {color:#fff}
.top ul:nth-child(2) li a {color:#fff}

.icon  { stroke: #fff;}

#footer {margin-top:100px}

  @media all and (max-width:950px) {
    	 #footer {margin-top:50px}
  }



div.spaceship .tt img.black_img {display:none}
div.spaceship .tt img.w_img {display:block }

div.spaceship .tt.black img.w_img {display:none }
div.spaceship .tt.black img.black_img {display:block}


/* ul.gall_list li:hover  img {min-width:140%}
 */



.swiper { width: 100%;  padding-bottom:40px;  }

.swiper-slide { position:relative;  box-sizing:border-box; padding:20px; padding-bottom:0 }

.swiper-slide img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

div.swiper-slide h4 {font-size:1em; font-weight:400; line-height:1.2; display:block; margin-top:20px}
div.swiper-slide h3 {font-size:1.3em; font-weight:700; line-height:1.3; display:block; margin:5px 0 }

div.swiper-slide p {font-size:1em; font-weight:400; line-height:1.35; color:#555;  width: 100%; }

div.swiper-slide span.heart {position:absolute; right:5%; top:4%; z-index:999; font-size:2rem; color:#ddd; }
div.swiper-slide  span.heart_ov {position:absolute; right:5%; top:4%; z-index:999; font-size:2rem; color:red; }
.swiper-pagination {display:flex; justify-content:center}
.swiper-pagination-bullet {border-radius:0; background-color:#555; margin:0 !important; width:100%; height:5px}
.swiper-pagination-bullet-active {background-color:#ff4a00}

@media (max-width: 950px) {
  .swiper {  padding-bottom:20px;  }
   div.swiper-slide h3 { font-size: 1.1em; }
}