html{
    font-size:100px;
    position: relative;
    width: 100%;
    height: 100%;
    max-width: 414px;
    max-height: 736px;
}
* {
    -webkit-tap-highlight-color: transparent
}
*,:after,:before {
    box-sizing: border-box
}
body {
    font-family: Helvetica Neue,Helvetica,PingFang SC,Hiragino Sans GB,Microsoft YaHei,\\5FAE\8F6F\96C5\9ED1,Arial,sans-serif;
    font-size: 12px;
    line-height: 1.5;
    color: #495060;
    background-color: #fff;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale
}
article,aside,blockquote,body,button,dd,details,div,dl,dt,fieldset,figcaption,figure,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,hr,input,legend,li,menu,nav,ol,p,section,td,textarea,th,ul {
    margin: 0;
    padding: 0
}
button,input,select,textarea {
    font-family: inherit;
    font-size: inherit;
    line-height: inherit
}
ol,ul {
    list-style: none
}
input::-ms-clear,input::-ms-reveal {
    display: none
}
a{
    background: 0 0;
    text-decoration: none;
    outline: 0;
    cursor: pointer;
    transition: color .2s ease
}
a:hover {}
a:active {}
a:active,a:hover {
    outline: 0;
    text-decoration: none
}
a[disabled] {
    color: #ccc;
    cursor: not-allowed;
    pointer-events: none
}
#maskBlock{
    position: fixed;
    top:0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 9999;
    background-color: rgba(0, 0, 0, .6);
}
#maskBlock .codebg{
    position: absolute;
    top: 50%;
    left: 50%;
    margin-left: -1.335rem;
    margin-top: -1.89rem;
    width: 2.67rem;
    height: 3.78rem;
    background:url(../images/code_bg.png) no-repeat center;
    background-size: 100% auto;
}
#maskBlock img{
    position: absolute;
    top:.3rem;
    left: 15%;
    display: block;
    width: 70%;
}
#maskBlock a{
    position: absolute;
    bottom: .3rem;
    width: 100%;
    color:#333;
    text-align: center;
}
#maskBlock a span{
    display: inline-block;
    vertical-align: middle;
    text-decoration: underline;
    font-size: .14rem;
}
#maskBlock .icon-msg{
    display: inline-block;
    vertical-align: middle;
    margin-right: .1rem;
    width: .32rem;
    height: .32rem;
    background: url(../images/contact.png) no-repeat;
    background-size: 100%;
}
#maskBlock #close{
    position: absolute;
    bottom: -.4rem;
    left:50%;
    margin-left: -.14rem;
    width: .28rem;
    height: .28rem;
    background:url(../images/icon_close.png) no-repeat;
    background-size: 100%;
}
#load_page{
    display: none;
    position: absolute;
    top:0;
    left:0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background-color: #fff;
    z-index: 999;
}
#load_page img{
    position: absolute;
}
#load_page .pic1{
    top:25%;
    left:50%;
    margin-left: -.57rem;
    width: 1.15rem;
    height: 1.15rem;
    animation:1s round infinite;
    -webkit-animation: 1s round infinite;
}
#load_page .pic2{
    top: 25%;
    left: 50%;
    margin-left: -.57rem;
    width: 1.15rem;
    height: 1.15rem;
    animation:1s round1 infinite;
    -webkit-animation: 1s round1 infinite;
}
@keyframes round{
    0%{
        transform: rotate(0deg);
    }
    100%{
        transform: rotate(360deg);
    }
}
@keyframes round1{
    0%{
        transform: rotate(360deg);

    }
    100%{
        transform: rotate(0deg);
    }
}
#load_page .percent{
    position: absolute;
    top:50%;
    left: 0;
    width: 100%;
    font-size: .16rem;
    text-align: center;
}
#load_page .percent span{
    font-weight: bold;
}
#pages{
    position: absolute;
    top:0;
    left:0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    z-index: 1;
}
#pages .page{
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    transition: all 1s;
    -moz-transition: all 1s;  /* Firefox 4 */
    -webkit-transition: all 1s;   /* Safari 和 Chrome */
    -o-transition: all 1s;
}
#pages .page em{
    font-style: normal;
    position: absolute;
    width: 90%;
    left:5%;
    bottom:.15rem;
    text-align: right;
    z-index: 1;
}
.page_inner{
    position: relative;
    height: 100%;
    overflow: hidden;
    z-index: 2;
}
.page_inner img{
    display: block;
    border:0;
    width: 100%;
}
.big .page_inner img{
    width: 100%;
}
.small .page_inner img{
    margin: 0 auto;
    height: 100%;
}
#pages .page_1 em,#pages .page_8 em{
    text-align: left;
}
.arrow{
    position: absolute;
    bottom: .2rem;
    left: 50%;
    margin-left: -.25rem;
    width: .5rem;
    height: .3rem;
    background: url(../images/arrow_down.png) no-repeat;
    background-size: 100% 100%;
    z-index: 3;
    animation:.6s updown infinite alternate;
    -webkit-animation: .6s updown infinite alternate;
}
.logo{
    display: block;
    z-index: 99;
    position: absolute;
    bottom: .3rem;
    right:.2rem;
    width: .7rem;
    height: .7rem;
    background: url(../images/logo_2.png) no-repeat;
    background-size: 100% 100%;
}
@keyframes updown{
    0%{
        transform: translateY(0);
        -webkit-transform: translateY(0);
    }
    100%{
        transform: translateY(.1rem);
        -webkit-transform: translateY(.1rem);
    }
}
.bg_2_1,.bg_2_2,.bg_2_3,.bg_2_4,.bg_2_5,.bg_2_6,.bg_2_7,.bg_2_8,.bg_2_9,.bg_2_10,.bg_2_11,.bg_2_12,.bg_2_13{
    position: absolute;
    top:0;
    left: 0;
    z-index: 1;
    width: 100%;
    height: 100%;
}
.bg_2_1{
    background: url(../images/bg5.jpg) no-repeat;
    background-size: 100% 100%;
}
.bg_2_2,.bg_2_3,.bg_2_5{
    background: url(../images/bg6.jpg) no-repeat;
    background-size: 100% 100%;
}
.bg_2_4,.bg_2_9,.bg_2_10,.bg_2_12,.bg_2_13{
    background: url(../images/bg7.jpg) no-repeat;
    background-size: 100% 100%;
}
.bg_2_7{
    background: url(../images/bg8.jpg) no-repeat;
    background-size: 100% 100%;
}
.bg_2_8{
    background: url(../images/bg9.jpg) no-repeat;
    background-size: 100% 100%;
}
.bg_2_11{
    background: url(../images/bg10.jpg) no-repeat;
    background-size: 100% 100%;
}

