@charset 'utf-8';

.carousel { }
.carousel-control-next, .carousel-control-prev { display: none;}
.carousel .img-wrap { background-size: cover; background-position: center; background-repeat: no-repeat;}
.carousel .img-wrap .slogun-wrap { position: absolute; top: calc(50% + 45px); transform: translateY(-50%); left: 0; width: 100%;}
.carousel .img-wrap .slogun-wrap { color: #fff;}
.carousel .img-wrap .slogun-wrap .p1 { font-size: 45px; font-weight: 500; line-height: 1.3793;}
.carousel .img-wrap .slogun-wrap .p1 span { display: block; }
.carousel .img-wrap .slogun-wrap .p2 { padding: 40px 0 55px; font-size: 25px; }
.carousel .img-wrap .slogun-wrap a {overflow: hidden; display: inline-block; position: relative; width: 270px; height: 60px; background: #0c70b5; color: #fff; text-align: center; line-height: 60px; border-radius: 30px; }
.carousel .img-wrap .slogun-wrap a span { display: block; position: relative; z-index: 2;}
.carousel .img-wrap .slogun-wrap a span i { display: inline-block; position: relative; padding: 0 0 0 10px;}
.carousel .img-wrap .slogun-wrap a:before { content:''; display: block; position: absolute; left: -100%; top: -10%; width: 100%; height: 120%; background: #102d4d; transition: .2s; }
.carousel .img-wrap .slogun-wrap a:hover:before { left: 0; border-radius: 20px;}
.carousel .img-wrap .slogun-wrap a:hover span i { animation : ani_shaking 1s infinite both}

@media(max-width:1199px){
    .carousel .img-wrap .slogun-wrap .p1 { font-size: 42px;}
}
@media(max-width:991px){
    .carousel .img-wrap .slogun-wrap .p1 { font-size: 35px;}
    .carousel .img-wrap .slogun-wrap .p2 { padding: 30px 0 40px;  font-size: 20px;}
}
@media(max-width:768px){
    .carousel .img-wrap .slogun-wrap .p1 { font-size: 30px;}
    .carousel .img-wrap .slogun-wrap .p2 { font-size: 18px;}
}
@media(max-width:576px){
    .carousel .img-wrap .slogun-wrap .p1 { font-size: 25px; line-height: 1.4;}
    .carousel .img-wrap .slogun-wrap .p2 {  padding: 25px 0 35px; font-size: 18px;}
    .carousel .img-wrap .slogun-wrap a { width: 220px; height: 50px; line-height: 50px; border-radius: 25px;}
}
@media(max-width:480px){
    .carousel .img-wrap .slogun-wrap { text-align: center;}
    .carousel .img-wrap .slogun-wrap .p1 { font-size: 17px;}
    .carousel .img-wrap .slogun-wrap .p1 span { display: inline;}
    .carousel .img-wrap .slogun-wrap .p2 {   font-size: 14px;}
    .carousel .img-wrap .slogun-wrap a { width: 220px; height: 50px; line-height: 50px; border-radius: 25px;}
}


@keyframes ani_shaking  {
    0% { left:0}
    50% { left:10px}
    100% { left:0}
}