@charset "utf-8";
.headerNav{ position: fixed; top: 0; left: 0; width: 100%; padding: 2px 0; background-color: #fff; border-bottom: 1px solid #CCC; z-index: 2;}
.headerWidth{ max-width: 1010px; margin: 0 auto;}
.headerLogo{ display: block; float: left; width: 200px; height: 50px; padding-left: 15px;}

/*--ham(mobile)----*/
.headerNavHam{ display: inline-block; float:right; width:55px; padding:22px 0;}
.headerNavHam span{ display:block; width:27px; height:3px; margin:2px auto 0 auto; background-color:#ffa91c; border-radius:100px; position:relative;}
.headerNavHam span:before,.headerNavHam span:after{ content:""; width:27px; height:3px; background-color: #ffa91c; border-radius:100px; position:absolute; left:0;}
.headerNavHam span:before{ top:-9px;}
.headerNavHam span:after{ bottom:-9px;}

/*--nav----*/
.headerNavList{ clear: both; display: none;}
.headerNavList ul{ padding: 0 10px 10px;}
.headerNavList ul li{  border-bottom: #fff 1px solid; font-size: 16px;}
.headerNavList ul li a{ display: block; padding: 10px; transition: color 0.2s; text-decoration: none;}
.headerNavList ul li a:hover{ color: #d66d00;}
.headerNavList .current{ background-color: #ffa91c; border-radius: 3px;}
.headerNavList .current a{ color: #333;}

/*--login----*/
.headerNavList ul .navLogin a{ display: inline; padding: 0;}
.headerNavList ul .navLogin span{ display: inline-block; margin: 4px 10px 0 10px; margin-left: 10px; padding: 4px 8px; border: #ffd48d 1px solid; background-color: #fff8e5;}

@media screen and (min-width:768px) and (max-width:1023px) {
    .headerNavList ul li{ font-size: 14px;}
}

@media screen and (min-width:767px) {
    .headerLogo{ padding-left: 10px;}

    /*--ham(mobile)----*/
    .headerNavHam{ display: none;}

    /*--nav----*/
    .headerNavList{ display: block; float: right; width: calc(100% - 210px); margin-top: 3px; clear: inherit;}
    .headerNavList ul{ display: flex; justify-content: flex-end; padding: 0;}
    .headerNavList ul li{ font-size: 15px;}
    .headerNavList .current a:hover{ color: #333;}
}