.contact-container { padding-top: 11.25rem; width: 75%;; position: relative; padding-top: 11.25rem; margin: 0 auto; overflow: hidden; }

.contact-title { flex: 0 0 100%; position: relative; }
.contact-title h1 { flex: 0 0 100%; font-size: 3.25rem; text-align:center; line-height: 1; text-align: left; }
.contact-title .up-icon {  height: 1.6875rem; width: 1.6875rem; position: absolute; right: 0; top: 0;}
.contact-list { padding-top: 6.875rem; display: flex;}

.contact-list ol { display: flex; flex: 100%; flex-wrap: wrap; }
.contact-list ol li {flex: 0 0 50%; display: flex; padding-bottom: 3.25rem; }
.contact-list ol li div > span { flex: 0 0 50%; text-align: left; font-size: 1.125rem; color: #666; line-height: 1; display: flex; align-items: center; }
.contact-list ol li div.tel-icon > span::before { transition: transform 0.2s; background-image: url(/images/tel.svg); background-size: 100% 100%; content: ''; display: block;  width: 2rem; height: 2rem; margin-right: .9rem; }
.contact-list ol li div.tel-icon > span:hover::before { animation: bounce .5s infinite; }
/* @keyframes bounce { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.1); } } */
@keyframes bounce { 0% { transform: translate(0px, 0px); } 50% { transform: translate(0px,-5px); } 100% { transform: translate(0px, 0px); }  }

.contact-list ol li h4 { flex: 0 0 50%; text-align: right; font-weight: 700; font-size: 1.125rem; line-height: 1; display: flex; justify-content: end; align-items: center; }
.tel-icon-container { padding-right: 2.5rem;}
.mobile-icon-container { padding-left: 2.5rem; }
.map-icon-container { padding-right: 2.5rem; }
.map-icon-container2 { padding-left: 2.5rem; }

.map-icon > span { flex: 0 0 25% !important;  }
.map-icon > h4 { flex: 0 0 75% !important;  }
.contact-list ol li div.mobile-icon > span::before { transition: transform 0.2s; background-image: url(/images/mobile.svg); background-size: 100% 100%; content: ''; display: block;  width: 2rem; height: 2rem; margin-right: .9rem; }
.contact-list ol li div.mobile-icon > span:hover::before { animation: bounce .5s infinite; }

.contact-list ol li div.map-icon > span::before { background-image: url(/images/map.svg); background-size: 100% 100%; content: ''; display: block;  width: 2rem; height: 2rem; margin-right: .9rem; }


.tel-icon, .mobile-icon,.map-icon { display: flex; flex: 0 0 100%; padding: 2.125rem 2rem; border: #ccc 1px solid; border-radius: 20px;  }

.banner-container { width: 100%; overflow: hidden;}
.banner-list {display: flex; width: 100%; }
.banner-item { position: relative; width: 100%; flex: 0 0 100%; }
.banner-item > div { width: 100%; }
.slick-active .banner--content { visibility: visible; width: 100%; max-width: 100%; }
.banner__single__content h1 { font-size: 3.45rem; text-align: center; }
.banner__single__content h5 { font-size: 1.65rem; text-align: center; }
.banner--content { bottom: calc(50% - 3rem); }
.slick-slider {
    margin-bottom: 0;
}
.slick-list {
    overflow: hidden;
}
@media only screen and (min-width: 300px) and (max-width: 1024px) { 
    .contact-container { width: 90%;}
    .contact-list ol li {flex: 0 0 100%; display: flex; padding-bottom: 3.25rem; } 
    .tel-icon-container { padding-right: 0;}
    .mobile-icon-container { padding-left: 0; }
    .map-icon-container { padding-right: 0; }
    .map-icon-container2 { padding-left: 0; }
    .contact-list ol li div.map-icon > span::before { margin-right: .5rem; }
    .contact-list ol li div.tel-icon > span::before { margin-right: .5rem; }
    .contact-list ol li div.mobile-icon > span::before { margin-right: .5rem; }

    .banner__single__content h1 { font-size: 2.45rem; text-align: center; }
    .banner__single__content h5 { font-size: .8rem; text-align: center; padding-top: 1rem; }
    .banner--content { bottom: calc(35%); }
    
}