.pc_view {}
.mo_view {display:none}




/* 메인 랜딩페이지 css */
#main{width: 100%; height: auto; background: #000;}

/* 첫번째 페이지 */
#sec_one{width: 100%; height: 100vh; background: #000;}
#sec_one .main_video {position: relative;  height: 100vh; background:url('../img/main/main_pc.gif') no-repeat center; background-size:cover; width:100%  }
#sec_one .main_video video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: absolute;
   /* filter: brightness(0.94);*/
}

.main_line {position: absolute; z-index:0; top:0}
.main_line img{width:100%}

.ani_play {opacity: 0.5 !important;}
.main_line.main_line01 {position: absolute; z-index:0; top:40%}


    .charat_left {position: absolute;
    width: calc(1720 / var(--base-width) * 100%);
    top: calc(0 / var(--base-height) * 100%);
    left: calc(0 / var(--base-width) * 100%);
    }
    .charat_right {position: relative;}

    #gif {
    position: absolute;
    opacity: 0;
    animation-direction: reverse;
    animation-iteration-count: 1;
    }

    #gif img {width:100%}

    .sec_two_inner{
        width:100%;
        max-width: 1600px;
        margin: 0 auto;
        position: relative;
        --base-width: 1720;
        --base-height: 525;
    }

    .sec_two_top {translate: none;  rotate: none;  scale: none; transform: translate(0px, 0px);}

    .charat_01 {
        width: calc(196 / var(--base-width) * 100%);
        top: calc(0 / var(--base-height) * 100%);
        left: calc(0 / var(--base-width) * 100%);
        transform: rotate(-314deg)  translateX(-100%);
	    transition: 1.2s;

    }



    .charat_02 {
        width: calc(159 / var(--base-width) * 100%);
        top: calc(0 / var(--base-height) * 100%);
        left: calc(300 / var(--base-width) * 100%);
        transform: rotate(47deg)  translateY(-100%);
	    transition: 1.1s;
    }



    .charat_03 {
        width: calc(219 / var(--base-width) * 100%);
        top: calc(130 / var(--base-height) * 100%);
        left: calc(140 / var(--base-width) * 100%);
        transform: rotate(0deg)  translateX(-200%);
	    transition: 1.2s;
    }


    .charat_04 {
        width: calc(85 / var(--base-width) * 100%);
        top: calc(295 / var(--base-height) * 100%);
        left: calc(120 / var(--base-width) * 100%);
        transform: rotate(221deg)  translateY(-200%);
	    transition: 1s;
    }


    .charat_05 {
        width: calc(73 / var(--base-width) * 100%);
        top: calc(245 / var(--base-height) * 100%);
        left: calc(322 / var(--base-width) * 100%);
        transform: rotate(134deg)  translateY(-200%);
	    transition: 1.1s;
    }


    .charat_06 {
        width: calc(283 / var(--base-width) * 100%);
        top: calc(0 / var(--base-height) * 100%);
        right: calc(100 / var(--base-width) * 100%);
        transform: rotate(-314deg)  translateX(-100%);
	    transition: 1.2s;
    }


    .charat_07 {
        width: calc(114 / var(--base-width) * 100%);
        top: calc(100 / var(--base-height) * 100%);
        right: calc(50 / var(--base-width) * 100%);
        transform: rotate(47deg)  translateY(-200%);
	    transition: 1.4s;
    }


    .charat_08 {
        width: calc(176 / var(--base-width) * 100%);
        top: calc(170 / var(--base-height) * 100%);
        right: calc(220 / var(--base-width) * 100%);
        transform: rotate(200deg)  translateY(-200%);
	    transition: 1.3s;
    }


    .charat_09 {
        width: calc(198 / var(--base-width) * 100%);
        top: calc(220 / var(--base-height) * 100%);
        right: calc(100 / var(--base-width) * 100%);
        transform: rotate(150deg)  translateY(-100%);
	    transition: 1.4s;
    }



    #gif.charat_01.active {
    transform: translateX(0%);
    opacity: 1;
    }


    #gif.charat_02.active {
    transform: translateX(0%);
    opacity: 1;
    }


    #gif.charat_03.active {
    transform: translateX(0%);
    opacity: 1;
    }


    #gif.charat_04.active {
    transform: translateX(0%);
    opacity: 1;
    }


    #gif.charat_05.active {
    transform: translateX(0%);
    opacity: 1;
    }


    #gif.charat_06.active {
    transform: translateX(0%);
    opacity: 1;
    }


    #gif.charat_07.active {
    transform: translateX(0%);
    opacity: 1;
    }


    #gif.charat_08.active {
    transform: translateX(0%);
    opacity: 1;
    }


    #gif.charat_09.active {
    transform: translateX(0%);
    opacity: 1;
    }



    .ani_stop {display:none}

    .c-mv-base img {
    width: 100%;
    height: auto;
    }


