/*  css animation  */

.trans {



    -webkit-transition: all .5s ease;

    -moz-transition: all .5s ease;

    -o-transition: all .5s ease;

    -ms-transition: all .5s ease;

    transition: all .5s ease;

}



/* page animation  */



.ani-view {

    -webkit-animation-duration: 1s;

    -moz-animation-duration: 1s;

    -o-animation-duration: 1s;

    animation-duration: 1s;

    -webkit-animation-fill-mode: forwards;

    -moz-animation-fill-mode: forwards;

    -o-animation-fill-mode: forwards;

    animation-fill-mode: forwards;

}



@-webkit-keyframes fadeInDown {

    0% {

        opacity: 0;

        -webkit-transform: translateY(20px)
    }

    100% {

        opacity: 1;

        -webkit-transform: translateY(0)
    }

}

@-moz-keyframes fadeInDown {

    0% {

        opacity: 0;

        -moz-transform: translateY(20px)
    }

    100% {

        opacity: 1;

        -moz-transform: translateY(0)
    }

}

@-o-keyframes fadeInDown {

    0% {

        opacity: 0;

        -o-transform: translateY(20px)
    }

    100% {

        opacity: 1;

        -o-transform: translateY(0)
    }

}

@keyframes fadeInDown {

    0% {

        opacity: 0;

        transform: translateY(20px)
    }
    100% {
        opacity: 1;
        transform: translateY(0)
    }
}
.ani-view.fade-in-down {
    opacity: 0;
    opacity: 1\0/IE9;
    -webkit-transform: translateY(20px);
    -moz-transform: translateY(20px);
    -o-transform: translateY(20px);
    transform: translateY(20px);
    -ms-transform: translateY(0)\0/IE9;
}
.ani-view.fadeInDown {
    -webkit-animation-name: fadeInDown;
    -moz-animation-name: fadeInDown;
    -o-animation-name: fadeInDown;
    animation-name: fadeInDown;
}
@-webkit-keyframes fadeInLeft {
    0% {
        opacity: 0;
        -webkit-transform: translateX(-100px)
    }
    100% {
        opacity: 1;
        -webkit-transform: translateX(0)
    }
}

@-moz-keyframes fadeInLeft {
    0% {
        opacity: 0;
        -moz-transform: translateX(-100px)
    }
    100% {
        opacity: 1;
        -moz-transform: translateX(0)
    }
}
@-o-keyframes fadeInLeft {
    0% {
        opacity: 0;
        -o-transform: translateX(-100px)
    }
    100% {
        opacity: 1;
        -o-transform: translateX(0)
    }
}
@keyframes fadeInLeft {
    0% {
        opacity: 0;
        transform: translateX(-100px)
    }
    100% {
        opacity: 1;
        transform: translateX(0)
    }
}
.ani-view.fade-in-left {
    opacity: 0;
    opacity: 1\0/IE9;
    -webkit-transform: translateX(-100px);
    -moz-transform: translateX(-100px);
    -o-transform: translateX(-100px);
    transform: translateX(-100px);
    -ms-transform: translateX(0)\0/IE9;
}
.ani-view.fadeInLeft {
    -webkit-animation-name: fadeInLeft;
    -moz-animation-name: fadeInLeft;
    -o-animation-name: fadeInLeft;
    animation-name: fadeInLeft;
}
@-webkit-keyframes fadeInRight {
    0% {
        opacity: 0;
        -webkit-transform: translateX(100px)
    }
    100% {
        opacity: 1;
        -webkit-transform: translateX(0)
    }
}
@-moz-keyframes fadeInRight {
    0% {
        opacity: 0;
        -moz-transform: translateX(100px)
    }
    100% {
        opacity: 1;
        -moz-transform: translateX(0)
    }
}

@-ms-keyframes fadeInRight {
    0% {
        opacity: 0;
        -ms-transform: translateX(100px)
    }
    100% {
        opacity: 1;
        -ms-transform: translateX(0)
    }
}

@-o-keyframes fadeInRight {
    0% {
        opacity: 0;
        -o-transform: translateX(100px)
    }
    100% {
        opacity: 1;
        -o-transform: translateX(0)
    }
}
@keyframes fadeInRight {
    0% {
        opacity: 0;
        transform: translateX(100px)
    }
    100% {
        opacity: 1;
        transform: translateX(0)
    }
}
.ani-view.fade-in-right {
    opacity: 0;
    opacity: 1\0/IE9;
    -webkit-transform: translateX(100px);
    -moz-transform: translateX(100px);
    -o-transform: translateX(100px);
    transform: translateX(100px);
    -ms-transform: translateX(0)\0/IE9;
}
.ani-view.fadeInRight {
    -webkit-animation-name: fadeInRight;
    -moz-animation-name: fadeInRight;
    -o-animation-name: fadeInRight;
    animation-name: fadeInRight;
}
/*首页第2屏载入特效*/
@-webkit-keyframes indCon2fadeInDown {
    0% {
        opacity: 0;
        -webkit-transform: translateY(167px)
    }
    100% {
        opacity: 1;
        -webkit-transform: translateY(0)
    }
}

