/* ani */
.ani_top{position:relative;opacity:0;top:50px;transition:1s;-moz-transition:1s;-webkit-transition:1s;-o-transition:1s;}
.ani_top.move{opacity:1;top:0;}

/*.ani_right{position:relative;opacity:0;right:-100px;transition:1s;-moz-transition:1s;-webkit-transition:1s;-o-transition:1s;}*/
/*.ani_right.move{opacity:1;right:0;}*/
.ani_down{position:relative;opacity:0;bottom:50px;transition:1s;-moz-transition:1s;-webkit-transition:1s;-o-transition:1s;}
.ani_down.move{opacity:1;bottom:0;}

.trans_d1{transition-delay:0.15s;}
.trans_d2{transition-delay:0.25s;}
.trans_d3{transition-delay:0.35s;}
.trans_d4{transition-delay:0.45s;}
.trans_d5{transition-delay:0.55s;}
.trans_d6{transition-delay:0.65s;}


/* -- animation */
@keyframes tt_scrolling_text {
	0% { transform: translateX(0) }
	100% { transform: translateX(-50%) }
}
@keyframes movetxt {
  to { transform: translate(-100%, 0); }
}
@keyframes move_scroll {
    0% { transform:translateY(0); }
   50% { transform:translateY(-10px); }
}
@keyframes rotate_circle{
	100% {transform: rotate(360deg); }
}
@keyframes effect{ 
	0% { top: 50%; }
	100% { top: 60%; }
}
@keyframes bouncing { 	
	0% {  transform:translate(0,-5px); }
	100% { transform:translate(0,5px); }
}
@keyframes progress_Rotate {
  to { transform: rotate(360deg); }
}
@keyframes imgAni_rt {
	0%{transform: scale(0, 1);}
	40%{transform: scale(1, 1);}
	50%{transform: scale(1, 1);}
	100%{transform: scale(1, 1) translateX(100%);}
}
@keyframes imgAni {
	0%{opacity:0;}
	50%{opacity:1;}
	100%{opacity:1;}
}
@keyframes progress {
  0% { stroke-dashoffset: 125.664px; }
  90% { stroke-dashoffset: 0; }
  100% { stroke-dashoffset: -125.664px; }
}

@keyframes marquee_lt {
 0% {
  -webkit-transform:translateX(0);
  transform:translateX(0)
 }
 to {
  -webkit-transform:translateX(-100%);
  transform:translateX(-100%)
 }
}
@keyframes marquee_rt {
 0% {
  -webkit-transform:translateX(-100%);
  transform:translateX(-100%)
 }
 to {
  -webkit-transform:translateX(0);
  transform:translateX(0)
 }
}  
/* animation -- */

.tt-scrolling-text {
	display: flex;
	position: relative;
	pointer-events: none;
}
.tt-scrolling-text-inner {
	padding-left: 2vw;
	font-size: calc(16px + 4vw);
	line-height: 1;
	font-family: 'Cormorant Garamond', serif;
	font-weight: 500;
	color: #3b3b3f;
	white-space: nowrap;
	animation-name: tt_scrolling_text; 
	animation-timing-function: linear; 
	animation-iteration-count: infinite; 
	animation-play-state: running;
	/* animation-duration is handled by js. */
}
.tt-scrolling-text-inner:after {
	content: attr(data-text);
	/* display: block; */
}



/* Animation direction reverse. */
.tt-scrolling-text.scr-text-reverse .tt-scrolling-text-inner {
	animation-direction: reverse;
}
.tt-scrolling-text.scr-text-stroke .tt-scrolling-text-inner {
	font-weight: normal;
	color: transparent;
	-webkit-text-stroke-width: 1px;
	-webkit-text-stroke-color: #3b3b3f;
	-webkit-text-fill-color: transparent;
}

.move_txt {position: absolute; bottom: 0; left: 0; width: 200%;}
.move_txt .txt {animation: movetxt 1s linear infinite; animation-play-state: paused; animation-delay: calc(var(--scroll) * -0.4s);animation-iteration-count: 1; animation-fill-mode: both;}
}


#cursor{
	z-index: 99;
	position: fixed;
	left: 0;
	top: 0;
	pointer-events: none;
	will-change: transform;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	background: url("/common/img/cursor_view.png")no-repeat center;
	transition: background 0.4s, width 0.6s, height 0.6s, transform .4s;
	transform: translate(-50%,-50%);
	background-size:cover;
	opacity:0;
}
#cursor.on {
	opacity:1;
	width:130px;
	height:130px;
	transition: background 0.4s, width 0.4s, height 0.4s, transform .4s;
	background-size:cover;
}
#cursor .cursor_cir {display: none;}
#cursor.cir {opacity: 1;width: 45px; height: 45px;pointer-events:none;background: none;mix-blend-mode:difference;will-change:transform;}
#cursor.cir:before {opacity: 1;transform:scale(1);}
#cursor:before {content:''; display: block;border: 2px solid #fff; width: 100%; height: 100%; position: absolute; top: -2px; left: -2px; transform:scale(.2); opacity: 0;border-radius:50%;}
#cursor.cir .cursor_cir {display: block;}
#cursor.cir .cursor_cir span {position: absolute; top: 50%; left: 0; display: block; width: 100%; text-align: center; transform:translateY(-50%);}
#cursor.cir .cursor_cir i {position: absolute; color: #fff;}
#cursor.cir .cursor_cir i.fa-angle-left {left: -40px; top: -9px; transform:translateX(17px)}
#cursor.cir .cursor_cir i.fa-angle-right {right: -40px; top: -9px;transform:translateX(-20px)}