@charset "utf-8";

@font-face {
    font-family: 'humanist_521_lightregular';
    src: url('../fonts/humanist521bt-light-webfont.woff2') format('woff2'), url('../fonts/humanist521bt-light-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'HelveticaOblThin';
    src: url('../fonts/helveticaoblthin.eot');
    src: url('../fonts/helveticaoblthin.eot') format('embedded-opentype'), url('../fonts/helveticaoblthin.woff2') format('woff2'), url('../fonts/helveticaoblthin.woff') format('woff'), url('../fonts/helveticaoblthin.ttf') format('truetype'), url('../fonts/helveticaoblthin.svg#helveticaoblthin') format('svg');
}

html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
    margin: 0;
    padding: 0px;
    border: 0;
    font-size: 100%;
    outline: none;
}

html {
    font-size: 100%;
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
    overflow-x: hidden;
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

/* always display scrollbars */
body {
    font: 14px/1.8 "Microsoft Yahei", "微软雅黑", "Hiragino Sans GB", "冬青黑体", "Arial", "Helvetica", "SimHei", "黑体", "STXihei", "华文细黑", sans-serif;
    margin: 0 auto;
    color: #666;
    background-color: #fff;
}

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
    display: block;
}

ol,
ul {
    list-style: none;
}

blockquote,
q {
    quotes: none;
}

    blockquote:before,
    blockquote:after,
    q:before,
    q:after {
        content: '';
        content: none;
    }

strong {
    font-weight: bold;
}

input {
    outline: none;
}

img {
    border: 0;
}

input[type="text"],
input[type="button"],
input[type="submit"],
input[type="reset"] {
    -webkit-appearance: none;
    border-radius: 0;
}

textarea {
    -webkit-appearance: none;
    border-radius: 0;
    outline: none;
}

select {
    outline: none;
}

    select::-ms-expand {
        display: none;
    }

::-moz-selection {
    background: #b0b0b0;
    color: #fff;
    text-shadow: none;
}

::selection {
    background: #b0b0b0;
    color: #fff;
    text-shadow: none;
}

a {
    text-decoration: none;
    blr: expression(this.onFocus=this.blur());
    cursor: pointer;
    -webkit-transition: 0.3s;
    -moz-transition: 0.3s;
    -o-transition: 0.3s;
    transition: 0.3s;
}

    a:link,
    a:visited {
        text-decoration: none;
    }

    a:active,
    a:hover {
        text-decoration: none;
    }

.clearfix:before,
.clearfix:after {
    display: table;
    content: "";
    line-height: 0px;
}

.clearfix:after {
    clear: both;
}

.clearfix {
    *zoom: 1;
}

.fc {
    text-align: center;
}

.fr {
    text-align: right;
}

.l {
    float: left;
    display: inline-block;
}

.r {
    float: right;
    display: inline-block;
}

.vt {
    vertical-align: top;
}

.vm {
    vertical-align: middle;
}

.inner {
    width: 1100px;
    height: 220px;
    margin: 0px auto;
}

.top a:link,
.top a:visited {
    color: #323232;
}

.top a:active,
.top a:hover {
    color: #cf0418;
}

.mzTop {
    z-index: 999;
    position: fixed;
    left: 0px;
    top: 0px;
    width: 100%;
}

.top {
    width: 100%;
    background-color: #fff;
    box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.5);
    position: relative;
    z-index: 4;
    height: 80px;
}

.logo {
    float: left;
    display: block;
    width: 160px;
    display: block;
    padding: 15px 0px 0 2%;
}

    .logo img {
        width: 100%;
        display: block;
    }

.sharpBox {
    position: absolute;
    right: 2%;
    top: 0px;
    padding: 24px 0px;
    color: #c6c6c5;
    height: 31px;
    line-height: 31px;
}

    .sharpBox a {
        display: block;
        float: left;
        display: block;
        width: 31px;
        height: 31px;
        margin-left: 15px;
        background-color: #fff;
    }

        .sharpBox a i {
            display: block;
            width: 100%;
            height: 100%;
            background-image: url(../images/sharp.png);
            background-repeat: no-repeat;
            -webkit-transition: all .3s;
            -moz-transition: all .3s;
            -ms-transition: all .3s;
            transition: all .3s;
        }

        .sharpBox a .i1 {
            background-position: -11px 0px;
        }

        .sharpBox a .i2 {
            background-position: -61px 0px;
        }

        .sharpBox a .i3 {
            background-position: -114px 0px;
        }

        .sharpBox a .i7 {
            background: url(../images/enicon.jpg) no-repeat center center;
        }

        .sharpBox a .i8 {
            background: url(../images/720.jpg) no-repeat center center;
        }

        .sharpBox a:hover i {
            transform: translateY(-5px);
            -webkit-transform: translateY(-5px);
        }

.nav {
    margin: 0px auto;
    height: 80px;
    line-height: 80px;
    width: 1000px;
}

    .nav li {
        display: inline-block;
        font-size: 16px;
        width: 124px;
        float: left;
        text-align: center;
    }

        .nav li:nth-child(5) {
            background: url(../images/hot.gif) no-repeat 70px 10px;
        }

        .nav li a {
            display: block;
            position: relative;
        }

            .nav li a i {
                background: url(../images/nav_active.png) no-repeat scroll center center;
                width: 12px;
                height: 4px;
                display: block;
                position: absolute;
                bottom: 18px;
                left: 50%;
                margin-left: -6px;
            }

            .nav li a.active,
            .nav li a:hover {
                color: #fff;
                background-color: #cf0418;
            }

#articlebox .artcontent {
    width: 1200px;
    margin: 0 auto;
}

.maincontent-inner {
    overflow: hidden;
    width: 1200px;
    margin: 0 auto;
}

/*.nav li:nth-child(6) a:hover { color:#323232;background:none;}*/
.subNavBox a:link,
.subNavBox a:visited {
    color: #646464;
}

.subNavBox a:active,
.subNavBox a:hover {
    color: #646464;
}

.subNavBox {
    position: absolute;
    left: 0px;
    top: 80px;
    width: 100%;
    left: 0px;
    background-color: #fff;
    height: 0;
    overflow: hidden;
}

    .subNavBox .subNav {
        display: none;
        border-bottom: 1px solid #cf0418;
        height: 200px;
        padding-left: 118px;
    }

.subNav1 .subNavList2 {
    width: 864px;
    margin: 0px auto;
}

    .subNav1 .subNavList2 dd {
        float: left;
        display: block;
        width: 74px;
        padding: 32px 35px;
        text-align: center;
    }

    .subNav1 .subNavList2 a {
        font-size: 15px;
        font-weight: bold;
        display: block;
        position: relative;
        padding-bottom: 4px;
    }

        .subNav1 .subNavList2 a.active .bot {
            width: 74px;
            margin-left: -37px;
        }

.subNavBox a .bot {
    width: 0px;
    position: absolute;
    left: 50%;
    bottom: 0px;
    height: 1px;
    background-color: #cf0418;
    transition: 0.3s;
    -webkit-transition: 0.3s;
}

.subNavBox a:hover .bot {
    width: 74px;
    margin-left: -37px;
}

.subNavList {
    margin: 0px auto;
}

    .subNavList dd {
        float: left;
        display: block;
        width: 124px;
        padding: 32px 0px 38px;
        height: 130px;
        text-align: center;
        transition: 0.3s;
        -webkit-transition: 0.3s;
    }

        .subNavList dd:hover {
            background-color: #eeeeee;
        }

    .subNavList .itemA {
        display: block;
        position: relative;
        margin-bottom: 28px;
        font-size: 15px;
        font-weight: bold;
        padding-bottom: 4px;
    }

    .subNavList .subList {
        font-size: 14px;
    }

        .subNavList .subList p {
            padding-bottom: 10px;
        }

        .subNavList .subList a {
            display: block;
            position: relative;
        }

.subNavBox .subConPage a:link,
.subNavBox .subConPage a:visited {
    color: #646464;
}

.subNavBox .subConPage a:active,
.subNavBox .subConPage a:hover {
    color: #cf0418;
}

.subConPage {
    position: relative;
    width: 796px;
    margin: 0px auto;
}

    .subConPage .img {
        float: right;
        display: block;
        width: 408px;
        background-color: #333;
        overflow: hidden;
    }

        .subConPage .img img {
            width: 100%;
            display: block;
            -webkit-transition: 0.6s;
            -moz-transition: 0.6s;
            -o-transition: 0.6s;
            transition: 0.6s;
        }

        .subConPage .img:hover img {
            -webkit-transform: scale(1.1);
            transform: scale(1.1);
            opacity: 0.8;
            filter: alpha(opacity=80);
        }

    .subConPage .con {
        width: 226px;
        height: 186px;
        padding: 40px 0px 0px;
        float: left;
        display: block;
        border-bottom: 1px solid #e0e0e0;
        border-top: 1px solid #e0e0e0;
    }

        .subConPage .con .c {
            font-size: 14px;
            height: 101px;
            overflow: hidden;
            margin-bottom: 48px;
        }

        .subConPage .con .cmore {
            display: block;
            position: relative;
            font-size: 12px;
        }

            .subConPage .con .cmore .ico {
                position: absolute;
                right: 0px;
                top: 50%;
                margin-top: -5px;
                width: 11px;
                height: 11px;
                background: url(../images/more_i1.png) no-repeat;
                display: block;
                transition: 400ms;
                -webkit-transition: 400ms;
            }

            .subConPage .con .cmore:hover .ico {
                -moz-transform: rotate(90deg);
                -webkit-transform: rotate(90deg);
                -o-transform: rotate(90deg);
                -ms-transform: rotate(90deg);
                transform: rotate(90deg);
            }

.serviceBox a:link,
.serviceBox a:visited {
    color: #646464;
}

.serviceBox a:active,
.serviceBox a:hover {
    color: #cf0418;
}

.serviceBox {
    position: absolute;
    right: 40px;
    top: 42px;
}

    .serviceBox p {
        margin-bottom: 22px;
    }

    .serviceBox i {
        display: block;
        margin: 0px auto 2px;
        width: 21px;
        height: 21px;
        background-image: url(../images/ico3.png);
        background-repeat: no-repeat;
    }

        .serviceBox i.i1 {
            background-position: 0px 0px;
        }

        .serviceBox i.i2 {
            background-position: 0px -65px;
        }

        .serviceBox i.i3 {
            background-position: 0px -132px;
        }

        .serviceBox i.i4 {
            background-position: 0px -196px;
        }

        .serviceBox i.i5 {
            background-position: 0px -263px;
        }

.pro_r {
    display: none;
}

.menu-handler {
    display: none;
    background-color: #fff;
    width: 76px;
    height: 70px;
    cursor: pointer;
    position: absolute;
    right: 0px;
    top: 0px;
    transition: all 0.3s cubic-bezier(0.445, 0.145, 0.355, 1);
    -webkit-transition: all 0.3s cubic-bezier(0.445, 0.145, 0.355, 1);
    -moz-transition: all 0.3s cubic-bezier(0.445, 0.145, 0.355, 1);
}

    .menu-handler .burger {
        width: 28px;
        height: 3px;
        background: #cf0418;
        display: block;
        position: absolute;
        z-index: 5;
        top: 24px;
        left: 50%;
        margin: 0px 0px 0px -14px;
        transform-origin: center;
        -webkit-transform-origin: center;
        -moz-transform-origin: center;
        -o-transform-origin: center;
        -ms-transform-origin: center;
    }

    .menu-handler .burger-2 {
        top: 33px;
    }

    .menu-handler .burger-3 {
        top: 42px;
    }

    .menu-handler.active {
        background-color: #cf0418;
    }

        .menu-handler.active .burger {
            background-color: #fff;
        }

        .menu-handler.active .burger-1 {
            top: 29px;
            -moz-transform: rotate(225deg);
            -webkit-transform: rotate(225deg);
            -o-transform: rotate(225deg);
            -ms-transform: rotate(225deg);
            transform: rotate(225deg);
        }

        .menu-handler.active .burger-2 {
            -ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
            filter: alpha(opacity=0);
            opacity: 0;
            -moz-opacity: 0;
            -khtml-opacity: 0;
            -webkit-opacity: 0;
        }

        .menu-handler.active .burger-3 {
            top: 29px;
            -moz-transform: rotate(-225deg);
            -webkit-transform: rotate(-225deg);
            -o-transform: rotate(-225deg);
            -ms-transform: rotate(-225deg);
            transform: rotate(-225deg);
        }

.trans,
.trans:hover {
    -webkit-transition: all 0.8s cubic-bezier(0.19, 1, 0.22, 1) 0s;
    -moz-transition: all 0.8s cubic-bezier(0.19, 1, 0.22, 1) 0s;
    -o-transition: all 0.8s cubic-bezier(0.19, 1, 0.22, 1) 0s;
    transition: all 0.8s cubic-bezier(0.19, 1, 0.22, 1) 0s;
    -ms-transition: all 0.8s cubic-bezier(0.19, 1, 0.22, 1) 0s;
}

.trans-fast,
.trans-fast:hover {
    -webkit-transition: all 200ms ease-in-out;
    -moz-transition: all 200ms ease-in-out;
    -o-transition: all 200ms ease-in-out;
    transition: all 200ms ease-in-out;
    -ms-transition: all 200ms ease-in-out;
}

.pusher {
    transition: transform 0.7s cubic-bezier(0.19, 1, 0.22, 1) 0s;
    -webkit-transition: transform 0.7s cubic-bezier(0.19, 1, 0.22, 1) 0s;
}

.pusher-black {
    position: fixed;
    width: 100%;
    height: 100%;
    left: 0px;
    top: 0px;
    background-color: rgba(0, 0, 0, 0.5);
    display: none;
    z-index: 900;
}

.menuBox {
    background-color: #cf0418;
    color: #fff;
    position: fixed;
    right: 0px;
    top: 0px;
    width: 390px;
    height: 100%;
    z-index: 99999;
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    transition: all 0.7s cubic-bezier(0.19, 1, 0.22, 1) 0s;
    -webkit-transition: all 0.7s cubic-bezier(0.19, 1, 0.22, 1) 0s;
    transform: translate(100%, 0px);
    -moz-transform: translate(100%, 0px);
    /* Firefox 4 */
    -webkit-transform: translate(100%, 0px);
    /* Safari and Chrome */
    -o-transform: translate(100%, 0px);
    /* Opera */
}

.no-cssanimations .menuBox {
    display: none;
}

.nav-link {
    color: #fff;
    display: block;
    font-size: 16px;
    padding: 12px 30px;
    border-bottom: 1px solid rgba(255, 255, 255, .2);
}

.navMobile {
    padding: 10% 0px;
}

    .navMobile .subnav {
        background-color: #fff;
        display: none;
        padding: 10px 30px;
    }

        .navMobile .subnav dd {
            padding: 5px 0px;
            margin-bottom: 5px;
        }

        .navMobile .subnav a {
            color: #323232;
            position: relative;
            font-size: 16px;
        }

            .navMobile .subnav a:hover {
                color: #cf0418;
            }

.menuOpen .pusher {
    transition: transform 0.7s cubic-bezier(0.19, 1, 0.22, 1) 0s;
    -webkit-transition: transform 0.7s cubic-bezier(0.19, 1, 0.22, 1) 0s;
}

.menuOpen .mzTop {
    transition: all 0.7s cubic-bezier(0.19, 1, 0.22, 1) 0s;
    -webkit-transition: all 0.7s cubic-bezier(0.19, 1, 0.22, 1) 0s;
}

.menuOpen .pusher-black {
    display: block;
}

.mtop {
    height: 80px;
}

.foot {
    background-color: #f5f5f5;
    padding: 40px 0px 30px;
    margin-top: 50px;
}

    .foot a:link,
    .foot a:visited {
        color: #646464;
    }

    .foot a:active,
    .foot a:hover {
        color: #CD000F;
    }

    .foot .tel {
        font-size: 35px;
        color: #333;
    }

    .foot .bot {
        border-bottom: 1px solid #a0a0a0;
        width: 50px;
        display: block;
        margin: 0px auto 15px;
    }

    .foot .fnav {
        text-align: center;
    }

        .foot .fnav span {
            padding: 0px 10px;
        }

.branditem {
    width: 299px;
    margin: 0px auto;
    display: block;
    height: 67px;
}

.branchbox {
    width: 206px;
    height: 47px;
    position: relative;
    z-index: 10;
    float: left;
    margin-right: 6px;
}

    .branchbox .branch-span {
        width: 180px;
        padding: 0px 12px;
        height: 45px;
        line-height: 45px;
        border: 1px solid #ccc;
        display: inline-block;
        background: #fff;
        color: #646464;
    }

.branchboxAct .branch-span {
    background: url(../images/link_ico.png) no-repeat scroll 174px center #d2d2d2;
}

.branchbox .branch-ul {
    position: absolute;
    bottom: 47px;
    width: 180px;
    left: 0px;
    background: #fff;
    padding: 20px 13px;
    z-index: 110;
    display: none;
}

    .branchbox .branch-ul li {
        text-align: left;
    }

        .branchbox .branch-ul li a {
            color: #4f4f4f;
            padding: 3px 0px;
            display: block;
            width: 100%;
        }

            .branchbox .branch-ul li a:hover {
                color: #E60027;
            }

.showping {
    line-height: 45px;
    border: 1px solid #ccc;
    display: block;
    height: 45px;
    width: 85px;
    text-align: center;
    float: left;
}

.footList {
    width: 96%;
    margin: 0px auto;
    padding: 20px 0px 55px;
}

    .footList dd {
        display: block;
    }

        .footList dd.lin2,
        .footList dd.lin3 {
            padding-top: 10px;
            font-size: 12px;
        }

        .footList dd.lin3 {
            text-align: center;
        }

.fimglist {
    text-align: center;
}

    .fimglist a {
        margin: 0px 6px;
    }

.pagenavBox {
    height: 34px;
}

.pagenav {
    background-color: #e60012;
    width: 100%;
    height: 90px;
    text-align: center;
}

    .pagenav .pnavbox {
        line-height: 34px;
    }

.pnavbox span {
    margin: 0px 20px;
    border-right: 1px solid #fc7b85;
    color: #e60012;
}

.pagenav a {
    text-align: center;
    color: #fff;
    display: inline-block;
    *display: inline;
    zoom: 1;
    position: relative;
}

    .pagenav a span {
        padding: 0px 26px;
        color: #fff;
        border-right: 0px;
        margin: 0px;
    }

    .pagenav a .bot {
        background: url(../images/v_bot.png) no-repeat;
        width: 9px;
        height: 6px;
        display: block;
        position: absolute;
        left: 50%;
        bottom: 5px;
        margin-left: -4px;
        opacity: 0;
        visibility: hidden;
    }

    .pagenav a:hover {
        background-color: #c20513;
        color: #fff;
    }

        .pagenav a:hover .bot {
            opacity: 1;
            visibility: visible;
        }

.cpnav {
    display: none;
    width: 100%;
    color: #FFF;
    line-height: 50px;
    height: 50px;
    overflow: hidden;
    text-align: center;
    background: #c20513;
    cursor: pointer;
}

.caret {
    display: inline-block;
    width: 0px;
    height: 0px;
    margin-left: 10px;
    vertical-align: middle;
    border-top: 4px solid;
    border-right: 4px solid transparent;
    border-left: 4px solid transparent;
}

.fixed {
    position: fixed;
    left: 0px;
    top: 0px;
    z-index: 970;
}

.pagenav.fixed {
    top: 80px;
}

.slick-slider {
    position: relative;
    display: block;
    box-sizing: border-box;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
    -khtml-user-select: none;
    -ms-touch-action: pan-y;
    touch-action: pan-y;
    -webkit-tap-highlight-color: transparent;
}

.slick-list {
    position: relative;
    overflow: hidden;
    display: block;
    margin: 0;
    padding: 0;
}

    .slick-list:focus {
        outline: none;
    }

    .slick-list.dragging {
        cursor: pointer;
        cursor: hand;
    }

.slick-slider .slick-list,
.slick-track,
.slick-slide,
.slick-slide img {
    -webkit-transform: translate3d(0, 0, 0);
    -moz-transform: translate3d(0, 0, 0);
    -ms-transform: translate3d(0, 0, 0);
    -o-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
}

.slick-track {
    position: relative;
    left: 0;
    top: 0;
    display: block;
    zoom: 1;
}

    .slick-track:before,
    .slick-track:after {
        content: "";
        display: table;
    }

    .slick-track:after {
        clear: both;
    }

.slick-loading .slick-track {
    visibility: hidden;
}

.slick-slide {
    float: left;
    height: 100%;
    min-height: 1px;
    display: none;
}

    .slick-slide img {
        display: block;
    }

    .slick-slide.slick-loading img {
        display: none;
    }

    .slick-slide.dragging img {
        pointer-events: none;
    }

.slick-initialized .slick-slide {
    display: block;
}

.slick-loading .slick-slide {
    visibility: hidden;
}

.slick-vertical .slick-slide {
    display: block;
    height: auto;
    border: 1px solid transparent;
}

/* Arrows */
.slick-prev,
.slick-next {
    position: absolute;
    display: block;
    height: 20px;
    width: 20px;
    line-height: 0;
    font-size: 0;
    cursor: pointer;
    background: transparent;
    color: transparent;
    padding: 0;
    border: none;
    outline: none;
}

/* Dots */
.slick-dots {
    position: absolute;
    bottom: -45px;
    list-style: none;
    display: block;
    text-align: center;
    padding: 0px;
    width: 100%;
}

    .slick-dots li {
        position: relative;
        display: inline-block;
        height: 20px;
        width: 20px;
        margin: 0px 5px;
        padding: 0px;
        cursor: pointer;
    }

/*jQuery FlexSlider v2.6.0*/
.flex-direction-nav {
    *height: 0;
}

    .flex-direction-nav a {
        text-decoration: none;
        display: block;
        width: 40px;
        height: 40px;
        margin: -20px 0 0;
        position: absolute;
        top: 50%;
        z-index: 10;
        overflow: hidden;
    }

    .flex-direction-nav .flex-prev {
        left: -50px;
    }

    .flex-direction-nav .flex-next {
        right: -50px;
    }

.flex-pauseplay a {
    display: block;
    width: 20px;
    height: 20px;
    position: absolute;
    bottom: 5px;
    left: 10px;
    opacity: 0.8;
    z-index: 10;
    overflow: hidden;
    cursor: pointer;
    color: #333;
}

.flex-control-nav {
    width: 100%;
    position: absolute;
    bottom: -40px;
    text-align: center;
}

    .flex-control-nav li {
        margin: 0 6px;
        display: inline-block;
        zoom: 1;
        *display: inline;
    }

.flex-control-paging li a {
    width: 11px;
    height: 11px;
    display: block;
    background: #666;
    cursor: pointer;
    text-indent: -9999px;
}

    .flex-control-paging li a:hover {
        background: #333;
    }

    .flex-control-paging li a.flex-active {
        background: #333;
        cursor: default;
    }

.flex-control-thumbs {
    margin: 5px 0 0;
    position: static;
    overflow: hidden;
}

    .flex-control-thumbs li {
        width: 25%;
        float: left;
        margin: 0;
    }

    .flex-control-thumbs img {
        width: 100%;
        height: auto;
        display: block;
        opacity: .7;
        cursor: pointer;
        -moz-user-select: none;
        -webkit-transition: all 1s ease;
        -moz-transition: all 1s ease;
        -ms-transition: all 1s ease;
        -o-transition: all 1s ease;
        transition: all 1s ease;
    }

        .flex-control-thumbs img:hover {
            opacity: 1;
        }

    .flex-control-thumbs .flex-active {
        opacity: 1;
        cursor: default;
    }

/*
 * 	Core Owl Carousel CSS File
 *	v1.3.3
 */
/* clearfix */
.owl-carousel .owl-wrapper:after {
    content: ".";
    display: block;
    clear: both;
    visibility: hidden;
    line-height: 0;
    height: 0;
}

/* display none until init */
.owl-carousel {
    display: none;
    position: relative;
    -ms-touch-action: pan-y;
}

    .owl-carousel .owl-wrapper {
        display: none;
        position: relative;
        -webkit-transform: translate3d(0px, 0px, 0px);
    }

    .owl-carousel .owl-wrapper-outer {
        overflow: hidden;
        position: relative;
        width: 100%;
    }

        .owl-carousel .owl-wrapper-outer.autoHeight {
            -webkit-transition: height 500ms ease-in-out;
            -moz-transition: height 500ms ease-in-out;
            -ms-transition: height 500ms ease-in-out;
            -o-transition: height 500ms ease-in-out;
            transition: height 500ms ease-in-out;
        }

    .owl-carousel .owl-item {
        float: left;
    }

.owl-controls .owl-page,
.owl-controls .owl-buttons div {
    cursor: pointer;
}

