/* ——————————————————————————
 * landing
/* —————————————————————————— */


html, body{width: 100%; height: 100%; font-family: 'Pretendard-Regular';}

ol, ul, li {list-style:none;}

img { max-width: 100%; height: auto; !important;}




@font-face {
    font-family: 'Pretendard-Regular';
    src: url('https://cdn.jsdelivr.net/gh/Project-Noonnu/noonfonts_2107@1.1/Pretendard-Regular.woff') format('woff');
    font-weight: 400;
    font-style: normal;
}


.landing_wrap {position: relative;width:100%;left:50%;transform:translateX(-50%);}

.content{width: 100%; height: 100%;position: relative;}




.s0_div {position: relative; width: 100%; height: 100%; background-image: url(../img/visual_bg.jpg); background-repeat:no-repeat; background-position: center; background-size: cover;
 -webkit-animation: zoom 1.2s; animation: zoom 1.2s;}
.s0_txt {position: absolute; left: 50%; margin-top: 13%; transform: translate(-50%,-50%);}

@media screen and (min-width:1921px) { .s0_txt {width: 52%; height: auto;} }
@media screen and (max-width:1919px) { .s0_txt {width: 52%; height: auto;} }



/*s0_div Animation */

@-webkit-keyframes zoom {
  from {
    -webkit-transform: scale(1.5, 1.5);
  }
  to {
    -webkit-transform: scale(1, 1);
  }
}

@keyframes zoom {
  from {
    transform: scale(1.5, 1.5);
  }
  to {
    transform: scale(1, 1);
  }
}



/* Animation */

@keyframes fadeInUp {
    from {
        transform: translate3d(0,80px,0)
    }

    to {
        transform: translate3d(0,0,0);
        opacity: 1
    }
}

@-webkit-keyframes fadeInUp {
    from {
        transform: translate3d(0,80px,0)
    }

    to {
        transform: translate3d(0,0,0);
        opacity: 1
    }
}

.animated {
    animation-duration: 1.3s;
	animation-delay: 0.8s;
    animation-fill-mode: both;
    -webkit-animation-duration: 1.3s;
    -webkit-animation-delay: 0.8s;
    -webkit-animation-fill-mode: both
}

.animatedFadeInUp {
    opacity: 0
}

.fadeInUp {
    opacity: 0;
    animation-name: fadeInUp;
    -webkit-animation-name: fadeInUp;
}



.s1_div {position: relative; width: 100%; height: 100%; background-image: url(../img/landing_01.jpg); background-repeat:no-repeat; background-position: center; background-size: cover;
}
.s1_up {position: fixed; left: 31%; bottom: 0;}

@media screen and (min-width:1921px) { .s1_up {width: 32%; height: auto;} }
@media screen and (max-width:1919px) { .s1_up {width: 32%; height: auto;} }

.s1_fadeInUp {
    animation:s1_fadeInUp; 
	opacity: 0;
	animation-play-state:paused;
	animation-duration: 1s;
	animation-delay: 0.1s;
    animation-fill-mode: both;
    -webkit-animation-duration: 1s;
    -webkit-animation-delay: 0.1s;
    -webkit-animation-fill-mode: both
	width: 100%;
    height: 100%;
	}




.s1_div:hover .s1_fadeInUp {animation-play-state:running;}


/*s1_div Animation */

@keyframes s1_fadeInUp {
    from {
        transform: translate3d(0,80px,0)
    }

    to {
        transform: translate3d(0,0,0);
        opacity: 1
    }
}

@-webkit-keyframes s1_fadeInUp {
    from {
        transform: translate3d(0,80px,0)
    }

    to {
        transform: translate3d(0,0,0);
        opacity: 1
    }
}




.s2_div {position: relative; width: 100%; height: 100%; background-image: url(../img/landing_02.jpg); background-repeat:no-repeat; background-position: center; background-size: cover;
}
.s2_up {position: absolute; left: 50%; bottom: 12%; transform: translate(-50%); }

@media screen and (min-width:1921px) { .s2_up {width: 38%; height: auto;} }
@media screen and (max-width:1919px) { .s2_up {width: 38%; height: auto;} }

