html,
body {
    margin: 0;
    padding: 0;
    text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%;
    -webkit-overflow-scrolling: touch;
    height: 100%;
}

body {
    font-family: 'Noto Serif KR', 'Apple SD Gothic Neo', 'Malgun Gothic', NanumGothic, dotum, sans-serif;
    color: #fff;
    background-color: #000;
}

html.translated-ltr body {
    font-family: serif;
}

.presents {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #000;
    font-family: serif;
    color: #0099d8;
    opacity: 1;
    transition: opacity .4s ease-out;
    z-index: 10000;
}


.presents>div {
    display: flex;
    width: 100%;
    height: 100%;
    align-items: center;
    justify-content: center;
}

.imgbig.mobile {
    display: none
}

.disclaim img,
.presents img {
    width: 237px;
}

.presents span {
    display: inline-block;
    padding-left: 1em;
    transform: translate3d(0, -40px, 0);
    letter-spacing: .3em;
    font-size: 2em;
    font-weight: 400;
}

.presents.on {
    opacity: 0;
}

.presents.zero {
    display: none;
}

.cover,
.title {
    position: relative;
    width: 100%;
    height: 100vh;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    z-index: 1005;
}

.cover {
    position: fixed;
}

.title {
    background: #000;
}

.gifvideo.off,
video.off,
.cover.off {
    display: none;
}

.gifvideo,
video {
    width: 100%;
    height: 100vh;
    z-index: 1;
    object-fit: cover;
    display: block;
}

#gifvideo1,
#video1 {
    position: fixed;
    top: 0;
    left: 0;
    opacity: .2;
}

#video3,
#video2 {
    position: fixed;
    top: 0;
    left: 0;
    opacity: 0;
    z-index: -1;
    transition: opacity 1s ease-out;
}

#video2.on {
    visibility: visible;
    opacity: .2;
    z-index: 1;
}

#video3.on {
    z-index: 1;
    opacity: 1;
    opacity: .2;
}

.cover>div.tit {
    flex: 1;
}

.cover>div:before {
    content: '';
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(128, 0, 192, .1);

}

.cover h1 {
    display: block;
    font-family: 'Noto Sans Korean';
    font-size: 6em;
    margin: 0;
    font-weight: 900;
    opacity: 0;
    transform: translate3d(0, -20px, 0) scale(.95);
    transition: opacity 2s ease-out, transform 6s ease-out;
    text-shadow: 0 0 50px #000, 0 2px 4px rgba(0, 0, 0, .2);
    position: relative;
    z-index: 101;
    word-break: keep-all;
}

.cover.on h1 {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
}

h2 {
    font-size: 4em;
    word-break: keep-all;
}

h2.typing {
    min-height: 1.5em;
}

.story4+.title h2.typing,
em+h2.typing {
    min-height: 3em;
}


h2.typing:not(.on) {
    text-align: left;
    position: relative;
    text-indent: -30000px;
}

h2.typing:before {
    content: '';
    display: block;
    width: 10px;
    height: 10px;
    background: #fff;
    border-radius: 10px;
    position: absolute;
    top: -15px;
    left: 50%;
    margin-left: -5px;
}

h2.typing:not(.on):after {
    content: "";
    display: block;
    width: 2px;
    height: 1em;
    position: absolute;
    top: 0;
    left: 0;
    background: #fff;
    animation: 1s blink infinite;
}

h2.typing.on {
    text-indent: 0;
}

h2.typing {
    position: relative;
}

blockquote.big {
    text-align: center;
    font-size: 4em;
    font-weight: 900;
    font-family: 'Noto Sans Korean';
    line-height: 1.5em;
    min-height: 100vh;
    word-break: keep-all;
    position: relative;
    z-index: 1001;
}

blockquote.big.middle {
    font-size: 2em;
}

blockquote.big b {
    font-weight: 900
}

blockquote.big em {
    display: block;
    margin: 1em 0;
    font-weight: 400;
    font-size: 13px;
    font-style: normal;
    line-height: 1.5em;
    color: #a0a0a0;
}

blockquote.big em.r {
    text-align: right;
}

blockquote.quote {
    position: relative;
    background: rgba(255, 255, 255, .1);
    padding: 2em 4em;
    font-size: .6em;
    margin: 10em auto;
    display: flex;
    align-items: center;
    flex-direction: column;
    width: 700px;
    z-index: 1000;
}

blockquote.quote.blur {
    background: rgba(0, 0, 0, .4);
    backdrop-filter: blur(20px);
}

blockquote.quote p {
    flex: 1;
    position: relative;
    padding: 0 40px;
    display: inline-block;
    clear: both;
    margin: 40px auto;
}

blockquote.quote p:before {
    content: "“";
    color: rgba(255, 255, 255, .2);
    font-size: 4em;
    position: absolute;
    top 10px;
    left: 0;
}

blockquote.quote p:after {
    content: "”";
    color: rgba(255, 255, 255, .2);
    font-size: 4em;
    position: absolute;
    bottom: -30px;
    right: 0;
}