.owl-controls {
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

/* mouse grab icon */
.grabbing {
    cursor: url(grabbing.png) 8 8, move;
}

/* fix */
.owl-carousel .owl-wrapper,
.owl-carousel .owl-item {
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    -ms-backface-visibility: hidden;
    -webkit-transform: translate3d(0, 0, 0);
    -moz-transform: translate3d(0, 0, 0);
    -ms-transform: translate3d(0, 0, 0);
}

/*
* 	Owl Carousel Owl Demo Theme
*	v1.3.3
*/

.owl-theme .owl-controls {
    margin-top: 10px;
    text-align: center;
}

    /* Styling Next and Prev buttons */

    .owl-theme .owl-controls .owl-buttons div {
        color: #FFF;
        display: inline-block;
        zoom: 1;
        *display: inline;
        /*IE7 life-saver */
        margin: 5px;
        padding: 3px 10px;
        font-size: 12px;
        -webkit-border-radius: 30px;
        -moz-border-radius: 30px;
        border-radius: 30px;
        background: #869791;
    }

    /* Clickable class fix problem with hover on touch devices */
    /* Use it for non-touch hover action */
    .owl-theme .owl-controls.clickable .owl-buttons div:hover {
        filter: Alpha(Opacity=100);
        /*IE7 fix*/
        opacity: 1;
        text-decoration: none;
    }

    /* Styling Pagination*/

    .owl-theme .owl-controls .owl-page {
        display: inline-block;
        zoom: 1;
        *display: inline;
        /*IE7 life-saver */
    }

        .owl-theme .owl-controls .owl-page span {
            display: block;
            width: 12px;
            height: 12px;
            margin: 5px 7px;
            -webkit-border-radius: 20px;
            -moz-border-radius: 20px;
            border-radius: 20px;
        }

        .owl-theme .owl-controls .owl-page.active span,
        .owl-theme .owl-controls.clickable .owl-page:hover span {
        }

        /* If PaginationNumbers is true */

        .owl-theme .owl-controls .owl-page span.owl-numbers {
            height: auto;
            width: auto;
            color: #FFF;
            padding: 2px 10px;
            font-size: 12px;
            -webkit-border-radius: 30px;
            -moz-border-radius: 30px;
            border-radius: 30px;
        }

/* preloading images */
.owl-item.loading {
    min-height: 150px;
    background: url(../images/ajaxloader.gif) no-repeat center center;
}

/*
 *  Owl Carousel CSS3 Transitions
 *  v1.3.2
 */

.owl-origin {
    -webkit-perspective: 1200px;
    -webkit-perspective-origin-x: 50%;
    -webkit-perspective-origin-y: 50%;
    -moz-perspective: 1200px;
    -moz-perspective-origin-x: 50%;
    -moz-perspective-origin-y: 50%;
    perspective: 1200px;
}

/* fade */
.owl-fade-out {
    z-index: 10;
    -webkit-animation: fadeOut .7s both ease;
    -moz-animation: fadeOut .7s both ease;
    animation: fadeOut .7s both ease;
}

.owl-fade-in {
    -webkit-animation: fadeIn .7s both ease;
    -moz-animation: fadeIn .7s both ease;
    animation: fadeIn .7s both ease;
}

/* backSlide */
.owl-backSlide-out {
    -webkit-animation: backSlideOut 1s both ease;
    -moz-animation: backSlideOut 1s both ease;
    animation: backSlideOut 1s both ease;
}

.owl-backSlide-in {
    -webkit-animation: backSlideIn 1s both ease;
    -moz-animation: backSlideIn 1s both ease;
    animation: backSlideIn 1s both ease;
}

/* goDown */
.owl-goDown-out {
    -webkit-animation: scaleToFade .7s ease both;
    -moz-animation: scaleToFade .7s ease both;
    animation: scaleToFade .7s ease both;
}

.owl-goDown-in {
    -webkit-animation: goDown .6s ease both;
    -moz-animation: goDown .6s ease both;
    animation: goDown .6s ease both;
}

/* scaleUp */
.owl-fadeUp-in {
    -webkit-animation: scaleUpFrom .5s ease both;
    -moz-animation: scaleUpFrom .5s ease both;
    animation: scaleUpFrom .5s ease both;
}

.owl-fadeUp-out {
    -webkit-animation: scaleUpTo .5s ease both;
    -moz-animation: scaleUpTo .5s ease both;
    animation: scaleUpTo .5s ease both;
}

/* Keyframes */
/*empty*/
@-webkit-keyframes empty {
    0% {
        opacity: 1;
    }
}

@-moz-keyframes empty {
    0% {
        opacity: 1;
    }
}

@keyframes empty {
    0% {
        opacity: 1;
    }
}

@-webkit-keyframes fadeIn {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@-moz-keyframes fadeIn {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

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

    100% {
        opacity: 1;
    }
}

@-webkit-keyframes fadeOut {
    0% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

@-moz-keyframes fadeOut {
    0% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

@keyframes fadeOut {
    0% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

@-webkit-keyframes backSlideOut {
    25% {
        opacity: .5;
        -webkit-transform: translateZ(-500px);
    }

    75% {
        opacity: .5;
        -webkit-transform: translateZ(-500px) translateX(-200%);
    }

    100% {
        opacity: .5;
        -webkit-transform: translateZ(-500px) translateX(-200%);
    }
}

@-moz-keyframes backSlideOut {
    25% {
        opacity: .5;
        -moz-transform: translateZ(-500px);
    }

    75% {
        opacity: .5;
        -moz-transform: translateZ(-500px) translateX(-200%);
    }

    100% {
        opacity: .5;
        -moz-transform: translateZ(-500px) translateX(-200%);
    }
}

@keyframes backSlideOut {
    25% {
        opacity: .5;
        transform: translateZ(-500px);
    }

    75% {
        opacity: .5;
        transform: translateZ(-500px) translateX(-200%);
    }

    100% {
        opacity: .5;
        transform: translateZ(-500px) translateX(-200%);
    }
}

@-webkit-keyframes backSlideIn {

    0%, 25% {
        opacity: .5;
        -webkit-transform: translateZ(-500px) translateX(200%);
    }

    75% {
        opacity: .5;
        -webkit-transform: translateZ(-500px);
    }

    100% {
        opacity: 1;
        -webkit-transform: translateZ(0) translateX(0);
    }
}

@-moz-keyframes backSlideIn {

    0%, 25% {
        opacity: .5;
        -moz-transform: translateZ(-500px) translateX(200%);
    }

    75% {
        opacity: .5;
        -moz-transform: translateZ(-500px);
    }

    100% {
        opacity: 1;
        -moz-transform: translateZ(0) translateX(0);
    }
}

@keyframes backSlideIn {

    0%, 25% {
        opacity: .5;
        transform: translateZ(-500px) translateX(200%);
    }

    75% {
        opacity: .5;
        transform: translateZ(-500px);
    }

    100% {
        opacity: 1;
        transform: translateZ(0) translateX(0);
    }
}

@-webkit-keyframes scaleToFade {
    to {
        opacity: 0;
        -webkit-transform: scale(.8);
    }
}

@-moz-keyframes scaleToFade {
    to {
        opacity: 0;
        -moz-transform: scale(.8);
    }
}

@keyframes scaleToFade {
    to {
        opacity: 0;
        transform: scale(.8);
    }
}

@-webkit-keyframes goDown {
    from {
        -webkit-transform: translateY(-100%);
    }
}

@-moz-keyframes goDown {
    from {
        -moz-transform: translateY(-100%);
    }
}

@keyframes goDown {
    from {
        transform: translateY(-100%);
    }
}

@-webkit-keyframes scaleUpFrom {
    from {
        opacity: 0;
        -webkit-transform: scale(1.5);
    }
}

@-moz-keyframes scaleUpFrom {
    from {
        opacity: 0;
        -moz-transform: scale(1.5);
    }
}

@keyframes scaleUpFrom {
    from {
        opacity: 0;
        transform: scale(1.5);
    }
}

@-webkit-keyframes scaleUpTo {
    to {
        opacity: 0;
        -webkit-transform: scale(1.5);
    }
}

@-moz-keyframes scaleUpTo {
    to {
        opacity: 0;
        -moz-transform: scale(1.5);
    }
}

@keyframes scaleUpTo {
    to {
        opacity: 0;
        transform: scale(1.5);
    }
}

/*video*/
.vwrap {
    display: none;
    z-index: 1040;
    width: 100%;
    position: fixed;
}

    .vwrap .videobtg {
        z-index: 900;
        position: fixed;
        width: 100%;
        height: 100%;
        left: 0;
        top: 0;
        background: #333;
        opacity: 0.8;
        filter: alpha(opacity=80);
        overflow: hidden;
    }

    .vwrap .videobox {
        z-index: 990;
        width: 800px;
        height: 500px;
        background-color: #fff;
        position: fixed;
        left: 50%;
        top: 50%;
        margin-top: -250px;
        margin-left: -400px;
    }

        .vwrap .videobox #videobox {
            width: 100%;
            display: inline-block;
            height: 100%;
            background: #fff;
        }

#videobox_wrapper {
    height: 100% !important;
}

.vwrap .close {
    z-index: 999;
    width: 30px;
    height: 30px;
    cursor: pointer;
    position: absolute;
    top: 0px;
    right: -45px;
}

    .vwrap .close i {
        display: block;
        width: 30px;
        height: 30px;
        background: url(../images/closebtn.png) no-repeat 50% 50%;
        -webkit-transition: 400ms;
        transition: 400ms;
    }

    .vwrap .close:hover i {
        -webkit-transform: rotate(180deg);
        -ms-transform: rotate(180deg);
        transform: rotate(180deg);
    }

#videobox_display_button,
#videocontainer_display_button {
    background: none no-repeat !important;
}

.jwplayer .jwicon {
    opacity: 0.8;
    filter: alpha(opacity=80);
    cursor: pointer;
    background: url(../images/vico.png) no-repeat !important;
    width: 53px !important;
    height: 46px !important;
    transform: rotate(0deg) !important;
}

    .jwplayer .jwicon:hover {
        opacity: 1;
        filter: alpha(opacity=100);
    }

.jwlogo,
.jwclick {
    display: none !important;
}


/*video style end*/
/*index style*/
.banner a:link,
.banner a:visited {
    color: #fff;
}

.banner a:active,
.banner a:hover {
    color: #fff;
}

.banner {
    position: relative;
    overflow: hidden;
    width: 100%;
    background-color: #f5f5f5;
}

    .banner .item {
        position: relative;
        overflow: hidden;
    }

        .banner .item .pimg {
            width: 100%;
            display: block;
        }

.binbox {
    display: none;
    width: 80%;
    position: absolute;
    left: 10%;
    top: 30%;
}

    .binbox .t {
        color: #e2183e;
        font-size: 55px;
        line-height: 1;
        overflow: hidden;
    }

    .binbox .c {
        color: #727272;
        font: 22px/1.5 "microsoft yahei";
        margin-top: 20px;
        overflow: hidden;
        text-transform: uppercase;
    }

    .binbox .bot {
        width: 0px;
        height: 1px;
        overflow: hidden;
        margin: 25px auto 15%;
        display: none;
        background-color: #fff;
        position: relative;
    }

        .binbox .bot span {
            position: absolute;
            left: 0px;
            top: 0px;
            background-color: #0294a3;
            height: 1px;
        }

    .binbox .more {
        margin: 14% 0px 0px 0px;
        opacity: 0;
        transform: translate(0px, 20%);
        -webkit-transform: translate(0px, 20%);
        -webkit-transition: 0.6s;
        transition: 0.6s;
        border-color: #dc2858;
    }

        .binbox .more:hover {
            border-color: #dc2858;
        }

            .binbox .more .i1,
            .binbox .more:hover .i1 {
                color: #dc2858;
            }

        .binbox .more .i2 {
            border-color: transparent transparent transparent #fce7ee;
        }

        .binbox .more .i3 {
            border-color: transparent #fce7ee transparent transparent;
        }

    .binbox p span {
        display: block;
        opacity: 0;
        transform: translate(0px, 100%);
        -webkit-transform: translate(0px, 100%);
        -webkit-transition: 0.6s;
        transition: 0.6s;
    }

    .binbox .bot {
        -webkit-transition: 0.5s ease 0s;
        transition: 0.5s ease 0s;
    }

.banner .flex-active-slide .binbox p span {
    opacity: 1;
    transform: translate(0px, 0px);
    -webkit-transform: translate(0px, 0px);
    -webkit-transition: 0.6s ease 0.7s;
    transition: 0.6s ease 0.7s;
}

.banner .flex-active-slide .binbox p.c span {
    -webkit-transition: 0.6s ease 0.8s;
    transition: 0.6s ease 0.8s;
}

.banner .flex-active-slide .binbox .bot {
    width: 60px;
    -webkit-transition: 0.5s ease 0.8s;
    transition: 0.5s ease 0.8s;
}

.banner .flex-active-slide .binbox .more {
    opacity: 1;
    transform: translate(0px, 0px);
    -webkit-transform: translate(0px, 0px);
    -webkit-transition: 0.6s ease 0.9s;
    transition: 0.6s ease 0.9s;
}

.banner .flex-control-nav {
    height: 8px;
    bottom: 8%;
    position: absolute;
    width: 100%;
    left: 0px;
    z-index: 99;
    text-align: center;
    margin-top: 0px;
}

.banner .flex-control-paging li a {
    height: 8px;
    line-height: 8px;
    width: 24px;
    border-radius: 4px;
    display: inline-block;
    overflow: hidden;
    background-color: #e3b6ba;
    cursor: pointer;
}

    .banner .flex-control-paging li a span {
        height: 8px;
        line-height: 8px;
        width: 0px;
        display: block;
        overflow: hidden;
        cursor: pointer;
        background-color: #e60012;
    }

    .banner .flex-control-paging li a.flex-active span {
        -moz-animation: a_slidercurrent 5s linear;
        -webkit-animation: a_slidercurrent 5s linear;
        -o-animation: a_slidercurrent 5s linear;
        animation: a_slidercurrent 5s linear;
    }

    .banner .flex-control-paging li a.flex-active,
    .banner .flex-control-paging li a:hover {
        background-color: #f8616d;
    }

@-moz-keyframes a_slidercurrent {
    from {
        width: 0%;
    }

    to {
        width: 100%;
    }
}

@-webkit-keyframes a_slidercurrent {
    from {
        width: 0%;
    }

    to {
        width: 100%;
    }
}

@-o-keyframes a_slidercurrent {
    from; {
        width: 0%;
    }

    to {
        width: 100%;
    }
}

@keyframes a_slidercurrent {
    from {
        width: 0%;
    }

    to {
        width: 100%;
    }
}

.more {
    border: 1px solid #fff;
    width: 204px;
    height: 48px;
    line-height: 48px;
    font-size: 14px;
    text-align: center;
    display: block;
    position: relative;
    overflow: hidden;
}

    .more .i2 {
        width: 0;
        height: 0;
        -webkit-transform: rotate(360deg);
        border-style: solid;
        border-width: 0 0 0 0;
        border-color: transparent transparent transparent #cf0418;
        position: absolute;
        bottom: 0;
        left: 0;
        -webkit-transition: all 0.5s;
        -moz-transition: all 0.5s;
        transition: all 0.5s;
    }

    .more .i3 {
        width: 0;
        height: 0;
        -webkit-transform: rotate(360deg);
        border-style: solid;
        border-width: 0 0 0 0;
        border-color: transparent #fff transparent transparent;
        position: absolute;
        top: 0;
        right: 0;
        -webkit-transition: all 0.5s;
        -moz-transition: all 0.5s;
        transition: all 0.5s;
    }

    .more .i1 {
        position: relative;
        z-index: 2;
        -webkit-transition: all 0.3s;
        -moz-transition: all 0.3s;
        transition: all 0.3s;
        color: #fff;
    }

    .more:hover {
        border-color: #fff;
    }

        .more:hover .i1 {
            color: #323232;
        }

        .more:hover .i2 {
            border-width: 140px 0 0 140px;
        }

        .more:hover .i3 {
            border-width: 0 140px 140px 0;
        }

.iboxList {
    position: relative;
    overflow: hidden;
    padding: 15px 0px 0px 30px;
    background-color: #F5F5F5;
}

    .iboxList dd {
        float: left;
        display: block;
        width: 25%;
        overflow: hidden;
    }

        .iboxList dd .item {
            margin-left: 5px;
            background-color: #fff;
            /* height: 372px;*/
        }

    .iboxList .picBox a:link,
    .iboxList .picBox a:visited {
        color: #333;
    }

    .iboxList .picBox a:active,
    .iboxList .picBox a:hover {
        color: #fff;
    }

    .iboxList .picBox a {
        width: 100%;
        display: block;
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center center;
        display: block;
        /* height: 372px;*/
        position: relative;
        overflow: hidden;
    }

    .iboxList .picBox .img {
        width: 100%;
        display: block;
    }

    .iboxList .picBox .name {
        font-size: 18px;
        position: absolute;
        left: 5%;
        top: 2%;
        font-weight: bold;
    }

    .iboxList .picBox .bg {
        background-color: #d33f46;
        opacity: 0;
        filter: alpha(opacity=0);
        width: 100%;
        height: 0%;
        opacity: 0;
        position: absolute;
        left: 0px;
        top: 50%;
    }

.trans {
    -webkit-transition: 0.4s;
    -moz-transition: 0.4s;
    -o-transition: 0.4s;
    transition: 0.4s;
}

.iboxList .picBox:hover .img {
    transform: scale(1.1);
    -webkit-transform: scale(1.1);
}

.iboxList .picBox:hover .bg {
    height: 100%;
    top: 0%;
    opacity: 0.5;
    filter: alpha(opacity=50);
}

.newIimg a:link,
.newIimg a:visited {
    color: #323232;
}

.newIimg a:active,
.newIimg a:hover {
    color: #323232;
}

.newIimg {
    position: absolute;
    right: 0px;
    height: 100%;
}

.newIbox {
    padding: 0px 25px;
    position: relative;
    height: 100%;
    margin: 0px 5px;
    background-color: #fff;
}

.newIimgDemo {
    position: relative;
    height: 100%;
}

    .newIimgDemo .slick-list,
    .newIimgDemo .slick-track {
        height: 100%;
    }

.newIimg .itembox {
    height: 100%;
    position: relative;
    overflow: hidden;
}

    .newIimg .itembox a {
        display: block;
        position: relative;
        height: 100%;
    }

.newIimg .img {
    padding-top: 25px;
    overflow: hidden;
}

    .newIimg .img img {
        width: 100%;
        display: block;
    }

.newIimg .con {
    padding-top: 14px;
    height: 76px;
    background-color: #fff;
    position: absolute;
    left: 0px;
    bottom: 25px;
    width: 100%;
}

    .newIimg .con .t {
        color: #b4b4b4;
        margin-bottom: 12px;
    }

        .newIimg .con .t .time {
            color: #646464;
        }

    .newIimg .con .c {
        font: bold 14px/1.5 "microsoft yahei";
        text-transform: uppercase;
        overflow: hidden;
    }

.newIimgDemo .slick-arrow {
    background: url(../images/img_lbtn.png) no-repeat scroll center center;
    width: 29px;
    height: 29px;
    z-index: 10;
    top: 50%;
    margin-top: -62px;
}

    .newIimgDemo .slick-arrow span {
        width: 100%;
        height: 100%;
        display: block;
        transition: 600ms;
        -webkit-transition: 600ms;
    }

.newIimgDemo .slick-prev {
    left: 8px;
}

.newIimgDemo .slick-next {
    right: 8px;
}

.newIimgDemo .slick-prev span {
    background: url(../images/imgl.png) no-repeat;
}

.newIimgDemo .slick-next span {
    background: url(../images/imgr.png) no-repeat;
}

.newIimgDemo .slick-prev:hover,
.newIimgDemo .slick-next:hover {
    background-image: url(../images/img_lbtn2.png);
}

    .newIimgDemo .slick-prev:hover span {
        transform: translateX(-5px);
        -webkit-transform: translateX(-5px);
    }

    .newIimgDemo .slick-next:hover span {
        transform: translateX(5px);
        -webkit-transform: translateX(5px);
    }

.bgf5 {
    background-color: #F5F5F5;
}

.iboxT a:link,
.iboxT a:visited {
    color: #323232;
}

.iboxT a:active,
.iboxT a:hover {
    color: #E60012;
}

.iboxT {
    padding: 3% 0px 3%;
    text-align: center;
    color: #b4b4b4;
}

    .iboxT .zh {
        font: 45px/1.4 "microsoft yahei";
        color: #cd000f;
        margin-bottom: 15px;
    }

    .iboxT .mz {
        color: #b4b4b4;
        letter-spacing: 4px;
        text-transform: uppercase;
        position: relative;
        padding: 0px 15px;
    }

        .iboxT .mz .i1,
        .iboxT .mz .i2 {
            height: 1px;
            background-color: #d2d2d2;
            position: absolute;
            top: 50%;
            width: 112px;
            overflow: hidden;
            display: block;
        }

        .iboxT .mz .i1 {
            right: 100%;
        }

        .iboxT .mz .i2 {
            left: 100%;
        }

.moreR {
    position: absolute;
    right: 0px;
    bottom: 0%;
    display: block;
    width: 236px;
    padding: 0px 18px;
    height: 70px;
    line-height: 70px;
    font-size: 14px;
    color: #323232;
    background-color: #ffffff;
    z-index: 10;
}

    .moreR .ico {
        background: url(../images/more_rico.png) no-repeat center right;
        background-size: 60%;
        width: 24px;
        height: 24px;
        position: absolute;
        right: 18px;
        top: 50%;
        margin-top: -12px;
    }

    .moreR:hover {
        background-color: #cd000f;
        color: #fff;
    }

        .moreR:hover .ico {
            right: 8px;
            background-image: url(../images/more_rico2.png);
        }

.productIpage {
    position: relative;
}

.productIdemo .black {
    position: absolute;
    left: 0px;
    top: 0px;
    width: 50%;
    height: 100%;
    background: url(../images/black_2.png) repeat;
    background: none rgba(0, 0, 0, 0.2);
}

.productIList {
    padding: 3% 0;
}

    .productIList a:link,
    .productIList a:visited {
        color: #fff;
    }

    .productIList a:active,
    .productIList a:hover {
        color: #fff;
    }

    .productIList dd {
        color: #fff;
    }

    .productIList a {
        position: relative;
        padding-left: 20%;
        height: 150px;
        display: block;
        float: left;
    }

    .productIList .red-bg {
        position: absolute;
        left: 0px;
        top: 0px;
        width: 0%;
        height: 100%;
        background: url(../images/red_2.png) repeat;
        background: none rgba(211, 63, 70, 0.9);
        transition: 300ms;
        -webkit-transition: 300ms;
    }

    .productIList .ico {
        width: 140px;
        height: 80px;
        position: absolute;
        left: 0px;
        top: 0px;
        padding: 35px 0px;
    }

        .productIList .ico .bg {
            position: absolute;
            width: 100%;
            height: 100%;
            background-color: #d33f46;
            left: 0px;
            top: 0px;
            transform: scale(0.5) rotate(0);
            -webkit-transform: scale(0.5) rotate(0);
            -moz-transform: scale(0.5) rotate(0);
            opacity: 0;
            transition: 600ms;
            -webkit-transition: 600ms;
        }

        .productIList .ico .i {
            margin: 0px auto;
            position: relative;
            z-index: 5px;
            display: block;
        }

        .productIList .ico .i1 {
            background: url(../images/ico3.png);
            width: 70px;
            height: 68px;
        }

        .productIList .ico .i2 {
            background: url(../images/ico10.png);
            width: 70px;
            height: 70px;
        }

        .productIList .ico .i3 {
            background: url(../images/ico.png);
            width: 70px;
            height: 64px;
        }

    .productIList .con {
        display: block;
        padding: 0px 140px 0px 208px;
        width: 508px;
        position: relative;
        height: 150px;
    }

    .productIList .t {
        font-size: 16px;
        line-height: 1.5;
        padding: 62px 0px 20px;
        transition: 300ms;
        -webkit-transition: 300ms;
    }

        .productIList .t .zh {
            transition: 300ms;
            -webkit-transition: 300ms;
        }

        .productIList .t .en i {
            padding-left: 5px;
            transition: 300ms;
            -webkit-transition: 300ms;
            margin: 0px 5px 0px 22px;
        }

    .productIList .c {
        height: 25px;
        overflow: hidden;
        transition: 300ms;
        -webkit-transition: 300ms;
        opacity: 0;
        visibility: hidden;
    }

    .productIList .line {
        display: block;
        background: #fff;
        position: absolute;
        transition: 300ms;
        -webkit-transition: 300ms;
        opacity: 0;
        visibility: hidden;
    }

    .productIList .line_1 {
        width: 28px;
        height: 1px;
        top: 50%;
        right: 57px;
        margin-top: -1px;
        transform: translateX(30px);
        -webkit-transform: translateX(30px);
    }

    .productIList .line_2 {
        width: 1px;
        height: 28px;
        top: 50%;
        margin-top: -14px;
        right: 70px;
        transform: translateY(30px);
        -webkit-transform: translateY(30px);
    }

    .productIList a:hover .red-bg {
        width: 100%;
        transition: 600ms;
        -webkit-transition: 600ms;
    }

    .productIList a:hover .line {
        transform: translate(0);
        -webkit-transform: translate(0);
        visibility: visible;
        opacity: 1;
        transition: 300ms ease-in 600ms;
        -webkit-transition: 300ms ease-in 600ms;
    }

    .productIList a:hover .ico .bg {
        transform: scale(1) rotate(180deg);
        -webkit-transform: scale(1) rotate(180deg);
        -moz-transform: scale(1) rotate(180deg);
        opacity: 1;
    }

    .productIList a:hover .t {
        padding-top: 30px;
    }

        .productIList a:hover .t .zh {
            font-size: 22px;
        }

        .productIList a:hover .t .en i {
            padding-left: 42px;
        }

    .productIList a:hover .c {
        opacity: 1;
        visibility: visible;
    }

.telbox a:link,
.telbox a:visited {
    color: #cd000f;
}

.telbox a:active,
.telbox a:hover {
    color: #cd000f;
}

.telbox {
    text-align: center;
    color: #646464;
    background-color: #e0e0e0;
    padding: 20px 0px;
    overflow: hidden;
}

    .telbox .tel {
        padding-left: 45px;
        display: inline-block;
    }

    .telbox .tel {
        font: 40px/1.4 "humanist_521_lightregular", "microsoft yahei";
        -webkit-animation: telc 1s linear infinite;
        animation: telc 1s linear infinite;
        color: #cd000f;
    }

@-webkit-keyframes telc {
    0% {
        -webkit-transform: scale(1);
    }

    25% {
        -webkit-transform: scale(1.08);
    }

    50% {
        -webkit-transform: scale(1.15);
    }

    75% {
        -webkit-transform: scale(1.08);
    }

    100% {
        -webkit-transform: scale(1);
    }
}

@-moz-keyframes telc {
    0% {
        -moz-transform: scale(1);
    }

    25% {
        -moz-transform: scale(1.08);
    }

    50% {
        -moz-transform: scale(1.15);
    }

    75% {
        -moz-transform: scale(1.08);
    }

    100% {
        -moz-transform: scale(1);
    }
}

@keyframes telc {
    0% {
        transform: scale(1);
    }

    25% {
        transform: scale(1.08);
    }

    50% {
        transform: scale(1.15);
    }

    75% {
        transform: scale(1.08);
    }

    100% {
        transform: scale(1);
    }
}

.serviceIlist a:link,
.serviceIlist a:visited {
    color: #787878;
}

.serviceIlist a:active,
.serviceIlist a:hover {
    color: #fff;
}

.serviceIlist {
    width: 1110px;
    margin: 52px auto 0px;
}

    .serviceIlist dd {
        float: left;
        display: block;
        width: 25%;
        margin-bottom: 35px;
    }

    .serviceIlist a {
        width: 193px;
        height: 193px;
        position: relative;
        margin: 0px auto;
        display: block;
    }

    .serviceIlist .y1 {
        background: url(../images/y1.png) no-repeat;
    }

    .serviceIlist .y2 {
        background: url(../images/y2.png) no-repeat;
    }

    .serviceIlist .y1,
    .serviceIlist .y2 {
        position: absolute;
        left: 0px;
        top: 0px;
        width: 100%;
        height: 100%;
        transition: all 0.5s ease 0s;
        -webkit-transform: all 0.5s ease 0s;
        z-index: 1;
    }

    .serviceIlist .y2 {
        opacity: 0;
        transform: scale(0.7);
        -webkit-transform: scale(0.7);
        visibility: hidden;
    }

    .serviceIlist .txt {
        position: absolute;
        top: 15%;
        z-index: 2;
        left: 0px;
        width: 100%;
        text-align: center;
    }

    .serviceIlist .ico {
        width: 80px;
        height: 80px;
        margin: 0px auto;
        display: block;
        background: url(../images/ico2.png) no-repeat;
        z-index: 3;
        -webkit-transition: 0.4s;
        transition: 0.4s;
    }

    .serviceIlist .bot {
        width: 0px;
        height: 1px;
        background-color: #fff;
        margin: 5px auto 15px;
        display: block;
    }

    .serviceIlist .lin1 .ico {
        background-position: 0px 0px;
    }

    .serviceIlist .lin2 .ico {
        background-position: 0px -80px;
    }

    .serviceIlist .lin3 .ico {
        background-position: 0px -160px;
    }

    .serviceIlist .lin4 .ico {
        background-position: 0px -240px;
    }

    .serviceIlist .lin1 a:hover .ico {
        background-position: -80px 0px;
    }

    .serviceIlist .lin2 a:hover .ico {
        background-position: -80px -80px;
    }

    .serviceIlist .lin3 a:hover .ico {
        background-position: -80px -160px;
    }

    .serviceIlist .lin4 a:hover .ico {
        background-position: -80px -240px;
    }

    .serviceIlist a:hover .bot {
        width: 80px;
    }

    .serviceIlist a:hover .y1 {
        opacity: 0;
        transform: scale(1.3);
        -webkit-transform: scale(1.3);
    }

    .serviceIlist a:hover .y2 {
        opacity: 1;
        transform: scale(1);
        -webkit-transform: scale(1);
        visibility: visible;
    }

.serviceIcon {
    width: 670px;
    margin: 0px auto;
    text-align: center;
    color: #969696;
    line-height: 1.5;
    padding-bottom: 36px;
}

    .serviceIcon a:link,
    .serviceIcon a:visited {
        color: #323232;
    }

    .serviceIcon a:active,
    .serviceIcon a:hover {
        color: #E60012;
    }

.transbg {
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    background-attachment: fixed;
}

/*.aboutIbox{ padding-bottom: 50px;}*/
.companyIpage {
    padding: 5% 0px 12%;
    position: relative;
}

.companyIbox .yy {
    background: url(../images/yy.png) repeat;
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0px;
    top: 0px;
}

.companyIbox a:link,
.companyIbox a:visited {
    color: #333;
}

.companyIbox a:active,
.companyIbox a:hover {
    color: #333;
}

.cinner {
    width: 1100px;
    margin: 0px auto;
}

.companyIbox .cinner {
    margin: 0px auto;
    position: relative;
    z-index: 2;
}

.companyIbox .t {
    font: bold 50px/1.2 "microsoft yahei";
    color: #cf0418;
    margin-bottom: 20px;
}

.companyIbox .c {
    color: #333;
    width: 70%;
}

.companyIbox .more {
    width: 120px;
    height: 40px;
    line-height: 40px;
    position: absolute;
    left: 0px;
    bottom: -50px;
    border-color: #333;
    border-color: rgba(0, 0, 0, 0.8);
}

    .companyIbox .more .i1 {
        color: #333;
    }

.aboutType {
    position: relative;
    top: -110px;
}

    .aboutType dd {
        float: left;
        display: block;
        width: 50%;
    }

.responsibilityIbox a:link,
.responsibilityIbox a:visited {
    color: #333;
}

.responsibilityIbox a:active,
.responsibilityIbox a:hover {
    color: #333;
}

.responsibilityIbox a {
    display: block;
    height: 205px;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
    position: relative;
}

.responsibilityIbox .t {
    position: absolute;
    left: 5%;
    top: 18px;
}

.responsibilityIbox .ico {
    width: 34px;
    height: 34px;
    position: absolute;
    left: 50%;
    top: 50%;
    margin: -17px 0px 0px -17px;
}

.responsibilityIbox .bg {
    background-color: #e60012;
    border-radius: 50%;
    position: absolute;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
}

.responsibilityIbox .i {
    background: url(../images/more_i2.png) no-repeat scroll center center;
    width: 11px;
    height: 11px;
    display: block;
    position: absolute;
    left: 50%;
    top: 50%;
    margin: -5px 0px 0px -5px;
}

.responsibilityIbox:hover .bg {
    transform: scale(1.4);
    -webkit-transform: scale(1.4);
}

.responsibilityIbox:hover .i {
    -moz-transform: rotate(90deg);
    -webkit-transform: rotate(90deg);
    -o-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    transform: rotate(90deg);
}

.historyIbox {
    height: 205px;
    background-color: #fff;
    padding: 0px 5%;
}

    .historyIbox .t {
        padding-top: 18px;
        color: #333;
        margin-bottom: 50px;
    }

    .historyIbox a:link,
    .historyIbox a:visited {
        color: #646464;
    }

    .historyIbox a:active,
    .historyIbox a:hover {
        color: #333;
    }

.historyIlist li {
    float: left;
    display: block;
    width: 19%;
    text-align: left;
    line-height: 50px;
}

    .historyIlist li:last-child {
        width: 23%;
    }

.historyIlist .item {
    color: #646464;
}

.historyIlist li.lin1 .item {
    padding-left: 0px;
}

.historyIlist li.lin2 .item {
    margin: 0px auto;
}

/*.historyIlist li.lin4 .item { float: right; width: auto; }*/
.historyIlist .year {
    color: #cd000f;
    font: 25px/1.2 "humanist_521_lightregular", "microsoft yahei";
    display: block;
    font-style: italic;
    font-weight: bold;
}

.brandIbox {
    position: relative;
}

    .brandIbox .moreBot {
        padding: 0px 5%;
        position: relative;
        height: 36px;
        line-height: 36px;
        color: #fff;
        background-color: #cd000f;
        -webkit-transform: perspective(600px) rotateX(-90deg);
        -moz-transform: perspective(600px) rotateX(-90deg);
        -ms-transform: perspective(600px) rotateX(-90deg);
        transform: perspective(600px) rotateX(-90deg);
        -webkit-transform-origin: center top 0;
        -moz-transform-origin: center top 0;
        -ms-transform-origin: center top 0;
        transform-origin: center top 0;
        -webkit-transform-style: preserve-3d;
        -moz-transform-style: preserve-3d;
        -ms-transform-style: preserve-3d;
        transform-style: preserve-3d;
        -webkit-transition: all .3s ease 0s;
        -moz-transition: all .3s ease 0s;
        -ms-transition: all .3s ease 0s;
        transition: all .3s ease 0s;
        visibility: hidden;
    }

        .brandIbox .moreBot .i {
            background: url(../images/more_i2.png) no-repeat;
            width: 17px;
            height: 17px;
            position: absolute;
            top: 50%;
            margin-top: -8px;
            right: 5%;
        }

    .brandIbox .brandA {
        position: absolute;
        display: block;
        position: absolute;
        left: 0px;
        top: 0px;
        width: 100%;
        height: 100%;
    }

    .brandIbox:hover .moreBot {
        visibility: visible;
        -webkit-transform: perspective(600px) rotateX(0deg);
        -moz-transform: perspective(600px) rotateX(0deg);
        -ms-transform: perspective(600px) rotateX(0deg);
        transform: perspective(600px) rotateX(0deg);
    }

.storyPageIbox .pageC {
    text-align: center;
    margin: 0px auto;
}

.storyPageIboxt {
    border: 2px solid #cd000f;
    padding: 30px 48px 60px;
    width: 374px;
    position: relative;
    top: -76px;
    background-color: #fff;
}

    .storyPageIboxt .mz {
        font: 20px/1.5 "humanist_521_lightregular", "microsoft yahei";
        color: #969696;
        text-transform: uppercase;
    }

    .storyPageIboxt .t {
        font-size: 30px;
        color: #cd000f;
    }

    .storyPageIboxt .bot {
        height: 4px;
        background-color: #cd000f;
        width: 44px;
        margin-bottom: 32px;
    }

    .storyPageIboxt .c {
        color: #787878;
    }

.storyPageIbox {
    position: relative;
    padding-bottom: 80px;
}

    .storyPageIbox .moreR {
        background-color: #cd000f;
        color: #fff;
        bottom: 74px;
    }

        .storyPageIbox .moreR .ico {
            background-image: url(../images/more_rico2.png);
        }

/*.storyPageIDL dd { margin-bottom: 5%; }*/
.storyPageIDL .img {
    float: right;
    display: block;
    width: 40%;
}

    .storyPageIDL .img img {
        width: 100%;
        display: block;
    }

.storyPageIDL .con {
    float: left;
    display: block;
    width: 60%;
    margin-top: 128px;
    background-color: #eeeeee;
    position: relative;
    height: 395px;
}

    .storyPageIDL .con .imgP {
        position: absolute;
        bottom: 0px;
        right: 10%;
    }

    .storyPageIDL .con .year {
        font: 50px/1.2 "humanist_521_lightregular", "microsoft yahei";
        color: #323232;
        position: absolute;
        top: -80px;
        left: 32%;
    }

    .storyPageIDL .con .txt {
        width: 300px;
        position: absolute;
        left: 34%;
        z-index: 10;
        top: 60px;
    }

        .storyPageIDL .con .txt .t {
            font-size: 20px;
            margin-bottom: 10px;
            color: #cd000f;
        }

.storyPageIDL .two .con .imgP {
    right: auto;
    left: 10%;
}

.storyPageIDL .two .con .year {
    width: 470px;
    left: auto;
    right: 4%;
}

.storyPageIDL .two .con .txt {
    width: 400px;
    left: auto;
    right: 10%;
}

/*index style end*/
/*news style*/
.firstNewBox a:link,
.firstNewBox a:visited {
    color: #333;
}

.firstNewBox a:active,
.firstNewBox a:hover {
    color: #CD000F;
}

.firstNewBox {
    padding: 70px 0px;
}

    .firstNewBox .item {
        display: block;
        position: relative;
    }

    .firstNewBox .img {
        float: right;
        display: block;
        width: 50%;
        margin-right: 5%;
        overflow: hidden;
    }

        .firstNewBox .img img {
            width: 100%;
            display: block;
        }

    .firstNewBox .con {
        float: left;
        display: block;
        width: 30%;
        margin-left: 5%;
    }

        .firstNewBox .con .t {
            font-size: 28px;
            line-height: 1.4;
        }

.infoI {
    padding: 6% 0px;
    color: #646464;
}

    .infoI span {
        color: #333;
        padding-right: 10px;
    }

    .infoI .esay {
        background: url(../images/seay.png) no-repeat scroll left center;
        padding-left: 28px;
    }

.firstNewBox .con .c {
    height: 76px;
    overflow: hidden;
    color: #333;
}

.firstNewBox .con .more {
    border-color: #cdcdcd;
    position: absolute;
    left: 5%;
    bottom: 0px;
    height: 36px;
    line-height: 36px;
    width: 190px;
}

    .firstNewBox .con .more .i2 {
        border-color: transparent transparent transparent #cdcdcd;
    }

    .firstNewBox .con .more .i3 {
        border-color: transparent #cdcdcd transparent transparent;
    }

    .firstNewBox .con .more .i1 {
        color: #333;
    }

.firstNewBox .slick-dots {
    bottom: 90px;
    text-align: right;
    width: 90%;
    left: 5%;
}

    .firstNewBox .slick-dots li {
        position: relative;
        display: inline-block;
        margin: 0px 20px 0px 0px;
        width: 57px;
        height: 7px;
        padding: 0px;
        cursor: pointer;
    }

        .firstNewBox .slick-dots li a {
            transition: 400ms;
            -webkit-transition: 400ms;
            -ms-transition: 400ms;
            height: 7px;
            width: 57px;
            line-height: 7px;
            text-indent: -10em;
            display: block;
            overflow: hidden;
            padding: 0px;
            cursor: pointer;
            background-color: #c9c9c9;
            border-radius: 0;
        }

            .firstNewBox .slick-dots li a:focus {
                outline: none;
            }

        .firstNewBox .slick-dots li.slick-active a {
            background-color: #E60012;
        }

/*
.bgf8 { background-color: #f8f8f8; }
.newList { padding: 70px 5%; }
*/
.newUl a:link,
.newUl a:visited {
    color: #333;
}

.newUl a:active,
.newUl a:hover {
    color: #CD000F;
}

.newUl li {
    float: left;
    width: 32%;
    margin-right: 2%;
    position: relative;
    margin-bottom: 42px;
}

    .newUl li:nth-child(3n) {
        margin-right: 0%;
    }

.newUl .img {
    overflow: hidden;
}

    .newUl .img img {
        width: 100%;
        display: block;
    }

.newUl .con {
    height: 103px;
    overflow: hidden;
    padding: 0px 5%;
    background-color: #fff;
}

    .newUl .con .c {
        padding-top: 12px;
        height: 29px;
        overflow: hidden;
        margin-bottom: 25px;
        font-size: 16px;
    }

    .newUl .con .i {
        font-size: 12px;
        color: #646464;
    }

        .newUl .con .i .name {
            color: #b4b4b4;
        }

    .newUl .con .ico {
        background: url(../images/more_i3.png) no-repeat;
        width: 14px;
        height: 14px;
        position: absolute;
        right: 12px;
        bottom: 17px;
        display: block;
        transform: translateX(-20px);
        -webkit-transform: translateX(-20px);
        opacity: 0;
    }

.newUl .bot {
    position: absolute;
    left: 0px;
    bottom: 0px;
    background-color: #e60012;
    height: 3px;
    width: 0px;
}

.newUl a:hover .img img {
    transform: scale(1.1);
    -webkit-transform: scale(1.1);
}

.newUl a:hover .bot {
    width: 100%;
}

.newUl a:hover .ico {
    transform: translateX(0px);
    -webkit-transform: translateX(0px);
    opacity: 1;
}

.paging {
    text-align: center;
    line-height: 28px;
    padding: 25px 0px;
}

    .paging a,
    .paging span {
        display: inline-block;
        line-height: 26px;
        height: 24px;
        padding: 0px 6px;
        color: #323232;
    }

    .paging span {
        border-bottom: 3px solid #e60012;
    }

    .paging .prev,
    .paging .next {
        border: 1px solid #a0a0a0;
        margin: 0px 20px !important;
        width: 44px;
        line-height: 28px;
        height: 28px;
        text-align: center;
        border-radius: 14px;
        background-repeat: no-repeat;
        background-position: center center;
    }

    .paging .prev {
        background-image: url(../images/paging_l1.png);
    }

    .paging .next {
        background-image: url(../images/paging_r1.png);
    }

    .paging a:link,
    .paging a:visited {
        color: #b4b4b4;
    }

    .paging a:active,
    .paging a:hover {
        color: #e60012 !important;
    }

    .paging .prev:hover {
        background-image: url(../images/paging_l2.png);
        border-color: #e60012;
        background-color: #e60012;
    }

    .paging .next:hover {
        background-image: url(../images/paging_r2.png);
        border-color: #e60012;
        background-color: #e60012;
    }

.ninfoT {
    padding: 55px 0px 65px;
    background-color: #d63241;
    color: #fff;
    text-align: center;
    margin-bottom: 30px;
}

    .ninfoT .t {
        width: 68%;
        font-size: 28px;
        line-height: 1.4;
        margin: 0px auto;
    }

    .ninfoT .infoI {
        padding: 40px 0px 0px;
    }

        .ninfoT .infoI,
        .ninfoT .infoI span {
            color: #fff;
        }

            .ninfoT .infoI .esay {
                background-image: url(../images/seay2.png);
            }

.pageC a:link,
.pageC a:visited {
    color: #323232;
}

.pageC a:active,
.pageC a:hover {
    color: #CD000F;
}

.pageC img {
    max-width: 100%;
}

.ninfoC {
    margin: 32px auto;
    overflow: hidden;
    color: #646464;
    padding-bottom: 50px;
    position: relative;
}

    .ninfoC .pageC {
        width: 860px;
        margin: 0px auto;
    }

        .ninfoC .pageC p,
        .ninfoC .pageC span {
            text-align: justify;
        }

.pager a:link,
.pager a:visited {
    color: #646464;
}

.pager a:active,
.pager a:hover {
    color: #fff;
}

.pager {
    position: absolute;
    right: 0px;
    top: 0px;
    width: 66px;
    left: auto;
}

    .pager a {
        padding: 8px 0px;
        width: 66px;
        display: block;
        text-align: center;
        background-color: #e5e5e5;
        line-height: 1.2;
    }

        .pager a.back {
            color: #fff;
            background-color: #a0a0a0;
        }

        .pager a:hover {
            background-color: #e60012;
        }

.fixed {
    position: fixed;
    z-index: 970;
}

.pager.fixed {
    top: 130px;
    right: 2%;
    transition: 500ms;
    -webkit-transition: 500ms;
}

/*news style*/
/*responsibility style*/
.specialBox .item {
    position: relative;
}

.specialBox .img {
    width: 100%;
    display: block;
}

.specialBox .con {
    position: absolute;
    width: 1100px;
    left: 50%;
    top: 20%;
    color: #fff;
    margin-left: -550px;
    height: 70%;
}

    .specialBox .con .t {
        font-size: 40px;
        line-height: 1.2;
    }

    .specialBox .con .c {
        text-align: right;
        font-size: 30px;
        width: 80%;
    }

.specialBox .more {
    width: 186px;
    position: absolute;
    left: 0px;
    bottom: 0px;
}

.specialBox .slick-dots {
    bottom: 5%;
    text-align: right;
    width: 90%;
    left: 5%;
}

    .specialBox .slick-dots li {
        position: relative;
        display: inline-block;
        margin: 0px 12px 0px 0px;
        height: 7px;
        width: 28px;
        padding: 0px;
        cursor: pointer;
    }

        .specialBox .slick-dots li a {
            transition: 400ms;
            -webkit-transition: 400ms;
            -ms-transition: 400ms;
            height: 7px;
            width: 28px;
            line-height: 7px;
            text-indent: -10em;
            display: block;
            overflow: hidden;
            padding: 0px;
            cursor: pointer;
            background-color: #fff;
            border-radius: 0;
        }

            .specialBox .slick-dots li a:focus {
                outline: none;
            }

        .specialBox .slick-dots li.slick-active a {
            background-color: #E60012;
        }

.responsibilityIpage {
    padding: 70px 0px;
}

    .responsibilityIpage dd {
        float: left;
        display: block;
        height: 314px;
        margin-top: 10px;
    }

    .responsibilityIpage a {
        display: block;
        background-size: cover;
        background-repeat: no-repeat;
        background-position: center center;
        display: block;
        position: relative;
        overflow: hidden;
        width: 100%;
        height: 100%;
    }

        .responsibilityIpage a:link,
        .responsibilityIpage a:visited {
            color: #fff;
        }

        .responsibilityIpage a:active,
        .responsibilityIpage a:hover {
            color: #fff;
        }

    .responsibilityIpage .more {
        width: 122px;
        position: absolute;
        left: 18px;
        bottom: 18px;
    }

        .responsibilityIpage .more:hover .i2 {
            border-width: 90px 0 0 90px;
        }

        .responsibilityIpage .more:hover .i3 {
            border-width: 0 90px 90px 0;
        }

    .responsibilityIpage .name {
        position: absolute;
        left: 0px;
        bottom: 0px;
        background-color: #e0930c;
        font-size: 16px;
        padding: 10px 44px 10px 18px;
    }

    .responsibilityIpage .t {
        margin: 0px 18px;
        padding: 18px 0px 8px;
        border-bottom: 1px solid #fff;
        margin-bottom: 22px;
    }

    .responsibilityIpage .c {
        height: 80px;
        overflow: hidden;
        width: 80%;
        margin: 0px auto;
    }

    .responsibilityIpage .con {
        background: url(../images/red_1.png) repeat;
        position: absolute;
        left: 0px;
        top: 100%;
        width: 100%;
        height: 100%;
    }

.socialPage {
    margin-right: 10px;
}

.socialPage,
.environmentalPage {
    width: 545px;
    height: 307px;
}

.employeePage {
    width: 776px;
    margin-right: 10px;
}

.enterpriseHonorPage {
    width: 312px;
}

.responsibilityIpage .enterpriseHonorPage .name {
    width: 100%;
    padding: 0px;
    color: #323232;
    position: absolute;
    bottom: 50%;
    left: 0px;
    background-color: transparent;
    text-align: center;
    margin-bottom: -25px;
}

.enterpriseHonorPage .name i {
    width: 32px;
    display: block;
    margin: 0px auto;
    height: 1px;
    background-color: #a0a0a0;
}

    .enterpriseHonorPage .name i.i1 {
        margin-bottom: 10px;
    }

    .enterpriseHonorPage .name i.i2 {
        margin-top: 10px;
    }

.enterpriseHonorPage .red-bg {
    background: url(../images/red_2.png) repeat;
    background: none rgba(230, 0, 18, 0.9);
    width: 100%;
    position: absolute;
    left: 0px;
    bottom: 0%;
    height: 0px;
}

.enterpriseHonorPage:hover .name {
    color: #fff;
}

    .enterpriseHonorPage:hover .name i {
        background-color: #fff;
        width: 50px;
    }

.enterpriseHonorPage:hover .red-bg {
    height: 100%;
}

.responsibilityIpage dd:hover .con {
    top: 0px;
}

.standardOne {
    background-color: #eeeeee;
    padding: 50px 0px;
}

    .standardOne .t {
        margin-bottom: 45px;
    }

    .standardOne .name {
        font-size: 32px;
        color: #333000;
        border-bottom: 6px solid #c20513;
        line-height: 1.2;
        padding-bottom: 10px;
    }

    .standardOne .pageC {
        font-size: 16px;
        color: #646464;
    }

.standimg {
    float: right;
    display: block;
    margin-left: 60px;
}

.standardTwo {
    padding: 60px 0px;
}

.standardImg {
    margin-bottom: 30px;
}

    .standardImg .itemA {
        display: block;
        position: relative;
        overflow: hidden;
        color: #fff;
        margin: 0px 5px;
    }

        .standardImg .itemA .black {
            position: absolute;
            left: 0px;
            top: 0px;
            width: 100%;
            height: 100%;
            background: url(../images/black_1.png) repeat;
            background: none rgba(0, 0, 0, 0.5);
            transition: 400ms;
            -webkit-transition: 400ms;
        }

        .standardImg .itemA .ico {
            background: url(../images/fd.png) no-repeat;
            width: 34px;
            height: 34px;
            display: block;
            margin: 35% auto 0%;
        }

    .standardImg .item img {
        width: 100%;
        display: block;
    }

.csstransitions .standardImg .itemA .black {
    opacity: 0;
    transform: scale(0.8);
    -webkit-transform: scale(0.8);
}

.csstransitions .standardImg .itemA:hover .black {
    opacity: 1;
    transform: scale(1);
    -webkit-transform: scale(1);
    display: block;
}

.no-csstransitions .standardImg .itemA .black {
    display: none;
}

.no-csstransitions .standardImg .itemA:hover .black {
    display: block;
}

.standardImg .slick-prev,
.standardImg .slick-next {
    width: 24px;
    height: 24px;
    position: absolute;
    top: 50%;
    margin-top: -12px;
    z-index: 100;
    transition: all 0s ease 0s;
    -webkit-transform: all 0s ease 0s;
}

.standardImg .slick-prev {
    background: url(../images/imgl2.png) no-repeat scroll center center;
    left: -40px;
}

.standardImg .slick-next {
    background: url(../images/imgr2.png) no-repeat scroll center center;
    right: -40px;
}

.standardImg .slick-prev:hover {
    background-image: url(../images/imgl3.png);
}

.standardImg .slick-next:hover {
    background-image: url(../images/imgr3.png);
}

.imgShowBox {
    background: url(../images/black_1.png) repeat;
    background: none rgba(0, 0, 0, 0.7);
    bottom: 0;
    left: 0;
    position: fixed;
    right: 0;
    top: 0;
    transform: translateY(100%);
    transition: all 800ms ease 0s;
    z-index: 1010;
    width: 100%;
    overflow: hidden;
    -webkit-overflow-scrolling: touch;
}

.no-csstransitions .imgShowBox {
    display: none;
}

.imgShowDemo {
    width: 100%;
    height: 100%;
    position: relative;
    overflow: hidden;
}

    .imgShowDemo .item {
        width: 100%;
        height: 100%;
        background-repeat: no-repeat;
        background-position: center;
        position: relative;
        background-size: contain;
    }

    .imgShowDemo .img {
        vertical-align: middle;
        height: auto;
        width: auto;
        max-height: 100%;
        max-width: 100%;
        margin: auto;
        position: absolute;
        left: 0px;
        top: 0px;
        right: 0px;
        bottom: 0px;
    }

    .imgShowDemo .txt {
        background: url(../images/black.png) repeat;
        background: none rgba(0, 0, 0, 0.5);
        font-size: 14px;
        color: #fff;
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        width: 100%;
        padding: 10px 0px;
    }

        .imgShowDemo .txt .i {
            padding: 0px 3%;
        }

.hi-num {
    width: 94%;
    padding: 2px 3%;
    height: 65px;
    background: #272727;
    color: #fff;
    position: absolute;
    bottom: 0;
    right: 0;
    text-align: center;
    line-height: 65px;
    font-size: 16px;
    text-align: right;
}

    .hi-num .name {
        float: left;
    }

.img-show {
    transform: translateY(0) !important;
    -webkit-transform: translateY(0) !important;
}

.no-csstransitions .img-show {
    display: block;
}

.imgShowDemo .slick-prev,
.imgShowDemo .slick-next {
    width: 44px;
    height: 44px;
    position: absolute;
    top: 50%;
    margin-top: -22px;
    z-index: 100;
    transition: all 0s ease 0s;
    -webkit-transform: all 0s ease 0s;
}

.imgShowDemo .slick-prev {
    background: url(../images/img_btn2.png) no-repeat scroll left top;
    left: 3%;
}

.imgShowDemo .slick-next {
    background: url(../images/img_btn2.png) no-repeat scroll right top;
    right: 3%;
}

.imgShowDemo .slick-prev:hover {
    background-position: left bottom;
}

.imgShowDemo .slick-next:hover {
    background-position: right bottom;
}

.overlayClose {
    width: 52px;
    height: 52px;
    display: block;
    position: fixed;
    right: 3%;
    top: 2%;
    border-radius: 50%;
    transition: 300ms;
    -webkit-transition: 300ms;
    z-index: 100;
}

    .overlayClose i {
        background: url(../images/close2.png) no-repeat scroll center center;
        width: 100%;
        height: 100%;
        display: block;
        transition: 400ms;
        -webkit-transition: 400ms;
    }

    .overlayClose:hover {
        background-color: #ba002a;
    }

        .overlayClose:hover i {
            transform: rotate(90deg);
            -webkit-transform: rotate(90deg);
            -o-transform: rotate(90deg);
            -moz-transform: rotate(90deg);
        }

.pbanner {
    position: relative;
    overflow: hidden;
    width: 100%;
    height: 100%;
    background-color: #e4e4e4;
}

    .pbanner .img {
        width: 100%;
        display: block;
    }

.pbanner2 .img {
    position: absolute;
}

.picw img {
    transform: scale(1.1);
    -webkit-transform: scale(1.1);
    opacity: 0;
}

.trans-1 img {
    transition: all 1s cubic-bezier(0.165, 0.74, 0.44, 1) 0s;
}

.socialBox {
    padding: 80px 0px;
}

.socialCon {
    width: 80%;
    text-align: justify;
}

.socialBot {
    border-bottom: 3px solid #b40000;
    padding: 15px 0px 32px;
    text-align: right;
    color: #bdbdbd;
    font: 14px/1.2 "humanist_521_lightregular", "times new roman", "microsoft yahei";
    text-transform: uppercase;
    margin-bottom: 65px;
}

.sociallist a:link,
.sociallist a:visited {
    color: #333;
}

.sociallist a:active,
.sociallist a:hover {
    color: #fff;
}

.sociallist ul {
    margin-left: -1%;
}

.sociallist li {
    float: left;
    display: block;
    width: 32.33%;
    margin-left: 1%;
    margin-bottom: 18px;
    overflow: hidden;
}

.sociallist .img {
    position: relative;
    overflow: hidden;
}

    .sociallist .img .bg {
        background: url(../images/red_3.png) repeat;
        background: none rgba(180, 0, 0, 0.2);
        position: absolute;
        left: 0px;
        top: 0px;
        width: 0%;
        height: 100%;
    }

    .sociallist .img .ico {
        background: url(../images/fd.png) no-repeat;
        width: 32px;
        height: 32px;
        position: absolute;
        left: 50%;
        top: 50%;
        margin: -16px 0px 0px -16px;
        visibility: hidden;
        opacity: 0;
        transform: scale(0);
        -webkit-transform: scale(0);
    }

    .sociallist .img img {
        width: 100%;
        display: block;
    }

.sociallist .con {
    height: 82px;
    position: relative;
}

    .sociallist .con .bco {
        position: absolute;
        left: 0px;
        top: 0px;
        width: 100%;
        background-color: #b40000;
        height: 100%;
        opacity: 0;
        visibility: hidden;
    }

    .sociallist .con .t {
        padding: 15px 60px 0px 12px;
        height: 45px;
        overflow: hidden;
        position: relative;
        z-index: 2;
    }

.sociallist .morei {
    background: url(../images/more_i4.png) no-repeat scroll center center;
    width: 35px;
    display: block;
    height: 100%;
    position: absolute;
    right: 0px;
    top: 0px;
}

.sociallist a:hover .bg {
    width: 100%;
}

.sociallist a:hover .ico {
    opacity: 1;
    visibility: visible;
    transform: scale(1);
    -webkit-transform: scale(1);
}

.sociallist a:hover .bco {
    opacity: 1;
    visibility: visible;
}

.sociallist a:hover .morei {
    background-color: #e60012;
}

/*responsibility style end*/
/*about style*/
.t-VideoBox {
    position: relative;
    overflow: hidden;
    width: 100%;
    height: 500px;
}

    .t-VideoBox .vbBox {
        height: 100%;
        position: absolute;
        left: 0px;
        top: 0px;
        width: 100%;
    }

        .t-VideoBox .vbBox .vico {
            background: url(../images/vico.png) no-repeat;
            width: 46px;
            height: 53px;
            position: absolute;
            left: 50%;
            top: 50%;
            margin: -26px 0px 0px -23px;
            cursor: pointer;
        }

            .t-VideoBox .vbBox .vico:hover {
                transform: scale(1.1);
                -webkit-transform: scale(1.1);
                transition: 300ms;
                -webkit-transition: 300ms;
            }

.aboutNav a:link,
.aboutNav a:visited {
    color: #fff;
}

.aboutNav a:active,
.aboutNav a:hover {
    color: #fff;
}

.aboutNav {
    position: absolute;
    z-index: 100;
    bottom: 24px;
    left: 50%;
    width: 880px;
    margin-left: -440px;
}

    .aboutNav li {
        position: relative;
        width: 20%;
        float: left;
        display: block;
        text-align: center;
    }

        .aboutNav li .bg {
            background: url(../images/y3.png) no-repeat;
            width: 128px;
            height: 128px;
            display: block;
            position: absolute;
            left: 50%;
            top: 50%;
            margin: -64px 0px 0px -64px;
            opacity: 0;
            visibility: hidden;
        }

        .aboutNav li a {
            display: block;
            background: url(../images/y5.png) no-repeat scroll center center;
            width: 79px;
            height: 69px;
            padding: 48px 24px 9px 23px;
            margin: 0px auto;
        }

        .aboutNav li.lin3 a {
            height: 73px;
            padding-top: 44px;
            line-height: 1.4;
        }

        .aboutNav li a .name {
            position: relative;
            z-index: 2;
        }

        .aboutNav li .bot {
            background: url(../images/v_bot.png) no-repeat;
            width: 9px;
            height: 6px;
            margin: 12px auto;
            display: block;
            opacity: 0;
            visibility: hidden;
            position: relative;
            z-index: 2;
            transform: translateY(-6px);
            -webkit-transform: translateY(-6px);
            transition: 300ms;
            -webkit-transition: 300ms;
        }

        .aboutNav li a:hover .bot {
            opacity: 1;
            visibility: visible;
            transform: translateY(0px);
            -webkit-transform: translateY(0px);
        }

        .aboutNav li a:hover .bg {
            opacity: 1;
            animation: rote 2s linear infinite;
            -webkit-animation: rote 2s linear infinite;
            -ms-animation: rote 2s linear infinite;
            -moz-animation: rote 2s linear infinite;
            visibility: visible;
        }

@keyframes rote {
    0% {
        transform: rotate(0);
        -webkit-transform: rotate(0);
        -ms-transform: rotate(0);
        -moz-transform: rotate(0);
    }

    100% {
        transform: rotate(360deg);
        -webkit-transform: rotate(360deg);
        -ms-transform: rotate(360deg);
        -moz-transform: rotate(360deg);
    }
}

@-webkit-keyframes rote {
    0% {
        transform: rotate(0);
        -webkit-transform: rotate(0);
        -ms-transform: rotate(0);
        -moz-transform: rotate(0);
    }

    100% {
        transform: rotate(360deg);
        -webkit-transform: rotate(360deg);
        -ms-transform: rotate(360deg);
        -moz-transform: rotate(360deg);
    }
}

@-moz-keyframes rote {
    0% {
        transform: rotate(0);
        -webkit-transform: rotate(0);
        -ms-transform: rotate(0);
        -moz-transform: rotate(0);
    }

    100% {
        transform: rotate(360deg);
        -webkit-transform: rotate(360deg);
        -ms-transform: rotate(360deg);
        -moz-transform: rotate(360deg);
    }
}

@-ms-keyframes rote {
    0% {
        transform: rotate(0);
        -webkit-transform: rotate(0);
        -ms-transform: rotate(0);
        -moz-transform: rotate(0);
    }

    100% {
        transform: rotate(360deg);
        -webkit-transform: rotate(360deg);
        -ms-transform: rotate(360deg);
        -moz-transform: rotate(360deg);
    }
}

.companyPage {
    padding: 50px 0px 0px;
}

    .companyPage .mz2 {
        color: #ffd2d2;
        font: 139px/1.3 "humanist_521_lightregular", "times new roman", "microsoft yahei";
        text-transform: uppercase;
        width: 80%;
        margin: 0px auto;
    }

.companyDemo {
    position: relative;
}

    .companyDemo .transbg {
        position: absolute;
        left: 0px;
        top: 0px;
        width: 100%;
        height: 100%;
    }

.companyBox {
    width: 700px;
    padding: 35px 90px 70px;
    background-color: #fff;
    background-color: rgba(255, 255, 255, 0.9);
    margin: 0px auto;
    position: relative;
    top: -220px;
}

    .companyBox .t {
        text-align: center;
        color: #646464;
        font-family: "humanist_521_lightregular", "times new roman", "microsoft yahei";
        margin-bottom: 35px;
    }

        .companyBox .t .year {
            border-top: 1px solid #e5e5e5;
            padding: 4px 45px;
        }

.ceoPage {
    background-color: #f3f3f3;
}

.ceobox {
    position: relative;
    top: -138px;
}

    .ceobox .img {
        float: left;
        display: block;
        width: 49%;
        overflow: hidden;
    }

        .ceobox .img img {
            width: 100%;
            display: block;
        }

    .ceobox .con {
        float: left;
        width: 50%;
        position: relative;
    }

    .ceobox .mz3,
    .ceobox .mz4 {
        color: #fef0c1;
        font: 139px/1 "humanist_521_lightregular", "times new roman", "microsoft yahei";
        text-transform: uppercase;
        position: absolute;
        left: -10%;
    }

    .ceobox .mz3 {
        top: -20px;
    }

    .ceobox .mz4 {
        bottom: 0%;
        font-size: 200px;
        left: -40%;
    }

    .ceobox .con .pageC {
        margin-top: 65px;
        background-color: #fff;
        background-color: rgba(255, 255, 255, 0.9);
        width: 85%;
        padding: 50px 8%;
        float: right;
        position: relative;
        z-index: 2;
    }

.visionPage {
    background-color: #f3f3f3;
}

.visionBox {
    max-width: 1550px;
    margin: 0px auto;
    width: 80%;
}

    .visionBox dd {
        float: left;
        display: block;
        width: 50%;
        height: 1003px;
        position: relative;
        z-index: 2;
    }

.visitem {
    position: relative;
    overflow: hidden;
}

    .visitem .img {
        background-size: cover;
        background-repeat: no-repeat;
        background-position: center center;
        position: absolute;
        left: 0px;
        top: 0px;
        width: 100%;
        height: 100%;
        transition: 800ms;
        -webkit-transition: 800ms;
    }

    .visitem .bg {
        position: absolute;
        left: 0px;
        top: 0px;
        width: 100%;
        height: 100%;
    }

    .visitem .con {
        position: absolute;
        left: 8%;
        top: 8%;
        width: 84%;
        height: 84%;
        transition: 400ms;
        -webkit-transition: 400ms;
    }

    .visitem .en {
        font: 12px/1.2 "humanist_521_lightregular", "times new roman", "microsoft yahei";
        color: #646464;
    }

    .visitem .t {
        font-size: 32px;
        line-height: 1.2;
        color: #323232;
    }

    .visitem .c {
        margin-top: 10px;
        padding-top: 10px;
        border-top: 1px solid #818181;
        width: 70%;
        height: 80%;
        border-bottom: 1px solid #818181;
        overflow: hidden;
    }

    .visitem .by2 {
        font-size: 18px;
        margin-bottom: 20px;
    }

.visitem1 {
    height: 448px;
}

.visitem2 {
    height: 774px;
}

.visitem3 {
    height: 556px;
}

.visitem4 {
    height: 447px;
}

.visitem1 .bg {
    background: url(../images/red_4.png) repeat;
    background: none rgba(255, 205, 205, 0.9);
    opacity: 0;
    visibility: hidden;
}

.visitem2 .bg {
    background: none rgba(254, 235, 165, 0.6);
    opacity: 0;
    visibility: hidden;
}

.visitem3 .bg {
    background: url(../images/blue.png) repeat;
    background: none rgba(198, 254, 253, 0.9);
    opacity: 0;
    visibility: hidden;
}

.visitem4 .bg {
    background: url(../images/he_1.png) repeat;
    background: none rgba(255, 217, 176, 0.9);
    opacity: 0;
    visibility: hidden;
}

.visitem:hover .img {
    transform: scale(1.12);
    -webkit-transform: scale(1.12);
}

.visitem1:hover .bg,
.visitem2:hover .bg,
.visitem3:hover .bg,
.visitem4:hover .bg {
    opacity: 1;
    visibility: visible;
}

.visitem1:hover .con,
.visitem2:hover .con,
.visitem3:hover .con,
.visitem4:hover .con {
    transform: translateY(-10px);
    -webkit-transform: translateY(-10px);
}

.visitem1 .c,
.visitem2 .c,
.visitem3 .c,
.visitem4 .c {
    opacity: 0;
    visibility: hidden;
    transition: 400ms;
    -webkit-transition: 400ms;
}

.visitem1:hover .c,
.visitem2:hover .c,
.visitem3:hover .c,
.visitem4:hover .c {
    opacity: 1;
    visibility: visible;
}

.ybg {
    margin-top: 20px;
    text-align: center;
    position: relative;
}

    .ybg .y {
        background: url(../images/y4.png) no-repeat;
        width: 376px;
        height: 376px;
        margin: 0px auto;
        display: block;
        position: absolute;
        left: 50%;
        top: 0px;
        margin-left: -188px;
    }

.coreList {
    position: relative;
    z-index: 2;
}

    .coreList li {
        position: relative;
    }

        .coreList li .n {
            font-size: 16px;
            line-height: 2.2;
            color: #323232;
            margin: 0px auto;
            padding-top: 10px;
            cursor: pointer;
            text-indent: 2em;
            text-align: left;
        }

        .coreList li .txt {
            display: none;
            position: absolute;
            left: 0px;
            top: 60px;
            background-color: #fff;
            padding: 5%;
            width: 90%;
            z-index: 10;
        }

            .coreList li .txt .sj {
                background: url(../images/sj.png) no-repeat;
                width: 24px;
                height: 12px;
                position: absolute;
                left: 50%;
                top: -12px;
                margin-left: -12px;
            }

.honorPage {
    background-color: #f1e5a8;
}

    .honorPage .leftBox,
    .honorPage .rightBox {
        width: 50%;
        float: left;
        display: block;
        padding: 330px 0px 120px;
        position: relative;
        overflow: hidden;
    }

    .honorPage .con {
        width: 500px;
        float: right;
        display: block;
        margin-right: 50px;
        font-size: 16px;
        line-height: 2;
    }

    .honorPage .img {
        border: 15px solid #fff;
        border-color: rgba(255, 255, 255, 0.9);
        width: 512px;
        position: relative;
        z-index: 4;
    }

        .honorPage .img img {
            width: 100%;
            display: block;
        }

    .honorPage .transbg {
        position: absolute;
        left: 0px;
        top: 0px;
        width: 100%;
        height: 100%;
        background-attachment: inherit;
        background-attachment: initial;
    }

#videoPage .t {
    width: 80%;
    color: #333000;
    font-size: 32px;
    line-height: 1.4;
    margin: 0px auto;
    padding: 100px 0px;
}

.historyImg .con {
    text-align: center;
    padding: 15% 0px;
    font-size: 25px;
    color: #323232;
}

    .historyImg .con .cred {
        font-size: 50px;
        line-height: 1.3;
    }

    .historyImg .con .bot {
        height: 5px;
        background-color: #3d3d3d;
        width: 72px;
        display: block;
        margin: 25px auto;
    }

.historyDemo a:link,
.historyDemo a:visited {
    color: #323232;
}

.historyDemo a:active,
.historyDemo a:hover {
    color: #B40000;
}

.historyDemo {
    width: 1000px;
    margin: 0px auto;
    position: relative;
    top: -60px;
    color: #323232;
}

    .historyDemo .img {
        width: 273px;
        margin: 0px auto;
    }

        .historyDemo .img img {
            width: 100%;
        }

    .historyDemo .title {
        font-size: 28px;
        text-align: center;
        padding: 30px 0px;
    }

    .historyDemo .c {
        text-align: center;
        font-size: 16px;
        margin-bottom: 40px;
    }

    .historyDemo .more {
        margin: 0px auto;
        width: 120px;
        height: 40px;
        line-height: 40px;
        border-color: #9a9a9a;
    }

        .historyDemo .more .i1 {
            color: #323232;
        }

        .historyDemo .more .i2 {
            border-color: transparent transparent transparent #cdcdcd;
        }

        .historyDemo .more .i3 {
            border-color: transparent #cdcdcd transparent transparent;
        }

    .historyDemo .slick-arrow {
        background: none #fff;
        width: 64px;
        height: 86px;
        z-index: 10;
        top: 120px;
    }

        .historyDemo .slick-arrow span {
            width: 100%;
            height: 100%;
            display: block;
            transition: 600ms;
            -webkit-transition: 600ms;
        }

    .historyDemo .slick-prev {
        left: 8px;
    }

    .historyDemo .slick-next {
        right: 8px;
    }

    .historyDemo .slick-prev span {
        background: url(../images/l1.png) no-repeat scroll center center;
    }

    .historyDemo .slick-next span {
        background: url(../images/r1.png) no-repeat scroll center center;
    }

    .historyDemo .slick-prev:hover,
    .historyDemo .slick-next:hover {
        background: none #df0024;
    }

        .historyDemo .slick-prev:hover span {
            background-image: url(../images/l2.png);
        }

        .historyDemo .slick-next:hover span {
            background-image: url(../images/r2.png);
        }

.videopBOX {
    width: 100%;
    margin: 0px auto;
    height: 590px;
    position: relative;
    overflow: hidden;
}

.videoT {
    text-align: center;
    padding: 18px 0px 25px;
    color: #323232;
    font-size: 18px;
}

.zc {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid #818181;
    width: 70%;
    height: 80%;
    border-bottom: 1px solid #818181;
    overflow: hidden;
}

    .zc p {
        text-indent: 2em;
        line-height: 2.2;
        font-size: 16px;
    }

#videoPage {
    padding-bottom: 90px;
}

