/***** GNB ***********************************************************************************************************************************************************************/
.motion {
    -webkit-transition: all 0.3s ease-out;
    -moz-transition: all 0.3s ease-out;
    -o-transition: all 0.3s ease-out;
    transition: all 0.3s ease-out;
}

.delay1 {
    -webkit-transition-delay: 0.1s;
    -moz-transition-delay: 0.1s;
    -o-transition-delay: 0.1s;
    transition-delay: 0.1s;
}

.delay2 {
    -webkit-transition-delay: 0.2s;
    -moz-transition-delay: 0.2s;
    -o-transition-delay: 0.2s;
    transition-delay: 0.2s;
}

.delay3 {
    -webkit-transition-delay: 0.3s;
    -moz-transition-delay: 0.3s;
    -o-transition-delay: 0.3s;
    transition-delay: 0.3s;
}

.depth1-line-show {
    width: 100% !important;
    left: 0 !important;
}

.navi-bg.open {
    height: 380px;
}

.gnb.open {
    height: 380px;
}

.gnb ul li ul.open {
    -webkit-transform: translateY(0px);
    -moz-transform: translateY(0px);
    -o-transform: translateY(0px);
    transform: translateY(0px);
    opacity: 1;
}

.navi-bg2.open {
    height: 340px;
}

.gnb2.open {
    height: 340px;
}

.gnb2 ul li ul.open {
    -webkit-transform: translateY(0px);
    -moz-transform: translateY(0px);
    -o-transform: translateY(0px);
    transform: translateY(0px);
    opacity: 1;
}

/***** main_visual motion *******************************************************************************************************************************************/
.main_visual .main_slider .text_g{
	perspective: 600px;-webkit-perspective: 600px;
}

.main_home .main_slider .text_g .title1{
	opacity: 0;
	transform: translateY(100%) rotateX(-80deg);
	transform-origin: center top;
	transform-style: preserve-3d;
}

.main_visual .main_slider .text_g .title1 p{
	transform: translateY(30px);
    opacity: 0;
}

.main_visual .main_slider .item.on .text_g .title1 p:nth-child(1){
	transform: translateY(-3px);
    opacity: 1;
    transition-duration: 1s;
    transition-delay: 0s;
}

.main_visual .main_slider .item.on .text_g .title1 p:nth-child(2) {
    transform: translateY(-3px);
    opacity: 1;
    transition-duration: 1s;
    transition-delay: 0.3s;
}

.main_visual .main_slider .item.on .text_g .title1 p:nth-child(3) {
    transform: translateY(-3px);
    opacity: 1;
    transition-duration: 1s;
    transition-delay: 0.6s;
}

.main_visual .main_slider .item .text_g .txt1{
	opacity:0;
    transform: translateX(50px);
}
.main_visual .main_slider .item.on .text_g .txt1{
	transform: translateX(0px);
    opacity: 1;
    transition-duration: 1.8s;
    transition-delay: 1.0s;
}

.main_home .main_slider .item.on .text_g .title1{
	animation:txtMotion 1.2s cubic-bezier(.215,.61,.355,1) 0.5s forwards;
}

.main_visual .main_slider .item.on .text_g:before{
	animation:opacityAni 1s cubic-bezier(.215,.61,.355,1) 0.5s forwards;
}

.main_visual .main_slider .text_g > * span{
	display: block;
}

.main_visual .main_slider .img{
	transform:scale(1.3);
}
.main_visual .main_slider .item.on .img{
	transform:scale(1); transition:7s;
}

@-webkit-keyframes opacityAni{
	0%{opacity:0;}
	100%{opacity:1;}
}