blockquote.quote:before {
    content: "";
    position: absolute;
    display: block;
    top: -10px;
    left: 20px;
    width: 24px;
    height: 24px;
    background-image: url("data:image/svg+xml,%3Csvg fill='%23cc9900' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' viewBox='0 0 212.045 212.045' xml:space='preserve'%3E%3Cpath d='M167.871,0H44.84C34.82,0,26.022,8.243,26.022,18v182c0,3.266,0.909,5.988,2.374,8.091c1.752,2.514,4.573,3.955,7.598,3.954 c2.86,0,5.905-1.273,8.717-3.675l55.044-46.735c1.7-1.452,4.142-2.284,6.681-2.284c2.538,0,4.975,0.832,6.68,2.288l54.86,46.724%0Ac2.822,2.409,5.657,3.683,8.512,3.683c4.828,0,9.534-3.724,9.534-12.045V18C186.022,8.243,177.891,0,167.871,0z'/%3E%3C/svg%3E");
}


blockquote em,
.title em {
    font-style: normal;
    font-size: 13px;
    color: #a0a0a0;
    display: block;
    word-break:keep-all;
}

blockquote em {
    margin-bottom: 40px;
}



article {
    width: 100%;
    max-width: 1000px;
    margin: 0 auto;
    text-align: center;
    font-size: .7em;
    text-align: left;
    color: #a0a0a0;
    word-break: keep-all;

}

article b.anim,
article i {
    color: #fff;
    font-style: normal;
    display: inline;
}

article h3 {
    font-size: 4em;
    font-family: 'Noto Sans Korean';
    font-weight: 600;
    position: relative;
    text-align: center;
    padding: 2em 0;
    color: #fff;
    margin: 40vh 0;
    opacity: 0;
    transform: translate3d(10px, 0, 0);
    transition: opacity 1s ease-in, transform 1s ease-in;
    z-index: 1002;
}

article h3.on {
    transform: translate3d(0, 0, 0);
    opacity: 1;
}

article h3:before,
article h3:after {
    content: '';
    width: 200px;
    height: 3px;
    background: #fff;
    display: block;
    position: absolute;
    left: 50%;
    margin-left: -100px;
    opacity: 0;
    transition: transform 1s ease-in, opacity 1s ease-in;
}

article h3:before {
    top: 0;
    transform: translate3d(-10px, -20px, 0) rotate(-7deg);
}

article h3:after {
    bottom: 0;
    transform: translate3d(-10px, 20px, 0) rotate(-7deg);
}

article h3.on:before {
    opacity: 1;
    transform: translate3d(0, 0, 0) rotate(-7deg);
}

article h3.on:after {
    opacity: 1;
    transform: translate3d(0, 0, 0) rotate(-7deg);
}

article h3 em {
    text-indent: 0;
    display: block;
    font-style: normal;
    font-size: 13px;
    color: #a0a0a0;
    margin: 2em 0 0 0;
}

article p {
    text-indent: 2em;
    letter-spacing: -1px;
    margin: 2em 0;
}

p {
    line-height: 2em;
    font-size: 2em;
}

.disclaim {
    font-size: 13px;
    text-align: center;
    line-height: 4em;
}


iframe.big {
    position: relative;
    width: 80%;
    max-width: 700px;
    height: 400px;
    margin: 0 auto;
    display: block;
    z-index: 100000;
}
.clear+iframe.big{
    margin-top:10em;
}
b.anim {
    display: inline;
    font-weight: inherit;
    transition: background-position 1s linear;
    -webkit-transition: background-position 1s linear;
    background-image: -webkit-gradient(linear, left top, right top, color-stop(50%, transparent), color-stop(0, rgba(255, 255, 0, .6)));
    background-image: linear-gradient(90deg, transparent 50%, rgba(255, 255, 0, .6) 0);
    background-position: 0;
    background-size: 200%;
    margin-top: 1px;
    text-indent: 0;
}

b.anim.on {
    background-position: -100%;
}

span.count {
    text-indent: -30000px;
    display: inline-block;
    text-align: left;
}

span.count.on {
    text-indent: 0;
    text-align: right;
}

.grad1,
.grad2 {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    color: rgba(0, 0, 0, 0);
    z-index: 101;
}

.grad2::before,
.grad2::after,
.grad1::before,
.grad1::after {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 3em;
    height: 3em;
    content: ".";
    mix-blend-mode: screen;
    animation: 44s -27s move infinite ease-in-out alternate;
    color: rgba(0, 0, 0, 0);
}

