.header{ width:100%; position:fixed; top:0; left:0; border-bottom:solid 1px rgba(255,255,255,.2); z-index:999;} .header .container{ float:left; width:50%;} .tops{ float:left; height:50px;} .tops_left{ width:100%;} .tops_left a img{ height:50px;} .tops_left .img2{ display:none;} .tops_right{} .tofav{ height:28px; margin:3px 0 0 0; line-height:28px; font-size:14px; text-align:right;} .tofav a{ color:#FFF;} .search{ float:right; height:26px; box-shadow:0 1px 2px rgba(0,0,0,.1); overflow:hidden;} .s_keywords{ float:left; margin-bottom:0; padding:0 5px; width:180px; height:26px; line-height:1; font-size:14px; box-shadow:inset 0 2px 2px rgba(0, 0, 0, 0.1);} .s_button{ float:left; width:35px; height:26px; line-height:26px; border:0; border-radius:0; background:#007236 url(../images/ico_search.gif) center center no-repeat; background-size:26px 23px; text-shadow:1px 1px 1px #555; font-family:"Microsoft Yahei",Tahoma,Helvetica,Arial,sans-serif; vertical-align:bottom; text-indent: -99px; overflow:hidden;} .s_button:hover{ background-color:#006430; text-decoration:none;} @media (min-width:1200px){ .header{ padding:0;} .header .container{ float:none; width:80%;} .tops{ float:none; height:80px;} .tops_left{ width:200px;} .tops_left a img{ height:77px;} .tops_right{ width:auto;} } .header .nav{ display:none; -webkit-transition:.5s; -moz-transition:.5s; -o-transition:.5s; transition:.5s; height:100%; line-height:40px;} .header .navbar_nav{ margin:0; text-align:right; letter-spacing:-10px;} .header .navbar_nav li{ display:inline-block; position:relative; font-size:16px; letter-spacing:normal;} /*.header .navbar_nav li:after{ content:""; width:0; height:40px; background:#00A0E8; position:absolute; bottom:0; left:0; transition:all .5s ease 0s;} .header .navbar_nav li:hover:after{ width:100%;}*/ .header .navbar_nav li a{ display:block; height:80px; line-height:80px; padding:0 15px; -webkit-transition:.5s; -moz-transition:.5s; -o-transition:.5s; transition:.5s; color:#EEE; text-shadow:0 1px 1px rgba(0,0,0,.1); text-decoration:none;} .header .navbar_nav li:hover a{ background-color:#244C92; color:#FFF;} .header .navbar_nav li.dropdown{ display:inline-block; position:relative;} .header .navbar_nav li.dropdown .dropdown_menu{ display:none; position:absolute; top:80px; left:0; width:auto; box-shadow:0 8px 18px 0 rgba(167,165,165,.38); background-color:rgba(255,255,255,.98); border-radius:0 0 5px 5px;} .header .navbar_nav li.dropdown .dropdown_menu a{ color:#666; padding:0 20px; height:40px; line-height:40px; text-align:center; white-space:nowrap; text-overflow:ellipsis;} .header .navbar_nav li.dropdown:hover .dropdown_menu{ display:block; background-color:rgba(255,255,255,.98); -webkit-transition:.5s; -moz-transition:.5s; -o-transition:.5s; transition:.5s;} .header .navbar_nav li.dropdown:hover .dropdown_menu a{ background:none; color:#333;} .header .navbar_nav li.dropdown:hover .dropdown_menu a:hover{ background-color:#3B5F9D; color:#FFF; text-shadow:none;} /*.header .navbar_nav li.dropdown .dropdown_pro{ width:200px;} .header .navbar_nav li.dropdown .dropdown_tech{ width:150px;}*/ a .glyphicon{ padding:0 15px 0 0; border-left:solid 1px rgba(255,255,255,.2);} @media (min-width:992px){ .header .navbar_nav li a{ padding:0 8px; font-size:14px;} a .glyphicon{ padding:0 25px;} } @media (min-width:1400px){ .header .navbar_nav li a{ padding:0 10px; font-size:16px;} } .header .navbar_nav .dropsearch a{ margin-left:15px; padding:0;} .header .navbar_nav .droplan a{ padding:0;} .header .navbar_nav li.dropdown .dropsearch_menu{ padding:0px; width:350px; left:auto; right:0;} .header .navbar_nav li.dropdown .droplan_menu{ width:110px; left:auto; right:0;} .dropsearch_menu .form-group { display:block; margin:0; padding:15px;} .dropsearch_menu .form-group button { position:absolute; top:18px; right:15px; width:38px; height:38px; background:transparent; border:solid 1px transparent;} .header.on{ background:rgba(255,255,255,.96); box-shadow:0 2px 4px rgba(0,0,0,.2);} .header.on .tofav a{ color:#333;} .header.on .tops_left .img1{ display:none;} .header.on .tops_left .img2{ display:block;} .header.on .navbar_nav li a{ color:#333;} .header.on .navbar_nav li:hover a{ background-color:#244C92; color:#FFF;} #navToggle{ float:right; display:inline-block; margin-right:10px; padding:9px 15px; height:100%;} #navToggle span{ position:relative; margin-top:17px; width:25px; height:1px;} #navToggle span:before, #navToggle span:after{ content:''; position:relative; width:100%; height:1px; left:0;} #navToggle span, #navToggle span:before, #navToggle span:after{ display:block; -webkit-transition:.3s; -moz-transition:.3s; -o-transition:.3s; transition:.3s; background:#FFF;} .on #navToggle span, .on #navToggle span:before, .on #navToggle span:after{ background:#444;} #navToggle span:before{ top:8px;} #navToggle span:after{ bottom:10px;} #navToggle.open span:before{ top:10px; -webkit-transform:translateY(-11px) rotate(-45deg); -moz-transform:translateY(-11px) rotate(-45deg); -ms-transform:translateY(-11px) rotate(-45deg); -o-transform:translateY(-11px) rotate(-45deg); transform:translateY(-11px) rotate(-45deg);} #navToggle.open span:after{ bottom:12px; -webkit-transform:translateY(10px) rotate(45deg); -moz-transform:translateY(10px) rotate(45deg); -ms-transform:translateY(10px) rotate(45deg); -o-transform:translateY(10px) rotate(45deg); transform:translateY(10px) rotate(45deg);} #navToggle.open span{} #navToggle.open span:before, #navToggle.open span:after{ background:#FFF;} .m_nav{ position:fixed; top:0; box-shadow:0 15px 27px 0 rgba(167,165,165,.3); width:100%; height:100%; background:#fff; transition:all ease .5s; -webkit-transition:all ease .5s; z-index:1000; opacity:.98; visibility:visible; margin-top:0; overflow-y:auto; transition:all .6s cubic-bezier(.77,0,.175,1) 0ms; transform:translateX(100%);} .m_nav.open{ transform:translateX(0);} .m_nav .top{ height:60px; box-sizing:content-box;} .m_nav .top .closed{ float:right; margin:20px 20px 0 0; width:30px; height:30px; vertical-align:middle; cursor:pointer;} .m_nav .logo{ width:100%; margin:0 auto;} .m_nav .logo img{ display:block; margin:0 auto; width:50%; max-width:200px;} .m_nav .ul{ margin-top:10px;} .m_nav .ul li{ padding:0 20px; border-bottom:1px solid #f5f5f5; transform:translateY(0); -webkit-transform:translateY(100%); transform:translateY(100%); -webkit-transition:all .6s cubic-bezier(.77,0,.175,1) 0ms; transition:all .6s cubic-bezier(.77,0,.175,1) 0ms; opacity:0;} .m_nav.open .ul li{ opacity:1; -webkit-transform:translateY(0); transform:translateY(0);} .m_nav .ul li:nth-child(1){ -webkit-transition:all .2s cubic-bezier(.77,0,.175,1) 0ms; transition:all .2s cubic-bezier(.77,0,.175,1) 0ms;} .m_nav .ul li:nth-child(2){ -webkit-transition:all .4s cubic-bezier(.77,0,.175,1) 0ms; transition:all .4s cubic-bezier(.77,0,.175,1) 0ms;} .m_nav .ul li:nth-child(3){ -webkit-transition:all .6s cubic-bezier(.77,0,.175,1) 0ms; transition:all .6s cubic-bezier(.77,0,.175,1) 0ms;} .m_nav .ul li:nth-child(4){ -webkit-transition:all .8s cubic-bezier(.77,0,.175,1) 0ms; transition:all .8s cubic-bezier(.77,0,.175,1) 0ms;} .m_nav .ul li:nth-child(5){ -webkit-transition:all 1s cubic-bezier(.77,0,.175,1) 0ms; transition:all 1s cubic-bezier(.77,0,.175,1) 0ms;} .m_nav .ul li:nth-child(6){ -webkit-transition:all 1.2s cubic-bezier(.77,0,.175,1) 0ms; transition:all 1.2s cubic-bezier(.77,0,.175,1) 0ms;} .m_nav .ul li a{ display:block; text-decoration:none; color:#333; font-size:16px; height:50px; line-height:50px; width:100%;} .m_nav .ul li .dropdown_menu{ display:none;} .m_nav .ul li.dropdown.active .dropdown_menu{ display:block;} .m_nav .ul li .dropdown_menu a{ display:block; height:50px; line-height:50px; padding:0 40px; box-sizing:border-box; border-bottom:1px solid #f5f5f5;} .m_nav .ul li .dropdown_menu a:last-child{ border:none;} .banner{ width:100%;} .banner img{ width:100%;} /* mobile search */ .msearch_top{ position:relative; margin-bottom:20px; height:34px;} .nav-search-submit{ position:absolute; top:0; right:0; display:block; width:34px; height:34px; background:transparent; line-height:34px;} /* for mobile */ .mobile_nav{ display:block; position:fixed; bottom:0; right:0; left:0; width:100%; height:60px; /*border-top:solid 1px rgba(0,0,0,.3);*/ background:rgba(238,238,238,.98); box-shadow:0 -1px 3px #ccc; z-index:999;} .mobile_nav .col-md-3, .mobile_nav .col-sm-3, .mobile_nav .col-xs-3{ padding-left:12px; padding-right:12px;} .mobile_nav_blk{} .mobile_nav_ico{ height:32px; background-position:center 6px; background-repeat:no-repeat; background-size:28px 24px;} .mobile_nav_ico1{ background-image:url(../images/ico_mobile_1.png);} .mobile_nav_ico2{ background-image:url(../images/ico_mobile_2.png);} .mobile_nav_ico3{ background-image:url(../images/ico_mobile_3.png);} .mobile_nav_ico4{ background-image:url(../images/ico_mobile_4.png);} .mobile_nav_name{ font-size:13px; text-align:center;} @media (min-width:1200px){ #navToggle{ display:none;} .header .nav{ display:block;} .mobile_nav{ display:none;} }