@charset "utf-8";
/* CSS Document */
/*公共样式与首页样式*/
html{-webkit-text-size-adjust:none; /*解决chrome浏览器下字体不能小于12px*/}
a{outline:none; text-decoration:none !important;} 
html{zoom:1;}html *{outline:0;zoom:1;} html button::-moz-focus-inner{border-color:transparent!important;} 
body{overflow-x: hidden; font-size:12px;} body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td{margin:0;padding:0;} table{/*border-collapse:collapse;border-spacing:0;*/} fieldset,a img{border:0;} address,caption,cite,code,dfn,em,th,var{font-style:normal;font-weight:normal;} li{list-style:none;} caption,th{text-align:left;} h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal;} q:before,q:after{content:'';}
input[type="submit"], input[type="reset"], input[type="button"], button { -webkit-appearance: none; /*去掉苹果的默认UI来渲染按钮*/} em,i{ font-style:normal;}
*{box-sizing:border-box; -moz-box-sizing:border-box; -webkit-box-sizing: border-box;}

.clearfix:after {content:"."; display:block; height:0; clear:both; visibility:hidden; }.clearfix {display:block;}.clear{ clear:both;}/* 清除浮动*/
.colwrapper { overflow:hidden; zoom:1 /*for ie*/; margin:5px auto; }/* 高度自适应 */ 
.strong{ font-weight: bold;} .left{ float: left;} .right{ float: right;} .center{ margin:0 auto; text-align:center;}
.show{ display:block; visibility:visible;}.hide{ display: none; visibility:hidden;}
.block{ display:block;} .inline{ display:inline;}
.transparent{filter:alpha(opacity=50); -moz-opacity:0.5;/** Firefox 3.5即将原生支持opacity属性，所以本条属性只在Firefox3以下版本有效 ***/ -khtml-opacity: 0.5; opacity: 0.5; } .break{ word-wrap:break-word;overflow:hidden; /*word-break:break-all;*/}

.overflow{overflow: hidden}

.flex_{display: flex;}
/*两边的向两边靠*/
.flex_space-between{display: flex;justify-content:space-between;}
/*水平居中*/
.flex_justify-content{display: flex;justify-content:center;}
/*完美的平均分配*/
.flex_justify-content-around{display: flex;justify-content:space-around;}
/*垂直居中*/
.flex_align-items{display: flex;align-items:center;}
.flex_wrap{flex-wrap:wrap;}


A {
    TEXT-DECORATION: none;
}



BODY {
    margin: 0px;
    padding: 0;
    font-family: "微软雅黑";
    background: #ffffff;
    color: #222222;
    overflow-x: hidden;
}



html{
    width:100%;
}
p, h1, h2, h3, h4, h5, h6, ul, li, input, dl, dt, dd, header, article, iframe, footer, ol, div, img {
    margin: 0px;
    padding: 0px;
}

input {
    border: 0px;
}

img {
    border: 0px;
    vertical-align: middle;
    -webkit-transition: all 0.2s linear;
    -moz-transition: all 0.2s linear;
    -o-transition: all 0.2s linear;
    -ms-transition: all 0.2s linear;
    transition: all 0.2s linear;
    max-width: 100%;
    height: auto;
}

li {
    list-style: none;
}


b, label {
    font-weight: normal;
}

input, button, select, textarea {
    outline: none;
    font-family: "微软雅黑";
    font-size: 12px;
}

.left {
    float: left;
}

.right {
    float: right;
}

.clear {
    clear: both;
    margin: 0px;
    padding: 0px;
    height: 0px;
}


header{height: 100px;line-height: 100px;width: 100%;z-index: 10001;background: rgba(0,0,0,0.3);}
header.fixed{position: fixed;top:0;left: 0;}

