@font-face {
    font-family: 'Happiness-Sans-Title';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2205@1.0/Happiness-Sans-Title.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'KyoboHandwriting2020A';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2112@1.0/KyoboHandwriting2020A.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
html, body {
    width: 100%; height: 100%;
    background: #111111ff;
}
html {
    scroll-snap-type: y mandatory;
}
.page-full {
    width: 100%;
    height: 100%;
    background: url('http://sample.e-teruten.com/pyeonan/bkg10.png');
    background-size: cover;
    background-repeat: no-prepeat;
    /* scroll-snap-align: start; */
    transition: all 0.2s;
    margin: 0;
}
.page-wrapper {
    width : 100%;
    height : 70%;
    margin: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}
.installBtn {
    width: 48%;
    outline: 0;
    cursor: pointer;
    border: 1px solid white;
    height: 50px;
    line-height: 50px;
    border-radius: 40px;
    font-weight: 400;
    font-size: 16px;
    background: rgba(76, 175, 80, 0);
    color: #696969;
    box-shadow: 0 4px 14px 0 rgb(0 0 0 / 10%);
    min-width: 195px;
    text-align: center;
}
#playstore {
    float: left;
}
#appstore {
    float: right;
}

#div-left {
    width : 50%; height : 100%; float: left; padding-left : 200px;
}
#div-right {
    width : 30%; height : 100%; float: right; margin-right : 100px;
}
#demo-video {
    height : 100%; border-radius : 45px; border : 10px solid black; box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
}
#span-title {
    text-shadow: #111111 1px 0 3px; font-size : 100px; vertical-align : bottom; display : table-cell; color : #000054; font-family : Happiness-Sans-Title;
}
#div-install {
    width: 50%; height: 20%; margin-top: 100px; min-width: 400px;
}
#span-desc {
    text-align: left; text-shadow: #000000 1px 0 1.5px; font-size : 30px; color : white; font-family : Happiness-Sans-Title;
}
#div-title {
    width : 100%; height : 40%; display : table;
}
.title-2nd {
    color: white; text-align: center; margin: 0; font-size: 60px;
}

/* PC , 테블릿 가로 (해상도 845px ~ 1500px)*/ 
@media all and (min-width:845px) and (max-width:1500px) { 
    #div-left {
        padding-left : 50px;
    }    
} 
  
  /* 테블릿 세로 (해상도 780px ~ 845px)*/ 
@media all and (min-width:785px) and (max-width:845px) { 
    #div-left {
        padding-left : 10px;
    }    
} 

/* 모바일 가로, 테블릿 세로 (해상도 480px ~ 767px)*/ 
@media all and (max-width:785px) { 
    #div-left {
        width : 100%; padding-left : 0px;
        text-align: center;
    }
    #div-right {
        width : 100%; height : 100%; margin-right: 0px;
        visibility: hidden;
    }
    #demo-video {
        margin-left: auto;
        margin-right: auto;
        display: block;
        height : 100%; border-radius : 45px; border : 10px solid black; box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
    }
    #span-title {
        text-align: center;
        font-size: 70px;
    }
    #div-install {
        margin-left: auto;
        margin-right: auto;
        display: block;
    }
    #span-desc {
        text-align: center;
    }
    #div-title {
        margin-left: auto;
        margin-right: auto;
        display: block;
    }
    .title-2nd {
        color: white; text-align: center; margin: 0; font-size: 50px;
    }
}