@font-face {
    font-family: 'YeogiOttaeJalnan';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_four@1.2/JalnanOTF00.woff') format('woff');
    font-weight: normal;
    font-display: swap;
}
#header{display: none}
#footer{display: none}

#intro{background: #EFF8FF;height: 100vh;display: flex;align-items: center;justify-content: center;
    position: relative;
    padding-top: 50px;}
#intro .video_in{border-radius: 20px;padding: 15px;background: #fff;border: 2px solid #111111}
#intro .video_in{width: 1450px;border-radius: 20px;margin: 0 auto;position: relative;
    z-index: 15;max-width: calc(100vw - 20px)}
#intro .video_in video{width: 100%;display: block;border-radius: 10px}
#intro .video_in .title{position: absolute;width: 100%;left: 0;top: -50px}
#intro .video_in > span{position: absolute;right: 0;bottom: 0;font-size: 18px;color: #FFFFFF;font-weight: 700;display: block;right: 40px;bottom: 40px}
#intro .video_in .title strong{color: #fff;font-size: 115px;font-weight: 700; -webkit-text-stroke: 3px #0053AE;text-shadow: 10px 10px 0 #0053AE;display: block;text-align: center;font-weight: 900; -family: 'Ria';font-family: 'KerisKedyuche';line-height: 1;}
#intro .video_in .title strong b{width: 100%;font-family: 'YeogiOttaeJalnan';display: block;
    margin-bottom: 30px;}
#intro .video_in .title strong{display: flex;justify-content: center;align-items: center;justify-content: center;flex-wrap: wrap;font-family: 'KerisKedyuche';}
#intro .video_in .title strong span{color: #70CEFF;font-family: 'KerisKedyuche';}
#intro .bubble{position: absolute;display: none}
#intro .bubble01{left: 112px;top: 154px}
#intro .bubble02{left: 27px;top: 50%;margin-top: 50px;}
#intro .bubble03{right: 70px;top: 50%;margin-top: 90px;}
#intro .bubble03 img{width: 100px}
#intro .bubble01 img{width: 100px}
#intro .bubble02 img{width: 146px}

#intro .video_in .title strong span{transform:  scale(0.7) translateY(20px);transition-duration: 0.5s;opacity: 0}
#intro .video_in .title strong span.b1{transition-delay: 2.3s}
#intro .video_in .title strong span.b2{transform: rotate(-13deg) translateY(-10%) scale(0.7) translateY(20px);margin-left: -0.3%;transition-delay: 2.5s}
#intro .video_in .title strong span.b4{transform: rotate(10deg) translateY(-10%) scale(0.7) translateY(20px);margin-left: -0.5%;z-index: 3;;transition-delay: 2.9s}
#intro .video_in .title strong span.b6{transform: rotate(-9deg) translateY(-2%) scale(0.7) translateY(20px);margin-left: -0.3%;z-index: 6;;transition-delay: 3.3s}
#intro .video_in .title strong span.b5{z-index: 4;;transition-delay: 3.1s}
#intro .video_in .title strong span.b3{margin-left: -0.9%;position: relative;z-index: 2;;transition-delay: 2.7s}


#intro.on .video_in .title strong span{transform: rotate(-13deg) translateY(-10%) scale(1) ;margin-left: -0.3%;opacity: 1}
#intro.on .video_in .title strong span.b2{transform: rotate(-13deg) translateY(-10%) scale(1);margin-left: -0.3%;}
#intro.on .video_in .title strong span.b4{transform: rotate(10deg) translateY(-10%) scale(1);margin-left: -0.5%;z-index: 3;}
#intro.on .video_in .title strong span.b6{transform: rotate(-9deg) translateY(-2%) scale(1);margin-left: -0.3%;z-index: 6;}
#intro.on .video_in .title strong span.b5{z-index: 4;}
#intro.on .video_in .title strong span.b3{margin-left: -0.9%;position: relative;z-index: 2;}

#intro .video_in .title strong b{transform:  scale(0.7) translateY(20px);transition-duration: 1s;opacity: 0;transition-delay: 2s;font-weight: inherit}
#intro.on .video_in .title strong b{transform:  scale(1) translateY(0px);opacity: 1}
/*font-family: 'KerisKedyuche';*/
@media (max-width: 1160px) {
    #intro .video_in .title strong{font-size: 70px;-webkit-text-stroke: 1.5px #0053AE;text-shadow: 5px 5px 0 #0053AE;}
    #intro .video_in .title strong b{
        margin-bottom: 15px;}
    #intro .video_in{border-radius: 10px;padding: 10px}
    #intro .video_in video{border-radius: 6px}
}
@media (max-width: 760px) {
    #intro .video_in .title strong{font-size: 50px}
    #intro{padding-top: 140px;}
    #intro .video_in{padding: 8px}
    #intro .video_in .title{top: -140px}
    #intro .video_in > span{font-size: 9px;bottom: 20px;right: 20px}
    .vid{overflow: hidden;width: calc(100vw - 40px);border-radius: 7px;
        overflow: hidden;}
    #intro .video_in video{width: 120vw;left: -12vw;
        position: relative;}
}