/* 
* @Author: shancha
* @Date:   2016-02-20 15:26:09
* @Last Modified by:   shancha
* @Last Modified time: 2016-05-13 17:32:16
*/
/* 主要结构 */
.content-area {
    width: 1070px;
    margin: 0 auto;
}

header, footer {
    width: 100%;
}

header {
    height: 80px;
    width: 100%;
    background: rgba(255, 255, 255, 0.75);
    top: 0;
    /*position: fixed;*/
    left: 0;
    /*overflow:hidden;*/
    z-index: 9;
}

.header_fixed {
    position: fixed;
    animation: myheader 3s;
    -moz-animation: myheader 3s; /* Firefox */
    -webkit-animation: myheader 3s; /* Safari 和 Chrome */
    -o-animation: myheader 3s; /* Opera */
}

@
keyframes myheader {
    from {opacity: 0;
}

to {
    opacity: 1;
}

}
@
-moz-keyframes myheader /* Firefox */ {
    from {opacity: 0;
}

to {
    opacity: 1;
}

}
@
-webkit-keyframes myheader /* Safari 和 Chrome */ {
    from {opacity: 0;
}

to {
    opacity: 1;
}

}
@
-o-keyframes myheader /* Opera */ {
    from {opacity: 0;
}

to {
    opacity: 1;
}

}
footer {
    height: auto;
    background: #1c2237;
}
/* header-nav */
.header-area, .header-area .nav {
    /*overflow:hidden;*/
    
}

.header-area .logo {
    width: 71px;
    height: 50px;
    display: inline-block;
    cursor: pointer;
    background: url(../images/home_01.png);
    float: left;
    margin-top: 10px;
}

header .content-area {
    width: 89%;
}

.header-area .nav-list {
    float: left;
    line-height: 80px;
    width: 11.1%;
    text-align: center;
    cursor: pointer;
    font-size: 16px;
    position: relative;
}

.header-area .nav-list a {
    display: block;
    width: 100%;
    height: 100%;
}

.header-area .nav-list:first-child {
    margin-left: 2.5%;
}

.header-area .nav-list:hover {
    background-color: #dd403b;
    transition: all 1.5s ease 0.01s;
}

.header-area .nav-list:hover a {
    color: #fff;
}

.header-area .nav-list.current {
    background-color: #dd403b;
    transition: all 1.5s ease 0.01s;
}

.header-area .nav-list.current a {
    color: #fff;
}

.child-nav {
    position: absolute;
    right: 0;
    top: 80px;
    width: 100%;
    height: auto;
    z-index: 9;
    display: none;
}

.child-nav .child-list {
    height: 50px;
    line-height: 50px;
    background: #dd403b;
}

.child-nav .child-list a {
    color: #fff;
}

.child-nav .child-list:hover {
    background: #c51f19;
}

.child-nav .child-list.active {
    background: #c51f19;
}
/* .header-area .nav-list:hover .child-nav {
	display: block;
	transition: all 5s ease 0.1s;
} */
.header-area .phone {
    width: 0px;
    height: 40px;
    line-height: 40px;
    background-position: center;
    background-repeat: no-repeat;
    background-image: url(../images/home_47.png);
    background-color: rgba(240, 240, 240, 0.5);
    cursor: pointer;
    margin-top: 15px;
    border-radius: 3px;
    overflow: hidden;
    padding-left: 40px;
    text-indent: 0.5em;
}

.header-area .phone:hover {
    width: 120px;
    background-position: 5px center;
}

@media ( min-width :800px) and (max-width:1024px) {
    .content-area {
        width: 95%;
    }
    .brand-list .content-area {
        width: 968px;
    }
}

@media ( min-width :1367px) {
    header .content-area {
        width: 1260px;
    }
    /*.content-area{
	width:1070px;
	}*/
}

footer {
    width: 100%;
    height: 255px;
    padding-top: 60px;
    background: #1c2237;
}

.category {
    width: 33%;
    float: left;
    height: auto;
    text-align: center;
}

.category-main {
    width: 235px;
    height: 93px;
    text-align: left;
    padding: 16px 38px 21px 23px;
    box-sizing: border-box;
    border: 1px solid #50566b;
    color: #a7abbc;
    font-size: 16px;
    display: inline-block;
    position: relative;
}

.category-main .qr-code {
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -46px;
    margin-left: -48px;
    transform: scale(2);
    display: none;
}

.category-main:hover .qr-code {
    display: block;
    transition: all 3s ease 0.2s;
    transform: scale(2);
    -webkit-transition: all 3s ease 0.2s;
    -webkit-transform: scale(2);
    -moz-transition: all 3s ease 0.2s;
    -moz-transform: scale(2);
    -ms-transition: all 3s ease 0.2s;
    -ms-transform: scale(2);
}

.category-main>img {
    float: left;
}

.category-main:hover {
    color: #fff;
}

.category-main:hover img {
    transition: all 1.5s ease 0.1s;
    transform: scale(1.2, 1.2);
    -webkit-transition: all 1.5s ease 0.1s;
    -webkit-transform: scale(1.2, 1.2);
    -moz-transition: all 1.5s ease 0.1s;
    -moz-transform: scale(1.2, 1.2);
    -o-transition: all 1.5s ease 0.1s;
    -o-transform: scale(1.2, 1.2);
}

.category-main .text {
    display: block;
    margin-left: 15px;
    line-height: 28px;
}

.category-main .little-text {
    font-size: 16px;
    color: #696d7d;
}

.ftConw {
    width: 100%;
    margin: 70px auto 0;
    line-height: 30px;
    font-size: 12px;
    color: #5f6473;
    text-align: center;
}

.ftConw>ul {
    width: 255px;
    margin: 0 auto;
}

.ftConw-list {
    float: left;
    width: 33%;
    text-align: center;
}

.ftConw-list a {
    color: #a7abbc;
    font-size: 14px;
}

.ftConw-list:hover a {
    color: #fff;
}

/* dialog */
.dialog-bg {
    width: 100%;
    height: 100%;
    position: fixed;
    left: 0;
    top: 0;
    z-index: 9;
    background-color: rgba(0, 0, 0, 0.2);
    display: block;
}

.dialog-bg .dialog-main {
    line-height: 58px;
    font-size: 20px;
    padding: 40px 60px;
    background-color: #fff;
    border-radius: 5px;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-left: -240px;
    margin-top: -90px;
    height: 77px;
    width: 450px;
    vertical-align: middle;
    text-align: center;
    box-sizing: content-box;
}

.dialog-bg .dialog-main img {
    margin-right: 20px;
}

.hide {
    display: none;
}