/***** scroll down motion *******************************************************************************************************************************************************/
@-webkit-keyframes elasticus {
    0% {
        -webkit-transform-origin: 0% 0%;
        -ms-transform-origin: 0% 0%;
        -moz-transform-origin: 0% 0%;
        -o-transform-origin: 0% 0%;
        transform-origin: 0% 0%;
        -webkit-transform: scale(1, 0);
        -ms-transform: scale(1, 0);
        -moz-transform: scale(1, 0);
        -o-transform: scale(1, 0);
        transform: scale(1, 0);
    }

    50% {
        -webkit-transform-origin: 0% 0%;
        -ms-transform-origin: 0% 0%;
        -moz-transform-origin: 0% 0%;
        -o-transform-origin: 0% 0%;
        transform-origin: 0% 0%;
        -webkit-transform: scale(1, 1);
        -ms-transform: scale(1, 1);
        -moz-transform: scale(1, 1);
        -o-transform: scale(1, 1);
        transform: scale(1, 1);
    }

    50.1% {
        -webkit-transform-origin: 0% 100%;
        -ms-transform-origin: 0% 100%;
        -moz-transform-origin: 0% 100%;
        -o-transform-origin: 0% 100%;
        transform-origin: 0% 100%;
        -webkit-transform: scale(1, 1);
        -ms-transform: scale(1, 1);
        -moz-transform: scale(1, 1);
        -o-transform: scale(1, 1);
        transform: scale(1, 1);
    }

    100% {
        -webkit-transform-origin: 0% 100%;
        -ms-transform-origin: 0% 100%;
        -moz-transform-origin: 0% 100%;
        -o-transform-origin: 0% 100%;
        transform-origin: 0% 100%;
        -webkit-transform: scale(1, 0);
        -ms-transform: scale(1, 0);
        -moz-transform: scale(1, 0);
        -o-transform: scale(1, 0);
        transform: scale(1, 0);
    }
}

@-moz-keyframes elasticus {
    0% {
        -webkit-transform-origin: 0% 0%;
        -ms-transform-origin: 0% 0%;
        -moz-transform-origin: 0% 0%;
        -o-transform-origin: 0% 0%;
        transform-origin: 0% 0%;
        -webkit-transform: scale(1, 0);
        -ms-transform: scale(1, 0);
        -moz-transform: scale(1, 0);
        -o-transform: scale(1, 0);
        transform: scale(1, 0);
    }

    50% {
        -webkit-transform-origin: 0% 0%;
        -ms-transform-origin: 0% 0%;
        -moz-transform-origin: 0% 0%;
        -o-transform-origin: 0% 0%;
        transform-origin: 0% 0%;
        -webkit-transform: scale(1, 1);
        -ms-transform: scale(1, 1);
        -moz-transform: scale(1, 1);
        -o-transform: scale(1, 1);
        transform: scale(1, 1);
    }

    50.1% {
        -webkit-transform-origin: 0% 100%;
        -ms-transform-origin: 0% 100%;
        -moz-transform-origin: 0% 100%;
        -o-transform-origin: 0% 100%;
        transform-origin: 0% 100%;
        -webkit-transform: scale(1, 1);
        -ms-transform: scale(1, 1);
        -moz-transform: scale(1, 1);
        -o-transform: scale(1, 1);
        transform: scale(1, 1);
    }

    100% {
        -webkit-transform-origin: 0% 100%;
        -ms-transform-origin: 0% 100%;
        -moz-transform-origin: 0% 100%;
        -o-transform-origin: 0% 100%;
        transform-origin: 0% 100%;
        -webkit-transform: scale(1, 0);
        -ms-transform: scale(1, 0);
        -moz-transform: scale(1, 0);
        -o-transform: scale(1, 0);
        transform: scale(1, 0);
    }
}

@-o-keyframes elasticus {
    0% {
        -webkit-transform-origin: 0% 0%;
        -ms-transform-origin: 0% 0%;
        -moz-transform-origin: 0% 0%;
        -o-transform-origin: 0% 0%;
        transform-origin: 0% 0%;
        -webkit-transform: scale(1, 0);
        -ms-transform: scale(1, 0);
        -moz-transform: scale(1, 0);
        -o-transform: scale(1, 0);
        transform: scale(1, 0);
    }

    50% {
        -webkit-transform-origin: 0% 0%;
        -ms-transform-origin: 0% 0%;
        -moz-transform-origin: 0% 0%;
        -o-transform-origin: 0% 0%;
        transform-origin: 0% 0%;
        -webkit-transform: scale(1, 1);
        -ms-transform: scale(1, 1);
        -moz-transform: scale(1, 1);
        -o-transform: scale(1, 1);
        transform: scale(1, 1);
    }

    50.1% {
        -webkit-transform-origin: 0% 100%;
        -ms-transform-origin: 0% 100%;
        -moz-transform-origin: 0% 100%;
        -o-transform-origin: 0% 100%;
        transform-origin: 0% 100%;
        -webkit-transform: scale(1, 1);
        -ms-transform: scale(1, 1);
        -moz-transform: scale(1, 1);
        -o-transform: scale(1, 1);
        transform: scale(1, 1);
    }

    100% {
        -webkit-transform-origin: 0% 100%;
        -ms-transform-origin: 0% 100%;
        -moz-transform-origin: 0% 100%;
        -o-transform-origin: 0% 100%;
        transform-origin: 0% 100%;
        -webkit-transform: scale(1, 0);
        -ms-transform: scale(1, 0);
        -moz-transform: scale(1, 0);
        -o-transform: scale(1, 0);
        transform: scale(1, 0);
    }
}