.grad1::before {
    text-shadow: 1.3790730522em 0.5241080864em 7px rgba(0, 255, 13, 0.9), -0.2085128684em 0.0754634714em 7px rgba(209, 255, 0, 0.9), 1.6184686602em 2.419429838em 7px rgba(0, 255, 221, 0.9), 1.5021685943em 1.0650429722em 7px rgba(255, 160, 0, 0.9), 1.4705818475em 1.0410271382em 7px rgba(228, 0, 255, 0.9), 2.3369533885em -0.2035743357em 7px rgba(240, 255, 0, 0.9), 1.3088372994em 1.9832267974em 7px rgba(255, 225, 0, 0.9), 2.085658491em 0.2104545017em 7px rgba(154, 0, 255, 0.9), 1.9379617537em 0.9172686662em 7px rgba(0, 255, 144, 0.9), 0.8384989751em 0.4924825286em 7px rgba(255, 236, 0, 0.9), 2.1761699646em 0.0056367791em 7px rgba(255, 82, 0, 0.9), -0.2349443956em 2.3210222436em 7px rgba(0, 255, 47, 0.9), 0.7315336828em 1.018295065em 7px rgba(140, 0, 255, 0.9), 0.2172525506em 1.5505725096em 7px rgba(255, 0, 254, 0.9), 1.5291146655em 1.5964606256em 7px rgba(154, 255, 0, 0.9), 0.2764887072em -0.2946660254em 7px rgba(223, 0, 255, 0.9), 0.5628623433em 0.4719505716em 7px rgba(255, 114, 0, 0.9), 0.7770312462em 2.3506240427em 7px rgba(196, 255, 0, 0.9), 1.0694582204em 0.8762392172em 7px rgba(255, 203, 0, 0.9), 0.8267214825em -0.4620273132em 7px rgba(0, 255, 37, 0.9), 1.0861156731em -0.4427502711em 7px rgba(62, 0, 255, 0.9), 2.1106088523em -0.2215707953em 7px rgba(145, 0, 255, 0.9), 0.9184961788em 2.3143579829em 7px rgba(139, 255, 0, 0.9), 1.3028358258em -0.3567208035em 7px rgba(8, 0, 255, 0.9), -0.4590048874em -0.1882530348em 7px rgba(255, 0, 41, 0.9), 1.6513620598em -0.2732587934em 7px rgba(255, 0, 207, 0.9), 0.4211458573em 2.2045087068em 7px rgba(255, 213, 0, 0.9), 2.2774167625em -0.4588102813em 7px rgba(44, 255, 0, 0.9), 0.3551476093em 2.0244049389em 7px rgba(0, 44, 255, 0.9), 0.1133794487em 0.4488063263em 7px rgba(0, 3, 255, 0.9), 2.038742352em -0.494217712em 7px rgba(255, 0, 144, 0.9), -0.3685556922em 0.487699409em 7px rgba(0, 255, 251, 0.9), 0.5254440855em 2.1491616221em 7px rgba(0, 184, 255, 0.9), 0.2148331401em 1.6198127323em 7px rgba(76, 255, 0, 0.9), 2.1246234676em 0.1609083476em 7px rgba(255, 22, 0, 0.9), -0.1023506754em -0.2687334319em 7px rgba(69, 0, 255, 0.9), 1.8165893707em 0.7373642094em 7px rgba(255, 123, 0, 0.9), 0.3061601732em 0.7539796465em 7px rgba(117, 255, 0, 0.9), 0.4319626314em 1.4552369093em 7px rgba(97, 0, 255, 0.9), 2.0228195648em -0.0133112909em 7px rgba(255, 0, 252, 0.9), 0.006075564em 0.646393879em 7px rgba(73, 0, 255, 0.9);
    animation-duration: 44s;
    animation-delay: -27s;
}

.grad1::after {
    text-shadow: 0.9142934337em 2.3315964452em 7px rgba(255, 0, 138, 0.9), 0.9602537386em 0.433409523em 7px rgba(0, 117, 255, 0.9), 2.1170789113em 1.6111406037em 7px rgba(96, 0, 255, 0.9), 0.3899731409em 0.358262796em 7px rgba(120, 0, 255, 0.9), 1.8644731914em 0.6044847349em 7px rgba(207, 255, 0, 0.9), -0.0095240101em 2.0781917974em 7px rgba(0, 252, 255, 0.9), 0.1411382251em 0.4502812277em 7px rgba(246, 255, 0, 0.9), 1.9172041538em 2.27551057em 7px rgba(0, 255, 89, 0.9), 0.3964206342em 0.4132286538em 7px rgba(255, 107, 0, 0.9), 0.7757631029em 2.0468238506em 7px rgba(255, 0, 221, 0.9), 0.8355328268em 0.8170461132em 7px rgba(255, 0, 77, 0.9), 1.7812814442em 1.9121509739em 7px rgba(255, 0, 115, 0.9), 0.4370227213em 0.69482998em 7px rgba(255, 0, 237, 0.9), 0.1121571793em -0.0518376386em 7px rgba(102, 255, 0, 0.9), -0.2770753712em 1.0037714868em 7px rgba(0, 255, 195, 0.9), 1.5852277041em 0.5166664982em 7px rgba(0, 255, 186, 0.9), 1.65598163em 0.5580211642em 7px rgba(223, 255, 0, 0.9), 1.337380396em 1.6555673264em 7px rgba(255, 246, 0, 0.9), 1.4118675859em 1.2224831929em 7px rgba(0, 131, 255, 0.9), 1.1992225375em 1.7074883192em 7px rgba(64, 0, 255, 0.9), 1.8948349133em 0.0408078457em 7px rgba(187, 255, 0, 0.9), 0.5197319866em -0.4556171728em 7px rgba(0, 255, 142, 0.9), 1.6301005564em 0.9013407295em 7px rgba(255, 0, 19, 0.9), 2.0280959543em 2.2145299197em 7px rgba(255, 174, 0, 0.9), -0.3358087699em -0.0077433979em 7px rgba(0, 255, 26, 0.9), 0.1435060277em 1.8997415205em 7px rgba(0, 255, 138, 0.9), 0.5021809188em 2.4045351048em 7px rgba(255, 240, 0, 0.9), 0.3038378742em 1.2963164904em 7px rgba(0, 255, 13, 0.9), 1.9072929672em 1.9588225939em 7px rgba(0, 255, 217, 0.9), 0.540761807em 2.0541528359em 7px rgba(76, 255, 0, 0.9), 0.7619346307em 1.212122211em 7px rgba(255, 29, 0, 0.9), 0.9647990158em -0.0683991805em 7px rgba(255, 0, 94, 0.9), -0.2577000556em 0.5311851618em 7px rgba(255, 161, 0, 0.9), 1.937057082em 1.2572024776em 7px rgba(72, 255, 0, 0.9), 0.1848076231em 0.886203535em 7px rgba(86, 255, 0, 0.9), 1.5880019104em 1.3379148507em 7px rgba(255, 16, 0, 0.9), 0.5230412907em 1.5527875353em 7px rgba(0, 255, 160, 0.9), 0.5601354315em 0.262887628em 7px rgba(255, 27, 0, 0.9), -0.3177970793em 0.1746972311em 7px rgba(255, 0, 84, 0.9), -0.0525017031em 2.3477067269em 7px rgba(255, 0, 203, 0.9), 0.3710510945em 2.0539337298em 7px rgba(255, 232, 0, 0.9);
    animation-duration: 43s;
    animation-delay: -32s;
}

