@charset "utf-8";
/* CSS Document */


#myMap{ position:fixed!important; z-index:1; left: 0;top: 0; width:100%; height: 700px; background:#fff;}
#myMap .BMap_bubble_title{ font-size:1.6rem; font-weight:bold; color:#333;}
#myMap .BMap_bubble_content{ font-size:1.4rem; color:#333; line-height:2.4rem;}
#myMap .BMap_bubble_content .url{ display:inline-block; margin-top:6px; font-size:1.6rem;color:rgba(1,64,153,1); box-sizing:border-box;}
#myMap .BMap_bubble_content .url>i{font-size: 2.4rem; color: rgba(1,64,153,1); float: left; margin-right: 10px;}
#myMap .BMap_Marker>div{z-index:90 !important;}


#contact{ position: relative;z-index: 5; background: #fff; margin: 0 auto;}

#contact>.container{margin: 0 auto; padding: 150px 0;}
#contact>.container .box{ width: 50%; box-sizing: border-box;padding-right: 50px; text-align:left;}
#contact>.container .box>.tit{ position: relative; font-size: 4.2rem; color: rgba(0,0,0,1);}
#contact>.container .box>.txt{ padding: 50px 0 20px 0; font-size: 1.8rem;font-weight: 700; color: #333; line-height: 3.2rem;}
#contact>.container .box>.txt>p{display: block;zoom: 1;}
#contact>.container .box>.txt>p:before, #contact>.container .box>.txt>p:after { content: ""; display: table; }
#contact>.container .box>.txt>p:after { clear: both; }
#contact>.container .box>.txt>p>i{font-size: 3rem; color: rgba(1,64,153,1); margin-right: 15px; float: left;}
#contact>.container .box>.txt>p span{display: block;font-size: 1.8rem;font-weight: normal; color: #666; padding-left: 45px;}
#contact>.container .box>.qrcode{ text-align: left; padding-left: 45px;}
#contact>.container .box>.qrcode>img{width: 180px;height: auto;}


#contact>.container .feedback{ position: absolute;z-index: 40; right: 0;top: 0; width: 50%; height: 100%; box-sizing: border-box;padding:140px 100px; background: url("../img/feedback_bg.jpg") no-repeat; background-size: cover; background-position: 0 0;}
#contact>.container .feedback>.tit{ position: relative; padding-bottom: 20px; font-size:3rem; font-weight: 700; color: rgba(1,64,153,1);}
#contact>.container .feedback>.tit:after{position: absolute;z-index: 1; left: 0;bottom: 0;width: 50px;height: 2px;background: rgba(1,64,153,1);content: '';}
#contact>.container .feedback>.con{padding: 20px 0;}
#contact>.container .feedback>.con .item{ position: relative; display:block; padding:12px 0;}
#contact>.container .feedback>.con input{ display:inline-block; box-sizing:border-box; width:100%;height:auto;padding:12px;-webkit-appearance:none; border:1px solid #ddd; border-radius: 3px; color:#666;text-align:left;}
#contact>.container .feedback>.con input::-webkit-input-placeholder{ color:#999;}
#contact>.container .feedback>.con textarea{ display:block;box-sizing:border-box; width:100%;height:auto;padding:12px;-webkit-appearance:none;  line-height:20px; border:1px solid #ddd; border-radius: 3px; color:#666;text-align:left;}
#contact>.container .feedback>.con textarea::-webkit-input-placeholder{ color:#999;}
#contact>.container .feedback>.con .w30{width:30%;}
#contact>.container .feedback>.con .w50{width:49%;}
#contact>.container .feedback>.con .w100{width:100%; clear:both}
#contact>.container .feedback>.con #checkimg{display:inline-block; position:absolute;z-index:3; top:50%; right:10px; margin-top:-13px; cursor:pointer;}
#contact>.container .feedback>.con .button{padding-top: 12px;}
#contact>.container .feedback>.con .button>.submit{display:block; width: 100%; box-sizing:border-box; background:rgba(1,64,153,1);padding:16px 10px; font-size:1.6rem; color:#fff; text-align:center; border:0; cursor:pointer; transition: all .35s;}
#contact>.container .feedback>.con .button>.submit:hover{background: rgba(240,130,0,1);}



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

    #myMap{ position:relative!important;}
    #space{display: none;}
    #contact{padding-top: 100px;}
    #contact>.container{width: 100%;max-width: inherit;padding: 0;}
    #contact>.container .box{ position: relative; width: 86%; float: none; padding: 100px 0; margin: 0 auto;}
    #contact>.container .box>.qrcode{ position: absolute;z-index: 3;  right: 0; bottom:16%; text-align: left; padding-left: 0;}
    #contact>.container .feedback{ position: relative; float: none; width: 100%; height: auto; padding:100px;}



}


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

    #contact>.container .box>.tit{ font-size: 3.2rem;}
    #contact>.container .box>.txt{ font-size: 1.8rem; line-height: 3.2rem;}
    #contact>.container .box>.txt>p>i{font-size: 2.4rem;}
    #contact>.container .box>.txt>p span{font-size: 1.6rem;}

    #contact>.container .feedback>.tit{ font-size:2.4rem;}


}


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

    #contact>.container .box>.qrcode{ position: relative;left: 0; bottom:0;}


    #contact>.container .feedback{ padding:50px;}
    #contact>.container .feedback>.tit{ font-size:2rem;}

}

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

    #contact{padding-top: 20px;}
    #contact>.container .box>.tit{ font-size: 2.4rem;}
    #contact>.container .box>.txt{ font-size: 1.3rem; line-height: 3rem;}
    #contact>.container .box>.txt>p>i{font-size: 2.2rem;margin-right: 6px;}
    #contact>.container .box>.txt>p span{ display:block; font-size: 1.3rem;padding-left: 30px;}


    #contact>.container .feedback>.con .w30{width:100%; float: none;}
    #contact>.container .feedback>.con .w50{width:100%; float: none;}

}