:root {
    --swiper-theme-color: #f8f9fa;
}

/* =============================================================================
   HTML5 CSS Reset Minified - Eric Meyer
   ========================================================================== */

   html,body,div,span,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,abbr,address,cite,code,del,dfn,em,img,ins,kbd,q,samp,small,strong,sub,sup,var,b,i,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,figcaption,figure,footer,header,hgroup,menu,nav,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;outline:0;font-size:100%;vertical-align:baseline;background:transparent}
   body{line-height:1}
   article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}
   nav ul{list-style:none}
   blockquote,q{quotes:none}
   blockquote:before,blockquote:after,q:before,q:after{content:none}
   a{margin:0;padding:0;font-size:100%;vertical-align:baseline;background:transparent;text-decoration:none}
   mark{background-color:#ff9;color:#000;font-style:italic;font-weight:bold}
   del{text-decoration:line-through}
   abbr[title],dfn[title]{border-bottom:1px dotted;cursor:help}
   table{border-collapse:collapse;border-spacing:0}
   hr{display:block;height:1px;border:0;border-top:1px solid #ccc;margin:1em 0;padding:0}
   input,select{vertical-align:middle}
   li{list-style:none}
   
   
   /* =============================================================================
      My CSS
      ========================================================================== */
   
   /* ---- base ---- */
   
   html,body{ 
       width:100%;
       height:100%;
       background:#111;
   }
   
   html{
     -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
   }
   
   body{
     font:normal 75% Arial, Helvetica, sans-serif;
   }
   
   canvas{
     display:block;
     vertical-align:bottom;
   }
   
   
   /* ---- stats.js ---- */
   
   .count-particles{
     background: #000022;
     position: absolute;
     top: 48px;
     left: 0;
     width: 80px;
     color: #13E8E9;
     font-size: .8em;
     text-align: left;
     text-indent: 4px;
     line-height: 14px;
     padding-bottom: 2px;
     font-family: Helvetica, Arial, sans-serif;
     font-weight: bold;
   }
   
   .js-count-particles{
     font-size: 1.1em;
   }
   
   #stats,
   .count-particles{
     -webkit-user-select: none;
     margin-top: 5px;
     margin-left: 5px;
   }
   
   #stats{
     border-radius: 3px 3px 0 0;
     overflow: hidden;
   }
   
   .count-particles{
     border-radius: 0 0 3px 3px;
   }
   
   
   /* ---- particles.js container ---- */
   
   #particles-js{
     width: 100%;
     height: 100%;
     background-color: #1f2642;
     background-image: url('');
     background-size: cover;
     background-position: 50% 50%;
     background-repeat: no-repeat;
   }
   

.swiper-container {
    width: 100%;
    height: 100%;
    margin-left: auto;
    margin-right: auto;
}

.swiper-slide {
    background: #fff;

    /* Center slide text vertically */
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;
}

.swiper-container-vertical>.swiper-pagination-bullets {
    right: 5%;
}

.swiper-pagination-bullet {
    width: 7px;
    height: 7px;
    background: #fff;
    opacity: .3;
}

.swiper-pagination-bullet-active {
    width: 7px;
    height: 7px;
    opacity: 1.0;
}

.myslide {
    background-repeat: no-repeat;
    background-size: cover;
}
.myslide1{
    background-position: center;
}

.myslide2{
    background-position: left;
}

.myslide3{
    background-position: right;
}

.myslide4{
    background-position: right;
}

.myslide5{
    background-position: left;
}

.btn-sns{
    width:45px;
}
.lay-install-app{
    width:200px;
    height: 200px;
    right:0;
    bottom:30px;
}

.lay-install-app-float{
    z-index: 2;
    right: 10%;
    padding-top: 8%;
    visibility: hidden;
}

.btn-install-app {
    width: 140px;
    height: 140px;
    font-size: 1.5rem;
    padding: 1.7rem 1.2rem 1.4rem 2.3rem;
    line-height: 1.9rem;
}
.btn-install-app-float {
    width: 110px;
    height: 110px;
    font-size: 1.2rem;
    padding: 1.4rem 0.9rem 1.0rem 1.8rem;
    line-height: 1.5rem;
}
.btn-install-icon{
    left: 35%;
    bottom: 35px;
    width: 75px;
    position: absolute;
}

