/* 通用 */
*{margin: 0;padding: 0;}
body{position: relative;}
a{text-decoration:none;outline: none;}
a:hover{text-decoration:none;-webkit-transition: background-color .2s ease;-moz-transition: background-color .2s ease;-ms-transition: background-color .2s ease;-o-transition: background-color .2s ease;transition: background-color .2s ease; }
a,a:hover,a:active,a:visited,a:link,a:focus{-webkit-tap-highlight-color:transparent;}
img{display: block;}
li{list-style: none;}
/* 清除默认表单样式 */
input{box-shadow:none;outline: none;resize: none;border: none;-webkit-appearance: none;-webkit-tap-highlight-color:rgba(0,0,0,0);background: transparent;}
select{border: none;appearance:none;-moz-appearance:none;-webkit-appearance: none;outline: none;background: transparent;}
select::-ms-expand { display: none; }
textarea{border: none;appearance:none;-moz-appearance:none;-webkit-appearance: none;outline: none;background: transparent;}
/* placeholder */
input::-webkit-input-placeholder { 
    /* WebKit browsers */ 
    color: #999; 
} 
input:-moz-placeholder { 
    /* Mozilla Firefox 4 to 18 */ 
    color: #999; 
} 
input::-moz-placeholder { 
    /* Mozilla Firefox 19+ */ 
    color: #999; 
} 
input:-ms-input-placeholder { 
    /* Internet Explorer 10+ */ 
    color: #999; 
}

.container{height: 100vh;overflow: hidden;}
.off .search{height: 94.04%;transition: all .5s;}
.off .search-tip{margin: 80px auto;}
.search{height: 46.57%;background: url(../image/search_bg.jpg) center/cover no-repeat;}
.search-content{position: relative;top: 50%;transform: translateY(-50%);}
.search-title{color: #fff;font-size: 50px;line-height: 1em;text-align: center;}
.search-tip{width: 80%;margin: 40px auto;color: #fff;font-size: 18px;text-align: center;}
.search-content form{display: flex;justify-content: center;align-items: center;}
.search-content .icon{display: flex;align-items: center;width: 72px;height: 70px;border-radius: 70px 0 0 70px;background: #fff;}
.search-content .inputbox{position: relative;}
.search-content input{display: block;width: 646px;height: 70px;padding-left: 72px;box-sizing: border-box;border-radius: 70px 0 0 70px;color: #999;font-size: 18px;background: #fff;}
.search-content .inputbox img{position: absolute;left: 30px;;top: 50%;transform: translateY(-50%);display: block;}
.search-content button{display: block;width: 140px;height: 70px;border-radius: 0 70px 70px 0;border: none;outline: none;color: #fff;font-size: 24px;background: #f7505d;cursor: pointer;}
.search-content button span{display: inline-block;width: 2px;}

.off .contact{display: none;}
.contact{height: 47.47%;}
.contact-main{position: relative;top: 50%;transform: translateY(-50%);}
.contact-name{margin-bottom: 66px;}
.contact-name img{display: block;margin: 0 auto;margin-bottom: 18px;}
.contact-name p{color: #333;font-size: 28px;line-height: 1em;text-align: center;}
.contact-info{margin: 0 auto;}
.contact-info ul{display: flex;justify-content: center;align-items: center;}
.contact-info li a{display: block;width: 341px;}
.contact-icon{display: flex;justify-content: center;align-items: center;;width: 105px;height: 105px;border-radius: 50%;margin: 0 auto;background: #86a9e7;}
.contact-text{margin-top: 18px;}
.contact-text p{color: #777;font-size: 17px;line-height: 1em;text-align: center;transition: all .5s;}
.contact-text p.num{line-height: .8em;word-wrap: break-word;word-break: break-all;min-height: 13px;}
.contact-info li:hover .contact-text p.num{color: #86a9e7;}
.contact-text span{display: block;width: 15px;height: 1px;margin: 14px auto;background: #dcdcdc;}

.footer{height: 5.96%;background: #f5f5f5;}
.footer-main{position: relative;top: 50%;transform: translateY(-50%);display: flex;justify-content: space-between;align-items: center;padding:0 13.545%;margin: 0 auto;background: #f5f5f5;}
.footer-main p,.footer-main a{display: block;color: #999;font-size: 16px;line-height: 1em;transition: all .5s;}
.record{display: flex;align-items: center;}
.record a:first-child{margin-right: 11px;}
.record a:hover{color: #86a9e7;}

/* media css */
@media screen and (max-width:1280px) {
    .contact-info li a{width: 270px;}
    .footer-main{padding:0 2.5%;}
}
@media screen and (max-width:940px) {
    .search-tip{font-size: 14px;}
    .search-content input{width: 450px;}
    .contact-info li a{width: 200px;}
    .footer-main p, .footer-main a{font-size: 14px;}
}
@media screen and (max-width:768px){
    .search-title{font-size: 40px;}
    .off .search-tip{margin: 50px auto;}
    .search-content input{width: 350px;height: 50px;}
    .search-content button{width: 90px;height: 50px;font-size: 20px;}
    .footer-main{flex-flow: column;justify-content: center;}
    .footer-main p,.footer-main a{line-height: 1.2em;}
}
@media screen and (max-width:600px){
    .contact-name{margin-bottom: 30px;}
    .contact-info{padding-left: 18%;}
    .contact-info ul{flex-flow: column;}
    .contact-info li{width: 100%;margin-bottom: 30px;}
    .contact-info li a{display: flex;align-items: center;width: 100%;}
    .contact-icon{width: 80px;height: 80px;margin: 0;}
    .contact-text{width: calc(100% - 110px);;margin-top: 0;margin-left: 30px;}
    .contact-text p{text-align: left;}
    .contact-text p.num{line-height: 1.2em;}
    .contact-text span{margin: 14px 0;}
}
@media screen and (max-width:500px){
    .off .search{height: calc(100vh - 78px) !important;}
    .footer{height: auto;padding: 15px 0;}
    .footer-main{top: auto;transform: none;}
    .search-title{font-size: 26px;}
    .search-content input{width: 220px;height: 40px;;padding-left: 40px;font-size: 14px;}
    .search-content .inputbox img{left: 14px;width: 18px;}
    .search-content button{width: 60px;height: 40px;;font-size: 14px;}
    .contact-name{display: flex;justify-content: center;align-items: center;margin-bottom: 20px;}
    .contact-name img{margin: 0;height: 30px;}
    .contact-name p{margin-left: 10px;;font-size: 20px;}
    .contact-info li{margin-bottom: 15px;}
    .contact-icon{width: 50px;height: 50px;}
    .contact-icon img{height: 20px;}
    .contact-text{width: calc(100% - 90px);}
    .contact-text p{font-size: 14px;}
    .contact-text span{margin: 5px 0;}
    .footer-main p, .footer-main a{text-align: center;}
    .record{flex-flow: column;justify-content: center;}
}
@media screen and (max-height:600px){
    .contact-info li{margin-bottom: 5px;}
    .contact-icon{width: 40px;height: 40px;}
}
@media screen and (max-width:352px){
    .footer{height: auto;}
    .off .search{height: calc(100vh - 94px) !important;}

}