@charset "UTF-8";
.contents_util{width: 0;height: 0;overflow: hidden;}
h2#title{display: none}
#snb{display: none}
.earthday{background: #000A30;padding-top: 88px;overflow: hidden;position: relative;padding-bottom: 100px}
.earthday .s_title{text-align: center}
.earthday .s_title strong{color: #FFFFFF;font-size: 60px;color: #FFFFFF;font-family: 'Ria';font-weight: 400;display: block}
.earthday .img{display: block;text-align: center;width: 440px;margin: 0 auto;margin-top: 30px;padding: 10px;background: #fff}
.earthday .img img{max-width: 100%;display: block;border-radius: 10px;}
.earthday > i svg{display: block;opacity: 0.35}
.earthday > i{position: absolute;left: 50%;transform: translateX(-50%) translateY(15%);pointer-events: none}
.earthday p{color: #fff;font-size: 18px;line-height: 1.5;text-align: center;margin-top: 10px}
.earthday p b{font-weight: inherit;color: #1FECBE;}
.earthday .light{position: absolute;top: 0;left: 50%;margin-left: -690px;mix-blend-mode: overlay;pointer-events: none}
.earthday .light svg{animation: light 2s infinite linear;transform-origin: center top;display: block}
@keyframes light{
    0%{opacity: 1;transform: scale(1)}
    50%{opacity: 0.3;transform: scale(0.8)}
    100%{opacity: 1;transform: scale(1)}
}

@keyframes light2{
    0%{opacity: 1;}
    50%{opacity: 0}
    100%{opacity: 1}
}
@keyframes bulb{
    0%{transform: rotate(180deg);}
    50%{transform: rotate(180deg);}
    100%{transform: rotate(180deg);}
}
.earthday .light2{animation: bulb 1s infinite linear;width: 100px;height: 100px;margin: 0 auto}
/*80px*/
.earthday .light2 img{width: 100px}
.earthday .light2 img:nth-child(2){position: absolute;top: 0;left: 0;animation: light2 2s infinite linear;animation-fill-mode: forwards;}
.earthday .s_title strong{transform: translateY(70px);opacity: 0}
.earthday.on .s_title strong{transform: translateY(0px);opacity: 1;transition-duration: 1s}
.earthday .s_title p{transform: translateY(70px);opacity: 0}
.earthday.on .s_title p{transform: translateY(0px);opacity: 1;transition-duration: 1s;transition-delay: 0.3s}
.earthday .img{transform: translateY(70px);opacity: 0}
.earthday.on .img{transform: translateY(0px);opacity: 1;transition-duration: 1s;transition-delay: 0.6s}
@media (max-width: 1160px) {
    .earthday .s_title strong{font-size: 32px}
    .earthday p{font-size: 14px;word-break: keep-all}
    .earthday{padding-top: 40px}
    .earthday .img{max-width: 80%}
    .earthday{padding-bottom: 60px}
    .earthday > i svg{max-width: 160vw;height: auto}
}

@keyframes zeroli {
    0%{transform: rotate(0);}
    50%{transform: rotate(3deg);}
    100%{transform: rotate(0deg);}
}
.parking .zeroli{animation: 2s zeroli infinite linear;animation-delay: 0.4s;}

.parking .in_line{width: calc(100% - 80px);border: 2px solid #000000;border-radius: 10px;margin: 0 auto;}
.parking{padding-top: 147px;padding-bottom: 40px;position: relative;background: #EFF8FF;overflow: hidden}
.parking .cloud{position: absolute;bottom: -137px;right: 0px;}
.parking .zeroli{position: absolute;    bottom: 20px;right: 17px;z-index: 5;}
.parking .zeroli div{transform: translateY(70px) scale(0.9);opacity: 0;}
.parking.on .zeroli div{transform: translateY(0) scale(1);opacity: 1;transition-duration: 1.3s;}
.parking .in_line{height: calc(100vh - 187px);position: relative;z-index: 2;;}
.parking .vis_text{height: 100%;display: flex;flex-direction: column;align-items: center;justify-content: center;;;}
.parking .vis_typo .vis_typo01{display: flex;;}
.parking .vis_text strong{color: #fff;font-size: 90px;font-family: 'KerisKedyuche';font-weight: 700;    -webkit-text-stroke: 2px #0053AE;text-shadow: 4px 4px 0 #0053AE;letter-spacing: -3%}
.parking .vis_text strong b{color: #70CEFF;font-family: inherit;font-weight: inherit}
.parking .vis_text p b{color: #429BE9;font-weight: 500;position: relative;z-index: 5}
.parking .vis_text p b:before{content: '';display: block;width: 100%;height: 15px;background-color: #D6ECFF;position: absolute;bottom: -3px;left: 0;;z-index: -1;transform: scaleX(0);transition-duration: 0.5s;}
.parking.on .vis_text p b:before{transform: scaleX(1);transition-delay: 1s;}
.parking .vis_text p{    display: block;
    margin-top: 30px;
    font-size: 20px;
    color: #222222;
    font-weight: 400;
    line-height: 34px;text-align: center}
.parking .bubble{position: absolute;top: 50%;left: 50%;}
.parking .bubble01{margin-left: -740px;margin-top: -370px;;}
.parking .bubble03{margin-left: -843px;margin-top: 40px;;}
.parking .bubble04{margin-left: -432px;margin-top: 177px;;}
.parking .bubble02{margin-left: 345px;margin-top: -407px;;}
.parking .bubble05{margin-left: 648px;margin-top: -272px;;}
.parking .t03{margin-left: -0.5%;}
.parking .t02{margin-left: -0.5%;}
.parking .t04{margin-left: -1%;}
.parking .t06{margin-left: -1%;}
.parking .t07{margin-left: -0.5%;;position: relative;z-index: 2;;}
.parking .t08{margin-left: -0.5%;;position: relative;z-index: 2;;}
.parking .t11{margin-left: -0.5%;;position: relative;z-index: 2;;}
.parking .t10{margin-left: -1.5%;;position: relative;z-index: 2;;}
.parking .t13{margin-left: -0.9%;;position: relative;z-index: 2;;}
.parking .t05, .parking .t12, .parking .ml{margin-left: 2%;}
.parking .t05{margin-left: 2%;}
.parking .vis_typo .vis_s_typo span{font-size: 80px;-webkit-text-stroke: 3px #00711A;text-shadow: 6px 6px 0 #00711A;display: block;}
.parking .vis_typo .vis_s_typo{display: flex;width: 100%;justify-content: center;margin-top: 11px;}
.parking .vis_typo .vis_s_typo span b{color: #7CD12E;font-family: inherit;font-weight: inherit;}

.parking .vis_text strong{transform: scale(0.7);transition: 0.6s;opacity: 0;}
.parking.on .vis_text strong{transform: scale(1);opacity: 1;}
.parking .vis_text p{transform: translateY(70px);opacity: 0;}
.parking.on .vis_text p{transform: translateY(0px);opacity: 1;transition-duration: 1s;transition-delay: 0.3s}
@media (max-width: 1160px) {
    .earthday .s_title strong{font-size: 32px}
    .earthday{padding-top: 40px}
    .earthday p{font-size: 14px;word-break: keep-all}
    .earthday .img{max-width: 80%}
    .earthday{padding-bottom: 60px}
    .earthday > i svg{max-width: 160vw;height: auto}
    .earthday .light2 img{width: 70px}
    .earthday .light2{width: 70px}
    .contents_util{
        margin-bottom: 0 !important;}
    /*.earthday{min-height: 100vh}*/
}

@media (max-width: 1560px) {
    #main .in_line{width: calc(100% - 20px);}
    .parking .vis_text strong{font-size: 60px}
    .parking .vis_text p{font-size: 16px;line-height: 1.5}

}
@media (max-width: 1160px) {
    #contents{margin-bottom: 0 !important}
    .parking{padding-top: 80px;padding-bottom: 20px;}
    .parking .in_line{height: calc(100vh - 100px);}
    .parking .zeroli img{width: 450px;}
    .parking .cloud img{width: 500px;}
    .parking .cloud{bottom: -80px;}


}

@media (max-width: 660px) {
    .parking .zeroli img{width: 320px;}
    .parking .cloud img{width: 320px;}
    .parking .vis_text strong{font-size: 40px;-webkit-text-stroke: 1.5px #0053AE;text-shadow: 2px 2px 0 #0053AE;}
    .parking .vis_text p{font-size: 14px;margin-top: 10px}
}
@media (max-width: 480px) {
    .parking .zeroli img{width: 290px;}
    .parking .zeroli{right: -20px;}
}


.earth_w{background: #000A30;}
.earth_w .con1 {padding: 180px 0;overflow: hidden;position: relative}
.earth_w .con1 .zero_poster{position: absolute;bottom: 90px;left: 50%;margin-left: 144px;z-index: 1}
.earth_w .con1 .zero_poster img{display: block;animation: zero_w 2s infinite linear;}
.earth_w .con1 .mySwiper{margin-top: 40px;overflow: visible}
.earth_w .con1 .swiper-slide{width: 330px}
.earth_w .con1 .earth_in{height: 570px;display: flex;align-items: center;width: 100%;position: relative;left: 0;transition-duration: 0.5s}
.earth_w .con1 .earth_in .poster{width: 330px;position: relative;transition-duration: 0.5s;left: 0;overflow: hidden;border-radius: 10px}
.earth_w .con1 .earth_in > i{position: absolute;left: 50%;top: 50%;transform: translate(-50%,-50%)}
.earth_w .con1 .earth_in > i svg{display: block;transform: rotate(-5deg) scale(0.9);opacity: 0;transition-duration: 0.5s}
.earth_w .con1 .swiper-slide-active .earth_in > i svg{display: block;transform: rotate(0deg) scale(1);opacity:1;transition-delay: 0.5s}
.earth_w .con1 .earth_in .poster img{transition-duration: 0.5s;width: 100%}
.earth_w .con1 .swiper-slide-active .earth_in{width: 428px;left: -15%}
.earth_w .con1 .swiper-slide-prev .poster{left: -30px}
.earth_w .con1 .swiper-slide-next .poster{left: 30px}
.earth_w .con1 .earth_title{margin-bottom: 80px}
.earth_w .con1 .swiper-slide-active .poster{width: 100%}
.earth_w .earth_title span{display: flex;width: 185px;height: 56px;align-items: center;justify-content: center;border: 1px solid #FFFFFF;border-radius: 32px;align-items: center;justify-content: center;margin: 0 auto;margin-bottom: 20px;font-size: 20px;color: #FFFFFF;font-weight: 700}
.earth_w .earth_title strong{font-size: 50px;color: #FFFFFF;line-height: 72px;font-weight: 700;display: block;text-align: center;    font-family: 'Ria';}
.earth_w .earth_title p{display: block;text-align: center;color: #B4B8C8;margin-top: 20px}
.earth_w .earth_title p b{color: #1FECBE;font-weight: 500}
.earth_w .con2{padding-bottom: 40px;padding-top: 0px}
.earth_w .con2 .in_line{padding-top: 65px;padding-bottom: 55px;overflow: hidden}
.earth_w .con2 .zerori{width: 438px;margin: 0 auto;position: relative}
.earth_w .con2 .in_line{    width: calc(100% - 80px);
    border: 2px solid #fff;
    border-radius: 10px;
    margin: 0 auto;}

.earth_w .con2.off .zerori .zero_on{opacity: 0}
.earth_w .con2.off .zerori .zero_off{opacity: 1}
.earth_w .con2 .zerori .zero_on{transition: 0.7s}
.earth_w .con2 .zerori .zero_off{transition: 0.7s}
.earth_w .con2 .zerori .zero_off{position: absolute;top: 50%;left: 50%;transform: translate(-50%,-50%);opacity: 0}
.earth_w .con2 > div{position: relative}
.earth_w .con2 .on_off{cursor: pointer;z-index: 16}
.earth_w .con2 .on_off .text{width: 245px;height: 80px;background: #091647;border-radius: 15px 0 0 15px;display: flex;align-items: center;padding-left: 25px;position: absolute;transform: translateX(-100%);left: 0;top: 50%;margin-top: -40px;transition-duration: 0.5s}
.earth_w .con2.off .on_off .text{background: #429BE9}
.earth_w .con2 .on_off .text p{font-size: 18px;color: #FFFFFF;line-height: 26px}

.earth_w .con2 .on_off{position: absolute;background: #FFFFFF;padding: 14px;border-radius: 14px;top: 153px;right: 160px}
.earth_w .con2 .on_off .switch{border: 2px solid #000000;border-radius: 10px;width: 44px;position: relative;padding: 4px 0;position: relative;z-index: 5}
.earth_w .con2 .on_off .switch .box{width: 100%;height: 42px;display: flex;align-items: center;justify-content: center}
.earth_w .con2 .on_off .switch .sw_btn{transform: translateY(100%)}
.earth_w .con2.off .on_off .switch .sw_btn{transform: translateY(0%)}
.earth_w .con2 .on_off .switch .box i{display: block;width: 14px;height: 6px;background: #DE0000;border-radius: 10px}
.earth_w .con2 .on_off .switch .box.on_box i{background: #7CD12E}
.earth_w .con2 .on_off .switch .sw_btn{position: absolute;width: 100%;height: 42px;background: #E9EDFC;top: 5px;z-index: -1;border: 2px solid #000000;border-radius: 10px;width: calc(100% + 4px);left: -2px;transition-duration: 0.5s}

.earth_w .con2 .btn{ display: flex; justify-content: center;  }
.download { margin-top: 30px; }
.earth_w .con2 .btn a{ width: 225px; height: 64px; display:flex; align-items: center; justify-content: center; position: relative; border-radius: 60px; background-color: #429BE9; overflow: hidden; }
.earth_w .con2 .btn a ul li{ font-size: 20px; line-height: 1.5em; font-weight: 600; color:#FFFFFF; letter-spacing: -0.02em; transition: transform .5s; }
.earth_w .con2 .btn a ul li:last-child{ color: #429BE9; }
.earth_w .con2 .btn a ul{ height: 30px; overflow: hidden; position: relative; z-index: 1; }
.earth_w .con2 .btn a:after{ content:""; display: block; width: calc(100% + 32px); aspect-ratio: 1 / 1;  position: absolute; left: 50%; top: 100%; transform: translate(-50%,0); background-color: #fff; border-radius: 50%; transition: top .5s, transform .5s; }

.earth_w .con2 .btn a:hover ul li{ transform: translateY(-100%); }
.earth_w .con2 .btn a:hover:after{ transform: translate(-50%,-50%); top: 50%; }
.earth_w .con2 > div{position: relative;z-index: 15}
.earth_w .con2 .light{position: absolute;left: 50%;transform: translateX(-50%) translateY(-8%);top: 0;z-index: -1;filter: blur(20px)}
.earth_w .con2 .zerori .zero_off img{display: block;animation: zero_w 2s infinite linear}
.earth_w .con2 .zerori .zero_on img{display: block;animation: zero_w 2s infinite linear}
.earth_w .con2 .zero_slide{
    margin-top: 40px;
    position: absolute;width: 100%;top: 0;opacity: 0;transition: 1.3s}
.earth_w .con2.off .zero_slide{opacity: 1;;transition-delay: 1.5s}

.earth_w .con2 .zero_slide .swiper-slide{width: auto;}
.earth_w .con2 .zero_slide .swiper-slide div{border-radius: 12px;overflow: hidden;}
.earth_w .con2 .zero_slide .swiper-slide div img{display: block}
.earth_w .con2{overflow: hidden}
.earth_w .con2 .zero_slide .swiper{overflow: visible;}
@keyframes zero_w{
    0%{transform: rotate(0deg)}
    50%{transform: rotate(-5deg)}
    100%{transform: rotate(0deg)}
}
.earth_w .con2 .light svg{transform-origin: top center ;transition-duration: 0.5s}
.earth_w .con2.off .light svg{transform: scale(0.6);opacity: 0}

.earth_w .on .earth_title{transform: translateY(0px);opacity: 1;transition-duration: 1s;transition-delay: 0.0s;}
.earth_w .earth_title{transform: translateY(70px);opacity: 0;}
.earth_w .on .swiper{transform: translateY(0px);opacity: 1;transition-duration: 1s;transition-delay: 0.3s;}
.earth_w .swiper{transform: translateY(70px);opacity: 0;}
.earth_w .con1.on .zero_poster{transform: translateY(0px);opacity: 1;transition-duration: 1s;transition-delay: 0.3s;}
.earth_w .con1 .zero_poster{transform: translateY(70px);opacity: 0;}
.earth_w .on .zerori{transform: translateY(0px);opacity: 1;transition-duration: 1s;transition-delay: 0.6s;}
.earth_w .zerori{transform: translateY(70px);opacity: 0;}
.earth_w .on .download{transform: translateY(0px);opacity: 1;transition-duration: 1s;transition-delay: 0.3s;}
.earth_w .download{transform: translateY(70px);opacity: 0;}

.earth_w .con2 .zero_slide .swiper-slide div{overflow: hidden;display: flex;justify-content: center;align-items: center;aspect-ratio: 250 / 350;}
.earth_w .con2 .zero_slide .swiper-slide div img{height: 100%}
@media (max-width: 1680px) {
    .earth_w .con2 .on_off{right: 20px;top: 20px}
}
@media (max-width: 1160px) {
    .earth_w .con2 .on_off .switch .sw_btn{height: 34px}
    .earth_w .con2 .on_off .switch{width: 34px}
    .earth_w .con2 .on_off .switch .box{height: 34px}
    .earth_w .earth_title strong{font-size: 32px;line-height: 1.2}
    .earth_w .con2 .zerori .zero_on img{width: 360px}
    .earth_w .con2 .zerori .zero_off img{width: 400px}
    .earth_w .con2 .on_off .text p{font-size: 12px;line-height: 1.5}
    .earth_w .con2 .on_off{padding: 10px}
    .earth_w .con2 .on_off .text{padding-left: 15px;height: 50px;width: 165px;margin-top: -25px}
    .earth_w .con1{padding: 60px 0}
    .earth_w .con2 .in_line{width: calc(100% - 20px)}
    .earth_w .con1 .earth_title{margin-bottom: 30px}
    .earth_w .con1 .zero_poster{left: auto;margin-left: 0;right: 20px}
    .earth_w .con1 .zero_poster img{width: 130px}
    .earth_w .con2 .zero_slide .swiper-slide div img{width: 180px}
    .earth_w .con2 .zero_slide{
        margin-top: 10px;}
}
@media (max-width: 660px) {
    .earth_w .con1 .swiper-slide-prev .poster{left: 0}
    .earth_w .con1 .swiper-slide .earth_in > i svg{width: 370px;pointer-events: none}
    .earth_w .con1 .swiper-slide-next .poster{left: 0}
    .earth_w .con1 .swiper-slide-active .earth_in{width: 330px;height: 440px}
    .earth_w .con1 .swiper-slide{width: 260px}
    .earth_w .con1 .swiper-slide-active{width: 260px}
    .earth_w .con2 .btn a ul li{ font-size: 15px; }
    .earth_w .con2 .btn a ul{ height: 22px; }
    .earth_w .con2 .btn a{ width: 170px; height:50px; }
    .earth_w .earth_title strong{font-size: 23px}
    .earth_w .con2 .zerori .zero_off img{width: 320px}
    .earth_w .con2 .zerori .zero_on img, .earth_w .con2 .zerori{width: 260px}
    .earth_w .earth_title span{width: 100px;height: 36px;font-size: 14px}
    .earth_w .earth_title p{font-size: 14px;word-break: keep-all;line-height: 1.5;padding: 0 20px}
    .earth_w .con2 .on_off{padding: 3px;border-radius: 5px}
    .earth_w .con2 .on_off .switch{width: 28px;border-radius: 5px}
    .earth_w .con2 .on_off .switch .box, .earth_w .con2 .on_off .switch .sw_btn{height: 28px}
    .earth_w .con2 .in_line{padding-top: 105px}
    .earth_w .con2 .light svg{width: 800px;height: auto}
    .earth_w .con2{padding-top: 0}
    .earth_w .con2 .on_off .switch .sw_btn{border-radius: 5px}
    .earth_w .con2 .on_off .switch .box i{width: 8px;height: 3px}
    .earth_w .con1 .zero_poster{bottom: 30px}
    .earth_w .con2 .zero_slide .swiper-slide div img{width: 160px}

}
@media (max-width: 480px) {
    .earth_w .con1 .earth_in{height: 450px}
    .earth_w .con1 .swiper-slide-active .earth_in{left: -20%}
    .earth_w .con1 .swiper-slide{width: 260px}
    .earth_w .con1 .swiper-slide-active .earth_in{width: 290px}
    .earth_w .con1 .swiper-slide .earth_in > i svg{width: 330px}

    .earth_w .con1 .swiper-slide-active{width: 220px}

}