.btn-install-icon-float{
    right: -5px;
    bottom: -20px;
    width: 57px;
    position: absolute;
}

.slide-text {
    padding-top: 25%;
    padding-left: 3%;
}

.slide-text h1{
    font-weight: bold;
    color : #fff;
    font-size: 500%;
}

.slide-text p{
    font-weight: bold;
    color : #fff;
    font-size: 120%;
    padding-left: 1%;
    padding-top: 3%;
}

.clip {
    width:100px;
    cursor: pointer;
}

.navi-menus {
    padding-right: 0rem!important;
}

.rounded-1-8 {
    border-radius: 2.8rem!important;
}

/* 에니메이션 */
.ani-fadeInUp {
    -webkit-animation:  animate-fade-in-up 2s forwards; 
    animation: animate-fade-in-up 2s forwards; 
}
@-webkit-keyframes animate-fade-in-up {
    0% { 
        opacity: .3; 
        -webkit-transform: translateY(100px); 
    }
    100% { 
        opacity: 1; 
        -webkit-transform: translateY(0%); 
    }
}

.ani-fadeOutDown {
    -webkit-animation:  animate-fade-in-down 1s forwards; 
    animation: animate-fade-in-down 1s forwards; 
}
@-webkit-keyframes animate-fade-in-down {
    0% { 
        opacity: 1; 
        -webkit-transform: translateY(0%); 
    }
    100% { 
        opacity: .3; 
        -webkit-transform: translateY(100px); 
    }
}

.ani-sacle{
    -webkit-animation:  animate-scale 3s forwards; 
    animation: animate-scale 3s forwards; 
}
@-webkit-keyframes animate-scale {
    0%   { transform: scale(1); }
    100% { transform: scale(1.03); }
}

@keyframes animate-scale {
    0%   { transform: scale(1); }
    100% { transform: scale(1.03); }
}

.install-btn {
    padding-left:20%;
    cursor: pointer;
}
.install-title {
    font-weight: bold;
}

.install-text{
    color : #4F4F4F;
}

.install-container {
    padding-top:45vh;
    height:100vh;
}

.install-bg {
    /* background-image: url(/onepage/images/install_app_bg.jpg); */
    background-repeat: no-repeat;
    background-position: 0 100%;
    background-size: contain;
}

.btn-success {
    background-color:#97C355;
    border-color:#97C355;
}

.btn-success:hover {
    background-color:#C1D75F;
    border-color:#C1D75F;
}

.btn-success.focus, .btn-success:focus {
    box-shadow: 0 0 0 0.2rem rgba(220, 224, 229, 0.5);
}

@media (max-width: 575.98px) and (orientation:portrait) {

    .clip {
        width: 60px;
    }

    .navi-menus {
        padding-right: 3.5rem!important;
    }

    .btn-sns{
        width:40px;
    }

    .slide-text {
        padding-top: 10%;
    }

    .slide-text h1 {
        font-size: 250%;
        padding-top: 40%;
    }
    .slide-text p {
        font-size: 100%;
        padding-right: 25%;
    }
    .lay-install-app {
        width: 150px;
        height: 200px;
        bottom: 5px;
    }
    .btn-install-app {
        width: 110px;
        height: 110px;
        font-size: 1.1rem;
        padding: 1.3rem 1.0rem 1.4rem 1.7rem;
        line-height: 1.5rem;
    }
    .btn-install-icon-float {
        right: 10px;
        bottom: -18px;
        width: 55px;
        position: absolute;
    }

    .lay-install-app-float {
        padding-top: 17%;
        right: 3%;
    }

    .btn-install-icon {
        left: 25%;
        bottom: 65px;
        width: 65px;
    }

    .myslide1{
        background-image :url(../img/background/bg_1.jpg);
    }
    
    .myslide2{
        background-image :url(../img/background/bg_2.jpg);
    }
    
    .myslide3{
        background-image :url(../img/background/bg_3.jpg);
    }
    
    .myslide4{
        background-image :url(../img/background/bg_4.jpg);
    }
    
    .myslide5{
        background-image :url(../img/background/bg_5.jpg);
    }

    .install-container {
        padding-top:30vh;
    }
    
}

