@charset "utf-8";
/*
理念：1. reset 的目的不是清除浏览器的默认样式，这仅是部分工作。清除和重置是紧密不可分的。
2. reset 的目的不是让默认样式在所有浏览器下一致，而是减少默认样式有可能带来的问题。
3. reset 期望提供一套普适通用的基础样式。但没有银弹，推荐根据具体需求，裁剪和修改后再使用。
 特色：1. 适应中文；2. 基于最新主流浏览器。
 维护：玉伯<lifesinger@gmail.com>, 正淳<ragecarrier@gmail.com>
*/

/** 清除内外边距 **/
body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, /* structural elements 结构元素 */
dl, dt, dd, ul, ol, li, /* list elements 列表元素 */
pre, /* text formatting elements 文本格式元素 */
form, fieldset, legend, button, input, textarea, /* form elements 表单元素 */
th, td /* table elements 表格元素 */ {
    margin: 0;
    padding: 0;
}

/** 设置默认字体 **/
body,
button, input, select, textarea /* for ie */ {
    font: 12px/1.5 tahoma, '微软雅黑','冬青黑体','华文黑体', arial, \5b8b\4f53, sans-serif;
    font-weight: 100;
}
h1, h2, h3, h4, h5, h6 { font-size: 100%; }
address, cite, dfn, em, var { font-style: normal; } /* 将斜体扶正 */
code, kbd, pre, samp { font-family:  courier new, courier, monospace; } /* 统一等宽字体 */
small { font-size: 12px; } /* 小于 12px 的中文很难阅读，让 small 正常化 */

/** 重置列表元素 **/
ul, ol { list-style: none; }

/** 重置文本格式元素 **/
a { text-decoration: none; color: inherit; }
a:hover { text-decoration: underline; }


