@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;700&display=swap');

.mainWrap{
}
.mainVisual {
    width: 100%;
    position: relative;
    height: calc(100vh - 80px);
    margin-top: 80px;
    display:flex;
    align-items: center;
    overflow: hidden;
}
.mainslider {
    width:100%;
    height:100%;
    position: relative;
}
.mainVisual .content{
    width:100%;
    height:100%;
    position: relative;
    display: flex;
}
.mainVisual .slideCon {
    position: relative;
}
.mainSlider, .slideCon, .mainVisual .slick-track, .mainVisual .slick-list{
    height:100%;
}
.mainVisual .slick-next{
    background: url(../images/mainVisual_next_chung_new.png) 0 0 no-repeat;
    width:71px;
    height:84px;
    position: absolute;
    right:0;
    top:40%;
}
.mainVisual .slick-prev{
    background: url(../images/mainVisual_prev_chung_new.png) 0 0 no-repeat;
    width:71px;
    height:84px;
    position: absolute;
    left:0;
    top:40%;
}
.mainVisual .btn_customer {
    position: absolute;
    right: 0;
    top: 0;
    display:flex;
    flex-direction: column;
}
.mainVisual .left {
    width: 64%;
    flex:0 0 64%;
    position: relative;
}
.mainVisual .left .image{
    height: 100%;
    position: relative;
}
.mainVisual .left .image iframe{
    left:0 !important; 
}
.mainVisual .left .image:before{
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height:100%;
    background-color: rgba(1,1,1,0.5);
    z-index: 1;
}
.mainVisual .left img{
}
.mainVisual .left .text{
    position: absolute;
    left: 35%;
    top: 0;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    z-index: 2;
}
.mainVisual .left .slick-active .text .con01{
    animation: mainfade 1s ease-in-out both; 
}
.mainVisual .left .slick-active .text .con02{
    animation: mainfade 1s ease-in-out .5s both; 
}
@keyframes mainfade{
    0%{
        opacity: 0;
    }
    100%{
        opacity: 1;
    }

}
.mainVisual .left .text .con02{
    margin:25px 0 50px;
}
.mainVisual .right {
    width: 36%;
    flex:0 0 36%;
    position: relative;
}
.mainVisual .right img{
}
.mainVisual .right .text{
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.mainVisual .right .text .con01{
    margin-top:30%;
    animation: downgo 1s ease-in-out 2s both;
}
.mainVisual .right .text .con02{
    margin:5% 0;
    animation: downgo 1s ease-in-out 3s both;
}
.mainVisual .right .text .con03{
    animation: mainfade 1s ease-in-out 4s both;
}

@keyframes downgo {
    0%{
        transform: translateY(-100%);
        -ms-transform:translateY(-100%);
        opacity: 0;
    }
    100%{
        transform: translate(0);
        -ms-transform:translateY(0);
        opacity: 1;
    }
}

/*pageinfo*/
.pagingInfo {
    color: #fff;
    font-size: 18px;
    font-weight: 100;
    border:1px solid #fff;
    padding: 3px 35px;
    margin-top:50px;
}

/*loader*/
/* .loading{
    width:100%;
    height:100%;
    position:fixed;
    left:0px;
    top:0px;
    background:#fff;
    z-index:1000; 
	}
.loading img{
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
} */
body{
	overflow-x:hidden;
}
.loaderWrap{
    display:flex;
    justify-content: center;
    align-items: center;
    height:100%;
    background: url(/teaser/images/intro_bg_chung.jpg);
    background-position: center center;
    background-repeat: no-repeat;
    animation: mainbgscale 3s linear
	background-size:cover;
}
.loaderLogo{
    text-align: center;
}
.loaderLogo.point{
    margin: 30px 0;
}

@keyframes mainbgscale{
    0%{
        background-size: 150%;
    }
    100%{
        background-size: 100%;
    }
}

.loader {
	color: dodgerblue;
    font-family:inherit;
	font-size: 1.5em;
	text-transform: uppercase;
	width: 50%;
	height: 3em;
	animation: change-color 10s linear infinite;
    position: relative;
    left: 50%;
    top:50%;
    transform: translate(-50%, -50%);
    z-index: 10000;
    overflow: hidden;
}
.loaderWrap{
    position:absolute;
    width:100vw;
    height:100vh;
    top:0;
    left:0;
    background-color:rgba(1,1,1,1);
    z-index:10000;
}
.loader span {
    font-family: inherit;
	animation: moving 2s linear infinite;
	animation-delay: 0.2s;
	position: absolute;
	height: 3em;
    left:100%;
    visibility: hidden;
}

@keyframes change-color {
	to {
		filter: hue-rotate(1turn);
	}
}
@-ms-keyframes change-color{
    to{
        color:rgb(159, 36, 163);
    }
    from{
        color:rgb(247, 247, 70);
    }
}

@keyframes moving {
	0% {
        visibility: visible;
		filter: opacity(0);
		transform: rotate(-180deg);
		left: 100%;
	}

	33% {
		filter: opacity(1);
		transform: rotate(0deg);
		left: 60%;
	}

	66% {
		filter: opacity(1);
		transform: rotate(0deg);
		left: 40%;
	}

	100% {
		filter: opacity(0);
		transform: rotate(180deg);
		left: 0;
	}
}

.loader span:nth-child(1) {
    animation-delay: 0.2s;
}

.loader span:nth-child(2) {
    animation-delay: 0.4s;
}

.loader span:nth-child(3) {
    animation-delay: 0.6s;
}

.loader span:nth-child(4) {
    animation-delay: 0.8s;
}

.loader span:nth-child(5) {
    animation-delay: 1s;
}

.loader span:nth-child(6) {
    animation-delay: 1.2s;
}

.loader span:nth-child(7) {
    animation-delay: 1.4s;
}


.page_move{
	position:relative;
}
.page_move::before{content:"";position:absolute;left:0;top:0;width:100%;height:100%;background-color:yellow;
animation:page_move_css 3s 1;}
@keyframes page_move_css{
    0%{
        transform: scale(1);
    }
    100%{
       transform-origin: 50% 50%;
		transform: scale(.5);
    }

}

@keyframes page_move_css2{
    0%{
       opacity:0;
    }
    100%{
        opacity:1;
    }

}
@media(max-width:1080px){
.loaderWrap .content{width:calc(100% - 30px);}
.loaderWrap img{width:100%;}
.loaderWrap p:nth-child(1){width:90%; margin:0 auto;}
.loaderWrap p:nth-child(2){width:60%; margin:15px auto;}
.loaderWrap p:nth-child(3){width:40%; margin:0 auto;}
}

/*maintyping*/
p.typing-txt {
    display: none;
}


.typing {
    /*       position: absolute;*/
    display: inline-block;
    animation-name: cursor;
    animation-duration: 0.3s;
    animation-iteration-count: infinite;
    font-size: 80px;
    color: #6c2552;
    font-weight: 100;
    letter-spacing: -1px;
}

@keyframes cursor {
    0% {
        border-right: 1px solid #fff
    }

    50% {
        border-right: 1px solid #000
    }

    100% {
        border-right: 1px solid #fff
    }
}

/*mobile*/

.MobileMain{position:relative;padding-top:75px;}
.MB_V img{width:100%;}
.MB_V .ico_open{position: absolute;right: 50px;top: 106px;width:90px;z-index: 10;left:auto;}
.MB_V .m_mainVisual{position:relative;}

.mainVisual_m{
	position: relative;
    height: calc(100vh - 75px);
    display: flex;
    flex-direction: column;}
.mainVisual_m .top{position:relative;background: url(/teaser/images/m_mainVisual_chung_bg_new.jpg) center center / cover no-repeat;background-repeat: no-repeat;flex:1;height:100%;}
.mainVisual_m .text{position:absolute;left:50%;top:50%;transform:translate(-50%, -50%) translate(-.5px, -.5px);width:65%;}
.mainVisual_m .text .point{margin-top:15px;}
.mainVisual_m .m_mainSlider .slideCon{position:relative;}
.mainVisual_m .m_mainSlider .slideCon:before{content:"";position:absolute;left:0;top:0;background-color:rgba(1,1,1,0.4);width:100%;height:100%;z-index:1;}
.mainVisual_m .m_mainSlider .text{position:absolute;left:50%;top:50%;transform:translate(-50%, -50%) translate(-.5px, -.5px);z-index:2;}
.mainVisual_m .slick-next{
    background: url(../images/mainVisual_next_chung_new.png) 0 0 no-repeat;
    width:35.5px;
    height:42px;
    position: absolute;
    right:0;
    top:50%;
	background-size:cover;
	transform:translateY(-50%);
}
.mainVisual_m .slick-prev{
    background: url(../images/mainVisual_prev_chung_new.png) 0 0 no-repeat;
    width:35.5px;
    height:42px;
    position: absolute;
    left:0;
    top:50%;
	background-size:cover;
	transform:translateY(-50%);
}