#videocontainer {
    width: 100%;
    height: 100%;
}

.videoList {
    text-align: center;
    background-color: #c8c8c8;
}

    .videoList a {
        background-color: #333;
        display: inline-block;
    }

        .videoList a .img {
            vertical-align: middle;
            opacity: 0.5;
            filter: alpha(opacity=50);
        }

        .videoList a.active .img {
            opacity: 1;
            filter: alpha(opacity=100);
        }

#historyPage {
    padding: 68px 0px;
    background-color: #f4ecdf;
}

.brandStory {
    position: relative;
    padding: 70px 0px;
}

    .brandStory a:link,
    .brandStory a:visited {
        color: #333;
    }

    .brandStory a:active,
    .brandStory a:hover {
        color: #B40000;
    }

.proces_ico2 {
    background: url(../images/d4.png) no-repeat;
    width: 26px;
    height: 26px;
    position: absolute;
    left: 50%;
    top: -26px;
    margin-left: -13px;
}

.proces_bot3 {
    background: url(../images/d3.png) no-repeat scroll center top;
    width: 114px;
    display: block;
    margin: 30px auto 0px;
    padding-top: 28px;
    text-align: center;
    color: #333;
}

    .proces_bot3:hover {
        color: #E60012;
    }

.procesList dd {
    float: left;
    display: block;
    width: 16.66%;
    position: relative;
    cursor: pointer;
}

