﻿/*悬浮链接*/
.suspension {
    position: fixed;
    z-index: 55;
    right: 0;
    bottom: 85px;
    width: 70px;
    height: 240px;
}

.suspension-box {
    position: relative;
    float: right;
}

.suspension .a {
    display: block;
    width: 44px;
    height: 44px;
    background-color: #353535;
    margin-bottom: 4px;
    cursor: pointer;
    outline: none;
}

    .suspension .a.active,
    .suspension .a:hover {
        background: #F05352;
    }

    .suspension .a .i {
        float: left;
        width: 44px;
        height: 44px;
        background-image: url(/Content/images/side_icon.png);
        background-repeat: no-repeat;
    }
/* .suspension .a-service .i{background-position:0 0;} */
.suspension .a-service .i {
    width: 20px;
    height: 20px;
    margin-top: 12px;
    margin-left: 12px;
    background-image: url(/Content/images/suspension-bg.png);
    background-repeat: no-repeat;
    background-position: 0 0;
}

.suspension .a-service-phone .i {
    width: 20px;
    height: 20px;
    margin-top: 12px;
    margin-left: 12px;
    background-image: url(/Content/images/suspension-bg.png);
    background-repeat: no-repeat;
    background-position: -27px 0;
}

.suspension .a-qrcode .i {
    background-position: -44px 0;
}

.suspension .a-cart .i {
    background-position: -88px 0;
}

.suspension .a-top .i {
    background-position: -132px 0;
}

.suspension .a-top {
    background: #D2D3D6;
    display: none;
}

    .suspension .a-top:hover {
        background: #c0c1c3;
    }

.suspension .d {
    display: none;
    width: 223px;
    background: #fff;
    position: absolute;
    right: 67px;
    min-height: 90px;
    border: 1px solid #E0E1E5;
    border-radius: 3px;
    box-shadow: 0px 2px 5px 0px rgba(161, 163, 175, 0.11);
}

    .suspension .d .arrow {
        position: absolute;
        width: 8px;
        height: 12px;
        background: url(/Content/images/side_bg_arrow.png) no-repeat;
        right: -8px;
        top: 31px;
    }

.suspension .d-service {
    top: 0;
}

.suspension .d-service-phone {
    top: 34px;
}

.suspension .d-qrcode {
    top: 78px;
}

.suspension .d .inner-box {
    padding: 8px 22px 12px;
}

.suspension .d-service-item {
    border-bottom: 1px solid #eee;
    padding: 14px 0;
}

.suspension .d-service .d-service-item {
    border-bottom: none;
}

.suspension .d-service-item .circle {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    overflow: hidden;
    background: #F1F1F3;
    display: block;
    float: left;
}

.suspension .d-service-item .i-qq {
    width: 44px;
    height: 44px;
    background: url(/Content/images/side_con_icon03.png) no-repeat center 15px;
    display: block;
    transition: all .2s;
    border-radius: 50%;
    overflow: hidden;
}

.suspension .d-service-item:hover .i-qq {
    background-position: center 3px;
}

.suspension .d-service-item .i-tel {
    width: 44px;
    height: 44px;
    background: url(/Content/images/side_con_icon02.png) no-repeat center center;
    display: block;
}

.suspension .d-service-item h3 {
    float: left;
    width: 112px;
    line-height: 44px;
    font-size: 15px;
    margin-left: 12px;
}

.suspension .d-service-item .text {
    float: left;
    width: 112px;
    line-height: 22px;
    font-size: 15px;
    margin-left: 12px;
}

    .suspension .d-service-item .text .number {
        font-family: Arial,"Microsoft Yahei","HanHei SC",PingHei,"PingFang SC","Helvetica Neue",Helvetica,Arial,"Hiragino Sans GB","Heiti SC","WenQuanYi Micro Hei",sans-serif;
    }

.suspension .d-service-intro {
    padding-top: 10px;
}

    .suspension .d-service-intro p {
        float: left;
        line-height: 27px;
        font-size: 12px;
        width: 50%;
        white-space: nowrap;
        color: #888;
    }

    .suspension .d-service-intro i {
        background: url(/Content/images/side_con_icon01.png) no-repeat center center;
        height: 27px;
        width: 14px;
        margin-right: 5px;
        vertical-align: top;
        display: inline-block;
    }

.suspension .d-qrcode {
    text-align: center;
}

    .suspension .d-qrcode .inner-box {
        padding: 20px 0;
    }

    .suspension .d-qrcode p {
        font-size: 16px;
        color: #93959c;
    }

.text-danger {
    color: #FF0000 !important
}

.btn-link.active {
    color: #b1191a
}

.icon-1 {
    background: url(/Content/images/yd.png) no-repeat center center;
    padding: 12px;
}

