﻿@charset "utf-8";
/* CSS Document */
body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, dl, dt, dd, ul, li, ol, pre, form, fieldset, legend, button, th, td, img, select, input, textarea {
    margin: 0;
    padding: 0;
    font-weight: normal;
    list-style: none;
}

article, aside, details, dialog, figcaption, figure, footer, header, hgroup, main, menu, nav, section, summary {
    display: block;
}

img {
    border: 0px;
}

em {
    font-style: normal;
}

ul {
    list-style: none;
}

body {
    color: #333;
    font-size: 14px;
    line-height: 24px;
    font-family: "微软雅黑";
}

a, a:hover {
    text-decoration: none;
    color: #333;
    cursor: pointer;
}


/** 公用样式 **/
.clear {
    clear: both;
}

.of {
    overflow: hidden;
}

.w1180 {
    width: 1050px;
    margin: 0 auto;
    overflow: hidden;
}

.bg1 {
    background-color: #eff3f8;
}

.of {
    overflow: hidden;
}


/** 公用背景 **/
.user, .function .title-list li.aa, .function .title-list li.aa.on, .function .title-list li.bb, .function .title-list li.bb.on, .function .title-list li.cc, .function .title-list li.cc.on, .function .title-list li.dd, .function .title-list li.dd.on, .function .title-list li.ee, .function .title-list li.ee.on, .function .title-list li.ff, .function .title-list li.ff.on, .function .title-list li.gg, .function .title-list li.gg.on, .function .title-list li.hh, .function .title-list li.hh.on, .function .title-list li.ii, .function .title-list li.ii.on, .yingyong_nr p.aa, .yingyong_nr p.bb, .yingyong_nr p.cc, .yingyong_nr p.dd, .yingyong_nr p.ee, .yingyong_nr p.ff, .yingyong_nr p.gg, .yingyong_nr p.hh, .dingzhi_right_nr i.aa, .dingzhi_right_nr i.bb, .dingzhi_right_nr i.cc, .dingzhi_right_nr i.dd, .fangan .title-list li i.aa, .fangan .title-list li i.aa.on, .dibu_k i.aa, .dibu_k i.bb, .fangan .title-list li i.bb, .fangan .title-list li i.bb.on, .fangan .title-list li i.cc, .fangan .title-list li i.bb.on, .fangan .title-list li i.dd, .fangan .title-list li i.dd.on, .fangan .title-list li i.ee, .fangan .title-list li i.ee.on, .fangan .title-list li i.ff, .fangan .title-list li i.ff.on, .fangan .title-list li i.gg, .fangan .title-list li i.gg.on, .fangan .title-list li i.hh, .fangan .title-list li i.hh.on, .fangan .title-list li i.ii, .fangan .title-list li i.ii.on, .fangan .title-list li i.jj, .fangan .title-list li i.jj.on {
    background: url(../images/spirit.png) no-repeat;
}

/**************************************************** 首页 ****************************************************/

/** 基础功能 **/
.topic {
    width: 315px;
    margin: 20px auto;
    text-align: center;
}

    .topic h1 {
        font-size: 30px;
        line-height: 60px;
    }

    .topic h2 {
        font-size: 18px;
        font-weight: bold;
        color: #f63636;
        border-bottom: 1px solid #d5d5d5;
        padding-bottom: 15px;
        position: relative;
    }

    .topic span {
        width: 30px;
        height: 3px;
        background-color: #171717;
        position: absolute;
        left: 50%;
        margin-left: -15px;
        bottom: -2px;
        display: block;
    }

    .topic h3 {
        font-size: 18px;
        color: #5c5c5c;
        padding-top: 15px;
    }

/*移动滑动门*/
.fl {
    display: inline;
    float: left;
}

.fr {
    display: inline;
    float: right;
}

.cf:after {
    content: "";
    clear: both;
    display: block;
    height: 0;
    overflow: hidden;
}

.cf {
    zoom: 1;
}

.pb10 {
    padding-bottom: 10px;
}

.mt10 {
    margin-top: 10px;
}