#pages .cur{
    display: block;
    z-index: 3;
}
#pages .prev{
    display: block;
    z-index: 2;
    transform: translateY(-100%);
    -webkit-transform: translateY(-100%);
}
#pages .next{
    display: block;
    z-index: 1;
    transform: translateY(100%);
    -webkit-transform: translateY(100%);
}

/* 页面元素飞入动画 */
.ant>*{
    animation-play-state: paused;
    -webkit-animation-play-state:paused;
}
.cur .ant>*{
    animation-duration: 1s;
    animation-fill-mode: both;
    animation-play-state:running;
    -webkit-animation-play-state:running;
    animation-delay: .1s;
}
.rotateInUpLeft {
    animation-name: rotateInUpLeft;
}
.bounceInRight {
    animation-name: bounceInRight
}
.flipInY {
    -webkit-backface-visibility: visible!important;
    backface-visibility: visible!important;
    animation-name: flipInY
}
.zoomIn {
    animation-name: zoomIn
}

/* 动画：弹跳 */
@keyframes rotateInUpLeft
{
    0% {
        transform-origin: left bottom;
        transform: rotate(45deg);
        opacity: 0
    }

    to {
        transform-origin: left bottom;
        transform: none;
        opacity: 1
    }
}
@-webkit-keyframes rotateInUpLeft /* Safari 和 Chrome */
{
    0% {
        transform-origin: left bottom;
        transform: rotate(45deg);
        opacity: 0
    }

    to {
        transform-origin: left bottom;
        transform: none;
        opacity: 1
    }
}
/* 动画：右侧缓冲飞入 */
@keyframes bounceInRight
{
    0%,60%,75%,90%,to {
        animation-timing-function: cubic-bezier(.215,.61,.355,1)
    }

    0% {
        opacity: 0;
        transform: translate3d(3000px,0,0)
    }

    60% {
        opacity: 1;
        transform: translate3d(-25px,0,0)
    }

    75% {
        transform: translate3d(10px,0,0)
    }

    90% {
        transform: translate3d(-5px,0,0)
    }

    to {
        transform: none
    }
}
@-webkit-keyframes bounceInRight /* Safari 和 Chrome */
{
    0%,60%,75%,90%,to {
        animation-timing-function: cubic-bezier(.215,.61,.355,1)
    }

    0% {
        opacity: 0;
        transform: translate3d(3000px,0,0)
    }

    60% {
        opacity: 1;
        transform: translate3d(-25px,0,0)
    }

    75% {
        transform: translate3d(10px,0,0)
    }

    90% {
        transform: translate3d(-5px,0,0)
    }

    to {
        transform: none
    }
}
/* 动画：3d立体旋转 */
@keyframes flipInY
{
    0% {
        transform: perspective(400px) rotateY(90deg);
        animation-timing-function: ease-in;
        opacity: 0
    }

    40% {
        transform: perspective(400px) rotateY(-20deg);
        animation-timing-function: ease-in
    }

    60% {
        transform: perspective(400px) rotateY(10deg);
        opacity: 1
    }

    80% {
        transform: perspective(400px) rotateY(-5deg)
    }

    to {
        transform: perspective(400px)
    }
}
@-webkit-keyframes flipInY /* Safari 和 Chrome */
{
    0% {
        transform: perspective(400px) rotateY(90deg);
        animation-timing-function: ease-in;
        opacity: 0
    }

    40% {
        transform: perspective(400px) rotateY(-20deg);
        animation-timing-function: ease-in
    }

    60% {
        transform: perspective(400px) rotateY(10deg);
        opacity: 1
    }

    80% {
        transform: perspective(400px) rotateY(-5deg)
    }

    to {
        transform: perspective(400px)
    }
}
/* 动画：由小到大飞入 */
@keyframes zoomIn
{
    0% {
        opacity: 0;
        transform: scale3d(.3,.3,.3)
    }

    50% {
        opacity: 1
    }
}
@-webkit-keyframes zoomIn /* Safari 和 Chrome */
{
    0% {
        opacity: 0;
        transform: scale3d(.3,.3,.3)
    }

    50% {
        opacity: 1
    }
}

