/* reset */
html { -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; }
/* 移动设备关闭字体大小自动调整功能 */
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, form, input, textarea, p, th, td, hr, button { margin: 0; padding: 0; }
body { font: 16px/24px Verdana, 'Microsoft YaHei'; color: #666; }
em, var, i { font-style: normal; font-weight: 500; }
input, textarea, select, button { font-family: 'Microsoft YaHei'; outline: none; border: none; background: none; resize: none; border-radius: 0; -webkit-appearance: none; -moz-appearance: none; appearance: none; }
table { border-collapse: collapse; border-spacing: 0; }
th { text-align: inherit; }
img { border: 0; }
iframe { display: block; }
ol, ul, li { list-style: none; }
* { box-sizing: border-box; }
a { color: #333; text-decoration: none; }
a:hover, a:active { outline: none; }

.clearfix:after { visibility: hidden; display: block; font-size: 0; content: " "; clear: both; height: 0; line-height: 0; }
.clearfix { zoom: 1; /* for IE6 IE7 */ }

.main { width: 1024px; margin-left: auto; margin-right: auto; }
.pt80 { padding-top: 80px; }

/* header-bar */
.header-bar { position: fixed; left: 0; top: 0; right: 0; z-index: 900; height: 80px; background-color: #0781e3; }
.header-bar .logo { float: left; line-height: 24px; margin-top: 28px; }
.header-bar .logo img { float: left; height:24px; margin-right: 10px; }
.header-bar .logo h1 { float: left; height:24px; line-height:24px; font-size: 16px; color: #fff; }
.header-bar .main-nav { float: right; margin-top: 12px; }
.header-bar .main-nav li { float: left; margin-left: 80px; }
.header-bar .main-nav li a { display: block; line-height: 60px; color: rgba(255,255,255, .7); position: relative; }
.header-bar .main-nav li a:after { position: absolute; left: 50%; bottom: 10px; content: ''; width: 0; height: 4px; background-color: rgba(255,255,255, .7); transform: translateX(-50%); transition: all .15s linear; }
.header-bar .main-nav li a:hover, .header-bar .main-nav li.cur a { color: #fff; }
.header-bar .main-nav li a:hover:after, .header-bar .main-nav li.cur a:after { width: 100%; }
/**/
.menu-btn { float: right; height: 60px; line-height: 60px; display: none; }
.icon-menu { display: inline-block; width: 20px; height: 2px; margin-top: -2px; background-color: #fff; vertical-align: middle; position: relative; }
.icon-menu:before, .icon-menu:after { position: absolute; left: 0; content: ''; width: 100%; height: 2px; background-color: #fff; transition: all .15s linear; }
.icon-menu:before { top: -5px; }
.icon-menu:after { bottom: -5px; }

/* footer */
.footer { padding: 45px 10px; text-align: center; background: #0781e3 url(../image/footer.png) no-repeat center bottom; }
.footer img { display: block; margin: 0 auto; }
.footer p { color: #fff; line-height: 30px; margin-top: 10px; }
.footer a { color: #fff; line-height: 30px; text-decoration: underline; margin-top: 10px; }
.footer a:hover { color:rgb(255 0 0);}


/**/
@keyframes upshow {
    0% { opacity: 0; transform: translateY(20%); }
    5% { opacity: 0; transform: translateY(10%); }
    100% { opacity: 1; transform: translateY(0%); }
}

@keyframes downshow {
    0% { opacity: 0; transform: translateY(-20%); }
    5% { opacity: 0; transform: translateY(-10%); }
    100% { opacity: 1; transform: translateY(0%); }
}

/** iPhone **/
@media only screen and (min-width: 320px) and (max-width: 767px) {
    .main { width: 100%; position: relative; }
    .header-bar { height: 60px; }
    .header-bar .logo { margin: 18px 0 0 15px; }
    .header-bar .logo h1 { font-size: 20px; }
    .header-bar .menu-btn { display: block; padding: 0 15px; }
    .header-bar .menu-btn.show .icon-menu { background: none; }
    .header-bar .menu-btn.show .icon-menu:before { top: 0; transform: rotate(45deg); }
    .header-bar .menu-btn.show .icon-menu:after { top: 0; transform: rotate(-45deg); }

    .header-bar .main-nav { position: absolute; top: 60px; right: 0; display: none; width: 100%; background-color: rgba(7,129,227, .95); margin-top: 0; }
    .header-bar .main-nav li { margin-left: 0; width: 100%; }
    .header-bar .main-nav li a { padding: 0 20px; text-align: center; }
    .header-bar .main-nav li a:after { bottom: 0; width: 100%; height: 1px; background-color: rgba(255,255,255, .3); }

    .footer p { font-size: 14px; }
}