@-moz-keyframes indCon2fadeInDown {
    0% {
        opacity: 0;
        -moz-transform: translateY(167px)
    }
    100% {
        opacity: 1;
        -moz-transform: translateY(0)
    }
}
@-ms-keyframes indCon2fadeInDown {
    0% {
        opacity: 0;
        -ms-transform: translateY(167px)
    }
    100% {
        opacity: 1;
        -ms-transform: translateY(0)
    }
}
@-o-keyframes indCon2fadeInDown {
    0% {
        opacity: 0;
        -o-transform: translateY(167px)
    }
    100% {
        opacity: 1;
        -o-transform: translateY(0)
    }
}
@keyframes indCon2fadeInDown {
    0% {
        opacity: 0;
        transform: translateY(167px)
    }
    100% {
        opacity: 1;
        transform: translateY(0)
    }
}
.ani-view.indCon2-fade-in-down {
    opacity: 0;
    opacity: 1\0/IE9;
    -webkit-transform: translateY(167px);
    -moz-transform: translateY(167px);
    -o-transform: translateY(167px);
    transform: translateY(167px);
    -ms-transform: translateY(0)\0/IE9;
}
.ani-view.indCon2fadeInDown {
    -webkit-animation-name: indCon2fadeInDown;
    -moz-animation-name: indCon2fadeInDown;
    -o-animation-name: indCon2fadeInDown;
    animation-name: indCon2fadeInDown;
}



@-webkit-keyframes indCon2fadeInUp {
    0% {
        opacity: 0;
        -webkit-transform: translateY(-167px)
    }
    100% {
        opacity: 1;
        -webkit-transform: translateY(0)
    }
}
@-moz-keyframes indCon2fadeInUp {
    0% {
        opacity: 0;
        -moz-transform: translateY(-167px)
    }
    100% {
        opacity: 1;
        -moz-transform: translateY(0)
    }

}

@-ms-keyframes indCon2fadeInUp {
    0% {
        opacity: 0;
        -ms-transform: translateY(-167px)
    }
    100% {
        opacity: 1;
        -ms-transform: translateY(0)
    }
}
@-o-keyframes indCon2fadeInUp {
    0% {
        opacity: 0;
        -o-transform: translateY(-167px)
    }
    100% {
        opacity: 1;
        -o-transform: translateY(0)
    }
}
@keyframes indCon2fadeInUp {
    0% {
        opacity: 0;
        transform: translateY(-167px)
    }
    100% {
        opacity: 1;
        transform: translateY(0)
    }
}
.ani-view.indCon2-fade-in-up {
    opacity: 0;
    opacity: 1\0/IE9;
    -webkit-transform: translateY(-167px);
    -moz-transform: translateY(-167px);
    -o-transform: translateY(-167px);
    transform: translateY(-167px);
    -ms-transform: translateY(0)\0/IE9;
}
.ani-view.indCon2fadeInUp {
    -webkit-animation-name: indCon2fadeInUp;
    -moz-animation-name: indCon2fadeInUp;
    -o-animation-name: indCon2fadeInUp;
    animation-name: indCon2fadeInUp;
}
.suspension{position:fixed;z-index:55;right:38px;bottom:245px;width:70px;height:240px;}
.suspension-box{position:relative;float:right;}
.suspension .a{display:block;width:32px;height:32px;margin-bottom:4px;cursor:pointer;outline:none;}
.suspension .a .i{float:left;width:32px;height:32px;}
.suspension .a-weibo .i{background:url('../image/weibo.png') no-repeat; background-size:32px;}
.suspension .a-weixin .i{background:url('../image/weixin.png') no-repeat;background-size:32px;}
.suspension .a-top .i{background:url('../image/top.png') no-repeat;background-size:32px;}
.suspension .a-top{display:none;margin-top:20px}


.sun_banner {
    width: 91.5%;
    height:358px;
    color:#000;
    margin:213px auto 0px;
    background-color:#F7F7F7;
}

