/*--Contacts--*/

.ContactsBox{padding:60px 0px 0px}
.Contacts{ padding: 100px 0px; background: url(/en/webimages/Contacts_01.jpg) no-repeat center; -o-background-size: cover; background-size: cover; overflow: hidden;}

.ContactsList{ overflow: hidden; position: relative;}

.ContactsList ul li .ContactsListContent{background: rgba(255,255,255,0.9); border-radius: 20px; padding: 50px 45px; -webkit-transition: all .4s ease; -o-transition: all .4s ease; -moz-transition: all .4s ease; transition: all .4s ease;}
.ContactsList ul li .ContactsListContent .icon img{ width: 50px;}
.ContactsList ul li .ContactsListContent .icon .defaIcon{ display: block;}
.ContactsList ul li .ContactsListContent .icon .whiteIcon{ display: none;}
.ContactsList ul li .ContactsListContent h3{ font-size: 22px; color: #333333; margin-top: 0 !important;-webkit-transition: all .4s ease;-o-transition: all .4s ease;-moz-transition: all .4s ease;transition: all .4s ease;}
.ContactsList ul li .ContactsListContent .desc{ font-size: 16px; color: #828282; margin-top: 15px;-webkit-transition: all .4s ease;-o-transition: all .4s ease;-moz-transition: all .4s ease;transition: all .4s ease;line-height:24px;display: -webkit-box;height:72px;-o-text-overflow: ellipsis;text-overflow: ellipsis;overflow: hidden;-webkit-line-clamp: 3;}
.ContactsList ul li .ContactsListContent .more{padding-top: 30px;}
.ContactsList ul li .ContactsListContent .more span{ color: #333333;-webkit-transition: all .4s ease;-o-transition: all .4s ease;-moz-transition: all .4s ease;transition: all .4s ease; font-size: 16px; font-weight: 500; position: relative;}
.ContactsList ul li .ContactsListContent .more span::after{ content: ''; width: 36px;-webkit-transition: all .4s ease;-o-transition: all .4s ease;-moz-transition: all .4s ease;transition: all .4s ease; height: 9px; position: absolute; right: -46px; top: 50%; margin-top:-2px; background: url(/en/webimages/Contacts_05.png) no-repeat;}

.ContactsListContent .iconboxcont{display: flex;align-items: center;}
.ContactsList ul li .ContactsListContent h3{width: calc(100% - 50px);padding-left: 15px;}

.ContactsList ul li:hover .ContactsListContent h3{ color: #3dcac8;}
/* .ContactsList ul li:hover .ContactsListContent{background: #3dcac8;}
.ContactsList ul li:hover .ContactsListContent .icon .defaIcon{ display:none;}
.ContactsList ul li:hover .ContactsListContent .icon .whiteIcon{ display:block;}
.ContactsList ul li:hover .ContactsListContent h3{ color: #fff;}
.ContactsList ul li:hover .ContactsListContent .desc{ color: rgba(255,255,255,0.8);}
.ContactsList ul li:hover .ContactsListContent .more span{ color: #fff;}
.ContactsList ul li:hover .ContactsListContent .more span::after{background: url(/en/webimages/Contacts_005.png) no-repeat;} */

.ContactsListDot{ text-align: center; padding-top: 15px; display: none;}
.ContactsListDot span{ background: #fff; opacity: 1; margin: 0px 5px;}
.ContactsListDot span.swiper-pagination-bullet-active{ background: #3dcac8;}

.ContactsMapBox{ background: #f4fcfc; padding-bottom: 30px;}

.ContactsMapTitle{ text-align: center; padding:40px 0px 40px; position: relative; z-index: 20;}
.ContactsMapTitle h3{ font-size: 24px; color: #34373b;}
.ContactsMapTitle p{padding-top: 15px;}
.ContactsMapTitle p span{ color: #34373b; font-weight: 600; font-size: 14px; padding-left: 30px; padding-right: 20px; position: relative;}
.ContactsMapTitle p span::after{ content: ''; width: 18px; height: 18px; background: #ed301c; box-shadow: 0px 2px 4px rgba(237,48,28,0.4); border-radius: 100%; position: absolute; left: 0px; top: 0px;}
.ContactsMapTitle p span:last-child{padding-right: 0px;}
.ContactsMapTitle p span:nth-child(2):after{background: #097fe6;box-shadow: 0px 2px 4px rgba(9,127,230,0.4);}

.ContactsMap{position: relative;width: 80%;margin: 0 auto;}
.ContactsMap ul li{position: absolute; width: 24px; height: 30px;top: 45%;left: 77%; background: url(/en/webimages/Contacts_07.png) no-repeat;-webkit-transition: all ease 1.2s;-o-transition: all ease 1.2s;-moz-transition: all ease 1.2s;transition: all ease 1.2s; opacity: 0;}
.ContactsMap ul li.cur{background: url(/en/webimages/Contacts_08.png) no-repeat; width: 36px; height: 54px;}
.ContactsMap ul li.Animate{opacity: 1;}

.ContactsMap .mapImg{ width: 100%; display: block;}


.contactInformationBox{padding:60px 0px;}

.ContactRegion{padding-top: 10px; padding-left: 1px;}
.ContactRegion a{ font-size: 20px; border:1px solid #e0e0e0; line-height: 55px; position: relative; z-index: 1; margin-left: -1px; color: #828282; float: left; display: block; width: -webkit-calc(25% + 1px); width: -moz-calc(25% + 1px); width: calc(25% + 1px); text-align: center;}
.ContactRegion a.cur{ background: #33b9b6; color: #fff; border-color: #33b9b6; z-index: 2;}

.ContactRegion a:nth-child(1){ border-radius:10px 0px 0px 10px;}
.ContactRegion a:last-child{ border-radius:0px 10px 10px 0px;}

.ContactRegionTab{ display: none;}

.contactCityBox{position: relative;margin-top:40px;}
.contactCityBox em{ display: block; position: absolute; top: 50%; margin-top: -20px; background-repeat: no-repeat; background-position: center; width: 30px; height: 40px; cursor: pointer; z-index: 20;}
.contactCityBox em.contactCityPrev{background-image: url(/en/webimages/Contacts_09.png); left: -40px;}
.contactCityBox em.contactCityNext{background-image: url(/en/webimages/Contacts_10.png); right: -40px;}

.contactCity{overflow: hidden; position: relative;}
.contactCity ul li{ width: auto; cursor: pointer; padding: 10px 0px;}
.contactCity ul li span{ font-size: 18px; color: #828282; border-bottom: 2px solid transparent;}
.contactCity ul li.cur span{ color: #33b9b6; border-color: #33b9b6;}

.contactCityInfoBox{overflow: hidden; margin-top: 25px; }
.contactCityInfoBox .contactCityInfo{display: none;}
.contactCityInfoBox .contactCityInfo:first-child{display: block;}
.contactCityInfo{position: relative;border-top: 1px solid #000;}
.contactCityInfo ul li{position: relative;}
.contactCityInfoContent{ background: #fafafa;padding: 60px 25px 25px; position: relative; z-index: 10; min-height: 330px;font-size: 18px; color: #828282; line-height: 26px;}
.contactCityInfoContent h3{ font-size: 24px; color: #333333;padding-bottom: 20px; font-weight: 500;margin-left: -7px;}
.contactCityInfoContent h3 i{font-size: 26px;}
.contactCityInfoContent p{padding-bottom: 15px;}

.contactCityInfo ul li:hover::before{ width: 80%; height: 80%; border-radius: 20px; position: absolute; left: 50%; margin-left: -40%; bottom: 0px; background: #e4e4e4; box-shadow:0px 10px 40px #e4e4e4; content: '';}
.contactCityInfo ul li:hover .contactCityInfoContent h3{ color: #33b9b6;}
.contactCityInfo ul li:hover .contactCityInfoContent::after{ content: ''; position: absolute; width: 100%; top:-1px; left: 0px; height: 1px; background: #33b9b6;}
.hide{display: none;}

/* .contactCityInfoBar{position: absolute; left: 0px; top: 0px; width: 100%; background: #000000; height: 1px;}
.contactCityInfoBar span{ background: #33b9b6; position: absolute; left: 0px; top: 0px; width: 100%; height: 100%;-webkit-transform: scale(0);-ms-transform: scale(0);-o-transform: scale(0);transform: scale(0);-webkit-transform-origin: left top;-moz-transform-origin: left top;-ms-transform-origin: left top;-o-transform-origin: left top;transform-origin: left top;} */
.ContactsList .swiper-slide{width: 450px;}
.ContactsList .swiper-wrapper{justify-content: center;margin-left: 30px;}

@media (max-width:1200px){
    .Contacts{padding:80px 0px;}
    .ContactsList ul li .ContactsListContent{padding:40px 25px; }
    .ContactsList ul li .ContactsListContent .icon img{ width: 60px;}
    .ContactsList ul li .ContactsListContent h3{ font-size: 18px;margin-top: 20px;}
    .ContactsList ul li .ContactsListContent .desc{ font-size: 14px; margin-top: 10px;line-height:24px;height:72px;-webkit-line-clamp: 3;}
    .ContactsList ul li .ContactsListContent .more{padding-top: 20px;}
    .ContactsList ul li .ContactsListContent .more span{font-size: 14px;}

    .ContactsMapTitle{padding:80px 0px 40px}
    .ContactsMapTitle h3{ font-size: 20px;}
    .ContactsMapTitle p{padding-top: 15px;}
    .ContactsMapBox{padding-bottom: 20px;}
    .contactInformationBox{padding:50px 0px;}
    .ContactRegion a{ font-size:16px;  line-height: 50px;}
    .contactCityBox{margin-top:30px;}
    .contactCity ul li span{ font-size: 16px;}
    .contactCityInfoBox{margin-top: 15px;}

    .contactCityInfoContent{padding: 60px 25px 25px;min-height: 330px;font-size: 18px; color: #828282; line-height: 26px; letter-spacing: -1px;}
    .contactCityInfoContent h3{ font-size: 24px;padding-bottom: 20px; font-weight: 500;}
    .contactCityInfoContent p{padding-bottom: 15px;}
    .ContactsBox{padding:50px 0px 0px;}
    .contactCityInfo{padding-bottom: 40px;}
}


@media (max-width:992px){
    .ContactsListDot{ display: block;}
    .ContactsMap{width: 100%;}
 
}

@media (max-width:768px){
    .ContactsBox{padding:30px 0px 0px;}
    .Contacts{padding:30px 0px;}
    .ContactsList ul li .ContactsListContent{padding:30px 15px; }
    .ContactsList ul li .ContactsListContent .icon img{ width: 45px;}
    .ContactsList ul li .ContactsListContent h3{ font-size: 16px;margin-top: 20px;}
    .ContactsList ul li .ContactsListContent .desc{ font-size: 12px; margin-top: 10px;line-height:20px;height:60px;-webkit-line-clamp: 3;}
    .ContactsList ul li .ContactsListContent .more{padding-top: 15px;}
    .ContactsList ul li .ContactsListContent .more span{font-size: 12px;}

    .ContactsMapTitle{padding:30px 0px 20px}
    .ContactsMapTitle h3{ font-size:16px;}
    .ContactsMapTitle p{padding-top: 15px;}
    .ContactsMapBox{padding-bottom: 30px;}

    .contactInformationBox{padding:30px 0px;}

    .ContactRegion a{ font-size:13px;  line-height:45px;}
    .ContactRegion{padding-top: 0px;}
    .contactCityBox{margin-top:20px;}
    .contactCity ul li span{ font-size: 14px;}
    .contactCityInfoBox{margin-top: 10px; }
    .contactCityInfo{padding-bottom: 10px;}
    .contactCityInfoContent{padding: 20px 15px 20px; position: relative; z-index: 10; min-height:200px;font-size: 14px;line-height: 26px;}
    .contactCityInfoContent h3{ font-size: 18px;padding-bottom: 10px; }
    .contactCityInfoContent p{padding-bottom: 10px;}

}

@media (max-width:480px){
    .ContactRegion{display: flex;justify-content: center;}
    .ContactRegion a{font-size: 12px;width: auto;padding: 0 10px;min-width: 80px;}
}
@media (max-width: 768px){     .ContactsList .swiper-wrapper{justify-content: flex-start;margin-left: 0;}}<!--0.00020003318786621-->