@media (max-width: 575.98px) and (orientation:landscape) {
    .myslide1{
        background-image :url(../img/background/bg_1.jpg);
    }
    
    .myslide2{
        background-image :url(../img/background/bg_2.jpg);
    }
    
    .myslide3{
        background-image :url(../img/background/bg_3.jpg);
    }
    
    .myslide4{
        background-image :url(../img/background/bg_4.jpg);
    }
    
    .myslide5{
        background-image :url(../img/background/bg_5.jpg);
    }
}

@media (max-width: 992px) and (orientation:landscape) {
    .clip {
        width: 60px;
    }

    .navi-menus {
        padding-right: 1.0rem!important;
    }

    .btn-sns{
        width:40px;
    }

    .slide-text {
        padding-top: 18%;
    }
    .slide-text h1 {
        font-size: 200%;
        padding-top: 0;
    }
    .slide-text p {
        font-size: 100%;
        padding-right: 50%;
        padding-top: 0;
        padding-left: 2px;
    }

    .lay-install-app{
        width:120px;
        height: 120px;
        bottom: 5px;
    }
    .lay-install-app-float {
        padding-top: 7%;
        right: 7%;
    }
    .btn-install-app {
        width: 85px;
        height: 85px;
        font-size: 1.0rem;
        padding: 0.7rem .2rem .4rem 1.3rem;
        line-height: 1.2rem;
    }
    .btn-install-icon {
        left: 35%;
        bottom: 18px;
        width: 45px;
    }

    .btn-install-app-float {
        width: 70px;
        height: 70px;
        font-size: 0.8rem;
        padding: .4rem 0.5rem 0rem 1.0rem;
        line-height: 1.0rem;
    }

    .btn-install-icon-float {
        right: 0;
        bottom: -15px;
        width: 37px;
    }

    .swiper-container-vertical>.swiper-pagination-bullets {
        right: 3%;
    }

    @-webkit-keyframes animate-scale {
        100% { transform: scale(1.07); }
    }
    
    @keyframes animate-scale {
        100% { transform: scale(1.07); }
    }

    .myslide1{
        background-image :url(../img/background/bg_1.jpg);
    }
    
    .myslide2{
        background-image :url(../img/background/bg_2.jpg);
    }
    
    .myslide3{
        background-image :url(../img/background/bg_3.jpg);
    }
    
    .myslide4{
        background-image :url(../img/background/bg_4.jpg);
    }
    
    .myslide5{
        background-image :url(../img/background/bg_5.jpg);
    }
}

@media (min-width: 576px) and (max-width: 767.98px) { 
    .myslide1{
        background-image :url(../img/background/bg_1.jpg);
    }
    
    .myslide2{
        background-image :url(../img/background/bg_2.jpg);
    }
    
    .myslide3{
        background-image :url(../img/background/bg_3.jpg);
    }
    
    .myslide4{
        background-image :url(../img/background/bg_4.jpg);
    }
    
    .myslide5{
        background-image :url(../img/background/bg_5.jpg);
    }
}

@media (min-width: 768px) and (max-width: 991.98px) {
    .myslide1{
        background-image :url(../img/background/bg_1.jpg);
    }
    
    .myslide2{
        background-image :url(../img/background/bg_2.jpg);
    }
    
    .myslide3{
        background-image :url(../img/background/bg_3.jpg);
    }
    
    .myslide4{
        background-image :url(../img/background/bg_4.jpg);
    }
    
    .myslide5{
        background-image :url(../img/background/bg_5.jpg);
    }
}

@media (min-width: 992px) and (max-width: 1199.98px) {
    .myslide1{
        background-image :url(../img/background/bg_1.jpg);
    }
    
    .myslide2{
        background-image :url(../img/background/bg_2.jpg);
    }
    
    .myslide3{
        background-image :url(../img/background/bg_3.jpg);
    }
    
    .myslide4{
        background-image :url(../img/background/bg_4.jpg);
    }
    
    .myslide5{
        background-image :url(../img/background/bg_5.jpg);
    }
}

@media (min-width: 1200px) {
    .myslide1{
        background-image :url(../img/background/bg_1.jpg);
    }
    
    .myslide2{
        background-image :url(../img/background/bg_2.jpg);
    }
    
    .myslide3{
        background-image :url(../img/background/bg_3.jpg);
    }
    
    .myslide4{
        background-image :url(../img/background/bg_4.jpg);
    }
    
    .myslide5{
        background-image :url(../img/background/bg_5.jpg);
    }
}