@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;text-transform: uppercase;}
#contact .title>h3:after{position: absolute;z-index: 1; left: 50%; bottom: 0;width:50px;height: 4px; background: #c7000c; 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: 150px 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: #c7000c;}
#contact .headquarters .layout>.content>.rows.active{}
#contact .headquarters .layout>.content>.rows.active .tit{color: #d70d19;}
#contact .headquarters .layout>.content>.rows.active .img>img{}

#contact .team{ display: none; margin: 50px auto 0 auto; padding: 150px 0;}
#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:48%; 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(2n){margin-right: 0;}
#contact .team .layout>.lists>ul>li .qrcode{ width: 30%; float: left; }
#contact .team .layout>.lists>ul>li .qrcode>img{ 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: 70%; float: right; text-align: left; box-sizing: border-box;padding: 10px 30px; }
#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: 0; bottom: -1px;width: 30px; height: 1px; background: #c7000c; content: '';}
#contact .team .layout>.lists>ul>li .box>.txt{ text-align: left; 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);}


#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; height: auto!important; 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: #c7000c;}
#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) {

    #contact .team .layout>.lists>ul>li .qrcode{ width: 35%;}
    #contact .team .layout>.lists>ul>li .box{ width: 65%; padding: 0 30px; }



}

@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 .qrcode{ width: 30%;}
    #contact .team .layout>.lists>ul>li .box{ width: 70%; padding: 0 25px; }
    #contact .team .layout>.lists>ul>li {padding: 20px;}
    #contact .team .layout>.lists>ul>li .box>.tit {padding: 6px 0; font-size: 1.6rem; }


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

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

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


    #contact .team .layout>.lists>ul>li{display: block;float: none;width:100%; margin-right: 0; margin-bottom: 20px; }
    #contact .team .layout>.lists>ul>li .qrcode{ width: 25%;}
    #contact .team .layout>.lists>ul>li .box{ width: 75%; padding: 30px; }

    #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 .box{ padding: 15px 30px; }


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


}


@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-top: 60px;}
    #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 .qrcode{ width: 30%;}
    #contact .team .layout>.lists>ul>li .box{ width: 70%; padding: 5px 15px; }
    #contact .team .layout>.lists>ul>li .box>.tit {font-size: 1.4rem;}
    #contact .team .layout>.lists>ul>li .box>.txt { font-size: 1.2rem; }

    #myMap .custom-info {min-width: 320px;}
    #myMap div.info-middle {padding: 20px; }
    #myMap div.info-middle>.box>.title{font-size: 1.8rem;}



}