@charset "utf-8";

/* CSS Document */





#contact{margin: 0 auto;}



#contact .title{ position: relative; text-align: center; margin: 0 auto;}

#contact .title>h3{ position: relative;z-index: 20; font-size: 4rem; padding:30px 0 20px 0; font-weight: bold; color: #333;}

#contact .title>h3:after{position: absolute;z-index: 1; left: 50%; bottom: 0;width:50px;height: 4px; background: #005d8a; transform: translateX(-50%); content: '';}

#contact .title>h4{position: absolute;z-index: 1; left: 50%; top: 0; width: 100%; font-size: 6rem; color: #f3f3f3; transform: translateX(-50%); text-transform: uppercase;}



#contact .headquarters{ position: relative;z-index: 540; margin: 0 auto;padding: 75px 0;}

#contact .headquarters .layout{position: relative;z-index: 50;padding-top: 80px; overflow: hidden;}

#contact .headquarters .layout>.map{ position: absolute;z-index: 10; width: 60%; height: 100%;}

#contact .headquarters .layout>.content{ border-top: 1px solid #eee;  border-bottom: 1px solid #eee; width:40%; box-sizing: border-box;padding:20px 0 20px 100px; background: #fff; text-align: left;}

#contact .headquarters .layout>.content>.rows{display: block; cursor: pointer; box-sizing: border-box;text-align: left; padding: 30px 0; border-bottom: 1px dotted #ddd; transition: all .35s;}

#contact .headquarters .layout>.content>.rows:last-child{border-bottom: 0; padding-bottom: 0;}

#contact .headquarters .layout>.content>.rows .img{display: block;}

#contact .headquarters .layout>.content>.rows .tit{ font-size: 3rem; font-weight: bold; color: #333; transition: all .35s;}

#contact .headquarters .layout>.content>.rows .box{padding: 30px 0; font-size: 1.6rem; color: #666;}

#contact .headquarters .layout>.content>.rows .box>p{display: block; margin-bottom: 10px;}

#contact .headquarters .layout>.content>.rows .box>p i{display: inline-block; margin-right: 5px; font-size: 2.4rem; color: #005d8a;}

#contact .headquarters .layout>.content>.rows.active{}

#contact .headquarters .layout>.content>.rows.active .tit{color: #005d8a;}

#contact .headquarters .layout>.content>.rows.active .img>img{}



#contact .team{ margin:0 auto;}

#contact .team .layout{margin: 0 auto;padding-top: 80px; }

#contact .team .layout>.lists{margin: 0 auto; }

#contact .team .layout>.lists>ul{margin: 0 auto;}

#contact .team .layout>.lists>ul>li{display: block;float: left;width:22.75%; margin-right: 3%; margin-bottom: 3%; position: relative; padding: 30px; border: 1px solid #eee; box-sizing: border-box; transition: all .35s; }

#contact .team .layout>.lists>ul>li:nth-child(4n){margin-right: 0;}

#contact .team .layout>.lists>ul>li .qrcode{ width: 100%;text-align: center; }

#contact .team .layout>.lists>ul>li .qrcode>img{ max-width: 200px; width: 100%;height: auto; box-shadow: 5px 6px 8px rgba(0,0,0,.1); transition: all .8s;}

#contact .team .layout>.lists>ul>li .box{ width: 100%; text-align: center; box-sizing: border-box;padding: 10px 0; }

#contact .team .layout>.lists>ul>li .box>.tit{ position: relative;padding: 15px 0; font-size: 1.8rem; font-weight: bold; color: #333; border-bottom: 1px solid #ddd;}

#contact .team .layout>.lists>ul>li .box>.tit:after{position: absolute;z-index: 1; left: 50%; bottom: -1px; transform: translateX(-50%); width: 30px; height: 1px; background: #005d8a; content: '';}

#contact .team .layout>.lists>ul>li .box>.txt{ font-size: 1.4rem; color: #666; padding-top: 20px;}

#contact .team .layout>.lists>ul>li .box>.txt p{margin-bottom: 8px;}

#contact .team .layout>.lists>ul>li .box>.txt a{display: inline-block; color: #666;}

#contact .team .layout>.lists>ul>li:hover{box-shadow: 4px 3px 20px rgba(0,0,0,.16);}





