* { margin: 0; padding: 0;}
html, body, div, p, ul, li, img, h1, h2, h3, h4, h5, h6, h2, span, a { margin: 0; padding: 0;}

div.comm_wrap, div.DB_wrap { position: relative; margin: 0 auto; width: 772px; font-family: Dotum,돋움; font-size: 12px;}
div.comm_wrap a, div.DB_wrap a { text-decoration: none;}
div.comm_wrap img, div.DB_wrap img { border: none; vertical-align: middle;}
div.comm_wrap li, div.DB_wrap li { list-style: none;}

p.comm_notice, div.comm_tab_btn, div.comm_wrap div.comm_bbs ul, div.comm_cell { position: absolute;}

.col_red { color: #ff0000;}
.col_blue { color: #0072bc;}
.col_orange { color: #f7941d;}


/* 매인 상단 */
.wrap-ClassName { position: relative; margin: 0 auto; width: 772px; font-family: 'MalgunGothic','맑은고딕',Dotum,돋움;}
.wrap-ClassName a { text-decoration: none; }
.wrap-ClassName a:hover { text-decoration: underline;}
.wrap-ClassName p, .wrap-ClassName ul { position: absolute; list-style: none; }
.wrap-ClassName img { border: none; }


/* 공지사항 - "p.notice"와 "p.notice a" color와 font-wieght 값 동일하게 적용 - */
.wrap-ClassName p.notice_top { top: 203px; left: 260px; width: 360px; color: #00c8ff; font-weight: bold;
							   overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
.wrap-ClassName p.notice_top a { color: #00c8ff; font-size: 14px; font-weight: bold;}
/* /공지사항 */

/* 유튜브&그린존 */
.wrap-ClassName p.greenzone { top: 242px; left: 40px;}
.wrap-ClassName p.greenzone img { width: 341px; height: 169px; border: 0;}
/* /유튜브&그린존 */

/* 게시판 영역 - "div.bbs li"와 "div.bbs a" color와 font-wieght 값 동일하게 적용 - */
.wrap-ClassName ul.bbs01 { top: 286px; left: 405px;}
.wrap-ClassName div.bbs li { width: 320px; height: 40px; color: #c9e7ff; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
.wrap-ClassName div.bbs a { font-size: 12px; color: #c9e7ff; line-height: 40px;}
.wrap-ClassName div.bbs a img {  width: auto; height: 32px; vertical-align: middle; margin: -3px 5px 0 0;}
/* /게시판 영역 */


/* tab 버튼 */
div.comm_tab_btn { top: 137px; left: 0px; width: 100%; overflow: hidden; text-align: center;}
div.comm_tab_btn a { margin-right: 1px;}
div.comm_tab_btn a:lasi-child { margin-right: 0;}


/* 표 영역 */
div.comm_cell { top: 250px; left: 155px;}
div.comm_cell ul.cell_info { width: 560px;}
div.comm_cell ul.cell_info li { overflow: hidden; margin-bottom: 9px;}
div.comm_cell ul.cell_info li.li_other a, div.comm_cell ul.cell_info li.li_other span { margin-bottom: 4px;}
div.comm_cell ul.cell_info li a, div.comm_cell ul.cell_info li span { display: block; float: left;}
div.comm_cell ul.cell_info li a { min-width: 64px; padding: 0 4px; height: 23px; text-align: center; color: #e1e1e1; line-height: 23px; font-size: 12px; font-weight: bold; font-size: 13px;}
div.comm_cell ul.cell_info li a:hover, div.comm_cell ul.cell_info li a.value_check { min-width: 62px; padding: 0 4px; height: 21px; line-height: 21px; text-align: center; background: rgba(0,16,140,0.8); font-weight: bold;
	border: 1px solid #b3c1ff;
	border-radius: 3px;
	-o-border-radius: 3px;
	-ms-border-radius: 3px;
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;}
div.comm_cell ul.cell_info li a.btn_ot { padding: 0 4px:}
div.comm_cell ul.cell_info li a img { width: auto; height: 16px; margin-top: -2px; vertical-align: middle;}
div.comm_cell ul.cell_info li a img.img_class { width: auto; height: 12px; margin-top: 5px;}
div.comm_cell ul.cell_info li a:hover img.img_class { width: auto; height: 12px; margin-top: 4px;}
div.comm_cell ul.cell_info li a.value_check img.img_class { margin-top: 4px;}
div.comm_cell ul.cell_info li span { width: 9px; height: 21px; background: center center url(//appdata.hungryapp.co.kr/images/sim/wsummoner/ico_vspace.png) no-repeat;}


/* 검색 영역 */
ul.comm_main		{ top: 425px; left: 134px;} /* 매인 검색 */
ul.search_sumon		{ top: 354px; left: 170px;} /* 소환수 검색 */
ul.comm_search { position: absolute; overflow: hidden;}
ul.comm_search li { float: left;}
ul.comm_search li:first-child img { margin-right: 1px;}
ul.comm_search li.li_sh { width: 284px;height: 30px; background: center center url(//appdata.hungryapp.co.kr/images/sim/wsummoner/bg_search.png) no-repeat; text-align: center;}
ul.comm_search li input { width: 270px; margin: 3px 0 0 4px; background: none; border: none; height: 24px; color: #eeeeee;}


/* DB 리스트 */

div.DB_wrap { width: 772px; margin: 0 auto;}
div.DB_wrap table { position: relative; background: #657cef; width: 100%; font-size: 12px; margin-top: 5px;}
div.DB_wrap table td, div.DB_wrap table th { text-align: center; height: 32px;}
div.DB_wrap table th { color: #c9e7ff; background: #0c195b;}
div.DB_wrap table th.th01 { background: #353d63;}
div.DB_wrap table td { color: #041257; background: #d1d6e9;}
div.DB_wrap table th.td_left, div.DB_wrap table td.td_left { text-align: left; padding-left: 10px;}
div.DB_wrap table th.td_left { height: 40px; background: #000b3e;}
div.DB_wrap table td.td_type img { width: 26px; margin: -3px 0 0 3px;}

div.DB_list table th { height: 34px;}
div.DB_list table th a { color: #c9e7ff; border-bottom: 1px solid #c9e7ff; padding-bottom: 2px;}
div.DB_list table td { height: 60px;border-bottom: 1px solid #0c195b;}
div.DB_list table td:first-child img.li_char { width: 57px; height: 57px; margin: 5px;}
div.DB_list table td.td_name { text-align: left; padding-left: 10px;}
div.DB_list table td.td_name a { color: #0000ff; font-weight: bold; font-size: 14px; text-decoration: none;}
div.DB_list table td.td_name a:hover { text-decoration: underline;}
div.DB_list table td.td_name a img { width: auto; height: 16px; margin: -4px 0 0 5px;}
div.DB_list table td.td_av img { width: 16px; height: auto; margin: 5px 0;}
div.DB_list table td span { font-weight: normal;}


/* DB 상세보기 */


/* 카드 이미지 및 정보 */
div.card_infos { position: relative; width: 100%; overflow: hidden; background: #041257; padding-bottom: 10px;
	border-radius: 5px;
	-o-border-radius: 5px;
	-ms-border-radius: 5px;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;}

div.card_infos div.card_title { width: 90%; height: 55px; margin: 0 auto; margin-bottom: 10px; line-height: 72px; color: #00ffc6; font-size: 20px; font-weight: bold; text-align: center; background: top center url(//appdata.hungryapp.co.kr/images/sim/wsummoner/bg_view_tt.gif) no-repeat;}

div.card_infos div.card_char { float: right; width: 44%; margin-top: 0; margin-right: 10px; border: 1px solid #a57a87; background: #d1d6e9;}
div.card_infos div.card_char img { width: 100%;}

div.DB_card_view { margin-top: 10px;}

div.card_infom { float: left; width: 52%; margin-left: 10px;}
div.card_infom table { width: 100%; }
div.card_infom table:first-child { margin-top: 0;}
div.card_infom th.td_name		{ height: 40px; color: #00ffc6; font-size: 16px;}
div.card_infom th.td_name img	{ width: auto; height: 16px; margin: -4px 0 0 5px;}
div.card_infom th.td_type		{ height: 40px; }
div.card_infom th.td_type img	{ width: 20px; margin: -2px 0 0 5px;}
div.card_infom td.td_type02		{ background: #d1d6e9 center center url(//appdata.hungryapp.co.kr/images/sim/wsummoner/ico_arrow_a01.png) no-repeat;}
div.card_infom td.td_type02 span	{ display: block; float: left; width: 48%; text-align: center;}
div.card_infom td.td_type02 strong	{ display: block; float: right; width: 48%; text-align: center;}
div.card_infom td.td_type02 img	{ width: 20px; margin: 0 50px;}
div.card_infom td.td_class img	{ width: 16px; margin-right: 3px;}
div.card_infom th.th_tabOn		{ color: #00ff7e; background: #001ba1; border: 1px solid #00f0ff;}

div.card_infom ul { width: 100%; margin: 10px 0 0 5px;}
div.card_infom ul li { float: left; overflow: hidden; color: #c9e7ff;}
div.card_infom ul li.li_1th { display: table; margin-right: 10px; width: 90px; height: 90px; background: top center url(//appdata.hungryapp.co.kr/images/sim/wsummoner/bg_vote01.png) no-repeat;}
div.card_infom ul li.li_1th strong { display: table-cell; text-align: center; vertical-align: middle; color: #ffff00; font-size: 24px;}

div.card_infom ul li.li_2th { width: 75%; margin-bottom: 5px; padding-top: 20px; font-size: 16px;}
div.card_infom ul li.li_2th strong:first-child	{ float: left; margin-left: 5px; color: #ffc5b8;}
div.card_infom ul li.li_2th strong:last-child	{ float: right; margin-right: 5px; color: #c9ff73;}

div.card_infom ul li.li_3th, div.card_infom ul li.li_vite { position: relative; display: table; width: 74%; height: 40px; color: #li_3th; border: 1px solid #657cef;}
div.card_infom ul li.li_3th			{ background: #d1d6e9;}
div.card_infom ul li.li_3th span	{ color: #041257; display: table-cell; text-align: center; vertical-align: middle; }
div.card_infom ul li.li_vite		{ background: #619f01;}
div.card_infom ul li.li_vite span	{ color: #041257; background: #d72901; display: table-cell; }
div.card_infom ul li.li_vite strong	{ position: absolute; top: 0; left: 0; right: 0; bottom: 0; text-align: center; font-size: 16px; line-height: 40px;}

div.card_infom ul li.li_4th { width: 98%; margin: 8px 0 3px 0; overflow: hidden;}
div.card_infom ul li.li_4th span { display: block; float: left; margin: 7px 0 0 2px;}
div.card_infom ul li.li_4th span img { margin: -5px 5px 0 0;}
div.card_infom ul li.li_4th span strong { color: #ffff00; font-size: 14px; margin-right: 5px;}
div.card_infom ul li.li_4th a { display: block; float: right;}

div.card_infom ul li.li_5th { width: 98%; margin-top: 8px; overflow: hidden;}
div.card_infom ul li.li_5th strong, div.card_infom ul li.li_5th a { display: block; float: left;}
div.card_infom ul li.li_5th strong { width: 20px; text-align: center; margin-right: 5px;}
div.card_infom ul li.li_5th strong.vote_good { color: #fff; background: #62a000;}
div.card_infom ul li.li_5th strong.vote_bad { color: #fff; background: #d72901;}
div.card_infom ul li.li_5th a { width: 93%; color: #c9e7ff; line-height: 16px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
div.card_infom ul li.li_5th a:hover { text-decoration: underline;}

/* 투표 창 */
div.vote_layer { position: absolute; border: 3px solid #00ffc6; background: #fff; z-index: 999;}
div.vote_layer table { width: 100%; margin: 0;}
div.vote_layer table tr th { height: 15px;}
div.vote_layer table tr th strong { color: #00ffc6; font-size: 16px;}
div.vote_layer table tr:first-child th img { width: 100%;}
div.vote_layer div { margin: 8px 0; text-align: right;}
div.vote_layer div a { margin-right: 5px;}
div.vote_layer table tr th a { display: block; float: left; width: 26px; margin-left: 10px; line-height: 20px; background: #013e9c; color: #fff799;
	border: 1px solid #d1d6e9; 
	border-radius: 2px;
	-o-border-radius: 2px;
	-ms-border-radius: 2px;
	-moz-border-radius: 2px;
	-webkit-border-radius: 2px;}
div.vote_layer table tr th a.vote_sel, div.vote_layer table tr th a:hover { background: #03c583; color: #fff;}
div.vote_layer table tr td textarea { background: none; border: 0; width: 98%; height: 90%;}


/* 스킬 정보 */
table.tb_skill { border: 1px solid #657cef;}
table.tb_skill tr th { border-bottom: 1px solid #657cef;}
table.tb_skill tr td { color: #c9e7ff; background: #041257; }
table.tb_skill tr td strong.skill_a, table.tb_skill tr td strong.skill_l, table.tb_skill tr td strong.skill_s { display: block; float: left; padding-left: 35px;}
table.tb_skill tr td strong.skill_a { color: #f7941d; background: 10px center url(//appdata.hungryapp.co.kr/images/sim/wsummoner/ico_skill_a.gif) no-repeat;}
table.tb_skill tr td strong.skill_l { color: #00cbff; background: 10px center url(//appdata.hungryapp.co.kr/images/sim/wsummoner/ico_skill_l.gif) no-repeat;}
table.tb_skill tr td strong.skill_s { color: #00cbb1; background: 10px center url(//appdata.hungryapp.co.kr/images/sim/wsummoner/ico_skill_s.gif) no-repeat;}

table.tb_skill tr td span { display: block; float: right;}
table.tb_skill tr td span strong { padding: 0 10px;}
table.tb_skill tr td.td_skill { height: 20px; text-align: left; vertical-align: top; padding: 0 0 10px 20px; background: #041257 1px bottom url(//appdata.hungryapp.co.kr/images/sim/wsummoner/bg_line.gif) no-repeat;}


/* 진화 정보 */
div.DB_card_view td.sin_char, div.DB_card_view td.sin_material, div.DB_card_view td.sin_gold { background: #041257; color: #c9e7ff;}
div.DB_card_view td.sin_char { padding-top: 10px; vertical-align: top; font-size: 13px; font-weight: bold;}
div.DB_card_view td.sin_char img { width: 170px; height: 170px; margin-bottom: 5px;}
div.DB_card_view td.sin_material { padding: 0 0 10px 0; vertical-align: top; text-align: left;}
div.DB_card_view td.sin_material img { float: left; width: 90px; margin: 10px 0 0 10px;}
div.DB_card_view td.sin_gold img { width: 30px; margin-right: 3px;}


/* 진화 트리 */
div.DB_card_view td.sin_tree { overflow: hidden; padding: 10px 0 10px 10px; color: #c9e7ff; background: #041257;}
div.DB_card_view td.sin_tree strong { display: block; float: left; width: 20.8%;}
div.DB_card_view td.sin_tree strong img { width: 100%; margin-bottom: 7px;}
div.DB_card_view td.sin_tree span { display: block; float: left; width: 40px; height: 100%; background: center center url(//appdata.hungryapp.co.kr/images/sim/wsummoner/ico_arrow_a02.png) no-repeat;}



div.DB_view_reply { margin: 10px 0 20px 0;}
div.DB_view_reply table.tb_reply { margin-bottom: 10px;}
div.DB_listReply { width: 772px; margin: 10px auto 20px auto; margin-bottom: 20px;}




/* 호감도 css*/
div.sim_good { position: relative; margin: 0 auto; width: 772px; font-family: Dotum,돋움; font-size: 12px;}
div.sim_good a { text-decoration: none;}
div.sim_good img { border: none; vertical-align: middle;}
div.sim_good li { list-style: none;}
div.sim_good { width: 770px; margin: 0 auto;}

div.sim_ct { width: 768px; background: #00093d; margin: 10px 0 0 0; padding-top: 10px;
	border: 1px solid #3d5dcb;
	border-radius: 3px;
	-o-border-radius: 3px;
	-ms-border-radius: 3px;
	-moz-border-radius: 3px;
	-webkit-border-radius: 3px;}
div.sim_ct ul { width: 96%; margin: 0 auto;}
div.sim_ct ul li.sim_ctimg { margin: 7px 0; padding: 5px 0; border-top: 1px solid #5a86de; border-bottom: 1px solid #5a86de; }
div.sim_ct ul li.sim_ctimg img { width: 90px; margin-left: 20px;}

div.sim_ct div.sim_gd_search { text-align: center; margin: 20px 0;}
div.sim_ct div.sim_gd_search input { width: 300px; height: 34px; border: 1px solid #3646a9; background: #071464; line-height: 34px; padding-left: 10px; margin: 0 5px; color: #fff;}

div.sim_view_tt { width: 96%; height: 55px; margin: 0 auto; margin-top: 5px; color: #fff; line-height: 65px; font-weight: bold; font-size: 18px; text-align: center;
	background: center center url(//appdata.hungryapp.co.kr/images/sim/wsummoner/bg_good_tt.gif) no-repeat;}

div.sim_viewTop { width: 96%; margin: 0 auto; overflow: hidden; padding: 10px 0 10px 0;}
div.sim_char { width: 50%; float: left; border: 1px solid #657cef;}
div.sim_char img { width: 100%;}
div.sim_info { position: relative; float: right; width: 49%; margin:;}
div.sim_info div.sim_graph p { width: 99.5%; height: 24px; text-align: center; border: 1px solid  #657cef; line-height: 24px; color: #fd7b86; font-weight: bold; font-size: 13px; background: #000329;}


/* 호감도 그래프 : full-size amd harf-size */
ul.ul_graph { position: relative; width: 100%; height: 53px;
	background: center center url(//appdata.hungryapp.co.kr/images/sim/wsummoner/bg_gd_gBg.png) no-repeat;
	background-size: 100% auto;
	-o-background-size: 100% auto;
	-ms-background-size: 100% auto;
	-moz-background-size: 100% auto;
	-webkit-background-size: 100% auto;}
ul.ul_graph02 { background: center center url(//appdata.hungryapp.co.kr/images/sim/wsummoner/bg_gd_gBg02.png) no-repeat;
	background-size: 100% auto;
	-o-background-size: 100% auto;
	-ms-background-size: 100% auto;
	-moz-background-size: 100% auto;
	-webkit-background-size: 100% auto;}
ul.ul_graph li.sim_graph_bar { position: relative; top: 13px; width: 95%; height: 27px; margin: 0 auto;}
ul.ul_graph li.sim_graph_bar02 { width: 97.8%; height: 28px;}
ul.ul_graph li.sim_graph_bar span	{ position: relative; display: block; width: 100%; height: 100%;
	background: center center url(//appdata.hungryapp.co.kr/images/sim/wsummoner/bg_gd_gbar.gif) no-repeat;
	background-size: 100%;
	-o-background-size: 100%;
	-ms-background-size: 100%;
	-moz-background-size: 100%;
	-webkit-background-size: 100%;}
ul.ul_graph li.sim_graph_bar span img.sim_graph_button { position: absolute; top: 50%; right: -6px; margin-top: -27px; cursor: pointer;}
ul.ul_graph li.sim_graph_bar span img.sim_graph_max { position: absolute; top: 50%; left: 50%; margin: -12px 0 0 -114px;}


/* 선물공세 개수 입력 테이블 */
div.sim_ct div.sim_graph table { width: 100%; background: #657cef; margin-bottom: 5px;}
div.sim_ct div.sim_graph table:last-child { margin-bottom: 0;}
div.sim_ct div.sim_graph table th { height: 24px; background: #000329; color: #c9e7ff; font-size: 13px;}
div.sim_ct div.sim_graph table td { padding: 5px 0; background: #000839; color: #c9e7ff; text-align: center;}
div.sim_ct div.sim_graph table td span { display: block; width: 70%; margin: 0 auto;}
div.sim_ct div.sim_graph table td span img { width: 100%; margin-bottom: 1px;}
div.sim_ct div.sim_graph table td span input { width: 70%; height: 20px; background: #5d6589; border: 1px solid #1f2e8e; color: #fff;}
div.sim_ct div.sim_graph table td span strong { line-height: 19px;}


/* 호감도 시뮬 버튼 */
div.sim_view_btn { width: 100%; overflow: hidden; margin: 5px 0;}
div.sim_view_btn a:first-child { float: left;}
div.sim_view_btn a:last-child { float: right;}
div.sim_view_btn02 { width: 100%; margin: 5px 0; text-align: center;}


/* 선물공세 적용 결과 */
div.sim_gdData { width: 96%; margin: 10px auto;}
div.sim_gdData table tr th.sim_th { color: #fff; background: #353d63;}
div.sim_gdData table tr td img { width: 80%;}
div.sim_gdData table tr td:last-child { text-align: left; padding-left: 10px;}
div.sim_gdData table tr td:last-child span { display: inline; font-weight: bold; color: #ff77ff;}

div.sim_gdData table.sim_card tr th, div.sim_gdData table.sim_card tr td { height: 32px;}
div.sim_gdData table.sim_card tr td { width: calc(100% / 9); width: -ms-calc(100% / 9); width: -webkit-calc(100% / 9); width: -moz-calc(100% / 9);}
div.sim_gdData table.sim_card tr td:last-child { width: 12%;}
div.sim_gdData table.sim_card tr td img { width: 80%; margin-bottom: 5px;}