.grad2::before {
    text-shadow: 0.3937918432em 0.4620259em 7px rgba(255, 88, 0, 0.9), 0.8525536728em -0.2270142735em 7px rgba(255, 0, 136, 0.9), 1.2454465924em 2.4847957676em 7px rgba(0, 255, 144, 0.9), 0.1517258793em 0.096097138em 7px rgba(255, 0, 233, 0.9), 1.3043804595em 1.8409374451em 7px rgba(255, 224, 0, 0.9), 2.4483846778em 2.282835198em 7px rgba(0, 255, 221, 0.9), -0.2295323012em 1.8120855057em 7px rgba(21, 0, 255, 0.9), 0.8291340238em 1.5669622782em 7px rgba(255, 0, 50, 0.9), 0.2303170473em 1.2341229981em 7px rgba(91, 255, 0, 0.9), 0.6252842106em -0.1398067875em 7px rgba(0, 255, 140, 0.9), 1.6488888636em 0.3893849478em 7px rgba(0, 255, 88, 0.9), 0.0814503856em 0.3764815768em 7px rgba(34, 255, 0, 0.9), 1.884712984em 2.052818667em 7px rgba(16, 255, 0, 0.9), 0.8013888212em 2.3190999513em 7px rgba(33, 0, 255, 0.9), 1.8098667343em 0.254807666em 7px rgba(0, 219, 255, 0.9), 2.0872967616em 0.5755032316em 7px rgba(148, 255, 0, 0.9), 2.2175095688em 2.164277632em 7px rgba(255, 0, 89, 0.9), 0.7826221574em 1.8282319383em 7px rgba(175, 255, 0, 0.9), 1.0388342709em -0.4011818051em 7px rgba(0, 255, 98, 0.9), 1.9101989121em 1.520203em 7px rgba(195, 0, 255, 0.9), 0.4399627026em 1.1584810337em 7px rgba(0, 102, 255, 0.9), 0.1559360528em 1.4537958031em 7px rgba(47, 0, 255, 0.9), 0.1278980244em 1.5405703175em 7px rgba(0, 240, 255, 0.9), 1.9981998115em 1.1563623626em 7px rgba(233, 255, 0, 0.9), 0.5763108929em 1.9754363243em 7px rgba(255, 0, 162, 0.9), 1.799413068em 0.908512478em 7px rgba(0, 179, 255, 0.9), 1.8127855756em 0.3582317838em 7px rgba(255, 122, 0, 0.9), 0.983851006em 2.3198501836em 7px rgba(255, 0, 247, 0.9), -0.3280728487em 2.4512707496em 7px rgba(65, 0, 255, 0.9), 0.7865566512em 2.2849984922em 7px rgba(0, 167, 255, 0.9), -0.2386149914em 1.8231060638em 7px rgba(255, 0, 51, 0.9), 0.1414642444em 1.9077114044em 7px rgba(0, 255, 128, 0.9), 1.5743843636em 1.0424956122em 7px rgba(74, 255, 0, 0.9), 0.1383060177em 2.343217211em 7px rgba(255, 0, 171, 0.9), 0.4215459963em 1.5954457956em 7px rgba(255, 110, 0, 0.9), -0.4881583577em 0.4904655031em 7px rgba(255, 0, 50, 0.9), 0.7105055214em -0.2280649432em 7px rgba(0, 66, 255, 0.9), 0.8916941859em -0.2127189834em 7px rgba(253, 255, 0, 0.9), 0.2049496393em -0.4554652876em 7px rgba(0, 255, 146, 0.9), 0.6316443885em 2.4352307196em 7px rgba(59, 0, 255, 0.9), 0.9992687195em 1.5775477209em 7px rgba(0, 163, 255, 0.9);
    animation-duration: 42s;
    animation-delay: -23s;
}

