﻿body{
    background-color: #f6f6f6;
}

/***** 导航 start *********/
#qumi_nav {
    border-radius: 0;
    background-color: white;
    border:none;
    box-shadow: 0px 1px 3px rgba(0,0,0,.2);
    margin-bottom: 10px;
}
#qumi_nav a.navbar-brand {
    height: 80px;
    padding: 3px;
}
#qumi_nav .navbar-nav>li>a{
    padding-top:30px;
    padding-bottom:26px;
    border-bottom:4px solid white;
    color: black;
}
#qumi_nav .navbar-nav>li>a:hover {
    color:#ff5252;
    border-bottom:4px solid #ff5252;
}
#qumi_nav .navbar-nav>li>a.active{
    color:#ff5252;
    border-bottom:4px solid #ff5252;
}
#qumi_nav .navbar-nav>.open>a, .navbar-inverse .navbar-nav>.open>a:focus, .navbar-inverse .navbar-nav>.open>a:hover {
    color:#ff5252;
    background-color: white;
    border-bottom:4px solid #ff5252;
}
/***** 导航 end *********/
/********** 小屏处理 start ************/

@media screen and (max-width: 750px) {
    #qumi_nav .navbar-toggle {
        margin-top: 24px;
        background-color: #aaa;
        border: none;
    }

    #qumi_nav .navbar-nav>li>a{
        padding-top:6px;
        padding-bottom:2px;
        border-bottom:4px solid white;
        color: black;
    }
}
/********** 小屏处理 end ************/



/****** 工具盒子 start  ******/
.box {
    background-color: white;
    margin-bottom: 10px;
}

.box > .box-header {
    position: relative;
    /*height: 40px;
    line-height: 40px;*/
    padding: 6px 10px;
    border-bottom: 1px solid #f0f0f0;
}
.box > .box-header > h4 {
    margin: 0px;
    font-size: 16px;
    line-height: 28px;
}
.box > .box-header > .box-tools {
    position: absolute;
    right:10px;
    top: 0px;
    height: 40px;
    line-height: 40px;
    font-size: 14px;
}
.box > .box-content {
    padding: 10px 10px;
}
/****** 工具盒子 end  ******/

/****** 域名格子样式 start  ******/
.domain-grid {
    border: 1px solid #f0f0f0;
    height: 80px;
    width: 100%;
    margin-bottom: 10px;
    position: relative;
}
.domain-grid:hover {
    border: 1px solid rgba(0, 0, 0, .3);
}

.domain-grid > .domain-grid-name {
    height: 100%;
    width: 100%;
    font-size: 16px;
    overflow: auto;
    word-break: break-all;
    display: block;
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: center;
    align-items: center;
    -webkit-justify-content: center;
    justify-content: center;
}
.domain-grid > .domain-grid-price {
    position: absolute;
    top: 0px;
    right: 0px;
    color: #ff5252;
    padding: 5px 10px;
}
.domain-grid > .domain-grid-description {
    position: absolute;
    bottom: 0px;
    left: 0px;
    width: 100%;
    color: white;
    font-size: 14px;
    line-height: 18px;
    height: 18px;
    padding: 0px;
    overflow: hidden;
    background-color: rgba(0, 0, 0, .3);
    z-index: 999;
    text-align: center;
}
@keyframes domain_descriotion_hover {
    from {
        top: 62px;
        height: 18px;
        background-color: rgba(0, 0, 0, .3);
    }
    to {
        top: 0px;
        height: 80px;
        background-color: rgba(0, 0, 0, .8);
    }
}
/* Safari 与 Chrome */
@-webkit-keyframes domain_descriotion_hover {
    from {
        top: 62px;
        height: 18px;
        background-color: rgba(0, 0, 0, .3);
    }
    to {
        top: 0px;
        height: 80px;
        background-color: rgba(0, 0, 0, .8);
    }
}
.domain-grid > .domain-grid-description:hover
{
    top:0px;
    height: 80px;
    background-color: rgba(0, 0, 0, .8);
    padding: 10px;
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: center;
    align-items: center;
    -webkit-justify-content: center;
    justify-content: center;

    animation: domain_descriotion_hover 300ms;
    -webkit-animation: domain_descriotion_hover 300ms; /* Safari 与 Chrome */
}
/****** 域名格子样式 end  ******/

/******* box-filter start **********/
.box-filter {
    border: 2px solid #f0f0f0;
    padding: 10px;
    margin-bottom: 10px;
}
.box-filter-label {
    background-color: #f0f0f0;
    color:#6f6f6f;
    cursor: pointer;
    font-weight: 400;
}

.box-filter-label:hover {
    background-color: #337ab7;
    color:white;
}