.Yl-container {
    width: 100%;
    height:358px;
    overflow: hidden;
    position: relative
}
.Yl-container .Yl-wrapper {
    width: 100%;
    height: 100%;
    overflow: hidden;
    position: relative
}
.Yl-container .Yl-wrapper i {
    list-style: none;
    font-style: normal
}
.Yl-container .Yl-wrapper .Yl-slide {
    width: 100%;
    height: 100%;
    overflow: hidden;
    position: absolute;
    display: none
}
.Yl-container .Yl-wrapper .Yl-slide.active {
    display: block
}
.Yl-container .Yl-wrapper .Yl-slide .Yl-img0 {
    width: 100%;
    height: 100%;
    position: absolute;
    z-index: 0
}
.Yl-container .Yl-wrapper .Yl-slide .Yl-img1 {
    width: 100%;
    height: 100%;
    position: absolute;
    z-index: 0
}
.Yl-container .Yl-wrapper .Yl-slide .Yl-img2 {
    width: 100%;
    height: 100%;
    position: absolute;
    z-index: 0
}
.Yl-container .Yl-wrapper .Yl-slide .Yl-font0,.Yl-container .Yl-wrapper .Yl-slide .Yl-font1,.Yl-container .Yl-wrapper .Yl-slide .Yl-font2 {
    width:90%;
    height: auto;
    text-align: left;
    margin: 0 auto
}
.Yl-container .Yl-wrapper .Yl-slide.Yl-0 .Yl-font0 {
    font-size: 81px;
    line-height:1.5em;
    margin-top:45px
}
.Yl-container .Yl-wrapper .Yl-slide.Yl-0 .Yl-font1 {
    font-size: 81px;
    line-height:1.5em;
}
.Yl-container .Yl-wrapper .Yl-slide.Yl-0 .Yl-font2 {
    line-height:1.5em;
    font-size: 81px;
}
.Yl-container .Yl-wrapper .Yl-slide.Yl-1 .Yl-font0 {
    font-size: 81px;
    line-height:1.5em;
    margin-top:45px
}
.Yl-container .Yl-wrapper .Yl-slide.Yl-1 .Yl-font1 {
    font-size: 81px;
}
.Yl-container .Yl-wrapper .Yl-slide.Yl-1 .Yl-font2 {
    font-size: 81px;
    margin-top: 30px
}
.Yl-container .Yl-wrapper .Yl-slide.Yl-2 .Yl-font0 {
    line-height:1.5em;
    font-size: 81px;
    margin-top:45px
}
.Yl-container .Yl-wrapper .Yl-slide.Yl-2 .Yl-font1 {
    font-size: 81px;
}
.Yl-container .Yl-wrapper .Yl-slide.Yl-2 .Yl-font2 {
    font-size: 81px;
}
.Yl-container .Yl-pagination {
    width:22px;
    position: absolute;
    bottom:40%;
    top:40%;
    right:20px;
    z-index: 3;
    text-align: center
}
.Yl-container .Yl-pagination span {
    display: inline-block;
    width: 10px;
    height:10px;
    border-radius:10px;
    margin:5px;
    cursor: pointer;
    line-height: 6px;
    vertical-align: middle;
    transition: all .3s linear 0s;
    -webkit-transition: all .3s linear 0s;
    background: #747581
}
.Yl-container .Yl-pagination span:hover {
    background: #fff
}
.Yl-container .Yl-wrapper .Yl-slide .fadeInUp i {
    opacity: 0;
    display: inline-block;
    vertical-align: text-bottom;
    transform: translateY(120px);
    -webkit-transform: translateY(120px);
    transition: all 1s ease-in-out 0s;
    -webkit-transition: all 1s ease-in-out 0s
}
.Yl-container .Yl-wrapper .Yl-slide .fadeInUp.act i {
    transform: translateY(0);
    -webkit-transform: translateY(0);
    opacity: 1
}
.Yl-container .Yl-pagination-bullet-active {
    background: #fff!important
}
.Yl-container .Yl-Button {
    position: relative;
    z-index: 2;
    width: 1200px;
    height: 60px;
    margin: 0 auto;
    text-align: left;
    margin-top: 50px
}
.Yl-container .Yl-Button a {
    display: inline-block;
    width: 150px;
    height: 45px;
    line-height: 45px;
    font-size: 16px;
    color: #fff;
    text-align: center;
    margin: 0 auto;
    background: 0 0;
    margin-top: 20px;
    border: 1px #fff solid;
    text-decoration: none
}
.Yl-container .Yl-Button a:hover {
    background: #fff;
    color: #000
}
.Yl-container .Yl-wrapper .Yl-slide .slideInLeft {
    position: relative;
    z-index: 1
}
.Yl-container .Yl-wrapper .Yl-slide .slideInLeft i {
    display: inline-block;
    text-align: left
}
.Yl-container .Yl-wrapper .Yl-slide .slideInLeft i b {
    opacity: 0;
    display: inline-block;
    white-space: nowrap;
    overflow: hidden;
    transition: all .6s ease-out 0s;
    -webkit-transition: all .6s ease-out 0s;
    width: 10%
}
.Yl-container .Yl-wrapper .Yl-slide .slideInLeft.act i b {
    width: 100%;
    opacity: 1
}
@keyframes Yl-img_an {
    0% {
        transform: scale(1,1)
    }
    100% {
        transform: scale(1.5,1.5)
    }
}