/** 重置表单元素 **/
legend { color: #000; } /* for ie6 */
fieldset, img { border: 0; } /* img 搭车：让链接里的 img 无边框 */
button, input, select, textarea { font-size: 100%; } /* 使得表单元素在 ie 下能继承字体大小 */
/* 注：optgroup 无法扶正 */

/** 重置表格元素 **/
table { border-collapse: collapse; border-spacing: 0; }

/* 清除浮动 */
.ks-clear:after, .clear:after {
    content: '\20';
    display: block;
    height: 0;
    clear: both;
}
.ks-clear, .clear {
    *zoom: 1;
}
*,
*:after,
*:before{
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}
html,body{
    height: 100%;
    background-color: #f5f5f5;
    position: relative;
}
.header{
    position: absolute;
    top:0;
    width: 100%;
    background-color: #fff;
    height: 90px;
    -webkit-box-shadow: 0 2px 1px 1px RGBA(0,0,0,.1);
    -moz-box-shadow: 0 2px 1px 1px RGBA(0,0,0,.1);
    box-shadow: 0 2px 1px 1px RGBA(0,0,0,.1);
    z-index: 999;
}
.nav-wrap{
    margin: 0 auto;
    width: 1100px;
    line-height: 80px;
    padding-top: 10px;
}
.nav-item span{
    display: inline-block;
    width: 50%;

}
.content-wrap{
    position: relative;
    /*width: 1200px;*/
    width: 59%;
    height: 82%;
    padding-top: 6%;
    margin: 0 auto;
}
.logo{
    vertical-align: middle;
    width: 6%;
}
.top-nav{
    float: right;
}
.top-nav li{
    float: left;
    width: 210px;
    text-align: right;
    color: #959595;
    font-size: 16px;
    cursor: pointer;
}
.top-nav li.select{
    color: #000;
    font-size: 22px;
}
.top-nav .select:after{
    content: '';
    display: block;
    width:50%;
    height: 2px;
    margin-right: -25%;
    position: relative;
    top: -2px;
    left: 62.5%;
    background-color: #ec4669;
}
.scrollpage-wrap{
    padding-top:90px;
    height: 100%;
    border-radius: 10px;
    overflow-y: hidden;
}
.scrollpage{
    position: relative;
    margin: 0 auto 0;
    width: 100%;
    height: 100%;
    border-radius: 10px;
    /*box-shadow: 0 4px 5px 3px RGBA(150,150,150,.1);*/
    -webkit-box-shadow: 0 5px 10px rgba(0,0,0,0.1);
    -moz-box-shadow: 0 5px 10px rgba(0,0,0,0.1);
    box-shadow: 0 5px 10px rgba(0,0,0,0.1);
    /*padding: ;*/
    overflow: hidden;
    /*border:1px solid #fff;*/
}
.first .scrollpage{
    /*-webkit-box-shadow: none;*/
    /*-moz-box-shadow: none;*/
    /*box-shadow: none;*/
    -webkit-box-shadow: 0 4px 35px 3px RGBA(236,70,105,.2);
    -moz-box-shadow: 0 4px 35px 3px RGBA(236,70,105,.2);
    box-shadow: 0 4px 35px 3px RGBA(236,70,105,.2);
}
.produc-get.hide{
    margin-bottom: -100px;
    -webkit-transition: all .3s;
    -moz-transition: all .3s;
    -o-transition: all .3s;
    transition: all .3s;
}
.produc-get{
    position: fixed;
    width: 100%;
    bottom: 0;
    z-index: 998;
    text-align: center;
    color: #9c9c9c;
    line-height: 3em;
    padding-bottom: 5px;
}
.page-item{
    position: absolute;
    width: 100%;
    height: 100%;
    padding: 20px;
    /*margin: 8px;*/
    background-color: #fff;
    -webkit-box-shadow: 0 4px 5px 3px RGBA(20,20,20,.1);
    -moz-box-shadow: 0 4px 5px 3px RGBA(0,0,0,.1);
    box-shadow: 0 4px 5px 3px RGBA(150,150,150,.1);
    /*box-shadow: 0px 1px 10px rgba(0,0,0,0.5);*/
    -webkit-border-radius: 10px;
    border-radius: 10px;
}
/* 第一页 */
.banner-page{
    background-color: #ec4669;
    z-index: 4;
    border:1px solid #ec4669;
    -webkit-box-shadow: 0 4px 5px 3px RGBA(20,20,20,.1);
    -moz-box-shadow: 0 4px 5px 3px RGBA(0,0,0,.1);
    box-shadow: 0 4px 5px 3px RGBA(150,150,150,.1);
}
.banner-page img{
    width: 100%;
    height: 100%;
}
.code-wrap{
    position: absolute;
    width: 11.6667%;
    height: 24.458%;
    top: 45.762%;
    left:44.142%;
}
.code-area{
    border: 5px solid #ffd65a;
    position: relative;
}
.code-wrap .arrow{
    display: block;
    text-align: center;
}
.code-wrap .arrow img{
    width: 20%;
    height: auto;
}
.code-area .introduce{
    display: none;
    position: absolute;
    top:0;
    left:0;
    width: 100%;
    height: 100%;
    background-color: #0fad6c;
    background-color: RGBA(15,173,108,.6);
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    text-align: center;
    padding-top: 25%;
    cursor: pointer;
}
.code-area:hover .introduce{
    display: block;
}
.code-area img{
    vertical-align: bottom;
}
/* 第2页 */
.content-2{
    z-index: 3;
}
.feature-title{
    text-align: center;
    font-size: 30px;
    font-weight: 100;
    line-height: 1em;
    padding: 9.2% 0 8.2% 0;
}
.product-feature{
    text-align: center;
}
.feature-item{
    display: inline-block;
    margin-right: 90px;
    max-width: 100%;
}
.feature-item p{
    font-size: 14px;
}
.feature-item:last-child{
    margin-right: 0;
}
/* 第3页 */
.content-3{
    z-index: 2;
}
.content-3 .product-feature{
    margin-top: 60px;
}
.content-3 .feature-item{
    margin-right: 60px;
}
.content-3 .feature-item p{
    padding-top: 15px;
}
.content-3 .feature-item:last-child{
    margin-right: 0;
}
.content-3 .feature-title span{
    padding-top: 3%;
}
.content-3 .feature-title span{
    font-size: 18px;
    display: block;
    color: #b9b9b9;
    line-height: 1em;
}
.content-3 .feature-title span em{
    color: red;
}
.content-3 .product-feature{
    width: 67.4%;
    margin: 0 auto;
    font-size: 0;
}
.content-3 .product-feature ul{
    margin-right: -5%;
}
.content-3 .product-feature  .feature-item{
    display: inline-block;
    width: 20%;
    margin-right: 0;
    font-size: 14px;
    padding-right: 5%;
}
.content-3 .product-feature  .feature-item img{
    width: 100%;
}
/* 第4页 */
.content-4{
    z-index: 1;
    text-align: justify;
}
.content-4 .feature-item{
    width: 24%;
    text-align: center;
    margin-right: 0;
}
.content-4 .feature-item img{
    max-width: 100%;

}
.content-4 .feature-item p{
    font-size: 14px;
}
.content-4 .feature-item p span{
    display: block;
    color: red;
}
/* 第5页 */
.content-5{
    z-index: 1;
    text-align: justify;
}
.content-5 .feature-item{
    width: 24%;
    text-align: center;
    margin-right: 20px;
}
.content-5 .feature-item img{
    max-width: 100%;
    height: 219px;
    width: 180px;
}
.content-5 .feature-item p{
    margin-top:10px;
    font-size: 14px;
}
.content-5 .feature-item p span{
    display: block;
    color: red;
}
.point-wrap{
    position: absolute;
    z-index: 1000;
    right: -30px;
    top: 50%;
    width: 20px;
}
.point{
    margin-top: -50px;
    text-align: center;
}
.point .point-item{
    display: inline-block;
    width: 50%;
    height: 0;
    padding-top: 50%;
    background-color: #9c9c9c;
    margin-bottom: 10px;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
    -webkit-transition: all .2s;
    -moz-transition: all .2s;
    -ms-transition: all .2s;
    -o-transition: all .2s;
    transition: all .2s;
}
.point .point-item.now{
    position: relative;
    width: 100%;
    padding-top: 100%;
}
.point .point-item.now:after{
    content: '';
    display: block;
    position: absolute;
    left: 10%;
    top: 10%;
    width: 80%;
    height: 80%;
    border-radius: 50%;
    background-color: #f5f5f5;
}
.size-message{
    position: fixed;
    z-index: 999;
    width: 100%;
    left: 0;
    bottom: 0;
    margin-bottom: -160px;
    text-align: center;
    color: #727272;
    font-size: 18px;
    border-top: 1px solid #d2d2d2;
    line-height: 1em;
    padding-top: 15px;
    -webkit-transition: all 1s;
    -moz-transition: all 1s;
    -ms-transition: all 1s;
    -o-transition: all 1s;
    transition: all 1s;
    background-color: #f5f5f5;
}
.size-message p{
    margin-top:1.5%;
    margin-bottom: 1%;
}
.size-message p:last-child{
    margin-top: 0;
}
@media (max-width: 1440px) {
    .header{
        height: 70px;
    }
    .nav-wrap{
        line-height: 60px;
    }
    .logo{
        width: 5%;
    }
    .content-wrap{
        padding-top: 3%;
    }
}
#fp-nav ul li a span{
    background-color: #9c9c9c;
}
.bommess{
    -webkit-transform: translateY(-60px);
    -moz-transform: translateY(-60px);
    -ms-transform: translateY(-60px);
    -o-transform: translateY(-60px);
    transform: translateY(-50px);
    -webkit-transition: all 1s;
    -moz-transition: all 1s;
    -ms-transition: all 1s;
    -o-transition: all 1s;
    transition: all 1s;
}
.govicon a img {
    display: inline-block;
    width: 80px;
    height: auto;
}