@font-face {
    font-family: "SBB";
    src: url("SBB.ttf");
}
@font-face {
    font-family: "SBL";
    src: url("SBL.ttf");
}
@font-face {
    font-family: "SBM";
    src: url("SBM.ttf");
}
#mobile{
    display: none;
}
#pc{
    width: 90vw;
    height: 90vh;
    overflow: hidden;
}
.txt_main{
    font-family: "SBL";
    font-size:1.5vw;
    color: white;
    text-align: right;
    height: 5vw;
}#tbx:hover{
    cursor: pointer;
}
.bg{
    z-index: -1;
    position: fixed; top: 0; left: 0;
    width: 100vw; height: 100vh; 
    background-size: cover; background-repeat: no-repeat; background-position: center center;
    opacity: 0;
}
.dragon{
     width:20vw; height: 20vw;
     background-repeat: no-repeat;
     background-position: center bottom;
     background-size: contain;
     opacity: 0;
     position: fixed; bottom: 0; left:0;
}
.talk{
    font-family: "SBM";
    font-size:2.3vw; 
    color:#F6BC3E; 
    text-align: center;
    padding-top:2vw;
    padding-left:2vw;
    width:22vw; 
    height: 11vw; 
    position: fixed; 
    bottom: 7vw; 
    left:15vw; 
    background-image: url("infobulle_01.png"); 
    background-position: left bottom;
    background-repeat:  no-repeat; 
    background-size: contain;
}
#popup_pc{
    width: 52vw;
    height:40vw;
    position: fixed;
    left: 24vw;
    top: 5vw;
    background-image: url("minting_KR.png");
    background-size: 52.91vw 40vw;
    animation: fadein 1s;
    -moz-animation: fadein 1s; /* Firefox */
    -webkit-animation: fadein 1s; /* Safari and Chrome */
    -o-animation: fadein 1s; /* Opera */
}
@keyframes fadein {
    from {
        opacity:0;
    }
    to {
        opacity:1;
    }
}
@-moz-keyframes fadein { /* Firefox */
    from {
        opacity:0;
    }
    to {
        opacity:1;
    }
}
@-webkit-keyframes fadein { /* Safari and Chrome */
    from {
        opacity:0;
    }
    to {
        opacity:1;
    }
}
@-o-keyframes fadein { /* Opera */
    from {
        opacity:0;
    }
    to {
        opacity: 1;
    }
}


@media screen and (max-width: 720px) {
    #pc{
        display: none;
    }
    #mobile{
        position: fixed;
        top:0;
        left:0;
        width: 100vw;
        height: 100vh;
        display: flex;
        overflow-x: hidden;
        flex-flow: column;
        justify-content: center;
        align-items: center;
         -ms-overflow-style: none; /* IE and Edge */
        scrollbar-width: none; /* Firefox */
    }
    #mobile::-webkit-scrollbar { display: none; }
    .txt_main{
        font-family: "SBL";
        font-size:1.8vh;
        color: white;
        text-align: center;
        height: 10vh;
    }

    .dragon{
        width:20vh; height: 20vh;
        background-repeat: no-repeat;
        background-position: center bottom;
        background-size: contain;
        opacity: 0;
        position: fixed; bottom: 8vh; left:0;
    }
    
    .talk{
        font-family: "SBM";
        font-size:2.3vh; 
        color:#F6BC3E; 
        text-align: center;
        padding-top:2vh;
        padding-left:2vh;
        width:22vh; 
        height: 11vh; 
        position: fixed; 
        bottom: 15vh; 
        left:15vh; 
        background-image: url("infobulle_01.png"); 
        background-position: left bottom;
        background-repeat:  no-repeat; 
        background-size: contain;
    }   
    #popup_mobile{
        width: 90vw;
        height:95.8672vw;
        position: fixed;        
        top: 20vh;
        background-image: url("minting_KR_m.PNG");
        background-size: 90vw 95.8672vw;
        animation: fadein 1s;
        -moz-animation: fadein 1s; /* Firefox */
        -webkit-animation: fadein 1s; /* Safari and Chrome */
        -o-animation: fadein 1s; /* Opera */
        z-index: 9999;
    }
}