/* NAV TOP ================================================== */ #nav_top { display: block; position: absolute; height: 40px; width: 610px; top: 0; right: 0; padding: 4px 10px 0 10px; background: #f2a24b; -webkit-border-bottom-right-radius: 12px; -webkit-border-bottom-left-radius: 12px; -moz-border-radius-bottomright: 12px; -moz-border-radius-bottomleft: 12px; border-bottom-right-radius: 12px; border-bottom-left-radius: 12px; z-index: 10; } #top_menu, #top_search, #top_social { display: inline-block; position: relative; } #top_menu {} #top_menu li { display: inline-block; position: relative; height: 24px; line-height: 24px; padding: 0 6px; margin: 0 0 0 0; } #top_menu li:after { content: ' '; display: inline-block; position: absolute; width: 1px; height: 12px; right: 0; bottom: 6px; background-color: #f2dc9e; } #top_menu li a { color: #fff; font-size: 14px; font-weight: bold; } #top_menu li a:hover { text-decoration: underline; } #top_search { margin-left: 12px; top: -1px; } #top_search input.txt { width: 155px; height: 24px; padding: 0 25px 0 10px; line-height: 24px; font-size: 14px; color: #929292; background: #fff; border: 1px solid #f7dfad; -webkit-border-radius: 12px; -moz-border-radius: 12px; border-radius: 12px; } #top_search .icn_search { position: absolute; display: block; width: 24px; height: 24px; right: 8px; top: 0; padding: 0; border: none; background-position: center -148px; cursor: pointer; } #top_social { margin-left: 10px; top: 6px;} #top_social li { display: inline-block; position: relative; padding: 0; height: 24px; width: 24px; overflow: hidden; line-height: 24px; margin-left: 2px; } #top_social .icn_social { display: inline-block; width: 24px; height: 24px; } #top_social .icn_social.facebook { background-position: center -18px; } #top_social .icn_social.wechat { background-position: center -63px; } /* NAV PRIMARY ================================================== */ #nav_primary { display: block; position: absolute; right: 0; bottom: 18px; height: 70px; width: auto; z-index: 999; } #nav_primary .pc_nav.lv01 { display: inline-block; position: relative; } #nav_primary .pc_nav.lv01 > li { display: inline-block; position: relative; padding: 0 20px; text-align: center; cursor: pointer; } #nav_primary .pc_nav.lv01 > li:after { content: ' '; position: absolute; display: block; top: 0; right: -2px; width: 4px; height: 70px; background-color: transparent; background-repeat: no-repeat; background-size: 4px 70px; background-position: center center; background-image: url('../images/line_nav_primary.png'); } #nav_primary .icn_menu { display: inline-block; position: relative; height: 20px; padding: 50px 0 0 0; font-size: 15px; text-align: center; font-weight: bolder; color: #5b554c; } #nav_primary .pc_nav.lv01 > li:hover > .icn_menu, #nav_primary .pc_nav.lv01 > li:hover > .icn_menu:hover { color: #e25504; } #nav_primary .pc_nav.lv01 > li.current > .icn_menu, #nav_primary .pc_nav.lv01 > li.current:hover > .icn_menu:hover { color: #ff9b0d; } #nav_primary .icn_menu:before { content: ' '; display: inline-block; position: absolute; width: 100%; height: 40px; top: 5px; margin: 0 auto 0 auto; background-color: transparent; background-repeat: no-repeat; background-size: 60px 660px; background-image: url('../images/icn_menu_sprite_2x.png'); } /*default*/ #nav_primary .icn_menu.icn_home:before {background-position: center -2px;} #nav_primary .icn_menu.icn_about:before {background-position: center -88px;} #nav_primary .icn_menu.icn_news:before {background-position: center -186px;} #nav_primary .icn_menu.icn_school:before {background-position: center -277px;} #nav_primary .icn_menu.icn_mb:before {background-position: center -369px;} #nav_primary .icn_menu.icn_prt:before {background-position: center -559px;} #nav_primary .icn_menu.icn_buy:before {background-position: center -467px;} /*current page*/ #nav_primary li.current .icn_menu.icn_home:before {background-position: center -43px;} #nav_primary li.current .icn_menu.icn_about:before {background-position: center -140px;} #nav_primary li.current .icn_menu.icn_news:before {background-position: center -230px;} #nav_primary li.current .icn_menu.icn_school:before {background-position: center -322px;} #nav_primary li.current .icn_menu.icn_mb:before {background-position: center -419px;} #nav_primary li.current .icn_menu.icn_prt:before {background-position: center -604px;} #nav_primary li.current .icn_menu.icn_buy:before {background-position: center -514px;} /* level 02 */ #nav_primary .pc_nav .lv02 { display: none; position: absolute; background: #fff; border: 1px solid #cbc9c5; padding: 8px 15px 8px 15px; width: 175px; left: -60px; text-align: left; top: 82px; -webkit-border-radius: 6px; -moz-border-radius: 6px; border-radius: 6px; } #nav_primary .pc_nav .lv02:before { content: ' '; display: block; position: absolute; top: -12px; width: 20px; height: 20px; background-repeat: no-repeat; background-color: transparent; background-size: 60px 1275px; background-image: url('../images/icn_sprite_2x.png'); background-position: center -235px; left: 95px; } #nav_primary .pc_nav .lv02 li { display: block; position: relative; text-align: left; line-height: 32px; border-bottom: 1px dashed #c3c1be; font-size: 14px; padding-left: 20px; } #nav_primary .pc_nav .lv02 li:last-child { border-bottom: none; } #nav_primary .pc_nav .lv02 li:before { content: ' '; display: inline-block; position: absolute; left: 2px; top: 10px; width: 14px; height: 14px; background-repeat: no-repeat; background-color: transparent; background-size: 60px 1275px; background-image: url('../images/icn_sprite_2x.png'); background-position: center -600px; } .ie #nav_primary .pc_nav .lv02 li:before { background-image: url('../images/icn_sprite.png'); } #nav_primary .pc_nav .lv02 li:hover { background-color: #f2f2f2; } #nav_primary .pc_nav .lv02 li:hover:before, #nav_primary .pc_nav .lv02 li.current:before { background-position: center -565px; } #nav_primary .pc_nav .lv02 li.current a { color: #e25504; } /* level 02 moblie */ /* NAV PRIMARY - MOB MENU ================================================== */ #mob_menu_btn { position: absolute; display: none; width: 90px; height: 24px; top: 110px; left: 3%; cursor: pointer; z-index: 999; } .mmAction #mob_menu_btn {display: none;} #nav_wrapper.container { display: block; height: 160px; margin: -245px auto 30px auto; width: 740px; left: 220px; z-index: 9999; } .mob_menu_logo { display: none; position: fixed; left:12px; top: 18px; width: 50px; height: 50px; } /* PAGE NAV ================================================== */ .page_nav { position: relative; margin: 30px auto 30px auto; } .pages { display: block; position: relative; right: 2px; margin-bottom: 6px; clear: both; height: 30px; line-height: 30px; text-align: center } .pages li { display: inline; background: #fff; padding: 2px 6px; margin: 0 2px; font-size: 12px; color: #acacac; cursor: pointer; border: 1px solid #acacac; } .pages li:hover { color: #e25504 !important; text-decoration: underline; } .pages li.pgCurrent { color: #e25504 !important; border-color: #e25504; } .pages li.pgEmpty { color: #D1D1D1 !important; } /* FOOTER NAV ================================================== */ .footer_wrapper .nav_footer ul { display: block; position: relative; }