.s2_fadeInUp {
    animation:s1_fadeInUp; 
	opacity: 0;
	animation-play-state:paused;
	animation-duration: 1s;
	animation-delay: 0.1s;
    animation-fill-mode: both;
    -webkit-animation-duration: 1s;
    -webkit-animation-delay: 0.1s;
    -webkit-animation-fill-mode: both
    width: 100%;
    height: 100%;
	}


.s2_div:hover .s2_fadeInUp {animation-play-state:running;}


/*s2_div Animation */

@keyframes s2_fadeInUp {
    from {
        transform: translate3d(0,80px,0)
    }

    to {
        transform: translate3d(0,0,0);
        opacity: 1
    }
}

@-webkit-keyframes s2_fadeInUp {
    from {
        transform: translate3d(0,80px,0)
    }

    to {
        transform: translate3d(0,0,0);
        opacity: 1
    }
}





.s3_div {position: relative; width: 100%; height: 100%; background-image: url(../img/landing_03.jpg); background-repeat:no-repeat; background-position: center; background-size: cover;
}
.s3_up {position: absolute; left: 50%; bottom: 8%; transform: translate(-50%); }

@media screen and (min-width:1921px) { .s3_up {width: 52%; height: auto;} }
@media screen and (max-width:1919px) { .s3_up {width: 52%; height: auto;} }

.s3_fadeInUp {
    animation:s3_fadeInUp; 
	opacity: 0;
	animation-play-state:paused;
	animation-duration: 1s;
	animation-delay: 0.1s;
    animation-fill-mode: both;
    -webkit-animation-duration: 1s;
    -webkit-animation-delay: 0.1s;
    -webkit-animation-fill-mode: both
	width: 100%;
    height: 100%;
	}


.s3_div:hover .s3_fadeInUp {animation-play-state:running;}


/*s3_div Animation */

@keyframes s3_fadeInUp {
    from {
        transform: translate3d(0,80px,0)
    }

    to {
        transform: translate3d(0,0,0);
        opacity: 1
    }
}

@-webkit-keyframes s3_fadeInUp {
    from {
        transform: translate3d(0,80px,0)
    }

    to {
        transform: translate3d(0,0,0);
        opacity: 1
    }
}




.s4_div {position: relative; width: 100%; height: 100%; background-image: url(../img/landing_04.jpg); background-repeat:no-repeat; background-position: center; background-size: cover;
} 
.s4_up {position: absolute; left: 31.5%; bottom: 7%; transform: translate(-50%); }

@media screen and (min-width:1921px) { .s4_up {width: 27%; height: auto;} }
@media screen and (max-width:1919px) { .s4_up {width: 27%; height: auto;} }


.s4_fadeInUp {
    animation:s4_fadeInUp; 
	opacity: 0;
	animation-play-state:paused;
	animation-duration: 1s;
	animation-delay: 0.1s;
    animation-fill-mode: both;
    -webkit-animation-duration: 1s;
    -webkit-animation-delay: 0.1s;
    -webkit-animation-fill-mode: both
	width: 100%;
    height: 100%;
	
	}


.s4_div:hover .s4_fadeInUp {animation-play-state:running;}


/*s4_div Animation */

@keyframes s4_fadeInUp {
    from {
        transform: translate3d(0,80px,0)
    }

    to {
        transform: translate3d(0,0,0);
        opacity: 1
    }
}

@-webkit-keyframes s4_fadeInUp {
    from {
        transform: translate3d(0,80px,0)
    }

    to {
        transform: translate3d(0,0,0);
        opacity: 1
    }
}





.s5_div {position: relative; width: 100%; height: 100%; background-image: url(../img/landing_05.jpg); background-repeat:no-repeat; background-position: center; background-size: cover;
}
.s5_up {position: absolute; left: 50%; bottom: 11%; transform: translate(-50%);}

@media screen and (min-width:1921px) { .s5_up {width: 65%; height: auto;} }
@media screen and (max-width:1919px) { .s5_up {width: 65%; height: auto;} }