.procesList .num {
    background: url(../images/y7.png) no-repeat #fff;
    width: 60px;
    height: 60px;
    margin-left: 2px;
    line-height: 60px;
    text-align: center;
    font-size: 20px;
    position: relative;
    z-index: 2;
}

.procesList .y2 {
    background: url(../images/y8.png) no-repeat scroll center bottom;
    height: 0px;
    width: 100%;
    position: absolute;
    left: 0px;
    bottom: 0px;
    -webkit-transition: 400ms;
    -moz-transition: 400ms;
    -ms-transition: 400ms;
    transition: 400ms;
}

.procesList .y {
    position: relative;
    z-index: 2;
}

.procesList dd:hover .num {
    color: #fff;
}

    .procesList dd:hover .num .y2 {
        height: 100%;
    }

.procesList .line {
    width: 60%;
    right: 4px;
    top: 30px;
    height: 1px;
    background-color: #dcdcdc;
    position: absolute;
}

.procesList .line2 {
    margin: 24px 0px 15px;
    width: 18px;
    background-color: #a0a0a0;
    height: 1px;
    -webkit-transition: 400ms;
    -moz-transition: 400ms;
    -ms-transition: 400ms;
    transition: 400ms;
}

.procesList .txt {
    margin: 0px 45px 0px 5px;
    color: #646464;
    height: 135px;
}

.procesList dd:hover .line2 {
    width: 100%;
    background-color: #e60012;
}

.brandStoryDL {
    position: relative;
    overflow: hidden;
}

    .brandStoryDL dd {
        padding: 34px 0px;
        position: relative;
        transition: 400ms;
        -webkit-transition: 400ms;
        cursor: pointer;
    }

    .brandStoryDL .img {
        float: left;
        width: 50%;
        display: block;
    }

    .brandStoryDL .imgbox {
        width: 290px;
        margin: 0px auto;
        visibility: hidden;
        opacity: 0;
        transition: 400ms;
        -webkit-transition: 400ms;
    }

        .brandStoryDL .imgbox img {
            width: 100%;
            display: block;
        }

    .brandStoryDL .line {
        width: 228px;
        height: 3px;
        background-color: #a0a0a0;
        position: absolute;
        left: 50%;
        margin-left: -60px;
        top: 79px;
    }

        .brandStoryDL .line i {
            border: 1px solid #a0a0a0;
            width: 18px;
            height: 18px;
            position: absolute;
            left: -14px;
            top: -9px;
        }

    .brandStoryDL .time {
        float: left;
        display: block;
        width: 100px;
        margin-left: 68px;
        color: #333;
        position: relative;
        font: 30px/1.2 "humanist_521_lightregular", "times new roman", "microsoft yahei";
        text-align: right;
        transition: 400ms;
        -webkit-transition: 400ms;
    }

        .brandStoryDL .time .zs {
            font: 12px/1.2 "humanist_521_lightregular", "times new roman", "microsoft yahei";
            text-transform: uppercase;
            display: block;
            position: absolute;
            right: 0px;
            top: 0px;
            opacity: 0;
            visibility: hidden;
            transition: 400ms;
            -webkit-transition: 400ms;
        }

    .brandStoryDL .con {
        float: left;
        display: block;
        margin-left: 35px;
        width: 215px;
        color: #333;
    }

        .brandStoryDL .con .t {
            font-size: 19px;
            font-weight: bold;
            margin-bottom: 10px;
            transition: 400ms;
            -webkit-transition: 400ms;
        }

    .brandStoryDL .two .img {
        float: right;
    }

    .brandStoryDL .two .line {
        left: auto;
        right: 50%;
        margin: 0px -60px 0px 0px;
    }

        .brandStoryDL .two .line i {
            left: auto;
            right: -14px;
        }

    .brandStoryDL .two .time {
        margin-left: 0px;
    }

    .brandStoryDL dd:hover {
        background-color: #fff;
    }

        .brandStoryDL dd:hover .img {
            height: auto;
        }

        .brandStoryDL dd:hover .imgbox {
            visibility: visible;
            opacity: 1;
        }

        .brandStoryDL dd:hover .line {
            opacity: 0;
            visibility: hidden;
        }

        .brandStoryDL dd:hover .time {
            color: #c80000;
            font-size: 88px;
            line-height: 1;
        }

            .brandStoryDL dd:hover .time .y2 {
                position: relative;
                top: 44px;
                left: -40px;
            }

            .brandStoryDL dd:hover .time .zs {
                opacity: 1;
                visibility: visible;
                color: #333;
            }

        .brandStoryDL dd:hover .con .t {
            font-size: 30px;
            padding-top: 30px;
        }

/*video style end*/
/*about style end*/
/*service style*/
.serbannerbox {
    position: absolute;
    left: 0px;
    bottom: 0px;
    width: 100%;
    background: url(../images/red_3.png) repeat;
    background: none rgba(194, 5, 19, 0.9);
    color: #fff;
    padding: 28px 0px 18px;
}

    .serbannerbox dd {
        width: 20%;
        float: left;
        display: block;
    }

    .serbannerbox .name {
        float: right;
        display: block;
        line-height: 1.5;
        font-family: "humanist_521_lightregular", "times new roman", "microsoft yahei";
        text-transform: uppercase;
    }

    .serbannerbox .lefbox {
        width: 80%;
    }

    .serbannerbox .telserBox {
        width: 80%;
        background: url(../images/telico.png) no-repeat scroll left center;
        padding-left: 100px;
    }

.telserBox .tel2 {
    font-size: 50px;
    line-height: 1.4;
}

.servicePage {
    padding: 86px 0px 0px;
    width: 90%;
    margin: 0px auto;
}

    .servicePage .item {
        float: left;
        display: block;
        width: 49%;
        margin: 0px 0.5%;
        background-color: #333;
        position: relative;
        overflow: hidden;
    }

    .servicePage .img {
        width: 100%;
        display: block;
        -webkit-transition: 0.5s;
        -moz-transition: 0.5s;
        -o-transition: 0.5s;
        transition: 0.5s;
    }

    .servicePage .bg {
        background: url(../images/y6.png) no-repeat;
        width: 247px;
        height: 247px;
        position: absolute;
        left: 50%;
        top: 50%;
        margin: -123px 0px 0px -123px;
    }

    .servicePage .con {
        font-size: 22px;
        color: #fff;
        position: absolute;
        width: 100px;
        height: 100px;
        top: 50%;
        left: 50%;
        margin: -49px 0px 0px -50px;
    }

        .servicePage .con i {
            background: url(../images/ik.png) no-repeat;
            width: 50px;
            height: 50px;
            margin: 0px auto 8px;
            display: block;
        }

    .servicePage dd:hover .img {
        -webkit-transform: scale(1.1);
        transform: scale(1.1);
        opacity: 0.5;
        filter: alpha(opacity=50);
    }

    .servicePage #serPage2 {
        background-color: #c61c2a;
    }

        .servicePage #serPage2 .con i {
            background-image: url(../images/ik2.png);
        }

        .servicePage #serPage2 .t {
            position: absolute;
            left: 5%;
            top: 2%;
            font-size: 22px;
            line-height: 1.5;
            width: 90%;
            color: #fff;
        }

        .servicePage #serPage2 a {
            color: #fff;
        }

#serPage2 .boxCon .t {
    font-size: 22px;
    color: #505050;
    text-align: center;
    margin-bottom: 22%;
}

select.selbox {
    width: 180px;
    height: 38px;
    line-height: 38px;
    outline: none;
    vertical-align: middle;
    border: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    font-family: "microsoft yahei";
    color: #646464;
    cursor: pointer;
    display: block;
    font-size: 14px;
    margin-right: 8px;
    background: url(../images/select.gif) no-repeat scroll 90% center #f8f8f8;
}

.no-csstransitions select.selbox {
    padding-left: 0;
    background-image: none;
}

select.selbox option {
    padding: 2px 15px;
}

select.selbox:hover {
    color: #323232;
}

.loginbtn .i2 {
    position: absolute;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
    background-color: #a0a0a0;
    border-radius: 50%;
    opacity: 0;
    transform: scale(0.4);
    -webkit-transform: scale(0.4);
    visibility: hidden;
    transition: all 0.5s ease 0s;
    -webkit-transform: all 0.5s ease 0s;
}

.loginbtn span {
    position: relative;
    z-index: 2;
    color: #333;
}

.loginbtn:hover {
    color: #333;
}

    .loginbtn:hover .i2 {
        opacity: 1;
        transform: scale(1);
        -webkit-transform: scale(1);
        visibility: visible;
    }

.cred {
    color: #e60012;
}

#serPage3 {
    padding: 70px 0px 0px;
    color: #323232;
}

.serT {
    text-align: center;
    font-size: 50px;
    color: #323232;
    line-height: 1.4;
}

.serB {
    width: 82px;
    margin: 50px auto;
    display: block;
    background-color: #aaaaaa;
    height: 1px;
}

.serT2 {
    text-align: center;
    font-size: 35px;
    color: #333;
    line-height: 1.4;
}

.serB2 {
    width: 70px;
    margin: 30px auto 50px;
    display: block;
    background-color: #aaaaaa;
    height: 3px;
}

.f18 {
    font-size: 18px;
}

.linnianImg {
    padding: 60px 0px;
}

    .linnianImg li {
        float: left;
        display: block;
        width: 33.33%;
    }

        .linnianImg li img {
            width: 100%;
            display: block;
        }

.linianBox {
    border-bottom: 1px solid #aaaaaa;
    border-top: 1px solid #aaaaaa;
    padding: 25px 0px;
    text-align: center;
    width: 88%;
    margin: 0px auto 0;
}

.linian2 {
    padding: 70px 0px;
}

.linianImg2 {
    width: 90%;
    margin: 0px auto;
}

    .linianImg2 li {
        float: left;
        display: block;
        width: 50%;
        position: relative;
        overflow: hidden;
    }

    .linianImg2 .img {
        width: 100%;
        display: block;
    }

    .linianImg2 .bg {
        background: url(../images/red_2.png) repeat;
        background: none rgba(230, 0, 18, 0.9);
        position: absolute;
        left: 0px;
        top: 0px;
        width: 0%;
        height: 100%;
        transition: all 0.5s ease 0s;
        -webkit-transform: all 0.5s ease 0s;
    }

    .linianImg2 .t {
        position: absolute;
        left: 8%;
        top: 6%;
        width: 84%;
        color: #323232;
        font-size: 16px;
        transition: all 0.5s ease 0s;
        -webkit-transform: all 0.5s ease 0s;
    }

        .linianImg2 .t .by {
            font-size: 32px;
            color: #333;
            transition: all 0.5s ease 0s;
            -webkit-transform: all 0.5s ease 0s;
        }

    .linianImg2 .b {
        position: absolute;
        left: 100%;
        bottom: 7%;
        width: 80%;
        color: #fff;
        transition: all 0.5s ease 0s;
        -webkit-transform: all 0.5s ease 0s;
        opacity: 0;
    }

        .linianImg2 .b .bot {
            height: 1px;
            width: 62px;
            display: block;
            background-color: #fff;
            margin-bottom: 30px;
        }

    .linianImg2 li:hover .t,
    .linianImg2 li:hover .by {
        color: #fff;
    }

    .linianImg2 li:hover .bg {
        width: 100%;
    }

    .linianImg2 li:hover .b {
        left: 8%;
        opacity: 1;
    }

.linian3 .pageC {
    width: 670px;
    margin: 0px auto;
    font-size: 16px;
    color: #646464;
}

