@media(min-width: 769px){
	.border01, .border02, .border03, .border04{
		width: 1px;
		height: 370px;
		background: #fff;
		position: absolute;
		transform: skewX(-24deg);
		visibility: hidden;
	}

	.open .border01, .open .border02, .open .border03, .open .border04{
		z-index: 10;
		visibility: visible;
	}

	.border01{
		top: -370px;
		left: 200px;
		animation-name: border01;
		animation-duration: 1.8s;
		animation-delay: .4s;
		animation-iteration-count: infinite;
		animation-timing-function: linear;
	}

	.border02{
		background: #112A5A;
		top: -50px;
		left: 500px;
		animation-name: border02;
		animation-duration: 1.8s;
		animation-delay: .8s;
		animation-iteration-count: infinite;
		animation-timing-function: linear;
	}

	.border03{
	    top: 264px;
	    right: 160px;
	    background: #112A5A;
		animation-name: border03;
		animation-duration: 1.4s;
		animation-delay: .5s;
		animation-iteration-count: infinite;
		animation-timing-function: linear;
	}

	.border04{
	    top: 380px;
	    left: 120px;
		animation-name: border04;
		animation-duration: 1.8s;
		animation-delay: .2s;
		animation-iteration-count: infinite;
		animation-timing-function: linear;
		transform: skewX(0);
	}



	@keyframes border01{
		/*0%{
			top: 0;
			left: 200px;
			opacity: 0;
		}
		30%{
			top: 0;
			opacity: 0;
			left: 200px;
		}
		50%{
			top: 50vh;
			left: calc(200px - 12%);
			opacity: 1;
		}
		100%{
			top: 100vh;
			opacity: 0;
			left: calc(200px - 24%);
		}*/
		0%{
			top: 100vh;
			opacity: 0;
			left: calc(200px - 24%);
		}
		30%{
			top: 50vh;
			left: calc(200px - 12%);
			opacity: 1;
		}
		50%{
			top: 0;
			opacity: 0;
			left: 200px;
		}
		100%{
			top: 0;
			left: 200px;
			opacity: 0;
		}
	}

	@keyframes border02{
		/*0%{
			top: 0;
			left: 500px;
			opacity: 0;
		}
		30%{
			top: 0;
			opacity: 0;
			left: 500px;
		}
		50%{
			top: 50vh;
			left: calc(500px - 12%);
			opacity: 1;
		}
		100%{
			top: 100vh;
			opacity: 0;
			left: calc(500px - 24%);
		}*/
		0%{
			top: 100vh;
			opacity: 0;
			left: calc(500px - 24%);
		}
		30%{
			top: 50vh;
			left: calc(500px - 12%);
			opacity: 1;	
		}
		50%{
			top: 0;
			opacity: 0;
			left: 500px;
		}
		100%{
			top: 0;
			left: 500px;
			opacity: 0;
		}
	}

	@keyframes border03{
		/*0%{
			top: 264px;
			right: 160px;
			opacity: 0;
		}
		30%{
			top: 264px;
			opacity: 0;
			right: 160px;
		}
		50%{
			top: calc(264px + 50vh);
			right: calc(160px + 12%);
			opacity: 1;
		}
		100%{
			top: calc(264px + 100vh);
			opacity: 0;
			right: calc(160px + 24%);
		}*/
		0%{
			top: calc(264px + 100vh);
			opacity: 0;
			right: calc(160px + 24%);
		}
		30%{
			top: calc(264px + 50vh);
			right: calc(160px + 12%);
			opacity: 1;	
		}
		50%{
			top: 264px;
			opacity: 0;
			right: 160px;
		}
		100%{
			top: 264px;
			right: 160px;
			opacity: 0;
		}
	}

	@keyframes border04{
		/*0%{
			top: 380px;
			left: 120px;
			opacity: 0;
		}
		30%{
			top: 380px;
			opacity: 0;
			left: 120px;
		}
		50%{
			top: calc(380px + 50vh);
			left: 120px;
			opacity: 1;
		}
		100%{
			top: calc(380px + 100vh);
			opacity: 0;
			left: 120px;
			background: #112A5A;
		}*/
		0%{
			top: calc(380px + 100vh);
			opacity: 0;
			left: 120px;
			background: #112A5A;
		}
		30%{
			top: calc(380px + 50vh);
			left: 120px;
			opacity: 1;	
		}
		50%{
			top: 380px;
			opacity: 0;
			left: 120px;
		}
		100%{
			top: 380px;
			left: 120px;
			opacity: 0;
		}
	}

	/*** inview ***/

	.toothache .tooth-list li dt{
		width: 0;
		white-space: nowrap;
	-webkit-transition: all 500ms cubic-bezier(0.090, 0.810, 0.365, 0.970); 
	   -moz-transition: all 500ms cubic-bezier(0.090, 0.810, 0.365, 0.970); 
	     -o-transition: all 500ms cubic-bezier(0.090, 0.810, 0.365, 0.970); 
	        transition: all 500ms cubic-bezier(0.090, 0.810, 0.365, 0.970); /* custom */

	-webkit-transition-timing-function: cubic-bezier(0.090, 0.810, 0.365, 0.970); 
	   -moz-transition-timing-function: cubic-bezier(0.090, 0.810, 0.365, 0.970); 
	     -o-transition-timing-function: cubic-bezier(0.090, 0.810, 0.365, 0.970); 
	        transition-timing-function: cubic-bezier(0.090, 0.810, 0.365, 0.970); /* custom */
	}
	.toothache .tooth-list li dt.active{
		width: 310px;
	}
	.fadeUp{
		transform: translate(10px) rotate(1deg);
		opacity: 0;
		transition: .4s;
		transition-delay: .3s;
	}
	.fadeUp.active{
		transform: translate(0) rotate(0);
		opacity: 1;
	}
	.flow ul li:before{
		content: '';
	    position: absolute;
	    width: 100%;
	    height: 100%;
	    background: #112A5A;
	    top: 0;
	    right: 0;
	    transition: .6s;
		transition-delay: .2s;
	}
	.flow ul li.active:before{
		width: 0%;
	}
}

/*** loading ***/

body.loading{
	width: 100vw;
	height: 100vh;
	position: fixed;
}
.loading-item{
	position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    margin: auto;
    z-index: 1000;
}
.loading-item img{
	width: 140px;
	animation-name: logo;
	animation-duration: 2s;
	animation-iteration-count: infinite;
	animation-timing-function: linear;
}
@keyframes logo{
	0%{
		 transform: rotate(0deg);
	}
	25%{
		transform: rotate(5deg);
	}
	50%{
		transform: rotate(0deg);
	}
	75%{
		transform: rotate(-5deg);
	}
	100%{
		transform: rotate(0deg);
	}
}
p.loading {
    display: flex;
    justify-content: space-between;
    font-size: 16px;
    margin-top: 8px;
}