@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;}
}

.btn{ display: flex; justify-content: center;  }
	.download { margin-top: 30px; }
	.btn a{ width: 225px; height: 64px; display:flex; align-items: center; justify-content: center; position: relative; border-radius: 60px; background-color: #429BE9; overflow: hidden; }
	.btn a ul li{ font-size: 20px; line-height: 1.5em; font-weight: 600; color:#FFFFFF; letter-spacing: -0.02em; transition: transform .5s; }
	.btn a ul li:last-child{ color: #429BE9; }
	.btn a ul{ height: 30px; overflow: hidden; position: relative; z-index: 1; }
	.btn a:after{ content:""; display: block; width: calc(100% + 32px); aspect-ratio: 1 / 1;  position: absolute; left: 50%; top: 100%; transform: translate(-50%,0); background-color: #fff; border-radius: 50%; transition: top .5s, transform .5s; }

	.btn a:hover ul li{ transform: translateY(-100%); }
	.btn a:hover:after{ transform: translate(-50%,-50%); top: 50%; }
	
	@media (max-width: 660px) {
		.btn a ul li{ font-size: 15px; }
		.btn a ul{ height: 22px; }
		.btn a{ width: 170px; height:50px; }
	}