.s5_fadeInUp {
    animation:s5_fadeInUp; 
	opacity: 0;
	animation-play-state:paused;
	animation-duration: 1s;
	animation-delay: 0.1s;
    animation-fill-mode: both;
    -webkit-animation-duration: 1s;
    -webkit-animation-delay: 0.1s;
    -webkit-animation-fill-mode: both
	width: 100%;
    height: 100%;
	}


.s5_div:hover .s5_fadeInUp {animation-play-state:running;}


/*s5_div Animation */

@keyframes s5_fadeInUp {
    from {
        transform: translate3d(0,80px,0)
    }

    to {
        transform: translate3d(0,0,0);
        opacity: 1
    }
}

@-webkit-keyframes s5_fadeInUp {
    from {
        transform: translate3d(0,80px,0)
    }

    to {
        transform: translate3d(0,0,0);
        opacity: 1
    }
}




.s6_div {position: relative; width: 100%; height: 100%; background-image: url(../img/landing_06.jpg); background-repeat:no-repeat; background-position: center; background-size: cover;
}
.s6_up {position: absolute; left: 50%; bottom: 8%; transform: translate(-50%);}

@media screen and (min-width:1921px) { .s6_up {width: 69%; height: auto;} }
@media screen and (max-width:1919px) { .s6_up {width: 69%; height: auto;} }

.s6_fadeInUp {
    animation:s6_fadeInUp; 
	opacity: 0;
	animation-play-state:paused;
	animation-duration: 1s;
	animation-delay: 0.1s;
    animation-fill-mode: both;
    -webkit-animation-duration: 1s;
    -webkit-animation-delay: 0.1s;
    -webkit-animation-fill-mode: both
    width: 100%;
    height: 100%;
	}


.s6_div:hover .s6_fadeInUp {animation-play-state:running;}


/*s6_div Animation */

@keyframes s6_fadeInUp {
    from {
        transform: translate3d(0,80px,0)
    }

    to {
        transform: translate3d(0,0,0);
        opacity: 1
    }
}

@-webkit-keyframes s6_fadeInUp {
    from {
        transform: translate3d(0,80px,0)
    }

    to {
        transform: translate3d(0,0,0);
        opacity: 1
    }
}




.s7_div {position: relative; width: 100%; height: 100%; background-image: url(../img/landing_07.jpg); background-repeat:no-repeat; background-position: center; background-size: cover;
}
.s7_up {position: absolute; left: 50%; bottom: 9%; transform: translate(-50%); }

@media screen and (min-width:1921px) { .s7_up {width: 65%; height: auto;} }
@media screen and (max-width:1919px) { .s7_up {width: 65%; height: auto;} }

.s7_fadeInUp {
    animation:s7_fadeInUp; 
	opacity: 0;
	animation-play-state:paused;
	animation-duration: 1s;
	animation-delay: 0.1s;
    animation-fill-mode: both;
    -webkit-animation-duration: 1s;
    -webkit-animation-delay: 0.1s;
    -webkit-animation-fill-mode: both
	width: 100%;
    height: 100%;
	}


.s7_div:hover .s7_fadeInUp {animation-play-state:running;}


/*s7_div Animation */

@keyframes s7_fadeInUp {
    from {
        transform: translate3d(0,80px,0)
    }

    to {
        transform: translate3d(0,0,0);
        opacity: 1
    }
}

@-webkit-keyframes s7_fadeInUp {
    from {
        transform: translate3d(0,80px,0)
    }

    to {
        transform: translate3d(0,0,0);
        opacity: 1
    }
}





.s8_div {position: relative; width: 100%; height: 100%; background-image: url(../img/landing_08.jpg); background-repeat:no-repeat; background-position: center; background-size: cover;
}
.s8_up {position: absolute; left: 50%; bottom: 13%; transform: translate(-50%); }

@media screen and (min-width:1921px) { .s8_up {width: 64%; height: auto;} }
@media screen and (max-width:1919px) { .s8_up {width: 64%; height: auto;} }


.s8_fadeInUp {
    animation:s8_fadeInUp; 
	opacity: 0;
	animation-play-state:paused;
	animation-duration: 1s;
	animation-delay: 0.1s;
    animation-fill-mode: both;
    -webkit-animation-duration: 1s;
    -webkit-animation-delay: 0.1s;
    -webkit-animation-fill-mode: both
	width: 100%;
    height: 100%;
	}


