@charset "utf-8";
/* css */
* { margin: 0; padding: 0 }
ul, li { list-style: none; }
a { text-decoration: none; color: #555 }
a:hover { text-decoration: none; }
header { position: fixed; top: 0; z-index: 99999 }
/*header*/
.header-navigation { position: fixed; top: 0; width: 100%; height: 60px; line-height: 60px; background: #1e3c85; text-align: center; z-index: 9999; }
.logo { float: left; font-size: 22px; font-weight: bold }
.logo a { color:#ffffff;}
nav { width: 1140px; margin: auto; position: relative }
#mnavh { display: none; width: 30px; height: 40px; text-align: center; padding: 0 5px }
#starlist { float: left; margin-left: 50px; overflow: hidden }
#starlist li {float: left;display: block;font-size: 16px;}
.navicon { display: block; position: relative; width: 30px; height: 5px; background-color: #fff; margin-top: 20px }
.navicon:before, .navicon:after { content: ''; display: block; width: 30px; height: 5px; position: absolute; background: #fff; -webkit-transition-property: margin, -webkit-transform; transition-property: margin, -webkit-transform; transition-property: margin, transform; transition-property: margin, transform, -webkit-transform; -webkit-transition-duration: 300ms; transition-duration: 300ms; }
.navicon:before { margin-top: -10px; }
.navicon:after { margin-top: 10px; }
.sub { display: none; background: #FFF; position: absolute; overflow: hidden; width: 140px; }
#starlist li a {color: #ffffff;display: block;padding: 0 15px;}
#starlist li:hover ul { display: block; }
#starlist .sub li a { color: #404040; }
#starlist .sub li { line-height: 24px; margin: 10px 0; text-align: left; }
#starlist li a:hover { color:#ffec04; }
#starlist .sub li a:hover { color: #000; position: relative }
#starlist .sub li a:hover:after { position: absolute; content: ""; background: #000; width: 2px; height: 20px; left: -10px; bottom: 0 }
/*search*/
/*search*/
.searchbox { position: absolute; right: 0; top: 0 }
.search_bar { position: relative; width: 0%; min-width: 60px; height: 60px; float: right; overflow: hidden; -webkit-transition: width 0.3s; -moz-transition: width 0.3s; transition: width 0.3s; -webkit-backface-visibility: hidden; }
.search_bar .input { position: absolute; top: 16px; right: 0; border: none; outline: none; height: 30px; line-height: 30px; z-index: 10; font-size: 16px; color: #333; background: none }
.search_ico, .search_btn { width: 60px; height: 60px; display: block; position: absolute; right: 0; top: 0; padding: 0; margin: 0; line-height: 60px; cursor: pointer; }
.search_ico { z-index: 90; }
.search_open { width: 200px; display: inline-block; padding-left: 10px; }
.search_open.search_bar .input { border-bottom: #222 1px solid; background: #dbdbdb; width: 200px; padding-left: 10px; }
.search_ico span { position: relative; top: 20px; }
.search_ico span:before { content: ' '; position: absolute; width: 12px; height: 12px; border: 1px solid #fff; border-radius: 10px; }
.search_ico span::after { content: ' '; position: absolute; width: 12px; height: 4px; background: #fff; border-radius: 5px 0 0 5px; -webkit-transform: rotate(225deg); -moz-transform: rotate(225deg); -ms-transform: rotate(225deg); -o-transform: rotate(225deg); transform: rotate(225deg); }
.search_ico span:before { top: 0; left: 0; }
.search_ico span:after { right: -22px; top: 14px; }

@media screen and (min-width: 1024px) and (max-width: 1199px) {
header { width: 100%; margin: auto; }
nav { width: 90% }
#starlist li { padding: 0 15px; }
}
@media screen and (min-width: 960px) and (max-width: 1023px) {
header { width: 100%; margin: auto; }
nav { width: 90% }
#starlist li { padding: 0 5px; }
#starlist li { width: 80px }
}
@media screen and (min-width: 768px) and (max-width: 959px) {
header { width: 100%; margin: auto; }
nav { width: 100%; position: relative }
#starlist { display: none; background: rgba(0,0,0,.5); width: 100%; margin-left: 0; }
#starlist li { display: block; padding: 0 0 0 0; width: 60%; background: #fff; border-bottom: #f5f5f5 1px solid; }
.sub { display: block; padding-left: 0; width: 100%; position: static; }
#starlist .sub li { border-bottom: none; }
#starlist li a { color: #333; }
#starlist .sub li { width: 100%; text-align: center }
.menu:after { display: none }
#mnavh { position: absolute; display: block; top: 8px; left: 10px }
#starlist li:last-child { padding-bottom: 100% }
#starlist .sub li:last-child { padding-bottom: 0 }
.logo { float: none }
}
 @media only screen and (min-width: 480px) and (max-width: 767px) {
header { width: 100%; margin: auto; }
nav { width: 100%; position: relative }
#starlist { display: none; background: rgba(0,0,0,.5); width: 100%; margin-left: 0; }
#starlist li { display: block; padding: 0 0 0 0; width: 60%; background: #fff; border-bottom: #f5f5f5 1px solid; }
.sub { display: block; padding-left: 0; width: 100%; position: static; }
#starlist .sub li { border-bottom: none; }
#starlist li a { color: #333; }
#starlist .sub li { width: 100%; text-align: center }
.menu:after { display: none }
#mnavh { position: absolute; display: block; top: 8px; left: 10px }
#starlist li:last-child { padding-bottom: 100% }
#starlist .sub li:last-child { padding-bottom: 0 }
.logo { float: none }
}
@media only screen and (max-width: 479px) {
header { width: 100%; margin: auto; }
nav { width: 100%; position: relative }
#starlist { display: none; background: rgba(0,0,0,.5); width: 100%; margin-left: 0; }
#starlist li { display: block; padding: 0 0 0 0; width: 60%; background: #fff; border-bottom: #f5f5f5 1px solid; line-height: 50px; position: relative; }
#starlist li a { color: #000 }
#starlist .sub li { width: 100%; text-align: center; }
#starlist .sub li:last-child { border-bottom: 0 }
#starlist .menu { }
#starlist ul.sub { display: block; position: inherit; left: inherit; top: inherit; width: 100%; margin-bottom: 10px; }
.menu span { display: block; width: 50px; height: 50px; background: url(../images/jia.png) no-repeat center !important; opacity: 0.5; position: absolute; top: 0; right: 0; }
#mnavh { position: absolute; display: block; top: 8px; left: 10px }
#starlist li:last-child { padding-bottom: 100% }
#starlist .sub li:last-child { padding-bottom: 0 }
#starlist .sub li:first-child { }
#starlist li:hover.menu:after { display: block }
#starlist .sub li { line-height: 24px; padding: 10px 0; margin:0 }
.logo { float: none }
}