@keyframes elasticus {
    0% {
        -webkit-transform-origin: 0% 0%;
        -ms-transform-origin: 0% 0%;
        -moz-transform-origin: 0% 0%;
        -o-transform-origin: 0% 0%;
        transform-origin: 0% 0%;
        -webkit-transform: scale(1, 0);
        -ms-transform: scale(1, 0);
        -moz-transform: scale(1, 0);
        -o-transform: scale(1, 0);
        transform: scale(1, 0);
    }

    50% {
        -webkit-transform-origin: 0% 0%;
        -ms-transform-origin: 0% 0%;
        -moz-transform-origin: 0% 0%;
        -o-transform-origin: 0% 0%;
        transform-origin: 0% 0%;
        -webkit-transform: scale(1, 1);
        -ms-transform: scale(1, 1);
        -moz-transform: scale(1, 1);
        -o-transform: scale(1, 1);
        transform: scale(1, 1);
    }

    50.1% {
        -webkit-transform-origin: 0% 100%;
        -ms-transform-origin: 0% 100%;
        -moz-transform-origin: 0% 100%;
        -o-transform-origin: 0% 100%;
        transform-origin: 0% 100%;
        -webkit-transform: scale(1, 1);
        -ms-transform: scale(1, 1);
        -moz-transform: scale(1, 1);
        -o-transform: scale(1, 1);
        transform: scale(1, 1);
    }

    100% {
        -webkit-transform-origin: 0% 100%;
        -ms-transform-origin: 0% 100%;
        -moz-transform-origin: 0% 100%;
        -o-transform-origin: 0% 100%;
        transform-origin: 0% 100%;
        -webkit-transform: scale(1, 0);
        -ms-transform: scale(1, 0);
        -moz-transform: scale(1, 0);
        -o-transform: scale(1, 0);
        transform: scale(1, 0);
    }
}

