/* .container-slider */
.container-slider { position: relative; width:100%; overflow:hidden; text-align: center; padding: 6.25rem 0;}
.container-slider .relative ,
.container-slider .content { position: relative;}
.container-slider h2 { margin-bottom: 3rem;}
.container-slider .slider .slide { background-color: #fff; padding: 3rem;}
.container-slider .slider .slide h3 { padding: 10px 0 35px 0; position: relative;}
.container-slider .slider .slide h3:after { width: 60px; height: 2px; background-color: #efcd34; content: ""; position: absolute; top: 0; left: 50%; margin: 0 0 0 -30px;}
.container-slider .slider .slide .btn01 { margin: 20px auto 0;}
.container-slider .slider .slide svg { width: 100px; height: 100px; padding: 20px 20px 10px; fill:#28628a; color:#28628a;}

.container-slider .slider .slick-dots { bottom: -35px;}
.container-slider .slick-dots li { margin: 0;}
.container-slider .slick-dots li.slick-active button:before { color:#28628a; font-size: 3rem;}

@media (max-width: 1220px){
    .container-slider .slider { width: 80%; max-width: 80%; margin: 20px auto;}
    .container-slider .slick-prev:before , 
    .container-slider .slick-next:before { color: #28628a; font-size: 30px;}    
    .container-slider .slick-prev { left: -85px;}
    .container-slider .slick-next { right: -65px;}
}
@media (max-width: 767px){ 
    .container-slider { padding: 0 0 3rem;}
    .container-slider .slider .slide { padding: 1rem;}
    .container-slider .slick-prev { left: -45px;}
    .container-slider .slick-next { right: -35px;}
}




/* .slick-arrows */
.slick-arrows { position: absolute; top: calc(50% - (50px / 2)); left: 0; display: flex; flex-direction: row; justify-content: space-between; align-items: center; width: 100%;}
.slick-arrows button { cursor: pointer; position: relative; display: flex; flex-direction: row; justify-content: center; align-items: center; background: rgba(255, 255, 255, .75); border: none; padding: 1rem;}
.slick-arrows button.slick-disabled { pointer-events: none; opacity: .25;}
.slick-arrows button svg { width: 35px; height: 35px; color: #3182a4; opacity: 1; transition: opacity .5s ease;}


@media(hover:hover) {
    .slick-arrows button:not(.slick-disabled):hover svg { opacity: .5;}
}

@media (max-width: 767px){ 
    .slick-arrows { display: none;}
}