.function {
    width: 100%;
    margin: 40px auto 20px auto;
    background: #fff;
    position: relative;
    min-height: 500px;
}

    .function .title {
        width: 43px;
        position: absolute;
        left: 50%;
        margin-left: -22px;
    }

    .function .title-list {
        width: 100%;
        position: relative;
    }

        .function .title-list li {
            width: 60px;
            height: 60px;
            margin-bottom: 10px;
            display: block;
            -webkit-background-size: 60px 60px;
            -moz-background-size: 60px 60px;
            background-size: 60px 60px;
            -webkit-transition: -webkit-transform 1s ease-out;
            -moz-transition: -moz-transform 1s ease-out;
            -o-transition: -o-transform 1s ease-out;
            -ms-transition: -ms-transform 1s ease-out;
        }

            .function .title-list li.on {
                width: 60px;
                height: 60px;
                cursor: pointer;
                -webkit-transform: rotateZ(360deg);
                -moz-transform: rotateZ(360deg);
                -o-transform: rotateZ(360deg);
                -ms-transform: rotateZ(360deg);
                transform: rotateZ(360deg);
            }

            .function .title-list li.aa {
                background-position: -44px -37px;
            }

                .function .title-list li.aa.on {
                    background-position: 0 -37px;
                }

            .function .title-list li.bb {
                background-position: -44px -81px;
            }

                .function .title-list li.bb.on {
                    background-position: 0 -81px;
                }

            .function .title-list li.cc {
                background-position: -44px -125px;
            }

                .function .title-list li.cc.on {
                    background-position: 0 -125px;
                }

            .function .title-list li.dd {
                background-position: -44px -169px;
            }

                .function .title-list li.dd.on {
                    background-position: 0 -169px;
                }

            .function .title-list li.ee {
                background-position: -44px -213px;
            }

                .function .title-list li.ee.on {
                    background-position: 0 -213px;
                }

            .function .title-list li.ff {
                background-position: -44px -257px;
            }

                .function .title-list li.ff.on {
                    background-position: 0 -257px;
                }

            .function .title-list li.gg {
                background-position: -44px -301px;
            }

                .function .title-list li.gg.on {
                    background-position: 0 -301px;
                }

            .function .title-list li.hh {
                background-position: -44px -345px;
            }

                .function .title-list li.hh.on {
                    background-position: 0 -345px;
                }

            .function .title-list li.ii {
                background-position: -44px -389px;
            }

                .function .title-list li.ii.on {
                    background-position: 0 -389px;
                }

.product {
    overflow: hidden;
    padding-top: 70px;
    display: none;
}

.product-wrap .show {
    display: block;
}

.function_left {
    float: left;
    width: 380px;
    margin-right: 105px;
    text-align: right;
}

    .function_left h1 {
        font-size: 24px;
        color: #171717;
        line-height: 60px;
    }

    .function_left h2 {
        font-size: 18px;
        color: #999;
        padding-bottom: 10px;
    }

    .function_left h3 {
        font-size: 18px;
        color: #333;
        line-height: 40px;
        padding-top: 10px;
    }

.function_right {
    float: right;
    width: 365px;
    margin-left: 105px;
}



/** 4.19 **/
.function .title-list li.aa {
    background: url(/images/fun01.png) no-repeat!important;
}

    .function .title-list li.aa.on {
        background: url(/images/fun01_on.png) no-repeat!important;
    }

.function .title-list li.bb {
    background: url(/images/fun02.png) no-repeat!important;
}

    .function .title-list li.bb.on {
        background: url(/images/fun02_on.png) no-repeat!important;
    }

.function .title-list li.cc {
    background: url(/images/fun03.png) no-repeat!important;
}

    .function .title-list li.cc.on {
        background: url(/images/fun03_on.png) no-repeat!important;
    }

.function .title-list li.dd {
    background: url(/images/fun04.png) no-repeat!important;
}

    .function .title-list li.dd.on {
        background: url(/images/fun04_on.png) no-repeat!important;
    }

.function .title-list li.ee {
    background: url(/images/fun05.png) no-repeat!important;
}

    .function .title-list li.ee.on {
        background: url(/images/fun05_on.png) no-repeat!important;
    }

.function .title-list li.ff {
    background: url(/images/fun06.png) no-repeat!important;
}

    .function .title-list li.ff.on {
        background: url(/images/fun06_on.png) no-repeat!important;
    }

.function .title-list li.gg {
    background: url(/images/fun07.png) no-repeat!important;
}

    .function .title-list li.gg.on {
        background: url(/images/fun07_on.png) no-repeat!important;
    }

.function .title-list li.hh {
    background: url(/images/fun08.png) no-repeat!important;
}

    .function .title-list li.hh.on {
        background: url(/images/fun08_on.png) no-repeat!important;
    }

.function .title-list li.ii {
    background: url(/images/fun09.png) no-repeat!important;
}

    .function .title-list li.ii.on {
        background: url(/images/fun09_on.png) no-repeat!important;
    }

.dingzhi_right_nr {
    clear: both;
    margin: 30px 0;
    overflow: auto;
}

    .dingzhi_right_nr i {
        float: left;
    }

    .dingzhi_right_nr dl {
        padding-left: 170px;
    }

        .dingzhi_right_nr dl dt {
            font-weight: bold;
            font-size: 16px;
        }

.tipfont {
    background-color: red;
    color: white;
    padding: 2px;
    border-radius: 5px;
}

.line-block {
    display: inline-block;
    border-radius: 5px;
    padding: 3px 10px;
    margin: 0 20px 20px 0;
    border: 1px solid #CCC;
    min-width:100px;
}

    .line-block.black {
        background-color: #333;
        color: white;
    }
    .line-block.red {
    background-color: red;
        color: white;
    }
