@charset "utf-8";

#banner { display: block;  position:absolute; z-index:2;  top: calc((100% ) / 2); padding: 0 10px; width: 100%; transform: translateY(-50%); }    
#banner .slogun { text-align: center; font-size: 50px; font-weight: 700; line-height: 1.4; color: #fff; word-break: keep-all; }
#banner .slogun span { display: block; }

.carousel-inner.on .item { transform:scale(1.1); animation: scale1 6000ms ease-out 1 both;}

.swipe-carousel .down-wrap {  position: absolute; bottom: 45px; color: #fff; left: 50%; transform: translateX(-50%); }
.swipe-carousel .down-wrap a { display: block; position: relative; padding: 50px 0 0; color: #fff;}
.swipe-carousel .down-wrap a span { opacity: 0; position: absolute; top: 0; left: 50%; transform: translateX(-50%) rotate(45deg); width: 15px; height: 15px; border-right:1px solid #fff; border-bottom:1px solid #fff; animation:scroll-down 2.7s linear infinite both}
.swipe-carousel .down-wrap a .arrow1 { }
.swipe-carousel .down-wrap a .arrow2 { animation-delay: .9s; }
.swipe-carousel .down-wrap a .arrow3 { animation-delay: 1.8s;}
.swipe-carousel .down-wrap a p { margin: 0; font-size: 14px; font-weight: 500; }


@keyframes scale1 {
	0% { transform:scale(1.1);}
	90% { transform:scale(1); }
	100% { transform:scale(1); }
}


@keyframes scroll-down {
    0% { top: 0; opacity: 0;}
    25% { opacity: 1;}
    50% {  opacity: 1;}
    75%% { opacity: 1;}
    100% { top: 45%; opacity: 0;}
}


@media (max-width:1200px){
    #banner .slogun { font-size: 40px;}
}

@media (max-width:991px){
    #banner .slogun { font-size: 30px;}
    #banner .slogun span.s1 { margin: 0 0 10px;}
    .swipe-carousel .down-wrap { display: none;}
}

@media (max-width:576px){
    #banner .slogun span { position: relative;}    
  
    #banner .slogun em { display: none;}
}

@media (max-width:480px){
    #banner .slogun { font-size: 26px;}   
}
@media (max-width:400px){
    #banner .slogun { font-size: 23px;}   
}