* {
    margin: 0;
    padding: 0;
}
img {
    max-width: 100%;
    border: 0;
}
a {
    text-decoration: none;
    color: #000;
    cursor: pointer;
}
ul li {
    list-style-type: none;
}
body {
    font-family: 'Microsoft Yahei', sans-serif;
    font-size: 14px;
    min-width: 1200px;
    background-color: #fff;
    color: #333;
    box-sizing: border-box;
}
.font-16 {
    font-size: 16px;
}
.font-20 {
    font-size: 20px;
}
.clearfix::after {
    content: ".";
    clear: both;
    display: block;
    overflow: hidden;
    font-size: 0;
    height: 0;
}
.clearfix {
    zoom: 1;
}

/* header */
.header,
.wrapper-banner,
.wrapper-guide {
    width: 100%;
}
.header>div {
    padding: 20px 0;
}
.wrapper-width {
    max-width: 1200px;
    margin: 0 auto;
    overflow: hidden;
    box-sizing: border-box;
}
.banner-content+span {
    height: 88px;
}

.hd-left {
    float: left;
}
.hd-left a {
    display: block;
    height: 39px;
    float: left;
}

.hd-right {
    float: right;
    margin-right: 5px;
}
.hd-right span:first-child {
    text-align: right;
}
.hd-right span:first-child a:last-child {
    margin-left: 23px;
}
.hd-right span,
.banner-content span,
.guide-iconlist li span {
    display: block;
}
.guide-iconlist li span {
    background-size: 100% 100%;
}
/* banner */
.wrapper-banner {
    position: relative;
    background: url(../images/banner-1.jpg) no-repeat center;
    background-size: 100% 100%;
    background-color: #f83c3d;
    height: 520px;
}
.con-bg-h {
    height: 420px;
}

.pd-48 {
    padding: 0 48px;
}

.f-left {
    float: left;
    margin-top: 75px;
    margin-left: 45px;
    width: 450px;
    height: 250px;
}

.f-right {
    float: right;
    text-align: right;
    width: 420px;
    height: 215px;
    margin-top: 75px;
    margin-right: 65px;
}
.title-box {
    height: 80px;
}

.title-box h2 {
    color: #999;
    font-weight: normal;
    margin-bottom: 8px;
}

.title-box span {
    font-size: 62px;
    font-weight: bold;
    display: block;
    color: #ddb572;
    font-family: arial, 'Microsoft Yahei';
}

.con-des-txt {
    margin-top: 40px;
    color: #333;
    line-height: 36px;
}
.con-bgreb{
    background: #f94345;
}
.con-bgreb .title-box h2 {
    color: #ffc9c8;
}
.con-bgreb .title-box span {
    color: #fff;
}
.con-bgreb .con-des-txt {
    color: #fff;
}

.con1-left {
    width: 400px;
}
.con2-left {
    position: absolute;
    top: 105px;
    left: 145px;
}
.wrapper-con .wrapper-width {
    overflow: inherit;
    position: relative;
}
.wrapper-con img {
    max-width: 100%;
}

.con1-right {
    position: absolute;
    top: 105px;
    right: 120px;
}

.con2-right {
    width: 400px;
}

.banner-content {
    position: absolute;
    width: 100%;
    height: 100%;
    /*left: 140px;
    top: 320px;
    width: 200px;
    height: 80px;*/
}
.download {
    display: block;
    width: 100%;
    height: 100%;
}

.fixed-word{
    position: absolute;
    top: 60px;
    right: 180px;
    z-index: -100;
}
.fixed-word.redbg{
    z-index: 1;
}
/*.banner-content,*/
div.con-bg-h.animate .con-left,
div.con-bg-h.animate .con-right,
div.con-bg-h.animate .con-left>span,
div.con-bg-h.animate .con-right>span {
    visibility: hidden;
    *visibility: visible;
}

div.con-bg-h.animate .con-left {
    opacity: 1;
    animation: lefttoright .9s ease forwards;
    -webkit-animation: lefttoright .9s ease forwards;
    visibility: visible;
}