@media screen and (max-width :734px) {
.pc_view {display:none}
.mo_view {display:block}

#sec_one .main_video {position: relative;  height: 100vh;/* background:url('../img/main/main_mo.webp') no-repeat center; background-size:cover; width:100%  */}

.charat_02  {display:none}
.charat_05  {display:none}
.charat_06  {display:none}

    #gif {
/*	display:none;*/
    position: absolute;
    opacity: 1;
    }

/*
    .charat_01 {
        width: calc(296 / var(--base-width) * 100%);
        top: calc(0 / var(--base-height) * 100%);
        left: calc(0 / var(--base-width) * 100%);
        transform: rotate(0deg)  translateX(0%);
	    transition: 0s;
		top: -230px;

    }



    .charat_02 {
        width: calc(259 / var(--base-width) * 100%);
        top: calc(0 / var(--base-height) * 100%);
        left: calc(300 / var(--base-width) * 100%);
        transform: rotate(0deg)  translateY(0%);
	    transition: 0s;
		top: -230px;
    }



    .charat_03 {
        width: calc(319 / var(--base-width) * 100%);
        top: calc(130 / var(--base-height) * 100%);
        left: calc(140 / var(--base-width) * 100%);
        transform: rotate(0deg)  translateX(0%);
	    transition: 0s;
		top: -180px;
    }


    .charat_04 {
        width: calc(185 / var(--base-width) * 100%);
        top: calc(295 / var(--base-height) * 100%);
        left: calc(120 / var(--base-width) * 100%);
        transform: rotate(0deg)  translateY(0%);
	    transition: 0s;
		top: -100px;
    }


    .charat_05 {
        width: calc(173 / var(--base-width) * 100%);
        top: calc(245 / var(--base-height) * 100%);
        left: calc(322 / var(--base-width) * 100%);
        transform: rotate(0deg)  translateY(0%);
	    transition: 0s;
		top: -150px;
    }


    .charat_06 {
        width: calc(353 / var(--base-width) * 100%);
        top: calc(0 / var(--base-height) * 100%);
        right: calc(300 / var(--base-width) * 100%);
        transform: rotate(0deg)  translateX(0%);
	    transition: 0s;
		top: -190px;
    }


    .charat_07 {
        width: calc(214 / var(--base-width) * 100%);
        top: calc(100 / var(--base-height) * 100%);
        right: calc(50 / var(--base-width) * 100%);
        transform: rotate(0deg)  translateY(0%);
	    transition: 0s;
		top: -200px;
    }


    .charat_08 {
        width: calc(276 / var(--base-width) * 100%);
        top: calc(170 / var(--base-height) * 100%);
        right: calc(420 / var(--base-width) * 100%);
        transform: rotate(0deg)  translateY(0%);
	    transition: 0s;
		top: -110px;
    }


    .charat_09 {
        width: calc(298 / var(--base-width) * 100%);
        top: calc(220 / var(--base-height) * 100%);
        right: calc(100 / var(--base-width) * 100%);
        transform: rotate(0deg)  translateY(0%);
	    transition: 0s;
		top: -110px;
    }



    #gif.charat_01.active {
    transform: translateX(0%);
    opacity: 1;
    }


    #gif.charat_02.active {
    transform: translateX(0%);
    opacity: 1;
    }


    #gif.charat_03.active {
    transform: translateX(0%);
    opacity: 1;
    }


    #gif.charat_04.active {
    transform: translateX(0%);
    opacity: 1;
    }


    #gif.charat_05.active {
    transform: translateX(0%);
    opacity: 1;
    }


    #gif.charat_06.active {
    transform: translateX(0%);
    opacity: 1;
    }


    #gif.charat_07.active {
    transform: translateX(0%);
    opacity: 1;
    }


    #gif.charat_08.active {
    transform: translateX(0%);
    opacity: 1;
    }


    #gif.charat_09.active {
    transform: translateX(0%);
    opacity: 1;
    }
/*
.ani_play {display:none !important}
.ani_stop {display:block !important}
*/
}
@media screen and (max-width : 550px){
#sec_three .popup_ctt .popup_map .map_show_img ul li img{object-position: 63%;}
}