.grad2::after {
    text-shadow: 0.1727306784em 0.2228585313em 7px rgba(255, 244, 0, 0.9), 1.6608461177em -0.4592645485em 7px rgba(255, 213, 0, 0.9), 1.7946186854em 0.9193472622em 7px rgba(208, 0, 255, 0.9), 1.9578917248em 0.4474507408em 7px rgba(0, 39, 255, 0.9), 0.6575811813em 0.4055354161em 7px rgba(157, 255, 0, 0.9), -0.209770525em 1.7174696758em 7px rgba(100, 0, 255, 0.9), 0.5273330162em -0.2550646177em 7px rgba(255, 0, 163, 0.9), 2.3945959909em 1.0400412914em 7px rgba(44, 255, 0, 0.9), 0.2448222455em 2.1949829746em 7px rgba(201, 255, 0, 0.9), 2.076620836em 2.2713255938em 7px rgba(0, 255, 200, 0.9), 0.0746502891em 1.8867084557em 7px rgba(138, 255, 0, 0.9), 1.2000875691em -0.2021268445em 7px rgba(255, 111, 0, 0.9), 1.4488400258em 1.6091328968em 7px rgba(0, 194, 255, 0.9), 0.3833835535em -0.0539722787em 7px rgba(235, 255, 0, 0.9), 1.3655742136em -0.1744486089em 7px rgba(255, 117, 0, 0.9), 0.2490194622em 2.191222592em 7px rgba(222, 0, 255, 0.9), 2.0034583804em 0.0576034347em 7px rgba(0, 255, 123, 0.9), 0.1564336395em 2.4680243757em 7px rgba(255, 0, 254, 0.9), 0.4182672739em -0.1862096164em 7px rgba(158, 255, 0, 0.9), -0.4934521458em 2.2883815201em 7px rgba(255, 225, 0, 0.9), 2.4046024974em 2.4936882889em 7px rgba(0, 255, 32, 0.9), 0.6412537461em 1.725823113em 7px rgba(0, 159, 255, 0.9), 1.5055411553em 0.9809406773em 7px rgba(0, 58, 255, 0.9), 1.0415092817em 0.7982278955em 7px rgba(252, 255, 0, 0.9), 0.2672455375em -0.2419777564em 7px rgba(56, 0, 255, 0.9), 1.2011036303em 0.0866012898em 7px rgba(255, 214, 0, 0.9), 0.1415440393em 1.112032871em 7px rgba(0, 91, 255, 0.9), 0.2990856191em 2.4106056044em 7px rgba(255, 237, 0, 0.9), -0.3429030816em -0.0264145098em 7px rgba(0, 255, 1, 0.9), 1.0826492238em 0.8105215095em 7px rgba(0, 141, 255, 0.9), 1.3402408512em 2.0817308999em 7px rgba(0, 255, 33, 0.9), 1.7144461494em 1.8131539122em 7px rgba(255, 122, 0, 0.9), 1.0997496903em 1.833255181em 7px rgba(1, 255, 0, 0.9), 1.2367228354em 2.2124651015em 7px rgba(255, 56, 0, 0.9), 1.0179201731em -0.1336304215em 7px rgba(255, 55, 0, 0.9), 0.8380004377em 1.2750712359em 7px rgba(2, 0, 255, 0.9), 1.7048586016em -0.2771320285em 7px rgba(70, 255, 0, 0.9), 1.3708460699em 0.1324959602em 7px rgba(99, 255, 0, 0.9), 0.2940630427em -0.1817308268em 7px rgba(224, 0, 255, 0.9), 2.1332730663em 0.8303560929em 7px rgba(255, 220, 0, 0.9), 0.9957528714em 1.1863723386em 7px rgba(0, 255, 96, 0.9);
    animation-duration: 41s;
    animation-delay: -19s;
}

@keyframes move {
    from {
        transform: rotate(0deg) scale(12) translateX(-20px);
    }

    to {
        transform: rotate(360deg) scale(18) translateX(20px);
    }
}

