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

#contact{margin: 0 auto; transition: all .35s; }
#contact.active {transform: translateX(-220px);}

#contact .contactus{margin:0 auto 40px auto; padding:30px; border:1px solid #ddd;}
#contact .contactus>.title{ box-sizing: border-box; text-align:center; margin-right: 30px; background: url("../img/contact_title_bg.jpg") no-repeat; background-size: cover; }
#contact .contactus>.title>img{ width: auto;height: 240px;}
#contact .contactus>.qrcode{ box-sizing: border-box; text-align:center; padding-right: 30px; border-right:1px solid #ddd;}
#contact .contactus>.qrcode>img{ width: auto;height: 240px;}
#contact .contactus>.contact{ box-sizing: border-box; padding-left: 50px; text-align:left;}
#contact .contactus>.contact>p{ position:relative; display:block;
/*padding:8px 0; */
padding: 12px 0;
font-size: 1.6rem; color:rgba(53,59,73,1); }
#contact .contactus>.contact>p>i{ display: inline-block; float: left; vertical-align: top; font-size: 2.8rem; color: rgb(219 38 29); margin-right: 16px;}
#contact .contactus>.contact>p>a{ color: rgba(53,59,73,1); transition: all .35s;}
#contact .contactus>.contact>p>a:hover{text-decoration: underline;}

#contact>.feedback{ background: #eee; margin:0 auto; padding:100px 0; }
#contact>.feedback>.title{text-align:center;margin:0 auto;}
#contact>.feedback>.title>.tit{ font-size:3rem;}
#contact>.feedback>.title>.tip{ padding:20px 0; font-size:1.6rem; color:#999;}
#contact>.feedback>.container{ width:86%;max-width:1200px;margin:0 auto; padding:50px 0;}
#contact>.feedback>.container .item{ display:block; padding:12px 0;}
#contact>.feedback>.container .code{ position:relative;}
#contact>.feedback>.container input{ display:inline-block; box-sizing:border-box; width:100%;height:auto;padding:15px;-webkit-appearance:none; border:1px solid #ccc; color:#666;text-align:left;}
#contact>.feedback>.container input::-webkit-input-placeholder{ color:#999;}
#contact>.feedback>.container textarea{ display:block;box-sizing:border-box; width:100%;height:auto;padding:15px;-webkit-appearance:none;  line-height:20px; border:1px solid #ccc; color:#666;text-align:left;}
#contact>.feedback>.container textarea::-webkit-input-placeholder{ color:#999;}
#contact>.feedback>.container .w30{width:30%;}
#contact>.feedback>.container .w50{width:48%;}
#contact>.feedback>.container .w100{width:100%; clear:both}
#contact>.feedback>.container #checkimg{display:inline-block; position:absolute;z-index:3;
/*top:50%; right:10px; */
top: 28.3%;right: 2px;
margin-top:-13px; cursor:pointer;}
#contact>.feedback>.container .submit{ float:right; display:inline-block; box-sizing:border-box; width:46%!important; background:rgba(144,40,51,1);padding:12px 10px; font-size:16px; color:#fff; text-align:center; border:0; cursor:pointer; width:50%;}
#contact>.feedback>.container .reset{ float:left;display:inline-block; box-sizing:border-box;width:46%!important; background:#666;padding:12px 10px;font-size:16px; color:#fff; text-align:center; border:0; cursor:pointer; width:50%;}
#contact>.partner{margin:0 auto; padding:50px 0; display:none; }
#contact>.partner>.title{text-align:center;margin:0 auto;}
#contact>.partner>.title>.tit{ font-size:3rem;}
#contact>.partner>.container{ width:90%;max-width:1100px;margin:0 auto; padding:50px 0;}
#contact>.partner>.container img{max-width:100%;height:auto;}


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

    #contact .contactus{padding:0;}
    #contact .contactus>.title{ float:none;  width:100%;}
    #contact .contactus>.qrcode{ margin: 20px;}
    #contact .contactus>.contact{padding-top: 20px;}

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

    #contact .contactus>.qrcode>img{ height: 200px;}
    #contact .contactus>.contact{  padding-left: 30px;}
    #contact .contactus>.contact>p{ padding:5px 0; font-size: 1.5rem; }

}


@media only screen and (max-width: 780px){
    #contact>.feedback>.container #checkimg{
        width: 44%;
        top: 34.3%;
    }
    #contact .contactus>.qrcode>img{ height: 160px;}
    #contact .contactus>.contact{  padding-left: 20px;}
    #contact>.contactus>p { font-size:1.4rem;}

}


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

    #contact .contactus>.qrcode>img{ height: 120px;}
    #contact .contactus>.contact{  padding-left: 10px;}
    #contact .contactus>.contact>p{font-size: 1.3rem; padding: 3px 0;}
    #contact .contactus>.contact>p>i{ font-size: 2.2rem;}

}



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

    #contact .contactus>.qrcode{float: none; width: 90%; padding: 20px; border-bottom: 1px solid #ddd; border-right: 0; margin: 0 auto;}
    #contact .contactus>.contact{ float: none;  width: 90%;  padding: 20px 0; margin: 0 auto;}

    #contact>.feedback{padding: 30px 0;}
    #contact>.feedback>.title>.tip{ font-size:14px;padding:20px;}
    #contact>.feedback>.container{ padding:20px 0;}
    #contact>.feedback>.container .w30{width:100%;}
    #contact>.feedback>.container .w50{width:100%;clear:both;}
    #contact>.feedback>.container .btn{ padding-top:20px;}
}

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

    #contact>.feedback>.title>.tit{ font-size:2rem;}
    #contact>.feedback>.title>.tip{ font-size:1.2rem;}
    #contact>.feedback>.container{padding:0;}
    #contact>.feedback>.container .item{ padding:8px 0;}
    #contact>.feedback>.container input{ padding:10px 15px;}
    #contact>.partner>.title>.tit{ font-size:2rem;}
    #contact>.partner>.container{ padding:20px 0;}




}