@media screen and (max-width : 460px){


.charat_04  {display:none}
.charat_05  {display:none}
.charat_06  {display:none}
.charat_07  {display:none}
   
/*    .charat_01 {
        width: calc(296 / var(--base-width) * 100%);
        top: calc(0 / var(--base-height) * 100%);
        left: calc(0 / var(--base-width) * 100%);
        transform: rotate(-314deg)  translateX(-200%);
	    transition: 1.5s;
	    opacity: 0;
		top: -130px; z-index:2

    }





    .charat_03 {
        width: calc(319 / var(--base-width) * 100%);
        top: calc(130 / var(--base-height) * 100%);
        left: calc(140 / var(--base-width) * 100%);
        transform: rotate(0deg)  translateX(-300%);
	    transition: 1.4s;
	    opacity: 0;
		top: -70px; z-index:2
    }



	.charat_08 {
		width: calc(276 / var(--base-width) * 100%);
		top: calc(170 / var(--base-height) * 100%);
		right: calc(100 / var(--base-width) * 100%);
        transform: rotate(200deg)  translateY(-300%);
		transition: 1.2s;
	    opacity: 0;
		top:150px; z-index:1
	}



    .charat_09 {
        width: calc(298 / var(--base-width) * 100%);
        top: calc(220 / var(--base-height) * 100%);
        right: calc(10 / var(--base-width) * 100%);
        transform: rotate(100deg)  translateY(-500%);
	    transition: 1.5s;
	    opacity: 0;
		top:100px; z-index:1
    }



    #gif.charat_01.active {
    transform: translateX(0%);
    opacity: 1;
    }


    #gif.charat_02.active {
    transform: translateX(0%);
    opacity: 1;
    }


    #gif.charat_03.active {
    transform: translateX(0%);
    opacity: 1;
    }


    #gif.charat_08.active {
    transform: translateX(0%);
    opacity: 1;
    }


    #gif.charat_09.active {
    transform: translateX(0%);
    opacity: 1;
    }
}


@media screen and (max-width :380px){
*/
    .charat_01 {
        width: calc(296 / var(--base-width) * 100%);
        top: calc(0 / var(--base-height) * 100%);
        left: calc(0 / var(--base-width) * 100%);
        transform: rotate(-314deg)  translateX(-100%);
	    transition: 1.5s;
	    opacity: 0;
		top: 130PX;
    }



    .charat_02 {
        width: calc(259 / var(--base-width) * 100%);
        top: calc(0 / var(--base-height) * 100%);
        left: calc(300 / var(--base-width) * 100%);
        transform: rotate(47deg)  translateY(-100%);
	    transition: 1s;
		top: 180px;
    }



    .charat_03 {
        width: calc(319 / var(--base-width) * 100%);
        top: calc(130 / var(--base-height) * 100%);
        left: calc(140 / var(--base-width) * 100%);
        transform: rotate(0deg)  translateX(-100%);
	    transition: 1.4s;
	    opacity: 0;
		top: 170px;
    }



	.charat_08 {
		width: calc(276 / var(--base-width) * 100%);
		top: calc(170 / var(--base-height) * 100%);
		right: calc(110 / var(--base-width) * 100%);
        transform: rotate(95deg)  translateY(-100%);
		transition: 1.2s;
	    opacity: 0;
		top:170px; z-index:1
	}



    .charat_09 {
        width: calc(298 / var(--base-width) * 100%);
        top: calc(220 / var(--base-height) * 100%);
        right: calc(10 / var(--base-width) * 100%);
        transform: rotate(100deg)  translateY(-100%);
	    transition: 1.5s;
	    opacity: 0;
		top:120px; z-index:1
    }



    #gif.charat_01.active {
    transform: translateX(0%);
    opacity: 1;
    }


    #gif.charat_02.active {
    transform: translateX(0%);
    opacity: 1;
    }


    #gif.charat_03.active {
    transform: translateX(0%);
    opacity: 1;
    }


    #gif.charat_08.active {
    transform: translateX(0%);
    opacity: 1;
    }


    #gif.charat_09.active {
    transform: translateX(0%);
    opacity: 1;
    }
}


@media screen and (max-width : 417px){
.charat_01 {z-index:2}
.charat_03 {z-index:2}
}