@charset "utf-8";
img{ display:block; width:100%; }

.only_pc{  }
.only_m{ display:none !important; }

html, body{ width:100%; height:100%; }
.wrap{ width:100%; height:100%; background: #E0EFF6; background: linear-gradient(180deg,rgba(224, 239, 246, 1) 0%, rgba(154, 213, 240, 1) 100%); }
.wrap .pg_video_toggle{ position: fixed; top: 80px; left: 50%; transform: translateX(-50%); z-index:3;}
.wrap .pg_video_toggle li{ float: left; cursor: pointer; }
.wrap .pg_video_toggle li:last-child{ margin-left: 10px; }
.wrap .pg_video_toggle li img{  }
.wrap .pg_video_toggle li img:nth-child(1){ display:block; }
.wrap .pg_video_toggle li img:nth-child(2){ display:none; }
.wrap .pg_video_toggle li.on img:nth-child(1){ display:none; }
.wrap .pg_video_toggle li.on img:nth-child(2){ display:block; }
.wrap .pg_video_wrap{position:fixed;left:50%;top: 17vh;transform: translateX(-50%);width: 900px; z-index:3; border: 15px solid red; border-radius: 53px; overflow: hidden;}
.wrap .pg_video_wrap li{ display:none; width:100%; background: #000;}
.wrap .pg_video_wrap li.on{ display:block; }
.wrap .pg_video_wrap li video{ display:block; width:100%; }
.wrap .btn_video_home{display:block;left:50%;transform: translateX(-50%);position:fixed;bottom: 15vh;z-index: 2;width: 22vw; box-shadow: 0 11px 15px  #00000073; border-radius: 50px;}
.wrap .bg{}
.wrap .bg span{position: fixed;z-index: 1;}
.wrap .bg span img{  }
.wrap .bg span:nth-child(1){left: -3vw;bottom: -3vh;width: 36vw;}
.wrap .bg span:nth-child(2){right: -3vw;bottom: -4vh;width: 46vw;}
.wrap .bg span:nth-child(3){left: 16vw;top: 13vh;width: 6vw; animation: aniFloat 2.8s ease-in-out infinite;}
.wrap .bg span:nth-child(4){right: 14vw;bottom: 29vh;width: 6vw; animation: aniFloat 2.2s ease-in-out infinite;}
.wrap .bg span:nth-child(5){left: 6vw;bottom: 14vh;width: 16vw; animation: aniFloat 2.5s ease-in-out infinite;}
.wrap .bg span:nth-child(6){right: 6vw;top: 12vh;width: 15vw; animation: aniFloat 3.5s ease-in-out infinite;}
.wrap .bg span:nth-child(7){bottom: 0;right: 0; animation: car 25s linear infinite; width: 12vw;}

.wrap .cloud_wrap{  }
.wrap .cloud_wrap span{ position: fixed; }
.wrap .cloud_wrap span:nth-child(odd){ animation: cloud1 5s linear infinite;}
.wrap .cloud_wrap span:nth-child(even){ animation: cloud2 5s linear infinite;}
.wrap .cloud_wrap span img{  }
.wrap .cloud_wrap span:nth-child(1){width: 10vw;top: 2vh;left: 55%; animation-duration: 8s;}
.wrap .cloud_wrap span:nth-child(2){width: 21vw;top: 10vh;left: 74%; animation-duration: 6s;}
.wrap .cloud_wrap span:nth-child(3){width: 13vw;top: 19vh;left: 11%; animation-duration: 7s;}
.wrap .cloud_wrap span:nth-child(4){width: 15vw;top: 29vh;left: 33%; animation-duration: 9s;}
.wrap .cloud_wrap span:nth-child(5){width: 14vw;bottom: 51vh;left: 85%; animation-duration: 6s;}
.wrap .cloud_wrap span:nth-child(6){width: 14vw;bottom: 39vh;left: -5%; animation-duration: 7s;}
.wrap .cloud_wrap span:nth-child(7){width: 22vw;bottom: 18vh;left: 7%; animation-duration: 8s;}

/* 
animation: car 15s linear infinite;
animation: ani01 0.8s forwards ;  animation-delay: 0.8s;
animation: ani02 1.2s forwards ;
animation: aniFloat 2.5s ease-in-out infinite;
animation: anistar 0.9s linear infinite;
animation: anistar 1.7s linear infinite;
 */

@keyframes car{
  0%{ right: -20%;}
  100%{ right: 100%; }
}
@keyframes ani01 {
    0% { transform: scale(0); }
    50% { transform: scale(1.2); }
    100% { transform: scale(1); }
}
@keyframes ani02 {
    0% { bottom:0; opacity:0;}
    100% { bottom:0.7vw; opacity: 1;}
}
@keyframes cloud1{
    0%   { transform: translateX(0); }
    50%  { transform: translateX(-5vw); }
    100% { transform: translateX(0); }
}
@keyframes cloud2{
    0%   { transform: translateX(0); }
    50%  { transform: translateX(5vw); }
    100% { transform: translateX(0); }
}
@keyframes aniFloat {
    0%   { transform: translateY(0); }
    50%  { transform: translateY(-0.7vw); }
    100% { transform: translateY(0); }
}