.icon-2 {
    background: url(/Content/images/lt.png) no-repeat center center;
    padding: 12px;
}

.icon-3 {
    background: url(/Content/images/dx.png) no-repeat center center;
    padding: 12px;
}

.icon-54 {
    background: url(/Content/images/phone.png) no-repeat center center;
    padding: 12px;
}

.phone-0 {
    font-size: 1.7em;
    font-weight: bold;
    font-family: Arial,Helvetica,sans-serif;
    line-height: 2em;
}

.phone-1 {
    color: #4B77BE
}

.phone-2 {
    color: #9D2933
}

.phone-3 {
    color: #F9690E
}

#search-opt label {
    color: grey
}

    #search-opt label.active {
        color: #ff006e
    }

        #search-opt label.active:before {
            content: "√"
        }

.bg-main {
    background-color: #dbe8dc;
}

    .bg-main.active > a {
        background-color: transparent !important;
    }

.pagination {
    text-align: center
}

    .pagination > li > a {
        float: none;
    }
/*.list-item-hao:nth-child(odd) {
            background: #F5F7FA
        }
        .list-item-hao:nth-child(even) {
            background: #E6E9ED
        }*/
.list-item-hao {
    border-bottom: 1px dashed #ccc;
    text-align: center
}

    .list-item-hao:hover {
        background: rgba(249, 105, 14, 0.1)
    }

    .list-item-hao > div {
        padding: 10px;
    }

.list-item-hao-header > * {
    border: 1px solid #fff;
    background: #e9e9e9;
    padding: 10px;
    text-align: center
}
/*/////////////////new css/////////////////*/
.my-top {
    border-bottom: 2px solid #b1191a;
    margin-top: 10px;
}

.my-logo {
    padding: 2px;
    margin-bottom: 15px;
    margin-top: 15px;
}

    .my-logo > img {
        height: 80px;
    }

.bg-header {
    background: #b1191a;
    color: #fff;
    font-size: 1.2em;
    padding: 10px;
}

.searchbox {
    padding: 10px 80px;
    margin-top: 10px;
}

    .searchbox > .searchbox-header {
        padding: 0;
        margin: 0
    }

        .searchbox > .searchbox-header > * {
            display: inline-block;
            width: auto;
            padding: 5px 20px;
        }

        .searchbox > .searchbox-header > .active {
            background: #b1191a;
            color: white;
        }

    .searchbox > .searchbox-body {
        border: 2px solid #b1191a;
        background: #b1191a;
    }

        .searchbox > .searchbox-body > .searchbox-input {
            background: #fff;
            padding-left: 10px;
        }

            .searchbox > .searchbox-body > .searchbox-input > input {
                border: none;
                font-size: larger;
                font-weight: bold;
                padding: 10px;
                margin: 0;
                outline: none;
                width: 80%;
            }

        .searchbox > .searchbox-body > .searchbox-btn {
            text-align: center;
            height: inherit;
        }

            .searchbox > .searchbox-body > .searchbox-btn > button {
                background: none;
                border: none;
                padding: 10px 20px;
                color: white
            }

.nav-item:hover, .nav-link :hover {
    background: none;
}

.nav-link {
    color: #171717;
    font-weight: bold;
}

    .nav-link:hover {
        color: #b1191a;
        background-color: rgba(249, 105, 14, 0.1)
    }

    .nav-link.active {
        color: #b1191a;
    }

.my-body {
    background: url(/Content/images/bodybg.png) no-repeat top center;
    background-attachment: fixed;
}

.my-msg-list {
    padding: 0;
    margin: 0;
    list-style: none;
    border: 1px solid #ccc;
    border-top: none;
}

    .my-msg-list > li {
        padding: 4px;
        border-bottom: 1px dashed #ccc
    }

        .my-msg-list > li > a {
            font-size: 1.2em;
            line-height: 1.5em;
            height: 1.5em;
            overflow: hidden;
            display: inline-block;
            color: #06c
        }

            .my-msg-list > li > a:hover {
                color: #c81623
            }

        .my-msg-list > li > .my-msg-content {
            font-size: 1em;
            color: #777;
            height: 3.4em;
            line-height: 1.2em;
            overflow: hidden;
            text-indent: 2em;
        }

.msg-type-0 {
    color: #b1191a
}

.msg-type-1 {
    color: #ff6a00
}

.msg-type-2 {
    color: #06c
}

.msg-type-3 {
    color: #0094ff
}

.msg-type-4 {
    color: #b200ff
}

.msg-type-5 {
    color: #0d0d0d
}

