.f_l{
    float: left;
}
.f_r{
    float: right;
}
a{
    text-decoration:none;
}
p{
    padding: 0;
    margin: 0;
}
ol,ul{
    list-style:none;
}
html,body{
    width:100%;
    height:100%;
    overflow:hidden;
}
.section-wrap{
    width:100%;
    height:100%;
    overflow:visible;
    transition:transform 1s cubic-bezier(0.86,0,0.03,1);
    -webkit-transition:-webkit-transform 1s cubic-bezier(0.86,0,0.03,1);}

.section-wrap .section{
    position:relative;
    width:100%;
    height:100%;
    background-position:center center;
    background-repeat:no-repeat;
}
.center-content{
    width: 750px;
    height:200px;
    position: relative;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
.logoshow,.productpic{
    width: 40%;
}
.logoshow img{
    margin-left: 20px;
}
/*logo动画开始*/
@-webkit-keyframes fadeInlogo{
    0% {
        opacity:0;
        left:-10%;
    }
    25% {
        opacity:0;
        left:-10%;
    }
    50% {
        opacity:1;
        left: 0%;
    }
    75% {
        opacity:1;
        left: 0%;
    }
}
.office-logo,.product-logo {
    position:absolute;
    -webkit-animation-name: fadeInlogo;
    -webkit-animation-timing-function: ease-in-out;
    -webkit-animation-duration: 3s;
    -webkit-animation-direction: alternate;
}
.textshow{
    width: 60%;
}
.textshow p{
    display: block;
    font-family: "黑体";
    font-size: 40px;
    text-align: right;
    color: #000000;
    margin-top: -4px;
}
.product-test{
    width: 60%;
    margin-top: 153px;
}
.product-test p{
    display: block;
    font-family: "黑体";
    font-size: 40px;
    text-align: center;
    color: #000000;
}
.threetxt{
    margin-right: 20px;
}
.twotxt{
    margin-right: 128px;
}
.onetxt{
    margin-right: 235px;
}
/*定义一个名字为righteaseinAnimate动画，实现从页面的右边淡入页面效果*/
@keyframes righteaseinAnimate{
    0%{ transform: translateX(300px); opacity: 0;}/*在0%时设置文字在想X轴300px位移处（右边），透明度为0，也就是看不见文字*/
    50%{ transform: translateX(150px); opacity: 0;} /*在50%时设置文字在想X轴150px位移处（右边），透明度为0，也就是看不见文字*/
    100%{ transform: translateX(0px); opacity: 1;} /*在100%时设置文字在想X轴0px位移处，也就是原始布局的位置，透明度为1，也就是文字可以看见了*/
}
@-webkit-keyframes righteaseinAnimate{
    0%{ -webkit-transform: translateX(300px); opacity: 0;}
    50%{ -webkit-transform: translateX(150px); opacity: 0;}
    100%{ -webkit-transform: translateX(0px); opacity: 1;}
}
@-o-keyframes righteaseinAnimate{
    0%{ -webkit-transform: translateX(300px); opacity: 0;}
    50%{ -webkit-transform: translateX(150px); opacity: 0;}
    100%{ -webkit-transform: translateX(0px); opacity: 1;}
}
@-ms-keyframes righteaseinAnimate{
    0%{ -webkit-transform: translateX(300px); opacity: 0;}
    50%{ -webkit-transform: translateX(150px); opacity: 0;}
    100%{ -webkit-transform: translateX(0px); opacity: 1;}
}
@-moz-keyframes righteaseinAnimate{
    0%{ -webkit-transform: translateX(300px); opacity: 0;}
    50%{ -webkit-transform: translateX(150px); opacity: 0;}
    100%{ -webkit-transform: translateX(0px); opacity: 1;}
}
.onetxt{
    animation: righteaseinAnimate 2s ease 1;    /*调用已定义好的动画righteaseinAnimate，全程运行时间2S，进入的速度曲线为ease，只播放一次*/
    -webkit-animation: righteaseinAnimate 2s ease 1;
    -moz-animation: righteaseinAnimate 2s ease 1;
    -ms-animation: righteaseinAnimate 2s ease 1;
    -o-animation: righteaseinAnimate 2s ease 1;
}
.twotxt{
    animation: righteaseinAnimate 2.5s ease 1;
    -webkit-animation: righteaseinAnimate 2.5s ease 1;
    -moz-animation: righteaseinAnimate 2.5s ease 1;
    -ms-animation: righteaseinAnimate 2.5s ease 1;
    -o-animation: righteaseinAnimate 2.5s ease 1;
}
.threetxt{
    animation: righteaseinAnimate 3s ease 1;
    -webkit-animation: righteaseinAnimate 3s ease 1;
    -moz-animation: righteaseinAnimate 3s ease 1;
    -ms-animation: righteaseinAnimate 3s ease 1;
    -o-animation: righteaseinAnimate 3s ease 1;
}
.onetxt,.twotxt,.threetxt{
    /*规定动画的最后状态为结束状态*/
    animation-fill-mode:forwards;
    -webkit-animation-fill-mode: forwards;
    -o-animation-fill-mode: forwards;
    -ms-animation-fill-mode: forwards;
    -moz-animation-fill-mode: forwards;
}
/*logo动画结束*/

.pagetwo-content{
    width: 1000px;
    height:420px;
    top: 45%;
    left: 50%;
    position: relative;
    transform: translate(-50%, -50%);
}
@keyframes righteaseinAnimate{
    0%{ transform: translateX(300px); opacity: 0;}/*在0%时设置文字在想X轴300px位移处（右边），透明度为0，也就是看不见文字*/
    50%{ transform: translateX(150px); opacity: 0;} /*在50%时设置文字在想X轴150px位移处（右边），透明度为0，也就是看不见文字*/
    100%{ transform: translateX(0px); opacity: 1;} /*在100%时设置文字在想X轴0px位移处，也就是原始布局的位置，透明度为1，也就是文字可以看见了*/
}
@-webkit-keyframes righteaseinAnimate{
    0%{ -webkit-transform: translateX(300px); opacity: 0;}
    50%{ -webkit-transform: translateX(150px); opacity: 0;}
    100%{ -webkit-transform: translateX(0px); opacity: 1;}
}
@-o-keyframes righteaseinAnimate{
    0%{ -webkit-transform: translateX(300px); opacity: 0;}
    50%{ -webkit-transform: translateX(150px); opacity: 0;}
    100%{ -webkit-transform: translateX(0px); opacity: 1;}
}
@-ms-keyframes righteaseinAnimate{
    0%{ -webkit-transform: translateX(300px); opacity: 0;}
    50%{ -webkit-transform: translateX(150px); opacity: 0;}
    100%{ -webkit-transform: translateX(0px); opacity: 1;}
}
@-moz-keyframes righteaseinAnimate{
    0%{ -webkit-transform: translateX(300px); opacity: 0;}
    50%{ -webkit-transform: translateX(150px); opacity: 0;}
    100%{ -webkit-transform: translateX(0px); opacity: 1;}
}
.product-txt-act{
    animation: righteaseinAnimate 2s ease 1;    /*调用已定义好的动画righteaseinAnimate，全程运行时间2S，进入的速度曲线为ease，只播放一次*/
    -webkit-animation: righteaseinAnimate 2s ease 1;
    -moz-animation: righteaseinAnimate 2s ease 1;
    -ms-animation: righteaseinAnimate 2s ease 1;
    -o-animation: righteaseinAnimate 2s ease 1;
}
/*第二屏动画结束*/
.pagethree-content{
    width: 100%;
    height: 100%;
    position: relative;
}
.halfbox{
    width: 50%;
    height: 50%;
    float: left;
}
.halfbox img{
    width: 100%;
    height: 100%;
}
.pgthree-txt{
    display: block;
    font-family: "黑体";
    font-size: 36px;
    text-align: center;
    color: #f96a45;
}
.rose-txt{
    width: 100%;
    height: 180px;
    margin-top: 120px;
}
.eat-txt{
    width: 100%;
    height: 130px;
    margin-top: 150px;
}

/*第三屏图片的出现动画开始*/
.pgthree-fadein {
    -webkit-animation: fadeInptree 5s ease 0s 1 both;
    -ms-animation: fadeInptree 5s ease 0s 1 both;
    -moz-animation: fadeInptree 5s ease 0s 1 both;
    -o-animation: fadeInptree 5s ease 0s 1 both;
    animation: fadeInptree 5s ease 0s 1 both;
}
@-webkit-keyframes fadeInptree{
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@keyframes fadeInptree{
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}
/*第三屏图片的出现动画结束*/

/*第三屏第一行文字动画开始*/
.toptxt{
    opacity: 0;      /*实先规定文字的状态是不显示的*/
    animation: fade-in 2s ease 1s 1;    /*调用名称为fade-in的动画，全程动画显示时间2S，进入方式为ease，延时2S进入，播放次数1次*/
    -webkit-animation: fade-in 2s ease 1s 1;
    -moz-animation: fade-in 2s ease 1s 1;
    -o-animation: fade-in 2s ease 1s 1;
    -ms-animation: fade-in 2s ease 1s 1;

    /*规定动画的最后状态为结束状态*/
    animation-fill-mode:forwards;
    -webkit-animation-fill-mode: forwards;
    -o-animation-fill-mode: forwards;
    -ms-animation-fill-mode: forwards;
    -moz-animation-fill-mode: forwards;
}
@keyframes fade-in{
    0%{ transform: translateY(-50px); opacity: 0;}/*在0%时设置文字在想X轴300px位移处（右边），透明度为0，也就是看不见文字*/ /*在50%时设置文字在想X轴150px位移处（右边），透明度为0，也就是看不见文字*/
    100%{ transform: translateY(0px); opacity: 1;} /*在100%时设置文字在想X轴0px位移处，也就是原始布局的位置，透明度为1，也就是文字可以看见了*/
}
@-webkit-keyframes fade-in{
    0%{ -webkit-transform: translateY(-50px); opacity: 0;}
    100%{ -webkit-transform: translateY(0px); opacity: 1;}
}
@-ms-keyframes fade-in{
    0%{ -webkit-transform: translateY(-50px); opacity: 0;}
    100%{ -webkit-transform: translateY(0px); opacity: 1;}
}
@-o-keyframes fade-in{
    0%{ -webkit-transform: translateY(-50px); opacity: 0;}
    100%{ -webkit-transform: translateY(0px); opacity: 1;}
}
@-moz-keyframes fade-in{
    0%{ -webkit-transform: translateY(-50px); opacity: 0;}
    100%{ -webkit-transform: translateY(0px); opacity: 1;}
}
/*第三屏第一行文字动画结束*/

/*第三屏第二行带边框文字动画开始*/
.boxtxt{
    width: 220px;
    height: 46px;
    font-size: 30px;
    border: 1px solid  #f96a45;
    margin: 10px auto;
    line-height: 46px;
}
.boxtxt{
    opacity: 0;      /*实先规定文字的状态是不显示的*/
    animation: boxtxt-in 2s ease 2s 1;    /*调用名称为fade-in的动画，全程动画显示时间2S，进入方式为ease，延时2S进入，播放次数1次*/
    -webkit-animation: fade-in 2s ease 2s 1;
    -moz-animation: fade-in 2s ease 2s 1;
    -o-animation: fade-in 2s ease 2s 1;
    -ms-animation: fade-in 2s ease 2s 1;

    /*规定动画的最后状态为结束状态*/
    animation-fill-mode:forwards;
    -webkit-animation-fill-mode: forwards;
    -o-animation-fill-mode: forwards;
    -ms-animation-fill-mode: forwards;
    -moz-animation-fill-mode: forwards;
}
@keyframes boxtxt-in{
    0%{ opacity: 0;}/*在0%时透明度为0*/
    100%{ opacity: 1;} /*在100%时设置文字透明度为1*/
}
@-webkit-keyframes boxtxt-in {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}
@-ms-keyframes boxtxt-in {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}
@-o-keyframes boxtxt-in {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}
@-moz-keyframes boxtxt-in {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}
/*第三屏第二行带边框文字动画结束*/

/*右边按钮*/
#fp-nav {
    position: fixed;
    right: 2%;
    top: 45%;
    opacity: 1;
}
#fp-nav ul li{
    display: block;
    width: 10px;
    height: 10px;
    margin: 15px;
    position:relative;
    cursor: pointer;
    text-decoration: none;
}
#fp-nav ul li a span{
    width: 10px;
    height: 10px;
    background: #85939b;;
    border-radius: 50%;
    position: absolute;
}
#fp-nav ul li a span.span_active{
    background-color: #438c35;
}