/* 功能 */
#swiper{
    margin: 0 0 0 .35rem;
    overflow: hidden;
}
#swiper ol{
    width: 10.75rem;
    overflow: hidden;
}
#swiper li{
    float: left;
    width: 2.15rem;
    text-align: center;
}
#swiper img{
    display: block;
    width: 2rem;
    margin-bottom: .05rem;
}
#swiper p{
    padding: 0 .15rem 0 0;
    font-size: .11rem;
    line-height: .16rem;
    text-align: justify;
}

/* 页面内容样式 */
/* 颜色-边框 */
.page_inner dd{
    border-color:#ce2820;
}
.page_5 .page_inner:before,.page_6 .page_inner:before,.page_7 .page_inner:before{
    border-color: #9a7e58;
}
.page_5 .page_inner dl:after,.page_6 .page_inner dl:after,.page_7 .page_inner dl:after{
    border-color: rgba(121, 62, 49, 0.5);
}
.page_inner .title:before{
  border-color: #8c5140;
}
.page_inner .title,.page_inner .subtitle,.page_5 dt,.page_6 dt,.page_6 dt{
    color:#8c5140;
}
.page_inner .tag,.page_5 .page_inner dl:before,.page_6 .page_inner dl:before,.page_7 .page_inner dl:before{
    background-color:#793e31 ;
}
/* 排版 */
.page_inner{
    color:#484747;
    font-size: .14rem;
    line-height: .26rem;
}
.page_inner p small{
    font-size: .1rem;
}
.page_inner p{
    padding-left: .35rem;
    padding-right: .19rem;
}
.center{
    text-align: center;
}
.page_inner .b{
    font-size: .15rem;
    font-weight: bold;
}
.page_inner .mt10{
    margin-top: .1rem;
}
.page_inner .mt20{
    margin-top: .2rem;
}
.page_inner .mt30{
    margin-top: .3rem;
}
.page_inner .mt40{
    margin-top: .4rem;
}
.page_inner .tag{
    color:#fff;
}
.page_inner dt{
    padding-left: .35rem;
    height: .5rem;
    line-height: .5rem;
    font-size: .2rem;
}
.page_inner dd{
    border-left-width: .04rem;
    border-left-style: solid;
    margin-left: .14rem;
    padding-left: .2rem;
    font-size: .16rem;
    padding-bottom: .13rem;
}
.page_inner dd:last-child{
    padding-bottom: 0;
}
.page_inner dl.timeling{
    position: relative;
}
.page_inner dl.timeling:before{
    content: '';
    display: block;
    position: absolute;
    top:.15rem;
    left:.08rem;
    width: .2rem;
    height: .2rem;
    border-radius: 100%;
}
.page_inner dl.timeling:after{
    content: '';
    display: block;
    position: absolute;
    top:.1rem;
    left:.025rem;
    width: .3rem;
    height: .3rem;
    border-radius: 100%;
    border-width: .01rem;
    border-style: solid;
}
.page_inner .timeling dd{
    border:0;
    padding-left: .25rem;
    padding-right: .19rem;
    font-size: .14rem;
}
.page_inner .title_box{
    padding-top: .4rem;
    text-align: center;
}
.page_inner .title{
    position: relative;
    display: inline-block;
    padding: 0 .4rem;
    line-height: .3rem;  
    font-size: .2rem;
}
.page_inner .title:before{
    content: '';
    position: absolute;
    top: 50%;
    left:0;
    width: 100%;
    height: 0;
    border-bottom-width: .02rem;
    border-bottom-style: solid;
    z-index: 1;
}
.page_inner .title span{
    position: relative;
    z-index: 2;
    display: inline-block;
    padding: 0 .1rem;
    font-weight: bold;
    background-color: #fff;
}
.page_inner .subtitle{
    font-size: .15rem;
}
.page_inner .tag{
    display: inline-block;
    margin-left: .14rem;
    padding: 0 .12rem 0 .2rem;
    border-radius: 0 .06rem .2rem 0;
    font-size: .15rem;
}
.page_inner .box p{
    padding: 0;
}