#contact .support{ margin:0 auto; padding: 100px 0;}

#contact .support .layout{display: flex; justify-content: center; align-items: center; margin: 0 auto; padding: 40px 0;}

#contact .support .layout>.rows{display: inline-block; text-align: center; margin: 0 50px; padding: 50px; transition: all .35s;}

#contact .support .layout>.rows>.ico{color: #005d8a;}

#contact .support .layout>.rows>.ico>i{font-size: 6rem;}

#contact .support .layout>.rows>.tit{font-size: 1.4rem; color: #005d8a; padding: 10px 0;}

#contact .support .layout>.rows>.con{ color: #333; font-size: 2rem;}

#contact .support .layout>.rows:hover{box-shadow: 0 5px 20px rgba(0,0,0,.1);}



#myMap{ width: 100%; height: 100%;resize:both;}

#myMap .content-window-card { position: relative; box-shadow: none; bottom: 0; left: 0;  width: auto; padding: 0;}

#myMap .content-window-card p {  height: 2rem;}

#myMap .custom-info { width: auto; min-width: 500px; border: solid 0 silver; background: rgba(215,13,25,.8); border-radius: 10px;}

#myMap div.info-top {position: relative; height: 0; }

#myMap div.info-top div {  display: inline-block; color: #333333; font-size: 16px; font-weight: bold; line-height: 31px;  padding: 0 10px;}

#myMap div.info-top img { position: absolute; top: 10px; right: 10px; transition-duration: 0.25s;}

#myMap div.info-top img:hover { box-shadow: 0 0 5px #000;}

#myMap div.info-middle { display: flex; justify-content: space-between;align-items: center; margin: 0 auto;padding:30px  20px; background: transparent!important; }

#myMap div.info-middle>.box{display: inline-block; flex-grow: 1; padding-left: 10px; text-align: left; }

#myMap div.info-middle>.box>.title{ text-align: left;width: 100%;}

#myMap div.info-middle>.box>.title>span{display: inline-block; font-size: 1.8rem;font-weight: bold; color: #fff; margin-left: 0;}

#myMap div.info-middle>.box>.title>span.company{display: none;}

#myMap div.info-middle>.box>.title>span.address{display: block;}

#myMap div.info-middle>.box>.con{ padding: 10px 0;}

#myMap div.info-middle>.box>.con>.mob{display: none; padding: 10px 0;}

#myMap div.info-middle>.box>.con>.mob>p{ display: block; font-size: 1.4rem; color: rgba(255,255,255,.8);}

#myMap div.info-middle>.box>.con>.mob>p.mob{display: none;}

#myMap div.info-middle>.box>.con>.mob>p i{display: inline-block; margin-right: 5px; font-size: 1.8rem; color: #005d8a;}

#myMap div.info-middle>.box>.con>.url>p{display: block; height: 24px; line-height: 24px; font-size: 1.4rem; color: rgba(255,255,255,.8);}

#myMap div.info-middle>.box>.con>.url a{display: inline-block; color: rgba(255,255,255,1); background: #333; border-radius: 5px;padding: 5px 12px; transition: all .35s;}

#myMap div.info-middle>.box>.con>.url a img{height: 22px; width: auto; margin-right: 5px;}

#myMap div.info-middle>.box>.con a:hover{background: #000; color: #f9c100;}

#myMap div.info-bottom { height: 0; width: 100%; clear: both; text-align: center;}

#myMap div.info-bottom img { position: relative; z-index: 104;}

#myMap span { margin-left: 5px; font-size: 11px;}



@media only screen and (max-width: 1460px) {





    #contact .headquarters .layout>.content{ padding:20px 0 20px 60px;}





}



@media only screen and (max-width: 1380px) {



    #contact .headquarters .layout>.content>.rows .tit{ font-size: 2.4rem;}

    #contact .headquarters .layout>.content>.rows .box{font-size: 1.4rem;}

    #contact .headquarters .layout>.content>.rows .box>p i{font-size: 2.2rem;}



}





@media only screen and (max-width: 1280px) {











}