.s8_div:hover .s8_fadeInUp {animation-play-state:running;}


/*s8_div Animation */

@keyframes s8_fadeInUp {
    from {
        transform: translate3d(0,80px,0)
    }

    to {
        transform: translate3d(0,0,0);
        opacity: 1
    }
}

@-webkit-keyframes s8_fadeInUp {
    from {
        transform: translate3d(0,80px,0)
    }

    to {
        transform: translate3d(0,0,0);
        opacity: 1
    }
}





.s9_div {position: relative; width: 100%; height: 100%; background-image: url(../img/landing_09.jpg); background-repeat:no-repeat; background-position: center; background-size: cover;
}
.s9_up_k {position: absolute; left: 60.5%; bottom: 21%; transform: translate(-50%);}

@media screen and (min-width:1921px) { .s9_up_k {width: 15%; height: auto;} }
@media screen and (max-width:1919px) { .s9_up_k {width: 15%; height: auto;} }

.s9_up_n {position: absolute; left: 75.2%; bottom: 21%; transform: translate(-50%); }

@media screen and (min-width:1921px) { .s9_up_n {width: 15%; height: auto;} }
@media screen and (max-width:1919px) { .s9_up_n {width: 15%; height: auto;} }

.s9_fadeInUp {
    animation:s9_fadeInUp; 
	opacity: 0;
	animation-play-state:paused;
	animation-duration: 1s;
	animation-delay: 0.1s;
    animation-fill-mode: both;
    -webkit-animation-duration: 1s;
    -webkit-animation-delay: 0.1s;
    -webkit-animation-fill-mode: both
	width: 100%;
    height: 100%;
	
	}


.s9_div:hover .s9_fadeInUp {animation-play-state:running;}


/*s9_div Animation */

@keyframes s9_fadeInUp {
    from {
        transform: translate3d(0,80px,0)
    }

    to {
        transform: translate3d(0,0,0);
        opacity: 1
    }
}

@-webkit-keyframes s9_fadeInUp {
    from {
        transform: translate3d(0,80px,0)
    }

    to {
        transform: translate3d(0,0,0);
        opacity: 1
    }
}





.s10_div {position: relative; width: 100%; height: 100%; background-image: url(../img/landing_10.jpg); background-repeat:no-repeat; background-position: center; background-size: cover;
}
.s10_up {position: absolute; left: 72.5%; bottom: 12%; transform: translate(-50%);}

@media screen and (min-width:1921px) { .s10_up {width: 54%; height: auto;} }
@media screen and (max-width:1919px) { .s10_up {width: 54%; height: auto;} }

.s10_fadeInUp {
    animation:s10_fadeInUp; 
	opacity: 0;
	animation-play-state:paused;
	animation-duration: 1s;
	animation-delay: 0.1s;
    animation-fill-mode: both;
    -webkit-animation-duration: 1s;
    -webkit-animation-delay: 0.1s;
    -webkit-animation-fill-mode: both
	width: 100%;
    height: 100%;
	}


.s10_div:hover .s10_fadeInUp {animation-play-state:running;}


/*s10_div Animation */

@keyframes s10_fadeInUp {
    from {
        transform: translate3d(0,80px,0)
    }

    to {
        transform: translate3d(0,0,0);
        opacity: 1
    }
}

@-webkit-keyframes s10_fadeInUp {
    from {
        transform: translate3d(0,80px,0)
    }

    to {
        transform: translate3d(0,0,0);
        opacity: 1
    }
}






.s11_div {position: relative; width: 100%; height: 100%; background-image: url(../img/landing_11.jpg); background-repeat:no-repeat; background-position: center; background-size: cover;
}
.s11_up {position: absolute; left: 50%; bottom: 4%; transform: translate(-50%); }

@media screen and (min-width:1921px) { .s11_up {width: 65%; height: auto;} }
@media screen and (max-width:1919px) { .s11_up {width: 65%; height: auto;} }