/* 针对单独页面的样式 */
.page_3 p,.page_4 p{
    text-align: center;
    padding: 0;
}
.page_5 .page_inner:before,.page_6 .page_inner:before,.page_7 .page_inner:before{
    content: '';
    position: absolute;
    left:.18rem;
    width: 0;
    border-right-width: .02rem;
    border-right-style: dashed;
    z-index: -1;
}
.page_5 .page_inner:before{
    top:2.3rem;
    height: 4.37rem;
}
.page_6 .page_inner:before{
    top:.38rem;
    height: 6.42rem;
}
.page_7 .page_inner:before{
    top:0.76rem;
    height: 3.15rem;
}
.page_6 .timeling:first-child dd{
    margin-left: 0;
    padding: .5rem .25rem 0 1.77rem;
    width: 3.75rem;
    height: 2.51rem;
    background: url(../images/pg6_img_1.png) no-repeat center;
    background-size: 100%;
}
.page_6 .timeling:last-child dd{
    margin-left: 0;
    padding: 0 .25rem 0 .34rem;
    width: 3.75rem;
    height: 1.78rem;
    background: url(../images/pg6_img_2.png) no-repeat center;
    background-size: 100%;
}
.page_7 .page_inner{
    padding-top: 1.23rem;
}
.page_8 .page_inner,.page_9 .page_inner,.page_12 .page_inner,.page_13 .page_inner{
    padding-top: .5rem;
}
.page_10 .page_inner{
    padding-top: .4rem;
}
.page_12 .subtitle{
    text-align: center;
    font-size: .16rem;
    margin-bottom: .1rem;
}
.page_12 .box{
    width: 3.75rem;
    height: 2.65rem;
    margin-top: .3rem;
    padding: .2rem .7rem .22rem .75rem;
    background: url(../images/pg12_img_1.png) no-repeat;
    background-size: 100%;
    text-align: center;
}
.page_12 .box p:nth-child(even){
    margin-bottom: .1rem;
}