.spot {
    position: absolute;
    top: 0;
    left: 0;
    width: 150px;
    height: 150px;
    background: radial-gradient(circle, #fff 0, rgba(255, 255, 255, .7) 10%, rgba(255, 255, 255, .35) 30%, transparent 70%);
    opacity: 0;
    animation: 1.3s ease-in infinite spot;
    transition: transform3d(-75px, -75px, 0);
}

.vh {
    height: 100vh;
}

.sp {
    min-height: 100vh;
}

.story1 {
    padding-top: 180vh;
    padding-bottom: 50vh;
    background-color: #5d0076;
    background: linear-gradient(45deg, #5d0076, #330040);
    background-attachment: fixed;
}

.story1 .box p {
    text-align: center;
}

.story4 img,
.story1 img {
    position: sticky;
    top: 10vh;
    float: left;
    z-index: 10;
    width: 40vw;
}

.story4 .float,
.story1 .float {
    width: 50vw;
    float: right;
    padding-right: 2em;
    box-sizing: border-box;
    word-break: keep-all;
}

.story4_2 .float,
.story4_1 .float,
.story1_1 .float {
    padding-top: 40vh;
}


.float blockquote {
    margin: 0 0 25em 0;
    width: 100%;
    box-sizing: border-box;
    font-size: .6em;
}

.story1 .down {
    display: block;
    text-indent: -30000px;
    border: 3px solid #fff;
    width: 30px;
    height: 30px;
    border-left-color: transparent;
    border-top-color: transparent;
    transform: rotate(45deg);
    position: absolute;
    top: 80vh;
    left: 50%;
    margin-left: -12.5px;
    animation: 1s ease-in-out infinite blink;
}

.story2 .box div,
.story1 .box div {
    background: rgba(0, 0, 0, .7);
    padding-left: 3em;
    padding-right: 3em;
    text-shadow: 0 0 5px #000;
}

.story2 .box:first-child {
    height: 80vh;
}

.story2 .title {
    height: 120vh;
}

.story2 article {
    position: relative;
    z-index: 20;
}

.story2 article h3 {
    margin-top: 0;
}

.story3 {
    background-color: #2f003b;
    background: linear-gradient(45deg, #2f003b, #1d0024);
    background-attachment: fixed;
    position: relative;
    z-index: 2;
    min-height: 150vh;
}


.story5,
.story11,
.story10,
.story9,
.story6,
.story6_2{
    padding-bottom: 30vh;
}

.story2_1,
.story13,
.story12_2,
.story12,
.story11_2,
.story10_3,
.story10_2,
.story9_2,
.story8,
.story7,
.story6_3,
.story6_4 {
    padding: 30vh 0;
}
.story9_2,
.story2_1,
.story8 {
    position: relative;
    background: #000;
}

.story3,
.story2_1,
.story8,
.story9 {
    z-index: 1000;
}

.story9 {
    margin-top: 100vh;
    padding-top: 1px;
}
.story9+.imgbig{
    position:relative;
    z-index:1000;
}
.story14 .box{
    height:auto;
    padding-bottom:40vh;
}
.story14 h3{
    margin-bottom:20vh;
}
.story14 .box {
    padding-bottom:0;
}
.story14 .box p {
    text-indent:0;
    color:#fff;
    font-size:2em;
}
.story14 article{
    padding-bottom:20em;
}
.story11 article h3{
    margin-top:20vh;
}
.story11_2 iframe{
    margin-top:20em;
}
.story13 iframe{
    margin:20em auto;
}
iframe+blockquote.big {
    margin-top: 40vh
}

@keyframes blink {
    0% {
        opacity: 0;
    }

    50% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

@keyframes spot {
    0% {
        opacity: 0;
        transform: scale(0)
    }

    10% {
        opacity: 1;
        transform: scale(1);

    }

    11% {
        opacity: 0;
        transform: scale(0);
    }

    100% {
        opacity: 0;
    }
}

.imgbig {
    height: 100vh;
    width: 100%;
    background-attachment: fixed;
    background-size: cover;
    background-position: 50% 50%;
}

.box {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    flex-direction: column;
    position: relative;
    z-index: 1002;
}

.box p {
    font-size: 1.5em;
    word-break: keep-all;
}

figure {
    opacity: 0;
    width: calc(100% - 40px);
    max-width: 600px;
    transition: opacity .5s ease-in-out;
}

figure.on {
    opacity: 1;
}

#chart1 {
    width: 100%;
    margin: 0 auto;
}

#chart1 g.x.axis g.tick line,
#chart1 g.y.axis {
    visibility: hidden;
}

#chart1 g.x.axis path+g.tick line {
    visibility: visible;
    stroke: rgb(51, 51, 51) !important;
}

#chart1 text {
    font-family: 'Noto Sans Korean', 'Apple SD Gothic Neo', 'Malgun Gothic', dotum, sans-serif;
    fill: #a0a0a0;
}

#chart1 svg>g:first-child>text:nth-child(6) {
    transform: translate3d(-7px, -80px, 0);
}

#chart1 svg>g:first-child>text:nth-child(16) {
    transform: translate3d(10px, -80px, 0);
}

#chart1 g.x.axis path+g.tick text {
    transform: translate3d(50px, 0, 0);
}

#chart1 g.x.axis g.tick:nth-of-type(7) text{
    transform: translate3d(20px, 0, 0) !important;
}


div.clear {
    clear: both;
}

div.detail {
    word-break: keep-all;
    color: #a0a0a0;
}



div.detail b {
    font-weight: normal;
    color: #fff;
}

dl.credit {
    padding: 30vh 0;
    display: block;
    width: 230px;
    margin: 0 auto;
    font-family: 'Noto Sans Korean', 'Apple SD Gothic Neo', 'Malgun Gothic', dotum, sans-serif;
    color: #a0a0a0;
}

