@charset "utf-8";html{color:#000;background:#fff;overflow-y:scroll;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%}html *{outline:0;-webkit-text-size-adjust:none;-webkit-tap-highlight-color:rgba(0,0,0,0)}html,body{font-family:sans-serif}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,hr,button,article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{margin:0;padding:0}input,select,textarea{font-size:100%}table{border-collapse:collapse;border-spacing:0}fieldset,img{border:0}abbr,acronym{border:0;font-variant:normal}del{text-decoration:line-through}address,caption,cite,code,dfn,em,th,var{font-style:normal;font-weight:500}ol,ul{list-style:none}caption,th{text-align:left}h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:500}q:before,q:after{content:''}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sup{top:-.5em}sub{bottom:-.25em}a:hover{text-decoration:underline}ins,a{text-decoration:none}
.clearfix:after{
    content: "020"; 
    display: block; 
    height: 0; 
    clear: both; 
    visibility: hidden;  
}
  
.clearfix {
    zoom: 1; 
}
div.cover{
    position: absolute;
    left:0;
    top:0;
    width: 100%;
    height: 100%;
    background-color: #fff;
    z-index: 999999;
}
div.cover>img{
    position: absolute;
    left:0;
    top:0;
    bottom:0;
    right:0;
    width:180px;
    margin:auto;
}
.container{
    width: 1120px;
    margin:0 auto;
}
.head{
    height: 154px;
    margin-bottom:100px;
    line-height: 154px;
    z-index: 111111;
    background:transparent;
    background: -moz-linear-gradient(-180deg, rgba(0,0,0,.8) 0%, rgba(0,0,0,0) 100%);
    background: -webkit-linear-gradient(-180deg, rgba(0,0,0,.8) 0%, rgba(0,0,0,0) 100%);
    background: -o-linear-gradient(-180deg, rgba(0,0,0,.8) 0%, rgba(0,0,0,0) 100%);
    background: -ms-linear-gradient(-180deg, rgba(0,0,0,.8) 0%, rgba(0,0,0,0) 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,0,.8)), color-stop(100%,rgba(0,0,0,0)));
    background-image: linear-gradient(to bottom,rgba(0,0,0,.8),rgba(0,0,0,0));
   
}
div.head{
    top:-100px;
    left:0;
    width: 100%;
}
div.head.fixed{
    position: fixed;
    height: 80px;
    line-height: 80px;
    top:0;
    background-color:rgba(0,0,0,.5);
    transition: all .3s cubic-bezier(0.165, 0.84, 0.44, 1);
    -webkit-transition: all .3s cubic-bezier(0.165, 0.84, 0.44, 1);
    -ms-transition: all .3s cubic-bezier(0.165, 0.84, 0.44, 1);
    -o-transition: all .3s cubic-bezier(0.165, 0.84, 0.44, 1);
    -moz-transition: all .3s cubic-bezier(0.165, 0.84, 0.44, 1);
}

div.head div.logo{
    position: relative;
    height: 154px;
    float:left;
   
}
div.head.fixed div.logo{
    height: 80px;
    transition: all .3s cubic-bezier(0.165, 0.84, 0.44, 1);
    -webkit-transition: all .3s cubic-bezier(0.165, 0.84, 0.44, 1);
    -ms-transition: all .3s cubic-bezier(0.165, 0.84, 0.44, 1);
    -o-transition: all .3s cubic-bezier(0.165, 0.84, 0.44, 1);
    -moz-transition: all .3s cubic-bezier(0.165, 0.84, 0.44, 1);
}
div.head div.logo img{
    position: absolute;
    width:165px;
    top:0;
    bottom:0;
    margin:auto 0;
}
div.head ul.menu_list{
    float:right;
    padding-right: 34px;
}
div.head ul.menu_list>li{
    display: inline-block;
    width: 120px;
    text-align: center;
}
div.head ul.menu_list>li>a{
    font-size:18px;
    color:#fff;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
}
div.head ul.menu_list>li>a.active,
div.head ul.menu_list>li>a:hover,
div.head ul.menu_list>li>a:visited,
div.head ul.menu_list>li>a:active{
    font-weight: 900;
    text-decoration: none;
}
div.section_title{
    width: 479px;
    height: 54px;
    margin:0 auto 62px;
    text-align: center;
    line-height: 54px;
    background-image: url(../images/service_title_bg.png);
    background-size: 100% 100%;
    background-repeat: no-repeat;
    text-align: center;
    color:#fff;
    font-size: 20px;
    font-weight: bold;
}
.swiper-box{
    padding:0 70px 70px;
}
.swiper-box .swiper-container{
    height: 362px;
    background-image: url(../images/ability_swiper_bg.png);
    background-size: 100% 100%;
    background-repeat: no-repeat;
    text-align: center;
}
.swiper-box .swiper-container img{
    height:80px;
    margin:50px 0 30px;
}
section .swiper-button-next{
    background-image: url(../images/arrow_right.png);
}
section .swiper-button-prev{
    background-image: url(../images/arrow_left.png);
}

.footer{
    padding:40px 0;
    background:rgba(0,0,0,.5);
    text-align: left;
}
.footer div.copy{
    padding-top: 23px;
    float:left;
}
.footer div.qrcode{
    text-align: center;
    float: right;
}
.footer div.qrcode img{
    width: 60px;
    display: block;
}
.footer p{
    color:#fff;
    font-size: 14px;
}
div.cover>canvas{
    position: absolute;
    left:0;
    top:0;
    bottom:0;
    right:0;
    margin:auto;
}