.my-nav {
    background: #c81623;
    padding: 0;
    margin-top: -10px;
}

    .my-nav > .my-nav-body {
        padding: 0;
        margin: 0;
    }

        .my-nav > .my-nav-body > .my-nav-item {
            padding: 10px;
            border-bottom: 1px dotted #ff6a00;
            list-style: none;
            color: white;
        }

            .my-nav > .my-nav-body > .my-nav-item .col-xs-6 {
                padding-right: 0px;
            }

            .my-nav > .my-nav-body > .my-nav-item:hover {
                background: #b1191a;
            }

            .my-nav > .my-nav-body > .my-nav-item a.my-nav-item-link {
                color: #eee;
                padding-top: 10px;
                display: block;
            }

            .my-nav > .my-nav-body > .my-nav-item a:hover {
                color: #fff;
                text-decoration: dashed;
            }

.my-tab {
    margin-bottom: 10px;
    padding: 0;
}

    .my-tab > .my-tab-header {
        background-color: transparent;
        border-bottom: 1px solid #d6d6d6;
        margin: 0;
    }

        .my-tab > .my-tab-header > div {
            line-height: 2em;
            height: 2em;
            text-align: center;
            cursor: pointer;
            border-right: 1px solid #d6d6d6;
            border-top: 1px solid #d6d6d6;
        }

            .my-tab > .my-tab-header > div.disabled {
                border-top: none;
                text-align: left;
                background: url(/Content/images/f-bg.png) left center no-repeat;
            }

            .my-tab > .my-tab-header > div.active {
                border-top: 2px solid #b1191a;
                color: #b1191a
            }

    .my-tab > .my-tab-body {
        margin: 0;
        font-size: 0.8em;
    }

        .my-tab > .my-tab-body > .my-tab-item {
            display: none;
            margin: 0;
        }

            .my-tab > .my-tab-body > .my-tab-item.active {
                display: block;
            }

            .my-tab > .my-tab-body > .my-tab-item > div {
                height: 6em;
                display: block;
            }

                .my-tab > .my-tab-body > .my-tab-item > div:hover {
                    background: rgba(48, 48, 48, 0.7);border-radius:5px 5px;
                }
                .my-tab > .my-tab-body > .my-tab-item > div:hover > .phone-0 span {
                    color:white;
                }
                .my-tab > .my-tab-body > .my-tab-item > div.disabled {
                    -webkit-filter: grayscale(100%);
                    -moz-filter: grayscale(100%);
                    -ms-filter: grayscale(100%);
                    -o-filter: grayscale(100%);
                    filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);
                    _filter: none;
                }

.phone-price {
    color: red;
    font-size: 1.2em
}

.phone-btn {
    text-align: center;
    padding: 0px;
    color: white;
    background: #b1191a;
    display: block;
    margin: 0 10px;
}

    .phone-btn > a {
        margin: 0;
        padding: 5px;
        display: block;
    }

        .phone-btn > a.isFav {
            color: white;
            background: #353535;
            cursor: not-allowed;
        }

            .phone-btn > a.isFav:before {
                content: "已"
            }

.phone-btn-2 {
    background: #d18307
}

.phone-price-label {
    display: block;
    text-align: center
}

.clip {
    text-overflow: ellipsis;
    overflow: hidden;
    word-wrap: break-word;
    height: 3em;
    line-height: 3em;
    word-break: break-all;
}

#carousel-top {
    height: 400px;
    margin-top: 10px;
}

    #carousel-top > .carousel-inner img {
        height: 400px;
    }

.my-news-list {
    padding: 0px;
    margin: 10px;
    list-style: url(/Content/images/eg_arrow.gif) inside;
    line-height: 2.5em;
    border-bottom: 1px solid #b1191a;
}

    .my-news-list > li {
        height: 2.5em;
        word-wrap: normal;
        overflow: hidden;
    }

    .my-news-list a {
        color: #0d0d0d;
    }

        .my-news-list a:hover {
            color: #b1191a
        }

.a-cart.active {
    background: #ff6a00;
    color: white;
}

.phone-number {
    font-size: 8em;
    line-height: 1em;
    padding: 0;
    margin: 0;
    font-weight: bold;
    position: absolute;
    z-index: 1000;
    background-image: -webkit-linear-gradient(left, #3498db, #f47920 10%, #d71345 20%, #f7acbc 30%, #ffd400 40%, #3498db 50%, #f47920 60%, #d71345 70%, #f7acbc 80%, #ffd400 90%, #3498db);
    color: transparent; /*文字填充色为透明*/
    -webkit-text-fill-color: transparent;
    -webkit-background-clip: text; /*背景剪裁为文字，只将文字显示为背景*/
    background-size: 200% 100%; /*背景图片向水平方向扩大一倍，这样background-position才有移动与变化的空间*/
    /* 动画 */
    animation: masked-animation 4s infinite linear;
}
@keyframes masked-animation {
    0% {
        background-position: 0 0; /*background-position 属性设置背景图像的起始位置。*/
    }

    100% {
        background-position: -100% 0;
    }
}