dl dd {
    color: #ffffff;
    margin-top: .2em;
    margin-bottom: 1em;
}

dl dd a {
    color: #ffffff;
    text-decoration: none;
}

dl dd a:hover {
    text-decoration: underline;
}

dl dd i {
    font-style: normal;
    color: #a0a0a0;
}

.disclaim {
    padding: 30vh 0;
    font-family: 'Noto Sans Korean', 'Apple SD Gothic Neo', 'Malgun Gothic', dotum, sans-serif;
    color: #a0a0a0;
}

table {
    font-family: 'Noto Sans Korean', 'Apple SD Gothic Neo', 'Malgun Gothic', dotum, sans-serif;
    margin: 0 auto;
    border-collapse: collapse;
}

table.timeline {
    width: 100%;
    max-width: 600px;
    margin: 0 auto;
    height: 2400px;
    position: relative;
    z-index: 1001;
}

table.timeline th,
table.timeline td {
    border: 1px solid #404040;
    padding: 5px;
    word-break: keep-all;
}

table.timeline thead th {
    border-width: 3px 1px;
    font-size: 13px;
    position: sticky;
    top: -3px;
    background: #202020;
    height: 50px;
}

table.timeline tbody th {
    font-size: 13px;
    height: 150px;
}

table.timeline tbody td {
    width: 140px;
    text-align: center;
    text-shadow: 0 0 2px rgba(0, 0, 0, .2);
    font-weight: 700;
    font-size: 1.2em;
}

table.timeline tbody i {
    font-style: normal;
    font-size: 1.8em;
}

table.timeline td.exercise {
    background: rgba(68, 149, 68, .5);
}

table.timeline td.lunch,
table.timeline td.dinner {
    background: rgba(40, 40, 19, .5);
}

table.timeline td.pt {
    background: rgba(100, 49, 49, .5);
}

table.timeline td.gt {
    background: rgba(153, 0, 0, .5);
}

table.timeline td.dance {
    background: rgba(176, 48, 0, .5);
}

table.timeline td.vocal {
    background: rgba(100, 14, 48, .5);
}

table.timeline td.sleep {
    background: rgba(0, 0, 0, .5);
}

table.timeline td.live {
    background: rgba(102, 37, 102, .5)
}

table.timeline td.jumho {
    background: rgba(48, 48, 48, .5);
}

table.timeline td.school {
    background: rgba(0, 51, 153, .5);
}

table.article {
    width: 100%;
    max-width: 600px;
    margin: 0 auto;
}

table.article th {
    text-align: left;
    padding: 4em 0 1em 0;
    font-size: 1em;
    font-weight: 600;
    border-bottom: 3px solid #a0a0a0;
}

table.article tr td {
    border-bottom: 1px solid #303030;

}

table.article td a {
    color: #a0a0a0;
    text-decoration: none;
    font-size: 1.5em;
    font-weight: 300;
}

table.article td a:hover {
    color: #fff;
}

table.article td img {
    width: 150px;
    display: block;
    margin: 10px 0;
    border: 1px solid #303030;
}

.fullbg {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background-size: cover;
    opacity: 0;
    transition: opacity 2s ease-in-out;
    background-position: 50% 50%;
}

.fullbg.on {
    z-index: 2;
    opacity: 1;
}

.fullbg.bg1 {
    background-image: url('./i/01p.webp');
}

.fullbg.bg2 {
    background-image: url('./i/02pa.webp');
}

.fullbg.bg3 {
    background-image: url('./i/03pa.webp');
}

.fullbg.bg4 {
    background-image: url('./i/04pa.webp');
}

.fullbg.bg5 {
    background-image: url('./i/05pa.webp');
}

.fullbg.bg6 {
    background-image: url('./i/06p.webp');
}

.fullbg.bg7 {
    background-image: url('./i/07pa.webp');
}

.fullbg.bg8 {
    background-image: url('./i/08pa.webp');
    transition: all .2s ease-in;
}

.fullbg.zero {
    opacity: 0;
    z-index: -1;
}


.fullbg.end {
    position: static;
    width: 1px;
    height: 50vh;
    overflow: hidden;
    background: none;
}

.title4_1,
.title4,
.title5,
.story4,
.story4_1,
.story5 {
    background-color: #202020;
}
.buttons {
    padding-bottom: 30vh
}

.buttons button {
    -webkit-appearance: none;
    user-select: none;
    display: block;
    background: #101010;
    color: #fff;
    font-size: 1em;
    border: 0;
    margin: 30px auto;
    width: 560px;
    max-width: calc(100% - 40px);
    padding: 20px;
    cursor: pointer;
    transition: all .2s ease-in-out;
    transform: translate3d(0, 0, 0);
    box-shadow: 0 0 1px rgba(255, 255, 255, .2);
    text-align: left;
    word-break: keep-all;
}

.buttons button[disabled] {
    opacity: .5;
}

.buttons button:hover {
    box-shadow: 0 0 10px rgba(255, 255, 255, .5);
    transform: translate3d(0, 5px, 0)
}


.buttons button em {
    font-style: normal;
    font-size: .7em;
    color: #a0a0a0;
    padding-left: 20px;
}