/***** common_motion ***********************************************************************************************************************************************/
.animated1 {-webkit-animation-duration: 1s;animation-duration: 1s; animation-delay: 0.1s; -webkit-animation-fill-mode: both; animation-fill-mode: both;}
.animated2{-webkit-animation-duration: 1s;animation-duration: 1s; animation-delay: 0.4s; -webkit-animation-fill-mode: both; animation-fill-mode: both;}
.animated3 {-webkit-animation-duration: 1s;animation-duration: 1s; animation-delay: 0.7s; -webkit-animation-fill-mode: both; animation-fill-mode: both;}
.animated4 {-webkit-animation-duration: 1s;animation-duration: 1s; animation-delay: 1.0s; -webkit-animation-fill-mode: both; animation-fill-mode: both;}
.animated5 {-webkit-animation-duration: 1s;animation-duration: 1s; animation-delay: 1.3s; -webkit-animation-fill-mode: both; animation-fill-mode: both;}
.animated6 {-webkit-animation-duration: 1s;animation-duration: 1s; animation-delay: 1.6s; -webkit-animation-fill-mode: both; animation-fill-mode: both;}
.slideInLeft {-webkit-animation-name: slideInLeft; animation-name: slideInLeft;}
.slideInRight {-webkit-animation-name: slideInRight; animation-name: slideInRight;}
.slideInBottom {-webkit-animation-name: slideInBottom; animation-name: slideInBottom;}
.slideInTop { -webkit-animation-name: slideInTop; animation-name: slideInTop;}
@keyframes bounceIn {
from, 20%, 40%, 60%, 80%, to {
-webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
}
0% {
opacity: 0;
-webkit-transform: scale3d(.3, .3, .3);
transform: scale3d(.3, .3, .3);
}
20% {
-webkit-transform: scale3d(1.1, 1.1, 1.1);
transform: scale3d(1.1, 1.1, 1.1);
}
40% {
-webkit-transform: scale3d(.9, .9, .9);
transform: scale3d(.9, .9, .9);
}
60% {
opacity: 1;
-webkit-transform: scale3d(1.03, 1.03, 1.03);
transform: scale3d(1.03, 1.03, 1.03);
}
80% {
-webkit-transform: scale3d(.97, .97, .97);
transform: scale3d(.97, .97, .97);
}
to {
opacity: 1;
-webkit-transform: scale3d(1, 1, 1);
transform: scale3d(1, 1, 1);
}
}
.bounceIn { -webkit-animation-name: bounceIn; animation-name: bounceIn;}
@keyframes slideInLeft {
from {
-webkit-transform: translate3d(-13%, 0, 0);
transform: translate3d(-13%, 0, 0);
visibility: visible;
opacity: 0;
}
to {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
opacity: 1;
}
}
@keyframes slideInRight {
from {
-webkit-transform: translate3d(13%, 0, 0);
transform: translate3d(13%, 0, 0);
visibility: visible;
opacity: 0;
}
to {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
opacity: 1;
}
}
@keyframes slideInBottom {
from {
-webkit-transform: translate3d(0, 13%, 0);
transform: translate3d(0, 13%, 0);
visibility: visible;
opacity: 0;
}
to {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
opacity: 1;
}
}
@keyframes slideInTop {
from {
-webkit-transform: translate3d(0, -13%, 0);
transform: translate3d(0, -13%, 0);
visibility: visible;
opacity: 0;
}
to {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
opacity: 1;
}
}
/* .txt_motion{
	perspective: 600px;
	-webkit-perspective: 600px;
}
.txt_motion > *{
	opacity: 0;
	transform: translateY(100%) rotateX(-80deg);
	transform-origin: center top;
	transform-style: preserve-3d;
}
.txt_motion > *.is-inview{
	animation:txtMotion 1.2s cubic-bezier(.215,.61,.355,1) forwards;
}
.txt_motion > * span{
	display: block;
}


@-webkit-keyframes txtMotion{
	0%{opacity:0;transform: translateY(100%) rotateX(-80deg);}
	100%{opacity:1;transform: translateY(0%) rotateX(0deg);}
}


@-webkit-keyframes txtMotion2{
	0%{opacity:0;transform: translateY(150%) rotateX(-60deg);}
	100%{opacity:1;transform: translateY(0%) rotateX(0deg);}
}

.txt_motion2{
	perspective: 600px;
	-webkit-perspective: 600px;
}
.txt_motion2 > *{
	opacity: 0;
	transform: translateY(100%) rotateX(-80deg);
	transform-origin: center top;
	transform-style: preserve-3d;
}
.txt_motion2.is-inview > *{
	animation:txtMotion 1.2s cubic-bezier(.215,.61,.355,1) 0.5s forwards;
}
.txt_motion2.is-inview > *:nth-child(2){
	animation-delay:0.7s;
}
.txt_motion2.is-inview > *:nth-child(3){
	animation-delay:1s;
}
.txt_motion2 > * span{
	display: block;
} */

/***** map_motion ***********************************************************************************************************************************************/
.circle_wave .delay1 {
    -webkit-animation: waves 2.5s linear;
    animation: waves 2.5s linear;
    animation-iteration-count: infinite;
    animation-delay: 0.2s;
}

.circle_wave .delay2 {
    -webkit-animation: waves 2.5s linear 0.7s forwards;
    animation: waves 2.5s linear 0.7s forwards;
    animation-iteration-count: infinite;
}

.circle_wave .delay3 {
    -webkit-animation: waves 2.5s linear 1.3s forwards;
    animation: waves 2.5s linear 1.3s forwards;
    animation-iteration-count: infinite;
}

.circle_wave .delay4 {
    -webkit-animation: waves 2.5s linear 1.9s forwards;
    animation: waves 2.5s linear 1.9s forwards;
    animation-iteration-count: infinite;
}

.circle {
    display: block;
    height: 6px;
    width: 6px;
    border-radius: 50%;
    background: #c2081f;
    margin: 10px;
    transition: 2s ease;
    position: absolute;
    top: 30%;
}

@-webkit-keyframes waves {
    0% {
        transform: scale(1);
        opacity: 0.5;
    }

    100% {
        transform: scale(20);
        opacity: 0;
    }
}