﻿.header{background-size: cover; }
.header-top {}
.header-top-center { display: block; margin: 0 auto; width: 100%; }
.header-top-center a { color: #fff; font-family: 'Open Sans', sans-serif; font-size: 12px; }
.header-top-center a:hover { color: #fff; text-decoration: none; }
.header-top-center .header-top-policy { height: auto; width: auto; }
.header-top-center ul{}
.header-top-center li{
    display: inline;
    padding: 10px 20px;
    float: left;
}
.header-top-center li:first-child{padding-left: 0}
.header-top-center li:last-child{padding-right: 0}
.header-top-center .header-top-policy a { padding: 0 40px; font-size: 12px; text-transform: uppercase; }
.header-top-center .header-top-policy a:first-child { padding-left: 0; }
.header-top-center .header-top-policy a:last-child { padding-right: 0; }
.header-top-center .header-top-policy i,.header-top-center .header-top-sub-right i { font-size: 16px; color: #fff; padding-right: 7px; }
.header-top-center .header-top-sub-right { float: right; width: auto; color: #fff;}
.header-top-center .header-top-sub-right a { padding: 0 10px; text-transform: uppercase; font-size: 12px; }
.header-top-center .header-top-sub-right a:first-child { padding-left: 0; }
.header-top-center .header-top-sub-right a:last-child { padding-right: 0; }

.header-middle { position: relative; padding:15px 0}
.header_logo { float: left;height: auto;}
.header_logo .logo { float: left; width: 100px; height: auto;  }
.header_logo .logo img { width: auto; height: auto; max-width: 100%; }
.header_search {width: 100%;position: relative;    margin-top: 8px;
}
.header_search input { float: left; width: 100%; height: 34px; border: none; font-size: 13px; text-indent: 10px; background: #f2f2f2;}
.header_search a.btn-search {
    position: absolute;
    color: #9d9d9d;
    width: 34px;
    height: 34px;
    text-align: center;
    line-height: 33px;
    background: #f2f2f2;
    right: -3px;
    top: 0;
    cursor: pointer;
    font-size: 22px;
}
.header-right { float: right; width: auto; margin: 0px 0px; }
.header-right .m-hotline { float: left; font-size: 15px; padding-right: 15px; }
.header-right .bag { position: relative; padding-right:18px;}
.header-right .bag i { font-size: 25px; color: #666; }
.header-right .bag strong { color: #000; float: left; font-size: 14px; font-weight: normal; margin-top: 4px; padding-right: 10px; }
.header-right .bag span {margin-left: 10px;}
.header-right .m-search { float: left; padding: 0 10px; display: none; }
.header-right .m-search i { font-size: 25px; color: #666; padding: 6px 0; }
.header-right-all-2 {
    position: absolute;
    left: 158px;
    padding: 15px;

}
.header-info{
    margin-left: 30px;
    position: absolute;
    left: 150px;
    bottom: 15px;
}
    .header-info h3{margin: 0}
    .header-contact { position: absolute; right: 15px; bottom: 15px; }
.header-contact p i{
    font-size: 22px; 
    font-weight: bold;
    margin-right: 5px;
    width: 26px;
    color: #999
}



.header-bottom {float:left; width:100%; height:auto;}
.header-menu {
    float: left;
    width: 100%;
    height: auto;
    z-index: 1000;
    position: relative;
}
.header-menu>ul {display: table-row; margin: 0; padding: 0;}
.header-menu>ul>li {font-family:'Open Sans', sans-serif; display: table-cell; width: 1%; position: relative; transition: all linear .3s;}
.header-menu>ul>li:hover{background: #ffde00}
.header-menu>ul>li>a {
    text-decoration:none; 
    color:#000; font-size:14px; 
    text-transform:uppercase ;
    display: block;
    text-align: center;
    text-transform: uppercase;
    white-space: nowrap;
}
.header-menu>ul>li > a > strong {
    display: inline-block;
    padding: 10px 0;
    font-weight: bold;
    color: #333;
}
.header-menu>ul>li:first-child {padding-left:0}
.header-menu>ul>li:last-child {padding-right:0}

.header-right-all {
    margin-right: 320px;
}
.header-menu>ul>li>ul{
    position: absolute;
    z-index: 999;
    background: #ffde00cc;
    top: 100%;
    left: 0;
    min-width: 100%;
    transition: all linear 1s; 
    max-height: 0;
    overflow: hidden;
}
.header-menu>ul>li:hover>ul{
    max-height: 80VH;
}
.header-menu>ul>li>ul>li>a{
    padding: 5px 15px;
    border-bottom: 1px solid #eee;
    transition: all linear .3s;
    display: block;
}
.header-menu>ul>li>ul>li:last-child>a{
    border-bottom: 0;
    padding-bottom: 15px
}
.header-menu>ul>li>ul>li:first-child>a{
    padding-top: 15px;
}
.header-menu>ul>li>ul>li>a:hover{background: #1d3047; color: #fff}


.header a.mmenu{top: 50%; transform: translateY(-50%);}
/**	Responsive Rules
*************************************************** **/


/* long menu buttons - fix */

@media only screen and (max-width: 1280px) {
}

@media only screen and (max-width: 1200px) {
}
/* 
BOOTSTRAP MOBILE EXTRA FIX
Since Atropos v1.3 
*/
@media only screen and (max-width: 1004px) {
    .header_search {width: 50%; }
}


/* 
    BOOTSTRAP FIX
    Since Atropos v1.3 
    */
    @media (max-width: 995px) {
    }

    @media (max-width: 870px) {
        .header-contact{display: none;}
        
        .header-top {display:none}
        .header-middle {padding:10px 0}
        .header-bottom {display:none}
        .header_logo { float: left; height: auto; width: 100%; background: none; max-width: inherit; padding: 5px 0; }
        .header_logo .logo { 
            float: left;
            width: 70px;
            height: auto;
            margin-left: 50px;
        }
        .header-right { position: absolute; margin: 0; top: 50%;transform: translateY(-50%); right: 15px; }
        .header_search { float: left; width: auto; width: 100%; position: relative; margin: 0px 0; padding: 0px 10px 0 10px; box-sizing: border-box; background: #FFF; display: none; }
        .header_search a.btn-search { top: 0px; right: 10px; }
        .header-right .m-search i { font-size: 20px; color: #666; padding: 3px 0; }
        .header-right .m-search { display: block; }
        .header-right .bag {position: relative;padding-right: 18px;height: 24px;display: none;}
    }

    @media (max-width: 830px) {
    }

    @media only screen and (max-width: 767px) {
        .header-info{
            margin-left: 10px; font-size: 13px;
        }
        .header-info h3{font-size: 22px;}

    }

    @media all and (max-width : 330px) {
    }

    @media only screen and (max-width: 550px) {
    }

    @media only screen and (max-width: 480px) {
        .header_logo{
            float: none;
            display: block;
            width: 100%;
            text-align: center;
        }
        .header_logo .logo{
            float: none;
            width: 60px;
            margin: 0;
            display: inline-block;
        }
        .header-info{
            font-size: 12px;
            position: relative;
            float: none;
            left: 0;
            margin: 0;
            text-align: center;
            margin-top: 15px;
            clear: both;
        }
        .header-info h3{font-size: 16px; font-weight: 600}
        .header a.mmenu{top: 8px; left: 10px; transform: none; }
    }



    @media screen and (max-width:480px) {
    }
