@charset "UTF-8";

/* font */
@font-face {
    font-family: 'yg-jalnan';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_four@1.2/JalnanOTF00.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
.jalnan {font-family: 'yg-jalnan';}



/* layout */
.container {max-width: 768px; margin: 0 auto;}
.inner {max-width: calc(768px + 40px); margin: 0 auto; padding: 0 20px;}
.inner.flex {display: flex;align-items: center;justify-content: space-between;}
.btn { display: flex; vertical-align: middle; text-align: center; border-radius: 5px; -webkit-border-radius: 5px; -moz-border-radius: 5px; -ms-border-radius: 5px; -o-border-radius: 5px; align-items: center; justify-content: center;}
.ico {display: inline-flex;align-items: center;justify-content: center;}
.ico i {background-repeat: no-repeat;background-size: cover;}



/* main */
.main-content-wrap {background-image: linear-gradient(to bottom, rgba(252,206,99,0.2) 25% , #FFDA85 100%); width: 100%; display: table; height: calc(var(--vh, 1vh) * 100);}
.main-content {display: table-cell; vertical-align: middle; text-align: center;}
.main-content > h1 {color: #511B00;}
.main-content > h1 > p {font-size: 18px; font-weight: 900; color: inherit;}
.main-content > h1 > b {font-size: 36px; font-weight: normal; color: inherit;}
.main-content > h1 > b > span {display: inline-block;vertical-align: middle; padding-left: 5px; margin-top: -3px;}
.main-img {max-width: 320px;margin: 0 auto; margin-top: 18px;}
.main-img img{width: 100%;}
.qrBtn {width: 100%;height: 70px; background: #FFC161; border: 1px solid #F89E4C; font-size: 24px; color: #511B00; box-shadow: 0px 6px 8px 0px rgb(241 139 2 / 68%);}
.main-btn__half {display: flex; margin-top: 10px;}
.main-btn__half .btn {width: 50%; height: 60px; background: #FFFFFB; border: 1px solid rgba(81,27,0,0.25); font-size: 16px; color: #511B00;box-shadow: 0px 6px 10px 0px rgb(0 0 0 / 16%);}
.main-btn__half .btn:first-child {margin-right: 10px;}
.ico-qr {background-image: url(../../images/ico-qr.svg); width: 48px; height: 48px; margin-right: 5px;}
.ico-stamp {background-image: url(../../images/ico-stamp.svg); width: 43px; height: 42px; margin-right: 5px;}
.ico-insta {background-image: url(../../images/ico-insta.svg); width: 48px; height: 48px; margin-right: 5px;}
.main-content > a {font-size: 14px; text-decoration: underline; display: inline-block; margin-top: 30px;}

#qr {width: 100%;height: 100%;position: absolute;top: 0;left: 0;z-index: -1;}
.qr_ {position: absolute;top: 0;left: 0;width: 100%;height: 100%;overflow: hidden;}
.qr_con {overflow: hidden;}
.qr_con_video { position: absolute;top: 0;left: 0;width: 100%;height: 100%;}
#qr-canvas {width: 101%;height: 101%;object-fit: cover;position: absolute;left: -1px;top: -1px;}
.qr-top {width: 100%;height: 50px;position: absolute;top: 0;left: 0;background:#232323; z-index: 2; display: none;}
.home-btn {display: inline-flex;align-items: center;height: 50px;}