#serPage4 {
    position: relative;
    overflow: hidden;
    width: 90%;
    margin: 0px auto;
    padding: 15% 0px 0px;
}

    #serPage4 .img {
        position: absolute;
        left: 0%;
        top: 0px;
        width: 100%;
    }

        #serPage4 .img img {
            width: 100%;
            display: block;
        }

.zhinanBox {
    border: 1px solid #e60012;
    background-color: #fff;
    padding: 40px 40px 50px;
    margin: 0px auto;
    position: relative;
    z-index: 2;
    border-radius: 15px;
}

    .zhinanBox .sj {
        position: absolute;
        left: 3%;
        top: 0px;
        background: url(../images/sj2.png) no-repeat;
        width: 34px;
        height: 260px;
    }

    .zhinanBox .t {
        font-size: 20px;
        color: #333;
        margin-bottom: 35px;
        text-align: center;
    }

    .zhinanBox img {
        max-width: 100%;
        display: inline;
    }

.zhinanList {
    padding-top: 60px;
}

    .zhinanList li {
        float: left;
        display: block;
        width: 20%;
        text-align: center;
        color: #969696;
        cursor: pointer;
    }

    .zhinanList .ico {
        display: block;
        margin: 0px auto 10px;
    }

    .zhinanList li:hover .ico {
        -webkit-animation: icoI 1s linear infinite;
        animation: icoI 1s linear infinite;
    }

@-webkit-keyframes icoI {
    0% {
        -webkit-transform: translate(0px, 0px);
    }

    25% {
        -webkit-transform: translate(0px, -10px);
    }

    50% {
        -webkit-transform: translate(0px, 0px);
    }

    75% {
        -webkit-transform: translate(0px, 10px);
    }

    100% {
        -webkit-transform: translate(0px, 0px);
    }
}

@-moz-keyframes icoI {
    0% {
        -moz-transform: translate(0px, 0px);
    }

    25% {
        -moz-transform: translate(0px, -10px);
    }

    50% {
        -moz-transform: translate(0px, 0px);
    }

    75% {
        -moz-transform: translate(0px, 10px);
    }

    100% {
        -moz-transform: translate(0px, 0px);
    }
}

@keyframes icoI {
    0% {
        transform: translate(0px, 0px);
    }

    25% {
        transform: translate(0px, -10px);
    }

    50% {
        transform: translate(0px, 0px);
    }

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

    100% {
        transform: translate(0px, 0px);
    }
}

.slider-for,
.slider-nav {
    width: 976px;
    margin: 0px auto;
}

.slider-nav {
    position: relative;
    z-index: 2;
}

.slider-for {
    position: relative;
    top: -1px;
}

.slider-nav .item {
    text-align: center;
    position: relative;
    cursor: pointer;
    height: 100px;
    padding: 32px 0px 38px;
    color: #323232;
}

.slider-nav .y1 {
    width: 132px;
    height: 132px;
    position: absolute;
    left: 50%;
    top: 0;
    margin: 0px 0px 0px -66px;
    border-radius: 50%;
    overflow: hidden;
    background: url(../images/y10.png) no-repeat scroll center center;
}

.slider-nav .y2 {
    width: 132px;
    height: 132px;
    position: absolute;
    left: 50%;
    top: 0%;
    margin: 0px 0px 0px -66px;
    background: url(../images/y9.png) no-repeat scroll center center;
    opacity: 0;
    transform: scale(0.7);
    -webkit-transform: scale(0.7);
    visibility: hidden;
    transition: all 0.5s ease 0s;
    -webkit-transform: all 0.5s ease 0s;
}

.slider-nav .item i {
    background: url(../images/ico4.png) no-repeat;
    width: 32px;
    height: 32px;
    display: block;
    position: relative;
    z-index: 2px;
    margin: 0px auto 10px;
    transition: all 0.3s ease 0s;
    -webkit-transform: all 03s ease 0s;
}

.slider-nav .item .i1 {
    background-position: 0px 0px;
}

.slider-nav .item .i2 {
    background-position: -170px 0px;
}

.slider-nav .item .i3 {
    background-position: -338px 0px;
}

.slider-nav .item .i4 {
    background-position: -507px 0px;
}

.slider-nav .item .i5 {
    background-position: -676px 0px;
}

.slider-nav .item .i6 {
    background-position: -846px 0px;
}

.slider-nav .item:hover .i1,
.slider-nav .slick-current .i1 {
    background-position: 0px -52px;
}

.slider-nav .item:hover .i2,
.slider-nav .slick-current .i2 {
    background-position: -170px -52px;
}

.slider-nav .item:hover .i3,
.slider-nav .slick-current .i3 {
    background-position: -338px -52px;
}

.slider-nav .item:hover .i4,
.slider-nav .slick-current .i4 {
    background-position: -507px -52px;
}

.slider-nav .item:hover .i5,
.slider-nav .slick-current .i5 {
    background-position: -676px -52px;
}

.slider-nav .item:hover .i6,
.slider-nav .slick-current .i6 {
    background-position: -846px -52px;
}

.slider-nav .name {
    font-size: 12px;
    position: relative;
}

.slider-nav .bor {
    background: url(../images/sj2.png) no-repeat scroll center bottom;
    width: 34px;
    height: 0px;
    position: absolute;
    left: 50%;
    margin-left: -17px;
    bottom: 0px;
    -webkit-transition: 0.4s;
    -moz-transition: 0.4s;
    -o-transition: 0.4s;
    transition: 0.4s;
}

.slider-nav .item:hover {
    color: #fff;
}

    .slider-nav .item:hover .y2,
    .slider-nav .slick-current .y2 {
        opacity: 1;
        transform: scale(1);
        -webkit-transform: scale(1);
        visibility: visible;
    }

.slider-nav .slick-current {
    color: #fff;
}

    .slider-nav .slick-current .bor {
        height: 18px;
        transition-delay: 0.2s;
        -webkit-transition-delay: 0.2s;
        -o-transition-delay: 0.2s;
    }

.slider-nav .slick-prev,
.slider-nav .slick-next {
    width: 48px;
    height: 48px;
    position: absolute;
    top: 50%;
    margin-top: -24px;
    z-index: 100;
}

.slider-nav .slick-prev {
    background: url(../images/img_ico.png) no-repeat scroll left top;
    left: -24px;
}

.slider-nav .slick-next {
    background: url(../images/img_ico.png) no-repeat scroll right top;
    right: -24px;
}

#serPage5 {
    padding: 50px 5%;
    position: relative;
}

/*#serPage5 .bcbox { position: absolute; left: 8%; bottom: 150px; border-top: 1px solid #818181; width: 300px; padding-top: 18px; color: #333; }
#serPage5 .bcbox .t { font-size: 35px; color: #333; line-height: 1.2; }
.bcbox a:link, .bcbox a:visited { color: #333; }
.bcbox a:active, .bcbox a:hover { color: #CD000F; }
.c64 { color: #646464; }
.bcbox .tel3 { font-size: 20px; }
#serPage5 .img { float: right; display: block; width: 54%; position: relative; }
#serPage5 .img img { width: 100%; display: block; }
#serPage5 .mz5, #serPage5 .mz6 { color: #fef0c1; font: 80px/1 "humanist_521_lightregular","times new roman","microsoft yahei"; text-transform: uppercase; position: absolute; left: -20%; }
#serPage5 .mz5 { top: -20px; }
#serPage5 .mz6 { bottom: -20px; }*/
.mapCon {
    border-left: 1px solid #c9c9c9;
    border-right: 1px solid #c9c9c9;
    margin-top: 50px;
}

    .mapCon dd {
        float: left;
        width: 28.33%;
        color: #646464;
        padding-top: 12px;
        height: 124px;
        padding-left: 5%;
    }

    .mapCon .t {
        margin-bottom: 12px;
    }

        .mapCon .t .i {
            background: url(../images/h.png) no-repeat scroll left center;
            float: left;
            display: block;
            width: 18px;
        }

    .mapCon .tel5,
    .mapCon .add5,
    .mapCon .time5 {
        padding-left: 18px;
    }

    .mapCon .tel5 {
        font-size: 30px;
        line-height: 1.2;
        color: #141414;
    }

    .mapCon .time5 {
        color: #969696;
    }

    .mapCon .add5 {
        font-size: 20px;
        line-height: 1.2;
        color: #333;
    }

    .mapCon .ewm {
        float: right;
        display: block;
        margin-right: 15%;
    }

.mapbox {
    height: 470px;
}

.serPagebg {
    background: url(../images/black_1.png) repeat;
    position: fixed;
    left: 0px;
    top: 0px;
    z-index: 1010;
    width: 100%;
    height: 100%;
    display: none;
    cursor: url("../images/close-icon.ico") 16 16, default;
}

.touchevents .serPagebg {
    cursor: pointer;
}

/*.serPageBox { position: fixed; left: 0px; width: 620px; height: 538px; left: 50%; top: 50%; margin: -269px 0px 0px -390px; padding: 0px 80px; z-index: 1012; background-color: #fff; display: none; transform: scale(0.9); -webkit-transform: scale(0.9); transition: 300ms; -webkit-transition: 300ms; }*/
.serPageBox {
    position: fixed;
    left: 0px;
    width: 200px;
    height: 250px;
    left: 50%;
    top: 50%;
    padding: 10px;
    margin: -135px 0px 0px -110px;
    z-index: 1012;
    background-color: #fff;
    display: none;
    transform: scale(0.9);
    -webkit-transform: scale(0.9);
    transition: 300ms;
    -webkit-transition: 300ms;
}

    .serPageBox.active {
        transform: scale(1);
        -webkit-transform: scale(1);
    }

    .serPageBox .wxbox img {
        width: 100%;
        display: block;
    }

    .serPageBox .wxbox-c {
        line-height: 1.5;
    }

.serClose {
    background: url(../images/close3.png) no-repeat no-repeat scroll center center;
    width: 46px;
    height: 46px;
    position: absolute;
    right: -46px;
    top: 0px;
    transition: all 400ms ease 0s;
    -webkit-transition: all 400ms ease 0s;
    cursor: pointer;
}

    .serClose:hover {
        transform: rotate(90deg);
        -webkit-transform: rotate(90deg);
    }

.serPageBox .t {
    padding: 25px 0px 15px;
    border-bottom: 1px solid #e5e5e5;
    font-size: 25px;
    color: #333;
    text-align: center;
}

.serPageBox table td {
    padding-top: 15px;
    color: #333;
}

.serTxt {
    border: 1px solid #a0a0a0;
    height: 20px;
    line-height: 20px;
    padding: 5px 5%;
    width: 90%;
    font-size: 14px;
    -webkit-transition: 0.3s;
    -moz-transition: 0.3s;
    -o-transition: 0.3s;
    transition: 0.3s;
}

.serTxt2 {
    width: 80%;
}

.serTxt3 {
    height: 84px;
    resize: none;
}

.serTxt4 {
    width: 30%;
}

.serBtn {
    border: 1px solid #a0a0a0;
    display: block;
    width: 98px;
    height: 36px;
    line-height: 36px;
    text-align: center;
    font-size: 14px;
    border-radius: 8px;
    margin: 0px auto;
    color: #333;
}

    .serBtn:hover {
        border-color: #e60012;
        color: #e60012;
    }

.serPageBox input[type="text"]:focus,
.serPageBox textarea:focus {
    border-color: #e60012;
    border-radius: 8px;
}

.serPageBox .name {
    float: left;
    display: block;
    margin-right: 28px;
    width: 190px;
}

/*service style end*/
/*distributor style*/
.videoPage {
    position: absolute;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
    z-index: 2;
}

.pbanner-box {
    position: absolute;
    left: 50%;
    margin-left: -550px;
    bottom: 10%;
    color: #fff;
}

    .pbanner-box .t {
        font-size: 50px;
        line-height: 1.2;
        font-weight: bold;
    }

    .pbanner-box .c {
        font-size: 25px;
        margin: 20px 0px 5%;
        line-height: 1.2;
    }

.videoBtn {
    background: url(../images/vico2.png) no-repeat scroll 20px center;
    padding-left: 50px;
    width: 96px;
    height: 42px;
    line-height: 42px;
    display: block;
    border: 1px solid #fff;
    border-radius: 10px;
    cursor: pointer;
}

.distributorBanner {
    position: relative;
    overflow: hidden;
}

.specialT {
    position: absolute;
    width: 90%;
    text-align: center;
    color: #fff;
    top: 42%;
    left: 5%;
    font-size: 60px;
    line-height: 1.2;
}

.specialtitle {
    padding: 42px 0px 50px;
}

    .specialtitle .name {
        color: #333;
        font-size: 32px;
        border-bottom: 7px solid #c20513;
        padding-bottom: 4px;
    }

.specialItem1 a:link,
.specialItem1 a:visited {
    color: #333;
}

.specialItem1 a:active,
.specialItem1 a:hover {
    color: #CD000F;
}

.specialItem1 dd {
    float: left;
    display: block;
    width: 37%;
}

.specialItem1 .img {
    width: 58%;
    margin-right: 5%;
}

    .specialItem1 .img img {
        width: 100%;
        display: block;
    }

.specialItem1 .con .t {
    font-size: 25px;
    margin-top: 5%;
}

.specialItem1 .con .txt {
    border-top: 1px solid #aaaaaa;
    border-bottom: 1px solid #aaaaaa;
    padding-bottom: 14px;
}

.specialItem1 .con .c {
    color: #646464;
    padding-top: 22px;
    height: 125px;
    overflow: hidden;
    margin-bottom: 40px;
}

.specialItem1 .infoI {
    padding: 8% 0px;
}

.specialItem2 a:link,
.specialItem2 a:visited {
    color: #333;
}

.specialItem2 a:active,
.specialItem2 a:hover {
    color: #CD000F;
}

.specialItem2 ul {
    margin-left: -1%;
}

.specialItem2 li {
    float: left;
    display: block;
    width: 24%;
    margin-left: 1%;
    margin-bottom: 50px;
}

    .specialItem2 li img {
        width: 100%;
        display: block;
        margin-bottom: 10px;
    }

    .specialItem2 li .con {
        height: 50px;
        overflow: hidden;
    }

.specialItem3 {
    margin-bottom: 80px;
    position: relative;
    overflow: hidden;
}

    .specialItem3 .img {
        float: right;
        display: block;
        margin-left: 20px;
    }

    .specialItem3 .name {
        position: absolute;
        left: 0px;
        bottom: 0px;
        color: #BDBDBD;
        font-family: "humanist_521_lightregular", "times new roman", "microsoft yahei";
        text-transform: uppercase;
        line-height: 1.4;
    }

.joinT {
    text-align: center;
    color: #323232;
    font-size: 28px;
    font-weight: bold;
    line-height: 1.4;
    padding: 48px 0px 48px;
}

    .joinT .red {
        color: #e60012;
    }

.joinP1List dd {
    float: left;
    display: block;
    width: 33.3%;
    height: 340px;
    background-size: cover;
    background-position: right top;
    background-repeat: no-repeat;
    position: relative;
    overflow: hidden;
}

    .joinP1List dd .bg2 {
        position: absolute;
        left: 0px;
        bottom: 0px;
        width: 100%;
        height: 100%;
        background: url(../images/wi.png) repeat;
        background: none rgba(255, 255, 255, 0.8);
    }

    .joinP1List dd .bg {
        position: absolute;
        left: 0px;
        bottom: 0px;
        width: 100%;
        height: 100%;
        background: url(../images/red_6.png) repeat;
        background: none rgba(230, 0, 18, 0.78);
        opacity: 0;
        visibility: hidden;
    }

    .joinP1List dd .t {
        position: absolute;
        right: 0px;
        width: 80%;
        padding: 0px 10%;
        top: 35%;
        transition: 300ms;
        -webkit-transition: 300ms;
    }

    .joinP1List dd .t1 {
        font-size: 18px;
    }

    .joinP1List dd .t2 {
        font-size: 22px;
        font-weight: bold;
        line-height: 1.4;
    }

    .joinP1List dd .t .t1 {
        color: #333;
    }

    .joinP1List dd .t .t2 {
        color: #e60012;
    }

    .joinP1List dd .con {
        float: right;
        display: block;
        width: 80%;
        padding: 0px 10%;
        color: #fff;
        transform: translateY(30px);
        -webkit-transform: translateY(30px);
        opacity: 0;
        visibility: hidden;
        transition: 500ms;
        -webkit-transition: 500ms;
        z-index: 2;
        position: relative;
    }

        .joinP1List dd .con .tt {
            padding: 26px 0px 18px;
        }

        .joinP1List dd .con .txt {
            height: auto;
            overflow: hidden;
        }

    .joinP1List dd.two {
        background-position: left top;
    }

        .joinP1List dd.two .con {
            float: none;
        }

        .joinP1List dd.two .t {
            right: auto;
            left: 0px;
        }

    .joinP1List dd:hover .t {
        top: -10%;
        opacity: 0;
        visibility: hidden;
    }

    .joinP1List dd:hover .bg {
        opacity: 1;
        visibility: visible;
    }

    .joinP1List dd:hover .con {
        opacity: 1;
        visibility: visible;
        transform: translateY(0px);
        -webkit-transform: translateY(0px);
    }

.joinP2List {
    width: 90%;
    margin: 0px auto;
    overflow: hidden;
}

    .joinP2List dd.act {
        width: 46%;
    }

    .joinP2List dd {
        width: 18%;
        float: left;
        display: block;
        height: 500px;
        cursor: pointer;
    }

        .joinP2List dd .box {
            background-position: center center;
            background-size: cover;
            background-repeat: no-repeat;
            width: 100%;
            height: 100%;
            position: relative;
        }

        .joinP2List dd .bg {
            background-color: rgba(0, 0, 0, 0.5);
            position: absolute;
            left: 0px;
            top: 0px;
            width: 100%;
            height: 100%;
        }

        .joinP2List dd .num {
            font: 90px/1 arial, helvetica, sans-serif;
            color: #fff;
            position: absolute;
            left: 5%;
            top: 0px;
            opacity: 0.5;
            filter: alpha(opacity=50);
        }

        .joinP2List dd .t {
            font-size: 16px;
            line-height: 1.4;
            position: absolute;
            left: 25%;
            top: 40%;
            color: #fff;
        }

            .joinP2List dd .t .name {
                font-size: 32px;
            }

        .joinP2List dd .c {
            position: absolute;
            left: 8%;
            top: 50%;
            width: 288px;
            height: 124px;
            overflow: hidden;
            color: #646464;
            opacity: 0;
            visibility: hidden;
        }

        .joinP2List dd.act .bg {
            background-color: rgba(255, 255, 255, 0.9);
            z-index: 0;
        }

        .joinP2List dd.act .num {
            color: #323232;
            opacity: 1;
            filter: alpha(opacity=100);
        }

        .joinP2List dd.act .t {
            left: 8%;
            top: 25%;
            color: #e60012;
        }

        .joinP2List dd.act .c {
            opacity: 1;
            visibility: visible;
        }

.joinP3List li {
    float: left;
    display: block;
    width: 35%;
    padding-left: 10%;
    margin-right: 5%;
    height: 108px;
    position: relative;
}

    .joinP3List li .num {
        background-color: #ff0000;
        width: 50px;
        height: 50px;
        color: #fff;
        line-height: 50px;
        text-align: center;
        display: block;
        position: absolute;
        left: 0px;
        top: 0px;
        border-radius: 50%;
        font-size: 30px;
    }

#joinPage3 {
    padding-bottom: 106px;
}

#joinPage4 {
    background-color: #fff;
    width: 90%;
    margin: 0px auto;
    padding-bottom: 100px;
}

.procesPage {
    position: relative;
    overflow: hidden;
    padding: 50px 0px;
}

.proces_line {
    height: 100%;
    position: absolute;
    left: 50%;
    top: 0px;
    width: 1px;
    background-color: #a0a0a0;
}

.proces_ico {
    background: url(../images/d.png) no-repeat;
    width: 9px;
    height: 9px;
    position: absolute;
    left: 50%;
    top: 0px;
    margin-left: -4px;
}

.proces_bot2 {
    background: url(../images/d2.png) no-repeat;
    width: 23px;
    height: 17px;
    display: block;
    margin: 30px auto 0px;
}

.procesDl a:link,
.procesDl a:visited {
    color: #58595b;
}

.procesDl a:active,
.procesDl a:hover {
    color: #CD000F;
}

.procesDl {
    width: 692px;
    margin: 0px auto;
    height: 362px;
    overflow: hidden;
    position: relative;
}

    .procesDl dd {
        padding-left: 50%;
        width: 50%;
        position: relative;
        cursor: url(../images/mouse.ico) 16 16, default;
    }

        .procesDl dd .num {
            float: left;
            display: block;
            width: 132px;
            border-bottom: 1px solid #a0a0a0;
            color: #323232;
            text-align: right;
            font: 40px/1.5 "microsoft yahei";
            margin-right: 36px;
        }

        .procesDl dd .c {
            float: left;
            display: block;
            width: 178px;
            padding: 20px 0px 0px;
            color: #58595b;
        }

        .procesDl dd.two {
            padding: 0px 50% 0px 0px;
        }

            .procesDl dd.two .num {
                float: right;
                margin: 0px 0px 0px 36px;
                text-align: left;
            }

.joinP5List {
    width: 90%;
    margin: 0px auto;
}

    .joinP5List dd {
        margin-left: 1%;
        width: 19%;
        float: left;
        display: block;
    }

        .joinP5List dd.lin1 {
            margin-left: 0;
        }

    .joinP5List .img {
        width: 100%;
        overflow: hidden;
        position: relative;
    }

        .joinP5List .img img {
            width: 100%;
            display: block;
        }

    .joinP5List .con {
        background: url(../images/red_2.png) repeat;
        background: none rgba(230, 0, 18, 0.9);
        position: absolute;
        left: 0px;
        width: 100%;
        height: 100%;
        top: 100%;
        transition: all 0.5s ease 0s;
        -webkit-transform: all 0.5s ease 0s;
    }

        .joinP5List .con .txt {
            width: 80%;
            border-top: 1px solid #fff;
            margin: 30px auto;
            font-size: 12px;
            color: #fff;
            padding-top: 30px;
        }

    .joinP5List .bot {
        position: relative;
        overflow: hidden;
        margin-top: 2px;
        padding: 26px 0px;
    }

        .joinP5List .bot p {
            position: relative;
            z-index: 2;
            transition: all 0.3s ease 0s;
            -webkit-transform: all 0.3s ease 0s;
        }

        .joinP5List .bot .name {
            font-size: 20px;
            color: #333;
            line-height: 1.4;
        }

    .joinP5List .bg {
        background: url(../images/red_2.png) repeat;
        background: none rgba(230, 0, 18, 0.9);
        position: absolute;
        left: 0px;
        top: 0px;
        width: 0;
        height: 100%;
        transition: all 0.4s ease 0s;
        -webkit-transform: all 0.4s ease 0s;
    }

    .joinP5List dd:hover .bg {
        width: 100%;
    }

    .joinP5List dd:hover p.name {
        color: #fff;
    }

    .joinP5List dd:hover p {
        padding: 0px 8px;
        color: #fff;
    }

#joinPage6 {
    padding-bottom: 100px;
}

.joinP6List a:link,
.joinP6List a:visited {
    color: #fff;
}

.joinP6List a:active,
.joinP6List a:hover {
    color: #fff;
}

.joinP6List {
    width: 1024px;
    margin: 0px auto;
}

    .joinP6List .t {
        font-size: 18px;
        color: #333;
        font-weight: bold;
        margin-bottom: 26px;
    }

    .joinP6List dd {
        float: left;
        display: block;
        padding: 40px;
        background-color: #fff;
    }

    .joinP6List .telIbox {
        width: 264px;
        margin-right: 12px;
    }

    .joinP6List .formBox {
        float: left;
        display: block;
        width: 588px;
    }

    .joinP6List .selbox {
        background-color: #fff;
        width: 90%;
    }

.telIbox .ttel {
    padding: 30px 0px;
    font-size: 16px;
    color: #323232;
}

.joinP6List .line {
    height: 1px;
    margin: 14px auto;
    display: block;
    width: 100%;
}

.fromT1 {
    border: 0px none;
    border-bottom: 1px solid #eeeeee;
    background-color: #fff;
    height: 32px;
    line-height: 32px;
    width: 134px;
    padding: 0px 0px 0px 6px;
}

.fromT3 {
    width: 208px;
}

.fromT4 {
    width: 100%;
}

.fromT2 {
    width: 96%;
    height: 170px;
    resize: none;
    padding: 12px 2%;
    font-size: 12px;
    color: #323232;
    border: 1px solid #E4E4E4;
    margin-bottom: 30px;
    outline: none;
}

.fromBtn {
    width: 160px;
    background: #e60012;
    margin: 0px auto;
    display: block;
    text-align: center;
    height: 45px;
    line-height: 45px;
}

.formBox .selbox {
    float: left;
    margin: 0px 0px 0px 8px;
    display: block;
    width: 30%;
}

.formBox table {
    font-size: 12px;
    color: #323232;
}

.formTBL1 td {
    padding-bottom: 10px;
}

.joinP6List table td {
    position: relative;
}

.joinP6List .ts {
    position: absolute;
    right: 0px;
    bottom: 10px;
}

/*distributor style end*/
/*partner style*/
.partnerImgDemo {
    background-repeat: repeat-x;
    position: relative;
    background-position: center center;
}

    .partnerImgDemo .bg {
        background: url(../images/red_1.png) repeat;
        background: none rgba(223, 0, 36, 0.9);
        position: absolute;
        left: 0px;
        top: 0px;
        width: 100%;
        height: 100%;
        opacity: 0;
        visibility: hidden;
    }

    .partnerImgDemo .inner {
        position: relative;
        z-index: 2;
        padding: 60px 0px;
        position: relative;
        opacity: 0;
        visibility: hidden;
    }

.jmap {
    margin: 0px auto;
    display: block;
    -webkit-transform: scale(0.8);
    transform: scale(0.8);
}

.partnerImgDemo .c {
    position: absolute;
    left: 0px;
    bottom: 60px;
    color: #fff;
    font-size: 16px;
}

.partnerImgDemo:hover .bg,
.partnerImgDemo:hover .inner {
    opacity: 1;
    visibility: visible;
}

.partnerImgDemo:hover .jmap {
    -webkit-transform: scale(1);
    transform: scale(1);
}

.storyPage a:link,
.storyPage a:visited {
    color: #323232;
}

.storyPage a:active,
.storyPage a:hover {
    color: #CD000F;
}

.storyPage {
    padding: 80px 0px;
}

    .storyPage dd {
        background-color: #fff;
        overflow: hidden;
        position: relative;
    }

    .storyPage .img {
        float: left;
        display: block;
        width: 50%;
        overflow: hidden;
    }

        .storyPage .img img {
            width: 100%;
            display: block;
            -webkit-transition: 0.5s;
            -moz-transition: 0.5s;
            -o-transition: 0.5s;
            transition: 0.5s;
        }

    .storyPage .ln {
        background: url(../images/lingx.png) no-repeat scroll center center;
        height: 100%;
        position: absolute;
        left: 50%;
        width: 49px;
        display: block;
    }

    .storyPage .two .img {
        float: right;
    }

    .storyPage .two .ln {
        left: auto;
        right: 50%;
    }

    .storyPage .con {
        float: left;
        display: block;
        width: 40%;
        padding: 4% 5% 0px;
        position: relative;
        z-index: 2;
    }

        .storyPage .con .t {
            font-size: 26px;
            color: #323232;
            line-height: 1.4;
            height: 89px;
            margin-bottom: 16px;
        }

            .storyPage .con .t .bot {
                width: 0px;
                height: 1px;
                background-color: #df0024;
                display: block;
                margin-bottom: 15px;
            }

        .storyPage .con .c {
            height: 76px;
            overflow: hidden;
            margin-bottom: 8%;
            color: #323232;
        }

        .storyPage .con .storyMore {
            border: 1px solid #9a9a9a;
            width: 124px;
            height: 40px;
            line-height: 40px;
            display: block;
            text-align: center;
        }

    .storyPage dd:hover .ln {
        margin-left: -24px;
    }

    .storyPage dd:hover .con .bot {
        width: 100%;
    }

    .storyPage dd:hover .storyMore {
        background-color: #df0024;
        border-color: #df0024;
        color: #fff;
    }

    .storyPage dd:hover .img img {
        -webkit-transform: scale(1.1);
        transform: scale(1.1);
    }

    .storyPage dd.two:hover .ln {
        margin-right: -24px;
    }

