html, body, div, span, applet, object, iframe, p, blockquote, pre, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; }
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; }
ol, ul { list-style: none; }
blockquote, q { quotes: none; }
blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; }
table { border-collapse: collapse; border-spacing: 0; }
textarea { resize: none; }
.yukle { width: 100%; height: 100vh; position: fixed; left: 0; top: 0; overflow: hidden; background: transparent; transition: all .3s cubic-bezier(.645,.045,.355,1); z-index: 9999; pointer-events: none; display: flex; flex-wrap: wrap; flex-direction: row; align-items: center; justify-content: center; }
.yukle.active { opacity: 1; pointer-events: auto; visibility: visible; }
.yukle .logo { width: 185px; position: absolute; top: 20px; z-index: 95; animation: sdb10 2s infinite; z-index: 99999999; opacity: 0; transition: all .6s cubic-bezier(.645,.045,.355,1); visibility: hidden; }
.yukle.active .logo { top: calc(50% - 32px); opacity: 1; transition-delay: .55s; visibility: visible; }
.yukle .logo img { opacity: 0; }
.yukle .bg { width: 100%; height: 0; position: absolute; left: 0; top: -100%; background: #fff; transition: all .7s cubic-bezier(.645,.045,.355,1) .4s; visibility: hidden; }
.yukle .bg.active { visibility: visible; }
.yukle.active .bg { height: 100%; top: 0; visibility: visible; }
.tree { width: 100%; position: absolute; left: 0; top: 0; }
.yukle svg { padding: 0 0px; }

path { fill-opacity: 0; stroke-width: 1; stroke-dashoffset: 15; stroke-dasharray: 2000; }
#deep { stroke: #e84f3d; fill: #e84f3d; animation: deep 5s ease-in-out; }
#digital { stroke: #e84f3d; fill: #e84f3d; animation: digital 5s ease-in-out; }


@keyframes deep {
	0% { stroke-dashoffset: 2000; fill: none; }
	100% { stroke-dashoffset: 0; fill: #967949; stroke-width: 0; }
}

@keyframes digital {
	0% { stroke-dashoffset: 2000; fill: none; }
	100% { stroke-dashoffset: 0; fill: #967949; stroke-width: 0; }
}

@keyframes kosen {
	0% { stroke-dashoffset: 2000; fill: none; }
	100% { stroke-dashoffset: 0; fill: #195da9; }
}

@-webkit-keyframes sdb10 {
	0% { -webkit-transform: translate(0,0); }
	20% { -webkit-transform: translate(-0px,10px); }
	40% { -webkit-transform: translate(0,0); }
}

@keyframes sdb10 {
	0% { transform: translate(0,0); }
	20% { transform: translate(-0px,10px); }
	40% { transform: translate(0,0); }
}

@keyframes resmi {
	100% { transform: rotate(-360deg); }
}

@keyframes resmi2 {
	100% { transform: rotate(360deg); }
}

@keyframes fadeIn {
	99% { visibility: hidden; }
	100% { visibility: visible; opacity: 1; }
}

@media screen and (max-width: 1170px) {
	.yukle .logo { width: 120px; }
	.yukle.active .logo { top: calc(50% - 70px); }
}