.buttons button b {
    display: block;
    font-weight: bold;
    font-size: 1.5em;
    border-top: 1px solid #606060;
    margin-top: 20px;
    padding: 20px 0 0 0;
    line-height: 1.5em;
}

.dialog {
    position: fixed;
    top: 0;
    background: #000;
    padding-top: 40px;
    box-shadow: 0 20px 20px rgba(0, 0, 0, .2);
    z-index: 10000;
}

.dialog .close{
    -webkit-appearance: none;
    position: absolute;
    top: 2px;
    right:0; 
    text-indent: -30000px;
    background: none;
    border: 0;
    width: 60px;
    height: 60px;
    cursor:pointer;
}

.dialog .close:before,
.dialog .close:after{
    content: '';
    position: absolute;
    top: 0;
    right:50%;
    width: 1px;
    height: 40px;
    background: #fff;
    transform: rotate(45deg);
}

.dialog .close:after,
dialog .close:after {
    transform: rotate(-45deg);
}
@media all and (max-width:1110px) {

    .cover h1 {
        font-size: 5em;
    }


    article {
        width: calc(100% - 40px);
        margin: 0 auto;
    }
}

@media all and (max-width:925px) {
    .cover h1 {
        font-size: 4em;
    }
}

@media all and (max-width:785px) {
    .box {
        width: calc(100% - 40px);
        margin: 0 auto;
    }
}

@media all and (max-width:735px) {
    .cover h1 {
        font-size: 3em;
    }

    iframe.big {
        height: 50vh;
    }

    .story4 img,
    .story1 img {
        float: none;
        width: 100%;
        top: 0;
        position: relative;
        z-index: 10;
    }

    .story4 .float,
    .story1 .float {
        float: none;
        width: 100%;
        max-width: calc(100% - 40px);
        margin: 0 auto;
        padding-right: 0;
        padding-bottom: 40px;
        position: relative;
        z-index: 1002;
    }

    .story1_2.sp img {
        margin-bottom: 30vh;
    }



    blockquote.quote.blur {
        background: rgba(0, 0, 0, .8);
    }

    blockquote.big.countquote {
        font-size: 2.5em;
    }
}

@media all and (max-width:640px) {
    table.article {
        max-width: calc(100% - 40px);
    }

    table.article td a {
        font-size: 1.2em;
    }

    .box p {
        font-size: 1.3em;
    }


}

@media all and (max-width:600px) {
    table.timeline tbody td {
        font-size: 1em;
    }

    article h3 {
        font-size: 3em;
    }

    article p {
        font-size: 1.5em;
        line-height: 2.4em;
    }

    blockquote.big.middle {
        font-size: 1.2em
    }

    .buttons button {
        width: 100%;
    }


}

@media all and (max-width:512px) {
    dialog {
        max-width: 100%;
        width: 100% !important;
    }

    video {
        display: none;
    }

    iframe.big {
        width: 100%;
    }


    .story9 {
        margin-top: 0;
    }

    .imgbig.mobile,
    .gifvideo {
        display: block;
    }


    #gifvideo1 {
        background-image: url('i/intro.webp');
        background-repeat: no-repeat;
        background-size: cover;
        background-position: 50% 50%;
        z-index: 900;
    }

    .imgbig {
        background-attachment: scroll;
    }

    .story12+.imgbig {
        background-position: 25% 50%;
    }


    .presents span {
        font-size: 1.2em;
        transform: translate3d(0, -35px, 0);
        padding-left: .6em
    }

    .disclaim {
        font-size: 12px;
    }

    .disclaim img,
    .presents img {
        width: 180px;
    }

    .box p {
        font-size: 1.3em;
    }

    #video1 {
        position: absolute;
        top: auto;

    }

    table.timeline tbody {
        background: #000;
    }

    blockquote.big {
        font-size: 2.9em;
    }

    table.article td a {
        font-size: .9em;
    }

    table.article td img {
        width: 100px;
    }

    .box p span {
        display: block;
    }

    h2 {
        font-size: 2em;
    }

    .story4+.title h2.typing {
        min-height: 4.5em;
    }

    blockquote.quote {
        position: relative;
        padding: 2em 1em;
        font-size: .6em;

        backdrop-filter: blur(20px);
        z-index: 1000;
    }


    .fullbg.bg1 {
        background-position: right 50%;
    }

    .fullbg.bg7 {
        background-position: 50% 50%;
    }

    .fullbg.bg3 {
        background-position: 10% 50%;
    }

    .fullbg.bg2 {
        background-position: 10% 50%;
    }

    .fullbg.bg4 {
        background-position: 50% 50%;
    }

    .fullbg.bg5 {
        background-position: 90% 50%;
    }

    .fullbg.bg6 {
        background-position: 80% 50%;
    }

    .fullbg.bg8 {
        background-position: 50% 50%;
    }

    .story10+.imgbig {
        background-position: 80% 50%;
    }

    .story10_2+.imgbig {
        background-position: 60% 50%;
    }

    .story11+.imgbig {
        background-position: 70% 50%;
    }

    .story1 {
        padding-bottom: 80vh;
    }

}