.ledMore {
    width: 160px;
    height: 52px;
    line-height: 52px;
    margin: 0px auto;
    border-color: #9a9a9a;
}

    .ledMore .i1 {
        color: #323232;
    }

    .ledMore .i2 {
        border-color: transparent transparent transparent #9a9a9a;
    }

    .ledMore .i3 {
        border-color: transparent #9a9a9a transparent transparent;
    }

.storeQueryPage {
    padding: 80px 0px;
}

.sotreQuery a:link,
.sotreQuery a:visited {
    color: #333;
}

.sotreQuery a:active,
.sotreQuery a:hover {
    color: #CD000F;
}

.sotreQuery {
    border-bottom: 1px solid #a0a0a0;
    padding-bottom: 22px;
    margin-bottom: 42px;
}

    .sotreQuery .selbox {
        float: left;
        display: block;
    }

    .sotreQuery .selbtn {
        width: 58px;
        height: 38px;
        line-height: 38px;
        float: left;
        display: block;
        text-align: center;
    }

.filler {
    position: absolute;
    display: block;
    -webkit-transition: 0.6s ease 0s;
    -moz-transition: 0.6s 0s;
    -o-transition: 0.6s 0s;
    transition: 0.6s 0s;
}

.filler {
    background-color: #e60012;
    z-index: 5;
}

.filler-left {
    width: 1px;
    height: 0%;
    left: 0%;
    bottom: 0%;
}

.filler-right {
    width: 1px;
    height: 0%;
    right: 0%;
    top: 0%;
}

.filler-top {
    width: 0%;
    height: 1px;
    left: 0%;
    top: 0%;
}

.filler-bottom {
    width: 0%;
    height: 1px;
    right: 0%;
    bottom: 0%;
}

.item:hover .filler-left {
    height: 100%;
}

.item:hover .filler-right {
    height: 100%;
}

.item:hover .filler-top {
    width: 100%;
}

.item:hover .filler-bottom {
    width: 100%;
}

.sotreQueryList a:link,
.sotreQueryList a:visited {
    color: #333;
}

.sotreQueryList a:active,
.sotreQueryList a:hover {
    color: #CD000F;
}

.sotreQueryList ul {
    margin-left: -2%;
}

.sotreQueryList li {
    float: left;
    display: block;
    width: 31.33%;
    margin-left: 2%;
    margin-bottom: 25px;
}

.sotreQueryList .item {
    display: block;
    position: relative;
    background-color: #fff;
    padding: 20px 20px 20px 176px;
    height: 136px;
}

    .sotreQueryList .item .img {
        position: absolute;
        left: 20px;
        top: 20px;
        width: 136px;
        height: 136px;
    }

.sotreQueryList .con {
    position: relative;
    height: 100%;
    overflow: hidden;
}

    .sotreQueryList .con .add {
        color: #333;
    }

.sotreQueryList .bot {
    position: absolute;
    left: 0px;
    bottom: -40px;
    font-size: 12px;
    color: #646464;
}

    .sotreQueryList .bot .moret {
        background: url(../images/more_i5.png) no-repeat scroll 80% center #e60012;
        padding: 4px 45px 4px 10px;
        color: #fff;
        display: block;
        margin-top: 10px;
    }

.sotreQueryList .item:hover .bot {
    bottom: 0px;
}

.partnerInfoPage {
    width: 914px;
    margin: 0px auto;
    padding: 60px 0px;
}

    .partnerInfoPage .tname {
        font-size: 30px;
        color: #333;
        text-align: center;
    }

.partnerTbl {
    border-bottom: 1px solid #e5e5e5;
    border-top: 1px solid #e5e5e5;
    padding: 18px 0px 40px;
    margin: 50px 0px;
}

    .partnerTbl a:link,
    .partnerTbl a:visited {
        color: #646464;
    }

    .partnerTbl a:active,
    .partnerTbl a:hover {
        color: #CD000F;
    }

    .partnerTbl dd {
        float: left;
        display: block;
        width: 33.33%;
        color: #646464;
    }

    .partnerTbl .t {
        color: #333;
        float: left;
        display: block;
        width: 44px;
    }

    .partnerTbl .c {
        width: 60%;
        float: left;
        display: block;
    }

    .partnerTbl .lin3 .t {
        width: 60px;
    }

.partnerInfoPage .pageC {
    overflow: hidden;
    margin-bottom: 50px;
}

/*partner style end*/

/*微信弹出*/
.popUpblack {
    background: url(../images/black_bg4.png) repeat;
    width: 100%;
    height: 100%;
    position: fixed;
    left: 0px;
    top: 0px;
    z-index: 1010;
    display: none;
}

.popUp {
    width: 220px;
    height: 242px;
    border: 5px solid #999;
    background: #fff;
    position: fixed;
    left: 50%;
    top: 50%;
    margin: -87px 0 0 -115px;
    z-index: 1004;
}

    .popUp .t {
        padding: 0 0 0 10px;
        height: 26px;
        line-height: 26px;
        color: #666;
        font-weight: bold;
        border-bottom: 1px solid #e8e8e8;
        background: #f2f2f2;
    }

        .popUp .t .close {
            padding: 0 10px 0 0;
            float: right;
            cursor: pointer;
            color: #666;
            font-weight: normal;
        }

    .popUp .img {
        padding: 20px;
    }

        .popUp .img img {
            width: 100%;
            height: 100%;
            display: block;
        }

/*微信弹出 end*/

/*prodcut style*/
.pagenavBox2 {
    height: 90px;
}

    .pagenavBox2 .pnavbox {
        line-height: 100%;
    }

        .pagenavBox2 .pnavbox span {
            padding: 25px 0px 0px;
        }

        .pagenavBox2 .pnavbox .pi {
            display: block;
            margin: 0px auto 10px;
            width: 24px;
            height: 24px;
        }

        .pagenavBox2 .pnavbox a {
            padding: 15px 36px;
            height: 60px;
            line-height: 100%;
        }

            .pagenavBox2 .pnavbox a.act {
                background: #C20513;
            }

                .pagenavBox2 .pnavbox a.act .bot {
                    opacity: 1;
                    visibility: visible;
                }

            .pagenavBox2 .pnavbox a span {
                padding: 0px;
            }

.proListBanner {
    overflow: hidden;
    position: relative;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
    width: 100%;
    margin-bottom: 2%;
    height: 500px;
    width: 100%;
}

    .proListBanner .proinner {
        position: absolute;
        width: 986px;
        left: 50%;
        top: 50%;
        height: 432px;
        margin: -216px 0px 0px -493px;
    }

    .proListBanner .img {
        width: 100%;
        display: block;
    }

    .proListBanner .bg {
        background-color: #fff;
        filter: alpha(opacity=50);
        opacity: 0.5;
        display: block;
        position: absolute;
        left: 0px;
        top: 0px;
        width: 100%;
        height: 100%;
    }

    .proListBanner .pcon {
        position: relative;
        padding: 54px 8% 0px;
        display: block;
        color: #323232;
    }

    .proListBanner .t {
        color: #e60012;
        float: left;
        display: block;
        position: relative;
    }

        .proListBanner .t .name {
            font-size: 80px;
            line-height: 1;
        }

        .proListBanner .t .en {
            font: 14px/1.2 "humanist_521_lightregular", "times new roman", "microsoft yahei";
            text-transform: uppercase;
            position: absolute;
            left: 110%;
            top: 5px;
        }

        .proListBanner .t i {
            background: url(../images/hao.png) no-repeat;
            width: 13px;
            height: 22px;
            position: absolute;
            left: 110%;
            bottom: 0px;
        }

    .proListBanner .title {
        font: 30px/1.4 "microsoft yahei";
        margin-bottom: 30px;
    }

    .proListBanner .c {
        width: 80%;
        margin: 18px auto 0px;
        font-size: 16px;
        height: 187px;
        overflow: hidden;
    }

    .proListBanner .mz6,
    .proListBanner .mz7 {
        color: #e60012;
        font: 112px/1 "humanist_521_lightregular", "times new roman", "microsoft yahei";
        text-transform: uppercase;
        filter: alpha(opacity=20);
        opacity: 0.2;
        position: absolute;
        right: 8%;
    }

    .proListBanner .mz6 {
        bottom: 5%;
    }

    .proListBanner .mz7 {
        bottom: -5%;
        right: 5%;
    }

    .proListBanner .ico {
        position: absolute;
        right: 10%;
        top: 20%;
    }

.proInfoBox {
    width: 92%;
    margin: 0px auto;
}

    .proInfoBox dd {
        float: left;
        display: block;
        margin-top: 50px;
        width: 49%;
        padding-bottom: 48px;
        position: relative;
    }

        .proInfoBox dd.two {
            margin-left: 2%;
        }

        .proInfoBox dd .img {
            width: 100%;
            display: block;
            overflow: hidden;
            position: relative;
        }

        .proInfoBox dd .bg {
            background: url(../images/black_2.png) repeat;
            position: absolute;
            left: 0px;
            top: 0px;
            width: 100%;
            height: 100%;
            opacity: 0;
            visibility: hidden;
            -webkit-transition: 0.3s;
            -moz-transition: 0.3s;
            -o-transition: 0.3s;
            transition: 0.3s;
        }

        .proInfoBox dd .img img {
            width: 100%;
            display: block;
            -webkit-transition: 0.5s;
            -moz-transition: 0.5s;
            -o-transition: 0.5s;
            transition: 0.5s;
        }

        .proInfoBox dd .con {
            position: absolute;
            left: 0px;
            bottom: 0px;
            border: 1px solid #eeeeee;
            padding: 25px 5%;
            width: 74%;
            background-color: #fff;
            color: #646464;
            -webkit-transition: 0.5s;
            -moz-transition: 0.5s;
            -o-transition: 0.5s;
            transition: 0.5s;
        }

            .proInfoBox dd .con .t {
                font-size: 22px;
                line-height: 1.4;
                text-transform: uppercase;
                color: #333;
                margin-bottom: 30px;
            }

        .proInfoBox dd:hover .bg {
            opacity: 1;
            visibility: visible;
        }

        .proInfoBox dd:hover .img img {
            -webkit-transform: scale(1.1);
            transform: scale(1.1);
        }

        .proInfoBox dd:hover .con {
            transform: translateY(-20px);
            -webkit-transform: translateY(-20px);
        }

.prolistPage {
    width: 100%;
    margin: 0px auto;
}

    .prolistPage .title {
        border-bottom: 1px solid #a0a0a0;
        margin: 40px auto;
        font-size: 20px;
        color: #333;
        padding-bottom: 15px;
    }

.prolist {
    margin-left: -2%;
}

    .prolist a:link,
    .prolist a:visited {
        color: #333;
    }

    .prolist a:active,
    .prolist a:hover {
        color: #CD000F;
    }

    .prolist dd {
        float: left;
        display: block;
        width: 31%;
        margin: 0px 0px 2% 2%;
        position: relative;
    }

    .prolist .img {
        width: 100%;
        overflow: hidden;
        position: relative;
        cursor: pointer;
    }

        .prolist .img .ico {
            background: url(../images/fd2.png) no-repeat;
            width: 44px;
            height: 44px;
            position: absolute;
            left: 50%;
            top: 50%;
            margin: -22px 0px 0px -22px;
            -webkit-transform: scale(0);
            transform: scale(0);
            opacity: 0;
            filter: alpha(opacity=0);
            -webkit-transition: 0.4s;
            -moz-transition: 0.4s;
            -o-transition: 0.4s;
            transition: 0.4s;
        }

        .prolist .img img {
            width: 100%;
            display: block;
            -webkit-transition: 0.5s;
            -moz-transition: 0.5s;
            -o-transition: 0.5s;
            transition: 0.5s;
        }

    .prolist .name {
        position: absolute;
        left: 78%;
        top: 8%;
        width: 22%;
        font: 18px/1.4 "microsoft yahei";
        color: #333;
        display: none;
    }

    .prolist .linkbox {
        position: absolute;
        right: 3%;
        bottom: 5%;
    }

        .prolist .linkbox a {
            width: 34px;
            height: 34px;
            display: block;
            margin-top: 10px;
        }

            .prolist .linkbox a i {
                display: block;
                background: url(../images/ii1.png) no-repeat;
                width: 100%;
                height: 100%;
                display: block;
                -webkit-transition: 0.5s;
                -moz-transition: 0.5s;
                -o-transition: 0.5s;
                transition: 0.5s;
            }

            .prolist .linkbox a.ico2 i {
                background-image: url(../images/ii2.png);
            }

    .prolist .two .img {
        margin-left: 24%;
    }

    .prolist .two .name {
        left: 2%;
    }

    .prolist .two .linkbox {
        right: 80%;
    }

    .prolist .linkbox a:hover i {
        transform: rotateY(180deg);
    }

    .prolist .img:hover img {
        -webkit-transform: scale(1.1);
        transform: scale(1.1);
        opacity: 0.5;
        filter: alpha(opacity=50);
    }

    .prolist .img:hover .ico {
        -webkit-transform: scale(1);
        transform: scale(1);
        opacity: 1;
        filter: alpha(opacity=100);
    }

.imgShowDemo .owl-controls .owl-buttons div {
    position: absolute;
    padding: 0px;
    margin: 0px;
    width: 64px;
    height: 58px;
    border: 1px solid #a0a0a0;
    border-radius: 10px;
    background-color: transparent;
    overflow: hidden;
    top: 50%;
    margin-top: -30px;
    background-position: center center;
    background-repeat: no-repeat;
    text-indent: -10em;
}

    .imgShowDemo .owl-controls .owl-buttons div.owl-prev {
        left: 3%;
        background-image: url(../images/p_l3.png);
    }

    .imgShowDemo .owl-controls .owl-buttons div.owl-next {
        right: 3%;
        background-image: url(../images/p_r3.png);
    }

        .imgShowDemo .owl-controls .owl-buttons div.owl-prev:hover,
        .imgShowDemo .owl-controls .owl-buttons div.owl-next:hover {
            border: 1px solid #ba002a;
            background-color: #ba002a;
        }

        .imgShowDemo .owl-controls .owl-buttons div.owl-prev.disabled,
        .imgShowDemo .owl-controls .owl-buttons div.owl-next.disabled {
            background-color: #252525;
        }

        .imgShowDemo .owl-controls .owl-buttons div.owl-prev.disabled,
        .imgShowDemo .owl-controls .owl-buttons div.owl-next.disabled {
            border: 1px solid #252525;
        }

.proBot {
    padding: 90px 0px;
    position: relative;
}

    .proBot .more {
        background-color: #dcdcdc;
        border-color: #dcdcdc;
        width: 426px;
        height: 88px;
        line-height: 88px;
        margin: 0px auto;
    }

        .proBot .more .i1 {
            color: #333;
            background: url(../images/wz.png) no-repeat scroll left center;
            padding-left: 35px;
            display: inline-block;
        }

        .proBot .more:hover .i2 {
            border-width: 260px 0 0 260px;
        }

        .proBot .more:hover .i3 {
            border-width: 0 260px 260px 0;
        }

    .proBot .moreR {
        bottom: 90px;
        height: 88px;
        line-height: 88px;
        border: 1px solid #d2d2d2;
        font-size: 14px;
    }

        .proBot .moreR .img {
            vertical-align: middle;
            margin-right: 18px;
        }

        .proBot .moreR:hover {
            background-color: #D2D2D2;
            color: #333;
        }

        .proBot .moreR .ico {
            background-image: url(../images/more_rico.png);
        }

/*prodcut style end*/
/*join style*/
.transYT {
    transform: translateY(50px);
    -webkit-transform: translateY(50px);
    opacity: 0;
    visibility: hidden;
    transition: transform 600ms, opacity .5s cubic-bezier(0.445, 0.145, 0.355, 1);
    -webkit-transition: transform 600ms, opacity .5s cubic-bezier(0.445, 0.145, 0.355, 1);
    transition-timing-function: ease-out;
    -webkit-transition-timing-function: ease-out;
}

.transYT2 {
    transform: translateY(-50px);
    -webkit-transform: translateY(-50px);
    opacity: 0;
    visibility: hidden;
    transition: transform 600ms, opacity .5s cubic-bezier(0.445, 0.145, 0.355, 1);
    -webkit-transition: transform 600ms, opacity .5s cubic-bezier(0.445, 0.145, 0.355, 1);
    transition-timing-function: ease-out;
    -webkit-transition-timing-function: ease-out;
}

.transXT {
    transform: translateX(50px);
    -webkit-transform: translateX(50px);
    opacity: 0;
    visibility: hidden;
    transition: transform 600ms, opacity .5s cubic-bezier(0.445, 0.145, 0.355, 1);
    -webkit-transition: transform 600ms, opacity .5s cubic-bezier(0.445, 0.145, 0.355, 1);
    transition-timing-function: ease-out;
    -webkit-transition-timing-function: ease-out;
}

.transXT2 {
    transform: translateX(-50px);
    -webkit-transform: translateX(-50px);
    opacity: 0;
    visibility: hidden;
    transition: transform 600ms, opacity .5s cubic-bezier(0.445, 0.145, 0.355, 1);
    -webkit-transition: transform 600ms, opacity .5s cubic-bezier(0.445, 0.145, 0.355, 1);
    transition-timing-function: ease-out;
    -webkit-transition-timing-function: ease-out;
}

.action.transYT {
    opacity: 1;
    visibility: visible;
    transform: translateY(0px);
    -webkit-transform: translateY(0px);
}

.action.transYT2 {
    opacity: 1;
    visibility: visible;
    transform: translateY(0px);
    -webkit-transform: translateY(0px);
}

.action.transXT {
    opacity: 1;
    visibility: visible;
    transform: translateY(0px);
    -webkit-transform: translateY(0px);
}

.action.transXT2 {
    opacity: 1;
    visibility: visible;
    transform: translateY(0px);
    -webkit-transform: translateY(0px);
}

.dly_1 {
    transition-delay: 100ms;
    -webkit-transition-delay: 100ms;
}

.dly_2 {
    transition-delay: 200ms;
    -webkit-transition-delay: 200ms;
}

.dly_3 {
    transition-delay: 300ms;
    -webkit-transition-delay: 300ms;
}

.dly_4 {
    transition-delay: 400ms;
    -webkit-transition-delay: 400ms;
}

.dly_5 {
    transition-delay: 500ms;
    -webkit-transition-delay: 500ms;
}

.dly_6 {
    transition-delay: 600ms;
    -webkit-transition-delay: 600ms;
}

.dly_7 {
    transition-delay: 700ms;
    -webkit-transition-delay: 700ms;
}

.dly_8 {
    transition-delay: 800ms;
    -webkit-transition-delay: 800ms;
}

.pageTop {
    position: fixed;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 70px;
    z-index: 999;
    background-color: #fff;
}

.pageMTop {
    height: 70px;
}

.plogo {
    display: block;
    padding: 23px 0px 23px 2%;
}

.pageTop .plogo {
    position: absolute;
    left: 0px;
    top: 0px;
}

.pageTop a:link,
.pageTop a:visited {
    color: #323232;
}

.pageTop a:active,
.pageTop a:hover {
    color: #cf0418;
}

.mz-link {
    position: absolute;
    right: 0px;
    top: 0px;
    height: 100%;
    background-color: #cf0011;
}

    .mz-link .name {
        color: #fff;
        background: url(../images/mz_ico1.png) no-repeat scroll center 12px;
        padding: 44px 12px 0px;
        font-size: 12px;
        display: block;
    }

    .mz-link:hover {
        background-color: #af0000;
    }

.join-nav {
    display: block;
    width: 338px;
    margin: 0px auto;
}

    .join-nav li {
        float: left;
        display: block;
        padding: 0px 20px;
        height: 70px;
    }

    .join-nav a {
        display: block;
        line-height: 70px;
        text-align: center;
        font-size: 16px;
        position: relative;
    }

        .join-nav a .bot {
            width: 0px;
            position: absolute;
            left: 50%;
            bottom: 0px;
            height: 3px;
            background-color: #cf0011;
            transition: 0.3s;
            -webkit-transition: 0.3s;
        }

        .join-nav a:hover .bot,
        .join-nav a.act .bot {
            width: 100%;
            left: 0px;
        }

.jbanner {
    position: relative;
    overflow: hidden;
    width: 100%;
    height: 100%;
}

.pageFoot a:link,
.pageFoot a:visited {
    color: #FFF;
}

.pageFoot a:active,
.pageFoot a:hover {
    color: #FFF;
}

.pageFoot {
    background-color: #333000;
    color: #fff;
    font-size: 12px;
    padding: 10px 2%;
    position: relative;
}

.back-top {
    position: absolute;
    right: 0px;
    top: 0px;
    background: url(../images/page_black_top.png) no-repeat scroll center 7px;
    padding: 20px 5px 0px;
    height: 22px;
    display: block;
}

    .back-top:hover {
        background-position: center 0px;
    }

.join-type a:link,
.join-type a:visited {
    color: #323232;
}

.join-type a:active,
.join-type a:hover {
    color: #ce0217;
}

.join-type {
    width: 100%;
    position: absolute;
    width: 960px;
    left: 50%;
    top: 50%;
    margin: -122px 0px 0px -480px;
}

    .join-type .item {
        width: 245px;
        height: 245px;
        margin: 0px auto;
        text-align: center;
        font-size: 16px;
        color: #323232;
        overflow: hidden;
        z-index: 5;
    }

    .join-type .item1 {
        position: absolute;
        left: 0px;
        top: 0px;
    }

    .join-type .item3 {
        position: absolute;
        right: 0px;
        top: 0px;
    }

    .join-type .item a {
        display: block;
        position: relative;
        width: 100%;
        height: 100%;
    }

    .join-type .item .cbg1 {
        background: url(../images/jt_i1.png) no-repeat scroll center center;
    }

    .join-type .item .cbg2 {
        background: url(../images/jt_i2.png) no-repeat scroll center center;
    }

    .join-type .item .cbg1,
    .join-type .item .cbg2 {
        position: absolute;
        left: 0px;
        top: 0px;
        width: 100%;
        height: 100%;
        transition: all 0.5s ease 0s;
        -webkit-transform: all 0.5s ease 0s;
        z-index: 1;
        border-radius: 50%;
    }

    .join-type .item .cbg2 {
        opacity: 0;
        transform: scale(0.8);
        -webkit-transform: scale(0.8);
        visibility: hidden;
    }

    .join-type .item .con {
        position: absolute;
        z-index: 2;
        width: 90%;
        left: 5%;
        padding-top: 20%;
    }

    .join-type .item .ico {
        background: url(../images/j_i1.png) no-repeat;
        width: 54px;
        height: 54px;
        margin: 15px auto 8px;
        display: block;
    }

    .join-type .item1 .ico {
        background-image: url(../images/j_i1.png);
    }

    .join-type .item2 .ico {
        background-image: url(../images/j_i2.png);
    }

    .join-type .item3 .ico {
        background-image: url(../images/j_i3.png);
    }

    .join-type .item .bor {
        width: 20px;
        height: 20px;
        display: block;
        position: relative;
        margin: 8px auto;
        transition: 500ms;
        -webkit-transition: 500ms;
    }

        .join-type .item .bor i {
            background-color: #a0a0a0;
            position: absolute;
            display: block;
        }

            .join-type .item .bor i.i1 {
                left: 0px;
                top: 50%;
                width: 100%;
                height: 1px;
            }

            .join-type .item .bor i.i2 {
                left: 50%;
                top: 0;
                height: 100%;
                width: 1px;
                display: none;
            }

.join-type-line1,
.join-type-line2 {
    position: absolute;
    width: 49px;
    height: 1px;
    background-color: #fff;
    top: 50%;
}

.join-type-line1 {
    left: 29%;
}

.join-type-line2 {
    right: 29%;
}

.join-type .item:hover .cbg1 {
    opacity: 0;
    transform: scale(1.3);
    -webkit-transform: scale(1.3);
}

.join-type .item:hover .cbg2 {
    opacity: 1;
    transform: scale(1);
    -webkit-transform: scale(1);
    visibility: visible;
}

.join-type .item1:hover .ico {
    background-image: url(../images/j_i12.png);
}

.join-type .item2:hover .ico {
    background-image: url(../images/j_i22.png);
}

.join-type .item3:hover .ico {
    background-image: url(../images/j_i32.png);
}

.join-type .item:hover .bor {
    transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    -webkit-transform: rotate(180deg);
    -o-transform: rotate(180deg);
    -moz-transform: rotate(180deg);
}

    .join-type .item:hover .bor i {
        background-color: #ce0217;
    }

    .join-type .item:hover .bor .i2 {
        display: block;
    }

.addpbanner {
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
}

.pbanner .addCon {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 400px;
    margin: -68px 0px 0px -200px;
    color: #fff;
    text-align: center;
    transform: rotateX(30deg) rotateY(0deg) rotateZ(0deg);
    -webkit-transform: rotateX(30deg) rotateY(0deg) rotateZ(0deg);
    -webkit-transform-origin: center center;
    -ms-transform-origin: center center;
    transform-origin: center center;
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
    -webkit-transition: all 1s ease 0.2s;
    transition: all 1s ease 0.2s;
    opacity: 0;
}

    .pbanner .addCon .ico {
        width: 54px;
        height: 54px;
        display: block;
        margin: 0px auto;
    }

    .pbanner .addCon .zh {
        font-weight: bold;
        font-size: 30px;
    }

    .pbanner .addCon .line {
        width: 18px;
        height: 1px;
        background-color: #fff;
        display: block;
        margin: 10px auto 0px;
    }

    .pbanner .addCon.action {
        -webkit-transform: perspective(800px) rotateX(0) rotateY(0) rotateZ(0) translateX(0) !important;
        transform: perspective(800px) rotateX(0) rotateY(0) rotateZ(0) translateX(0) !important;
        opacity: 1;
    }

.j-bs {
    background-color: #cccccc;
    height: 56px;
    overflow: hidden;
}

    .j-bs .ico {
        background: url(../images/j1_i1.png) no-repeat scroll center center;
        width: 17px;
        height: 8px;
        display: block;
        margin: 24px auto 0px;
    }

.type-one a:link,
.type-one a:visited {
    color: #fff;
}

.type-one a:active,
.type-one a:hover {
    color: #fff;
}

.type-one dd {
    float: left;
    display: block;
    width: 50%;
    position: relative;
    overflow: hidden;
    color: #fff;
}

.type-one .img {
    width: 100%;
    display: block;
}

.type-one .t {
    font-weight: bold;
    font-size: 18px;
}

    .type-one .t .line {
        width: 26px;
        height: 4px;
        display: block;
        background-color: #fff;
        margin-top: 5px;
    }

.type-one .t1 {
    position: absolute;
    left: 5%;
    top: 5%;
    transition: 400ms;
    -webkit-transition: 400ms;
}

