/* i4.cn CSS Reset ################################################################################################ */
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset,
form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer,
header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { border:0; font-size:100%; vertical-align:baseline; margin:0; padding:0; }
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display:block }
ol, ul { list-style:none }
blockquote, q { quotes:none }
blockquote:before, blockquote:after, q:before, q:after { content:none }
table { border-collapse:collapse; border-spacing:0 }
input, textarea, select{ margin:0; padding:0; font-size:100%; font:inherit; resize:none; outline:none }
body { background:#fff; color:#333; font:12px/1.75 'Microsoft Yahei','Helvetica Neue', Arial, sans-serif }
body#index #nav_index,body#res #nav_res,body#pros #nav_pros,body#article #nav_article, #tutorial #nav_tutorial, #sn #nav_sn, #ipsw #nav_ipsw { background:url(../img/main_nav_select.png); color:#fff; font-weight:bold }
a, a:hover { text-decoration:none; color:#333 }
a:hover { color:#165ccd }
html { overflow-y:scroll; _background-image:url(about:blank); _background-attachment:fixed }

a { outline: none; }
a:active {star:expression_r(this.onFocus=this.blur());} 
a:focus { -moz-outline-style: none; } /*閽堝firefox*/

/* General ################################################################################################ */
/* top nav ========================================= */
.topnav_bg { width:100%; background:#fff; overflow:hidden }
.topnav { margin:0 auto; width:1200px; height:40px; line-height:40px }
.topnav_lnk { display:block; float:left; padding:0 10px; color:#666 }
.topnav_btn { display:block; float:right; margin-left:10px; padding-left:15px; width:75px; height:40px; background:url(../img/top_nav_sitemap_arrow.png) 67px -16px no-repeat; border-left:1px solid #eee; border-right:1px solid #eee; z-index:99; transition:0.4s }
.topnav_btn:hover, 
.topnav_btn.on { background:url(../img/top_nav_sitemap_arrow.png) 67px 18px no-repeat #f4f4f4; transition:0.4s }
.topnav span { display:block; float:left; margin:15px 10px 0; width:1px; height:12px; background:#eee }
.topnav_sitemap { position:absolute; top:40px; left:0; width:100%; height:300px; border-top:1px solid #ddd; background:url(../img/bg_bai_95.png); border-bottom:1px solid #ddd; z-index:98 }
.topnav_sitemap_box { margin:20px auto; width:1198px; height:260px; border-right:1px solid #eee; border-left:1px solid #eee }
.topnav_sitemap dl  { display:block; float:left; padding:0 10px; width:150px; height:260px; border-right:1px solid #eee }
.topnav_sitemap dt a { display:block; padding-left:10px; font-weight:bold }
.topnav_sitemap dd a { display:block; display:block; padding-left:10px; height:28px; line-height:28px; color:#666; transition:0.2s }
.topnav_sitemap dd a:hover { background:#007aff; color:#fff; transition:0.2s }
@media screen and (max-width:1200px) {
.topnav { width:900px }
.topnav_sitemap_box { width:898px }
.topnav_sitemap dl  { width:107px }
}
/* main nav ========================================= */
.main_nav_bg { width:100%; height:100px; background:#1864e0 }
.main_nav { margin:0 auto; width:1200px; height:100px }
.main_nav_logo { float:left; width:230px; height:100px }
.main_nav_list { display:block; float:left; margin-top:32px; width:740px; height:36px; overflow:hidden }
.main_nav_list a { display:block; float:left; padding:0 20px; height:36px; line-height:36px; background:url(../img/main_nav_default.png); color:#dee6f9; text-align:center }
.main_nav_list a:hover { background:url(../img/main_nav_hover.png); color:#dee6f9 } 
.main_nav_list a.on { background:url(../img/main_nav_select.png); color:#fff; font-weight:bold }
.main_nav_search { display:block; float:right; margin-top:32px; width:230px; height:36px; background:url(../img/main_nav_search_bg.png) left top }
.main_nav_search:hover { background:url(../img/main_nav_search_bg.png) left -36px; cursor:text }
@media screen and (max-width:1200px) {
.main_nav { width:900px }
.main_nav_list { width:577px }
.main_nav_list a { padding:0 13px }
.main_nav_search { width:93px; background:url(../img/main_nav_search_bg.png) left -72px }
.main_nav_search:hover { background:url(../img/main_nav_search_bg.png) left -108px; cursor:text }
}
/* main nav - Search */
.search { background:#fff; display:none; }
.search_top { padding-top:60px; height:80px; background:#236ee7 }
.search_popup .close { position:absolute; top:0; right:10px; width:46px; height:26px; background:url(../img/search_btn_close.png) no-repeat; cursor:pointer }
.search_popup .close:hover { background:url(../img/search_btn_close.png) no-repeat bottom }
.search_top_box { margin:0 auto; width:640px; height:40px; background:#fff }
.search_select { position:relative; float:left; width:106px; border-right:1px solid #eee }
.search_select_tit a { display:block; padding-left:15px; width:91px; height:40px; line-height:40px; background:url(../img/top_nav_sitemap_arrow.png) 80px -16px no-repeat; transition:0.4s }
.search_select_tit a.on { background:url(../img/top_nav_sitemap_arrow.png) 80px 18px no-repeat; transition:0.4s }
.search_select_list { position:absolute; left:0; top:40px; width:104px; background:#fff; border:1px solid #eee; overflow:hidden; box-shadow:3px 3px 3px #666; display:none }
.search_select_list a { display:block; padding-left:15px; width:91px; height:40px; line-height:40px; transition:0.2s }
.search_select_list a:hover { background:#f4f4f4; transition:0.2s }
.search_input { float:left }
.search_input input { margin-top:10px; padding-left:20px; width:464px; height:20px; line-height:20px; border:0 }
.search_button { float:left }
.search_button a { display:block; width:49px; height:40px; background:url(../img/search_btn.png) 15px 11px no-repeat; transition:0.2s }
.search_button a:hover { background-color:#eee; transition:0.2s }
.search_button a span { display:none }
.search_keyword { margin:30px auto 0; width:650px; height:220px }
.search_keyword a { display:block; float:left; margin:0 5px 10px 5px; padding:0 20px; height:34px; line-height:34px; text-align:center; border:1px solid #e6e6e6; color:#666; transition:0.2s }
.search_keyword a:hover { background:#fff; border:1px solid #fff; transition:0.2s; box-shadow:1px 1px 10px #bbb }
/* search content */
.search_content_caption { padding-top:40px; height:70px; text-align:center }
.search_content_caption h1 { font-size:20px; font-weight:lighter }
.search_content_caption span { color:#236ee7; font-weight:normal }

/* Area ========================================= */
.area_gird { margin:0 auto; width:1200px; overflow:hidden; clear:both }
.area_gird .caption { margin-top:18px; height:46px }
.area_gird .caption h1 { display:block; float:left; padding:0 20px 0 17px; background:url(../img/caption_icon.png) no-repeat 0 17px; font-size:18px; font-weight:normal; line-height:46px }
.area_gird .caption .switch { float:right; margin-top:11px; text-align:center }
.area_gird .caption .switch a { display:block; float:left; padding:0 10px; height:24px; line-height:24px; border:1px solid #ddd; background:#fafafa; _display:inline }
.area_gird .caption .switch a.switch_l { border-top-left-radius:3px; border-bottom-left-radius:3px; border-right:0 }
.area_gird .caption .switch a.switch_r { border-top-right-radius:3px; border-bottom-right-radius:3px; border-left:0 }
.area_gird .caption .switch a.switch_on { border:1px solid #39b54a; background:#39b54a; color:#fff }
@media screen and (max-width:1200px) {
.area_gird { width:900px }
}
/* List hover ========================================= */
.news_img_list,    /* home news img */
.news_txt_list,    /* home news txt */
.apps_apps_list,   /* home apps list */
.apps_spec_list,   /* home spec list */
.down_list,        /* home down list */
.store_apps_list,  /* store app list */
.store_ring_list,  /* store ring list */
.store_wper_list,  /* store wallpaper list */
.article_list,     /* article list */
.i4news_list       /* i4news list */
{ transition:0.2s }
.news_img_list:hover,
.news_txt_list:hover,
.apps_apps_list:hover,
.apps_spec_list:hover,
.down_list:hover,
.store_apps_list:hover,
.store_ring_list:hover,
.store_wper_list:hover,
.article_list:hover,
.i4news_list:hover
{ transition:0.2s; background:#fff; box-shadow:inset 0 0 10px #e6e6e6 }
/* footer ===================================================================== */
.footer_bg { clear:both; margin-top:30px; width:100%; height:200px; border-top:1px solid #ddd; background:#fff; text-align:center }
.footer { margin:0 auto; width:1200px }
.footer div { margin:20px 0 10px }
.footer div a { margin:0 10px; line-height:40px; color:#454545 }
.footer div a:hover { color:#999}
.footer ul { display:block; color:#999 }
@media screen and (max-width:1200px) {
.footer  { width:900px }
}
/* sub nav ===================================================================== */
.sub_nav { clear:both; margin:20px auto; width:1200px; height:96px }
.sub_nav li { display:block; float:left; position:relative; z-index:90 }
.sub_nav_list { display:block; width:299px; height:96px; border:1px solid #ddd; border-right:none; background-repeat:no-repeat; background-color:#fff; background-position:center 18px; text-align:center; transition:0.2s }
.sub_nav_list:hover { border-color:#2a90ff; color:#fff; font-weight:bold; background-repeat:no-repeat; background-color:#2a90ff; background-position:center 18px; transition:0.2s }
.sub_nav_list span { display:block; margin-top:58px }
/* sub nav - tutorial  */
.sub_nav_tips  { background-image:url(../img/tutorial_menu_bg_tips_1.png) } .sub_nav_tips:hover,  .tips_on  { background-image:url(../img/tutorial_menu_bg_tips_2.png) }
.sub_nav_brush { background-image:url(../img/tutorial_menu_bg_brush_1.png)} .sub_nav_brush:hover, .brush_on { background-image:url(../img/tutorial_menu_bg_brush_2.png)}
.sub_nav_break { background-image:url(../img/tutorial_menu_bg_break_1.png)} .sub_nav_break:hover, .break_on { background-image:url(../img/tutorial_menu_bg_break_2.png)}
.sub_nav_i4cn  { background-image:url(../img/tutorial_menu_bg_i4_1.png)}    .sub_nav_i4cn:hover,  .i4cn_on  { background-image:url(../img/tutorial_menu_bg_i4_2.png) }
.sub_nav_tips { width:298px; border:1px solid #ddd }
.tips_on, .brush_on, .break_on, .i4cn_on { border-color:#007aff; color:#fff; font-weight:bold; background-color:#007aff }
/* sub nav - store  */
.sub_nav_home { background-image:url(../img/store_menu_bg_home_1.png) } .sub_nav_home:hover, .home_on { background-image:url(../img/store_menu_bg_home_2.png) }
.sub_nav_apps { background-image:url(../img/store_menu_bg_apps_1.png) } .sub_nav_apps:hover, .apps_on { background-image:url(../img/store_menu_bg_apps_2.png) }
.sub_nav_game { background-image:url(../img/store_menu_bg_game_1.png) } .sub_nav_game:hover, .game_on { background-image:url(../img/store_menu_bg_game_2.png) }
.sub_nav_wper { background-image:url(../img/store_menu_bg_wper_1.png) } .sub_nav_wper:hover, .wper_on { background-image:url(../img/store_menu_bg_wper_2.png) }
.sub_nav_ring { background-image:url(../img/store_menu_bg_ring_1.png) } .sub_nav_ring:hover, .ring_on { background-image:url(../img/store_menu_bg_ring_2.png) }
.sub_nav_home, .sub_nav_apps, .sub_nav_game, .sub_nav_ring { width:239px }
.sub_nav_wper { width:238px; border:1px solid #ddd }
.home_on, .apps_on, .game_on, .wper_on, .ring_on { border-color:#007aff; color:#fff; font-weight:bold; background-color:#007aff }
/* sub nav - store sub nav */ 
.sub_nav_store { position:absolute; left:0; top:98px; width:241px; height:130px; display:none }
.sub_nav_store a { display:block; width:239px; height:64px; border:1px solid #ddd; border-top:0; line-height:64px; background:#fff; text-align:center; transition:0.2s }
.sub_nav_store a:hover { background:#f4f4f4; transition:0.2s }
/* sub nav - news */
.sub_nav_napple{ background-image:url(../img/tutorial_menu_bg_brush_1.png)} .sub_nav_napple:hover, .napple_on{ background-image:url(../img/tutorial_menu_bg_brush_2.png) }
.sub_nav_ni4cn { background-image:url(../img/tutorial_menu_bg_i4_1.png)}    .sub_nav_ni4cn:hover,  .ni4cn_on { background-image:url(../img/tutorial_menu_bg_i4_2.png) }
.sub_nav_napple{ width:599px }
.sub_nav_ni4cn { width:598px; border:1px solid #ddd }
.napple_on, .ni4cn_on { border-color:#007aff; color:#fff; font-weight:bold; background-color:#007aff }
@media screen and (max-width:1200px){
.sub_nav { width:900px }
.sub_nav_list  { width:224px }
.sub_nav_i4cn  { width:223px }
.sub_nav_home, .sub_nav_apps, .sub_nav_game, .sub_nav_wper { width:179px }
.sub_nav_ring  { width:178px }
.sub_nav_napple{ width:449px }
.sub_nav_ni4cn { width:448px }
}
/* start down ===================================================================== */
.start_down { display:none; width:520px; height:300px; background:#fff; }
.start_down_close { display:block; position:absolute; top:0; right:10px; width:46px; height:22px; background:#2b90ff url(../img/start_down_close.png) center center no-repeat }
.start_down_close:hover { background:#0067d8 url(../img/start_down_close.png) center center no-repeat }
.start_down_head { width:520px; height:72px; line-height:72px; background:#007aff; font-size:20px; text-align:center; color:#fff }
.start_down_body { margin-top:32px; text-align:center }
.start_down_body dt { line-height:30px; font-size:18px; color:#444 }
.start_down_body dd { display:block; margin:0 auto; width:304px; padding-top:20px; color:#999; overflow:hidden }
.start_down_body dd a { display:block; float:left; width:18px; height:18px; line-height:18px; background:url(../img/start_down_select.png) }
.start_down_body dd a:hover { background:url(../img/start_down_select.png) left -18px }
.start_down_body dd a.startdown_on { background:url(../img/start_down_select.png) left 18px }
.start_down_body dd p { display:block; float:left; margin-left:10px; line-height:20px }
.start_down_abtn { margin:20px auto 0; width:260px }
.start_down_abtn a { display:block; float:left; margin:0 5px; border-radius:3px; text-align:center; font-size:16px; _display:inline }
.start_down_abtn_left { width:78px; height:38px; line-height:38px; border:1px solid #ddd }
.start_down_abtn_left:hover { background:#f8f8f8 }
.start_down_abtn_right { width:160px; height:40px; line-height:40px; background:#39b54a; color:#fff }
.start_down_abtn_right:hover { background:#219832; color:#fff }

/* Crumbs ===================================================================== */
.content_crumbs  { margin-top:20px; line-height:40px; font-size:14px }
.content_crumbs span { margin:0 10px; color:#bbb }
/* Pager ===================================================================== */
.pager_box { border-top:1px solid #ddd; height:60px; background:#fff }
.pager { padding-top:20px; text-align:center }
.pager a, .pager span { display:inline-block; margin:0 1px; padding:0 20px; height:32px; text-align:center; line-height:32px; border:1px solid #e9e9e9; transition:0.2s }
.pager a:hover { border:1px solid #e9e9e9; background:#f4f4f4; color:#333; transition:0.2s }
.pager span { border:1px solid #eee; color:#ccc }
.pager span.on { border:1px solid #007aff; background:#007aff; color:#fff; font-weight:bold }

/* home ################################################################################################ */
/* scroll img ========================================= */
.scroll { position:relative; height:520px; overflow:hidden }
.scroll_img { position:absolute; left:0; top:0; height:520px; width:100%; }
.scroll_img_list { width:100%; height:520px }
.scroll_img_iOS { background:#236ee7 url(../img/scroll_img_iOS.png?v=001) center bottom no-repeat;}
.scroll_img_iOS div { display:block; margin:0 auto; width:900px; height:520px; position:relative }
.scroll_img_iOS div a { display:block; position:absolute; left:260px; bottom:127px; width:300px; height:60px; line-height:60px; text-align:center; font-size:13px; color:#fff; background:#4f8bec}
.scroll_img_iOS div a:hover { color:#fff; background:#3d7ce1}
.scroll_img_iOS dl { display:block; margin:0 auto; width:900px; height:520px; position:relative }
.scroll_img_iOS dt { display:block; position:absolute; left:260px; bottom:127px; width:300px; height:60px; line-height:60px; text-align:center; font-size:13px; color:#fff}
.scroll_img_iOS dt span { margin:0 10px }
.scroll_img_iOS dd { display:block; position:absolute; left:262px; bottom:90px; width:300px; height:40px; line-height:40px; text-align:center; color:#b7dbff}
.scroll_img_PC { background:#007aff url(../img/scroll_PC2_v7.png?v=003) center bottom no-repeat }
.scroll_img_PC_down { margin:0 auto; width:900px; height:520px; position:relative }
.scroll_img_PC_down a { display:block; position:absolute; left:40px; bottom:83px; width:200px; height:48px; text-align:center; line-height:48px; background:#3395ff; color:#FFF; font-size:16px; transition:all 0.2s; }
.scroll_img_PC_down a:hover { color:#FFF; background:#80bdff; }
.scroll_img_PC_down .scroll_img_PC_version { position:absolute; left:262px; bottom:99px; line-height:18px; color:#FFF; font-size:12px; }
.scroll_img_PC_down_l { font-size:16px; font-weight:bold; margin-right:14px }
.scroll_img_PC_down_r { color:#999 }
.scroll .area_gird { position:absolute; top:0; left:50%; margin-left:-600px; margin-top:519px; height:1px; overflow:visible; }
.scroll .area_gird .btns { position:absolute; bottom:30px; z-index:3; overflow:hidden; text-align:center; width:100%; }
.scroll .area_gird .btns a { display:inline-block; margin:0 5px; width:10px; height:10px; overflow:hidden; border-radius:10px; background: url(../img/scroll_btn.png); background-position:left top; background-repeat:no-repeat; line-height:9999px; }
.scroll .area_gird .btns a:hover { background-position:left -10px; }
.scroll .area_gird .btns a.on    { background-position:left -20px; }
.scroll .area_gird .scroll_prev, .scroll_next { display:block; width:40px; height:40px; position:absolute; z-index:3; bottom:210px; }
.scroll .area_gird .scroll_prev { left:0; background:url(../img/btn-lr.png) left top }
.scroll .area_gird .scroll_prev:hover { background:url(../img/btn-lr.png) left bottom }
.scroll .area_gird .scroll_next { right:0; background:url(../img/btn-lr.png) right top }
.scroll .area_gird .scroll_next:hover { background:url(../img/btn-lr.png) right bottom }

@media screen and (max-width:1200px) {
.scroll_img_list { width:900px }
.scroll .area_gird { margin-left:-450px; }
}
/* news ========================================= */
.news { height:448px; background:#ddd; overflow:hidden }
.news_img,
.news_txt { float:left; width:600px; height:448px }
.news_img_list { margin:1px 0 0 1px; padding:20px 20px 0 20px; float:left; width:259px; height:426px; background:#fff; overflow:hidden; _display:inline }
.news_img_list img { width:260px; height:260px }
.news_img_list h1  { margin-top:10px; line-height:30px; font-size:14px; font-weight:normal }
.news_img_list p   { color:#bbbbbb }
.news_img_list h2  { margin-top:8px; line-height:20px; font-size:12px; color:#666; font-weight:normal }
.news_txt_list { margin:1px 0 0 1px; padding:20px 20px 0 20px; float:left; width:558px; height:128px; background:#fff; _display:inline }
.news_txt_list_img { float:left; width:164px; height:108px }
.news_txt_list_img img { width:144px; height:108px }
.news_txt_list_txt { float:left; width:394px; height:108px }
.news_txt_list_txt h1 { line-height:30px; font-size:16px; font-weight:normal; height:30px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.news_txt_list_txt p  { color:#bbbbbb }
.news_txt_list_txt h2 { margin-top:8px; line-height:20px; font-size:12px; color:#666; font-weight:normal; height:40px; overflow:hidden; }
@media screen and (max-width:1200px) {
.news_img { width:300px; overflow:hidden }
}
/* apps ========================================= */
.apps { background:#ddd; height:573px }
.apps_left { float:left; width:900px; height:573px }
/* Apps - apps list */
.apps_apps { margin:1px 0; width:900px; height:314px; overflow:hidden; _position:relative }
.apps_apps .apps_apps_x2 { width:900px; height:630px }
.apps_apps .apps_apps_list { float:left; margin:0 0 1px 1px; padding:20px 0 0 20px; width:279px; height:84px; background:#fff; _display:inline }
.apps_apps .apps_apps_list_icon { float:left; position:relative; width:78px; height:64px }
.apps_apps .apps_apps_list_icon img { position:absolute; top:0; left:0 }
.apps_apps .apps_apps_list_text { float:left }
.apps_apps .apps_apps_list_text h3 { margin-bottom:2px; line-height:22px; font-weight:normal }
.apps_apps .apps_apps_list_text p  { color:#999 } .apps_apps_list_text p span { margin:0 8px }
.apps_apps .apps_apps_list_text_ad { width:180px; overflow:hidden; white-space:nowrap; text-overflow:ellipsis }
.apps_apps .apps_apps_list_text a.btn  { display:none; float:left; margin:8px 6px 0 0; padding:0 15px; height:22px; line-height:22px; border:1px solid #efefef; text-align:center; color:#777; border-radius:3px; transition:0.2s }
.apps_apps .apps_apps_list_text a.btn:hover  { border:1px solid #007aff; color:#fff; background:#007aff; transition:0.2s }
/* Apps - spec list */
.apps_spec { width:900px; height:256px; overflow:hidden; _position:relative }
.apps_spec .apps_spec_x2 { width:900px; height:514px }
.apps_spec .apps_spec_box { width:900px }
.apps_spec .apps_spec_list { margin:0 0 0 1px; padding:20px 20px 0 20px; float:left; width:259px; height:236px; background:#fff; overflow:hidden; _display:inline }
.apps_spec .apps_spec_list p  { color:#999; line-height:40px }
.apps_spec .apps_spec_list h4 { font-size:13px; line-height:16px; font-weight:normal }
.apps_spec .apps_spec_list h4 a { color:#666 } .apps_spec_list h4 a:hover { color:#333 }
/* Apps - bang list */
.apps_bang { float:right; margin:1px; width:298px; height:571px; background:#fff; overflow:hidden; _position:relative }
.apps_bang_x2 { width:596px; height:571px; }
.apps_bang_tab { width:259px; height:32px; background:#bbb }
.apps_bang_tab a { display:block; margin:1px 0 0 1px; float:left; width:85px; height:30px; line-height:30px; background:#f8f8f8; color:#999; text-align:center; _display:inline }
.apps_bang_tab a:hover,
 a.apps_bang_tab_on { background:#fff; color:#333 }
.apps_bang_box { float:left; width:278px; padding:20px 0 0 20px; overflow:hidden; _position:relative }
.apps_bang_box_x3 { width:894px; height:500px; }
.apps_bang_list { display:block; float:left; width:280px; padding-top:20px; background:#fff }
.apps_bang_list_li { display:block; _float:left; padding:4px 0 4px; width:260px; height:34px; line-height:34px; border-bottom:1px solid #fff; overflow:hidden }
.apps_bang_list_li span { display:block; float:left }
.apps_bang_list_li span.num { margin:5px 12px 0 0; width:24px; height:24px; line-height:24px; overflow:hidden; text-align:center; font-size:12px; background:#eee; color:#555; border-radius:12px }
.apps_bang_list_li span.num01 { background:#ff3c13; color:#fff }
.apps_bang_list_li span.num02 { background:#eb6100; color:#fff }
.apps_bang_list_li span.num03 { background:#f39800; color:#fff }
.apps_bang_list_li_ul { clear:both; position:relative; padding-left:35px; width:225px; height:60px; display:none }
.apps_bang_list_li_ul li { position:absolute; display:block }
.apps_bang_list_li_ul li img { position:absolute; top:0; left:0; width:48px; height:48px }
.apps_bang_list_li_ul li.txt { top:0; left:95px; width:160px; height:24px; line-height:24px; color:#999; overflow: hidden; white-space: nowrap; }
.apps_bang_list_li_ul li.btn { top:25px; left:95px; width:160px }
.apps_bang_list_li_ul li.btn a { display:block; float:left; margin-right:6px; padding:0 15px; height:22px; border:1px solid #efefef; color:#666; border-radius:3px; line-height:22px; text-align:center }
.apps_bang_list_li_ul li.btn a:hover  { border:1px solid #007aff; color:#fff; background:#007aff; transition:0.2s }
.apps_bang_list_li:hover,
.apps_bang_list_li_on   { height:92px; padding-bottom:0 }
.apps_bang_list_li:hover .apps_bang_list_li_ul,
.apps_bang_list_li_on .apps_bang_list_li_ul { display:block; background:#fff; transition:0.3s }
@media screen and (max-width:1200px) {
.apps_left,
.apps_apps,
.apps_spec,
.apps_apps_x2 { width:600px }
.apps_list,
.spec_list { width:600px; overflow:hidden }
}
/* download ========================================= */
.down { height:379px; background:#ddd; overflow:hidden }
.down_list { display:block; margin:1px 0 0 1px; padding-top:41px; float:left; width:299px; height:147px; background:#fff; text-align:center; _display:inline }
.down_list p { color:#333; margin-bottom:4px; line-height:32px }
.down_list_4 { width:298px }
@media screen and (max-width:1200px) {
.down_list_3 { width:298px }
.down_list_4 { width:299px }
}
/* link ========================================= */
.link { width:1210px; overflow:hidden }
.link .caption { margin:18px 5px 0 5px }
.link_list a { display:block; float:left; margin:0 5px 10px 5px; padding:0 20px; height:32px; line-height:32px; border:1px solid #e3e3e3; color:#888; text-align:center; transition:0.2s; _display:inline }
.link_list a:hover { border:1px solid #fff; _border:1px solid #ccc; background:#fff; color:#000; box-shadow:1px 1px 10px #bbb; transition:0.2s }
@media screen and (max-width:1200px) {
.link { width:910px }
}

/* tutorial and news ################################################################################################ */
/* article main ========================================= */
.article_box { float:left; width:880px; background:#ddd }
.article_list { margin:1px 1px 0 1px; height:156px; background:#fff }
.article_list_img { float:left; width:188px }
.article_list_img img { margin:24px 0 0 20px; width:144px; height:108px }
.article_list_txt { float:left; width:668px }
.article_list_txt h1 { display:block; margin-top:20px; height:30px; font-size:16px; font-weight:normal } 
.article_list_txt h2 { display:block; margin-top:4px;height:56px; font-size:12px; font-weight:normal; color:#888} 
.article_list_txt p  { color:#bbb } 
.i4news_list { margin:1px 1px 0 1px; padding:30px 40px; background:#fff }
.i4news_list h1 { font-size:24px; padding-top:10px; line-height:30px; font-weight:normal }
.i4news_list span { font-size:12px; color:#999; line-height:50px; clear:both }
.i4news_list img  { margin-bottom:15px; width:798px; height:240px }
.i4news_list p { line-height:24px; padding-bottom:15px; color:#666; font-size:14px }

/* article side ========================================= */
.article_side{ float:left; margin-left:20px; width:300px }
.article_side_recd .caption { margin:0 }
.article_side_recd ul { border:1px solid #ddd; border-bottom:0 }
.article_side_recd ul li { display:block }
.article_side_recd ul li a { padding-left:15px; display:block; height:40px; line-height:40px; border-bottom:1px solid #ddd }
.article_side_recd ul li a:hover { background:#f4f4f4; transition:0.2s }

.article_side_topic { width:300px; overflow:hidden }
.article_side_topic .caption { margin-top:18px; height:46px }
.article_side_topic .caption h1 { display:block; float:left; padding:0 20px 0 17px; background:url(../img/caption_icon.png) no-repeat 0 17px; font-size:18px; font-weight:normal; line-height:46px }
.article_side_topic .content { display:block; width:310px }
.article_side_topic .content li { display:block; float:left; margin:0 10px 10px 0; width:145px }
.article_side_topic .content li a { display:block; padding-left:15px; width:128px; height:34px; line-height:34px; border:1px solid #ddd; transition:0.2s }
.article_side_topic .content li a:hover { background:#f4f4f4; transition:0.2s }
@media screen and (max-width:1200px) {
.article_box { width:900px }
.article_side{ display:none }
}
/* article content ========================================= */
.article_content { float:left; padding:0 40px; width:798px; border:1px solid #ddd }
.article_content_caption { margin:40px 0 20px; text-align:center }
.article_content_caption h1 { font-size:26px; font-weight:normal }
.article_content_caption p  { line-height:32px }
.article_content_caption p span { text-align:center;  margin:0 8px; color:#999 }
.article_content_share { padding-top:20px; height:60px }
.article_content_share span, .article_content_share a { display:block; float:left }
.article_content_share span { padding-top:4px; font-size:14px; color:#666 }
.article_content_similar { padding-bottom:30px; overflow:hidden }
.article_content_similar p { margin-bottom:10px; border-bottom:1px solid #ddd; font-size:16px; font-weight:bold; line-height:40px }
.article_content_similar a { display:block; font-size:13px; float:left; width:390px; height:32px; line-height:32px }
/* tutorial select ========================================= */
.tutorial_select{ margin-top:20px; border:1px solid #ddd; height:458px; overflow:inherit }
.tutorial_select_head { margin-top:100px; text-align:center }
.tutorial_select_head dt { font-size:26px; font-weight:lighter }
.tutorial_select_head dd { font-size:14px; font-weight:lighter; color:#888; line-height:30px }
.tutorial_select_body { position:relative; margin:20px auto 0; width:340px }
.tutorial_select_body_bottun { float:left; margin:0 10px; width:150px; height:64px; _display:inline }
.tutorial_select_body_bottun div a { display:block; padding:0 24px; width:100px; height:40px; line-height:40px; border:1px solid #ddd; text-align:left; background:url(../img/top_nav_sitemap_arrow.png) 120px -16px no-repeat; transition:0.4s; color:#ff502b }
.tutorial_select_body_bottun div a:hover { background-color:#f8f8f8; transition:0.4s }
.tutorial_select_body_bottun div a.on { background:#f4f4f4 url(../img/top_nav_sitemap_arrow.png) 120px 18px no-repeat; transition:0.4s }
.tutorial_select_body_bottun ul { position:absolute; top:41px; left:-280px; padding:20px 19px; width:860px; border:1px solid #ddd; background:#fff; display:none }
.tutorial_select_body_bottun li { display:block; overflow:hidden; font-size:12px }
.tutorial_select_body_bottun li span { display:block; text-align:left; line-height:22px; margin:10px 0 0 4px; font-weight:bold; clear:both }
.tutorial_select_body_bottun li a { display:block; float:left; margin:4px 0 0 4px; padding-left:10px; width:91px; height:36px; border:1px solid #e3e3e3; background:#fff; color:#666; line-height:36px; _display:inline }
.tutorial_select_body_bottun li a:hover { border:1px solid #007aff; background:#51a4ff; color:#fff; transition:0.2s }
.tutorial_select_body_bottun li a.tutorial_select_on { border:1px solid #007aff; background:#007aff; color:#fff; transition:0.2s }
/* tutorial select for brush */
.tutorial_select_body_brush { width:170px }
.tutorial_select_body_brush ul { left:-365px }
/* tutorial select button */
.tutorial_select_btn { padding-top:40px; clear:both }
.tutorial_select_btn a { display:block; margin:0 auto; width:320px; height:42px; background:#ff502b; text-align:center; font-size:16px; line-height:42px; color:#fff; transition:0.2s }
.tutorial_select_btn a:hover { background:#e33915; color:#fff; transition:0.2s }
.tutorial_select_btn a.tutorial_select_btn_on { background:#ccc; color:#fff; transition:0.2s }
/* tutorial expand ========================================= */
.tutorial_expand_list { border:1px solid #ddd; overflow:hidden; display:inline-block; padding:30px; }
.tutorial_expand_list li { display:block; float:left; padding-left:20px; width:340px; height:32px; line-height:32px; overflow:hidden; _display:inline }
@media screen and (max-width:1200px) {
.tutorial_expand_list li { width:360px }
}

/* Store ################################################################################################ */
/* store filter ========================================= */
.store_device_switch { margin:20px auto; width:200px; height:28px; text-align:center }
.store_device_switch a { display:block; float:left; width:98px; height:26px; line-height:26px; border:1px solid #ddd; background:#fafafa; _display:inline }
.store_device_switch a.store_device_switch_l { border-top-left-radius:3px; border-bottom-left-radius:3px; border-right:0 }
.store_device_switch a.store_device_switch_r { border-top-right-radius:3px; border-bottom-right-radius:3px; border-left:0 }
.store_device_switch a.switch_on { border:1px solid #39b54a; background:#39b54a; color:#fff }
/* App category */
.store_filter { margin:20px auto 0; width:1199px; height:38px; border:1px solid #ddd; border-bottom:0; background:#fafafa }
.store_filter_category { position:relative; float:left; width:239px; height:38px; border-right:1px solid #ddd; background:#fff; z-index:9 }
.store_filter_category_tit a { display:block; margin-right:20px; padding-left:20px; height:38px; line-height:38px; background:url(../img/top_nav_sitemap_arrow.png) right -17px no-repeat; transition:0.4s }
.store_filter_category_tit a.on { background:url(../img/top_nav_sitemap_arrow.png) right 17px no-repeat; transition:0.4s }
.store_filter_category_tit span { color:#007aff; font-weight:bold }
.store_filter_category_lit { display:none; position:absolute; left:0; top:39px; padding:10px 0 0 10px; width:469px; padding-bottom:20px; border-bottom:1px solid #ddd; border-right:1px solid #ddd; z-index:2; background:#fff; overflow:hidden }
.store_filter_category_lit a { display:block; float:left; margin:10px 10px 5px; width:93px; height:38px; border:1px solid #eee; text-align:center; line-height:38px; transition:0.2s; _display:inline }
.store_filter_category_lit a:hover { border:1px solid #007aff; background:#51a4ff; color:#fff }
.store_filter_category_lit a.store_filter_category_lit_on { border:1px solid #007aff; background:#007aff; color:#fff }
/* App sequence  */
.store_filter_sequence { float:right }
.store_filter_sequence a { display:block; float:left; width:99px; height:38px; line-height:38px; border-left:1px solid #ddd; text-align:center }
.store_filter_sequence a:hover,
.store_filter_sequence a.on{ background:#fff; color:#007aff; font-weight:bold }
@media screen and (max-width:1200px) {
.store_filter { width:899px }
.store_filter_category { width:224px }
.store_filter_sequence a { width:70px }
}
/* app list ========================================= */
.store_apps { border-left:1px solid #ddd; border-top:1px solid #ddd; width:1200px; overflow:hidden }
.store_apps_list { position:relative; float:left; border-right:1px solid #ddd; border-bottom:1px solid #ddd; width:399px; height:104px; background:#fff; _display:inline; overflow:hidden }
.store_apps_list_img { display:block; position:absolute; top:20px; left:20px; width:64px; height:64px }
.store_apps_list_img img { position:absolute; top:0; left:0; width:64px; height:64px }
.store_apps_list_txt { display:block; position:absolute; top:16px; left:104px }
.store_apps_list_txt dt { font-size:14px; line-height:26px }
.store_apps_list_txt dd { line-height:22px }
.store_apps_list_txt dd.inf { color:#aaa }
.store_apps_list_txt dd.inf span { margin:0 8px; color:#ddd }
.store_apps_list_txt dd.dec { color:#999 }
.store_apps_list_btn { display:none; position:absolute; top:40px; right:0; padding-left:30px; width:150px; background:url(../img/store_list_btn_bg.png); _background:#fff; _width:auto; _padding:0 10px 0 0 }
.store_apps_list_btn a { float:left; margin-left:6px; padding:0 15px; height:22px; border-radius:3px; border:1px solid #ddd; text-align:center; line-height:22px; transition:0.2s }
.store_apps_list_btn a:hover { border:1px solid #007aff; background:#007aff; color:#fff; transition:0.2s }
@media screen and (max-width:1200px) {
.store_apps { width:900px }
.store_apps_list { width:449px }
}
/* app content ========================================= */
.store_apps_content_main { float:left; margin-right:20px; padding:30px; width:818px; overflow:hidden; border:1px solid #ddd }
/* app content header */
.store_apps_content_head { display:block; margin-top:10px; height:138px }
.store_apps_content_head dt { display:block; position:relative; float:left; width:132px; height:108px }
.store_apps_content_head dt img { position:absolute; top:0; left:0; width:108px; height:108px }
.store_apps_content_head dd { display:block; float:left }
.store_apps_content_head dd h1 { font-size:22px; font-weight:normal; line-height:34px }
.store_apps_content_head dd p  { font-size:14px; line-height:34px; color:#999 }
.store_apps_content_head dd a  { display:block; float:left; margin:8px 10px 0 0; width:70px; height:28px; border:1px solid #ddd; background:#fff; border-radius:3px; line-height:28px; text-align:center; color:#333; font-size:14px; transition:0.2s }
.store_apps_content_head dd a:hover  { border:1px solid #007aff; background:#007aff; border-radius:3px; color:#fff; transition:0.2s }
/* app content information */
.store_apps_content_grid { display:block; height:116px; border:1px solid #ddd; border-radius:3px; clear:both }
.store_apps_content_grid li { display:block; float:left; padding-left:20px; line-height:38px; border-bottom:1px solid #ddd; border-right:1px solid #ddd } 
.store_apps_content_grid li span { color:#999 }
.store_apps_content_grid li.list1,
.store_apps_content_grid li.list2,
.store_apps_content_grid li.list3 { width:183px }
.store_apps_content_grid li.list4 { width:184px; border-right:0 }
.store_apps_content_grid li.list5,
.store_apps_content_grid li.list7 { width:387px }
.store_apps_content_grid li.list8,
.store_apps_content_grid li.list6 { width:388px; border-right:0 }
.store_apps_content_grid li.list7,
.store_apps_content_grid li.list8 { border-bottom:none; height: 38px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* app content images */
.store_apps_content_imgs { margin-top:20px; height:373px; _width:818px; overflow-x:auto; overflow-y:hidden }
.store_apps_content_imgs_box { white-space:nowrap; }
.store_apps_content_imgs_box img { display:inline-block; vertical-align:top; height:355px; border:0; width:auto; padding-right:15px }
/* app content text */
.store_apps_content_text { margin-top:20px; padding:30px; border:1px solid #ddd; overflow:hidden }
.store_apps_content_text h3 { font-size:16px; line-height:30px; font-weight:normal }
.store_apps_content_text p  { font-size:13px; padding-top:10px; line-height:26px; color:#888 }
/* app content side */
.store_apps_content_side { float:left }
.store_apps_content_side .apps_bang_box { height:560px; border:1px solid #ddd }
@media screen and (max-width:1200px) {
.store_apps_content_side { display:none }
}
/* app topic========================================= */
.store_topic { margin-top:20px; border-left:1px solid #ddd; border-top:1px solid #ddd; width:1200px; overflow:hidden }
.store_topic_list { float:left; width:299px; height:246px; background:#fff; border-right:1px solid #ddd; border-bottom:1px solid #ddd; transition:0.2s; _display:inline; overflow:hidden }
.store_topic_list:hover { transition:0.2s; background:#fff; box-shadow:inset 0 0 10px #e6e6e6 }
.store_topic_list img { margin:20px 0 0 20px;}
.store_topic_list p { margin:6px 0 0 20px; line-height:30px }
.store_topic_list span { margin-left:20px; color:#999 }
/* App topic crumbs */
.store_topic_crumbs { margin-top:5px; border-bottom:1px solid #eee }
.store_topic_crumbs_content { margin:0 auto; width:1200px; line-height:40px; font-size:13px }
.store_topic_crumbs_content span { margin:0 10px; color:#bbb }
/* App topic content */
.store_topic_content_header { padding-top:40px; height:110px; text-align:center }
.store_topic_content_header h1 { font-size:24px; font-weight:lighter }
.store_topic_content_header p  { display:block; height:40px; line-height:40px; color:#999 }
.store_topic_content_header a  { display:block; margin:0 auto; width:138px; height:36px; border:1px solid #ddd; border-radius:3px; text-align:center; line-height:36px; transition:0.2s}
.store_topic_content_header a:hover { border:1px solid #007aff; background:#007aff; color:#fff; transition:0.2s}
@media screen and (max-width:1200px) {
.store_topic_crumbs_content,
.store_topic { width:900px }
}
/* store wallpaper ========================================= */
.store_wper { border-top:1px solid #ddd; border-left:1px solid #ddd; overflow:hidden }
.store_wper_list { border-right:1px solid #ddd; float:left; border-bottom:1px solid #ddd; background:#fff; width:239px }
.store_wper_list img { margin:20px 0 0 20px; width:200px; height:355px; }
.store_wper_list img.i_9,
.store_wper_list img.i_10,
.store_wper_list img.i_11 { height:200px; }
.store_wper_list p { margin-left:20px; line-height:36px; padding-left:30px; background:url(../img/store_wper_count.png) no-repeat 0 8px }
@media screen and (max-width:1200px) {
.store_wper_list { width:224px }
.store_wper_list img { width:184px; height:auto }
}
/* store ringtone ========================================= */
.store_ring { margin:0 auto; border-top:1px solid #ddd; border-left:1px solid #ddd; width:1200px; overflow:hidden }
.store_ring_list { float:left; border-right:1px solid #ddd; border-bottom:1px solid #ddd; width:599px; height:88px }
.store_ring_list_on{ background:#fff9ec }
.store_ring_list_img { float:left; position:relative; width:82px; height:88px }
.store_ring_list_img img { margin:20px 0 0 20px; position:absolute; left:0; top:0 }
.store_ring_list_txt { float:left; display:block; margin-top:20px; width:360px; height:68px }
.store_ring_list_txt dt { line-height:24px }
.store_ring_list_txt dd { line-height:24px; color:#999 }
.store_ring_list_txt dd span { color:#ddd; margin:0 10px }
.store_ring_list_btn { float:right; width:124px; height:88px }
.store_ring_list_btn a { display:block; float:left; width:29px; height:29px; margin:31px 15px 0 0 }
.store_ring_list_btn a.play { background:url(../img/ring_play.png) top }
.store_ring_list_btn a.play:hover { background:url(../img/ring_play_hover.png)}
.store_ring_list_btn a.down { background:url(../img/ring_down.png) top }
.store_ring_list_btn a.down:hover { background:url(../img/ring_down_hover.png) }
.store_ring_list_btn a.pause { display:none }
.store_ring_list_btn a span { display:none }
/* html5 ring play  */
.audio_box { width:1px; height:1px; position:relative; overflow:hidden; }
.audiojs { position:absolute; z-index:0; top:10px; }
@media screen and (max-width:1200px) {
.store_ring { width:900px }
.store_ring_list { width:449px }
.store_ring_list_txt { width:260px }
.store_ring_list_btn { width:94px }
}


.btn   { display:inline-block; padding:0 20px; height:32px; line-height:32px; transition:0.3s; }
.btn-default { border:1px solid #ddd; background:#fff; color:#666; }
.btn-default:hover{ background:#f4f4f4; color:#333 }
.btn-success {  border:1px solid #00af3d; background:#00af3d; color:#FFF; }
.btn-success:hover { background:#009434; color:#FFF; }