.navlist li{float: left;text-align: center;margin-left:28px}
.navlist li a{display:block;font-size: 17px;color: #fff;position: relative;}

.btn_hover{position: relative;
  -moz-transition: all 0.2s;
  -o-transition: all 0.2s;
  -webkit-transition: all 0.2s;
  transition: all 0.2s;
  overflow: hidden;
}
.anim {
    -moz-transform: translateY(-50%) translateX(-50%);
    -ms-transform: translateY(-50%) translateX(-50%);
    -webkit-transform: translateY(-50%) translateX(-50%);
    transform: translateY(-50%) translateX(-50%);
    position: absolute;
    top: 50%;
    left: 50%;
    /* z-index: -1; */
}
.btn_hover:hover > .anim{
  -moz-animation: anim-out 1s;
  -webkit-animation: anim-out 1s;
  animation: anim-out 1s;
}
.btn_hover:hover > .anim:after{
  -moz-animation: anim-out-pseudo 1s;
  -webkit-animation: anim-out-pseudo 1s;
  animation: anim-out-pseudo 1s;
}
.anim:before {
  position: relative;
  content: '';
  display: block;
  margin-top: 100%;
}
.anim:after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  border-radius: 50%;
}


.btn-hover{overflow:hidden;position:relative;-webkit-transition:all 0.2s ease;-moz-transition:all 0.2s ease;transition:all 0.2s ease}
.btn-hover:after{-webkit-backface-visibility:hidden;-moz-backface-visibility:hidden;backface-visibility:hidden;content:"";position:absolute;left:50%;top:0;width:0;height:110%;background:#659ff5;-webkit-transform:translate(-50%,0);-moz-transform:translate(-50%,0);-ms-transform:translate(-50%,0);transform:translate(-50%,0);-webkit-transition:all 0.2s ease;-moz-transition:all 0.2s ease;transition:all 0.2s ease}
.btn-hover:hover:after{width:100%}
.btn-hover a{position:relative;z-index:2;}
.btn-hover:hover a{color: #fff}


.main{width: 1400px;max-width: 90%;margin:0 auto;}

body{min-width: 1400px}
.navlist li a:after{height:2px;background:#fff;position: absolute;bottom: 0;left: 0;width: 0;content: '';-webkit-transition:all .6s ease;-moz-transition:all .6s ease;transition:all .6s ease;display: block;}
.navlist li a:hover:after{width: 100%}

header .main{position: relative;}
header .navlist{margin-right:66px;}
.search-wrapper.active::before{display: none;}
.search{position: absolute;right: 0px;top:50%;transform: translateY(-50%);}
.search_span{color: #fff;font-size: 15px;height: 40px;line-height: 40px;position: absolute;right:-35px;top:0;display: block;}
.search-wrapper .input-holder {
    width: 45px;
    overflow: hidden;
    border-radius:6px;
    position: relative;
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}
.search-wrapper.active .input-holder {
    border-radius: 50px;
    width:175px;
    background:#017fcb;
    -webkit-transition: all .5s cubic-bezier(0.000, 0.105, 0.035, 1.570);
    -moz-transition: all .5s cubic-bezier(0.000, 0.105, 0.035, 1.570);
    transition: all .5s cubic-bezier(0.000, 0.105, 0.035, 1.570);
}

.search-wrapper .input-holder .search-input::-webkit-input-placeholder { color:#fff; }
.search-wrapper .input-holder .search-input::-moz-placeholder { color:#fff; } /* firefox 19+ */
.search-wrapper .input-holder .search-input:-ms-input-placeholder { color:#fff; } /* ie */
.search-wrapper .input-holder .search-input:-moz-placeholder { color:#fff; }

.search-wrapper .input-holder .search-input {
    width:100%;
   
    padding:0px 70px 0 20px;
    opacity: 0;
    position: absolute;
    top:0px;
    left:0px;
    background: transparent;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    border:none;
    outline:none;
    font-family:"Open Sans", Arial, Verdana;
    font-size: 16px;
    font-weight: 400;
    line-height: 20px;
    color:#fff;
    -webkit-transform: translate(0, 60px);
    -moz-transform: translate(0, 60px);
    transform: translate(0, 60px);
    -webkit-transition: all .3s cubic-bezier(0.000, 0.105, 0.035, 1.570);
    -moz-transition: all .3s cubic-bezier(0.000, 0.105, 0.035, 1.570);
    transition: all .3s cubic-bezier(0.000, 0.105, 0.035, 1.570);

    -webkit-transition-delay: 0.3s;
    -moz-transition-delay: 0.3s;
    transition-delay: 0.3s;
}
.search-wrapper.active .input-holder .search-input {
    opacity: 1;
    -webkit-transform: translate(0, 10px);
    -moz-transform: translate(0, 10px);
    transform: translate(0, 10px);
}

.search-wrapper .input-holder .search-icon {
    width:30px;
    height:40px;
    margin-right:10px;
    border:none;
    background:transparent;
    padding:0px;
    outline:none;
    position: relative;
    z-index: 2;
    float:right;
    cursor: pointer;
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}
.search-wrapper.active .input-holder .search-icon {
    width: 30px;
    height:40px;
    border-radius: 30px;
}
.search-wrapper .input-holder .search-icon span {
    width:15px;
    height:15px;
    display: inline-block;
    vertical-align: middle;
    position:relative;
    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    transform: rotate(-45deg);
    -webkit-transition: all .4s cubic-bezier(0.650, -0.600, 0.240, 1.650);
    -moz-transition: all .4s cubic-bezier(0.650, -0.600, 0.240, 1.650);
    transition: all .4s cubic-bezier(0.650, -0.600, 0.240, 1.650);

}
.search-wrapper.active .input-holder .search-icon span {
    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    transform: rotate(-45deg);
}
.search-wrapper .input-holder .search-icon span::before, .search-wrapper .input-holder .search-icon span::after {
    position: absolute;
    content:'';
}
.search-wrapper .input-holder .search-icon span::before {
    width: 2px;
    height: 6px;
    left: 10px;
    top: 16px;
    border-radius: 2px;
    background: #fff;
}
.search-wrapper .input-holder .search-icon span::after {
    width:15px;
    height:15px;
    left: 0px;
    top: -3px;
    border-radius:50%;
    border: 2px solid #fff;
}


.search-wrapper.active .input-holder .search-icon span::before{background:#fff;}
.search-wrapper.active .input-holder .search-icon span::after{
  border: 2px solid #fff;
}
.search-wrapper .close {
    position: absolute;
    opacity: 0;
    z-index: 1;
    top:3px;
    right:10px;
    width:25px;
    height:25px;
    cursor: pointer;
    -webkit-transform: rotate(-180deg);
    -moz-transform: rotate(-180deg);
    transform: rotate(-180deg);
    -webkit-transition: all .3s cubic-bezier(0.285, -0.450, 0.935, 0.110);
    -moz-transition: all .3s cubic-bezier(0.285, -0.450, 0.935, 0.110);
    transition: all .3s cubic-bezier(0.285, -0.450, 0.935, 0.110);
    -webkit-transition-delay: 0.2s;
    -moz-transition-delay: 0.2s;
    transition-delay: 0.2s;
}
.search-wrapper.active .close {
    opacity: 1;
    right:-30px;
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    transform: rotate(45deg);
    -webkit-transition: all .6s cubic-bezier(0.000, 0.105, 0.035, 1.570);
    -moz-transition: all .6s cubic-bezier(0.000, 0.105, 0.035, 1.570);
    transition: all .6s cubic-bezier(0.000, 0.105, 0.035, 1.570);
    -webkit-transition-delay: 0.5s;
    -moz-transition-delay: 0.5s;
    transition-delay: 0.5s;
}
.search-wrapper .close::before, .search-wrapper .close::after {
    position:absolute;
    content:'';
    background: #fff;
    border-radius: 2px;
}



.search-wrapper .close::before {width: 2px;height: 25px;left: 18px;top: 4px;}
.search-wrapper .close::after {width: 25px;height: 2px;left: 7px;top: 15px;}
.search-wrapper .result-container {width: 100%;position: absolute;top:80px;left:0px;text-align: center;font-family: "Open Sans", Arial, Verdana;font-size: 14px;display:none;color:#B7B7B7;}