@media only screen and (max-width: 1080px) {



    #contact .headquarters .layout>.map{ float: none; position: relative; width: 100%; height: 420px;}

    #contact .headquarters .layout>.content{ float: none; width: 100%; padding: 60px; border-top: 0;background: #eee;}

    #contact .headquarters .layout>.content>.rows{border-bottom: 0; padding: 0;}

    #contact .headquarters .layout>.content>.rows>.box{display: none;}

    #contact .headquarters .layout>.content>.rows .tit {font-size: 2rem; text-align: center; border: 1px solid transparent; border-radius: 50px;padding: 20px 0;}

    #contact .headquarters .layout>.content>.rows.active .tit {border-color: #ddd; box-shadow: 0 2px 8px rgba(0,0,0,.1); background: #fff;}





    #myMap div.info-middle>.box>.title>span.company{display: block;}

    #myMap div.info-middle>.box>.title>span.address{display: none;}

    #myMap div.info-middle>.box>.con>.mob{display: block;}

    #myMap div.info-middle>.box>.con>.mob>p.mob{display: block;}





    #contact .title>h3{ font-size: 3.2rem;}

    #contact .title>h4{font-size: 4.5rem;}





    #contact .team .layout>.lists>ul>li .box>.txt {padding-top: 10px;}

    #contact .team .layout>.lists>ul>li .box>.txt p { margin-bottom: 3px;}









}



@media only screen and (max-width:960px) {



    #contact .team .layout>.lists>ul>li{width:48%; margin-right: 0; }

    #contact .team .layout>.lists>ul>li:nth-child(even){float:right;}

    #contact .team .layout>.lists>ul>li:nth-child(3n){margin-right: 0;}



    #myMap div.info-middle>.box>.title{font-size: 2.6rem;}

    #contact .support .layout>.rows{ margin: 0 20px; padding: 30px;}









}

@media only screen and (max-width:860px) {



    #contact .title>h3{ font-size: 2.8rem;}

    #contact .title>h4{font-size: 4rem;}









    #myMap div.info-middle>.box>.title{font-size: 2.2rem;}

}



@media only screen and (max-width:640px) {





    #contact .headquarters .layout>.content { padding: 20px 30px;}

    #contact .headquarters .layout>.content>.rows { padding: 10px 0; }

    #contact .headquarters .layout>.content>.rows .tit {font-size: 1.8rem;}







    #contact .team{ padding: 50px 0; }

    #contact .team .layout>.lists>ul>li{display: block; float:none; width: 100%;}

    #contact .team .layout>.lists>ul>li:nth-child(even){float: none;}

    #contact .team .layout>.lists>ul>li .qrcode{ width: 30%; float: left;}

    #contact .team .layout>.lists>ul>li .box{ width: 60%; float: right; }



    #myMap .custom-info {min-width: 400px;}

    #myMap div.info-middle>.box>.con>.mob>p{ font-size: 1.2rem; }



    #contact .support .layout>.rows{ margin: 0; padding: 30px;}

    #contact .support .layout>.rows>.ico>i { font-size: 5rem;}

    #contact .support .layout>.rows>.con { font-size: 1.6rem; }



}





@media only screen and (max-width:520px) {



    #contact .title>h3{ font-size: 2.4rem; padding: 15px 0;}

    #contact .title>h4{font-size: 2.4rem;}



    #contact .headquarters{padding: 60px 0 30px 0;}

    #contact .headquarters .layout { padding-top: 50px; }

    #contact .headquarters .layout>.content>.rows .tit { padding: 15px 0; font-size: 1.6rem;}





    #contact .team .layout { padding-top: 50px; }

    #contact .team .layout>.lists>ul>li .box>.tit { padding: 5px 0;font-size: 1.6rem; }



    #myMap .custom-info {min-width: 320px;}

    #myMap div.info-middle {padding: 20px; }

    #myMap div.info-middle>.box>.title{font-size: 1.8rem;}



    #contact .support {padding-top: 0; }

    #contact .support .layout>.rows{ margin: 0; padding: 20px 10px;}

    #contact .support .layout>.rows>.ico>i { font-size: 4rem;}

    #contact .support .layout>.rows>.con { font-size: 1.4rem; }



}





.qrcode {

    display: flex;

    justify-content: start;

    align-items: center;

}

.qrcode p {

    width: 150px;

}