.s11_fadeInUp {
    animation:s11_fadeInUp; 
	opacity: 0;
	animation-play-state:paused;
	animation-duration: 1s;
	animation-delay: 0.1s;
    animation-fill-mode: both;
    -webkit-animation-duration: 1s;
    -webkit-animation-delay: 0.1s;
    -webkit-animation-fill-mode: both
	width: 100%;
    height: 100%;
	}


.s11_div:hover .s11_fadeInUp {animation-play-state:running;}


/*s11_div Animation */

@keyframes s11_fadeInUp {
    from {
        transform: translate3d(0,80px,0)
    }

    to {
        transform: translate3d(0,0,0);
        opacity: 1
    }
}

@-webkit-keyframes s11_fadeInUp {
    from {
        transform: translate3d(0,80px,0)
    }

    to {
        transform: translate3d(0,0,0);
        opacity: 1
    }
}






.s12_div {position: relative; width: 100%; height: 100%; background:#fff;}
.s12_up {position: absolute; left: 50%; margin-top: 25%; transform: translate(-50%,-50%); background-repeat:no-repeat; background-position: center; background-size: cover;
}

@media screen and (min-width:1921px) { .s12_up {width: 65%; height: auto;} }
@media screen and (max-width:1919px) { .s12_up {width: 65%; height: auto;} }

.s12_fadeInUp {
    animation:s12_fadeInUp; 
	opacity: 0;
	animation-play-state:paused;
	animation-duration: 1s;
	animation-delay: 0.1s;
    animation-fill-mode: both;
    -webkit-animation-duration: 1s;
    -webkit-animation-delay: 0.1s;
    -webkit-animation-fill-mode: both
	width: 100%;
    height: 100%;
	
	}


.s12_div:hover .s12_fadeInUp {animation-play-state:running;}


/*s12_div Animation */

@keyframes s12_fadeInUp {
    from {
        transform: translate3d(0,80px,0)
    }

    to {
        transform: translate3d(0,0,0);
        opacity: 1
    }
}

@-webkit-keyframes s12_fadeInUp {
    from {
        transform: translate3d(0,80px,0)
    }

    to {
        transform: translate3d(0,0,0);
        opacity: 1
    }
}





.s13_div {position: relative; width: 100%; height: 100%; background-image: url(../img/landing_13.jpg); background-repeat:no-repeat; background-position: center; background-size: cover;
}
.s13_up {position: absolute; left: 68%; bottom: 21%; transform: translate(-50%); }

@media screen and (min-width:1921px) { .s13_up {width: 26%; height: auto;} }
@media screen and (max-width:1919px) { .s13_up {width: 26%; height: auto;} }

.s13_fadeInUp {
    animation:s13_fadeInUp; 
	opacity: 0;
	animation-play-state:paused;
	animation-duration: 1s;
	animation-delay: 0.1s;
    animation-fill-mode: both;
    -webkit-animation-duration: 1s;
    -webkit-animation-delay: 0.1s;
    -webkit-animation-fill-mode: both
	width: 100%;
    height: 100%;
	}


.s13_div:hover .s13_fadeInUp {animation-play-state:running;}


/*s13_div Animation */

@keyframes s13_fadeInUp {
    from {
        transform: translate3d(0,80px,0)
    }

    to {
        transform: translate3d(0,0,0);
        opacity: 1
    }
}

@-webkit-keyframes s13_fadeInUp {
    from {
        transform: translate3d(0,80px,0)
    }

    to {
        transform: translate3d(0,0,0);
        opacity: 1
    }
}





.s14_div {position: relative; width: 100%; height: 100%; background-image: url(../img/landing_14.jpg); background-repeat:no-repeat; background-position: center; background-size: cover;
}
.s14_up {position: absolute; left: 50%; bottom: 7%; transform: translate(-50%); }

@media screen and (min-width:1921px) { .s14_up {width: 64%; height: auto;} }
@media screen and (max-width:1919px) { .s14_up {width: 64%; height: auto;} }


.s14_fadeInUp {
    animation:s14_fadeInUp; 
	opacity: 0;
	animation-play-state:paused;
	animation-duration: 1s;
	animation-delay: 0.1s;
    animation-fill-mode: both;
    -webkit-animation-duration: 1s;
    -webkit-animation-delay: 0.1s;
    -webkit-animation-fill-mode: both
	width: 100%;
    height: 100%;
	}


.s14_div:hover .s14_fadeInUp {animation-play-state:running;}


/*s14_div Animation */

@keyframes s14_fadeInUp {
    from {
        transform: translate3d(0,80px,0)
    }

    to {
        transform: translate3d(0,0,0);
        opacity: 1
    }
}

@-webkit-keyframes s14_fadeInUp {
    from {
        transform: translate3d(0,80px,0)
    }

    to {
        transform: translate3d(0,0,0);
        opacity: 1
    }
}







.s15_div {position: relative; width: 100%; height: 100%; background-image: url(../img/landing_15.jpg); background-repeat:no-repeat; background-position: center; background-size: cover;
}
.s15_up {position: absolute; left: 47%; bottom: 5%; transform: translate(-50%); }

@media screen and (min-width:1921px) { .s15_up {width: 53%; height: auto;} }
@media screen and (max-width:1919px) { .s15_up {width: 53%; height: auto;} }

.s15_fadeInUp {
    animation:s15_fadeInUp; 
	opacity: 0;
	animation-play-state:paused;
	animation-duration: 1s;
	animation-delay: 0.1s;
    animation-fill-mode: both;
    -webkit-animation-duration: 1s;
    -webkit-animation-delay: 0.1s;
    -webkit-animation-fill-mode: both
	width: 100%;
    height: 100%;
	
	}


.s15_div:hover .s15_fadeInUp {animation-play-state:running;}


/*s15_div Animation */

@keyframes s15_fadeInUp {
    from {
        transform: translate3d(0,80px,0)
    }

    to {
        transform: translate3d(0,0,0);
        opacity: 1
    }
}

@-webkit-keyframes s15_fadeInUp {
    from {
        transform: translate3d(0,80px,0)
    }

    to {
        transform: translate3d(0,0,0);
        opacity: 1
    }
}







.s16_div {position: relative; width: 100%; height: 100%; background-image: url(../img/landing_16.jpg); background-repeat:no-repeat; background-position: center; background-size: cover;
}
.s16_up {position: absolute; left: 50%; bottom: 8%; transform: translate(-50%); }

@media screen and (min-width:1921px) { .s16_up {width: 65%; height: auto;} }
@media screen and (max-width:1919px) { .s16_up {width: 65%; height: auto;} }

.s16_fadeInUp {
    animation:s16_fadeInUp; 
	opacity: 0;
	animation-play-state:paused;
	animation-duration: 1s;
	animation-delay: 0.1s;
    animation-fill-mode: both;
    -webkit-animation-duration: 1s;
    -webkit-animation-delay: 0.1s;
    -webkit-animation-fill-mode: both
	width: 100%;
    height: 100%;
	
	}



.s16_div:hover .s16_fadeInUp {animation-play-state:running;}


/*s16_div Animation */

@keyframes s16_fadeInUp {
    from {
        transform: translate3d(0,80px,0)
    }

    to {
        transform: translate3d(0,0,0);
        opacity: 1
    }
}

@-webkit-keyframes s16_fadeInUp {
    from {
        transform: translate3d(0,80px,0)
    }

    to {
        transform: translate3d(0,0,0);
        opacity: 1
    }
}







.s17_div {position: relative; width: 100%; height: 100%; background-image: url(../img/landing_17.jpg); background-repeat:no-repeat; background-position: center; background-size: cover;
}
.s17_up {position: absolute; left: 50%; bottom: 5%; transform: translate(-50%); }

@media screen and (min-width:1921px) { .s17_up {width: 63%; height: auto;} }
@media screen and (max-width:1919px) { .s17_up {width: 63%; height: auto;} }

.s17_fadeInUp {
    animation:s17_fadeInUp; 
	opacity: 0;
	animation-play-state:paused;
	animation-duration: 1s;
	animation-delay: 0.1s;
    animation-fill-mode: both;
    -webkit-animation-duration: 1s;
    -webkit-animation-delay: 0.1s;
    -webkit-animation-fill-mode: both
	width: 100%;
    height: 100%;
	
	}


.s17_div:hover .s17_fadeInUp {animation-play-state:running;}


/*s17_div Animation */

@keyframes s17_fadeInUp {
    from {
        transform: translate3d(0,80px,0)
    }

    to {
        transform: translate3d(0,0,0);
        opacity: 1
    }
}

@-webkit-keyframes s17_fadeInUp {
    from {
        transform: translate3d(0,80px,0)
    }

    to {
        transform: translate3d(0,0,0);
        opacity: 1
    }
}




.s18_div {position: relative; width: 100%; height: 100%; background-image: url(../img/landing_18.jpg); background-repeat:no-repeat; background-position: center; background-size: cover;
}
.s18_up {position: absolute; left: 48.5%; bottom: 5%; transform: translate(-50%); }

@media screen and (min-width:1921px) { .s18_up {width: 69%; height: auto;} }
@media screen and (max-width:1919px) { .s18_up {width: 69%; height: auto;} }

.s18_fadeInUp {
    animation:s18_fadeInUp; 
	opacity: 0;
	animation-play-state:paused;
	animation-duration: 1s;
	animation-delay: 0.1s;
    animation-fill-mode: both;
    -webkit-animation-duration: 1s;
    -webkit-animation-delay: 0.1s;
    -webkit-animation-fill-mode: both
	width: 100%;
    height: 100%;
	
	}


.s18_div:hover .s18_fadeInUp {animation-play-state:running;}


/*s18_div Animation */

@keyframes s18_fadeInUp {
    from {
        transform: translate3d(0,80px,0)
    }

    to {
        transform: translate3d(0,0,0);
        opacity: 1
    }
}

@-webkit-keyframes s18_fadeInUp {
    from {
        transform: translate3d(0,80px,0)
    }

    to {
        transform: translate3d(0,0,0);
        opacity: 1
    }
}



/*footer*/

.foot_wrap{width:100%;padding:60px 20px 60px 20px;background-color:#f4f4f4;}
.foot_logo{text-align:center;}
.foot_address{margin-top:20px;text-align:center; font-size: 11pt;}
.foot_logo_img{ margin:auto;}


/*quick */



.quick {
    position: fixed;
    top: 24%;
    right: 80px;
    z-index: 99;
    background-color: #fff;
    padding: 20px 7px;
    border-radius: 40px;
    border: 1px solid #e1e1e1;

	}



.quick>li{text-align:center; border-bottom:1px solid #d3d3d3; padding-top: 20px; padding-bottom: 20px;}

.quick>li:last-child{border-bottom: 0;}

.quick>li>p{margin: 0; font-size: 11pt; padding-top: 11px;}


.quick img:hover{animation-name:swing;}





/* mobile */


.landing_m_wrap {width:640px; overflow:hidden;}
.landing04 {width:640px; overflow:hidden;}

.btn_0401{float: left; margin-top: -45%; position: relative; left: 10%; width: 40%; max-width:267px; }
.btn_0402{float: left; margin-top: -45%; position: relative; left: 50%; width: 40%; max-width:267px;}



.wrap_11{display: block; max-width:100%; height: auto; position: relative; margin: 0 auto; background-image:url(/img/mobile/landing_11.jpg); 
background-repeat:no-repeat ;background-size: cover; background-position: center;}

.swiper-container {display: block; max-width:100%; height: auto;}
.swiper-slide {max-width:65%; text-align:center; display:flex; /* 내용을 중앙정렬 하기위해 flex 사용 */ align-items:center; /* 위아래 기준 중앙정렬 */ justify-content:center; /* 좌우 기준 중앙정렬 */
    margin-top: 102%; margin-bottom: 13%;}





/* ——————————————————————————
 * quick_m
/* —————————————————————————— */





.quick_m_wrap{position:fixed; top:0px; left:0px; z-index:9; display: flex; flex-wrap: wrap; justify-content: flex-start; align-content: baseline;}
.quick_b{float: left; width: 20%;}
.quick_s{float: left; width: 20%;}
.quick_t{float: left; width: 20%;}
.quick_k{float: left; width: 20%;}
.quick_p{float: left; width: 20%;}