.swiper-container { height: 634px;}
.swiper-pagination { width: 100px; height: 20px; text-align: center; position: absolute; bottom: 40px; left: 50%; margin-left: -50px; z-index: 3; display: flex; align-items: center; justify-content: space-around;}
.swiper-pagination span { display: block; height: 10px; width: 10px; border-radius: 50px; background: rgba(255, 255, 255, 0.8); cursor: pointer;}
.swiper-pagination .swiper-pagination-bullet-active { width: 16px; height: 16px;}

.banner-content { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; height: 634px;}
.text-module { width: 50%;}
.text-module dt { font-size: 50px; padding-left: 60px; color: #fff; line-height: 100px;}
.banner-content .col-xs-12 dt { font-size: 36px; padding-left: 0; line-height: 60px; text-align: center;}
.text-module dt em { display: block; font-size: 32px; line-height: 50px; padding: 30px 0;}
.banner-content .col-xs-12 dt em { font-size: 24px; line-height: 40px;}
.text-module dd { font-size: 18px; padding-left: 60px; color: #fff; line-height: 40px;}
.banner-content .col-xs-12 dd { padding-left: 0; text-align: center;}
.module { width: 50%; display: flex; justify-content: center; align-items: center;}
.banner-content .module img { display: block;}
.banner-content .col-xs-12 img { width: 90%;}


.services { display: flex; justify-content: space-between; flex-wrap: wrap; padding-top: 60px;}
.service { width: 30%;}
.services dl { margin-bottom: 30px;}
.services dt { font-size: 16px; color: #2a2a2a; font-weight: bold; text-align: center; margin-bottom: 14px;}
.services dd { color: #949494; font-size: 14px; text-align: center; line-height: 22px;}
.services .icon { border: 1px solid #4fbfa8; width: 80px; height: 80px; border-radius: 200px; margin:auto; display: flex; align-items: center; justify-content: center; margin-bottom: 26px; font-size: 26px; margin-top: 10px;}
.services .service:hover .icon { width: 96px; height: 96px; font-size: 30px; margin-top: 2px; margin-bottom: 18px;}
.services .icon i { color: #4fbfa8;}

.transformation { background-image: url(../img/index-fixed-bg.jpg); background-position: center center; background-attachment: fixed; background-size: cover; position: relative; }
.transformation-mask { background: rgba(0, 0, 0, 0.2); padding: 30px 0;}
.transformation .icon { border: 2px solid #fff; width: 80px; height: 80px; border-radius: 200px; display: flex; align-items: center; justify-content: center; font-size: 30px; color: #fff; margin: auto;}
.transformation dt { font-size: 26px; font-weight: bold; color: #fff; text-align: center; margin-bottom: 24px; margin-top: 24px;}
.transformation dd { font-size: 16px; color: #fff; text-align: center; margin-bottom: 34px;}
.transformation .transformation-url { display: block; width: 200px; height: 50px; border: 1px solid #fff; text-align: center; line-height: 50px; font-size: 16px; font-weight: bold; color: #fff; margin: auto;}
.transformation a:hover { background: #fff; color: #4fbfa8;}

.programme { padding: 80px 0;}
.programme strong { font-size: 18px; color: #2a2a2a; font-weight: normal; text-align: center; display: block; margin-bottom: 40px; padding: 0 30px;}
.programme a { color: #4fbfa8;}
.programme .programmes { display: flex; justify-content: center; flex-wrap: wrap;}
.programme-module { box-sizing: border-box; width: 25%; padding: 0 14px;}
.programme .img-panel { position: relative;}
.programme .img-panel img { display: block; width: 100%;}
.programme .img-panel:hover .mask { display: block; position: absolute; left: 0; top: 0; right: 0; bottom: 0; z-index: 1; background: rgba(79, 191, 168, 0.7); display: flex; align-items: center; justify-content: center;}
.programme .img-panel .mask { display: none;}
.programme .mask a { display: block; width: 120px; border: 1px solid #fff; height: 40px; line-height: 40px; text-align: center; color: #fff;}
.programme .mask a:hover { color: #4fbfa8; background: #fff;}
.programme .img-panel { margin-bottom: 30px;}
.programme .programme-module h4 { text-align: center; margin-bottom: 20px;}
.programme .programme-module h4 a { color: #4fbfa8; font-size: 18px;}
.programme .programme-module strong { font-weight: normal; font-size: 14px; color: #2a2a2a; margin-bottom: 20px; line-height: 22px;}
.programme .programme-module p { font-size: 14px; color: #949494; line-height: 22px; height: 140px;}
.programme .programme-module .read { width: 90px; display: block; height: 40px; text-align: center; line-height: 40px; border: 1px solid #4fbfa8; color: #4fbfa8; font-weight: bold; margin: auto;}
.programme .programme-module .read:hover { background: #4fbfa8; color: #fff;}

.customer { background: #eee; padding: 60px 0;}
.customers { display: flex; justify-content: center; align-items: center; flex-wrap: wrap;}
.customer-img { width: 20%; padding: 20px 0; box-sizing: content-box; height: 80px; display: flex; align-items: center; justify-content: center;}
.customers .customer-img img { display: block; height: 100%; transition: all 0.3s; filter: grayscale(100%);}
.customers .customer-img img:hover { filter: grayscale(0);}