/*header*/ .header { width: 100%; height: auto; /* box-shadow: 0px 0px 13px 0px rgba(0,0,0,0.12); */ position: absolute; left: 0; top: 0; z-index: 10; background-image: linear-gradient(#242424, rgba(36, 36, 36, 0)); border-top: 8px solid #196ee6; } .hfixed { position: fixed; left: 0; top: 0; z-index: 4; /* background-image: linear-gradient(#242424, rgba(36, 36, 36, .4)); */ } .header .header_inner { display: flex; flex-direction: row; justify-content: space-between; align-items: center; padding: 0 .64rem; height: 80px; margin: 0 auto; position: relative; } .header .header_inner a.logo { display: block; margin: 16px 0; width: 6.92rem; height: 56px; line-height: 56px; background: url(../images/红色校徽.png) no-repeat center; background-size: 100% auto; text-indent: -9999px; position: relative; } .header .header_inner .login_header { display: flex; justify-content: flex-end; align-items: center; width: 20%; } .header .header_inner .login_header i { font-size: .32rem; margin: 0 2px 0 0; } .header .header_inner .login_header a { display: inline-block; height: 24px; line-height: 24px; font-size: .32rem; padding: .16rem; white-space: nowrap; position: relative; font-weight: 400; color: #c6c6c6; } .header .header_inner .login_header a em { display: block; min-width: .32rem; height: 16px; line-height: 16px; font-size: .28rem; text-align: center; padding: 2px; border-radius: 50%; color: #fff; background: #cf1d1b; position: absolute; right: -14px; top: 10px; z-index: 2; } .header .header_inner .login_header a:hover { color: #f07800; } .header .header_inner .login_header a.k { border: 1px solid #fff; color: #fff; background: rgba(255, 255, 255, .3); padding: 4px .32rem; margin: 0 0 0 .32rem; border-radius: 2px; } .header .header_inner .login_header a.k { border-radius: 3px; } .header .header_inner .login_header a.k:hover { border-color: #f07800; background: #f07800; color: #fff; } .header a.mm_menu { display: none; } .mask_mm_menu { width: 100%; height: 14.5rem; position: fixed; z-index: 4; background: rgba(0, 0, 0, .25); display: none; } /*nav*/ .header .header_inner .nav { height: 48px; width: 60%; } .header .header_inner .nav { display: flex; flex-direction: row; justify-content: center; align-items: center; flex-wrap: nowrap; margin: 0 auto; ; position: relative; } .header .header_inner .nav li { display: block; padding: 8px 0; position: relative; } .header .header_inner .nav li>a { display: block; padding: 0 .32rem; font-size: .4rem; line-height: 24px; text-align: center; white-space: nowrap; font-weight: 500; color: #fff; } .header .header_inner .nav li>a i { padding: 0 0 0 2px; font-size: .24rem; color: #fff; } .header .header_inner .nav li>a:hover { color: #f07800; text-decoration: none; } .header .header_inner .nav li>a.hover { color: #f07800; } .header .header_inner .nav li>a.on { color: #f07800; } .header .header_inner .nav li>a.hover i { color: #fff; } .header .header_inner .nav li>a span { font-size: 10px !important; font-family: Arial, Helvetica, sans-serif; color: #666; line-height: 1.4em; } .header .header_inner .nav li .submenu { min-width: 120px; padding: 12px 0; background: #fff; position: absolute; border: 1px solid #f0f0f0; top: 40px; left: 6px; z-index: 4; display: none; } .header .header_inner .nav li .submenu { -webkit-box-shadow: 0 0 6px rgba(208, 208, 208, .4); -moz-box-shadow: 0 0 6px rgba(208, 208, 208, .4); -o-box-shadow: 0 0 6px rgba(208, 208, 208, .4); box-shadow: 0 0 6px rgba(208, 208, 208, .4); } .header .header_inner .nav li .submenu { -webkit-border-radius: 4px; -moz-border-radius: 4px; -o-border-radius: 4px; border-radius: 4px; } .header .header_inner .nav li .submenu:before { content: ''; position: absolute; width: 8px; height: 8px; top: -4px; margin-left: 28px; background: #fff; z-index: 3; border-left: 1px solid #f0f0f0; border-top: 1px solid #f0f0f0; transform: rotate(45deg); -ms-transform: rotate(45deg); /* IE 9 */ -moz-transform: rotate(45deg); /* Firefox */ -webkit-transform: rotate(45deg); /* Safari 和 Chrome */ -o-transform: rotate(45deg); /* Opera */ } .header .nav li .submenu a { display: block; white-space: nowrap; padding: 12px 16px; height: 16px; line-height: 16px; font-size: 14px; } .header .nav li .submenu a:hover { background: rgba(0, 153, 255, .08); color: #f07800; } .ico_png { position: absolute; top: 8px; right: 125px; z-index: 9; } .ico_png { position: absolute; top: 8px; right: 125px; z-index: 9; } @media screen and (min-width:1024px) and (max-width:1440px) { .header .header_inner .nav li>a { font-size: .46rem; } .header .header_inner .login_header a { font-size: .4rem; } } @media screen and (min-width:768px) and (max-width:1024px) { .header .header_inner { padding: 0 24px; position: relative; } .header .header_inner a.logo { width: 180px; height: 28px; } /*header*/ .header { width: 100%; height: 56px; z-index: 6; } .hfixed { position: fixed; left: 0; top: 0; z-index: 7; /* background-image: linear-gradient(#242424, rgba(36, 36, 36, .9)); */ } .header .header_inner { padding: 0 14px; height: 54px; margin: 0 auto; } .header .header_inner a.logo { width: 230px; height: 32px; margin: 12px 0; position: absolute; left: 14px; top: 0; } .header .header_inner .login_header { position: absolute; right: 78px; top: 14px; align-items: center; } .header .header_inner .login_header a { height: 16px; font-size: 16px; line-height: 16px; padding: 0 12px 0 0; } .header .header_inner .login_header a em { padding: 2px; font-size: 14px; top: -2px; right: -12px; } .header .header_inner .login_header a.k { display: block; font-size: 16px; height: 16px; line-height: 16px; padding: 4px 12px; } .header .header_inner a.mm_menu { display: block; width: 54px; height: 54px; position: absolute; right: 14px; top: 0; color: #f0f0f0; } .header .header_inner a.mm_menu i.iconfont { display: block; width: 54px; height: 54px; line-height: 54px; text-align: center; font-size: 28px; color: #fff } .header .header_inner a.mm_menu:hover, .header .header_inner a.mm_menu:hover i { color: #fff; } /*nav*/ .header .header_inner .nav { display: block; height: auto; float: none; margin: 0; width: 100%; position: relative; position: absolute; top: 54px; left: 0; z-index: 9; background: rgba(36, 36, 36, .7); display: none; } .header .header_inner .nav .nav_inner { height: auto; } .header .header_inner .nav { -webkit-box-shadow: 0 2px 6px #d6d6d6; -moz-box-shadow: 0 2px 6px #d6d6d6; -o-box-shadow: 0 2px 6px #d6d6d6; box-shadow: 0 2px 6px #d6d6d6; } .header .header_inner .nav li { display: block; float: none; margin: 0; font-size: 16px; border-bottom: 1px solid #424242; position: relative; padding: 0; } .header .header_inner .nav li>a { display: block; font-size: 16px; padding: 16px; height: 16px; line-height: 16px; text-align: left; background: rgba(36, 36, 36, .7); } .header .header_inner .nav li>a { -webkit-border-radius: 0; -moz-border-radius: 0; -o-border-radius: 0; border-radius: 0; } .header .header_inner .nav li>a i { padding: 0 0 0 2px; font-size: 14px; color: #666; } .header .header_inner .nav li>a:hover { background: #424242; color: #f07800; text-decoration: none; } .header .header_inner .nav li>a.on { background: none; color: #f07800; } .header .header_inner .nav li>a.hover { color: #f07800; } .header .header_inner .nav li>a.hover i { color: #f07800; } .header .header_inner .nav li>a span { font-size: 10px !important; font-family: Arial, Helvetica, sans-serif; color: #666; line-height: 1.4em; } .ico_png { position: absolute; top: 8px; right: 125px; z-index: 9; } .header .header_inner .nav li .submenu { border-radius: none; box-shadow: none; left: auto; top: auto; } .header .header_inner .nav li .submenu { width: 100%; padding: 7px 0; background: #fff; border-top: 1px solid #e6e6e6; position: relative; display: none; } .header .header_inner .nav li .submenu { -webkit-border-radius: 0; -moz-border-radius: 0; -o-border-radius: 0; border-radius: 0; } .header .header_inner .nav li .submenu:before { content: ''; position: absolute; width: 12px; height: 12px; top: -7px; margin-left: 20px; background: #fff; z-index: 3; border-left: 1px solid #e6e6e6; border-top: 1px solid #e6e6e6; transform: rotate(45deg); -ms-transform: rotate(45deg); /* IE 9 */ -moz-transform: rotate(45deg); /* Firefox */ -webkit-transform: rotate(45deg); /* Safari 和 Chrome */ -o-transform: rotate(45deg); /* Opera */ } .header .header_inner .nav li .submenu a { display: block; padding: 12px 20px; height: 24px; line-height: 24px; color: #666; font-size: 16px; } .header .header_inner .nav li .submenu a:hover { color: #f07800; } } @media screen and (max-width:768px) { /*header*/ .header { width: 100%; height: 56px; z-index: 6; } .hfixed { position: fixed; left: 0; top: 0; z-index: 7; /* background-image: linear-gradient(#242424, rgba(36, 36, 36, .9)); */ } .header .header_inner { padding: 0 14px; height: 54px; margin: 0 auto; } .header .header_inner a.logo { width: 230px; height: 32px; margin: 12px 0; position: absolute; left: 14px; top: 0; } .header .header_inner .login_header { position: absolute; right: 78px; top: 14px; } .header .header_inner .login_header a { display: none; } .header .header_inner .login_header a.k { display: block; font-size: 16px; height: 16px; line-height: 16px; padding: 4px 12px; } .header .header_inner a.mm_menu { display: block; width: 54px; height: 54px; position: absolute; right: 14px; top: 0; color: #f0f0f0; } .header .header_inner a.mm_menu i.iconfont { display: block; width: 54px; height: 54px; line-height: 54px; text-align: center; font-size: 28px; color: #000 } .header .header_inner a.mm_menu:hover, .header .header_inner a.mm_menu:hover i { color: #000; } /*nav*/ .header .header_inner .nav { display: block; height: auto; float: none; margin: 0; width: 100%; position: relative; position: absolute; top: 54px; left: 0; z-index: 9; background: rgba(36, 36, 36, .7); display: none; } .header .header_inner .nav .nav_inner { height: auto; } .header .header_inner .nav { -webkit-box-shadow: 0 2px 6px #d6d6d6; -moz-box-shadow: 0 2px 6px #d6d6d6; -o-box-shadow: 0 2px 6px #d6d6d6; box-shadow: 0 2px 6px #d6d6d6; } .header .header_inner .nav li { display: block; float: none; margin: 0; font-size: 16px; border-bottom: 1px solid #424242; position: relative; padding: 0; } .header .header_inner .nav li>a { display: block; font-size: 16px; padding: 16px; height: 16px; line-height: 16px; text-align: left; background: rgba(36, 36, 36, .7); } .header .header_inner .nav li>a { -webkit-border-radius: 0; -moz-border-radius: 0; -o-border-radius: 0; border-radius: 0; } .header .header_inner .nav li>a i { padding: 0 0 0 2px; font-size: 14px; color: #666; } .header .header_inner .nav li>a:hover { background: #424242; color: #f07800; text-decoration: none; } .header .header_inner .nav li>a.on { background: none; color: #f07800; } .header .header_inner .nav li>a.hover { color: #f07800; } .header .header_inner .nav li>a.hover i { color: #f07800; } .header .header_inner .nav li>a span { font-size: 10px !important; font-family: Arial, Helvetica, sans-serif; color: #666; line-height: 1.4em; } .ico_png { position: absolute; top: 8px; right: 125px; z-index: 9; } .header .header_inner .nav li .submenu { border-radius: none; box-shadow: none; left: auto; top: auto; } .header .header_inner .nav li .submenu { width: 100%; padding: 7px 0; background: #fff; border-top: 1px solid #e6e6e6; position: relative; display: none; } .header .header_inner .nav li .submenu { -webkit-border-radius: 0; -moz-border-radius: 0; -o-border-radius: 0; border-radius: 0; } .header .header_inner .nav li .submenu:before { content: ''; position: absolute; width: 12px; height: 12px; top: -7px; margin-left: 20px; background: #fff; z-index: 3; border-left: 1px solid #e6e6e6; border-top: 1px solid #e6e6e6; transform: rotate(45deg); -ms-transform: rotate(45deg); /* IE 9 */ -moz-transform: rotate(45deg); /* Firefox */ -webkit-transform: rotate(45deg); /* Safari 和 Chrome */ -o-transform: rotate(45deg); /* Opera */ } .header .header_inner .nav li .submenu a { display: block; padding: 12px 20px; height: 24px; line-height: 24px; color: #666; font-size: 16px; } .header .header_inner .nav li .submenu a:hover { color: #f07800; } }