.main_con {width:100%;  box-sizing:border-box;}


#vi_wrap {width:100%; height:calc(100vh - 90px); box-sizing:border-box; position:relative; background:url('/common/img/vi_bg.png') no-repeat bottom; background-size:cover;   overflow:hidden}



.vi {width:100%; height:100vh; display:inline-block; overflow:hidden;  position:relative; background: linear-gradient( to top, #eef8fa, #eef8fa ); }


.vi img {max-width:100%}

div.text  {width:100%; text-align:Center;  color:#333; box-sizing:border-box;}
 
 
div.text p {font-weight:300; font-size:1.06rem; line-height:1.45em; width:100%; display:block; margin-top:15px; letter-spacing:-.8px; }
div.text p b.b_1 {display:block;   font-size:1.05em}
div.text p b.b_2 {display:inline-block; background-color:#00a578; color:#fff; padding:2px 10px 4px 10px; margin-bottom:5px; line-height:1em;  font-size:1.3em; }
div.text p b.b_2 span {font-size:.9em }
div.text img { max-width:400px; max-height:30vh}

div.text .b_3 {display:inline-block; font-size:1.3em; line-height:.98em; margin-top:0; margin-bottom:5px}

div.text .b_3 b.b_bg {display:flex;  justify-content:center; align-items:center }
div.text .b_3 b.b_bg .bg_color {background-color:#00a578; color:#fff;   padding:3px 2px;}


.on_label {background-color:#fff; color:#00a578; padding:0 10px; border-radius:50px; display:inline-block; vertical-align:0 } 
.on_label b {color:red;}
.off_label {background-color:#fff; color:#00a578; padding:0 10px; border-radius:50px; display:inline-block; } 
.off_label b {color:#ddd;}


.m_cloud_img {position:absolute; z-index:9;  width:15%; max-width:180px; right:2%; top:3%;
      -webkit-animation: slide-right 10s ease-in-out infinite;
      animation: slide-right 10s ease-in-out infinite;
}
.m_cloud_img2 {position:absolute; z-index:9;  width:15%; max-width:140px; right:45%; top:5%;
      -webkit-animation: slide-left 10s ease-in-out infinite;
      animation: slide-left 10s ease-in-out infinite;
}


.balloon {position:absolute; z-index:99; left:39vw; top:7%;  width:9%; max-width:150px; z-index:999999;
   -webkit-animation: balloon 5s infinite linear;
  -moz-animation: balloon 5s infinite linear;
  -ms-animation: balloon 5s infinite linear;
  -o-animation: balloon 5s infinite linear;
  animation: balloon 5s infinite linear; 

   image-rendering: -webkit-optimize-contrast;/* Webkit (non-standard naming) */
	 image-rendering: crisp-edges;
	  -ms-interpolation-mode: nearest-neighbor;  /* IE (non-standard property) */

}


#earth_wrap {width:29vw; height:29.4vw; top:50%; transform: translate(0, -50%); right:11vw; position:absolute; z-index:9999; }

.earth_img {width:100%}
.earth_img img { width:100%;  }
.earth_bar2 {  width:112%; top:36%; left:-6%;  height:0; position:absolute; z-index:99999 }
.earth_bar2 img:first-child {width:100%;  }
.earth_bar2 img:last-child {width:20%; position:absolute; top:-2.5vw; left:45%;  }

  
   


.earth_new {width:100%; height:100%; top:0; left:0;}
 
 .earth_new { -webkit-animation: spinner 70s infinite linear;
 -moz-animation: spinner 70s infinite linear;
 -ms-animation: spinner 70s infinite linear;
 -o-animation: spinner 70s infinite linear;
 animation: spinner 70s infinite linear;  }



 /*******슬라이드*********/


.swiper-container {
position:relative; z-index:9999;
  width: 100%;  
   margin-left: auto;
  margin-right: auto;
}
.swiper-slide {
  background-size: cover; 
  background-position: center;  
 }

.gallery-top { height:90%; max-height:490px; top:10%;    width:45vw; left:0; position:relative !important; margin:0}


.gallery-top .top_fixed_img {width:100%; height:calc(100% - 160px);   position:relative; top:0; left:0; display:flex; align-items:flex-end; justify-content :center }
.gallery-top .top_fixed_img  img { position:absolute; top:0; left:50%;  transform: translate(-50%, 0);  max-height:calc(100% - 50px)}
.gallery-top .top_fixed_img h4 {letter-spacing:0px; font-size:2rem; line-height:1.1em;  width:100%; display:block; margin-top:10px; text-align:Center   }


.gallery-top .swiper-wrapper {width:100%; height:160px; position:absolute; bottom:0; box-sizing:border-box;  }
.gallery-top .swiper-wrapper  .swiper-slide { display:flex; align-items:flex-start;  }


 @media all and (max-height:500px){
 

}

.gallery-thumbs {
 overflow:visible !important;
   box-sizing: border-box;
   height:100%; width:100%; 
   top:0; left:0; position:absolute;  
}

 .gallery-thumbs .swiper-slide { }
 .gallery-thumbs .swiper-slide-thumb-active img.layer {
	   -webkit-animation: fadeOut 2s infinite linear;
	  -moz-animation: fadeOut 2s infinite linear;
	  -ms-animation: fadeOut 2s infinite linear;
	  -o-animation: fadeOut 2s infinite linear;
	  animation: fadeOut 2s infinite linear;
   }

.gallery-thumbs .swiper-slide-thumb-active img.top_title {
	   -webkit-animation: opacity 2s infinite linear;
	  -moz-animation: opacity 2s infinite linear;
	  -ms-animation: opacity 2s infinite linear;
	  -o-animation: opacity 2s infinite linear;
	  animation: opacity 2s infinite linear;
   }

.gallery-thumbs .swiper-slide { display:inline-block; position:absolute; z-index:999999;  cursor:pointer }

.gallery-thumbs .swiper-slide img {width:100%}

.gallery-thumbs .swiper-slide img.top_title {position:absolute; top:0; left:0; }
.gallery-thumbs .swiper-slide.type0 { width:39% !important; height:35%; left:30%; top:-17%}

.gallery-thumbs .swiper-slide.type0 .iframe {width:54%;   height:29%; position:absolute; top:31%; left:23%;  z-index:9999999}

.gallery-thumbs .swiper-slide.type1 {  width:45% !important;height:35%; left:-17%; top:-7%}
.gallery-thumbs .swiper-slide.type2 {    width:44% !important;  height:35%;  top:-2%; right:-21%;}
.gallery-thumbs .swiper-slide.type3 { width:53% !important;  height:35%; top:65%; left:-15%}
.gallery-thumbs .swiper-slide.type4 { width:41.5% !important;  height:35%;  top:66%; right:-9%}

.gallery-thumbs .swiper-slide img.layer  {width:100%;
 image-rendering: -webkit-optimize-contrast;/* Webkit (non-standard naming) */
 image-rendering: crisp-edges;
  -ms-interpolation-mode: nearest-neighbor;  /* IE (non-standard property) */
}


   
.gallery-thumbs .swiper-slide-thumb-active.type0 {animation:none}

.swiper-container-horizontal>.swiper-pagination-bullets, .swiper-pagination-custom,   
.swiper-pagination { position:absolute; height:22px; text-align:center;  }
/*.swiper-pagination-bullet {width:20px; height:20px; position:relative; box-sizing:border-box; background:url('/common/img/slide_bullet.png') no-repeat center;  opacity:1;}*/
/*.swiper-pagination-bullet-active {background:url('/common/img/slide_bullet_active.png') no-repeat center;}*/
.swiper-pagination-bullet {width:22px; height:22px;   position:relative; box-sizing:border-box; background:url('/common/img/slide_bullet.png') no-repeat center;  opacity:1; background-size:100%}
.swiper-pagination-bullet-active { background:url('/common/img/slide_bullet_active.png') no-repeat center; background-size:100%}
 

.swiper-container-horizontal>.swiper-pagination-bullets, .swiper-pagination-custom,   
.swiper-pagination { bottom:0; }


 @media all and (max-width:1000px){
    
   div.text  {position:static; text-align:center; margin:0; }
   div.text p {font-size:0.96rem; margin-top:10px;}
   .m_cloud_img { width:25%; max-width:auto; right:-3%; top:5%; }
   .m_cloud_img2 {width:25%; max-width:auto; left:-3%; right:auto;  top:5%; }

   div.text .b_3 { font-size:1.2em;  }


  
 .swiper-container-horizontal>.swiper-pagination-bullets, .swiper-pagination-custom, .swiper-pagination {bottom:0%; top:auto; }

   .balloon {  left:5%; right:auto; top:75vw; width:16%; max-width:auto; }
   .earth_bar2 img:last-child {display:none  }

    #vi_wrap {height:200vw}
    .gallery-top {width:100%;  max-height:none; height:75vw;  top:5%; transform: translate(0, 0); padding-bottom:50px; }
    .gallery-top .top_fixed_img  {   height:calc(100% - 130px);   }
	.gallery-top .top_fixed_img  img { position:absolute; top:0; left:50%;  transform: translate(-50%, 0);  max-height:calc(100% - 40px)}

 	.gallery-top .top_fixed_img h4 {font-size:1.5rem   }
    .gallery-top .swiper-wrapper { height:130px    }
  
	#earth_wrap {width:61vw; height:61.8vw; top:110vw; left:50%; position:absolute; z-index:9999; transform: translate(-50%, 0);  }

}