.type-one .black {
    background: url(../images/black_1.png) repeat;
    background: none rgba(0, 0, 0, 0.5);
    position: absolute;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
    display: block;
    opacity: 0;
    visibility: hidden;
    transition: 400ms;
    -webkit-transition: 400ms;
}

.type-one .con {
    position: absolute;
    left: 5%;
    top: 50%;
    width: 90%;
    margin-top: -71px;
    text-align: center;
    opacity: 0;
    visibility: hidden;
    transition: 400ms;
    -webkit-transition: 400ms;
    transform: translateY(30px);
    -webkit-transform: translateY(30px);
}

    .type-one .con .t .line {
        margin: 5px auto 40px;
    }

    .type-one .con .more {
        margin: 0px auto;
        width: 196px;
    }

.type-one dd:hover .t1 {
    transform: translateY(-30px);
    -webkit-transform: translateY(-30px);
    opacity: 0;
    visibility: hidden;
}

.type-one dd:hover .black {
    opacity: 1;
    visibility: visible;
}

.type-one dd:hover .con {
    transform: translateY(0px);
    -webkit-transform: translateY(0px);
    opacity: 1;
    visibility: visible;
}

.hr-T {
    font-weight: bold;
    font-size: 25px;
    color: #0c0c0c;
    text-align: center;
}

    .hr-T .line {
        width: 26px;
        height: 4px;
        display: block;
        background-color: #0c0c0c;
        margin: 5px auto 0px;
    }

.applicationBox {
    padding: 60px 0px 160px;
    background-position: center bottom;
}

.applicationList {
    position: relative;
    z-index: 1;
    width: 810px;
    margin: 55px auto 0px;
    text-align: center;
    color: #fff;
}

    .applicationList li {
        float: left;
        display: block;
        width: 176px;
        cursor: default;
        position: relative;
    }

        .applicationList li .line {
            float: left;
            display: block;
            width: 13px;
            margin: 37px 20px 0px;
            background: url(../images/j1_i2.png) no-repeat;
            height: 26px;
            overflow: hidden;
        }

    .applicationList .t {
        position: relative;
        width: 100px;
        height: 100px;
        line-height: 100px;
        float: left;
        display: block;
        border: 1px solid #cf0011;
        color: #0C0C0C;
        border-radius: 50%;
        transition: 400ms;
        -webkit-transition: 400ms;
    }

        .applicationList .t:hover {
            background-color: #cf0011;
            color: #fff;
        }

    .applicationList .item1 {
        width: 102px;
    }

        .applicationList .item1 .line {
            display: none;
        }

.problemBox a:link,
.problemBox a:visited {
    color: #323232;
}

.problemBox a:active,
.problemBox a:hover {
    color: #ce0217;
}

.problemBox {
    background-color: #ececec;
    padding: 60px 0px;
    margin-bottom: 80px;
}

    .problemBox dt {
        height: 6px;
        padding: 40px 0px 20px;
    }

        .problemBox dt .line {
            width: 60px;
            height: 6px;
            background-color: #333;
            display: block;
        }

    .problemBox dd {
        float: left;
        display: inline-block;
        width: 46%;
        margin: 0px 4% 0px 0px;
    }

    .problemBox .t {
        font-weight: bold;
        color: #323232;
        margin-bottom: 14px;
    }

    .problemBox .c {
        color: #646464;
    }

    .problemBox .twoItem {
        margin: 0px 0px 0px 4%;
    }

.problemList .item {
    margin-bottom: 22px;
}

.join-select {
    padding: 70px 0px;
    color: #323232;
}

    .join-select dd {
        float: left;
        display: block;
        width: 64%;
    }

    .join-select .item1,
    .join-select .item3 {
        padding: 15px 0px;
        width: 18%;
    }

    .join-select .item1 {
        font-weight: bold;
    }

select.selbox2 {
    background-color: #fff;
    border: 1px solid #c9c9c9;
    padding: 12px 0px 15px 2%;
    line-height: 1.8;
    height: auto;
    width: 30%;
    margin-right: 2%;
}

.join-select select.selbox2 {
    float: left;
    display: block;
}

.join-btn {
    color: #fff;
    width: 98px;
    height: 34px;
    line-height: 34px;
    text-align: center;
    display: block;
    background-color: #cf0011;
    float: right;
}

    .join-btn:hover {
        background-color: #0C0C0C;
    }

.join-list {
    background-color: #eeeeee;
    padding-bottom: 38px;
    color: #323232;
}

    .join-list dt {
        background-color: #ca5c65;
        color: #fff;
        height: 50px;
        line-height: 50px;
        margin-bottom: 15px;
    }

    .join-list .embox {
        float: left;
        display: inline-block;
        width: 16%;
    }

    .join-list .plem {
        padding-left: 28px;
        display: inline-block;
    }

    .join-list .em1 {
        width: 40%;
        position: relative;
    }

    .join-list .em4 {
        width: 12%;
    }

    .join-list .joinDD {
        cursor: pointer;
        transition: 400ms;
        -webkit-transition: 400ms;
        -moz-transition: 400ms;
        -ms-transition: 400ms;
    }

        .join-list .joinDD a {
            color: #323232;
        }

        .join-list .joinDD .jt {
            padding: 10px 0px;
        }

    .join-list .ib {
        width: 17px;
        height: 17px;
        margin-top: 4px;
        display: block;
        position: absolute;
        left: 0px;
        top: 0px;
        transition: 400ms;
        -webkit-transition: 400ms;
        -moz-transition: 400ms;
        -ms-transition: 400ms;
        opacity: 0;
        visibility: hidden;
        transform: rotate(-45deg);
        -webkit-transform: rotate(-45deg);
        -o-transform: rotate(-45deg);
        -moz-transform: rotate(-45deg);
    }

        .join-list .ib i {
            display: block;
            background-color: #070707;
        }

        .join-list .ib .ic1 {
            width: 1px;
            height: 17px;
            margin-left: 9px;
        }

        .join-list .ib .ic2 {
            width: 17px;
            height: 1px;
            position: absolute;
            left: 0;
            top: 50%;
            margin-top: -1px;
        }

    .join-list .joinDD:hover {
        background-color: #d2d2d2;
    }

        .join-list .joinDD:hover .ib {
            transform: rotate(0deg);
            -webkit-transform: rotate(0deg);
            -o-transform: rotate(0deg);
            -moz-transform: rotate(0deg);
            opacity: 1;
            visibility: visible;
        }

.align-vertical {
    height: 100%;
    width: 100%;
    position: relative;
    display: table;
}

.vertical-inner {
    display: table-cell;
    vertical-align: middle;
}

.joinPage {
    background-color: #fff;
    border-bottom: 1px solid #cf0011;
    margin: 0px auto;
    position: relative;
    transform: translateY(50px);
    -webkit-transform: translateY(50px);
    opacity: 0;
    visibility: hidden;
    transition: transform 600ms, opacity .5s cubic-bezier(0.445, 0.145, 0.355, 1);
    -webkit-transition: transform 600ms, opacity .5s cubic-bezier(0.445, 0.145, 0.355, 1);
    transition-timing-function: ease-out;
    -webkit-transition-timing-function: ease-out;
}

.md-show .joinPage {
    opacity: 1;
    visibility: visible;
    transform: translateY(0px);
    -webkit-transform: translateY(0px);
}

.md-show .md-modal {
    opacity: 1;
    visibility: visible;
}

.md-modal {
    position: fixed;
    left: 0px;
    top: 0px;
    overflow-y: auto;
    right: 0px;
    bottom: 0px;
    z-index: 1000;
    opacity: 0;
    background: url(../images/black_50.png) repeat;
    background: none rgba(0, 0, 0, 0.5);
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    transition: all 0.3s;
    -webkit-overflow-scrolling: touch;
}

.md-overlay {
    position: fixed;
    left: 0px;
    top: 0px;
    bottom: 0px;
    right: 0px;
    background: url(../images/black_50.png) repeat;
    background: none rgba(0, 0, 0, 0.50);
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

.blackBox {
    background-color: #830000;
    font-size: 16px;
    padding: 15px 0px;
    font-weight: bold;
    display: none;
    cursor: pointer;
}

    .blackBox span {
        background: url(../images/imgl3.png) no-repeat scroll 5px center;
        padding-left: 32px;
        color: #fff;
        margin-left: 5%;
        display: block;
    }

.joinPage dt {
    height: 48px;
    line-height: 48px;
    margin-bottom: 0px;
    border-bottom: 1px solid #cf0011;
}

.joinPage .joinP-dd .ib i {
    background-color: #d72b39;
}

.joinPage .joinP-dd .ib {
    opacity: 1;
    visibility: visible;
}

.joinPage .joinP-dd .jt {
    padding: 6px 0px;
    border-bottom: 1px solid #a0a0a0;
}

.joinP-dd .jd {
    padding: 30px 0px 45px;
}

.joinP-dd .pageC {
    margin: 0px 28px;
}

.paging2 a:link,
.paging2 a:visited {
    color: #323232;
}

.paging2 a:active,
.paging2 a:hover {
    color: #ce0217;
}

.paging2 {
    text-align: center;
    padding: 32px 0px;
    margin-bottom: 60px;
}

    .paging2 a,
    .paging2 span {
        border: 1px solid #fff;
        padding: 2px 10px;
        margin: 0px 5px;
        border-radius: 50%;
        display: inline-block;
    }

        .paging2 a.next,
        .paging2 a.prev {
            border: 1px solid #b40618;
            border-radius: 0px;
            width: 102px;
            height: 46px;
            line-height: 46px;
            display: block;
        }

        .paging2 a.prev {
            float: left;
            background: url(../images/paging_l3.png) no-repeat scroll center center;
        }

        .paging2 a.next {
            float: right;
            background: url(../images/paging_r3.png) no-repeat scroll center center;
        }

            .paging2 a.prev:hover,
            .paging2 a.next:hover {
                background-color: #b40618;
            }

        .paging2 a.prev:hover {
            background-image: url(../images/paging_l4.png);
        }

        .paging2 a.next:hover {
            background-image: url(../images/paging_r4.png);
        }

    .paging2 span {
        border-color: #b60c1d;
    }

.jtype-list a:link,
.jtype-list a:visited {
    color: #fff;
}

.jtype-list a:active,
.jtype-list a:hover {
    color: #fff;
}

.jtype-list dd {
    float: left;
    display: block;
    width: 50%;
}

.jtype-list .item1 a {
    background-color: #00a0e9;
}

.jtype-list .item2 a {
    background-color: #e3b564;
}

.jtype-list a {
    display: block;
    position: relative;
    padding: 36px 4%;
    font-weight: bold;
    font-size: 16px;
}

.jtype-list img.vm {
    margin-right: 18px;
    -webkit-transition: 0.3s;
    -moz-transition: 0.3s;
    -o-transition: 0.3s;
    transition: 0.3s;
}

.jtype-list .j-more {
    background: url(../images/j4_more.png) no-repeat scroll center center;
    width: 8px;
    height: 100%;
    position: absolute;
    right: 4%;
    top: 0px;
    float: right;
    display: block;
}

.jtype-list dd:hover a {
    background-color: #828282;
}

.jtype-list dd:hover img.vm {
    transform: translateY(-6px);
    -webkit-transform: translateY(-6px);
}

.jnew-Pbox {
    background-color: #f8f8f8;
    position: relative;
}

    .jnew-Pbox .jnew-Pbox-t,
    .jnew-Pbox .jnew-Pbox-c {
        float: left;
        display: block;
        height: 378px;
    }

.jnew-Pbox-t {
    width: 26%;
}

    .jnew-Pbox-t .t {
        position: absolute;
        left: 2%;
        top: 32px;
        background: url(../images/j4_i3.png) no-repeat scroll left top;
        padding-left: 70px;
        color: #323232;
    }

        .jnew-Pbox-t .t .zh {
            display: block;
            line-height: 52px;
            font-weight: bold;
            font-size: 16px;
            margin-bottom: 8%;
        }

        .jnew-Pbox-t .t .en {
            font: 22px/1.1 "humanist_521_lightregular", "microsoft yahei";
        }

.jnew-Pbox-c {
    width: 74%;
    background-color: #fff;
    position: relative;
}

.jew-Img a:link,
.jew-Img a:visited {
    color: #fff;
}

.jew-Img a:active,
.jew-Img a:hover {
    color: #fff;
}

.jew-Img {
    position: absolute;
    top: 32px;
    right: 4%;
    overflow: hidden;
    width: 42%;
}

    .jew-Img .jimg {
        display: block;
        width: 100%;
        height: 312px;
        background-position: center center;
        background-size: cover;
        background-repeat: no-repeat;
    }

    .jew-Img .t {
        position: absolute;
        left: 0px;
        bottom: 0px;
        width: 90%;
        padding: 10px 5%;
        background: url(../images/black_3.png) repeat;
        color: #fff;
    }

    .jew-Img .img {
        display: none;
        width: 100%;
    }

.jnew-t {
    position: absolute;
    left: -88px;
    top: 45px;
}

    .jnew-t a:link,
    .jnew-t a:visited {
        color: #323232;
    }

    .jnew-t a:active,
    .jnew-t a:hover {
        color: #ac1222;
    }

    .jnew-t a {
        display: block;
        padding: 5px 10px;
        margin-bottom: 5px;
    }

        .jnew-t a.active {
            background-color: #ac1222;
            color: #fff;
            border-radius: 10px;
        }

.jnew-tab a:link,
.jnew-tab a:visited {
    color: #646464;
}

.jnew-tab a:active,
.jnew-tab a:hover {
    color: #ac1222;
}

.jnew-tab {
    margin: 58px 50% 0px 4%;
    overflow: hidden;
}

.jnew-tab-list li {
    height: 34px;
    line-height: 34px;
    overflow: hidden;
}

.jnew-tab-list .r {
    color: #323232;
}

.jnew-tab-list {
    margin: 0px 0px 30px;
    height: 238px;
}

.jew-box-paging a:link,
.jew-box-paging a:visited {
    color: #323232;
}

.jew-box-paging a:active,
.jew-box-paging a:hover {
    color: #323232;
}

.jew-box-paging a,
.jew-box-paging span {
    font-size: 12px;
    padding: 0px 7px;
    margin: 0px 2px;
    border-radius: 50%;
    display: inline-block;
}

    .jew-box-paging a.next,
    .jew-box-paging a.prev {
        border: 1px solid #910917;
        border-radius: 0px;
        width: 22px;
        padding: 0px;
        height: 12px;
        line-height: 12px;
        margin: 0px;
    }

    .jew-box-paging a.prev {
        margin-right: 15px !important;
        background: url(../images/jnew_p1.png) no-repeat scroll center center;
    }

    .jew-box-paging a.next {
        margin-left: 10px !important;
        background: url(../images/jnew_p2.png) no-repeat scroll center center;
    }

    .jew-box-paging a.prev:hover {
        background-image: url(../images/jnew_p3.png);
        background-color: #910917;
    }

    .jew-box-paging a.next:hover {
        background-image: url(../images/jnew_p4.png);
        background-color: #910917;
    }

.jew-box-paging span {
    border: 1px solid #b91727;
}

.jnew-ico {
    background: url(../images/j4_i5.png) no-repeat;
    width: 24px;
    height: 47px;
    position: absolute;
    left: 0px;
    top: 48%;
}

.type-two a:link,
.type-two a:visited {
    color: #fff;
}

.type-two a:active,
.type-two a:hover {
    color: #fff;
}

.type-two dd {
    float: left;
    display: block;
    width: 50%;
    position: relative;
    overflow: hidden;
}

.type-two .img {
    width: 100%;
    display: block;
}

.type-two .black {
    background: url(../images/black_3.png) repeat;
    background: none rgba(0, 0, 0, 0.8);
    position: absolute;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
    opacity: 0;
    visibility: hidden;
    -webkit-transition: 0.3s;
    -moz-transition: 0.3s;
    -o-transition: 0.3s;
    transition: 0.3s;
}

.type-two .name {
    background: url(../images/j4_i1.png) no-repeat scroll left center;
    padding-left: 68px;
    font-weight: bold;
    font-size: 16px;
    position: absolute;
    left: 4%;
    top: 5%;
    height: 52px;
    line-height: 52px;
    -webkit-transition: 0.3s;
    -moz-transition: 0.3s;
    -o-transition: 0.3s;
    transition: 0.3s;
}

.type-two .con {
    position: absolute;
    left: 5%;
    top: 50%;
    height: 268px;
    margin-top: -134px;
    width: 90%;
    text-align: center;
}

.type-two .ico {
    background: url(../images/j4_i4.png) no-repeat;
    width: 102px;
    height: 102px;
    background-size: cover;
    display: block;
    margin: 0px auto 20px;
}

.type-two .t {
    font-weight: bold;
    font-size: 26px;
    line-height: 1.2;
}

.type-two .line {
    display: block;
    height: 0px;
    width: 1px;
    background-color: #fff;
    margin: 20px auto;
    -webkit-transition: 0.4s;
    -moz-transition: 0.4s;
    -o-transition: 0.4s;
    transition: 0.4s;
}

.type-two .j-more2 {
    border: 1px solid #fff;
    text-align: center;
    color: #fff;
    width: 130px;
    height: 34px;
    line-height: 34px;
    border-radius: 17px;
    display: block;
    margin: 0px auto;
}

.type-two .ico,
.type-two .t,
.type-two .j-more2 {
    opacity: 0;
    visibility: hidden;
    transition: transform 400ms, opacity .5s cubic-bezier(0.445, 0.145, 0.355, 1);
    -webkit-transition: transform 400ms, opacity .5s cubic-bezier(0.445, 0.145, 0.355, 1);
    transition-timing-function: ease-out;
    -webkit-transition-timing-function: ease-out;
}

.type-two .ico,
.type-two .t {
    transform: translateY(30px);
    -webkit-transform: translateY(30px);
}

.type-two dd:hover .black {
    opacity: 1;
    visibility: visible;
}

.type-two dd:hover .ico,
.type-two dd:hover .t,
.type-two dd:hover .j-more2 {
    opacity: 1;
    visibility: visible;
    transform: translateY(0px);
    -webkit-transform: translateY(0px);
}

.type-two dd:hover .line {
    height: 32px;
}

.type-two dd:hover .name {
    opacity: 0;
    visibility: hidden;
}

.institutionsCon {
    position: absolute;
    left: 3%;
    bottom: 10%;
}

    .institutionsCon .zh {
        font-weight: bold;
        font-size: 38px;
        color: #fff;
    }

.jPact a:link,
.jPact a:visited {
    color: #323232;
}

.jPact a:active,
.jPact a:hover {
    color: #cf0011;
}

.jPact {
    background-color: #bfbfbf;
    padding: 2px 3%;
}

    .jPact span {
        padding: 0px 5px;
    }

.institutionsList {
    width: 96%;
    margin: 0px auto;
    padding: 50px 0px;
}

    .institutionsList li {
        float: left;
        display: block;
        width: 23%;
        margin: 0px 1% 2%;
        position: relative;
        color: #fff;
        line-height: 1.5;
        overflow: hidden;
        cursor: pointer;
    }

    .institutionsList img.vm {
        width: 100%;
        display: block;
    }

    .institutionsList .black {
        background: url(../images/black_1.png) repeat;
        width: 100%;
        height: 100%;
        position: absolute;
        left: 0px;
        top: 0px;
        opacity: 0;
        visibility: hidden;
        -webkit-transition: 0.3s;
        -moz-transition: 0.3s;
        -o-transition: 0.3s;
        transition: 0.3s;
    }

    .institutionsList .t {
        background: url(../images/j4_yy.png) repeat-x scroll left bottom;
        padding: 12px 5%;
        position: absolute;
        left: 0px;
        bottom: 0px;
        width: 90%;
        -webkit-transition: 0.4s;
        -moz-transition: 0.4s;
        -o-transition: 0.4s;
        transition: 0.4s;
    }

    .institutionsList .con {
        position: absolute;
        left: 5%;
        width: 90%;
        text-align: center;
        top: 40%;
        opacity: 0;
        visibility: hidden;
        transform: translateY(-30px);
        -webkit-transform: translateY(-30px);
        -webkit-transition: 0.4s;
        -moz-transition: 0.4s;
        -o-transition: 0.4s;
        transition: 0.4s;
    }

        .institutionsList .con .ico {
            background: url(../images/j4_add.png) no-repeat;
            width: 32px;
            height: 32px;
            display: block;
            margin: 0px auto 10px;
        }

    .institutionsList li:hover .t {
        transform: translateY(100%);
        -webkit-transform: translateY(100%);
        opacity: 1;
        visibility: visible;
    }

    .institutionsList li:hover .con {
        opacity: 1;
        visibility: visible;
        transform: translateY(0px);
        -webkit-transform: translateY(0px);
    }

    .institutionsList li:hover .black {
        opacity: 1;
        visibility: visible;
    }

.institutionPage {
    transform: translateY(50px);
    -webkit-transform: translateY(50px);
    opacity: 0;
    visibility: hidden;
    transition: transform 600ms, opacity .5s cubic-bezier(0.445, 0.145, 0.355, 1);
    -webkit-transition: transform 600ms, opacity .5s cubic-bezier(0.445, 0.145, 0.355, 1);
    transition-timing-function: ease-out;
    -webkit-transition-timing-function: ease-out;
    background-color: #fff;
    padding: 38px 70px;
    width: 740px;
    margin: 0px auto;
    position: relative;
}

.md-show,
.md-show body {
    overflow-y: hidden;
}

    .md-show .institutionPage {
        opacity: 1;
        visibility: visible;
        transform: translateY(0px);
        -webkit-transform: translateY(0px);
    }

.user-close {
    background: url(../images/j4_close.png) no-repeat scroll center center;
    width: 40px;
    height: 40px;
    display: block;
    position: absolute;
    right: -50px;
    top: 30px;
    cursor: pointer;
    -webkit-transition: 0.4s;
    -moz-transition: 0.4s;
    -o-transition: 0.4s;
    transition: 0.4s;
}

    .user-close:hover {
        transform: rotate(90deg);
        -webkit-transform: rotate(90deg);
        -o-transform: rotate(90deg);
        -moz-transform: rotate(90deg);
    }

.institutionDemo {
    position: relative;
}

    .institutionDemo .item {
        overflow: hidden;
    }

        .institutionDemo .item img {
            width: 100%;
            display: block;
        }

    .institutionDemo .slick-prev,
    .institutionDemo .slick-next {
        width: 50px;
        height: 50px;
        position: absolute;
        top: 50%;
        margin: -25px 0px 0px 0px;
        z-index: 100;
    }

    .institutionDemo .slick-prev {
        background: url(../images/j4_left.png) no-repeat scroll center center;
        left: -50px;
    }

    .institutionDemo .slick-next {
        background: url(../images/j4_right.png) no-repeat scroll center center;
        right: -50px;
    }

    .institutionDemo .slick-prev:hover {
        background-color: #e5e5e5;
    }

    .institutionDemo .slick-next:hover {
        background-color: #e5e5e5;
    }

.institutionBox {
    margin: 32px 5px 40px;
}

.institution-project dt {
    padding: 5px;
    border-bottom: 1px solid #a0a0a0;
    font-weight: bold;
    font-size: 16px;
    color: #323232;
    margin-bottom: 15px;
}

.institution-project .link a {
    margin-right: 5%;
}

.designDown {
    width: 184px;
    height: 48px;
    line-height: 48px;
    text-align: center;
    color: #fff;
    background-color: #ac1222;
    border-radius: 10px;
    display: block;
    margin: 40px auto 20px;
}

/*join style end*/
/*community style*/
.community-ibox {
    padding: 80px 0px 120px;
}

.comDemo {
    position: relative;
    overflow: hidden;
    width: 100%;
}

.comBanner ul {
    position: relative;
    width: 100%;
    height: 100%;
}

.comBanner li {
    position: absolute;
    width: 100%;
    height: 100%;
    display: none;
    overflow: hidden;
}

.comBanner .cimg {
    position: absolute;
}

.com-con {
    position: absolute;
    left: 5%;
    top: 20%;
    padding-left: 170px;
    color: #fff;
    opacity: 0;
    transform: translate(70px, 0px);
    -webkit-transform: translate(70px, 0px);
    -webkit-transition: 0.6s;
    transition: 0.6s;
}

    .com-con .num {
        position: absolute;
        left: 0px;
        top: 0px;
        font: 180px/0.9 "HelveticaOblThin";
        color: #cf0418;
    }

    .com-con .name {
        font: 40px/1.2 "microsoft yahei";
        margin: 15px 0px;
    }

        .com-con .name .red {
            color: #cf0418;
        }

    .com-con .en {
        position: relative;
        font: 18px/1.5 "microsoft yahei";
        letter-spacing: 1px;
        padding: 0px 12px;
        float: left;
    }

        .com-con .en .line {
            width: 3px;
            height: 40px;
            position: absolute;
            left: 0px;
            display: block;
            background-color: #fff;
            top: 50%;
            margin-top: -20px;
        }

        .com-con .en .of {
            position: absolute;
            right: -20px;
            top: 5px;
            background: url(../images/com_1.png) no-repeat;
            width: 15px;
            height: 15px;
            display: block;
        }

.com-more {
    background-size: cover;
    width: 144px;
    height: 45px;
    line-height: 45px;
    color: #fff;
    text-align: center;
    border-radius: 15px;
    border: 1px solid #ffffff;
    display: block;
    margin-top: 50px;
}

    .com-more i {
        background: url(../images/com_3.png) no-repeat scroll center center;
        width: 100%;
        height: 100%;
        display: block;
        -webkit-transition: 0.3s;
        -moz-transition: 0.3s;
        -o-transition: 0.3s;
        transition: 0.3s;
    }

    .com-more:hover i {
        background-position: 75% center;
    }

    .com-more:hover {
        background-color: #fff;
        color: #cf0418;
    }

.comBot {
    position: absolute;
    left: 0px;
    bottom: 0px;
    background: url(../images/black_50.png) repeat;
    width: 100%;
    height: 119px;
}

    .comBot .clogo {
        position: absolute;
        left: 0px;
        top: 0px;
        padding: 48px 20px;
        background-color: #cf0418;
    }

        .comBot .clogo img {
            display: block;
            width: 265px;
        }

.comBanner .imgIn .cimg {
    visibility: visible !important;
    -webkit-animation: scaleUpDown 1.2s forwards cubic-bezier(0.250, 0.460, 0.450, 0.940);
    animation: scaleUpDown 1.2s forwards cubic-bezier(0.250, 0.460, 0.450, 0.940);
}

@-webkit-keyframes scaleUpDown {
    from {
        -webkit-transform: scale(1.1);
        transform: scale(1.1);
    }

    to {
        opacity: 1;
        -webkit-transform: scale(1);
        transform: scale(1);
    }
}

@keyframes scaleUpDown {
    from {
        -webkit-transform: scale(1.1);
        transform: scale(1.1);
    }

    to {
        opacity: 1;
        -webkit-transform: scale(1);
        transform: scale(1);
    }
}

.comBanner .imgIn .com-con {
    opacity: 1;
    transform: translate(0px, 0px);
    -webkit-transform: translate(0px, 0px);
}

.com-pro {
    float: right;
    display: block;
}

    .com-pro li {
        float: left;
        display: block;
        width: 141px;
        position: relative;
        overflow: hidden;
        cursor: pointer;
    }

    .com-pro .img {
        width: 100%;
        display: block;
        opacity: 0.8;
        filter: alpha(opacity=80);
    }

    .com-pro .txt {
        position: absolute;
        left: 0px;
        top: 44%;
        text-align: center;
        width: 100%;
        color: #fff;
    }

    .com-pro .bot {
        position: absolute;
        border: 1px solid #cf0418;
        display: block;
        left: 0px;
        top: 0px;
        width: 139px;
        height: 117px;
        opacity: 0;
        visibility: hidden;
        -webkit-transition: 0.3s;
        -moz-transition: 0.3s;
        -o-transition: 0.3s;
        transition: 0.3s;
    }

    .com-pro li.cur .bot,
    .com-pro li:hover .bot {
        opacity: 1;
        visibility: visible;
    }

.mz-link2 {
    display: block;
    float: right;
    width: 92px;
    height: 100%;
    background-color: #cf0418;
    color: #fff;
    text-align: center;
}

    .mz-link2 .name {
        background: url(../images/mz_ico1.png) no-repeat scroll center 25px;
        padding-top: 60px;
        display: block;
    }

    .mz-link2:hover {
        background-color: #af0000;
    }

.community-ilist a:link,
.community-ilist a:visited {
    color: #636363;
}

.community-ilist a:active,
.community-ilist a:hover {
    color: #cf0418;
}

.community-ilist {
    width: 1180px;
    margin: 0px auto;
}

    .community-ilist .com-ibox {
        float: left;
        display: block;
    }

    .community-ilist .item1,
    .community-ilist .item2 {
        height: 430px;
        margin-bottom: 20px;
    }

    .community-ilist .item1 {
        width: 880px;
    }

    .community-ilist .item2 {
        width: 284px;
        margin-left: 14px;
    }

    .community-ilist .item3,
    .community-ilist .item4,
    .community-ilist .item5 {
        width: 384px;
        height: 346px;
        margin-bottom: 20px;
    }

    .community-ilist .item4,
    .community-ilist .item5 {
        margin-left: 14px;
    }

.com-ibox .it {
    color: #323232;
    height: 36px;
}

    .com-ibox .it a {
        display: block;
        color: #4a4a4a;
        font-size: 16px;
        font-weight: bold;
    }

    .com-ibox .it .mico {
        background: url(../images/more_i1.png) no-repeat scroll center center;
        width: 11px;
        height: 11px;
        float: right;
        display: block;
        margin: 5px 10px 0px 0px;
        transition: 400ms;
        -webkit-transition: 400ms;
    }

    .com-ibox .it:hover .mico {
        -moz-transform: rotate(90deg);
        -webkit-transform: rotate(90deg);
        -o-transform: rotate(90deg);
        -ms-transform: rotate(90deg);
        transform: rotate(90deg);
    }

.ar-ibox {
    border: 1px solid #ecebeb;
    height: 392px;
    background-color: #fff;
}

.ar-frist-box {
    width: 390px;
    float: left;
    display: block;
    padding: 24px 22px 0px 26px;
    position: relative;
    overflow: hidden;
    height: 368px;
}

    .ar-frist-box .img {
        overflow: hidden;
    }

        .ar-frist-box .img img {
            width: 100%;
            display: block;
        }

    .ar-frist-box .t {
        font-size: 16px;
        margin: 5px 0px 8px;
        height: 29px;
        overflow: hidden;
    }

    .ar-frist-box .c {
        font-size: 12px;
        height: 43px;
        overflow: hidden;
        margin-bottom: 10px;
    }

    .ar-frist-box .time {
        font-size: 12px;
        color: #969696;
    }

.cboxLink {
    position: absolute;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
}

.ar-list-box {
    float: left;
    display: block;
    width: 440px;
    padding: 25px 0px 0px;
}

    .ar-list-box li {
        position: relative;
        overflow: hidden;
        height: 62px;
        margin-bottom: 8px;
        padding: 0px 22px 0px 112px;
        -webkit-transition: 0.3s;
        -moz-transition: 0.3s;
        -o-transition: 0.3s;
        transition: 0.3s;
    }

    .ar-list-box .img {
        position: absolute;
        left: 0px;
        top: 0px;
        background-color: #333;
        -webkit-transition: 0.3s;
        -moz-transition: 0.3s;
        -o-transition: 0.3s;
        transition: 0.3s;
    }

        .ar-list-box .img img {
            width: 100%;
            overflow: hidden;
        }

    .ar-list-box .t {
        height: 25px;
        overflow: hidden;
        margin-bottom: 12px;
    }

    .ar-list-box .time {
        font-size: 12px;
        color: #b4b4b4;
        padding-bottom: 2px;
        border-bottom: 1px solid #ececec;
    }

.j-more3 {
    float: right;
    display: block;
    background-color: #cf0418;
    border-radius: 5px;
    padding: 0px 8px;
    color: #fff;
    height: 14px;
    line-height: 12px;
    opacity: 0;
    visibility: hidden;
    transform: translate(-20px, 0px);
    -webkit-transform: translate(-20px, 0px);
    -webkit-transition: 0.3s;
    -moz-transition: 0.3s;
    -o-transition: 0.3s;
    transition: 0.3s;
}

.ar-list-box li:hover {
    background-color: #f8f8f8;
}

    .ar-list-box li:hover .img img {
        opacity: 0.8;
        filter: alpha(opacity=80);
    }

    .ar-list-box li:hover .time {
        border-color: #f8f8f8;
    }

    .ar-list-box li:hover .j-more3 {
        opacity: 1;
        visibility: visible;
        transform: translate(0px, 0px);
        -webkit-transform: translate(0px, 0px);
    }

.rb-ibox {
    border: 1px solid #ecebeb;
    background-color: #fff;
    padding-top: 60px;
    height: 332px;
    overflow: hidden;
    text-align: center;
    font-size: 13px;
}

.rbDemo {
    margin-bottom: 38px;
}

    .rbDemo .item {
        margin: 0px auto;
    }

        .rbDemo .item img {
            margin: 0px auto;
            width: 134px;
        }

    .rbDemo .slick-prev,
    .rbDemo .slick-next {
        width: 40px;
        height: 40px;
        position: absolute;
        top: 50%;
        margin: -20px 0px 0px 0px;
        z-index: 100;
    }

    .rbDemo .slick-prev {
        background: url(../images/com_l.png) no-repeat scroll center center;
        left: 15px;
    }

    .rbDemo .slick-next {
        background: url(../images/com_r.png) no-repeat scroll center center;
        right: 15px;
    }

    .rbDemo .slick-prev:hover {
        background-color: #e5e5e5;
    }

    .rbDemo .slick-next:hover {
        background-color: #e5e5e5;
    }

.rb-ibox .t {
    font-size: 16px;
    height: 29px;
    overflow: hidden;
}

.rb-ibox .bot {
    width: 28px;
    height: 1px;
    background-color: #818181;
    display: block;
    margin: 10px auto 15px;
}

.rb-ibox .title {
    background: url(../images/com_time.png) no-repeat scroll left center;
    padding-left: 22px;
}

.com-ibox .ic {
    border: 1px solid #ecebeb;
    background-color: #fff;
    padding: 26px 0px 0px;
    height: 282px;
    overflow: hidden;
}

.zm-ibox {
    margin: 0px 22px;
}

    .zm-ibox li {
        float: left;
        display: block;
        width: 48%;
        margin: 0px 1% 2%;
        position: relative;
        overflow: hidden;
    }

        .zm-ibox li img.vm {
            width: 100%;
            display: block;
        }

        .zm-ibox li .red-bg {
            background: url(../images/red_7.png) repeat;
            position: absolute;
            left: 0px;
            top: 100%;
            width: 100%;
            height: 100%;
            -webkit-transition: 0.5s;
            -moz-transition: 0.5s;
            -o-transition: 0.5s;
            transition: 0.5s;
        }

        .zm-ibox li .more {
            border: 1px solid #fff;
            width: 90px;
            height: 30px;
            position: absolute;
            left: 50%;
            top: 50%;
            margin: -15px 0px 0px -45px;
            line-height: 30px;
            color: #fff;
        }

        .zm-ibox li:hover .red-bg {
            top: 0px;
        }

.zc-ibox {
    font-size: 13px;
}

    .zc-ibox li {
        height: 30px;
        line-height: 30px;
        padding: 0px 24px;
        position: relative;
        overflow: hidden;
        -webkit-transition: 0.3s;
        -moz-transition: 0.3s;
        -o-transition: 0.3s;
        transition: 0.3s;
    }

        .zc-ibox li .tico {
            position: absolute;
            left: 14px;
            top: 5px;
            background: url(../images/com_top.png) no-repeat scroll center center;
            width: 20px;
            height: 18px;
        }

        .zc-ibox li .hico {
            position: absolute;
            left: 14px;
            top: 5px;
            background: url(../images/com_hot.png) no-repeat scroll center center;
            width: 20px;
            height: 18px;
        }

        .zc-ibox li:hover {
            background-color: #f8f8f8;
        }

.zc-paging {
    padding: 0px 40px;
    margin-top: 6px;
}

    .zc-paging a,
    .zc-paging span {
        padding: 0px 6px 2px;
    }

    .zc-paging span {
        border-bottom: 1px solid #dd362e;
    }

.com-video {
    margin: 0px auto 5px;
    width: 320px;
    height: 188px;
    overflow: hidden;
    position: relative;
}

.com-list li {
    float: left;
    display: block;
    margin: 0px 2px;
}

.com-list {
    width: 324px;
    margin: 0px auto;
}

.com-video .vico {
    position: absolute;
    background: url(../images/com_vico.png) no-repeat scroll center center;
    width: 32px;
    height: 32px;
    left: 50%;
    top: 50%;
    margin: -16px 0px 0px -16px;
}

.community-nav {
    display: block;
    margin: 0px 86px 0px 0px;
    float: right;
    display: block;
}

    .community-nav li {
        float: left;
        display: block;
        padding: 0px 20px;
        height: 70px;
    }

    .community-nav a {
        display: block;
        line-height: 70px;
        text-align: center;
        font-size: 16px;
        position: relative;
    }

        .community-nav a .bot {
            width: 0px;
            position: absolute;
            left: 50%;
            bottom: 0px;
            height: 3px;
            background-color: #cf0011;
            transition: 0.3s;
            -webkit-transition: 0.3s;
        }

        .community-nav a:hover .bot,
        .community-nav a.act .bot {
            width: 100%;
            left: 0px;
        }

.paddingI {
    padding: 5% 0px;
    min-height: 500px;
}

.ifLoveBox {
    background-color: #fff;
    position: relative;
    overflow: hidden;
}

    .ifLoveBox .img {
        float: left;
        display: block;
        width: 50%;
    }

        .ifLoveBox .img img {
            width: 100%;
            display: block;
        }

    .ifLoveBox .con {
        float: left;
        display: block;
        margin-left: 5%;
        width: 40%;
        padding: 5% 0px 70px;
        font-size: 13px;
        color: #646464;
    }

        .ifLoveBox .con .t {
            font: 26px/1.2 "microsoft yahei";
            color: #323232;
            margin-bottom: 5%;
        }

    .ifLoveBox .onumBox {
        position: absolute;
        left: 55%;
        bottom: 8%;
    }

.onumBox .pleft,
.onumBox .pright {
    background: url(../images/com_l2.png) no-repeat scroll center center;
    border-radius: 50%;
    width: 30px;
    height: 30px;
    border: 1px solid #d00718;
    float: left;
    cursor: pointer;
}

.onumBox .pleft {
    margin-right: 10px;
}

.onumBox .pright {
    background-image: url(../images/com_r2.png);
}

    .onumBox .pleft:hover,
    .onumBox .pright:hover {
        background-color: #D11816;
    }

.onumBox .pleft:hover {
    background-image: url(../images/com_l3.png);
}

.onumBox .pright:hover {
    background-image: url(../images/com_r3.png);
}

.mzVideo a:link,
.mzVideo a:visited {
    color: #333000;
}

.mzVideo a:active,
.mzVideo a:hover {
    color: #fff;
}

.mzVideo {
    padding: 58px 0px;
}

    .mzVideo ul {
        margin-left: -2%;
    }

    .mzVideo li {
        float: left;
        display: block;
        width: 31.33%;
        margin-left: 2%;
    }

    .mzVideo .pic {
        position: relative;
        overflow: hidden;
    }

        .mzVideo .pic img {
            width: 100%;
            display: block;
        }

    .mzVideo .vico {
        background: url(../images/com_vico.png) no-repeat scroll center center;
        display: block;
        position: absolute;
        left: 50%;
        top: 50%;
        width: 32px;
        height: 32px;
        margin: -16px 0px 0px -16px;
        opacity: 0;
        visibility: hidden;
        transform: scale(0);
        -webkit-transform: scale(0);
        -moz-transform: scale(0);
        transition: 400ms 0ms ease-in;
        -webkit-transition: 400ms 0ms ease-in;
    }

    .mzVideo .con {
        position: relative;
        height: 42px;
        padding: 5px 15px;
        position: relative;
        overflow: hidden;
    }

        .mzVideo .con .t {
            line-height: 1.4;
            height: 39px;
            position: relative;
            z-index: 2;
        }

        .mzVideo .con .cbg {
            position: absolute;
            left: 0px;
            top: 0px;
            width: 100%;
            background-color: #cf0418;
            display: block;
            height: 0%;
            -webkit-transition: 0.3s ease 0s;
            -moz-transition: 0.3s 0s;
            -o-transition: 0.3s 0s;
            transition: 0.3s 0s;
        }

    .mzVideo li {
        margin-bottom: 18px;
    }

        .mzVideo li:hover .con .cbg {
            height: 100%;
        }

        .mzVideo li:hover .pic .vico {
            visibility: visible;
            opacity: 1;
            transform: scale(1);
            -webkit-transform: scale(1);
            -moz-transform: scale(1);
            transition: 350ms 0ms ease-in-out;
            -webkit-transition: 350ms 0ms ease-in-out;
        }

.paddingI2 {
    padding: 50px 0px;
}

.mz4-name {
    font: 28px/1.4 "microsoft yahei";
    color: #cf0418;
    margin-bottom: 15px;
}

.pearl-box {
    font-size: 13px;
}

    .pearl-box .item1 {
        float: left;
        display: block;
        width: 28%;
    }

    .pearl-box .item2 {
        float: right;
        display: block;
        width: 69%;
    }

.pearl-box-t a:link,
.pearl-box-t a:visited {
    color: #323232;
}

.pearl-box-t a:active,
.pearl-box-t a:hover {
    color: #cf0418;
}

.pearl-box-t {
    border-bottom: 1px solid #a0a0a0;
    padding-bottom: 5px;
    margin-bottom: 25px;
}

    .pearl-box-t .time {
        background: url(../images/com_time.png) no-repeat scroll left center;
        padding-left: 25px;
        color: #969696;
        font-size: 12px;
    }

    .pearl-box-t .down {
        float: right;
        display: block;
    }

    .pearl-box-t a.prev,
    .pearl-box-t a.next {
        color: #cf0418;
        font-size: 12px;
    }

        .pearl-box-t a.prev:hover,
        .pearl-box-t a.next:hover {
            color: #323232;
        }

    .pearl-box-t .next {
        margin-left: 20px;
    }

.pearl-box-c {
    background-color: #fff;
    padding: 20px 36px 40px;
    font-size: 13px;
}

    .pearl-box-c .t {
        font-size: 20px;
        color: #323232;
        line-height: 1.5;
        padding-bottom: 20px;
        border-bottom: 1px solid #E5E5E5;
    }

    .pearl-box-c .i {
        color: #969696;
        font-size: 12px;
        padding: 8px 0px 35px;
    }

    .pearl-box-c .pageC {
        overflow: hidden;
    }

.pearl-pager {
    margin-top: 18px;
}

    .pearl-pager p {
        margin-bottom: 5px;
    }

    .pearl-pager a:link,
    .pearl-pager a:visited {
        color: #646464;
    }

    .pearl-pager a:active,
    .pearl-pager a:hover {
        color: #cf0418;
    }

.pearlImg {
    overflow: hidden;
    position: relative;
}

    .pearlImg .img {
        overflow: hidden;
    }

        .pearlImg .img img {
            width: 100%;
            display: block;
        }

.pearl-type {
    position: absolute;
    right: 0px;
    top: 0px;
}

    .pearl-type li {
        width: 36px;
        height: 36px;
        border: 1px solid #cf0418;
        color: #cf0418;
        cursor: pointer;
        border-radius: 50%;
        text-align: center;
        line-height: 36px;
        margin-bottom: 7px;
    }

        .pearl-type li:hover,
        .pearl-type li.act {
            background-color: #cf0418;
            color: #fff;
        }

.pearl-menu {
    margin-top: 20px;
    color: #323232;
    margin-left: 4px;
}

    .pearl-menu li {
        line-height: 1.2;
        margin-bottom: 10px;
    }

        .pearl-menu li.t {
            margin-bottom: 16px;
            color: #0c0c0c;
            font-weight: bold;
        }

    .pearl-menu a:link,
    .pearl-menu a:visited {
        color: #323232;
    }

    .pearl-menu a:active,
    .pearl-menu a:hover {
        color: #cf0418;
    }

    .pearl-menu .pearl-bot {
        border-bottom: 1px solid #a0a0a0;
        margin-top: 10px;
        padding-bottom: 14px;
        margin-bottom: 20px;
    }

.mz-c {
    position: relative;
    width: 100%;
}

.page-menu a:link,
.page-menu a:visited {
    color: #323232;
}

.page-menu a:active,
.page-menu a:hover {
    color: #323232;
}

.page-menu.fixed {
    position: fixed;
    top: 70px;
}

.page-menu {
    border-bottom: 8px solid #cf0418;
    background-color: #eeeeee;
    width: 200px;
    position: absolute;
    left: 50%;
    top: -96px;
    margin-left: -550px;
}

    .page-menu .t {
        background-color: #cf0418;
        color: #fff;
        padding: 20px 0px 0px 25px;
        height: 76px;
        background: url(../images/comy_sj.png) no-repeat scroll 95% 8px #cf0418;
    }

        .page-menu .t .zh {
            font-size: 26px;
            line-height: 1.2;
            margin-bottom: 5px;
        }

        .page-menu .t .en {
            font-size: 12px;
        }

    .page-menu .c {
        padding: 20px 0px 30px 10px;
        min-height: 272px;
    }

    .page-menu .mz-i a {
        height: 36px;
        line-height: 36px;
        display: block;
        background-position: 90% center;
        background-repeat: no-repeat;
        padding-left: 10px;
    }

.mz-i a:hover,
.mz-i a.active {
    background-image: url(../images/comy_sj2.png);
    background-position: right center;
    background-color: #fff;
}

.mzinner {
    width: 835px;
    padding-left: 265px;
    margin: 0px auto;
    font-size: 13px;
    overflow: hidden;
}

.mzpadding {
    padding-top: 70px;
    padding-bottom: 70px;
}

.mz-imgbox {
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed;
    background-position: center center;
    color: #fff;
}

.mz-inner {
    padding: 70px 0px 105px;
    position: relative;
}

    .mz-inner .black {
        position: absolute;
        left: 0px;
        top: 0px;
        width: 100%;
        height: 100%;
        background: url(../images/black_50.png) repeat;
        background: none rgba(0, 0, 0, 0.5);
    }

.mz-imgbox .mzinner {
    position: relative;
    z-index: 2;
}

.mzt {
    font-size: 26px;
    line-height: 1.2;
    margin-bottom: 30px;
}

#culturePage3 .mzt {
    color: #323232;
}

