@charset "euc-kr"; 
/* CSS Document */

.page_wrap { width:100%; color:#595959; /*background:url('/ClientUI/image/layout/bg/bg.gif') repeat-x */}
.page_wrap a { color:#595959; }
.page_wrap a:visited { color:#595959; }
.page_wrap a:hover { color:#595959; text-decoration:underline; }
.page_wrap h2 { padding:0; margin:0; }
.page_wrap h2 img { vertical-align:top }
.bg { position:relative; width:100%; height:533px; margin:0 auto; background:#000; margin-top:-311px; z-index:4 }
.main {background:url('/ClientUI/Image/layout/bg/main_v43.jpg') no-repeat center 80px; }

/*  */
.container { width:960px; margin:-221px auto 0 auto;_margin:-449px auto 0 auto; position:relative; z-index:6; }
.section_top_wrap { overflow:hidden; height:210px; _display:inline-block; margin-bottom:10px; }

	/*  */
	.event_area { float:left; width:475px; height:200px; padding:5px; background:url('/ClientUI/image/main/bg_main_event.gif') no-repeat; overflow:hidden; }
	.event_area h2 { position:absolute; left:-5000px; }

	/*  */
	.notice { position:relative; float:left; width:265px; height:160px; padding:50px 0 0 0; background:url('/ClientUI/image/main/bg_notice.gif') no-repeat; }
	.notice h2 { position:absolute; left:-5000px; }
	.notice ul { overflow:hidden; padding:0 0 0 15px; }
	.notice li { float:left; height:19px; padding:1px 0; }
	.notice li img { vertical-align:top; _vertical-align:middle; }
	.notice li a { color:#cecece; display:inline-block; width:177px; overflow:hidden; padding:0 0 0 10px; }
	
	*:first-child+html .notice li a { padding-top:2px }/* IE7 ���?*/
	:root .notice li a { padding-top:2px \0/IE8+9;} /* ie8, 9*/
	
	.notice a:visited { color:#cecece; }
	.notice a:hover { color:#cecece; }
	.notice .footer { position:absolute; right:15px; top:15px; }

.section_bottom_wrap { background:url('/old/images/bg_container_mid_v1.gif') repeat-y; }
.section_bottom_wrap .bg_top { display:block; height:15px; background:url('/old/images/bg_container_top.gif') no-repeat; margin-bottom:22px; }
.section_bottom_wrap .bg_bottom { display:block; height:31px; background:url('/old/images/bg_container_btm.gif') no-repeat; margin-top:50px; }

	.aside_left { float:left; width:198px; }
	.hero_vod { margin-bottom:10px; }
	.center_wrap { float:left; width:455px; }
	.aside { float:right; width:223px; }
	.bnr_launcher { margin-bottom:25px;}

	.aside .guide { margin-bottom:15px; }
	.aside .banner { margin-bottom:15px; }
	.aside .randking { margin-bottom:25px; }

	.section_bottom_wrap .fix_contents { margin:0 27px; }
    .section_bottom_wrap .fix_contents .fix_contents { margin:0; }
	.section_bottom_wrap .fix_contents { _height:1%; clear:both; overflow:hidden }
	*:first-child+html .section_bottom_wrap .fix_contents { zoom:1; }
	.section_bottom_wrap .fix_contents:after { display:block; height:0; content:"."; visibility:hidden; }

	.section_bottom_wrap .footer { position:absolute; right:0; top:0; }
	.section_bottom_wrap h2 { height:21px; border-bottom:1px solid #c6c6c6; margin-bottom:10px; }

	/* ���� ������ */
	.hero_vod { position:relative; width:168px; margin-right:30px; margin-bottom:10px;}
	.hero_vod h3 { margin:10px 0 5px 0; }
	.hero_vod li { }
	.vod_list { position:relative; }
	.vod_list .tit { display:block; padding:8px 0 0 0; }
	.vod_list .tit a { font-weight:bold; letter-spacing:-0.1em; padding:1px 0 0 0; display:inline-block; }
	.vod_list .tit img { vertical-align:top; padding-right:5px; }
	.vod_list img.pic { width:168px; height:90px; }
	.vod_list .footer { position:absolute; right:0; top:0;}
	
	/* */
	.contents_event { position:relative; overflow:hidden; margin-bottom:25px; _display:inline-block; }
	.contents_event .pic { float:left; margin-right:10px; }
	.contents_event ul { float:left; width:250px; padding-top:6px; }
	.contents_event ul li { line-height:20px; }

	/*  */
	.best_top5 { position:relative; overflow:hidden; margin-bottom:30px; }
	.best_top5 table { width:100%; background:url('/ClientUI/image/main/th_best.gif') no-repeat; }
	.best_top5 table td, .best_top5 table th { *background-image:none; }
	.best_top5 table th { height:32px; text-indent:-5000px;}
	.best_top5 table td { height:28px; text-align:center; line-height:28px; background:url('/ClientUI/image/table/list_dot_line.gif') no-repeat left bottom; }
	.best_top5 table td.no { font-family:Tahoma, sans-serif; }
	.best_top5 table td.tit { text-align:left; padding-left:5px; }
	.best_top5 table td.writer_main { text-align:left; padding-left:5px; }
	.best_top5 table td.writer_main img { _padding-right:3px; }

	/*  */
	.wonder { position:relative; overflow:hidden; margin-bottom:25px; _display:inline-block }
	.wonder .pic { float:left; width:195px; height:90px; margin:0 10px 0 0; }
	.wonder p { float:left; width:248px; line-height:150%; }
	.wonder p strong { display:block; padding:5px 0; }

	/* */
	.best_scene { position:relative; overflow:hidden; }
	.best_scene .main_list_wrap { width:455px; overflow:hidden; }
	.best_scene .main_list { width:482px; overflow:hidden; }
	.best_scene .main_list li { float:left; width:154px; height:167px; padding-bottom:15px;}
	.best_scene .main_list li .tit span { padding-left:0; }
	.best_scene .main_list li img.pic { width:147px; height:90px; }
	.best_scene .main_list li .medal { margin:0 5px 2px 0; padding:0; }

	/* */
	.ranking { position:relative; overflow:hidden; }
	.ranking .tab { width:218px; height:27px; padding:3px 0 0 5px; background:url('/ClientUI/image/main/bg_cate_ranking_v1.gif') no-repeat; }
	.ranking .tab li { float:left; width:60px; height:27px; }
	.ranking .update_date { font-size:11px; font-family:Tahoma, sans-serif; padding:7px 0 0 2px; }
	.ranking .update_date span { color:#d25e09; padding:0 3px 0 6px; }
	.ranking .update_date span .medal { padding-bottom:2px;}
	.ranking table { width:100%; table-layout:fixed; background:url('/ClientUI/image/main/th_ranking_v2.gif') no-repeat; }
	.ranking #clanRankingTbl { background-position:right top; }
	.ranking table th { height:30px; text-indent:-5000px; *background-image:none; }
	.ranking table td { text-align:center; padding:6px 0 6px; *background-image:none; background:url('/ClientUI/image/table/list_dot_line.gif') no-repeat left bottom; }
	.ranking table th { background-image:none; }
	.ranking table td.no { font-family:Tahoma, sans-serif; }
	.ranking table td.nickname, .ranking table td.clan_name { text-align:left; padding-left:5px;}
	
	/* */
	.banner_nexon { margin-bottom:30px; }
	/* */
	.nexon_ad_layer { position:absolute; left:100px; top:200px; width:576px; height:350px; z-index:9999;}
	
	/* */
	.vod_layer { z-index:9999; background:url('/ClientUI/image/main/bg_vod_layer.jpg') no-repeat; width:834px; height:403px; }
	.vod_layer .tit { height:28px; padding:15px 0 0 26px; }
	.vod_layer .btn_close { float:right; margin:-43px 26px 0 0; padding:14px 0 0 0; _display:inline; }
	.vod_layer .vod_area { width:820px; height:353px; margin:0 0 0 7px; overflow:hidden; }
	
	/* naver event */
	.aside { position:relative; }
	.naver_event { margin-bottom:30px; }
	.naver_event .layer { position:absolute; left:0; top:44px; width:223px; height:46px; padding:12px 0 0 0; background:url('/ClientUI/image/main/bg_naver_event.gif') no-repeat; text-align:center; font-size:11px; line-height:130%; }
	.naver_event .layer strong { color:#018204; }
	
	/* �Ǹ��Ǻ���ã�� �̺�Ʈ 20111222 */
	.event_find_treasure { position:relative; margin-bottom:20px; width:223px; height:183px; background:url('/ClientUI/image/main/event_find_treasure.jpg') no-repeat;}
	.event_find_treasure input { position:absolute; left:83px; top:130px; width:91px; height:20px; padding:3px 0 0 5px; background:url('/ClientUI//image/main/event_find_treasure_bg_input.gif') no-repeat; border:none; }
	.event_find_treasure input.on { background-position:left bottom;}
	.event_find_treasure .ok { position:absolute; left:182px; top:130px;  }
	.event_find_treasure .detail { position:absolute; right:4px; bottom:5px; }
	
	/* Ƽ�ϸ��� ���ڵ� �Է� */
	.pincode { margin-bottom:25px;}
	.pre_league { margin-bottom:25px; overflow:hidden; }
	.pre_league .bnr00 { clear:both; }
	.pre_league .bnr01 { float:left; }
	.pre_league .bnr02 { float:left; }
	
	/* ����Ʈ Ŀ�´�Ƽ */
	.best_community { position:relative; margin-top: 25px;  }
		/* ���� */
	.article_freeboard { position:relative;}
	.article_freeboard h3 { width:455px; height:23px; background:url(/ClientUI/image/main/tit_community_sub_v1.gif) no-repeat; text-indent:-5000px; }
	.article_freeboard table { width:455px; table-layout:fixed; background:url(/ClientUI/image/main/bg_th_community_v1.gif) no-repeat left top}
    *:first-child+html .article_freeboard table { table-layout:auto; }
    *:first-child+html .article_freeboard table th{ background: none; }
	.article_freeboard table th { height:32px; text-indent:-9000px; }
	.article_freeboard table td { text-align:center; background:url(/ClientUI/image/main/bg_tbl_community_td.gif) repeat-x left bottom; padding-bottom:2px; line-height:28px;}
	.article_freeboard table td.tit { text-align:left}
	.article_freeboard table td.c_writer {text-align:left; font-size:11px; }
	.article_freeboard table td.no { font-family: Tahoma, sans-serif; font-size:11px; }
	
	.article_wrap { float:left; overflow:hidden; margin:0 0 10px 0; padding-right:12px; width:439px; }
	.article_wrap li { height:38px; border-bottom:1px solid #dddddd; padding:4px 5px 0 12px; font-size:11px;}
	.article_wrap li span { line-height:15px; }
	/*.article_wrap li:hover span a{ color:#1F5EA3; text-decoration:underline;}*/
	.article_wrap li span img { float:left; padding-right:5px;}
	.article_wrap li p {padding-left:22px;}
	
		/* ���� */
	.article_fanfic { float:left; width:215px;/*width:222px;*/ position:relative; background:url(/ClientUI/image/main/bg_community_box_v1.gif) left bottom; display:inlnie;}
	.article_fanfic h3 { width:215px; height:23px; text-indent:-9000px; background:url(/ClientUI/image/main/tit_community_sub_v1.gif) no-repeat left -23px;}
	.article_fanfic .fanfic_img { padding:7px 0 0 0; text-align:center;}
	
	.article_videoclip { float:right; width:215px; position:relative; background:url(/ClientUI/image/main/bg_community_box_v1.gif) left bottom; display:inlnie }
	.article_videoclip h3 { width:215px; height:23px; text-indent:-9000px; background:url(/ClientUI/image/main/tit_community_sub_v1.gif) no-repeat right -23px;}
	.article_videoclip .videoclip_img { padding:7px 0 0 0; text-align:center;}
	
	.three_cols .article_fanfic { position:relative; width:145px; background:url(/ClientUI/image/main/bg_community_box2.gif) left bottom; }
	.three_cols .article_fanfic h3 { width:145px; height:23px; text-indent:-9000px; background:url(/ClientUI/image/main/tit_community_sub2.gif) no-repeat left top;}
	.three_cols .article_videoclip { float:right; position:relative; width:145px; background:url(/ClientUI/image/main/bg_community_box2.gif) left bottom;}
	.three_cols .article_videoclip h3 { width:145px; height:23px; text-indent:-9000px; background:url(/ClientUI/image/main/tit_community_sub2.gif) no-repeat right -23px;}
	.three_cols .article_videoclip .videoclip_img { padding:5px 0 0 0; text-align:center;}
	.three_cols .pic { width:123px; height:90px; }
	.three_cols .btn_prev { position:absolute; left:55px; top:120px; }
	.three_cols .btn_next { position:absolute; left:83px; top:120px; }
	.three_cols ul { margin-top:14px;}
	.article_wrap.three_cols p {padding-left:0;}
	
	.three_cols .article_screenshot { float:left; width:145px; position:relative; background:url(/ClientUI/image/main/bg_community_box2.gif) left bottom;}
	.three_cols .article_screenshot h3 { width:145px; height:23px; text-indent:-9000px; background:url(/ClientUI/image/main/tit_community_sub2.gif) no-repeat left bottom;}
	.three_cols .article_screenshot .videoclip_img { padding:5px 0 0 0; text-align:center;}
	
		/* ����Ʈ �� */
	.article_target {float:right; }
    .section_bottom_wrap .article_target .footer { position:static; right:0; top:0;  margin:-23px 0 0 415px;}
	.article_target h3 { width:455px; height:23px; background:url(/ClientUI/image/main/tit_community_sub_v1.gif) no-repeat left bottom; text-indent:-5000px; }
	.article_target table { width:455px; table-layout:fixed; background:url(/ClientUI/image/main/bg_th_community_v1.gif) no-repeat right top}
    *:first-child+html .article_target table { table-layout:auto; }
    *:first-child+html .article_target table th{ background: none; }
	.article_target table th { height:32px; text-indent:-9000px; background: none}
	.article_target table td { text-align:center; background:url(/ClientUI/image/main/bg_tbl_community_td.gif) repeat-x left bottom; padding-bottom:2px; line-height:37px;}
	.article_target table td.tit { text-align:left}
	.article_target table td.c_writer {text-align:left; font-size:11px; }
	.article_target table td.no { font-family: Tahoma, sans-serif; font-size:11px; }

	/* new special */
	.special_product { margin-bottom:25px;}
	.special_product .con_wrap { overflow:hidden; width:455px; height:140px;background:url(/ClientUI/image/main/special_bg.gif) no-repeat right bottom; }
	.special_product .tab_box { float:left; position:relative; width:103px; height:140px; overflow:hidden; }
	.special_product .tab_box a.prev { position:absolute; right:4px; top:13px; width:11px; height:10px; display:inline-block; text-indent:-5000px; font-size:2px; background:url(/ClientUI/image/main/special_tab_btn.gif) no-repeat; z-index:2; }
	.special_product .tab_box a.prev.live { background:url(/ClientUI/image/main/special_tab_btn.gif) no-repeat left -10px; z-index:2; }
	.special_product .tab_box a.prev.dis { background:url(/ClientUI/image/main/special_tab_btn.gif) no-repeat left 0; z-index:2;  cursor:default}
	.special_product .tab_box a.prev:hover { background:url(/ClientUI/image/main/special_tab_btn.gif) no-repeat left -20px; z-index:2; }
	.special_product .tab_box a.prev.dis:hover { background:url(/ClientUI/image/main/special_tab_btn.gif) no-repeat left 0; z-index:2; cursor:default}
	
	.special_product .tab_box a.next { position:absolute; right:4px; bottom:13px; width:11px; height:10px; display:inline-block; text-indent:-5000px; font-size:2px; background:url(/ClientUI/image/main/special_tab_btn.gif) no-repeat right top; display:inline-block; z-index:2;}
	.special_product .tab_box a.next.live { background:url(/ClientUI/image/main/special_tab_btn.gif) no-repeat right -10px; display:inline-block; z-index:2;}
	.special_product .tab_box a.next.dis { background:url(/ClientUI/image/main/special_tab_btn.gif) no-repeat right 0; display:inline-block; z-index:2;cursor:default}
	.special_product .tab_box a.next:hover { background:url(/ClientUI/image/main/special_tab_btn.gif) no-repeat right -20px; display:inline-block; z-index:2;}
	.special_product .tab_box a.next.dis:hover { background:url(/ClientUI/image/main/special_tab_btn.gif) no-repeat right 0; display:inline-block; z-index:2;cursor:default}
	
	.special_product .tab_box .tab_wrap { position:absolute; left:0; top:0; z-index:1 }
	.special_product .tab_box .tab a { display:inline-block; width:86px; height:23px; background:url(/ClientUI/image/main/special_tab.gif) no-repeat; font-weight:bold; padding:12px 0 0 17px; text-decoration:none; font-size:11px; letter-spacing:-0.1em;}
	.special_product .tab_box .tab { overflow:hidden; height:140px;}
	.special_product .tab_box .tab li.on a { background-position:left -35px; display:inline-block; width:86px; height:23px;  padding:12px 0 0 17px; }
	.special_product .tab_box .tab li a:hover { background-position:left -35px; display:inline-block; width:86px; height:23px; padding:12px 0 0 17px; }
	
	.special_product .product_wrap { float:left; position:relative; } 
	.special_product .product { position:relative; width:352px;}
	.special_product .product .prev { position:absolute; left:10px; top:31px; width:7px; height:14px; text-indent:-5000px; display:inline-block; background:url(/ClientUI/image/main/special_goods_btn.gif) no-repeat left 0; }
	.special_product .product .prev:hover { background:url(/ClientUI/image/main/special_goods_btn.gif) no-repeat left -28px; }
	.special_product .product .prev.dis { background:url(/ClientUI/image/main/special_goods_btn.gif) no-repeat 0 0;cursor:default }
	.special_product .product .prev.live { background:url(/ClientUI/image/main/special_goods_btn.gif) no-repeat 0 -14px; }
	.special_product .product .prev.dis:hover { background:url(/ClientUI/image/main/special_goods_btn.gif) no-repeat 0 0; cursor:default }
	
	
	.special_product .product .next { position:absolute; right:5px; top:31px; width:7px; height:14px; text-indent:-5000px; display:inline-block; background:url(/ClientUI/image/main/special_goods_btn.gif) no-repeat right top;} 
	.special_product .product .next:hover { background:url(/ClientUI/image/main/special_goods_btn.gif) no-repeat right -28px;}
	.special_product .product .next.dis { background:url(/ClientUI/image/main/special_goods_btn.gif) no-repeat right 0;}  
	.special_product .product .next.live { background:url(/ClientUI/image/main/special_goods_btn.gif) no-repeat right -14px;}
	.special_product .product .next.dis:hover { background:url(/ClientUI/image/main/special_goods_btn.gif) no-repeat right 0; cursor:default;} 
	
	
	.special_product .product .ul_wrap { width:315px; overflow:hidden; margin:11px 0 0 21px; }
	.special_product .product ul { overflow:hidden; width:320px;}
	.special_product .product ul li { float:left; margin:0 5px 0 0;}
	.special_product .product li strong { font-size:11px; display:block; line-height:17px; padding:3px 0 3px 0; width:75px; text-align:center; overflow:hidden; height:17px; }
	.special_product .product li span { font-size:11px; display:block; line-height:12px; width:75px; text-align:center; overflow:hidden; height:24px; }
	.special_product .product li a:hover {color:#1F5EA3; }
	.special_product .product_wrap ul li img { width:75px; height:75px;}


	/* ������ ������ */
	.layer_special_product { position:absolute; z-index:999; background:url('/ClientUI/image/main/bg_special_product.jpg') no-repeat; width:360px; height:519px; }
	.layer_special_product .tit_s { text-indent:-9000px; height:43px; }
	.layer_special_product .popclose { position:absolute; right:27px; top:14px; }
	.layer_special_product .item_info { padding:30px 27px;}
	.layer_special_product .item_info h2 { color:#e2e2e2; line-height:24px; height:24px; background:url('/ClientUI/image/pop/bg_tit.jpg') repeat-x; padding-left:10px; overflow:hidden}
	.layer_special_product .item_info h2 { *line-height:26px;  } /* IE6+7 */
	.layer_special_product .item_info h2 { line-height:26px \0/IE8+9; }/* IE8+9 �׽�Ʈ �Ϸ� */

	.layer_special_product .item_info .item { position:relative; margin:14px 0 39px 0; height:97px; overflow:hidden;  }
	.layer_special_product .item_info .item .big { width:97px; height:97px; }
	.layer_special_product .item_info .item .small { width:40px; height:40px; }
	.layer_special_product .item_info .item strong { position:absolute; left:160px; top:70px; }
	.layer_special_product .item_info .item dl { border:1px solid #c6c6c6; background:#fff; width:192px; height:21px; }
	.layer_special_product .item_info .item dl dt { float:left; padding:2px 9px 0 5px;}
	.layer_special_product .item_info .item .cp_gp_wrap { position:absolute; left:112px;  }
	.layer_special_product .item_info .item .cp { float:left; font-weight:bold; margin-bottom:5px;}
	.layer_special_product .item_info .item .gp { float:left; font-weight:bold;}
	.layer_special_product .item_info .item dl.gp dt { padding-top:3px; }
	.layer_special_product .item_info .item dl dd{ line-height:23px; }
	
	.layer_special_product .item_info .item .small {position:absolute; left:112px; top:57px; }
	.layer_special_product .item_info .item .big {position:absolute; left:0; top:0; }
	.layer_special_product .item_info h3 { background:url('/ClientUI/image/bul/bul03.gif') no-repeat left 1px; padding:0 0 0 15px; vertical-align:middle; margin-bottom:8px; }
	.layer_special_product .item_info .item_explain .txt { height:59px; overflow-y:auto; border:1px solid #c6c6c6; background:#fff; padding:10px; line-height:16px; }

    /* cpl ?�?� 배너*/
    .bnr_cpl { position: relative; margin-bottom:25px; }
    .bnr_cpl strong {position: absolute; left:90px; top:50px; font-size:16px; color:#4e4e4e; }
    .bnr_cpl_big { margin-bottom:15px;}
    .bnr_cpl span {position: absolute; left:1px; top:31px; padding-top:21px; font-size:11px; color:#848484;text-align: center; font-weight: bold; width:166px; height: 33px; display: block; background:url(/ClientUI/image/event/20130905_cpl/bnr_attend_bg.jpg) repeat; letter-spacing: -0.1em;}
    .bnr_cpl a:hover { text-decoration: none;}

    /*?�론 게?�?�*/
    .article_discussion table td,.article_discussion table th { font-size:11px;}
    .article_discussion table.main_title { width:100%; border-collapse: collapse;}
    .article_discussion table.main_title td { background: #cdcdcd; color:#262626; padding:5px 5px 4px 4px; font-weight: bold;}
    .article_discussion table.main_title th{ background: #cdcdcd url(/clientUI/image/main/bar_discussion2.gif) no-repeat right center; color:#262626; padding:5px 6px 4px 5px; font-weight: bold;}
    .article_discussion table.main_title th img{ margin-top:-2px;}
    .article_discussion table.main_title td img{ margin-top:-1px;}
    .article_discussion table.main_title { border:1px solid #c0c0c0; border-bottom:0; }

    .article_discussion .main_writer { width:100%; border:1px solid #dddddd; border-collapse: collapse; }
    .article_discussion .main_writer th { font-weight: normal; font-size:11px; background:#f7f8f9 url(/clientUI/image/main/bar_discussion.gif) no-repeat right center; border-bottom:1px solid #dddddd;}
    .article_discussion .main_writer th p { padding-top:2px; }
    .article_discussion .main_writer td { font-family:tahoma; font-size:11px; background:#f7f8f9; padding:3px 0 4px 5px; border-bottom:1px solid #dddddd;}

    .q_div2_wrap { padding: 5px; border:1px solid #dddddd; margin-top:-1px; background: #fff;}

    .graph_wrap .num1 { position: absolute; left:363px; top:3px; width:45px; color:#3c53c2; font-size:16px; font-weight: bold; }
    .graph_wrap .num2 { position: absolute; right:2px; top:6px;color:#3c53c2; font-size:11px; }
    .q_div p { display: inline-block; padding:6px 10px;}
    .q_div .btn_question { width:40px; height:17px; background: url(/clientUI/image/main/btn_vote_question_bg.gif) no-repeat; text-align: center; line-height:19px; color:#2a42bd; font-weight: bold; display: inline-block; letter-spacing: -0.1em;}
    .q_div .question { overflow: hidden;}
    .q_div .question table td { padding:2px 0 1px 5px; }
    .q_div .question table th { padding:3px 0 3px 0; }

    .graph_wrap { position: relative; padding:7px 6px 7px 6px; background: url(/clientUI/image/main/bg_vote_pattern.jpg) repeat-x; }
    .graph_wrap .graph { width:354px; height:10px; background: #ededed; box-shadow: inset 0 0 2px rgba(0,0,0,.2); }
    .graph_wrap .bar {
        display:inline-block;
        height:10px;
        background: #1967a1; /* Old browsers */
        background:-moz-linear-gradient(top, #277bba 0%, #0e568d 100%);/* FF3.6+ */
        background:-webkit-gradient(linear, left top, left bottom, color-stop(0, #277bba), to(#0e568d));/* Chrome,Safari4+ */
        background:-webkit-linear-gradient(top, #277bba 0%, #0e568d 100%); /* Chrome10+,Safari5.1+ */
        background:-o-linear-gradient(top, #277bba 0%, #0e568d 100%); /* Opera11.10+ */
        background: -ms-linear-gradient(top, #277bba 0%, #0e568d 100%);/* ie10 */
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#277bba', endColorstr='#0e568d',GradientType=0 ); /* IE6-9 */
    }

    .graph_wrap .disagree .bar {
        display:inline-block;
        height:10px;
        background: #b14337; /* Old browsers */
        background:-moz-linear-gradient(top, #bd4f48 0%, #982a16 100%);/* FF3.6+ */
        background:-webkit-gradient(linear, left top, left bottom, color-stop(0, #bd4f48), to(#982a16));/* Chrome,Safari4+ */
        background:-webkit-linear-gradient(top, #bd4f48 0%, #982a16 100%); /* Chrome10+,Safari5.1+ */
        background:-o-linear-gradient(top, #bd4f48 0%, #982a16 100%); /* Opera11.10+ */
        background: -ms-linear-gradient(top, #bd4f48 0%, #982a16 100%);/* ie10 */
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#bd4f48', endColorstr='#982a16',GradientType=0 ); /* IE6-9 */
    }

    .q_div2 p { padding:12px 10px;}
    .q_div2 span { font-weight: bold;}
    .q_div2 .graph_wrap .agree .graph{ position: absolute; left:7px; top:26px;}
    .q_div2 .graph_wrap .agree .con { position: absolute; left:7px; top:41px; font-size:11px; width:205px; overflow: hidden}
    .q_div2 .graph_wrap .agree .num1 { position: absolute; left:42px; top:6px; }
    .q_div2 .graph_wrap .agree .num2 { position: absolute; left:162px; top:11px; width:50px; text-align: right; }
    .q_div2 .graph_wrap .agree .ico { position: absolute; left:7px; top:6px;}

    .q_div2 .graph_wrap .disagree .graph{ position: absolute; left:230px; top:26px;}
    .q_div2 .graph_wrap .disagree .con { position: absolute; left:230px; top:41px; font-size:11px;  width:205px; overflow: hidden}
    .q_div2 .graph_wrap .disagree .num1 { position: absolute; left:265px; top:6px; color:#ca2525; }
    .q_div2 .graph_wrap .disagree .num2 { position: absolute; left:386px; top:11px; width:50px; text-align: right;color:#ca2525; }
    .q_div2 .graph_wrap .disagree .ico { position: absolute; left:230px; top:6px;}

    .q_div2 .graph_wrap { position: relative; height:70px; background: url(/clientUI/image/main/bg_discussion.jpg) no-repeat center center; padding:0; background-size: 445px 70px;}
    .q_div2 .graph_wrap .graph { width:205px; }

    /* hero_info */
    /* info.css ?�?� ?�?� */
    .sub_box_contents_list { padding:10px 10px 20px 10px; border:1px solid #c9c9c9; border-top:0; overflow:hidden; *display:inline-block; background:#f7f8f9;}
    .group1, .group2, .group3 { }
    .group1 { margin-bottom:10px; }
    .group1 img { width:180px; height:108px; }
    .group2 { width:180px; }
    .group2 dl { overflow:hidden; width:180px; margin-bottom:4px;  }
    .group2 dt { float:left; width:65px; }
    .group2 dd { float:left; width:115px; }
    .group2 #selectHeroInfoBoxMainActive { height:46px; }
    .group3 { width:180px; margin-bottom:30px; }
    .group3 dl { overflow:hidden; margin-bottom:4px; *display:inline-block; }
    .group3 dt { float:left; padding-right:5px; }
    .group3 dd { float:left; }
    .group3 dd div { width:115px; height:14px; margin:3px 0 0 0; background:url('/ClientUI/image/main/gage.gif') no-repeat; }
    .group3 dd div span { display:block; width:180px; height:14px; background:url('/ClientUI/image/main/gage.gif') no-repeat; }
    .group3 .gage1 .bar { background-position:left -14px; }
    .group3 .gage2 .bar { background-position:left -28px; }
    .group3 .gage3 .bar { background-position:left -42px; }
    .group3 .gage4 .bar { background-position:left -56px; }
    .group3 .gage5 .bar { background-position:left -56px; }
    .group4 { width:172px; height:45px; padding:18px 3px 0 6px ; background: url('/ClientUI/image/main/bg_hero_info_skill.gif') no-repeat;  }
    .group4 ul { overflow: hidden; width:188px; }
    .group4 ul li img { position: absolute; width:40px; height: 40px; z-index: 1}
    .group4 li span.border { position: absolute; border:2px solid #ffc600; width:36px; height:36px; display: none; z-index: 2;}
    .group4 li:hover span.border { display: block; }
    .group4 li.on span.border { display: block; }
    .group4 ul li { float:left; margin:0 3px 0 0; width:40px; height: 40px;}

    .star1 { width:53px; height:14px; margin:3px 0 0 5px; display:block; background:url('/ClientUI/image/info/grade_star.png') no-repeat; }
    .star2 { width:53px; height:14px; margin:3px 0 0 5px; display:block; background:url('/ClientUI/image/info/grade_star.png') no-repeat left -14px; }
    .star3 { width:53px; height:14px; margin:3px 0 0 5px; display:block; background:url('/ClientUI/image/info/grade_star.png') no-repeat left -28px; }
    .star4 { width:53px; height:14px; margin:3px 0 0 5px; display:block; background:url('/ClientUI/image/info/grade_star.png') no-repeat left -42px; }
    .star5 { width:53px; height:14px; margin:3px 0 0 5px; display:block; background:url('/ClientUI/image/info/grade_star.png') no-repeat left -56px; }
    /* info.css ?�?� ?�?� */

    .hero_info { position: relative;}
    .hero_info .info{ float:left; width:180px; padding:10px; }
    .hero_info .type { background: url(/ClientUI/image/main/bg_hero_info.gif) no-repeat; height: 33px; padding-top:10px; position: relative; z-index: 2}
    .hero_info .con_box { position: relative; margin-top:-2px; padding-bottom:1px; background: url(/ClientUI/image/main/bg_hero_info.gif) no-repeat left bottom; z-index: 1}
    .hero_info .emblem_mark { display: none; text-align: center; padding:15px 0 10px 0; width:100%; }
    .hero_info .type ul { text-align: center; margin:0 auto; width:330px;}
    .hero_info .type li { float:left; width:66px; height:24px; text-align:center; }
    .hero_info .type li a{ width:66px; height:22px; padding-top:2px; display: block;}
    .hero_info .type li a.on { margin-top:-2px}
    .hero_info .name { height:28px; background: url(/ClientUI/image/main/bg_hero_info_tit.jpg) no-repeat left top; padding-top:2px}
    .hero_info .name a { width:58px; height: 14px; float:right; margin:7px 5px 0 0; }

    .hero_info.nightElf .name{ background: url(/ClientUI/image/main/bg_hero_info_tit.jpg) no-repeat left bottom; }
    .hero_info.nightElf .group3 dd div { background:url('/ClientUI/image/main/gage2.gif') no-repeat; }
    .hero_info.nightElf .group3 dd div span { background:url('/ClientUI/image/main/gage2.gif') no-repeat; }
    .hero_info.nightElf .group3 .gage1 .bar { background-position:left -14px; }
    .hero_info.nightElf .group3 .gage2 .bar { background-position:left -28px; }
    .hero_info.nightElf .group3 .gage3 .bar { background-position:left -42px; }
    .hero_info.nightElf .group3 .gage4 .bar { background-position:left -56px; }
    .hero_info.nightElf .group3 .gage5 .bar { background-position:left -56px; }
    .hero_info.nightElf .star1 { background:url('/ClientUI/image/info/grade_star2.png') no-repeat; }
    .hero_info.nightElf .star2 { background:url('/ClientUI/image/info/grade_star2.png') no-repeat left -14px; }
    .hero_info.nightElf .star3 { background:url('/ClientUI/image/info/grade_star2.png') no-repeat left -28px; }
    .hero_info.nightElf .star4 { background:url('/ClientUI/image/info/grade_star2.png') no-repeat left -42px; }
    .hero_info.nightElf .star5 { background:url('/ClientUI/image/info/grade_star2.png') no-repeat left -56px; }

    .type_heros { float:left; width:241px; height:433px; padding:0 1px 0 12px; }
    .type_heros ul { overflow:hidden; padding:10px 0;}
    .type_heros li { position: relative; float:left; margin-right:10px; margin-bottom:8px; width:50px; height:50px;}
    .type_heros li img { position: absolute; width:50px; height:50px; z-index: 1;}
    .type_heros li span.border { position: absolute; border:2px solid #ffc600; width:46px; height:46px; display: none; z-index: 2;}
    .type_heros li:hover span.border { display: block; }
    .type_heros li.on span.border { display: block; }
    .type_heros.type1{ background:#d9cdec; }
    .type_heros.type2{ background:#ebc9bf; }
    .type_heros.type3{ background:#f4dfbf; }
    .type_heros.type4{ background:#c7dbe9; }
    .type_heros.type5{ background:#c9e7bf; }

    /* all */
    .hero_info_all h3 { background: url(/ClientUI/image/main/bg_hero_info.gif) no-repeat left top; height:20px; padding:5px 0 5px 11px;  margin-top:-1px}
    .hero_info_all .type_heros { float:none; width:100%; height:auto; background: url(/ClientUI/image/main/bg_hero_info.gif) no-repeat left bottom; }
    .hero_info_all h3:first-child { margin-top:0; }
    .hero_info_all .type_heros ul { padding-bottom:2px; }
    .hero_info_all .emblem_mark { display: none;}
    .hero_info_all li { width:40px; height:40px; margin-right:9px;}
    .hero_info_all li img { width:40px; height:40px;}
    .hero_info_all li span.border { position: absolute; border:2px solid #ffc600; width:36px; height:36px; display: none; z-index: 2;}

    /* hero_info skillExplain */
    .skillExplain { position:absolute; width:268px; padding-top:10px; background:url('/ClientUI/image/main/bg_hero_info_tooltip.gif') no-repeat; z-index:999999;  _display:inline-block; }
    .skillExplain .fix {overflow:hidden;}
    .skillExplain .pic { float:left; margin:6px 0 0 6px; width:64px; height:69px; }
    .skillExplain .pic img { width:64px; height:64px; margin-bottom:5px;}
    .skillExplain dl { float:left; width:177px; margin:6px 0 0 10px; }
    .skillExplain dt { padding-bottom:2px; text-align:left; font-weight:bold; font-size:11px; letter-spacing:-0.1em; color:#2e6db4; }
    .skillExplain dt span { float:right; background:#6839b4; color:#fff; padding:1px 2px; margin:-3px 0 0 0; }
    .skillExplain dt img { width:16px; height:16px; padding:0 5px 2px 0; vertical-align:middle; }
    .skillExplain dd { padding-top:5px; font-size:11px; color:#656565; line-height:14px; text-align:left; margin-bottom:5px; }
    .skillExplain .box_btm { position: relative; height:2px; background:url('/ClientUI/image/main/bg_hero_info_tooltip.gif') no-repeat left bottom; left:0; bottom:0;}
    .skillExplain.type1 { background-position: left top;}
    .skillExplain.type2 { background-position: -268px top;}
    .skillExplain.type3 { background-position: -536px top;}
    .skillExplain.type4 { background-position: -804px top;}
    .skillExplain.type5 { background-position: right top;}

    .skillExplain.type1  .box_btm{ background-position: left bottom;}
    .skillExplain.type2  .box_btm{ background-position: -268px bottom;}
    .skillExplain.type3  .box_btm{ background-position: -536px bottom;}
    .skillExplain.type4  .box_btm{ background-position: -804px bottom;}
    .skillExplain.type5  .box_btm{ background-position: right bottom;}

    .skillExplain.type1 dt{ color:#6839b4;}
    .skillExplain.type2 dt{ color:#b43939;}
    .skillExplain.type3 dt{ color:#b75600;}
    .skillExplain.type4 dt{ color:#0061a9;}
    .skillExplain.type5 dt{ color:#1d7000;}

    .skillExplain.type1 dt span { background:#6839b4;}
    .skillExplain.type2 dt span { background:#b43939;}
    .skillExplain.type3 dt span { background:#b75600;}
    .skillExplain.type4 dt span { background:#0061a9;}
    .skillExplain.type5 dt span { background:#1d7000;}

    .heroExplain { background: url('/ClientUI/image/main/bg_hero_info_tooltop2_tit.gif') no-repeat; }
    .heroExplain.nightElf { background: url('/ClientUI/image/main/bg_hero_info_tooltop2_tit2.gif') no-repeat; }
    .heroExplain .con_box { padding-top:10px; }
    .heroExplain .fix .fix {background: #fff; }
    .heroExplain .name { height:28px; background: url('/ClientUI/image/main/bg_hero_info_tooltop2_tit1_2.gif') no-repeat right bottom ; padding:0 0 0 5px;}
    .heroExplain.nightElf .name{ background: url(/ClientUI/image/main/bg_hero_info_tooltop2_tit2_2.gif) no-repeat right bottom; padding:0 0 0 5px;}

    .heroExplain .group2 dd { text-align:left; }
    .heroExplain .group2 dd div { background:url('/ClientUI/image/main/gage2.gif') no-repeat; }
    .heroExplain .group2 dd div span { background:url('/ClientUI/image/main/gage2.gif') no-repeat; }

    .heroExplain.nightElf .group3 { padding-bottom:5px; }
    .heroExplain.nightElf .group3 dd div { background:url('/ClientUI/image/main/gage2.gif') no-repeat; }
    .heroExplain.nightElf .group3 dd div span { background:url('/ClientUI/image/main/gage2.gif') no-repeat; }
    .heroExplain.nightElf .group3 .gage1 .bar { background-position:left -14px; }
    .heroExplain.nightElf .group3 .gage2 .bar { background-position:left -28px; }
    .heroExplain.nightElf .group3 .gage3 .bar { background-position:left -42px; }
    .heroExplain.nightElf .group3 .gage4 .bar { background-position:left -56px; }
    .heroExplain.nightElf .group3 .gage5 .bar { background-position:left -56px; }
    .heroExplain.nightElf .star1 { background:url('/ClientUI/image/info/grade_star2.gif') no-repeat; }
    .heroExplain.nightElf .star2 { background:url('/ClientUI/image/info/grade_star2.gif') no-repeat left -14px; }
    .heroExplain.nightElf .star3 { background:url('/ClientUI/image/info/grade_star2.gif') no-repeat left -28px; }
    .heroExplain.nightElf .star4 { background:url('/ClientUI/image/info/grade_star2.gif') no-repeat left -42px; }
    .heroExplain.nightElf .star5 { background:url('/ClientUI/image/info/grade_star2.gif') no-repeat left -56px; }

    .heroExplain .info { padding:5px 10px 5px 10px; text-align:center; border:1px solid #d0d0d0; border-top:0; }
    .heroExplain .info .group1,
    .heroExplain .info .group2,
    .heroExplain .info .group3 { margin:5px auto 0 auto; }

    .best_community_body { overflow: hidden;}