.box-filter-active {
    background-color: #337ab7;
    color:white;
    cursor: pointer;
}
/******* box-filter end **********/
/*********** console nav start **************/
#console_nav {
    background-color: white;
}
#console_nav > .nav > li {
    border-left: 5px solid white;
}
#console_nav > .nav > li:hover {
    border-left: 5px solid #ff5252;
    background-color: #eee;
}

#console_nav > .nav > li.active {
    border-left: 5px solid #ff5252;
    background-color: #eee;
}
/*********** console nav end **************/

/*********** qm start **********/
.qm-callout {
    padding: 10px;
    margin: 30px 0;
    background-color: #f6f6f6;
    border-left: 5px solid #ff5252;
}
/*********** qm end **********/

footer{
    border-top: 1px solid #f0f0f0;
    padding-top: 10px;
    margin-top: 20px;
    text-align: center
}

.park-mibiao-name {
    color:#0f0f0f;
}
#breadcrumb{
    margin-bottom: 10px;
}
#breadcrumb > .breadcrumb {
    margin-bottom: 0px;
    background-color: white;
}
.inline-right{
    display: inline-block;
    float: right;
}

.captcha {
    padding: 0px;
}

.loading {
    position: fixed;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, .2);
    background-image: url("/zcseo/img/loading.gif");
    background-repeat:no-repeat;
    background-attachment:fixed;
    background-position:center;
    z-index: 10000;
    /*保持div内元素水平垂直居中*/
    /*display: flex;
    justify-content:center;
    align-items:Center;*/
}


.modal-info {
    height: 240px;
    overflow-x: hidden;
    overflow-y: auto;
}

.theme-check {
    border-width:3px;
    border-style: solid;
}

.theme-checked {
    border: 3px solid #1064AA;
}
/*推荐产品部分CSS*/
.case-content{overflow:hidden;margin:10px auto 0 auto;width:100%;}
.case-item{float:left;margin:10px 40px;margin-bottom:10px}
.ih-item{position:relative;-webkit-transition:all .35s ease-in-out;-moz-transition:all .35s ease-in-out;transition:all .35s ease-in-out}
.ih-item,.ih-item *{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}
.ih-item a{color:#333}
.ih-item a:hover{text-decoration:none}
.ih-item img{width:100%;height:100%}
.ih-item.circle,.ih-item.circle .img{position:relative;width:210px;height:210px;border-radius:50%}
.ih-item.circle .img:before{position:absolute;display:block;content:'';width:100%;height:100%;border-radius:50%;box-shadow:inset 0 0 0 16px rgba(255,255,255,.6),0 1px 2px rgba(0,0,0,.3);-webkit-transition:all .35s ease-in-out;-moz-transition:all .35s ease-in-out;transition:all .35s ease-in-out}
.ih-item.circle .img img{border-radius:50%}
.ih-item.circle .info{position:absolute;top:0;bottom:0;left:0;right:0;text-align:center;border-radius:50%;-webkit-backface-visibility:hidden;backface-visibility:hidden}
.ih-item.square{position:relative;width:316px;height:216px;border:8px solid #fff;box-shadow:1px 1px 3px rgba(0,0,0,.3)}
.ih-item.square .info{position:absolute;top:0;bottom:0;left:0;right:0;text-align:center;-webkit-backface-visibility:hidden;backface-visibility:hidden}
.ih-item.circle.effect1 .spinner{width:220px;height:220px;border:10px solid #ecab18;border-right-color:#1ad280;border-bottom-color:#1ad280;border-radius:50%;-webkit-transition:all .8s ease-in-out;-moz-transition:all .8s ease-in-out;transition:all .8s ease-in-out}
.ih-item.circle.effect1 .img{position:absolute;top:10px;bottom:0;left:10px;right:0;width:auto;height:auto}
.ih-item.circle.effect1 .img:before{display:none}
.ih-item.circle.effect1.colored .info{background:#1a4a72;background:rgba(26,74,114,.6)}
.ih-item.circle.effect1 .info{top:10px;bottom:0;left:10px;right:0;background:#333;background:rgba(0,0,0,.6);opacity:0;-webkit-transition:all .8s ease-in-out;-moz-transition:all .8s ease-in-out;transition:all .8s ease-in-out}
.ih-item.circle.effect1 .info h3{color:#fff;text-transform:uppercase;position:relative;letter-spacing:2px;font-size:24px;margin:0 30px;padding:55px 0 0;height:110px;text-shadow:0 0 1px white,0 1px 2px rgba(0,0,0,.3)}
.ih-item.circle.effect1 .info p{color:#bbb;padding:10px 5px;font-style:italic;margin:0 30px;font-size:12px;border-top:1px solid rgba(255,255,255,.5)}
.ih-item.circle.effect1 a:hover .spinner{-webkit-transform:rotate(180deg);-moz-transform:rotate(180deg);-ms-transform:rotate(180deg);-o-transform:rotate(180deg);transform:rotate(180deg)}
.ih-item.circle.effect1 a:hover .info{opacity:1}