.mz-culture3 {
    margin-left: -4%;
}

    .mz-culture3 li {
        float: left;
        display: block;
        width: 20.33%;
        margin-left: 4%;
        padding-top: 30px;
    }

    .mz-culture3 .tnum {
        border: 2px solid #b40f0f;
        width: 48px;
        height: 48px;
        text-align: center;
        line-height: 48px;
        color: #b40f0f;
        font-weight: bold;
        font-size: 20px;
        border-radius: 50%;
    }

    .mz-culture3 .fr3 {
        padding: 15px 0px;
        border-bottom: 1px solid #E5E5E5;
        font-weight: bold;
        font-size: 20px;
        line-height: 1.2;
        text-align: right;
        color: #323232;
        margin-bottom: 20px;
    }

    .mz-culture3 .c3 {
        text-align: justify;
        color: #646464;
    }

.mz-culture5 {
    margin-left: -4%;
}

    .mz-culture5 li {
        float: left;
        display: block;
        width: 29.33%;
        padding: 28px 0px;
        margin-left: 4%;
        background-color: #eeeeee;
        margin-top: 40px;
    }

    .mz-culture5 .t5 {
        margin: 0px 28px;
        overflow: hidden;
        border-bottom: 2px solid #D2D2D2;
        padding: 0px 0px 12px;
        margin-bottom: 20px;
        color: #cf0418;
        font-size: 30px;
        line-height: 1.2;
    }

        .mz-culture5 .t5 .en {
            float: right;
            display: block;
            font-size: 14px;
        }

    .mz-culture5 .c5 {
        margin: 0px 28px;
        overflow: hidden;
        min-height: 198px;
    }

.bgcf0418 {
    background-color: #cf0418;
}

#developmentPage1 a:link,
#developmentPage1 a:visited {
    color: #fff;
}

#developmentPage1 a:active,
#developmentPage1 a:hover {
    color: #fff;
}

#developmentPage1 {
    color: #fff;
}

    #developmentPage1 .t {
        font-size: 22px;
    }

.deT {
    font-size: 22px;
    border-bottom: 1px solid #c1c1c1;
    padding-bottom: 10px;
    line-height: 1.4;
    color: #323232;
    margin-bottom: 35px;
}

#developmentPage2 .pageC {
    padding: 20px 0px 25px;
}

.page-menu .mz-i .sub-mz {
    background: url(../images/page_menu_l.png) repeat-y scroll left top;
    margin-left: 10px;
    position: relative;
    margin-top: -10px;
}

    .page-menu .mz-i .sub-mz a {
        padding-left: 28px;
        background: url(../images/page_menu_2.png) no-repeat scroll left center;
        position: relative;
        top: 10px;
    }

.talent-menu.fixed {
    top: 80px;
}

#slider {
    position: relative;
    width: 1100px;
    margin: 0px auto;
    height: 500px;
    overflow: hidden;
}

    #slider .slide {
        position: absolute;
        top: 0px;
        height: 500px;
        width: 500px;
        background: #333;
        overflow: hidden;
        border-left: #333 solid 1px;
        cursor: default;
    }

    #slider .backgroundText {
        position: absolute;
        width: 100%;
        height: 100%;
        top: 100%;
        background: #333;
        filter: alpha(opacity=40);
        opacity: 0.4;
    }

    #slider .text {
        position: absolute;
        top: 100%;
        color: #FFF;
        padding: 5%;
        width: 470px;
    }

    #slider .diapo {
        position: absolute;
        filter: alpha(opacity=100);
        opacity: 1;
        visibility: hidden;
    }

.mz-time-type {
    margin-bottom: 38px;
}

    .mz-time-type a {
        display: inline-block;
        width: 105px;
        height: 50px;
        text-align: center;
        line-height: 50px;
        background-color: #ffff;
        float: left;
        margin-right: 1px;
        color: #323232;
    }

        .mz-time-type a.active {
            background-color: #facd89;
        }

.mz-time-list a:link,
.mz-time-list a:visited {
    color: #323232;
}

.mz-time-list a:active,
.mz-time-list a:hover {
    color: #cf0418;
}

.mz-time-list ul {
    margin-left: -2%;
}

.mz-time-list li {
    float: left;
    display: block;
    width: 18%;
    margin: 0px 0px 30px 2%;
    position: relative;
}

.mz-time-list .img {
    background: #fff;
    padding: 10px 8px;
    overflow: hidden;
    margin-bottom: 5px;
    transition: 300ms;
    -webkit-transition: 300ms;
}

    .mz-time-list .img img {
        width: 100%;
        display: block;
    }

.mz-time-list .t {
    height: 25px;
    overflow: hidden;
    text-align: center;
}

.mz-time-list .moreview {
    width: 150px;
    margin: 20px auto 0;
    height: 40px;
    line-height: 40px;
    text-align: center;
    display: block;
    background: #a2a2a2;
    color: #fff;
    transition: 400ms;
}

.mz-time-list li:hover .img {
    box-shadow: 6px 6px 9px -5px rgba(0, 0, 0, 0.3);
    transform: translateY(-5px);
    -webkit-transform: translateY(-5px);
}

.mz-time-list li:hover .t {
    color: #cf0418;
}

.mz-time-list li:hover .moreview {
    background: #cf0418;
}

/*community style end*/
/*mzlist styel*/
.mz-nav {
    text-align: center;
    height: 40px;
    width: 100%;
    overflow: hidden;
    background-color: #e60012;
}

    .mz-nav a:link,
    .mz-nav a:visited {
        color: #fff;
    }

    .mz-nav a:active,
    .mz-nav a:hover {
        color: #fff;
    }

    .mz-nav a {
        text-align: center;
        display: inline-block;
        *display: inline;
        zoom: 1;
        position: relative;
        padding: 0px 35px;
        font-size: 14px;
        font-weight: bold;
        line-height: 40px;
    }

        .mz-nav a span {
            position: relative;
            z-index: 2;
        }

        .mz-nav a i {
            position: absolute;
            left: 50%;
            top: 0px;
            width: 0px;
            height: 100%;
            background-color: #C20513;
            -webkit-transition: 0.3s;
            -moz-transition: 0.3s;
            -o-transition: 0.3s;
            transition: 0.3s;
        }

        .mz-nav a:hover i,
        .mz-nav a.active i {
            width: 100%;
            left: 0;
        }

.container {
    width: 1200px;
    margin: 0 auto;
}

.s_ad {
    height: 320px;
}

    .s_ad p {
        color: #FFF;
        font-size: 36px;
        padding-top: 100px;
        text-align: center;
        font-weight: bold;
    }


.detail p {
    text-align: center;
    line-height: 30px;
    font-size: 16px;
}

.detail img {
    display: block;
    margin: 10px auto;
    max-width: 100%;
}

.news_title {
    background-color: #d63241;
    color: #fff;
    padding: 60px 0;
    text-align: center;
    margin-bottom: 50px;
}

    .news_title dt {
        font-size: 30px;
        margin-bottom: 10px;
    }

    .news_title dd span {
        font-size: 14px;
        margin: 0 10px;
        color: rgba(255, 255, 255, .68);
    }

.message {
    margin: 5%;
}

    .message h1 {
        text-align: center;
        margin-bottom: 6%;
        font-weight: normal;
    }

        .message h1 .p1 {
            color: #cd000f;
            font-size: 42px;
        }

        .message h1 .p2 {
            font-size: 30px;
            font-weight: normal;
            color: transparent;
            text-transform: uppercase;
            -webkit-text-stroke: 1px rgba(0, 0, 0, 0.15);
            margin-left: 5px;
        }

        .message h1 .p3 {
            color: #666;
            font-size: 16px;
        }

            .message h1 .p3 span {
                color: #cd000f;
                font-family: 'Gilroy';
            }

    .message ul {
        flex-wrap: wrap;
    }

        .message ul li {
            width: 100%;
            margin-bottom: 2%;
        }

            .message ul li p {
                font-size: 16px;
            }

            .message ul li input[type=text],
            .message ul li textarea {
                display: block;
                width: 100%;
                line-height: 60px;
                border: none;
                background: none;
                border-bottom: 1px solid #eee;
                color: #999999;
                font-size: 16px;
                background: none;
            }

            .message ul li:hover input[type=text],
            .message ul li:hover textarea {
                border-bottom: 1px solid #cd000f;
                transition: all .5s;
            }

            .message ul li textarea {
                line-height: 30px;
            }

.tj input {
    width: 160px;
    font-size: 16px;
    text-align: center;
    margin: 0 auto;
    margin-top: 50px;
    height: 50px;
    line-height: 50px;
    background: #cd000f;
    background-size: contain;
    color: #fff;
    display: block;
    border: none;
}