@font-face {
    font-family: 'GmarketSansMedium';
    src: url('https://fastly.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/GmarketSansMedium.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

body,p,h1,h2,h3,p,ul{margin: 0; padding: 0; font-family: GmarketSansMedium; }
body {overflow-x: hidden;}
html, body {height: 100%}

.bg{background: url(../img/bg/2p.png); background-size: cover;}
.bg1 {background: url(../img/bg/2p1.png); background-size: cover; background-attachment: fixed}

.bh {position: relative; top: 100px;right: -450px; }
.bh img{width: 400px; border-radius: 10px; box-shadow: 2px 2px 2px black }
.happy {position: relative; top: 130px;left: 130px; }
.happy img{width: 500px; border-radius: 10px; box-shadow: 2px 2px 2px black }
.sad {position: relative; top: 150px; left: 80px; }
.sad img{width: 400px; border-radius: 10px; box-shadow: 2px 2px 2px black }



.textbox1 {margin-top: 100px;margin-left: 50px;width: 320px; background:white;padding: 20px;border-radius: 10px; box-shadow: 2px 2px 2px black }
.textbox2 {margin-top: 250px; margin-left: 350px;width: 320px;background:white; padding: 20px;border-radius: 10px; box-shadow: 2px 2px 2px black }
.textbox3 {margin-top: 100px; margin-left: 320px;width: 320px;background:white; padding: 20px;border-radius: 10px; box-shadow: 2px 2px 2px black }


.chat-bubble {
    position: relative;
    padding: 20px 25px;
    border-radius: 20px;
    max-width: 160px;
    color: #000000;
    font-size: 20px;
    line-height: 1.4;
    background: #FFDC5E;
    align-self: flex-end;
    margin-top: -300px;
    margin-left: 170px;
}

.chat-bubble::after {
    content: "";
    position: absolute;
    top: 70%;
    right: -10px;
    transform: translateY(-50%);
    border: 10px solid transparent;
    border-left-color: #FFDC5E;
    border-right: 0;
    margin-top: -4px;
}

.wrap{width: 1000px; margin: auto; padding-bottom: 100px}
.wrapper{height: auto; min-height: 100%}

.title{color:black;font-size: 120px; padding-top: 100px; text-shadow: -7px 7px 0px #B29BE3;}

.title2{font-size: 60px; padding-top: 180px; text-align: center; color: white; text-shadow: 0px 4px 2px black;}
.tebo1 {position: relative;margin-top: 150px; margin-left: 40px;width: 350px; padding: 20px; background: white; border-radius: 10px; z-index: 1}
.tebo2 {position: relative;margin-top: -15px; margin-left: 200px;width: 300px; padding: 20px; background: white; border-radius: 10px; z-index: 1}
.tebo3 {position: relative;margin-top: 180px; margin-left: 450px;width: 380px; padding: 20px; background: white; border-radius: 10px; z-index: 1}
.tebo4 {position: relative;margin-top: 100px; margin-left: 100px;width: 290px; padding: 20px; background: white; border-radius: 10px; z-index: 1}

.tebo5 {position: relative;margin: auto;margin-top: 150px;width: 620px; padding: 20px; text-align: center;background: white; 
    border-radius: 10px; z-index: 1}



.bgbl{position: relative; transform: translateY(-100%); bottom: 0px;width: 100%; height: 800px; 
    background: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 1.0)); z-index: 0}


.click{position: relative;text-align: center; padding: 50px; padding-top: 100px; color: white; font-size: 20px; z-index: 1}
.click a{text-decoration: none; color: white;}

.fadein{opacity: 0;animation: fadein 0.5s forwards; animation-delay: 1s}



@keyframes fadein{
    0% {opacity: 0}
    100% {opacity: 1}
}

.cometi{opacity: 1;animation: upt 0.8s forwards;}

@keyframes upt{
      0% {
        transform: translate(-700px, 0px) scale(1.0);}
    65%{transform: translate(70px, 0px);}
    80%{transform: translate(-20px, 0px);}

    100% {transform: translate(0px, 0px) scale(1.0);}
}

.comeup{opacity: 1;animation: up 0.5s forwards;}
.comeup1{opacity: 0;animation: up 0.5s forwards; animation-delay: 0.8s}
.comeup2{opacity: 0;animation: up 0.5s forwards; animation-delay: 1.1s}
.comeup3{opacity: 0;animation: up 0.5s forwards; animation-delay: 0.5s}

@keyframes up{
      0% {
        transform: translate(0px, 150px) scale(0.5);
        opacity: 0;
    }
    50% {
        transform: translate(0, 0px) scale(1);
        opacity: 1;
    }
    80% {
        transform: translate(0px, 5px) scale(0.95);
    }
    100% {
        transform: translate(0, 0) scale(1);
        opacity: 1;
}
}


.comein{opacity: 1; animation: in 0.8s forwards;}
@keyframes in{
    0% {
        transform: translate(0px, 200px); opacity: 0;
    }
    100% {transform: translate(0px, 0px); opacity: 1}
}