@charset "utf-8";

@import url('https://fonts.font.im/css?family=Rubik');

body,html{background: #fbfeff;}

#contact{margin: 0 auto; }
#contact .info{margin: 0 auto;padding: 100px 0 50px 0; max-width: 1200px;}
#contact .info>.title{font-weight: bold; color: #333; font-size: 4.6rem;}
#contact .info>.describe{ width: 65%; font-size: 1.4rem; font-weight: 200; color: #999; line-height: 2.4rem;}
#contact .info>.content{ text-align: left; padding: 50px 0;}
#contact .info>.content .row{display: flex; justify-content: flex-start;align-items: center; float: left; width: 50%; text-align: left; margin-bottom: 20px; }
#contact .info>.content .row:nth-child(even){float: right;}
#contact .info>.content .row i{display: inline-block; background: #ebf4f9; border-radius: 100%; color: #00a2f5; font-size: 3rem; width: 80px; height: 80px; line-height: 80px; text-align: center;}
#contact .info>.content .row p{display: inline-block; width: 84%; box-sizing: border-box;padding-left: 20px;}
#contact .info>.content .row p>strong{display: block; font-size: 2rem;}
#contact .info>.content .row p>span{display: block; font-size: 1.6rem;font-weight: 200;  color: #666; line-height: 2rem;}
#contact .info>.content .row p>span>a{display: inline-block;transition: all .35s;}
#contact .info>.content .row p>span>a:hover{text-decoration: underline;}

#contact .feedback{ position:relative; padding: 100px;  margin: 0 auto -80px auto; background: #fff; box-shadow: 5px 6px 26px rgba(0,0,0,.1);}
#contact .feedback>.advantage{ width: 36%; box-sizing: border-box;padding-top: 100px; }
#contact .feedback>.advantage>h3{display: block; font-size: 2.4rem; font-weight: 400; color: #333;}
#contact .feedback>.advantage>.text{padding-top: 30px;}
#contact .feedback>.advantage>.text>p{display: block; padding: 5px 0; font-size: 1.6rem;font-weight: 200;  line-height: 2.4rem;font-weight: 200; color: #999;}
#contact .feedback>.advantage>.text>p>i{display: inline-block;vertical-align: middle; color: #39e511; font-size: 2.4rem; font-weight: bold;}
#contact .feedback>.advantage>.text>p>span{display: inline-block;vertical-align: middle; margin-left: 10px;}
#contact .feedback>.form{ width: 56%; }
#contact .feedback>.form .title{ position: relative; padding-bottom: 20px; font-size: 3rem; font-weight: bold; color: #00a2f5; line-height: 5rem; text-align: left; margin: 0 auto;}
#contact .feedback>.form .column{ position: relative; display:block; padding:12px 0;}
#contact .feedback>.form input{ display:inline-block; box-sizing:border-box; width:100%;height:auto;padding:12px;-webkit-appearance:none; border:1px solid #ddd; color:#666;text-align:left; transition: all .35s;}
#contact .feedback>.form input::-webkit-input-placeholder{ color:#999;}
#contact .feedback>.form textarea{ display:block;box-sizing:border-box; width:100%;height:auto;padding:12px;-webkit-appearance:none;  font-family: '微软雅黑'; line-height:20px; border:1px solid #ddd; color:#666;text-align:left;}
#contact .feedback>.form textarea::-webkit-input-placeholder{ color:#999;}
#contact .feedback>.form input:hover, #contact .feedback>.form textarea:hover{box-shadow: 0 0 5px rgba(0,0,0,.1);}
#contact .feedback>.form .w30{width:30%;}
#contact .feedback>.form .w50{width:49%;}
#contact .feedback>.form .w100{width:100%; clear:both}
#contact .feedback>.form #checkimg{display:inline-block; position:absolute;z-index:3; top:50%; right:30px; margin-top:-13px; cursor:pointer;}
#contact .feedback>.form .button{padding-top: 12px;}
#contact .feedback>.form .button>.submit{display:block; width: 100%; box-sizing:border-box; background:#00a2f5;padding:26px 10px; font-size:1.6rem; color:#fff; text-align:center; border:0; cursor:pointer; transition: all .35s;}
#contact .feedback>.form .button>.submit:hover{background: #333;}



#foot{padding-top: 80px; z-index: -200;}







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

    #contact .feedback>.advantage>.text>p{font-size: 1.5rem; line-height: 2.2rem;}

}


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

    #contact .feedback>.advantage>.text>p{font-size: 1.4rem; line-height: 2rem;}

}

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

    #contact .feedback>.advantage{ width: 40%; }
    #contact .feedback>.form{ width: 50%; }

    #contact .info>.content .row p>span {font-size: 1.4rem;}

}

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

    #contact .info>.describe{ width: 100%;}
    #contact .info>.content .row{ float: none; width: 100%; }


    #contact .feedback>.advantage{ width: 100%; float:none; padding-top: 30px; }
    #contact .feedback>.form{ width: 100%; float: none; }


}


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

    #contact .feedback{ padding: 50px 80px;}
    #contact .feedback>.advantage>h3 {font-size: 2rem;}

    #contact .feedback>.advantage>.text>p { font-size: 1.3rem;}
    #contact .feedback>.advantage>.text>p>i {font-size: 2rem; }



}

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

    #contact .feedback{ padding: 50px;}
    #contact .feedback>.form .title{ font-size: 2.4rem;}
    #contact .feedback>.form .w30{width:100%; clear: both;}
    #contact .feedback>.form .w50{width:100%;clear: both;}

    #contact .info>.title { font-size: 3rem;}
    #contact .info>.describe {font-size: 1.2rem;line-height: 2rem;}
    #contact .info>.content .row p>strong { font-size: 1.8rem;}
    #contact .info>.content .row p>span { font-size: 1.3rem;}
    #contact .info>.content {padding-bottom:  0;}
}


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

    #contact .info>.title { font-size: 2.4rem;}
    /*#contact .info>.content .row{display: block; text-align: center; }*/
    #contact .info>.content .row i{font-size: 2.4rem; width: 60px; height: 60px; line-height: 60px; margin: 0 auto; }
    /*#contact .info>.content .row p{display: block; width: 100%; padding-left: 0; padding-top: 10px;}*/
    /*#contact .info>.content .row p>strong{font-size: 1.6rem;}*/

    #contact .feedback>.advantage>h3 {font-size: 1.8rem;}
    #contact .feedback>.advantage>.text { padding-top: 10px;}
    #contact .feedback{ padding: 30px;}
    #contact .feedback>.form .title{ font-size: 2rem; padding-bottom: 0;}


    #contact .feedback>.form .button>.submit { padding: 16px 10px; }




}