@charset "utf-8";
.loading_base {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100vh;
		background: #fff;
		z-index: 7000
}
.kv .kv_bg {
		pointer-events: none;
		position: absolute;
		top: 0;
		left: -25%;
		width: 150%;
		height: 100%;
		background: #3D3A39;
		z-index: 0;
		transform-origin: left center;
		transform: scaleX(0) skewX(-15deg);
		transition: transform 1.6s cubic-bezier(0.16, 1, 0.3, 1);
}
@media(max-width: 767px) {
		.kv {
				height: 166vw !important
		}
}
@media(max-width: 375px) {
		.kv {
				height: 142vw !important
		}
}
.kv_bg.isActive {
		transform: scaleX(1) skewX(-15deg);
}
.kv_bg.isDone {
    transform: scaleX(1) skewX(0deg);
		transition: unset!important;
}
.kv_logo {
		width: 600px;
		position: relative;
}
@media(max-width: 1680px) {
		.kv_logo {
				width: 400px;
		}
}
@media(max-width: 767px) {
		.kv .kv_bg {
				transition: transform 1.2s cubic-bezier(0.16, 1, 0.3, 1);
		}
		.kv_logo {
				width: 200px;
				height: 120px;
				position: absolute;
				top: 0;
				left: 0;
				right: 0;
				bottom: 0;
				margin: auto;
		}
}
.kv_logo img {
		width: 100%;
		height: auto;
}
.kv_logo .loadingFirst {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 206px;
		pointer-events: none;
		z-index: 2;
		display: flex;
		justify-content: space-between;
}
.loadingFirst svg {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: auto;
}
.loadingFirst rect, .loadingFirst polygon, .loadingFirst circle {
		fill: none;
		stroke: #3D3A39;
		stroke-width: 2;
}
.loadingFirst_right, .loadingFirst_center, .loadingFirst_left {
		opacity: 0;
}
.loadingFirst_center {
		transition-delay: 0.6s
}
.loadingFirst_left {
		transition-delay: 1.2s
}
.isActive .loadingFirst_right, .isActive .loadingFirst_center, .isActive .loadingFirst_left {
		animation: loadingFirstAnime 0.8s linear forwards;
}
.isActive .loadingFirst_center {
		animation-delay: 0.5s
}
.isActive .loadingFirst_left {
		animation-delay: 1s
}
@keyframes loadingFirstAnime {
		0% {
				opacity: 0;
		}
		50%, 70% {
				opacity: 1;
		}
		100% {
				opacity: 0;
		}
}
/* ============ */
.kv_logo .loadingSecond {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		pointer-events: none;
		z-index: 2
}
.loadingLine {
		fill: none;
		stroke: #fff;
		stroke-width: 2;
		stroke-miterlimit: 10;
		stroke-dasharray: 2000;
		stroke-dashoffset: 2000;
		opacity: 0
}
.loadingLine.isActive {
		animation: lineAnime 3.3s cubic-bezier(0.16, 1, 0.3, 1) forwards;
		opacity: 1
}
.loadingLine.disAbled {
		opacity: 0;
		display: none !important
}
@keyframes lineAnime {
		to {
				stroke-dashoffset: 0;
		}
}
.kv_logo-1 {
		opacity: 0;
		transition: opacity 0.6s;
}
.kv_logo .kv_logo-2, .kv_logo .kv_logo-3 {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		opacity: 0;
}
.kv_logo .kv_logo-2 {
		transition: opacity 0.6s 0.8s;
}
.kv_logo .kv_logo-3 {
		transition: opacity 1.5s 1.8s;
}
.isStart .kv_logo-1, .isStart .kv_logo-2, .isStart .kv_logo-3 {
		opacity: 1
}
.isDone .loading_line {
		display: none
}
.isDone .kv_logo-1, .isDone .kv_logo-2, .isDone .kv_logo-3 {
		transition: unset;
		opacity: 1
}
.kv .kv_frame {
		position: absolute;
		background: #fff;
		pointer-events: none;
}
.kv_frame.psLeft, .kv_frame.psRight {
		width: 14px;
		height: 100%;
}
.kv_frame.psUp, .kv_frame.psBtm {
		width: 100%;
		height: 14px;
}
.kv_frame.psLeft {
		top: 0;
		left: 0;
		transform-origin: center bottom;
		transform: scaleY(0);
		transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}
.kv_frame.psUp {
		top: 0;
		left: 0;
		transform-origin: left center;
		transform: scaleX(0);
		transition: transform 1s cubic-bezier(0.16, 1, 0.3, 1);
		transition-delay: 0.3s
}
.kv_frame.psRight {
		top: 0;
		right: 0;
		transform-origin: center top;
		transform: scaleY(0);
		transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}
.kv_frame.psBtm {
		bottom: 0;
		left: 0;
		transform-origin: right center;
		transform: scaleX(0);
		transition: transform 1s cubic-bezier(0.16, 1, 0.3, 1);
		transition-delay: 0.3s
}
.kv_frame.isStart {
		transform: scale(1)
}
.kv_frame.isDone{
		transform: scale(1);
		transition: unset;
}
@media(max-width: 767px) {
		.kv_frame.psLeft, .kv_frame.psRight {
				width: 10px;
				height: 100%;
		}
		.kv_frame.psUp, .kv_frame.psBtm {
				width: 100%;
				height: 10px;
		}
}