@-webkit-keyframes lefttorightt {
    /*左向右位移动画*/
    from {
        opacity: 0;
        -webkit-transform: translate(-55px, 0);
    }
    to {
        opacity: 1;
        -webkit-transform: translate(0, 0);
    }
}

@-moz-keyframes lefttoright {
    from {
        opacity: 0;
        -moz-transform: translate(-55px, 0);
    }
    to {
        opacity: 1;
        -moz-transform: translate(0, 0);
    }
}

@-o-keyframes lefttoright {
    from {
        opacity: 0;
        -o-transform: translate(-55px, 0);
    }
    to {
        opacity: 1;
        -o-transform: translate(0, 0);
    }
}

@keyframes lefttoright {
    from {
        opacity: 0;
        transform: translate(-55px, 0);
    }
    to {
        opacity: 1;
        transform: translate(0, 0);
    }
}

.banner-content {
    opacity: 1;
    animation: bannertoleft .9s ease forwards;
    -webkit-animation: bannertoleft .9s ease forwards;
    visibility: visible;
}

@-webkit-keyframes bannertoleft {
    /*右向左位移动画*/
    from {
        opacity: 0;
        -webkit-transform: translate(55px, 0);
    }
    to {
        opacity: 1;
        -webkit-transform: translate(0, 0);
    }
}

@-moz-keyframes bannertoleft {
    from {
        opacity: 0;
        -moz-transform: translate(55px, 0);
    }
    to {
        opacity: 1;
        -moz-transform: translate(0, 0);
    }
}

@-o-keyframes bannertoleft {
    from {
        opacity: 0;
        -o-transform: translate(55px, 0);
    }
    to {
        opacity: 1;
        -o-transform: translate(0, 0);
    }
}

@keyframes bannertoleft {
    from {
        opacity: 0;
        transform: translate(55px, 0);
    }
    to {
        opacity: 1;
        transform: translate(0, 0);
    }
}

div.con-bg-h.animate .con-right {
    opacity: 1;
    animation: righttoleft .9s ease forwards;
    -webkit-animation: righttoleft .9s ease forwards;
    visibility: visible;
}

@-webkit-keyframes righttoleft {
    /*右向左位移动画*/
    from {
        opacity: 0;
        -webkit-transform: translate(55px, 0);
    }
    to {
        opacity: 1;
        -webkit-transform: translate(0, 0);
    }
}

@-moz-keyframes righttoleft {
    from {
        opacity: 0;
        -moz-transform: translate(55px, 0);
    }
    to {
        opacity: 1;
        -moz-transform: translate(0, 0);
    }
}

@-o-keyframes righttoleft {
    from {
        opacity: 0;
        -o-transform: translate(55px, 0);
    }
    to {
        opacity: 1;
        -o-transform: translate(0, 0);
    }
}

@keyframes righttoleft {
    from {
        opacity: 0;
        transform: translate(55px, 0);
    }
    to {
        opacity: 1;
        transform: translate(0, 0);
    }
}

div.con-bg-h.animate .con-right>span,
div.con-bg-h.animate .con-left>span {
    opacity: 0;
    *opacity: 1;
    filter: alpha(opacity=100);
    animation: mintomax .9s ease forwards .6s;
    -webkit-animation: mintomax .9s ease forwards .6s;
    visibility: visible;
}

@-webkit-keyframes mintomax {
    /*小到大缩放动画*/
    from {
        opacity: 0;
        -webkit-transform: scale(0.3, 0.3);
    }
    to {
        opacity: 1;
        -webkit-transform: scale(1, 1);
    }
}

@-moz-keyframes mintomax {
    from {
        opacity: 0;
        -moz-transform: scale(0.3, 0.3);
    }
    to {
        opacity: 1;
        -moz-transform: scale(1, 1);
    }
}

@-o-keyframes mintomax {
    from {
        opacity: 0;
        -o-transform: scale(0.3, 0.3);
    }
    to {
        opacity: 1;
        -o-transform: scale(1, 1);
    }
}

@keyframes mintomax {
    from {
        opacity: 0;
        transform: scale(0.3, 0.3);
    }
    to {
        opacity: 1;
        transform: scale(1, 1);
    }
}