@charset "utf-8";

:root {
    /* CSS变量的定义 */
    --primary-color: #c00;
    --primary-rgb-color: rgba(204, 0, 0, .6);
}

/* ======== 全局 ======== */
html, body, button, input, select, textarea { font-family: "Microsoft Yahei"; }

/* ======== 链接 ======== */
a { text-decoration: none; color: #000; }
a:hover { text-decoration: none; color: var(--primary-color); }

/* ======== 背景 ======== */
body {
    background-color: #fff;
}

/* ====================
    重定义样式
==================== */
.btn-primary {
    line-height: 30px;
    font-size: 12px;
    border: none;
    background-color: var(--primary-color);

    &:hover {
        background-color: var(--primary-rgb-color);
    }
}

/*字体颜色*/
.text-color-primary { color: var(--primary-color); }
.text-color-gray { color: #999; } /*浅灰色*/
.text-color-white { color: #fff; } /*白色*/
.text-color-black { color: #000; } /*黑色*/

/* ====================
    滚动条样式
==================== */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: rgba(0, 0, 0, .1); }
::-webkit-scrollbar-thumb { background-color: #333; }
::-webkit-scrollbar-thumb:window-inactive { background-color: #333; }
::-webkit-scrollbar-thumb:vertical:hover { background-color: #333; }

/* ====================
    字体样式
==================== */
@font-face
{
    font-family: 'AvantGardeITCbyBT-Medium';
    font-weight: normal;
    font-style: normal;

    src: url('./font/AvantGardeITCbyBT-Medium.woff2') format('woff2'),
    url('./font/AvantGardeITCbyBT-Medium.woff') format('woff'),
    url('./font/AvantGardeITCbyBT-Medium.ttf') format('truetype'),
    url('./font/AvantGardeITCbyBT-Medium.eot') format('embedded-opentype');
}

.num, .tel {
    font-family: "AvantGardeITCbyBT-Medium";
} 

/* ====================
    头部样式
==================== */
.header { font-family: 'Noto Sans SC', 'Source Han Sans CN', 'Noto Sans S Chinese Light', 'Microsoft YaHei', 'PingFang SC', Helvetica, 'Helvetica Neue', Tahoma, Arial, sans-serif; position: fixed; z-index: 1000; top: 0; right: 0; left: 0; background-color: var(--primary-color); }
.header .logo { width: auto; height: 42px; }
.header .logo img { height: 42px; }

.header .nav div { margin: 0 30px; }
.header .nav div a { font-size: 15px; font-weight: 700; line-height: 40px; position: relative; display: inline-block; height: 40px; color: #fff; }
.header .nav div a:after { position: absolute; bottom: 5px; left: 0; width: 0; height: 2px; content: ''; -webkit-transition: all .5s; transition: all .5s; background-color: #fff; }

.header .nav div a:hover,
.header .nav div.on a { color: #fff; }

.header .nav div a:hover:after,
.header .nav div.on a:after { width: 100%; }

.header .box-right i { font-size: 24px; margin-right: 5px; cursor: pointer; color: #fff; }
.header .box-right span { font-size: 15px; font-weight: 700; color: #fff; }

.header.index { background: none; }
.header.header-fixed { background-color: var(--primary-color); box-shadow: 0 6px 6px 0 rgba(0, 0, 0, .05), 0 6px 6px 0 rgba(0, 0, 0, .05) inset; }

/* ====================
    广告样式
==================== */
.banner { position: relative; overflow: hidden; width: 100%; }
.banner .swiper-slide img { width: 100%; transition: all 1.6s linear; transform: scale(1.15); }
.banner .swiper-slide-active img { transform: scale(1); }

/*分页样式*/
.banner .swiper-pagination { bottom: 20px !important; }
.banner .swiper-pagination .bullet { display: inline-block; width: 50px; height: 5px; margin: 0 5px; cursor: pointer; outline: none; background-color: rgba(255, 255, 255, .5); }
.banner .swiper-pagination .bullet-active { background-color: var(--primary-rgb-color); }

/*前后按钮样式*/
.banner .swiper-button-prev,
.banner .swiper-button-next { width: 58px; height: 58px; transition: all 1s; text-indent: -9999px; opacity: 0; outline: none; }

.banner .swiper-button-prev { background: url(../img/banner-prev.png) no-repeat; }
.banner .swiper-button-next { background: url(../img/banner-next.png) no-repeat; }

.banner:hover .swiper-button-prev,
.banner:hover .swiper-button-next { opacity: 1; }

.banner .btn-box { position: absolute; z-index: 10; bottom: 1rem; width: 100%; }
.banner .btn-box img { display: block; margin-bottom: 3rem; animation: up 1s ease-in infinite; }
.banner .btn-box span { font-size: 12px; display: block; color: #fff; }

@keyframes up {
    0% { transform: translateY(0); opacity: 0; }
    50% { transform: translateY(20px); opacity: 1; }
    100% { transform: translateY(40px); opacity: 0; }
}

.page-banner { font-size: 0; position: relative; text-align:center; }
.page-banner img { width: 100%; }

.page-banner .info { position: absolute; z-index: 5; top: 50%; left: 50%; display: inline-block; transform: translate(-50%, -50%); }
.page-banner .info .title { font-size: 48px; font-weight: 700; line-height: 60px; position: relative; display: inline-block; height: 60px; padding-left: 20px; color: #fff; }
.page-banner .info .title:after { position: absolute; top: 2px; left: 0; width: 8px; height: 100%; content: ''; background-color: var(--primary-color); }

.page-banner .box-info { font-weight: 700; position: absolute; z-index: 5; top: 50%; left: 50%; width: 100%; padding: 0 100px; transform: translate(-50%, -50%); text-align: left; color: #fff; }
.page-banner .box-info .title { font-size: 48px; }
.page-banner .box-info p { font-size: 63px; margin-top: 10px; }

/* ====================
    通用样式
==================== */
.more {
    font-size: 12px;
    line-height: 38px;
    position: relative;
    display: inline-block;
    padding-right: 50px;
    padding-left: 30px;
    color: var(--primary-color);
    border: 1px solid var(--primary-color);
    border-radius: 20px;

    i {
        font-size: 8px;
        line-height: 20px;
        position: absolute;
        top: 9px;
        right: 9px;
        display: inline-block;
        width: 20px;
        height: 20px;
        text-align: center;
        color: #fff;
        border-radius: 50%;
        background-color: var(--primary-color);
    }

    &:hover {
        color: #fff;
        background-color: var(--primary-color);

        i {
            color: var(--primary-color);
            background-color: #fff;
        }
    }

}

.page-head {
    margin-top: 74px;
    background-color: #f1f2f4;

    .title {
        font-size: 3rem;
        font-weight: 700;
        text-transform: uppercase;
    }

    .breadcrumb {
        font-size: 12px;

        i {
            font-size: 12px;
        }

        .breadcrumb-item {

            a {
                color: #666;
            }

            &:before {
                color: #999;
            }
        }
    }

    .menu {
        font-size: 12px;

        a {
            position: relative;
            display: inline-block;
            margin-bottom: 20px;
            margin-left: 20px;
            padding-left: 10px;
            color: #666;

            &:before {
                position: absolute;
                top: 6px;
                left: 0;
                width: 4px;
                height: 4px;
                content: '';
                border-radius: 5px;
                background-color: #515151;
            }

            &:after {
                position: absolute;
                bottom: -10px;
                left: 0;
                width: 0;
                height: 1px;
                content: '';
                -webkit-transition: all .5s;
                transition: all .5s;
                background-color: var(--primary-color);
            }

            &:hover:after {
                width: 100%;
                height: 1px;
            }

            &:hover:before {
                background-color: var(--primary-color);
            }
        }

        .on {
            color: var(--primary-color);

            &:after {
                width: 100%;
                height: 1px;
            }

            &:before {
                background-color: var(--primary-color);
            }
        }
    }
}

/* ====================
     关于我们样式
==================== */
.about .item { text-align: center; }
.about .item i { font-size: 3rem; color: var(--primary-color); }
.about .item .num { font-size: 3rem; color: #000; }
.about .item .describe { font-size: 14px; margin-top: 10px; color: #000; }

/* ====================
     灵感空间样式
==================== */
.inspiration .item { position: relative; }
.inspiration .item .icon { position: absolute; z-index: 100; top: 50px; left: 50px; height: 50px; }
.inspiration .item .text { position: absolute; z-index: 100; bottom: 50px; left: 0; display: none; padding: 0 50px; color: #fff; }
.inspiration .item .text .title { font-size: 24px; }
.inspiration .item .text span { font-size: 14px; line-height: 30px; display: inline-block; margin-top: 20px; margin-right: 10px; padding: 0 15px; border: 1px solid #fff; }
.inspiration .item:hover .text { display:block; }

/* ====================
     最新资讯样式
==================== */
.news-hot .icon { font-size: 12px; line-height: 40px; width: 40px; height: 40px; text-align: center; color: #000; border-radius: 50%; background-color: #ddd; }
.news-hot .icon:hover { color: #fff; background-color: var(--primary-color); }

.news-hot .item { width: 20%; }
.news-hot .item .info { background-color: #f5f5f5; }
.news-hot .item .info .title { color: #000; }
.news-hot .item .info .desc { color: #999; }

.news-hot .item:hover .info { background-color: var(--primary-color); }
.news-hot .item:hover .info .title,
.news-hot .item:hover .info .desc { color:#fff; }

/* ====================
     TAB样式
==================== */
.nav-pills .nav-item { margin: 0 15px; }
.nav-pills .nav-item .nav-link { padding: 5px 10px; font-size: 14px; color: #666; background: transparent; }
.nav-pills .nav-item .nav-link.active { color: #fff; background-color: var(--primary-color); }

/* ===================================
     内容样式
=================================== */
.content { line-height: 40px; overflow: hidden; margin: 50px 0; padding-bottom: 100px; }
.content img { max-width: 100%; height: auto; }

/* ===================================
     廉正举报样式
=================================== */
.jubao .content { font-size: 14px; line-height: 30px; border-bottom: 1px dotted #ddd; }
.jubao .content p { margin: 0; color: #999; }
.jubao .jubao-form .form-control { font-size: 12px; line-height: 30px; }

/* ====================
     单页模型样式
==================== */
.page { position: relative; }
.page .head { position: relative; padding-left: 100px; color: #bc9366; }
.page .head h1 { font-size: 34px; font-weight: 700; }
.page .head h1:before { position: absolute; top: 20px; left: 0; display: block; width: 80px; height: 1px; content: ''; background-color: #bc9366; }

/* ====================
     产品模型样式
==================== */
.product .breadcrumb { font-size: 12px; background-color: #f5f5f5; }
.product .breadcrumb i { font-size: 12px; }
.product .breadcrumb .breadcrumb-item a { color: #666; }
.product .breadcrumb .breadcrumb-item:before { color: #999; }

/* ====================
     服务与支持样式
==================== */
.help { padding: 50px 200px !important; }
.help > div { line-height: 60px; border-bottom: 1px solid #ddd; }
.help > div span { color: #999; }

/* ====================
     搜索弹窗样式
==================== */
.search-web-dialog { position: absolute; z-index: 1100; top: 16px; right: 50px; width: 400px; height: 42px; -webkit-transition: all .3s; transition: all .3s; -webkit-transform: scale(1); -ms-transform: scale(1); transform: scale(1); -webkit-transform-origin: 100% center; -ms-transform-origin: 100% center; transform-origin: 100% center; background-color: transparent; }
.search-web-dialog .search-form { font-size: 12px; line-height: 40px; width: 100%; height: 42px; padding: 0 10px; background-color: #fff; }
.search-web-dialog .search-form .form-control { font-size: 12px; width: 80%; padding: 0; color: #999; border: none; border: none; }
.search-web-dialog .search-form .form-control:focus { border-color: inherit; box-shadow: none; utline: none; }
.search-web-dialog .search-form .button i { font-size: 24px; color: #999; }

.search-web-dialog .close { position: absolute; top: 5px; right: -30px; cursor: pointer; color: #000; }
.search-web-dialog .close i { font-size: 24px; }

.search-web-dialog.search-hide { -webkit-transform: scale(0); -ms-transform: scale(0); transform: scale(0); }

/* ====================
     菜单弹窗样式
==================== */
.offcanvas { line-height: 30px; color: #fff; border-left: 0 !important; background-color: var(--primary-color); }
.offcanvas .dropdown-menu { display: block; width: 100%; padding: 0; border: none; border-radius: 0; background: none; }
.offcanvas .dropdown-menu li { float: left; width: 50%; }
.offcanvas .dropdown-menu li .dropdown-item { font-size: 14px; padding: 0; color: rgba(255, 255, 255, .6); }
.offcanvas .dropdown-menu li .dropdown-item:focus,
.offcanvas .dropdown-menu li .dropdown-item:hover { color: #fff; background: none; }

/* ====================
     error样式
==================== */
.error { min-height: 400px; margin-top: 74px; }

/* ====================
     分页样式
==================== */
.pagination i { line-height: 50px; display: inline-block; width: 50px; height: 50px; margin: 0 5px; text-align: center; color: #000; border-radius: 50%; background-color: #eee; }
.pagination i:hover { color: #fff; background-color: var(--primary-color); }

/* ====================
     底部样式
==================== */
.footer { font-family: 'Noto Sans SC', "Source Han Sans CN", "Noto Sans S Chinese Light", 'Microsoft YaHei', 'PingFang SC', Helvetica, 'Helvetica Neue', Tahoma, Arial, sans-serif; background-color: #222; }
.footer h5 { font-size: 15px; color: #fff; }
.footer .nav a { font-size: 14px; line-height: 30px; color: #999; }
.footer .nav a:hover { color: var(--primary-color); }

.footer .icon { position: relative; display: inline-block; margin-right: 12px; cursor: pointer; }
.footer .icon i { font-size: 24px; line-height: 30px; display: inline-block; float: left; width: 30px; height: 30px; text-align: center; color: #999; border-radius: 50%; }
.footer .icon > div { position: absolute; top: 40px; left: 0; display: none; width: 100px; height: 100px; }
.footer .icon > div img { width: 100%; border-radius: 5px; }
.footer .icon > div:before { position: absolute; top: -5px; left: 10px; display: block; content: ''; border-color: #fff transparent currentcolor; border-top: 0; border-right: 5px solid transparent; border-bottom: 5px solid #fff; border-left: 5px solid transparent; }

.footer .icon:hover > i { color: #fff; background-color: var(--primary-color); }
.footer .icon:hover > div { display: block; }

.footer .tel { font-size: 1.5rem; color: var(--primary-color); }
.footer .copyright { font-size: 12px; color: #999; border-top: 1px solid rgba(255, 255, 255, .1); }
.footer .copyright a { margin-left: 5px; color: #999; }
.footer .copyright a:hover { color: var(--primary-color); }