/*下拉箭头动画*/
.arrow {
    opacity: 1;
    animation: arrow 2s cubic-bezier(0.5, 0, 0.1, 1) infinite;
    -webkit-animation: arrow 2s cubic-bezier(0.5, 0, 0.1, 1) infinite;
    position: absolute;
    bottom: 20px;
    left: 50%;
    cursor: pointer;
    overflow: hidden;
    text-align: center;
}
.arrow:hover{ /*规定动画正在运行还是暂停*/
    animation-play-state:paused;
    -webkit-animation-play-state:paused;
}
@-moz-keyframes arrow{
    0%, 20%, 50%, 80%, 100% {
        -moz-transform: translateY(0);
        transform: translateY(0);
    }
    40% {
        -moz-transform: translateY(-30px);
        transform: translateY(-30px);
    }
    60% {
        -moz-transform: translateY(-15px);
        transform: translateY(-15px);
    }
}
@-webkit-keyframes arrow{
    0%, 20%, 50%, 80%, 100% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
    }
    40% {
        -webkit-transform: translateY(-30px);
        transform: translateY(-30px);
    }
    60% {
        -webkit-transform: translateY(-15px);
        transform: translateY(-15px);
    }
}
@keyframes arrow {
    0%, 20%, 50%, 80%, 100% {
        -moz-transform: translateY(0);
        -ms-transform: translateY(0);
        -webkit-transform: translateY(0);
        transform: translateY(0);
    }
    40% {
        -moz-transform: translateY(-30px);
        -ms-transform: translateY(-30px);
        -webkit-transform: translateY(-30px);
        transform: translateY(-30px);
    }
    60% {
        -moz-transform: translateY(-15px);
        -ms-transform: translateY(-15px);
        -webkit-transform: translateY(-15px);
        transform: translateY(-15px);
    }
}
/*下拉箭头动画结束*/