@charset 'utf-8';
@font-face {
    font-family: 'KOHIBaeumOTF';
    src: url('https://fastly.jsdelivr.net/gh/projectnoonnu/noonfonts_2201-2@1.0/KOHIBaeumOTF.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
.visual-swiper {  position: relative;}
#banner { position: absolute; z-index: 2; top: 50%; transform: translateY(-50%); width: 100%; color: #fff;}
#banner .slogun { font-size: 60px; line-height: 1.3666; font-family:'KOHIBaeumOTF','KOHIBaeum','Spoqa Han Sans Neo','Noto Sans KR', sans-serif; }
#banner .slogun .txt1 {opacity: 0; position: relative; animation: fadeInRight 1s .7s ease-in-out both; }
#banner .slogun .txt2 {opacity: 0; position: relative; animation: fadeInRight 1s 1.3s ease-in-out both; }
#banner .sub {opacity: 0; position: relative; padding: 20px 0 50px; font-size: 22px; font-weight: 400; animation: fadeInUp 1s 2.2s both; }
#banner .go-contact { opacity: 0; display: block; width: 210px; height: 50px; background: linear-gradient(129deg, rgb(0,107,240), rgb(0,220,186)); text-align: center; color: #fff; line-height: 50px; border-radius: 25px; animation:fadeIn 1s 2.8s both}
.visual-swiper { width: 100%; height: 100%; }
.visual-swiper .swiper-slide { text-align: center; font-size: 18px; background: #fff; display: flex; justify-content: center; align-items: center;}




@keyframes fadeInRight {
    from {
        opacity: 0;
        left:-20%;
    }
    to {
        opacity: 1;
        left:0;
    }    
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30%);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}
@keyframes fadeIn {    
       from {
        opacity: 0;        
    }

    to {
        opacity: 1;        
    }
}



@media (max-width:991px){
    .visual-swiper #banner .slogun { font-size: 58px;}
}
@media (max-width:768px){
    .visual-swiper #banner .slogun { font-size: 50px;}
    .visual-swiper #banner .sub {  font-size: 20px; }
}
@media (max-width:576px){
    .visual-swiper #banner .slogun { font-size: 40px;}
    .visual-swiper #banner .sub {  font-size: 18px; }
}
@media (max-width:480px){
    .visual-swiper #banner { text-align: center;}
    .visual-swiper #banner .slogun { font-size: 34px;}
    .visual-swiper #banner .sub { padding: 15px 0 40px; font-size: 16px; }
    .visual-swiper #banner a { margin: 0 auto; width: 160px; height: 40px; line-height: 40px; border-radius: 20px; }
    .visual-swiper #banner .sub br { display: none;}
}

@media (max-width:400px){
    .visual-swiper #banner { text-align: center;}
    .visual-swiper #banner .slogun { font-size: 27px;}
    .visual-swiper #banner .sub { padding: 15px 0 25px; font-size: 13px; }
    .visual-swiper #banner a { margin: 0 auto; width: 160px; height: 40px; line-height: 40px; border-radius: 20px;}
}