.fl { float: left; } .fr { float: right; } .of { overflow: hidden; } .cl { clear: both; } .fixDiv{ position:fixed !important; top:0; left:0; z-index: 9999 !important; } .header-b { background: url("../images/bg.jpg"); height: 60px; background-size: 100% 100%; /* overflow: hidden; */ line-height: 60px; z-index: 51; width: 100%; position: relative; left: 0; top: 0; } .header-b .logo img { max-width: 300px; width: 80%; margin-right: 20px; } .header-b ul { margin-right: 30px; float: left; } .header-b ul li { float: left; font-size: 16px; padding: 0 10px; line-height: 57px; width: 100px; } .header-b ul li a img { height: 36px; line-height: 20px; display: inline-block; margin-top: -20px; } .header-b ul li a p { line-height: 16px; color: #fff; margin-top: -24px; font-size: 13px; } .header-w { background-color: #0095ff; height: 60px; /* overflow: hidden; */ line-height: 60px; z-index: 51; width: 100%; position: relative; left: 0; top: 0; } .header-w .logo { height: 60px; } .header-w .logo img { max-width: 300px; width: 80%; margin-top: 6px; margin-right: 20px; } .header-w ul { margin-right: 30px; float: left; } .header-w ul li { float: left; font-size: 16px; padding: 0 30px; line-height: 57px; } .header { background-color: #fff; height: 60px; /* overflow: hidden; */ line-height: 60px; z-index: 51; width: 100%; position: relative; left: 0; top: 0; box-shadow: 0 0 5px 2px rgba(0, 0, 0, .1); /*-webkit-transition: all 0.2s ease;*/ /*transition: all 0.2s ease;*/ } .header .logo { height: 60px; } .header .logo img { margin-top: -3px; max-width: 300px; width: 80%; margin-right: 20px; } .header ul { margin-right: 30px; float: left; } .header ul li { float: left; font-size: 16px; padding: 0 30px; line-height: 57px; } .header_right { height: 60px; /*margin-right: 100px;*/ } .head-cur { /*background: #0077e6;*/ /*color: #FFFFFF ;*/ height: 58px; color: #0077e6 !important; border-bottom: 2px solid #0077e6; /*margin-top: -2px;*/ } .head-cur a { color: #0077e6; } .header ul li a { padding: 0; display: block; line-height: 57px; cursor: pointer; } .login_btn { float: left; color: #0077e6; font-size: 16px; font-weight: normal; padding: 0 8px; height: 16px; margin-top: 22px; line-height: 16px; } .login_btn2 { float: left; color: #0077e6; font-size: 16px; font-weight: normal; padding: 0 8px; height: 16px; margin-top: 22px; border-left: 1.5px solid #0077e6; line-height: 16px; } /*.header ul li a:hover {*/ /*border-bottom: 3px solid #001c77;*/ /*}*/ .header .right a { color: #1034aa; padding: 6px 25px; font-size: 16px; border: 1px solid #1034aa; line-height: 36px; height: 36px; border-radius: 26px; } .head-nav { /*position: relative;*/ width: 1280px; /*z-index: 9999;*/ margin: 0 auto; } .head-nav-con { width: 1280px; margin: auto; /*position: absolute;*/ } .head-nav-con ul li { /*width: 100px;*/ float: left; font-size: 16px; text-align: center; line-height: 57px; } .nav > ul { *zoom: 1; *clear: both; } .nav > ul:before, .nav > ul:after { display: table; clear: both; content: ''; } .nav > ul > li { /*width: 13%;*/ /*float: left;*/ /*margin-left: 1%;*/ position: relative; } .nav > ul > li > a { display: block; white-space: nowrap; font-size: 16px; text-align: center; line-height: 60px; height: 60px; position: relative; /* font-weight: bold; */ /*color: #313131;*/ } .nav > ul > li > a:after { content: ''; /*display: block;*/ width: 0; height: 2px; background-color: #117be5; overflow: hidden; position: absolute; left: 50%; bottom: 0; -webkit-transition: all 0.3s ease; transition: all 0.3s ease; display: none; } .nav > ul > li.cur > a:after, .nav > ul > li:hover > a:after { width: 100%; left: 0; } .nav > ul > li.cur > a, .nav > ul > li:hover > a { /*color: #001c77;*/ color: #0077e6; } .nav > ul ul { width: 170px; /*border: #ccc 1px solid;*/ /*border-top: #001c77 2px solid;*/ background-color:#134a95; position: absolute; color: #fff; padding: 10px 0; /*left: 0;*/ top: 60px; opacity: 0; visibility: hidden; left: 50%; margin-left: -75px; /* box-shadow:0 0 5px #333; */ /*transition: all 0.25s ease 0s;*/ /*-webkit-transform: translate(0, 20px);*/ /*-moz-transform: translate(0, 20px);*/ /*-ms-transform: translate(0, 20px);*/ /*-o-transform: translate(0, 20px);*/ /*-webkit-transition: all 0.5s cubic-bezier(0.215, 0.61, 0.355, 1);*/ /*-moz-transition: all 0.5s cubic-bezier(0.215, 0.61, 0.355, 1);*/ /*-o-transition: all 0.5s cubic-bezier(0.215, 0.61, 0.355, 1);*/ /*transition: all 0.5s cubic-bezier(0.215, 0.61, 0.355, 1);*/ } .list { width: 1100px; background-color: #134a95; padding: 0 30px; color: #fff; position: absolute; left: 0; top: 60px; opacity: 0; overflow: hidden; visibility: hidden; left: 50%; margin-left: -600px; /* box-shadow:0 0 5px #333; */ /*transition: all 0.25s ease 0s;*/ /*-webkit-transform: translate(0, 20px);*/ /*-moz-transform: translate(0, 20px);*/ /*-ms-transform: translate(0, 20px);*/ /*-o-transform: translate(0, 20px);*/ /*-webkit-transition: all 0.5s cubic-bezier(0.215, 0.61, 0.355, 1);*/ /*-moz-transition: all 0.5s cubic-bezier(0.215, 0.61, 0.355, 1);*/ /*-o-transition: all 0.5s cubic-bezier(0.215, 0.61, 0.355, 1);*/ /*transition: all 0.5s cubic-bezier(0.215, 0.61, 0.355, 1);*/ } .list .pd { float: left; width: 190px; overflow: hidden; margin: 10px 10px; } .list h2{ font-size: 14px; color: rgba(187, 208, 239, 0.96); line-height: 35px; float: left; padding-left: 30px; font-weight: 500; } .list .pd li { width: 250px; padding-left: 0; position: relative; } .list .pd ul{ position: static; opacity: 1; margin-left: 0; border: none; border-top: none; width: 250px;} .nav > ul ul li { width: 240px; padding-left: 0; position: relative; } .nav > ul ul a { display: block; line-height: 22px; padding: 4px 30px; font-size: 13px; color: #fff; float: left; position: relative; } .nav > ul ul a:after { content: ''; display: block; width: 10px; height: 5px; overflow: hidden; background: url("../images/nav_arr.png") -10px 0 no-repeat; position: absolute; right: -15px; top: 12px; -webkit-transition: all 0.3s ease; transition: all 0.3s ease; } .nav > ul ul a:hover { /*background-color: #f9f9f9;*/ color:#010e22; } .nav > ul ul a:hover:after { background-position: 0 0; } .nav > ul > li:hover ul { opacity: 1; visibility: visible; /*-webkit-transform: translate(0, 0);*/ /*-moz-transform: translate(0, 0);*/ /*-ms-transform: translate(0, 0);*/ /*-o-transform: translate(0, 0);*/ } .nav > ul > li:hover .list { opacity: 1; visibility: visible; /*-webkit-transform: translate(0, 0);*/ /*-moz-transform: translate(0, 0);*/ /*-ms-transform: translate(0, 0);*/ /*-o-transform: translate(0, 0);*/ } .nav .nav_svc .prd_svc { float: left; width: 225px; /* border-left: 1px solid #eee; */ margin: 10px 10px; } .nav .nav_svc .prd_svc h2 { font-size: 14px; color: rgba(187, 208, 239, 0.96); line-height: 35px; float: left; padding-left: 35px; font-weight: 500; /*padding-left: 32px;*/ /*margin-top: -10px*/ } .nav .nav_svc { width: 1000px; /* border: #ccc 1px solid; */ /* border-top: #001c77 2px solid; */ background-color: #0156c4; padding: 0 30px; color: #fff; position: absolute; /* left: 0; */ top: 80px; opacity: 0; visibility: hidden; /* left: 50%; */ margin-left: -600px; /* box-shadow:0 0 5px #333; */ /*-webkit-transform: translate(0, 20px);*/ /*-moz-transform: translate(0, 20px);*/ /*-ms-transform: translate(0, 20px);*/ /*-o-transform: translate(0, 20px);*/ /*-webkit-transition: all 0.5s cubic-bezier(0.215, 0.61, 0.355, 1);*/ /*-moz-transition: all 0.5s cubic-bezier(0.215, 0.61, 0.355, 1);*/ /*-o-transition: all 0.5s cubic-bezier(0.215, 0.61, 0.355, 1);*/ /*transition: all 0.5s cubic-bezier(0.215, 0.61, 0.355, 1);*/ } .nav .nav_svc .prd_svc ul { position: static; opacity: 1; margin-left: 0; border: none; border-top: none; width: 225px; } .nav .nav_svc .prd_svc ul li { width: 225px; } .nav > ul > li:hover .nav_svc { opacity: 1; visibility: visible; -webkit-transform: translate(0, 0); -moz-transform: translate(0, 0); -ms-transform: translate(0, 0); -o-transform: translate(0, 0); } .fix { *zoom: 1; *clear: both; } .fix:before, .fix:after { display: table; clear: both; content: ''; }